"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Activity, Award, BarChart3, Coins, FlaskConical, Gamepad2, Gift, HeartPulse, LayoutDashboard, LogOut, Menu, Settings, ShieldAlert, Target, Users, UsersRound, X } from "lucide-react";
import { SpinzaMark } from "@/components/brand/logo";
import { cn } from "@/lib/utils";
import { useAdmin } from "./store";
import { Pill } from "./primitives";

interface NavItem {
  href: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
}

const SECTIONS: { title: string; items: NavItem[] }[] = [
  { title: "Overview", items: [{ href: "/admin", label: "Dashboard", icon: LayoutDashboard }] },
  {
    title: "Operations",
    items: [
      { href: "/admin/users", label: "Users", icon: Users },
      { href: "/admin/games", label: "Games", icon: Gamepad2 },
      { href: "/admin/simulator", label: "Game Simulator", icon: FlaskConical },
    ],
  },
  {
    title: "Insights",
    items: [
      { href: "/admin/economy", label: "Economy", icon: Coins },
      { href: "/admin/analytics/games", label: "Game Analytics", icon: BarChart3 },
      { href: "/admin/analytics/players", label: "Player Analytics", icon: UsersRound },
    ],
  },
  {
    title: "Progression",
    items: [
      { href: "/admin/missions", label: "Missions", icon: Target },
      { href: "/admin/achievements", label: "Achievements", icon: Award },
      { href: "/admin/rewards", label: "Daily Rewards", icon: Gift },
    ],
  },
  {
    title: "Platform",
    items: [
      { href: "/admin/system", label: "System Health", icon: HeartPulse },
      { href: "/admin/security", label: "Security", icon: ShieldAlert },
      { href: "/admin/settings", label: "Settings", icon: Settings },
    ],
  },
];

const ALL_ITEMS = SECTIONS.flatMap((s) => s.items);

function isActive(path: string, href: string) {
  return href === "/admin" ? path === "/admin" : path === href || path.startsWith(href + "/");
}

function currentTitle(path: string): string {
  const hit = ALL_ITEMS.filter((i) => isActive(path, i.href)).sort((a, b) => b.href.length - a.href.length)[0];
  if (!hit) return "Admin";
  if (path.startsWith("/admin/users/") && path !== "/admin/users") return "User detail";
  if (path.startsWith("/admin/games/") && path !== "/admin/games") return "Game detail";
  return hit.label;
}

