"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export type AdminNavItem = {
  href: string;
  icon: string;
  label: string;
};

export type AdminNavGroup = {
  items: AdminNavItem[];
  label: string;
};

const SCROLL_KEY = "admin-sidebar-scroll";

function saveSidebarScroll() {
  const aside = document.querySelector(".admin-sidebar");
  if (aside instanceof HTMLElement) {
    sessionStorage.setItem(SCROLL_KEY, String(aside.scrollTop));
  }
}

function hrefMatchesPath(href: string, pathname: string) {
  if (href === "/admin") {
    return pathname === "/admin";
  }

  return pathname === href || pathname.startsWith(`${href}/`);
}

/** Only the most specific matching nav link is active (avoids /admin/home + child both lit). */
function resolveActiveHref(pathname: string, hrefs: string[]) {
  const matches = hrefs.filter((href) => hrefMatchesPath(href, pathname));
  if (matches.length === 0) {
    return null;
  }

  return matches.sort((a, b) => b.length - a.length)[0];
}

type AdminNavProps = {
  groups: AdminNavGroup[];
};

export function AdminNav({ groups }: AdminNavProps) {
  const pathname = usePathname();
  const navHrefs = ["/admin", ...groups.flatMap((group) => group.items.map((item) => item.href))];
  const activeHref = resolveActiveHref(pathname, navHrefs);

  return (
    <nav className="admin-nav">
      <span className="admin-nav-section-label">Overview</span>
      <Link
        className={`admin-nav-item${activeHref === "/admin" ? " active" : ""}`}
        href="/admin"
        onClick={saveSidebarScroll}
      >
        <span className="admin-nav-icon">▦</span>
        <span>Dashboard</span>
      </Link>
      {groups.map((group) => (
        <div className="admin-nav-section" key={group.label}>
          <span className="admin-nav-section-label">{group.label}</span>
          <div className="admin-flat-nav">
            {group.items.map((link) => (
              <Link
                className={`admin-nav-item${activeHref === link.href ? " active" : ""}`}
                href={link.href}
                key={link.href}
                onClick={saveSidebarScroll}
              >
                <span className="admin-nav-icon">{link.icon}</span>
                <span>{link.label}</span>
              </Link>
            ))}
          </div>
        </div>
      ))}
    </nav>
  );
}