"use client";

import { usePathname } from "next/navigation";
import { useState, type ReactNode } from "react";

export type SidebarIconKey =
  | "overview"
  | "directory"
  | "modules"
  | "ads"
  | "revenue"
  | "sales"
  | "growth"
  | "ops"
  | "comms"
  | "system";

const ICON_PATHS: Record<SidebarIconKey, ReactNode> = {
  overview: (
    <>
      <rect x="3" y="3" width="7" height="9" rx="1.5" />
      <rect x="14" y="3" width="7" height="5" rx="1.5" />
      <rect x="14" y="12" width="7" height="9" rx="1.5" />
      <rect x="3" y="16" width="7" height="5" rx="1.5" />
    </>
  ),
  directory: (
    <>
      <path d="M3 21h18" />
      <path d="M5 21V7l8-4 8 4v14" />
      <path d="M9 9h.01M9 13h.01M9 17h.01M13 9h.01M13 13h.01M13 17h.01" />
    </>
  ),
  modules: (
    <>
      <rect x="3" y="3" width="7" height="7" rx="1.5" />
      <rect x="14" y="3" width="7" height="7" rx="1.5" />
      <rect x="3" y="14" width="7" height="7" rx="1.5" />
      <rect x="14" y="14" width="7" height="7" rx="1.5" />
    </>
  ),
  ads: (
    <>
      <path d="M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1Z" />
      <path d="M15.5 8.5a5 5 0 0 1 0 7" />
      <path d="M18.5 5.5a9 9 0 0 1 0 13" />
    </>
  ),
  revenue: (
    <>
      <circle cx="12" cy="12" r="9" />
      <path d="M14.5 9.5a3 3 0 0 0-2.5-1.5c-1.7 0-3 1-3 2.3 0 3 5.5 1.7 5.5 4.7 0 1.3-1.3 2.3-3 2.3a3 3 0 0 1-2.5-1.5" />
      <path d="M12 6.5v1.5M12 16v1.5" />
    </>
  ),
  sales: (
    <>
      <path d="M3 3v18h18" />
      <path d="M7 14l3.5-3.5 3 3L21 7" />
      <path d="M21 11V7h-4" />
    </>
  ),
  growth: (
    <>
      <path d="M3 17l5-5 4 4 8-8" />
      <path d="M21 8V3h-5" />
      <path d="M3 21h18" />
    </>
  ),
  ops: (
    <>
      <circle cx="12" cy="12" r="3.2" />
      <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1 1.56V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1.11-1.56 1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.88 1.7 1.7 0 0 0-1.56-1H3a2 2 0 1 1 0-4h.09a1.7 1.7 0 0 0 1.56-1.11 1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.7 1.7 0 0 0 1.88.34H9a1.7 1.7 0 0 0 1-1.56V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.56 1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.7 1.7 0 0 0-.34 1.88V9a1.7 1.7 0 0 0 1.56 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.51 1Z" />
    </>
  ),
  comms: (
    <>
      <path d="M4 5h16a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H8l-4 3V6a1 1 0 0 1 1-1Z" />
      <path d="M8 10h8M8 13.5h5" />
    </>
  ),
  system: (
    <>
      <path d="M12 2.5l7.5 4v5c0 4.7-3.2 8.4-7.5 9.5-4.3-1.1-7.5-4.8-7.5-9.5v-5Z" />
      <path d="M9.2 12.2l1.9 1.9 3.7-3.9" />
    </>
  ),
};

export function AdminNavIcon({ icon }: { icon: SidebarIconKey }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.7"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {ICON_PATHS[icon]}
    </svg>
  );
}

function matchesActive(pathname: string, href: string) {
  if (href === "/admin") return pathname === href;
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function SidebarGroup({
  label,
  icon,
  hrefs,
  children,
}: {
  label: string;
  icon: SidebarIconKey;
  hrefs: readonly string[];
  children: ReactNode;
}) {
  const pathname = usePathname();
  const containsActive = hrefs.some((href) => matchesActive(pathname, href));
  const [userOpen, setUserOpen] = useState<boolean | null>(null);
  const expanded = userOpen ?? containsActive;

  return (
    <section className="admin-nav-group" data-active={containsActive}>
      <button
        type="button"
        className="admin-nav-group-btn"
        aria-expanded={expanded}
        onClick={() => setUserOpen(!expanded)}
      >
        <span className="admin-nav-group-icon" aria-hidden="true">
          <AdminNavIcon icon={icon} />
        </span>
        <span className="admin-nav-group-label">{label}</span>
        <svg
          className={`admin-nav-group-chevron ${expanded ? "is-open" : ""}`}
          width="13"
          height="13"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.6"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>
      {expanded ? (
        <nav className="admin-nav-group-body">{children}</nav>
      ) : null}
    </section>
  );
}