"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { modules } from "@/lib/modules";
import GewestSelector from "./GewestSelector";

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

  return (
    <aside className="w-64 shrink-0 bg-slate-900 text-slate-100 flex flex-col min-h-screen">
      <div className="px-5 py-6 border-b border-slate-700">
        <p className="text-xs uppercase tracking-widest text-slate-400 mb-1">Notary.AI</p>
        <h1 className="text-lg font-semibold leading-tight">Notarieel assistent</h1>
      </div>

      <div className="px-5 py-4 border-b border-slate-700">
        <GewestSelector />
      </div>

      <nav className="flex-1 px-3 py-4 space-y-1">
        <Link
          href="/"
          className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
            pathname === "/"
              ? "bg-slate-700 text-white"
              : "text-slate-300 hover:bg-slate-800 hover:text-white"
          }`}
        >
          <span>🏠</span>
          <span>Dashboard</span>
        </Link>

        <div className="pt-3 pb-1 px-3">
          <p className="text-xs uppercase tracking-wider text-slate-500">Modules</p>
        </div>

        {modules.map((module) => (
          <Link
            key={module.id}
            href={module.beschikbaar ? module.href : "#"}
            className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors ${
              !module.beschikbaar
                ? "text-slate-600 cursor-not-allowed"
                : pathname === module.href
                ? "bg-indigo-600 text-white"
                : "text-slate-300 hover:bg-slate-800 hover:text-white"
            }`}
          >
            <span>{module.icoon}</span>
            <span className="flex-1">{module.titel}</span>
            {!module.beschikbaar && (
              <span className="text-xs bg-slate-700 text-slate-400 px-1.5 py-0.5 rounded">
                binnenkort
              </span>
            )}
          </Link>
        ))}
      </nav>

      <div className="px-5 py-4 border-t border-slate-700">
        <p className="text-xs text-slate-500">
          Tarieven ter indicatie.
          <br />
          Raadpleeg steeds de actuele wetgeving.
        </p>
      </div>
    </aside>
  );
}