"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { adminResources } from "@/lib/adminResources";

const groups = [
  { title: "Main", keys: ["dashboard", "settings"] },
  { title: "People", keys: ["users", "members", "volunteers", "team", "enquiries"] },
  { title: "Beneficiary", keys: ["beneficiaries"] },
  { title: "Membership", keys: ["membership-plans", "membership-payments"] },
  { title: "Identity & Docs", keys: ["id-cards", "certificates"] },
  { title: "Programs", keys: ["projects", "events", "event-registrations", "crowdfunding", "areas"] },
  { title: "Finance & Content", keys: ["donations", "expenses", "receipts", "articles", "banners", "gallery"] },
  { title: "Reports & Logs", keys: ["reports", "otps", "password-resets"] },
];

const icons: Record<string, string> = {
  dashboard: "D",
  settings: "S",
  users: "U",
  members: "M",
  volunteers: "V",
  team: "T",
  enquiries: "E",
  "membership-plans": "P",
  "membership-payments": "$",
  projects: "P",
  events: "V",
  "event-registrations": "R",
  crowdfunding: "$",
  areas: "A",
  donations: "$",
  expenses: "E",
  receipts: "Z",
  articles: "N",
  banners: "B",
  gallery: "G",
  reports: "X",
  otps: "O",
  "password-resets": "K",
  "id-cards": "I",
  certificates: "C",

  beneficiaries: "B",
};

