import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Star, Globe } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

const filters = ["All", "Cardiology", "Neurology", "Orthopedics", "Pediatrics"];

const doctors = [
  { id: "chen", name: "Dr. Sarah Chen", specialty: "Cardiology", credentials: "MD, FACC", exp: "15+ years experience", langs: "English, Mandarin", gradient: "from-sky-400 to-teal-400", filter: "Cardiology" },
  { id: "okafor", name: "Dr. James Okafor", specialty: "Neurology", credentials: "MD, PhD, FAAN", exp: "20+ years experience", langs: "English, French", gradient: "from-teal-400 to-emerald-400", filter: "Neurology" },
  { id: "rivera", name: "Dr. Emily Rivera", specialty: "Orthopedics", credentials: "MD, FAAOS", exp: "12+ years experience", langs: "English, Spanish", gradient: "from-indigo-400 to-sky-400", filter: "Orthopedics" },
  { id: "patel", name: "Dr. Michael Patel", specialty: "Pediatrics", credentials: "MD, FAAP", exp: "18+ years experience", langs: "English, Hindi, Gujarati", gradient: "from-violet-400 to-indigo-400", filter: "Pediatrics" },
  { id: "kimura", name: "Dr. Yuki Kimura", specialty: "Cardiology", credentials: "MD, FACC, FHRS", exp: "10+ years experience", langs: "English, Japanese", gradient: "from-rose-400 to-pink-400", filter: "Cardiology" },
  { id: "thompson", name: "Dr. Robert Thompson", specialty: "Neurology", credentials: "MD, FAAN", exp: "22+ years experience", langs: "English", gradient: "from-amber-400 to-orange-400", filter: "Neurology" },
];

export default function DoctorsPage() {
  const [active, setActive] = useState("All");
  const filtered = active === "All" ? doctors : doctors.filter(d => d.filter === active);

  return (
    <div className="min-h-screen bg-background text-foreground antialiased">
      <Header />

      {/* ── HERO ── */}
      <section className="pt-32 pb-16 bg-gradient-to-b from-sky-950 via-slate-900 to-background">
        <div className="mx-auto max-w-4xl px-6 text-center animate-fade-up">
          <Badge variant="secondary" className="mb-4 bg-sky-900/40 text-sky-300 border-sky-700/30 backdrop-blur">Our Team</Badge>
          <h1 className="text-4xl sm:text-5xl font-bold text-white tracking-tight">Our Medical Team</h1>
          <p className="mt-4 text-slate-300 max-w-2xl mx-auto">Board-certified specialists committed to providing exceptional, patient-centered care.</p>
        </div>
      </section>

      {/* ── FILTERS & GRID ── */}
      <section className="py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="flex flex-wrap justify-center gap-3 mb-12 animate-fade-up">
            {filters.map((f) => (
              <Button key={f} variant={active === f ? "default" : "outline"} size="sm" className={`rounded-full px-6 transition-all \${active === f ? "bg-sky-500 hover:bg-sky-600 text-white" : "hover:border-sky-400 hover:text-sky-500"}`} onClick={() => setActive(f)}>
                {f}
              </Button>
            ))}
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger">
            {filtered.map((d, i) => (
              <Card key={d.id} className="group bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border-slate-200/60 dark:border-slate-800/60 hover:shadow-xl hover:-translate-y-1 transition-all duration-300 text-center">
                <CardContent className="p-8">
                  <div className={`mx-auto w-24 h-24 rounded-full bg-gradient-to-br \${d.gradient} flex items-center justify-center text-white text-2xl font-bold mb-5 group-hover:ring-4 group-hover:ring-sky-300/30 transition-all duration-300`}>
                    {d.name.split(" ").filter(n => n.startsWith("D") || !n.startsWith("D")).slice(-2).map(n => n[0]).join("")}
                  </div>
                  <h3 className="text-lg font-semibold">{d.name}</h3>
                  <Badge className="mt-2 bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 border-0">{d.specialty}</Badge>
                  <p className="text-xs text-muted-foreground mt-2 font-medium">{d.credentials}</p>
                  <p className="text-xs text-muted-foreground mt-1">{d.exp}</p>
                  <div className="flex items-center justify-center gap-1.5 mt-3 text-xs text-muted-foreground">
                    <Globe className="h-3 w-3" />
                    <span>{d.langs}</span>
                  </div>
                  <Button asChild size="sm" variant="outline" className="mt-5 rounded-full border-sky-300 text-sky-600 hover:bg-sky-50 dark:border-sky-700 dark:text-sky-400 dark:hover:bg-sky-950 active:scale-[0.97] transition-all">
                    <Link to={`/doctor/\${d.id}`}>View Profile</Link>
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}