"use client";

import { BarChart3, Building2, History, LayoutGrid, Network, Users } from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";

const NAV_ITEMS = [
  { href: "/", label: "Übersicht", icon: LayoutGrid },
  { href: "/employees", label: "Mitarbeiter:innen", icon: Users },
  { href: "/orgchart", label: "Organigramm", icon: Network },
  { href: "/positions", label: "Positionen & Bereiche", icon: Building2 },
  { href: "/reports", label: "Berichte", icon: BarChart3 },
  { href: "/audit", label: "Audit-Log", icon: History },
] as const;

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

  return (
    <nav className="fixed left-0 top-0 flex h-full w-[236px] flex-col border-r border-border bg-white">
      <div className="flex h-14 items-center border-b border-border px-5">
        <span className="text-base font-extrabold text-brand-700">Alpenwerk HR</span>
      </div>
      <ul className="flex-1 space-y-1 px-3 py-4">
        {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
          const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
          return (
            <li key={href}>
              <Link
                href={href}
                className={`flex items-center gap-3 rounded px-3 py-2 text-sm font-semibold transition-colors ${
                  active ? "bg-brand-100 text-brand-700" : "text-ink-body hover:bg-surface"
                }`}
              >
                <Icon className="h-4 w-4 shrink-0" />
                {label}
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}