"use client"
import { useEffect, useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { useSearchParams } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { robots } from "@/lib/robot-data"

export default function RobotsPage() {
  const searchParams = useSearchParams()
  const highlightedRobot = searchParams.get("highlight")
  const robotRefs = useRef<{ [key: string]: HTMLDivElement | null }>({})

  // 滚动到高亮的机器人
  useEffect(() => {
    if (highlightedRobot && robotRefs.current[highlightedRobot]) {
      robotRefs.current[highlightedRobot]?.scrollIntoView({
        behavior: "smooth",
        block: "start",
      })
    }
  }, [highlightedRobot])

  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 为 RoboMaster 竞赛开发的机器人</p>
        </div>

        {/* 机器人列表 */}
        <div className="space-y-16">
          {robots.map((robot) => (
            <div
              key={robot.id}
              id={robot.id}
              ref={(el) => {
                robotRefs.current[robot.id] = el;
              }}
              className={`scroll-mt-24 ${highlightedRobot === robot.id ? "ring-2 ring-primary p-4" : ""}`}
            >
              <div className="flex flex-col lg:flex-row gap-8">
                <div className="lg:w-1/2">
                  <div className="relative">
                    <div className="absolute -inset-4 bg-primary/10 blur-xl"></div>
                    <div className="overflow-hidden border border-white/10 relative z-10">
                      <Image
                        src={robot.image || "/placeholder.svg"}
                        alt={robot.name}
                        width={600}
                        height={400}
                        className="w-full h-auto"
                      />
                      <div className="absolute top-0 right-0 bg-primary text-primary-foreground text-xs px-3 py-1">
                        {robot.category}
                      </div>
                      <div className="absolute bottom-0 left-0 p-4">
                        <p className="text-xs text-primary font-mono">{robot.year}</p>
                        <h3 className="text-xl font-bold">{robot.name}</h3>
                      </div>
                    </div>
                  </div>

                  <div className="grid grid-cols-2 gap-4 mt-4">
                    {robot.gallery.map((image, idx) => (
                      <div key={idx} className="overflow-hidden border border-white/10 card-hover-effect">
                        <Image
                          src={image || "/placeholder.svg"}
                          alt={`${robot.name} gallery ${idx + 1}`}
                          width={300}
                          height={200}
                          className="w-full h-auto"
                        />
                      </div>
                    ))}
                  </div>
                </div>

                <div className="lg:w-1/2">
                  <h2 className="text-3xl font-bold mb-4">{robot.name}</h2>
                  <p className="text-muted-foreground mb-6 leading-relaxed">{robot.description}</p>

                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    {robot.specs.map((spec, idx) => (
                      <Card key={idx} className="border-white/10 bg-background/60 backdrop-blur-sm card-hover-effect">
                        <CardContent className="p-4 flex flex-col items-center text-center">
                          <div className="p-2 bg-primary/10 rounded-full mb-2">{spec.icon}</div>
                          <h4 className="text-xs font-bold">{spec.name}</h4>
                          <p className="text-sm text-muted-foreground">{spec.value}</p>
                        </CardContent>
                      </Card>
                    ))}
                  </div>

                  <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">
                      {robot.features.map((feature, idx) => (
                        <li key={idx}>{feature}</li>
                      ))}
                    </ul>
                  </div>

                  <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">
                      {robot.achievements.map((achievement, idx) => (
                        <li key={idx}>{achievement}</li>
                      ))}
                    </ul>
                  </div>

                  <div>
                    <h3 className="font-bold mb-2 text-primary">开发团队:</h3>
                    <div className="flex flex-wrap gap-2">
                      {robot.team.map((member, idx) => (
                        <div key={idx} className="px-3 py-1 bg-primary/10 text-sm flex items-center gap-1">
                          <span>{member.name}</span>
                          <span className="text-xs text-muted-foreground">({member.role})</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </main>
  )
}