"use client";
import { useState } from "react";
import type { Toepassingsgebied, Thema } from "@/data/regelgeving";
import { themaLabels } from "@/data/regelgeving";

interface Props {
  onOpslaan: (data: {
    naam: string;
    code: string;
    volledigeNaam: string;
    toepassingsgebied: Toepassingsgebied;
    themas: Thema[];
    bron: string;
    versie: string;
  }) => void;
  onSluiten: () => void;
}

const gewesten: Toepassingsgebied[] = ["federaal", "Vlaanderen", "Wallonië", "Brussel"];
const alleThemas = Object.keys(themaLabels) as Thema[];

export default function WetToevoegenModal({ onOpslaan, onSluiten }: Props) {
  const [naam, setNaam] = useState("");
  const [code, setCode] = useState("");
  const [volledigeNaam, setVolledigeNaam] = useState("");
  const [toepassingsgebied, setToepassingsgebied] = useState<Toepassingsgebied>("federaal");
  const [geselecteerdeThemas, setGeselecteerdeThemas] = useState<Thema[]>([]);
  const [bron, setBron] = useState("");
  const [versie, setVersie] = useState("");

  function toggleThema(t: Thema) {
    setGeselecteerdeThemas((prev) =>
      prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]
    );
  }

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!naam.trim() || !code.trim()) return;
    onOpslaan({
      naam: naam.trim(),
      code: code.trim().toUpperCase(),
      volledigeNaam: volledigeNaam.trim() || naam.trim(),
      toepassingsgebied,
      themas: geselecteerdeThemas,
      bron: bron.trim(),
      versie: versie.trim() || new Date().toLocaleDateString("nl-BE"),
    });
  }

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
        <div className="px-6 py-4 border-b flex items-center justify-between">
          <h2 className="text-lg font-semibold text-slate-900">Wetgeving toevoegen</h2>
          <button onClick={onSluiten} className="text-slate-400 hover:text-slate-600 text-xl">
            ×
          </button>
        </div>

        <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Afkorting <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={code}
                onChange={(e) => setCode(e.target.value)}
                placeholder="bv. DBO"
                required
                className="w-full text-sm border border-slate-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 uppercase"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Korte naam <span className="text-red-500">*</span>
              </label>
              <input
                type="text"
                value={naam}
                onChange={(e) => setNaam(e.target.value)}
                placeholder="bv. Decreet Bodemdecreet"
                required
                className="w-full text-sm border border-slate-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Volledige naam
            </label>
            <input
              type="text"
              value={volledigeNaam}
              onChange={(e) => setVolledigeNaam(e.target.value)}
              placeholder="Volledige officiële naam van de wet"
              className="w-full text-sm border border-slate-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Toepassingsgebied
            </label>
            <div className="flex gap-2 flex-wrap">
              {gewesten.map((g) => (
                <button
                  key={g}
                  type="button"
                  onClick={() => setToepassingsgebied(g)}
                  className={`text-sm px-3 py-1 rounded-full border transition-colors ${
                    toepassingsgebied === g
                      ? "bg-indigo-600 text-white border-indigo-600"
                      : "text-slate-500 border-slate-300 hover:border-indigo-300"
                  }`}
                >
                  {g}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">Thema&apos;s</label>
            <div className="flex gap-2 flex-wrap">
              {alleThemas.map((t) => (
                <button
                  key={t}
                  type="button"
                  onClick={() => toggleThema(t)}
                  className={`text-xs px-2 py-1 rounded-full border transition-colors ${
                    geselecteerdeThemas.includes(t)
                      ? "bg-indigo-100 text-indigo-700 border-indigo-300"
                      : "text-slate-400 border-slate-200 hover:border-slate-300"
                  }`}
                >
                  {themaLabels[t]}
                </button>
              ))}
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Officiële bron (URL)
              </label>
              <input
                type="url"
                value={bron}
                onChange={(e) => setBron(e.target.value)}
                placeholder="https://www.ejustice.just.fgov.be/..."
                className="w-full text-sm border border-slate-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-slate-700 mb-1">
                Versie / datum
              </label>
              <input
                type="text"
                value={versie}
                onChange={(e) => setVersie(e.target.value)}
                placeholder="bv. geconsolideerd 2024-01-01"
                className="w-full text-sm border border-slate-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
              />
            </div>
          </div>

          <div className="flex gap-3 pt-2 border-t">
            <button
              type="submit"
              disabled={!naam.trim() || !code.trim()}
              className="flex-1 bg-indigo-600 text-white py-2 rounded-md text-sm font-medium hover:bg-indigo-700 disabled:opacity-40 transition-colors"
            >
              Toevoegen
            </button>
            <button
              type="button"
              onClick={onSluiten}
              className="px-4 py-2 text-sm text-slate-600 border border-slate-300 rounded-md hover:bg-slate-50"
            >
              Annuleren
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}