import { Link } from "@tanstack/react-router";
import { Search, Menu, ChevronDown } from "lucide-react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "@/components/ui/sheet";
import { Dialog, DialogContent, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import courtSeal from "@/assets/court-seal.png.asset.json";

type NavChild = { label: string; to: string; hash?: string };
type NavItem = { label: string; to: string; children?: NavChild[] };

const nav: NavItem[] = [
  { label: "Home", to: "/" },
  {
    label: "About the Court",
    to: "/about",
    children: [
      { label: "Court Overview", to: "/about" },
      { label: "Our History", to: "/about" },
      { label: "Mission & Values", to: "/about" },
      { label: "Court Administration", to: "/about" },
    ],
  },
  {
    label: "Jury Duty",
    to: "/jury-duty",
    children: [
      { label: "eJuror Login", to: "/jury-duty" },
      { label: "Reporting Instructions", to: "/jury-duty" },
      { label: "Orientation Video", to: "/jury-duty" },
      { label: "Juror FAQs", to: "/jury-duty" },
    ],
  },
  {
    label: "Our Judges",
    to: "/judges",
    children: [
      { label: "Circuit Judges", to: "/judges" },
      { label: "Associate Circuit Judges", to: "/judges" },
      { label: "Family Court Commissioners", to: "/judges" },
    ],
  },
  {
    label: "Departments",
    to: "/departments",
    children: [
      { label: "Court Administration", to: "/departments" },
      { label: "Family Court", to: "/departments" },
      { label: "Civil Division", to: "/departments" },
      { label: "Criminal Division", to: "/departments" },
      { label: "Probate Division", to: "/departments" },
    ],
  },
  {
    label: "Forms & Fees",
    to: "/forms",
    children: [
      { label: "Filing Fees", to: "/forms" },
      { label: "Court Forms Library", to: "/forms" },
      { label: "Fee Schedule", to: "/forms" },
      { label: "Pay Fees Online", to: "/forms" },
    ],
  },
  {
    label: "Court Records & Resources",
    to: "/resources",
    children: [
      { label: "Case.net Search", to: "/resources" },
      { label: "Public Records Requests", to: "/resources" },
      { label: "Local Court Rules", to: "/resources" },
      { label: "Self-Help Resources", to: "/resources" },
      { label: "ADA Information", to: "/resources" },
    ],
  },
];

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  return (
    <header className="sticky top-0 z-40 bg-surface-elevated/95 backdrop-blur border-b border-border">
      <div className="mx-auto max-w-7xl px-4 md:px-8">
        <div className="flex items-center justify-between h-20 gap-6">
          <Link to="/" className="flex items-center gap-3 shrink-0 group">
            <img
              src={courtSeal.url}
              alt="16th Judicial Circuit of Missouri — Jackson County seal"
              width={56}
              height={56}
              className="h-14 w-14 object-contain drop-shadow-sm group-hover:scale-105 transition-transform"
            />
            <div className="min-w-0">
              <div className="font-display text-lg md:text-xl font-bold text-primary leading-none">
                16th Judicial Circuit
              </div>
              <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground mt-1">
                State of Missouri
              </div>
            </div>
          </Link>

          <div className="hidden md:flex items-center gap-2 shrink-0">
            <Button asChild variant="ghost" size="sm">
              <a href="https://www.courts.mo.gov/casenet/" target="_blank" rel="noreferrer">Case.net</a>
            </Button>
            <Button
              variant="ghost"
              size="icon"
              aria-label="Open search"
              onClick={() => setSearchOpen(true)}
              className="text-foreground/80 hover:text-primary"
            >
              <Search className="h-5 w-5" />
            </Button>
            <Button asChild variant="court" size="sm">
              <Link to="/contact">Contact Court</Link>
            </Button>
          </div>

          <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
              <Button variant="ghost" size="icon" className="lg:hidden" aria-label="Open menu">
                <Menu className="h-5 w-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-80 overflow-y-auto">
              <SheetTitle className="font-display text-primary">Menu</SheetTitle>
              <Accordion type="single" collapsible className="mt-4">
                {nav.map((item) =>
                  item.children ? (
                    <AccordionItem key={item.label} value={item.label} className="border-border">
                      <AccordionTrigger className="text-foreground hover:text-primary font-semibold">
                        {item.label}
                      </AccordionTrigger>
                      <AccordionContent>
                        <div className="flex flex-col gap-1 pl-2">
                          <Link
                            to={item.to}
                            onClick={() => setOpen(false)}
                            className="px-2 py-1.5 text-sm text-primary font-semibold hover:underline"
                          >
                            Overview
                          </Link>
                          {item.children.map((c) => (
                            <Link
                              key={c.label}
                              to={c.to}
                              onClick={() => setOpen(false)}
                              className="px-2 py-1.5 text-sm text-foreground/80 hover:text-primary"
                            >
                              {c.label}
                            </Link>
                          ))}
                        </div>
                      </AccordionContent>
                    </AccordionItem>
                  ) : (
                    <Link
                      key={item.label}
                      to={item.to}
                      onClick={() => setOpen(false)}
                      className="block px-3 py-3 border-b border-border text-foreground hover:text-primary font-semibold"
                    >
                      {item.label}
                    </Link>
                  ),
                )}
              </Accordion>
              <Button
                variant="court"
                className="mt-4 w-full"
                onClick={() => { setOpen(false); setSearchOpen(true); }}
              >
                <Search className="h-4 w-4" /> Search the site
              </Button>
            </SheetContent>
          </Sheet>
        </div>

        <nav className="hidden lg:flex items-stretch gap-0 border-t border-border/60" aria-label="Main navigation">
          {nav.map((item) => (
            <div key={item.label} className="relative group">
              <Link
                to={item.to}
                className="inline-flex items-center gap-1 px-4 py-3 text-sm font-semibold uppercase tracking-wide text-foreground/85 hover:text-primary hover:bg-secondary/60 transition-colors border-b-2 border-transparent group-hover:border-accent"
                activeProps={{ className: "text-primary bg-secondary/70 border-b-2 border-accent" }}
                activeOptions={{ exact: item.to === "/" }}
              >
                {item.label}
                {item.children && <ChevronDown className="h-3.5 w-3.5 opacity-70" />}
              </Link>
              {item.children && (
                <div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all absolute left-0 top-full pt-1 z-50 min-w-[240px]">
                  <div className="bg-surface-elevated border border-border rounded-md shadow-lg py-2">
                    {item.children.map((c) => (
                      <Link
                        key={c.label}
                        to={c.to}
                        className="block px-4 py-2 text-sm text-foreground/85 hover:bg-secondary hover:text-primary transition-colors"
                      >
                        {c.label}
                      </Link>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ))}
        </nav>
      </div>

      <Dialog open={searchOpen} onOpenChange={setSearchOpen}>
        <DialogContent className="sm:max-w-xl p-0 overflow-hidden">
          <div className="p-6 pb-4 border-b border-border bg-surface">
            <DialogTitle className="font-display text-primary text-xl">Search the Circuit</DialogTitle>
            <DialogDescription className="text-sm text-muted-foreground mt-1">
              Find cases, judges, forms, services and news.
            </DialogDescription>
            <form
              className="mt-4 relative"
              onSubmit={(e) => { e.preventDefault(); setSearchOpen(false); }}
            >
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" aria-hidden />
              <Input
                autoFocus
                type="search"
                placeholder="Try ‘jury duty’, ‘case lookup’, or a judge's name…"
                aria-label="Search the site"
                className="pl-9 h-12 bg-surface-elevated text-base"
              />
            </form>
          </div>
          <div className="p-4">
            <div className="text-[11px] uppercase tracking-[0.18em] text-muted-foreground px-2 pb-2">Popular</div>
            <div className="grid grid-cols-2 gap-1.5">
              {[
                { label: "Jury service", to: "/jury-duty" },
                { label: "Our judges", to: "/judges" },
                { label: "Departments", to: "/departments" },
                { label: "Forms & fees", to: "/forms" },
                { label: "Court records", to: "/resources" },
                { label: "Contact court", to: "/contact" },
              ].map((q) => (
                <Link
                  key={q.label}
                  to={q.to}
                  onClick={() => setSearchOpen(false)}
                  className="px-3 py-2 rounded-md text-sm text-foreground hover:bg-secondary hover:text-primary transition-colors"
                >
                  {q.label}
                </Link>
              ))}
            </div>
          </div>
        </DialogContent>
      </Dialog>
    </header>
  );
}