import { useState, type ReactNode } from "react";
import { Link, useNavigate, useRouterState } from "@tanstack/react-router";
import {
  Bell,
  CalendarDays,
  Compass,
  Home,
  LogOut,
  Plus,
  Search,
  Shield,
  User as UserIcon,
} from "lucide-react";
import { supabase } from "@/integrations/supabase/client";
import { useAuth, useIsAdmin } from "@/hooks/useAuth";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

const NAV = [
  { to: "/", label: "Home", icon: Home },
  { to: "/discover", label: "Discover", icon: Compass },
  { to: "/calendar", label: "Calendar", icon: CalendarDays },
  { to: "/my-events", label: "My Events", icon: Bell },
  { to: "/profile", label: "Profile", icon: UserIcon },
] as const;

export function Logo() {
  return (
    <Link to="/" className="flex items-center gap-2">
      <span className="grid h-9 w-9 place-items-center rounded-xl bg-primary text-primary-foreground glow-primary">
        <span className="text-lg font-black">H</span>
      </span>
      <span className="font-display text-lg font-extrabold tracking-tight">HOTSPOTS</span>
    </Link>
  );
}

export function AppShell({ children }: { children: ReactNode }) {
  const { userId } = useAuth();
  const isAdmin = useIsAdmin(userId);
  const navigate = useNavigate();
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const [term, setTerm] = useState("");

  async function signOut() {
    await supabase.auth.signOut();
    navigate({ to: "/auth", replace: true });
  }

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-40 border-b border-border/70 bg-background/85 backdrop-blur-xl">
        <div className="mx-auto flex h-16 max-w-6xl items-center gap-6 px-4">
          <Logo />
          <nav className="hidden flex-1 items-center gap-1 md:flex">
            {NAV.slice(0, 4).map((item) => (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "rounded-full px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
                  pathname === item.to && "bg-secondary text-foreground",
                )}
              >
                {item.label}
              </Link>
            ))}
            {isAdmin && (
              <Link
                to="/admin"
                className="rounded-full px-3 py-2 text-sm font-medium text-gold transition-colors hover:bg-secondary"
              >
                Admin
              </Link>
            )}
          </nav>
          <form
            className="ml-auto hidden items-center md:flex"
            onSubmit={(e) => {
              e.preventDefault();
              navigate({ to: "/discover", search: { q: term.trim() || undefined } });
            }}
          >
            <div className="relative">
              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={term}
                onChange={(e) => setTerm(e.target.value)}
                placeholder="Search events…"
                aria-label="Search events"
                className="h-9 w-44 rounded-full pl-9 lg:w-60"
              />
            </div>
          </form>
          <div className="ml-auto flex items-center gap-2 md:ml-0">
            <Button asChild size="icon" variant="ghost" className="md:hidden" aria-label="Search">
              <Link to="/discover">
                <Search className="h-5 w-5" />
              </Link>
            </Button>
            <Button asChild size="sm" variant="secondary" className="hidden sm:inline-flex">
              <Link to="/submit">
                <Plus className="mr-1 h-4 w-4" /> Submit event
              </Link>
            </Button>
            {userId ? (
              <>
                <Button asChild size="icon" variant="ghost" className="hidden md:inline-flex">
                  <Link to="/profile" aria-label="Profile">
                    <UserIcon className="h-5 w-5" />
                  </Link>
                </Button>
                <Button size="icon" variant="ghost" onClick={signOut} aria-label="Sign out">
                  <LogOut className="h-5 w-5" />
                </Button>
              </>
            ) : (
              <Button asChild size="sm">
                <Link to="/auth">Sign in</Link>
              </Button>
            )}
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-6xl px-4 pb-28 pt-6 md:pb-16">{children}</main>

      <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-background/95 pb-[env(safe-area-inset-bottom)] backdrop-blur-xl md:hidden">
        <div className="mx-auto grid max-w-lg grid-cols-5">
          {NAV.map((item) => {
            const Icon = item.icon;
            const active = pathname === item.to;
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "flex flex-col items-center gap-1 py-3 text-[11px] font-medium",
                  active ? "text-primary" : "text-muted-foreground",
                )}
              >
                <Icon className="h-5 w-5" />
                {item.label}
              </Link>
            );
          })}
        </div>
      </nav>

      {isAdmin && (
        <Link
          to="/admin"
          className="fixed bottom-24 right-4 z-40 grid h-12 w-12 place-items-center rounded-full bg-gold text-gold-foreground shadow-lg md:hidden"
          aria-label="Admin"
        >
          <Shield className="h-5 w-5" />
        </Link>
      )}
    </div>
  );
}