export function AdminShell({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const [ready, setReady] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [user, setUser] = useState<{ name?: string; role?: string } | null>(null);

  useEffect(() => {
    if (!localStorage.getItem("ngo_admin_token")) {
      router.replace("/admin");
      return;
    }

    window.setTimeout(() => {
      try {
        setUser(JSON.parse(localStorage.getItem("ngo_admin_user") || "null"));
      } catch {
        setUser(null);
      }
      setReady(true);
    }, 0);
  }, [router]);

  const logout = () => {
    localStorage.removeItem("ngo_admin_token");
    localStorage.removeItem("ngo_admin_user");
    router.replace("/admin");
  };

  if (!ready) {
    return (
      <div className="grid min-h-screen place-items-center bg-[var(--color-canvas-soft)] text-[var(--color-ink)]">
        <div className="flex items-center gap-2.5 rounded-[6px] border border-[var(--color-hairline)] bg-white px-4 py-3 text-xs font-medium text-[var(--color-ink-mute)] shadow-[var(--shadow-l1)]">
          <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-[var(--color-hairline)] border-t-[var(--color-primary)]" />
          Checking admin session...
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[var(--color-canvas-soft)] text-[var(--color-ink)]">
      {mobileOpen ? (
        <button
          aria-label="Close menu"
          className="fixed inset-0 z-40 bg-[var(--color-canvas-night)]/50 backdrop-blur-[2px] lg:hidden"
          onClick={() => setMobileOpen(false)}
        />
      ) : null}

      <aside
        className={`${mobileOpen ? "translate-x-0" : "-translate-x-full"} fixed inset-y-0 left-0 z-50 w-[248px] border-r border-[var(--color-hairline)] bg-white shadow-[var(--shadow-l2)] transition-transform duration-200 lg:translate-x-0`}
      >
        <div className="flex h-full flex-col">
          <div className="flex h-14 items-center gap-2.5 border-b border-[var(--color-hairline-cool)] px-4">
            <Link href="/admin/dashboard" className="flex min-w-0 items-center gap-2.5">
              <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-[var(--color-canvas-night)] text-[11px] font-medium text-[var(--color-on-dark)]">
                SK
              </span>
              <span className="min-w-0">
                <span className="block truncate text-[13px] font-medium leading-tight">SKSF Admin</span>
                <span className="block truncate text-[10px] font-medium text-[var(--color-ink-mute)]">Operations console</span>
              </span>
            </Link>
          </div>

          <nav className="flex-1 overflow-y-auto px-3 py-4">
            {groups.map((group) => (
              <section key={group.title} className="mb-4">
                <p className="mb-1.5 px-2.5 text-[9.5px] font-medium uppercase tracking-[0.14em] text-[var(--color-ink-mute)]">
                  {group.title}
                </p>
                <div className="grid gap-0.5">
                  {group.keys.map((key) => {
                    const href = key === "dashboard" ? "/admin/dashboard" : `/admin/${key}`;
                    const resource = adminResources.find((item) => item.key === key);
                    const label = key === "dashboard" ? "Dashboard" : resource?.title || key;
                    return (
                      <AdminLink
                        key={key}
                        href={href}
                        label={label}
                        icon={icons[key] || label[0]}
                        active={pathname === href}
                        onClick={() => setMobileOpen(false)}
                      />
                    );
                  })}
                </div>
              </section>
            ))}
          </nav>

          <div className="border-t border-[var(--color-hairline-cool)] p-3">
            <div className="flex items-center gap-2.5 rounded-[6px] border border-[var(--color-hairline-cool)] bg-[var(--color-canvas-soft)] px-2.5 py-2">
              <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[var(--color-canvas-night)] text-[10px] font-medium text-[var(--color-on-dark)]">
                {(user?.name || "Admin").slice(0, 1).toUpperCase()}
              </span>
              <span className="min-w-0">
                <p className="truncate text-[11.5px] font-medium leading-tight">{user?.name || "Admin user"}</p>
                <p className="truncate text-[10px] font-medium capitalize text-[var(--color-ink-mute)]">{user?.role || "admin"}</p>
              </span>
            </div>
          </div>
        </div>
      </aside>

      <div className="lg:pl-[248px]">
        <header className="sticky top-0 z-30 h-14 border-b border-[var(--color-hairline)] bg-white/85 px-3 backdrop-blur-xl sm:px-5 lg:px-6">
          <div className="flex h-full items-center justify-between gap-3">
            <div className="flex min-w-0 items-center gap-2.5">
              <button
                onClick={() => setMobileOpen(true)}
                className="grid h-8 w-8 place-items-center rounded-md border border-[var(--color-hairline)] bg-white text-xs font-medium text-[var(--color-ink-mute)] shadow-sm lg:hidden"
                aria-label="Open menu"
              >
                =
              </button>
              <div className="sm:hidden">
                <p className="text-[9.5px] font-medium uppercase tracking-[0.14em] text-[var(--color-primary-deep)]">Control room</p>
                <h1 className="truncate text-[13px] font-medium leading-tight">SKSF</h1>
              </div>
            </div>

            <div className="flex shrink-0 items-center gap-1.5">
              <Link
                href="/"
                className="hidden rounded-[6px] border border-[var(--color-hairline)] bg-white px-3 py-1.5 text-[11.5px] font-medium text-[var(--color-ink-mute)] shadow-sm transition hover:border-[var(--color-ink)] hover:text-[var(--color-ink)] sm:inline-flex"
              >
                View site
              </Link>
              <button
                onClick={logout}
                className="rounded-[6px] bg-[var(--color-canvas-night)] px-3 py-1.5 text-[11.5px] font-medium text-[var(--color-on-dark)] transition hover:opacity-90"
              >
                Logout
              </button>
            </div>
          </div>
        </header>
        <main className="px-3 py-4 sm:px-5 sm:py-5 lg:px-6">{children}</main>
      </div>
    </div>
  );
}

function AdminLink({
  href,
  label,
  icon,
  active,
  onClick,
}: {
  href: string;
  label: string;
  icon: string;
  active: boolean;
  onClick?: () => void;
}) {
  return (
    <Link
      href={href}
      onClick={onClick}
      className={`group flex items-center justify-between rounded-[6px] px-2.5 py-1.5 text-[11.5px] font-medium transition-colors ${
        active
          ? "bg-[var(--color-canvas-soft)] text-[var(--color-ink)]"
          : "text-[var(--color-ink-mute)] hover:bg-[var(--color-canvas-soft)] hover:text-[var(--color-ink)]"
      }`}
    >
      <span className="flex min-w-0 items-center gap-2.5">
        <span
          className={`grid h-6 w-6 shrink-0 place-items-center rounded-[6px] text-[10px] font-medium transition-colors ${
            active ? "bg-[var(--color-primary)] text-[var(--color-on-primary)]" : "bg-[var(--color-canvas-soft)] text-[var(--color-ink-mute)] group-hover:bg-white"
          }`}
        >
          {icon}
        </span>
        <span className="truncate">{label}</span>
      </span>
      {active ? <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--color-primary)]" /> : null}
    </Link>
  );
}