"use client";
import { useState, type ReactNode } from "react";
import { usePathname, useRouter } from "next/navigation";
import Image from "next/image";
import {
  Menu,
  ChevronDown,
  LayoutDashboard,
  MapPin,
  Ticket,
  LineChart,
  FileText,
  Banknote,
  ArrowDownToLine,
  DollarSign,
  Megaphone,
  Briefcase,
  Users,
  Code2,
  UserRound,
  LogOut,
  Settings,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetDescription,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { ThemeToggle } from "./theme";
import { PreviewLink } from "./preview-context";
import { visibleNavigation, type NavItem } from "./navigation";
import { useSidebar } from "./sidebar-context";
import { useDashboardAuth } from "./dashboard-auth-context";
import { postAuthRequest } from "@/features/auth/auth-client";
import { SessionMonitor } from "@/features/auth/session-lifecycle";
import { toPreviewRole } from "@/features/auth/model";
const icons = {
  dashboard: LayoutDashboard,
  location: MapPin,
  ticket: Ticket,
  chart: LineChart,
  file: FileText,
  bank: Banknote,
  withdraw: ArrowDownToLine,
  dollar: DollarSign,
  announcement: Megaphone,
  organization: Briefcase,
  users: Users,
  code: Code2,
};
function Brand() {
  return (
    <PreviewLink href="/" className="block py-7">
      <Image
        src="/images/logo/logo.svg"
        width={120}
        height={44}
        className="h-11 w-30 object-contain dark:hidden"
        alt="TIAR"
        priority
      />
      <Image
        src="/images/logo/logo-dark.svg"
        width={120}
        height={44}
        className="hidden h-11 w-30 object-contain dark:block"
        alt="TIAR"
        priority
      />
    </PreviewLink>
  );
}
function NavRow({
  item,
  collapsed = false,
  onNavigate,
}: {
  item: NavItem;
  collapsed?: boolean;
  onNavigate?: () => void;
}) {
  const path = usePathname();
  const active = item.href
    ? item.href === "/"
      ? path === "/"
      : path.startsWith(item.href)
    : item.children?.some((c) => path.startsWith(c.href ?? "!"));
  const [open, setOpen] = useState<boolean | null>(null);
  const Icon = icons[item.icon as keyof typeof icons] ?? FileText;
  return (
    <li>
      {item.children?.length ? (
        <>
          <button
            className={`nav-link ${active ? "nav-active" : ""}`}
            aria-expanded={open ?? active}
            title={item.label}
            onClick={() => setOpen(!(open ?? active))}
          >
            <Icon className="size-5 shrink-0" />
            {!collapsed && (
              <>
                <span className="min-w-0 flex-1 text-left">{item.label}</span>
                <ChevronDown
                  className={`size-4 shrink-0 ${(open ?? active) ? "rotate-180" : ""}`}
                />
              </>
            )}
          </button>
          {!collapsed && (open ?? active) && (
            <ul className="ml-9 mt-2 space-y-1">
              {item.children.map((child) => (
                <li key={child.label}>
                  <PreviewLink
                    href={child.href!}
                    onClick={onNavigate}
                    className={`block rounded-lg px-3 py-2.5 text-sm ${path.startsWith(child.href!) ? "bg-accent text-primary" : "text-muted-foreground hover:bg-muted"}`}
                  >
                    <span onClick={onNavigate}>{child.label}</span>
                  </PreviewLink>
                </li>
              ))}
            </ul>
          )}
        </>
      ) : (
        <PreviewLink
          href={item.href!}
          aria-label={item.label}
          onClick={onNavigate}
          className={`nav-link ${active ? "nav-active" : ""}`}
        >
          <Icon className="size-5 shrink-0" />
          {
            <span
              className={collapsed ? "sr-only" : undefined}
              onClick={onNavigate}
            >
              {item.label}
            </span>
          }
        </PreviewLink>
      )}
    </li>
  );
}
export function DashboardShell({ children }: { children: ReactNode }) {
  const router = useRouter();
  const { apiConfigured, session } = useDashboardAuth();
  const { collapsed, setCollapsed } = useSidebar();
  const [mobile, setMobile] = useState(false),
    [hovered, setHovered] = useState(false),
    [signingOut, setSigningOut] = useState(false),
    [signOutError, setSignOutError] = useState("");
  if (!apiConfigured || !session) return null;
  const role = toPreviewRole(session.role);
  const expanded = !collapsed || hovered;
  const nav = visibleNavigation(role);
  async function signOut() {
    setSignOutError("");
    setSigningOut(true);
    const result = await postAuthRequest("logout");
    setSigningOut(false);
    if (!result.ok) {
      setSignOutError(result.error);
      return;
    }
    router.replace("/signin");
    router.refresh();
  }
  const sidebar = (compact = false) => (
    <>
      <Brand />
      <nav aria-label="Main navigation" className="space-y-6 pb-8">
        {nav.map((group) => (
          <div key={group.label}>
            <p className="mb-3 px-3 text-xs uppercase tracking-wide text-muted-foreground">
              {compact ? "•••" : group.label}
            </p>
            <ul className="space-y-3">
              {group.items.map((item) => (
                <NavRow
                  key={item.label}
                  item={item}
                  collapsed={compact}
                  onNavigate={() => setMobile(false)}
                />
              ))}
            </ul>
          </div>
        ))}
      </nav>
    </>
  );
  return (
    <div className="min-h-screen">
      <a
        href="#main"
        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-80 focus:rounded-lg focus:bg-card focus:p-4"
      >
        Skip to content
      </a>
      <aside
        onFocusCapture={() => setHovered(true)}
        onBlurCapture={(event) => {
          if (!event.currentTarget.contains(event.relatedTarget))
            setHovered(false);
        }}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        className={`fixed inset-y-0 left-0 z-40 hidden overflow-y-auto border-r bg-card px-5 transition-[width] lg:block ${expanded ? "w-[290px]" : "w-[90px]"}`}
      >
        {sidebar(!expanded)}
      </aside>
      <div
        className={`transition-[margin] ${collapsed ? "lg:ml-[90px]" : "lg:ml-[290px]"}`}
      >
        <header className="sticky top-0 z-30 flex min-h-20 flex-wrap items-center justify-between gap-3 border-b bg-card px-4 py-3 md:px-6">
          <div className="flex items-center gap-3">
            <Button
              variant="outline"
              size="icon"
              aria-label="Toggle sidebar"
              onClick={() => {
                if (window.innerWidth < 1024) setMobile(!mobile);
                else setCollapsed(!collapsed);
              }}
            >
              <Menu className="size-5" />
            </Button>
            <span className="hidden text-sm text-muted-foreground xl:block">
              Monetization
            </span>
          </div>
          <div className="flex items-center gap-2 sm:gap-4">
            <ThemeToggle />
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <button
                  aria-label="Account menu"
                  className="flex items-center gap-2 rounded-lg p-1"
                >
                  <span className="flex size-10 items-center justify-center rounded-full bg-accent text-primary">
                    <UserRound className="size-5" />
                  </span>
                  <span className="hidden font-medium sm:block">
                    {session.email}
                  </span>
                  <ChevronDown className="size-4" />
                </button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-60">
                <DropdownMenuLabel>
                  {session.email}
                  <span className="mt-1 block text-xs font-normal text-muted-foreground">
                    {`${role.replaceAll("-", " ")} · ${session.tenantCode}`}
                  </span>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem asChild>
                  <PreviewLink href="/profile">
                    <UserRound className="mr-2 size-4" />
                    Edit profile
                  </PreviewLink>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <PreviewLink href="/organization/subscription">
                    <Settings className="mr-2 size-4" />
                    Subscriptions
                  </PreviewLink>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem
                  disabled={signingOut}
                  onSelect={(event) => {
                    event.preventDefault();
                    void signOut();
                  }}
                >
                  <LogOut className="mr-2 size-4" />
                  {signingOut ? "Signing out…" : "Sign out"}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </header>
        <main id="main" className="mx-auto max-w-[1536px] p-4 md:p-6">
          <SessionMonitor session={session} />
          {signOutError && (
            <p role="alert" className="mb-4 text-sm text-destructive">
              {signOutError}
            </p>
          )}
          {children}
        </main>
      </div>
      <Sheet open={mobile} onOpenChange={setMobile}>
        <SheetContent
          side="left"
          className="w-[290px] overflow-y-auto bg-card p-5"
        >
          <div className="sr-only">
            <SheetTitle>Navigation</SheetTitle>
            <SheetDescription>Monetization workspace navigation</SheetDescription>
          </div>
          {sidebar()}
        </SheetContent>
      </Sheet>
    </div>
  );
}