"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { ReactNode, useEffect, useState } from "react";
import { get } from "@/lib/api";
import Nav from "./Nav";
import KillSwitch from "./KillSwitch";
import { SaveBusProvider } from "./SaveBus";
import { RolesProvider } from "./RolesProvider";
import { Avatar } from "./ui";
import { BookIcon, ChevronDownIcon, LogoutIcon, MenuIcon } from "./icons";
import { ROLE_LABELS, type Role } from "@/lib/roles";

type User = { email: string; name: string; roles: string[] };

/**
 * App shell: a fixed header and a fixed, full-height sidebar. The sidebar collapses
 * to an icon rail via a toggle pinned to the BOTTOM of the nav (not the header), so
 * the nav is always visible and the main content offsets to match the rail width.
 * The header carries the user's avatar + name; clicking it opens a menu with
 * "Learn more" (the User Guide) and "Logout".
 */
export default function AppChrome({ user, children }: { user: User | null; children: ReactNode }) {
  const [collapsed, setCollapsed] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const pathname = usePathname();

  // Read the persisted collapse preference after mount (keeps SSR deterministic).
  useEffect(() => {
    setCollapsed(localStorage.getItem("nav-collapsed") === "1");
  }, []);

  // Apply the AG Grid Enterprise license (if configured) before the grids render.
  useEffect(() => {
    get<{ licenseKey: string }>("ag-grid")
      .then(async (d) => {
        if (d.licenseKey) {
          const { LicenseManager } = await import("ag-grid-enterprise");
          LicenseManager.setLicenseKey(d.licenseKey);
        }
      })
      .catch(() => {});
  }, []);

  // Close the user menu on navigation.
  useEffect(() => {
    setMenuOpen(false);
  }, [pathname]);

  function toggleCollapsed() {
    setCollapsed((c) => {
      const next = !c;
      localStorage.setItem("nav-collapsed", next ? "1" : "0");
      return next;
    });
  }

  return (
    <RolesProvider roles={user?.roles ?? []}>
    <div className="min-h-screen">
      <a
        href="#main"
        className="sr-only focus:not-sr-only focus:absolute focus:left-2 focus:top-2 focus:z-50 focus:rounded-sm focus:bg-brand focus:px-3 focus:py-2 focus:text-white"
      >
        Skip to main content
      </a>

      <header className="fixed inset-x-0 top-0 z-30 h-14 border-b border-slate-200 bg-white">
        <div className="flex h-full items-center gap-3 px-3 sm:px-4">
          <span className="text-base font-semibold text-slate-900 sm:text-lg">AI Data Aggregation</span>

          {user && (
            <div className="ml-auto flex items-center gap-2">
              <KillSwitch />
              <div className="relative">
              <button
                type="button"
                onClick={() => setMenuOpen((o) => !o)}
                aria-haspopup="menu"
                aria-expanded={menuOpen}
                className="flex items-center gap-2 rounded-md p-1.5 hover:bg-slate-100"
              >
                <Avatar name={user.name} email={user.email} />
                <span className="hidden max-w-48 truncate text-sm font-medium text-slate-700 sm:inline">{user.name}</span>
                <ChevronDownIcon className={`h-4 w-4 text-slate-400 transition-transform ${menuOpen ? "rotate-180" : ""}`} />
              </button>

              {menuOpen && (
                <>
                  <button
                    type="button"
                    aria-hidden
                    tabIndex={-1}
                    className="fixed inset-0 z-40 cursor-default"
                    onClick={() => setMenuOpen(false)}
                  />
                  <div
                    role="menu"
                    aria-label="Account"
                    className="absolute right-0 z-50 mt-2 w-60 overflow-hidden rounded-lg border border-slate-200 bg-white py-1 shadow-lg"
                  >
                    <div className="flex items-center gap-3 border-b border-slate-100 px-3 py-3">
                      <Avatar name={user.name} email={user.email} size={36} />
                      <div className="min-w-0">
                        <p className="truncate text-sm font-medium text-slate-900">{user.name}</p>
                        <p className="truncate text-xs text-slate-500">{user.email}</p>
                        {user.roles.length > 0 && (
                          <p className="mt-0.5 truncate text-xs font-medium text-brand">
                            {user.roles.map((r) => ROLE_LABELS[r as Role] ?? r).join(", ")}
                          </p>
                        )}
                      </div>
                    </div>
                    <Link
                      href="/guide"
                      role="menuitem"
                      className="flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 hover:bg-slate-100"
                    >
                      <BookIcon className="h-4 w-4 text-slate-500" />
                      Learn more
                    </Link>
                    <form method="post" action="/api/auth/signout">
                      <button
                        type="submit"
                        role="menuitem"
                        className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-100"
                      >
                        <LogoutIcon className="h-4 w-4 text-slate-500" />
                        Logout
                      </button>
                    </form>
                  </div>
                </>
              )}
              </div>
            </div>
          )}
        </div>
      </header>

      <aside
        className={`fixed bottom-0 left-0 top-14 z-20 flex flex-col border-r border-slate-200 bg-white transition-[width] duration-200 ${
          collapsed ? "w-16" : "w-60"
        }`}
      >
        <div className="flex-1 overflow-y-auto">
          <Nav collapsed={collapsed} />
        </div>
        <div className="border-t border-slate-200 p-2">
          <button
            type="button"
            onClick={toggleCollapsed}
            aria-label={collapsed ? "Expand navigation" : "Collapse navigation"}
            aria-expanded={!collapsed}
            title={collapsed ? "Expand" : "Collapse"}
            className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 ${
              collapsed ? "justify-center" : ""
            }`}
          >
            <MenuIcon className="h-5 w-5 shrink-0" />
            {!collapsed && <span>Collapse</span>}
          </button>
        </div>
      </aside>

      <main
        id="main"
        className={`min-h-screen pt-14 transition-[padding] duration-200 ${collapsed ? "pl-16" : "pl-60"}`}
      >
        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6">
          <SaveBusProvider>{children}</SaveBusProvider>
        </div>
      </main>
    </div>
    </RolesProvider>
  );
}