import { createFileRoute, Link } from "@tanstack/react-router";
import { PageShell, PageHero } from "@/components/site/page-shell";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Search, ArrowRight, FileText, Users, Briefcase, Calendar } from "lucide-react";

export const Route = createFileRoute("/search-results")({
  head: () => ({
    meta: [
      { title: "Search — 16th Judicial Circuit" },
      { name: "description", content: "Search court records, judges, forms, and resources across the 16th Judicial Circuit." },
    ],
  }),
  component: SearchResultsPage,
});

const results = [
  { type: "Form", icon: FileText, title: "Petition for Dissolution of Marriage (FA-220)", excerpt: "Official form for filing a divorce petition in Jackson County family court…", url: "/forms" },
  { type: "Service", icon: Briefcase, title: "Jury Service Information", excerpt: "Jury service is one of the most important civic duties you can perform. Reporting instructions…", url: "/services/detail" },
  { type: "Judge", icon: Users, title: "Hon. Kevin D. Harrell — Presiding Judge", excerpt: "Biography, division assignment, and contact information for the Presiding Judge…", url: "/judges" },
  { type: "News", icon: Calendar, title: "Governor names Tricia Scaglia to Division 30", excerpt: "Tricia Scaglia will join the 16th Circuit's family court division beginning January 5…", url: "/news/article" },
  { type: "Service", icon: Briefcase, title: "Drug Court Program", excerpt: "Treatment court providing supervised recovery for justice-involved adults…", url: "/services" },
  { type: "Form", icon: FileText, title: "Application for Public Defender (CR-505)", excerpt: "Used to request indigent defense representation in criminal cases…", url: "/forms" },
];

function SearchResultsPage() {
  return (
    <PageShell>
      <PageHero
        eyebrow="Search"
        title="Results for 'family court'"
        description="Found 42 results across forms, services, judges, and news."
        breadcrumb={[{ label: "Home", to: "/" }, { label: "Search" }]}
      />

      <section className="py-10">
        <div className="mx-auto max-w-7xl px-4 md:px-8">
          <Card className="border-border mb-8">
            <CardContent className="p-4 flex gap-3">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" aria-hidden />
                <Input defaultValue="family court" aria-label="Search" className="pl-9" />
              </div>
              <Button variant="court">Search</Button>
            </CardContent>
          </Card>

          <div className="grid lg:grid-cols-12 gap-8">
            <aside className="lg:col-span-3">
              <Card className="border-border">
                <CardContent className="p-5">
                  <h3 className="font-display font-semibold text-primary text-sm uppercase tracking-wider">Filter by type</h3>
                  <ul className="mt-4 space-y-1 text-sm">
                    {[
                      ["All results", 42, true],
                      ["Forms", 14],
                      ["Services", 9],
                      ["Judges", 6],
                      ["News", 8],
                      ["Resources", 5],
                    ].map(([name, count, active]) => (
                      <li key={name as string}>
                        <button className={`w-full flex justify-between px-3 py-2 rounded-md ${active ? "bg-primary text-primary-foreground" : "hover:bg-secondary"}`}>
                          <span>{name}</span><span className={active ? "" : "text-muted-foreground"}>{count}</span>
                        </button>
                      </li>
                    ))}
                  </ul>
                </CardContent>
              </Card>
            </aside>

            <div className="lg:col-span-9 space-y-4">
              {results.map((r) => (
                <Link key={r.title} to={r.url} className="group block">
                  <Card className="border-border hover:border-accent hover:shadow-court transition-all">
                    <CardContent className="p-6 flex gap-5">
                      <div className="h-11 w-11 rounded-lg bg-primary/8 text-primary flex items-center justify-center shrink-0">
                        <r.icon className="h-5 w-5" aria-hidden />
                      </div>
                      <div className="min-w-0 flex-1">
                        <Badge variant="secondary" className="bg-accent/15 text-accent-foreground border-0 mb-2">{r.type}</Badge>
                        <h3 className="font-display font-semibold text-primary text-lg group-hover:text-primary-hover">{r.title}</h3>
                        <p className="text-sm text-muted-foreground mt-1.5 leading-relaxed">{r.excerpt}</p>
                        <span className="text-xs text-accent-foreground mt-3 inline-flex items-center gap-1 font-medium">{r.url} <ArrowRight className="h-3 w-3" /></span>
                      </div>
                    </CardContent>
                  </Card>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </section>
    </PageShell>
  );
}