import { Link, useLocation, useNavigate } from "@tanstack/react-router";
import {
  LayoutDashboard, CreditCard, BookOpen, MessageSquare,
  Settings, LogOut, Shield, Bell, Package,
} from "lucide-react";
import type { ReactNode } from "react";
import { supabase } from "@/integrations/supabase/client";
import { useAdminGate } from "@/hooks/use-admin-gate";

const NAV = [
  { to: "/admin", label: "Dashboard", icon: LayoutDashboard },
  { to: "/admin/manga", label: "Manga", icon: BookOpen },
  { to: "/admin/payments", label: "Payments", icon: CreditCard },
  { to: "/admin/orders", label: "Orders", icon: Package },
  { to: "/admin/tickets", label: "Tickets", icon: MessageSquare },
  { to: "/admin/settings", label: "Settings", icon: Settings },
] as const;

export function AdminShell({
  title,
  subtitle,
  children,
}: {
  title: string;
  subtitle?: string;
  children: ReactNode;
}) {
  const navigate = useNavigate();
  const location = useLocation();
  const { ready } = useAdminGate();

  const logout = async () => {
    await supabase.auth.signOut();
    navigate({ to: "/admin/login" });
  };

  if (!ready) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-xs tracking-widest uppercase text-muted-foreground animate-pulse">
          Verifying clearance…
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex">
      <aside className="hidden md:flex flex-col w-64 glass-strong border-r border-border min-h-screen sticky top-0">
        <Link to="/admin" className="flex items-center gap-2 p-6 border-b border-border">
          <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center">
            <Shield className="w-5 h-5 text-primary-foreground" />
          </div>
          <div>
            <p className="font-display font-bold tracking-widest text-sm neon-text">MOONVERSE</p>
            <p className="text-[10px] tracking-widest uppercase text-muted-foreground">Console</p>
          </div>
        </Link>
        <nav className="flex-1 p-4 space-y-1">
          {NAV.map((n) => {
            const active = location.pathname === n.to;
            return (
              <Link
                key={n.to}
                to={n.to}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold transition-all ${
                  active
                    ? "bg-gradient-to-r from-primary/20 to-accent/10 text-primary border border-primary/30"
                    : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
                }`}
              >
                <n.icon className="w-4 h-4" />
                {n.label}
              </Link>
            );
          })}
        </nav>
        <button
          onClick={logout}
          className="m-4 flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
        >
          <LogOut className="w-4 h-4" />
          Logout
        </button>
      </aside>

      <main className="flex-1 p-6 md:p-10">
        <header className="flex items-center justify-between mb-10 gap-4 flex-wrap">
          <div>
            <h1 className="font-display text-3xl md:text-4xl font-bold tracking-tight">
              {title}
            </h1>
            {subtitle && <p className="text-sm text-muted-foreground mt-1">{subtitle}</p>}
          </div>
          <div className="flex items-center gap-3">
            <button className="relative w-10 h-10 rounded-xl glass border border-border flex items-center justify-center">
              <Bell className="w-4 h-4" />
            </button>
            <Link to="/" className="text-xs text-muted-foreground hover:text-primary">
              ← View Site
            </Link>
          </div>
        </header>
        {children}
      </main>
    </div>
  );
}