"use client"
import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function TeamsPage() {
  const [activeTab, setActiveTab] = useState("mest")

  const teams = [
    {
      id: "mest",
      name: "机械架构组",
      code: "MEST",
      icon: "/icons/mest.svg",
      description:
        "机械架构组负责设计和制造机器人的物理结构，包括底盘、武器系统和机械部件。我们的工作是机器人的骨骼和肌肉，确保它们能够承受比赛中的各种挑战。",
      responsibilities: ["3D 建模与 CAD 出图", "CNC 加工制造", "机械结构分析与优化", "结构装配与测试"],
      projects: [
        {
          title: "轻量化底盘设计",
          description: "通过拓扑优化和材料选择，减轻机器人底盘重量30%，同时保持结构强度。",
          image: "/placeholder.svg?height=300&width=400",
        },
        {
          title: "模块化武器系统",
          description: "开发可快速更换的模块化武器系统，适应不同比赛场景和对手特点。",
          image: "/placeholder.svg?height=300&width=400",
        },
      ],
      skills: ["SolidWorks", "AutoCAD", "有限元分析", "材料学", "加工工艺", "3D打印"],
      members: [
        {
          name: "彭戈",
          role: "组长",
          photo: "/placeholder.svg?height=100&width=100",
        },
        {
          name: "闫芃森",
          role: "机械工程师",
          photo: "/placeholder.svg?height=100&width=100",
        },
      ],
    },
    {
      id: "elct",
      name: "电传测控组",
      code: "ELCT",
      icon: "/icons/elct.svg",
      description:
        "电传测控组开发机器人的配电与控制系统，涵盖电路设计、功率管理和嵌入式开发。我们是机器人的神经系统，使其能够感知环境并执行精确动作。",
      responsibilities: [
        "电路设计与 PCB Layout",
        "功率管理系统设计",
        "电机控制和驱动开发",
        "传感器集成与信号处理",
        "控制理论应用",
      ],
      projects: [
        {
          title: "高效功率管理系统",
          description: "设计能够优化电池使用的功率管理系统，延长机器人作战时间20%。",
          image: "/placeholder.svg?height=300&width=400",
        },
        {
          title: "实时控制系统",
          description: "基于STM32的实时控制系统，实现毫秒级响应和精确的运动控制。",
          image: "/placeholder.svg?height=300&width=400",
        },
      ],
      skills: ["电路设计", "PCB Layout", "嵌入式编程", "控制理论", "信号处理", "RTOS"],
      members: [
        {
          name: "陈卓文",
          role: "组长",
          photo: "/placeholder.svg?height=100&width=100",
        },
      ],
    },
    {
      id: "vsag",
      name: "视觉算法组",
      code: "VSAG",
      icon: "/icons/vsag.svg",
      description:
        "视觉算法组开发计算机视觉和人工智能系统，使机器人能够感知和理解周围环境，实现自主操作。我们是机器人的眼睛和大脑，赋予它智能决策能力。",
      responsibilities: ["计算机视觉算法开发", "对象识别与跟踪", "机器学习模型训练", "实时图像处理优化"],
      projects: [
        {
          title: "实时目标检测系统",
          description: "基于深度学习的目标检测系统，能够在复杂背景下识别和跟踪对手机器人。",
          image: "/placeholder.svg?height=300&width=400",
        },
        {
          title: "自主导航算法",
          description: "结合视觉和传感器数据的自主导航算法，使机器人能够在场地中精确定位和规划路径。",
          image: "/placeholder.svg?height=300&width=400",
        },
      ],
      skills: ["Python", "OpenCV", "TensorFlow/PyTorch", "SLAM", "ROS", "C++"],
      members: [
        {
          name: "黄瑞",
          role: "组长",
          photo: "/placeholder.svg?height=100&width=100",
        },
        {
          name: "韩翔宇",
          role: "视觉工程师",
          photo: "/placeholder.svg?height=100&width=100",
        },
      ],
    },
    {
      id: "pram",
      name: "宣传筹划组",
      code: "PRAM",
      icon: "/icons/pram.svg",
      description:
        "宣传筹划组管理团队品牌、文档、社交媒体和外联工作，以宣传我们的团队并获得赞助，并规划赛季任务、维护战队开发环境。我们是团队的声音和桥梁。",
      responsibilities: ["平面与视觉设计", "社交媒体运营", "招商引资", "战队开发平台运维与项目管理"],
      projects: [
        {
          title: "品牌重塑计划",
          description: "重新设计团队视觉识别系统，提升品牌形象和认知度。",
          image: "/placeholder.svg?height=300&width=400",
        },
        {
          title: "赞助合作项目",
          description: "与多家企业建立赞助合作关系，为团队提供资金和技术支持。",
          image: "/placeholder.svg?height=300&width=400",
        },
      ],
      skills: ["平面设计", "内容创作", "项目管理", "商务谈判", "社交媒体运营", "活动策划"],
      members: [
        {
          name: "李佳睿",
          role: "组长",
          photo: "/placeholder.svg?height=100&width=100",
        },
      ],
    },
  ]

  const activeTeam = teams.find((team) => team.id === activeTab) || teams[0]

  return (
    <main className="min-h-screen bg-background pt-16">
      <div className="container mx-auto px-4 py-16">
        <div className="mb-8">
          <Link href="/">
            <Button variant="ghost" className="button-hover-effect mb-4">
              <ArrowLeft className="mr-2 h-4 w-4" /> 返回首页
            </Button>
          </Link>
          <h1 className="text-4xl font-bold mb-2">团队小组</h1>
          <p className="text-muted-foreground">了解 Simba Robotics 各专业小组的详细信息</p>
        </div>

        <Tabs defaultValue="mest" value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="grid grid-cols-2 md:grid-cols-4 gap-2 bg-transparent">
            {teams.map((team) => (
              <TabsTrigger
                key={team.id}
                value={team.id}
                className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary border border-white/10"
              >
                <div className="flex items-center gap-2">
                  <Image src={team.icon || "/placeholder.svg"} alt={team.name} width={24} height={24} />
                  <span className="hidden md:inline">{team.name}</span>
                  <span className="md:hidden">{team.code}</span>
                </div>
              </TabsTrigger>
            ))}
          </TabsList>

          <div className="mt-8 border border-white/10 p-6 card-hover-effect">
            <div className="flex flex-col md:flex-row gap-6 items-start">
              <div className="md:w-1/3">
                <div className="flex items-center gap-4 mb-6">
                  <div className="p-4 bg-primary/10">
                    <Image src={activeTeam.icon || "/placeholder.svg"} alt={activeTeam.name} width={48} height={48} />
                  </div>
                  <div>
                    <h2 className="text-2xl font-bold">{activeTeam.name}</h2>
                    <p className="text-sm font-mono text-primary">{activeTeam.code}</p>
                  </div>
                </div>

                <p className="text-muted-foreground mb-6 leading-relaxed">{activeTeam.description}</p>

                <div className="mb-6">
                  <h3 className="font-bold mb-2 text-primary">核心职责:</h3>
                  <ul className="space-y-1 pl-5 list-disc text-muted-foreground">
                    {activeTeam.responsibilities.map((item, idx) => (
                      <li key={idx}>{item}</li>
                    ))}
                  </ul>
                </div>

                <div>
                  <h3 className="font-bold mb-2 text-primary">技能要求:</h3>
                  <div className="flex flex-wrap gap-2">
                    {activeTeam.skills.map((skill, idx) => (
                      <span key={idx} className="px-2 py-1 bg-primary/10 text-xs rounded-sm">
                        {skill}
                      </span>
                    ))}
                  </div>
                </div>
              </div>

              <div className="md:w-2/3">
                <h3 className="text-xl font-bold mb-4 border-l-4 border-primary pl-4">代表项目</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                  {activeTeam.projects.map((project, idx) => (
                    <div key={idx} className="border border-white/10 overflow-hidden card-hover-effect">
                      <Image
                        src={project.image || "/placeholder.svg"}
                        alt={project.title}
                        width={400}
                        height={300}
                        className="w-full h-48 object-cover"
                      />
                      <div className="p-4">
                        <h4 className="font-bold mb-2">{project.title}</h4>
                        <p className="text-sm text-muted-foreground">{project.description}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <h3 className="text-xl font-bold mb-4 border-l-4 border-primary pl-4">小组成员</h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {activeTeam.members.map((member, idx) => (
                    <div key={idx} className="border border-white/10 p-4 text-center card-hover-effect">
                      <div className="w-16 h-16 rounded-full overflow-hidden mx-auto mb-2">
                        <Image
                          src={member.photo || "/placeholder.svg"}
                          alt={member.name}
                          width={64}
                          height={64}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <h4 className="font-bold">{member.name}</h4>
                      <p className="text-xs text-muted-foreground">{member.role}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </Tabs>
      </div>
    </main>
  )
}