export function AdminShell({ children }: { children: React.ReactNode }) {
  const path = usePathname() ?? "/admin";
  const [open, setOpen] = React.useState(false);
  const admin = useAdmin((s) => s.admin);
  const maintenance = useAdmin((s) => s.maintenance);
  const node = useAdmin((s) => s.node);
  const version = useAdmin((s) => s.version);
  const signOut = useAdmin((s) => s.signOut);
  const loadStatus = useAdmin((s) => s.loadStatus);

  React.useEffect(() => {
    const t = setInterval(() => {
      if (document.visibilityState === "visible") void loadStatus();
    }, 60_000);
    return () => clearInterval(t);
  }, [loadStatus]);

  const nav = (
    <nav className="flex flex-1 flex-col gap-4 overflow-y-auto px-3 py-3">
      {SECTIONS.map((s) => (
        <div key={s.title}>
          <div className="eyebrow mb-1 px-2 text-[10px]">{s.title}</div>
          <ul className="flex flex-col gap-0.5">
            {s.items.map((it) => {
              const active = isActive(path, it.href);
              return (
                <li key={it.href}>
                  <Link href={it.href} onClick={() => setOpen(false)} aria-current={active ? "page" : undefined} className={cn("flex items-center gap-2.5 rounded-sm px-2 py-1.5 text-[13px] font-medium transition-colors", active ? "bg-surface-3 text-fg" : "text-fg-3 hover:bg-surface-2 hover:text-fg-2")}>
                    <it.icon className={cn("h-4 w-4 shrink-0", active ? "text-accent-2" : "text-fg-4")} />
                    {it.label}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      ))}
    </nav>
  );

  return (
    <div className="min-h-dvh bg-bg lg:grid lg:grid-cols-[224px_1fr]">
      {/* Sidebar (desktop) */}
      <aside className="sticky top-0 hidden h-dvh flex-col border-r border-line bg-bg-1/70 lg:flex">
        <Link href="/admin" className="flex h-14 items-center gap-2 border-b border-line px-4">
          <SpinzaMark className="h-6 w-6" glow={false} />
          <span className="text-[15px] font-semibold tracking-tight">
            SPIN<span className="text-accent">ZA</span>
          </span>
          <span className="ml-1 rounded-xs border border-line px-1.5 py-px text-[10px] font-bold uppercase tracking-wider text-fg-3">Admin</span>
        </Link>
        {nav}
        <div className="border-t border-line px-4 py-3 text-[11px] leading-relaxed text-fg-4">
          Internal console. Virtual credits only — SC have no cash value.
          <div className="mt-1 flex items-center gap-1.5 font-mono text-[11px] text-fg-4">
            <Activity className="h-3 w-3" /> {node ?? "—"} · v{version ?? "—"}
          </div>
        </div>
      </aside>

      {/* Mobile drawer */}
      {open ? (
        <div className="fixed inset-0 lg:hidden" style={{ zIndex: "var(--z-sheet)" }}>
          <div className="absolute inset-0 bg-black/70" onClick={() => setOpen(false)} />
          <div className="absolute inset-y-0 left-0 flex w-[260px] flex-col bg-bg-1 shadow-2xl">
            <div className="flex h-14 items-center justify-between border-b border-line px-4">
              <span className="text-[15px] font-semibold tracking-tight">
                SPIN<span className="text-accent">ZA</span> <span className="text-fg-3">Admin</span>
              </span>
              <button onClick={() => setOpen(false)} className="tap grid place-items-center rounded-md text-fg-3 hover:text-fg" aria-label="Close menu">
                <X className="h-5 w-5" />
              </button>
            </div>
            {nav}
          </div>
        </div>
      ) : null}

      <div className="flex min-h-dvh min-w-0 flex-col">
        <header className="sticky top-0 border-b border-line bg-bg-1/80 backdrop-blur" style={{ zIndex: "var(--z-nav)", paddingTop: "var(--safe-top)" }}>
          <div className="flex h-14 items-center justify-between gap-3 px-4 lg:px-6">
            <div className="flex min-w-0 items-center gap-3">
              <button onClick={() => setOpen(true)} className="tap -ml-2 grid place-items-center rounded-md text-fg-3 hover:text-fg lg:hidden" aria-label="Open menu">
                <Menu className="h-5 w-5" />
              </button>
              <div className="truncate text-[13px] font-semibold text-fg">{currentTitle(path)}</div>
            </div>
            <div className="flex items-center gap-2 sm:gap-3">
              {maintenance ? (
                maintenance.enabled ? (
                  <Pill tone="danger" dot>
                    Maintenance
                  </Pill>
                ) : (
                  <Pill tone="success" dot>
                    Live
                  </Pill>
                )
              ) : (
                <Pill tone="muted">…</Pill>
              )}
              <span className="hidden font-mono text-[11px] text-fg-3 md:inline">
                {node ?? "—"} · v{version ?? "—"}
              </span>
              <span className="hidden items-center gap-2 rounded-full border border-line bg-surface px-2.5 py-1 text-[12px] sm:inline-flex">
                <span className="grid h-5 w-5 place-items-center rounded-full bg-accent text-[10px] font-bold text-bg">{admin?.username.slice(0, 1).toUpperCase()}</span>
                <span className="font-medium">{admin?.username}</span>
                <span className="text-fg-4">{admin?.role}</span>
              </span>
              <button onClick={() => void signOut()} className="tap grid place-items-center rounded-md text-fg-3 hover:text-fg focus-ring" aria-label="Log out" title="Log out">
                <LogOut className="h-4 w-4" />
              </button>
            </div>
          </div>
        </header>
        <main className="flex-1 px-4 py-5 lg:px-6 lg:py-6">
          <div className="mx-auto w-full max-w-[1480px]">{children}</div>
        </main>
      </div>
    </div>
  );
}