"use client";
import { usePathname } from "next/navigation";
import { useGewest, type Gewest } from "@/lib/context/gewest";

const GEWESTEN: Gewest[] = ["Vlaanderen", "Wallonië", "Brussel"];

/**
 * Routes waar het gewest het resultaat daadwerkelijk beïnvloedt (tarieven,
 * barema's, rekenmodules). In alle andere modules doet de keuze niets — daar
 * blijft deze balk dus bewust weg. Dit is bovendien de ENIGE plaats in de UI
 * om het gewest te wijzigen (de vroegere selector in de Sidebar gold overal,
 * ook waar hij niets deed, en is geschrapt als dubbel gebruik).
 */
const GEWEST_AFHANKELIJKE_ROUTES: RegExp[] = [
  /^\/belasting(\/|$)/,
  /^\/ereloon(\/|$)/,
  /^\/vastgoed(\/|$)/,
  /^\/dossier\/[^/]+/, // detailpagina van een dossier — niet de lijst /dossier
];

export default function GewestBanner() {
  const pathname = usePathname();
  const { gewest, setGewest } = useGewest();

  if (!GEWEST_AFHANKELIJKE_ROUTES.some((r) => r.test(pathname))) return null;

  return (
    <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 bg-brand-50 border-b-2 border-brand-200 px-4 md:px-8 py-3 text-sm text-center">
      <span className="text-brand-800 font-medium">
        Deze module rekent en verwijst op basis van het gewest <strong>{gewest}</strong>.
      </span>
      <div className="flex gap-2" role="group" aria-label="Gewest wijzigen">
        {GEWESTEN.map((g) => (
          <button
            key={g}
            onClick={() => setGewest(g)}
            aria-pressed={gewest === g}
            className={`text-sm px-4 py-2 rounded-lg border-2 font-semibold transition-colors ${
              gewest === g
                ? "bg-brand-600 text-white border-brand-600 shadow-sm"
                : "bg-white text-brand-700 border-brand-300 hover:border-brand-500 hover:bg-brand-100"
            }`}
          >
            {g}
          </button>
        ))}
      </div>
    </div>
  );
}