import { createFileRoute } from "@tanstack/react-router";
import { PageShell, PageHero } from "@/components/site/page-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Search, Building2 } from "lucide-react";

export const Route = createFileRoute("/judges")({
  head: () => ({
    meta: [
      { title: "Our Judges — 16th Judicial Circuit of Missouri" },
      {
        name: "description",
        content:
          "Directory of circuit judges, associate circuit judges, commissioners, and visiting judges of the 16th Judicial Circuit of Missouri.",
      },
    ],
  }),
  component: JudgesPage,
});

type Person = { division: string; name: string; role: string; group: Group };
type Group = "Presiding" | "Circuit" | "Associate" | "Commissioner" | "Visiting";

const people: Person[] = [
  { division: "01", name: "Sarah A. Castle", role: "Circuit Judge", group: "Circuit" },
  { division: "02", name: "Kenneth R. Garrett III", role: "Circuit Judge", group: "Circuit" },
  { division: "03", name: "Jerri J. Zhang", role: "Circuit Judge", group: "Circuit" },
  { division: "04", name: "Patrick C. Edwards", role: "Circuit Judge", group: "Circuit" },
  { division: "05", name: "James F. Kanatzar", role: "Circuit Judge", group: "Circuit" },
  { division: "06", name: "Michelle L. Cocayne", role: "Circuit Judge", group: "Circuit" },
  { division: "07", name: "John G. Gromowsky", role: "Circuit Judge", group: "Circuit" },
  { division: "08", name: "Bryan E. Round", role: "Circuit Judge", group: "Circuit" },
  { division: "09", name: "Joel P. Fahnestock", role: "Circuit Judge", group: "Circuit" },
  { division: "10", name: "Marty W. Seaton", role: "Circuit Judge", group: "Circuit" },
  { division: "11", name: "Adam L. Caine", role: "Circuit Judge", group: "Circuit" },
  { division: "12", name: "Jennifer M. Phillips", role: "Circuit Judge", group: "Circuit" },
  { division: "13", name: "Charles H. McKenzie", role: "Circuit Judge", group: "Circuit" },
  { division: "14", name: "Lauren D. Barrett", role: "Circuit Judge", group: "Circuit" },
  { division: "14", name: "Amy B. DeGraeve", role: "Commissioner", group: "Commissioner" },
  { division: "14", name: "Kelly J. Willyard", role: "Deputy Commissioner", group: "Commissioner" },
  { division: "15", name: "Jalilah Otto", role: "Circuit Judge", group: "Circuit" },
  { division: "16", name: "Jessica Agnelly", role: "Circuit Judge", group: "Circuit" },
  { division: "17", name: "Cory L. Atkins", role: "Circuit Judge", group: "Circuit" },
  { division: "18", name: "Kevin D. Harrell", role: "Presiding Judge", group: "Presiding" },
  { division: "19", name: "Mark A. Styles, Jr.", role: "Circuit Judge", group: "Circuit" },
  { division: "25", name: "Abbie Rothermich", role: "Associate Circuit Judge", group: "Associate" },
  { division: "26", name: "R. Travis Willingham", role: "Associate Circuit Judge", group: "Associate" },
  { division: "27", name: "Kea S. Bird‑Riley", role: "Associate Circuit Judge", group: "Associate" },
  { division: "28", name: "Jeffrey C. Keal", role: "Associate Circuit Judge", group: "Associate" },
  { division: "29", name: "Janette K. Rodecap", role: "Associate Circuit Judge", group: "Associate" },
  { division: "30", name: "Patricia M. Scaglia", role: "Associate Circuit Judge", group: "Associate" },
  { division: "31", name: "Mary F. Weir", role: "Associate Circuit Judge", group: "Associate" },
  { division: "32", name: "Kyndra J. Stockdale", role: "Associate Circuit Judge", group: "Associate" },
  { division: "33", name: "Jeffrey Bushur", role: "Associate Circuit Judge", group: "Associate" },
  { division: "34", name: "Susan E. Long", role: "Associate Circuit Judge", group: "Associate" },
  { division: "40", name: "Daniel C. Berezoski", role: "Commissioner", group: "Commissioner" },
  { division: "41", name: "Katie Rooney", role: "Commissioner", group: "Commissioner" },
  { division: "42", name: "Robert E. Gordon", role: "Commissioner", group: "Commissioner" },
  { division: "43", name: "Lisa M. Dubé", role: "Commissioner", group: "Commissioner" },
  { division: "44", name: "Nancy Alemifar", role: "Commissioner", group: "Commissioner" },
  { division: "45", name: "Michelle P. Dixon", role: "Commissioner", group: "Commissioner" },
  { division: "50", name: "Tiffany D. Gregg", role: "Commissioner", group: "Commissioner" },
  { division: "60", name: "Visiting Judges", role: "Visiting Division", group: "Visiting" },
];

const initials = (n: string) =>
  n.split(" ").filter(Boolean).map((p) => p[0]).slice(0, 2).join("");

