import { Link } from "@tanstack/react-router";
import { useState } from "react";
import { AudioLines, Bot, Cloud, Menu, ShieldCheck, UserRound } from "lucide-react";
import { useAuth } from "@/hooks/use-auth";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

const NAV = [
  { to: "/autonomous", label: "Autonomous Systems", note: "Chat, plan, research, live voice & video agent", icon: Bot },
  { to: "/security", label: "Cybersecurity", note: "Security scans for your published sites", icon: ShieldCheck },
  { to: "/cloud", label: "Codesynux Cloud", note: "Deployments & CodeHub projects", icon: Cloud },
] as const;

export function Wordmark({ className = "" }: { className?: string }) {
  return (
    <span className={`flex items-center gap-2 ${className}`}>
      <img src="/favicon.png" alt="" className="h-8 w-8 object-contain" />
      <span className="text-xl font-bold tracking-tight">Codesynu<span className="text-brand">X</span></span>
    </span>
  );
}

export function AppHeader() {
  const { user } = useAuth();
  const [open, setOpen] = useState(false);

  const icon = "flex h-10 w-10 items-center justify-center rounded-full border border-border bg-card text-foreground transition hover:border-primary hover:text-primary";

  return (
    <header className="sticky top-0 z-40 border-b border-border/60 bg-background/80 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-3 px-4">
        <Link to="/" aria-label="Codesynux home"><Wordmark /></Link>
        <nav className="flex items-center gap-2">
              <Link to="/echo" aria-label="Talk to Echo" className={icon}><AudioLines className="h-4 w-4" /></Link>
              <Link to="/profile" aria-label={user ? "Profile" : "Sign in"} className={icon}><UserRound className="h-4 w-4" /></Link>
              <Sheet open={open} onOpenChange={setOpen}>
                <SheetTrigger aria-label="Menu" className={icon}><Menu className="h-4 w-4" /></SheetTrigger>
                <SheetContent className="bg-background">
                  <SheetHeader><SheetTitle><Wordmark /></SheetTitle></SheetHeader>
                  <div className="mt-4 grid gap-3 px-4">
                    {NAV.map((n) => (
                      <Link key={n.to} to={n.to} onClick={() => setOpen(false)} className="flex items-start gap-3 rounded-2xl border border-border bg-card p-4 transition hover:border-primary" activeProps={{ className: "border-primary" }}>
                        <n.icon className="mt-0.5 h-5 w-5 shrink-0 text-primary" />
                        <span><span className="block font-semibold">{n.label}</span><span className="text-sm text-muted-foreground">{n.note}</span></span>
                      </Link>
                    ))}
                  </div>
                </SheetContent>
              </Sheet>
        </nav>
      </div>
    </header>
  );
}

export { NAV };