"use client"
import Image from "next/image"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

export default function HistoryPage() {
  // 历届队员数据
  const teamMembers = [
    {
      year: "2024-2025",
      captain: "彭戈",
      members: [
        {
          name: "彭戈",
          role: "队长 / 机械组",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "华为 2012 实验室",
          message: "在 Simba Robotics 的经历让我学会了如何将理论知识应用到实际工程中，感谢团队给我的成长机会。",
        },
        {
          name: "陈卓文",
          role: "电控组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "上海交通大学 - 机器人研究所",
          message: "团队合作是最宝贵的财富，希望 Simba Robotics 越来越好！",
        },
        {
          name: "黄瑞",
          role: "视觉组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "腾讯 AI Lab",
          message: "感谢战队给我提供的平台，让我在计算机视觉领域找到了自己的方向。",
        },
        {
          name: "李佳睿",
          role: "宣筹组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "字节跳动 - 产品经理",
          message: "在战队的经历锻炼了我的沟通能力和项目管理能力，这些都是职场中的宝贵财富。",
        },
        {
          name: "韩翔宇",
          role: "视觉工程师",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "清华大学 - 人工智能研究院",
          message: "感谢战队的培养，让我有机会接触前沿技术，为我的学术道路打下基础。",
        },
        {
          name: "闫芃森",
          role: "机械工程师",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "大疆创新 - 机械设计工程师",
          message: "在战队的日日夜夜是我最珍贵的回忆，希望学弟学妹们继续努力！",
        },
      ],
    },
    {
      year: "2022-2023",
      captain: "陈志强",
      members: [
        {
          name: "陈志强",
          role: "队长 / 电控组",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "上海微电子装备有限公司",
          message: "战队是我大学时光中最重要的一部分，希望 Simba Robotics 在未来的比赛中取得更好的成绩！",
        },
        {
          name: "林小明",
          role: "机械组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "哈尔滨工业大学 - 机器人研究所",
          message: "感谢战队给我提供的锻炼机会，让我在机械设计方面有了长足的进步。",
        },
        {
          name: "黄海",
          role: "视觉组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "商汤科技 - 计算机视觉工程师",
          message: "在战队的经历是我求职路上的重要资本，感谢团队的每一位成员。",
        },
        {
          name: "张丽",
          role: "宣筹组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "阿里巴巴 - 市场营销",
          message: "战队教会了我如何在有限的资源下实现最大的价值，这是职场中非常重要的能力。",
        },
      ],
    },
    {
      year: "2021-2022",
      captain: "王建国",
      members: [
        {
          name: "王建国",
          role: "队长 / 视觉组",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "百度 - 自动驾驶部门",
          message: "创建战队的初衷是为了让更多学生有机会接触机器人技术，看到现在的发展，我感到非常欣慰。",
        },
        {
          name: "李明",
          role: "机械组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "中国科学院 - 自动化研究所",
          message: "希望战队能够继续发扬技术创新的精神，在比赛中取得更好的成绩。",
        },
        {
          name: "张伟",
          role: "电控组组长",
          photo: "/placeholder.svg?height=100&width=100",
          destination: "特斯拉中国 - 电气工程师",
          message: "战队的经历让我明白了团队合作的重要性，这是任何成功项目的基础。",
        },
      ],
    },
  ]

  // 历届机器人数据
  const robots = [
    {
      year: "2023-2024",
      models: [
        {
          name: "Sentinel MK-III",
          image: "/placeholder.svg?height=300&width=400",
          description: "我们的旗舰防御机器人，配备先进装甲板和360°旋转炮塔系统。",
          achievements: ["区域赛最佳设计奖", "全国赛技术挑战赛亚军"],
        },
        {
          name: "Striker X2",
          image: "/placeholder.svg?height=300&width=400",
          description: "高机动性攻击单元，设计用于快速交战和战略定位。",
          achievements: ["区域赛最佳性能奖"],
        },
      ],
    },
    {
      year: "2022-2023",
      models: [
        {
          name: "Sentinel MK-II",
          image: "/placeholder.svg?height=300&width=400",
          description: "Sentinel系列的第二代，增强了火力和防御能力。",
          achievements: ["全国赛最佳工程奖", "区域赛冠军"],
        },
        {
          name: "Scout Drone Alpha",
          image: "/placeholder.svg?height=300&width=400",
          description: "我们的第一款侦察无人机，提供战场情报和有限的攻击能力。",
          achievements: ["创新设计奖"],
        },
      ],
    },
    {
      year: "2021-2022",
      models: [
        {
          name: "Sentinel MK-I",
          image: "/placeholder.svg?height=300&width=400",
          description: "Sentinel系列的初代机型，为后续发展奠定了基础。",
          achievements: ["区域赛最佳新秀奖"],
        },
      ],
    },
  ]

  return (
    <main className="min-h-screen bg-background">
      <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">探索我们团队的发展历程、历届队员和机器人作品</p>
        </div>

        {/* 历届队员部分 */}
        <section className="mb-16">
          <h2 className="text-2xl font-bold mb-6 border-l-4 border-primary pl-4">历届队员</h2>

          {teamMembers.map((team, index) => (
            <div key={index} className="mb-12">
              <h3 className="text-xl font-bold mb-4 text-primary">{team.year} 赛季</h3>
              <p className="mb-4">队长: {team.captain}</p>

              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                {team.members.map((member, idx) => (
                  <TooltipProvider key={idx}>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <div className="border border-white/10 p-4 card-hover-effect text-center cursor-pointer">
                          <div className="w-20 h-20 rounded-full overflow-hidden mx-auto mb-3">
                            <Image
                              src={member.photo || "/placeholder.svg"}
                              alt={member.name}
                              width={80}
                              height={80}
                              className="object-cover w-full h-full"
                            />
                          </div>
                          <h4 className="font-bold">{member.name}</h4>
                          <p className="text-xs text-muted-foreground">{member.role}</p>
                        </div>
                      </TooltipTrigger>
                      <TooltipContent
                        side="right"
                        className="max-w-xs p-4 bg-background/95 backdrop-blur-md border border-white/10"
                      >
                        <div className="space-y-2">
                          <h5 className="font-bold text-primary">{member.name} - 现状</h5>
                          <p className="text-sm font-medium">{member.destination}</p>
                          <div className="pt-2 border-t border-white/10">
                            <p className="text-sm italic">"{member.message}"</p>
                          </div>
                        </div>
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                ))}
              </div>
            </div>
          ))}
        </section>

        {/* 历届机器人部分 */}
        <section>
          <h2 className="text-2xl font-bold mb-6 border-l-4 border-primary pl-4">历届机器人</h2>

          {robots.map((year, index) => (
            <div key={index} className="mb-12">
              <h3 className="text-xl font-bold mb-4 text-primary">{year.year} 赛季机器人</h3>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {year.models.map((robot, idx) => (
                  <Card key={idx} className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect">
                    <CardHeader>
                      <CardTitle>{robot.name}</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="mb-4">
                        <Image
                          src={robot.image || "/placeholder.svg"}
                          alt={robot.name}
                          width={400}
                          height={300}
                          className="w-full h-auto object-cover"
                        />
                      </div>
                      <p className="text-muted-foreground mb-4">{robot.description}</p>
                      <div>
                        <h5 className="font-bold mb-2">获得荣誉:</h5>
                        <ul className="list-disc pl-5">
                          {robot.achievements.map((achievement, aidx) => (
                            <li key={aidx} className="text-sm text-muted-foreground">
                              {achievement}
                            </li>
                          ))}
                        </ul>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </div>
          ))}
        </section>
      </div>
    </main>
  )
}