function PersonCard({ p }: { p: Person }) {
  return (
    <Card className="h-full border-border hover:border-accent hover:shadow-court transition-all">
      <CardContent className="p-5">
        <div className="flex items-start gap-4">
          <div className="h-12 w-12 rounded-full gradient-hero flex items-center justify-center text-accent font-display font-bold shrink-0">
            {initials(p.name)}
          </div>
          <div className="min-w-0 flex-1">
            <h3 className="font-display font-semibold text-primary leading-tight">{p.name}</h3>
            <p className="text-sm text-muted-foreground mt-1">{p.role}</p>
            <div className="flex items-center gap-2 mt-3 text-xs">
              <Badge variant="secondary" className="bg-primary/10 text-primary border-0">
                Division {p.division}
              </Badge>
            </div>
          </div>
        </div>
        <div className="mt-4 pt-4 border-t border-border flex items-center gap-1.5 text-xs text-muted-foreground">
          <Building2 className="h-3.5 w-3.5" /> Jackson County Courthouse
        </div>
      </CardContent>
    </Card>
  );
}

function Section({ title, group }: { title: string; group: Group }) {
  const list = people.filter((p) => p.group === group);
  return (
    <div>
      <div className="flex items-end justify-between flex-wrap gap-3 mb-5">
        <h3 className="font-display text-2xl font-bold text-primary">{title}</h3>
        <span className="text-sm text-muted-foreground">{list.length} member{list.length === 1 ? "" : "s"}</span>
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {list.map((p) => <PersonCard key={p.division + p.name} p={p} />)}
      </div>
    </div>
  );
}

function JudgesPage() {
  const presiding = people.find((p) => p.group === "Presiding")!;
  return (
    <PageShell>
      <PageHero
        eyebrow="Our Judges"
        title="The Honorable Judges of the 16th Judicial Circuit"
        description="Nineteen circuit judges, ten associate circuit judges, and nine commissioners serve the citizens of Jackson County."
        breadcrumb={[{ label: "Home", to: "/" }, { label: "Our Judges" }]}
      />

      <section className="py-16">
        <div className="mx-auto max-w-7xl px-4 md:px-8">
          <Card className="overflow-hidden border-border shadow-court">
            <div className="grid lg:grid-cols-12">
              <div className="lg:col-span-5 gradient-hero flex items-center justify-center p-10">
                <div className="h-44 w-44 rounded-full bg-accent/10 ring-4 ring-accent/40 flex items-center justify-center text-accent font-display text-5xl font-bold">
                  {initials(presiding.name)}
                </div>
              </div>
              <div className="lg:col-span-7 p-8 md:p-12">
                <Badge className="bg-accent/15 text-accent-foreground border border-accent/30 mb-4">
                  Presiding Judge · Division {presiding.division}
                </Badge>
                <h2 className="font-display text-3xl md:text-4xl font-bold text-primary">
                  The Honorable {presiding.name}
                </h2>
                <p className="mt-4 text-muted-foreground leading-relaxed">
                  As Presiding Judge of the 16th Judicial Circuit, Judge {presiding.name.split(" ").slice(-1)[0]} oversees
                  the administration of the Court, supervises judicial assignments, and represents
                  the Circuit before the Missouri Supreme Court and the public.
                </p>
              </div>
            </div>
          </Card>
        </div>
      </section>

      <section className="pb-20 bg-surface py-16">
        <div className="mx-auto max-w-7xl px-4 md:px-8">
          <div className="flex items-end justify-between flex-wrap gap-4 mb-8">
            <div>
              <h2 className="font-display text-3xl font-bold text-primary">Judges directory</h2>
              <p className="text-muted-foreground mt-2">Browse by role or search by name.</p>
            </div>
            <div className="relative w-full max-w-sm">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" aria-hidden />
              <Input placeholder="Search judges…" aria-label="Search judges" className="pl-9 bg-card" />
            </div>
          </div>

          <Tabs defaultValue="circuit">
            <TabsList className="bg-card flex flex-wrap h-auto">
              <TabsTrigger value="circuit">Circuit Judges</TabsTrigger>
              <TabsTrigger value="associate">Associate Circuit Judges</TabsTrigger>
              <TabsTrigger value="commissioner">Commissioners</TabsTrigger>
              <TabsTrigger value="visiting">Visiting Judges</TabsTrigger>
            </TabsList>
            <TabsContent value="circuit" className="mt-6">
              <Section title="Circuit Judges" group="Circuit" />
            </TabsContent>
            <TabsContent value="associate" className="mt-6">
              <Section title="Associate Circuit Judges" group="Associate" />
            </TabsContent>
            <TabsContent value="commissioner" className="mt-6">
              <Section title="Commissioners" group="Commissioner" />
            </TabsContent>
            <TabsContent value="visiting" className="mt-6">
              <Section title="Visiting Judges" group="Visiting" />
            </TabsContent>
          </Tabs>
        </div>
      </section>
    </PageShell>
  );
}