"use client";

import { useState } from "react";
import { usePathname } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import type { NavGroup } from "@/lib/navigation";

// Kurz und konkret: was man in dem Modul tatsächlich tut.
const DESC: Record<string, string> = {
  "/dashboard": "Tagesüberblick & Schnellzugriff",
  "/chat": "Nachrichten & Kanäle",
  "/meetings": "Besprechungen planen",
  "/calendar": "Termine & Besprechungen",
  "/kanban": "Aufgaben auf Boards",
  "/projects": "Laufende Projekte",
  "/time": "Kommen, gehen & Stunden",
  "/absences": "Urlaub & Krankmeldungen",
  "/creators": "Creator & ihre Zahlen",
  "/positions": "Offene Stellen der Website",
  "/applications": "Eingegangene Bewerbungen",
  "/contact": "Anfragen über die Website",
  "/vault": "Passwörter & Zugangsdaten",
  "/cloud": "Dateien & gemeinsame Ordner",
  "/changelog": "Protokolle & Changelogs",
  "/personnel": "Team, Zeiten & Freigaben",
  "/admin": "Nutzer, Rollen & System",
};

export function HeaderNav({ groups }: { groups: NavGroup[] }) {
  const pathname = usePathname();
  const [open, setOpen] = useState<string | null>(null);

  const isActive = (href: string) => pathname === href || pathname.startsWith(`${href}/`);

  return (
    <div className="header-nav no-scrollbar">
      {groups.map((g) => {
        const groupActive = g.items.some((i) => isActive(i.href));

        if (g.items.length === 1) {
          const it = g.items[0];
          return (
            <a key={g.label} href={it.href} className="nav-top" data-active={isActive(it.href)} data-new={it.isNew}>
              <Icon name={it.icon} size={16} />
              <span className="hidden md:inline">{it.label}</span>
              {it.isNew ? <span className="nav-new-badge">Neu</span> : null}
            </a>
          );
        }

        return (
          <div
            key={g.label}
            className="nav-group"
            onMouseEnter={() => setOpen(g.label)}
            onMouseLeave={() => setOpen((o) => (o === g.label ? null : o))}
          >
            <button
              className="nav-top"
              data-active={groupActive || open === g.label}
              onClick={() => setOpen((o) => (o === g.label ? null : g.label))}
              aria-expanded={open === g.label}
            >
              <Icon name={g.icon} size={16} />
              <span className="hidden md:inline">{g.label}</span>
              <Icon name="chevron" size={12} style={{ transform: "rotate(90deg)", opacity: 0.55 }} />
            </button>

            {open === g.label ? (
              <div className="nav-menu">
                <div className="nav-menu-card card-sm pop-solid animate-in">
                  {g.items.map((it) => (
                    <a
                      key={it.href}
                      href={it.href}
                      className="nav-menu-item"
                      data-active={isActive(it.href)}
                      onClick={() => setOpen(null)}
                    >
                      <span className="nav-menu-icon">
                        <Icon name={it.icon} size={17} />
                      </span>
                      <span className="min-w-0 flex-1">
                        <span className="block font-bold leading-tight">{it.label}</span>
                        <span className="block truncate text-xs text-muted">{DESC[it.href] ?? ""}</span>
                      </span>
                      {it.isNew ? <span className="nav-new-badge">Neu</span> : null}
                    </a>
                  ))}
                </div>
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
}