"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useMemo, useState } from "react";

type NavItem = { href: string; label: string; desc: string };

type NavGroup = {
  id: string;
  label: string;
  items: NavItem[];
};

const groups: NavGroup[] = [
  {
    id: "general",
    label: "General",
    items: [
      { href: "/admin", label: "Overview", desc: "Resumen y metricas" },
      { href: "/admin/activity", label: "Activity", desc: "Actividad reciente" },
      { href: "/admin/modules", label: "Modules", desc: "Modulos activos" },
    ],
  },
  {
    id: "people",
    label: "Personas",
    items: [
      { href: "/admin/users", label: "Users", desc: "Cuentas y roles" },
      {
        href: "/admin/contractors",
        label: "Contractors",
        desc: "Perfiles verificados",
      },
      { href: "/admin/founders", label: "Founders", desc: "Cupos founders" },
      {
        href: "/admin/verifications",
        label: "Verifications",
        desc: "Documentos pendientes",
      },
    ],
  },
  {
    id: "market",
    label: "Marketplace",
    items: [
      { href: "/admin/requests", label: "Requests", desc: "Solicitudes" },
      { href: "/admin/listings", label: "Listings", desc: "Clasificados" },
      { href: "/admin/jobs", label: "Jobs", desc: "Empleos" },
      { href: "/admin/categories", label: "Categories", desc: "Taxonomia" },
    ],
  },
  {
    id: "ops",
    label: "Operacion",
    items: [
      { href: "/admin/billing", label: "Billing", desc: "Pagos y fees" },
      { href: "/admin/tickets", label: "Tickets", desc: "Soporte" },
      { href: "/admin/blacklist", label: "Blacklist", desc: "Bloqueos" },
      { href: "/admin/security", label: "Security", desc: "Acceso y riesgo" },
    ],
  },
  {
    id: "site",
    label: "Sitio",
    items: [
      { href: "/admin/branding", label: "Branding", desc: "Marca y colores" },
      { href: "/admin/settings", label: "Settings", desc: "Config global" },
      { href: "/admin/tools", label: "Tools", desc: "Utilidades" },
    ],
  },
];

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

export function AdminNav() {
  const pathname = usePathname();

  const activeGroupId = useMemo(() => {
    for (const g of groups) {
      if (g.items.some((i) => isActive(pathname, i.href))) return g.id;
    }
    return "general";
  }, [pathname]);

  const [tab, setTab] = useState(activeGroupId);

  useEffect(() => {
    setTab(activeGroupId);
  }, [activeGroupId]);

  const current = groups.find((g) => g.id === tab) ?? groups[0];

  return (
    <nav className="admin-nav" aria-label="Admin">
      <div className="admin-nav__tabs" role="tablist" aria-label="Categorias">
        {groups.map((g) => {
          const selected = tab === g.id;
          const hasActive = g.items.some((i) => isActive(pathname, i.href));
          return (
            <button
              key={g.id}
              type="button"
              role="tab"
              aria-selected={selected}
              className={`admin-nav__tab ${selected ? "is-selected" : ""} ${hasActive ? "has-active" : ""}`}
              onClick={() => setTab(g.id)}
            >
              {g.label}
            </button>
          );
        })}
      </div>

      <div className="admin-nav__panel" role="tabpanel">
        <div className="admin-nav__grid">
          {current.items.map((item) => {
            const active = isActive(pathname, item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`admin-nav__tile ${active ? "is-active" : ""}`}
                aria-current={active ? "page" : undefined}
              >
                <span className="admin-nav__tile-title">{item.label}</span>
                <span className="admin-nav__tile-desc">{item.desc}</span>
              </Link>
            );
          })}
        </div>
      </div>
    </nav>
  );
}