import { useState, type ReactNode } from "react";
import { Link, useLocation } from "wouter";
import { ShieldCheck } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { apiRequest } from "@/lib/queryClient";
import type { AdminAccessResponse } from "./types";

const navItems = [
  { href: "/admin", label: "Overview" },
  { href: "/admin/users", label: "Users" },
  { href: "/admin/runs", label: "Runs" },
  { href: "/admin/support-tickets", label: "Support" },
  { href: "/admin/invariants", label: "Invariants" },
];

type AdminLayoutProps = {
  adminUser: AdminAccessResponse;
  children: ReactNode;
};

export default function AdminLayout({ adminUser, children }: AdminLayoutProps) {
  const [location] = useLocation();
  const [isLoggingOut, setIsLoggingOut] = useState(false);

  const handleLogout = async () => {
    setIsLoggingOut(true);
    try {
      await apiRequest("POST", "logout");
    } catch {
      // Best effort logout. Always return to the public landing page.
    } finally {
      globalThis.location.assign("/");
    }
  };

  return (
    <div className="min-h-screen bg-[#05070d] text-foreground">
      <header className="border-b border-border/60 bg-background/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-primary/30 bg-primary/10 text-primary">
              <ShieldCheck className="h-5 w-5" />
            </div>
            <div>
              <p className="text-sm font-semibold text-foreground">QuantFortune Admin</p>
              <p className="text-xs text-muted-foreground">Protected control plane</p>
            </div>
          </div>

          <div className="flex items-center gap-3">
            <Badge variant="secondary">{adminUser.role}</Badge>
            <div className="hidden text-right sm:block">
              <p className="text-sm font-medium text-foreground">{adminUser.username}</p>
              <p className="text-xs text-muted-foreground">{adminUser.id}</p>
            </div>
            <Link href="/">
              <a className="text-sm text-muted-foreground transition hover:text-foreground">Back to site</a>
            </Link>
            <Button variant="outline" size="sm" disabled={isLoggingOut} onClick={handleLogout}>
              {isLoggingOut ? "Signing out..." : "Sign out"}
            </Button>
          </div>
        </div>
      </header>

      <main className="pb-12 pt-8">
        <div className="mx-auto flex max-w-7xl flex-col gap-6 px-6 lg:flex-row">
          <aside className="lg:w-64">
            <div className="rounded-2xl border border-border/60 bg-card/70 p-4 shadow-sm">
              <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
                Admin Sections
              </p>
              <nav className="mt-4 flex flex-col gap-2 text-sm">
                {navItems.map((item) => {
                  const active = location === item.href;
                  return (
                    <Link key={item.href} href={item.href}>
                      <a
                        className={`rounded-lg px-3 py-2 transition ${
                          active
                            ? "bg-primary text-primary-foreground"
                            : "text-muted-foreground hover:bg-muted/40 hover:text-foreground"
                        }`}
                      >
                        {item.label}
                      </a>
                    </Link>
                  );
                })}
              </nav>
            </div>
          </aside>
          <section className="flex-1">{children}</section>
        </div>
      </main>
    </div>
  );
}
