"use client";
import { useState, useMemo } from "react";
import {
  verplichtingen,
  rechtshandelingen,
  regels,
  wetgeving,
  tijdlijn,
  aarden,
  type VastgoedStatus,
  type GewestCode,
} from "@/data/vastgoed-opzoekingen";
import { useGewest } from "@/lib/context/gewest";

const statusKleur: Record<VastgoedStatus, string> = {
  ja:     "bg-green-100 text-green-700 border-green-200",
  nuance: "bg-amber-100 text-amber-700 border-amber-200",
  nee:    "bg-slate-100 text-slate-500 border-slate-200",
  nvt:    "bg-gray-50 text-gray-400 border-gray-200",
};

const statusLabel: Record<VastgoedStatus, string> = {
  ja:     "Verplicht",
  nuance: "Nazien",
  nee:    "Niet verplicht",
  nvt:    "N.v.t.",
};

const gewestLabels: Record<GewestCode, string> = {
  vl: "Vlaanderen",
  br: "Brussels",
  wa: "Wallonië",
};

export default function VastgoedPage() {
  const { gewest: ctxGewest } = useGewest();
  const [gewest, setGewest] = useState<GewestCode>(ctxGewest as GewestCode ?? "vl");
  const [geselecteerdeHandeling, setGeselecteerdeHandeling] = useState<string | null>(null);
  const [zoekterm, setZoekterm] = useState("");
  const [toonTijdlijn, setToonTijdlijn] = useState(false);

  const gefilterd = rechtshandelingen.filter((r) =>
    r.naam.toLowerCase().includes(zoekterm.toLowerCase())
  );

  const handeling = rechtshandelingen.find((r) => r.id === geselecteerdeHandeling);

  const regelsBijHandeling = useMemo(() => {
    if (!geselecteerdeHandeling) return [];
    return verplichtingen.map((v) => {
      const regel = regels.find(
        (r) => r.verplichting === v.id && r.rechtshandeling === geselecteerdeHandeling && r.gewest === gewest
      );
      return { verplichting: v, regel };
    });
  }, [geselecteerdeHandeling, gewest]);

  const teller = useMemo(() => {
    const counts: Record<VastgoedStatus, number> = { ja: 0, nuance: 0, nee: 0, nvt: 0 };
    regelsBijHandeling.forEach(({ regel }) => {
      if (regel) counts[regel.status]++;
    });
    return counts;
  }, [regelsBijHandeling]);

  const gefilterdeTijdlijn = useMemo(
    () => tijdlijn.filter((t) => t.gewest === gewest || t.gewest === "fed"),
    [gewest]
  );

  return (
    <div className="flex h-full">
      {/* Linker paneel */}
      <div className="w-80 shrink-0 border-r bg-white flex flex-col">
        <div className="p-4 border-b space-y-3">
          <h2 className="text-lg font-semibold text-slate-900">Vastgoedopzoekingen</h2>

          {/* Gewest-selector */}
          <div className="flex gap-1">
            {(["vl", "br", "wa"] as GewestCode[]).map((g) => (
              <button
                key={g}
                onClick={() => setGewest(g)}
                className={`flex-1 text-xs py-1.5 rounded-md border font-medium transition-colors ${
                  gewest === g
                    ? "bg-indigo-600 text-white border-indigo-600"
                    : "text-slate-500 border-slate-200 hover:border-indigo-300"
                }`}
              >
                {gewestLabels[g]}
              </button>
            ))}
          </div>

          <input
            type="text"
            placeholder="Zoek rechtshandeling..."
            value={zoekterm}
            onChange={(e) => setZoekterm(e.target.value)}
            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 className="flex-1 overflow-y-auto">
          {aarden.map((aard) => {
            const items = gefilterd.filter((r) => r.aard === aard);
            if (items.length === 0) return null;
            return (
              <div key={aard}>
                <div className="px-4 py-1.5 text-xs font-semibold text-slate-400 uppercase tracking-wide bg-slate-50 border-b">
                  {aard}
                </div>
                {items.map((r) => (
                  <button
                    key={r.id}
                    onClick={() => setGeselecteerdeHandeling(r.id)}
                    className={`w-full text-left px-4 py-2.5 border-b text-sm transition-colors ${
                      geselecteerdeHandeling === r.id
                        ? "bg-indigo-50 border-l-4 border-l-indigo-600"
                        : "hover:bg-slate-50 border-l-4 border-l-transparent"
                    }`}
                  >
                    <div className="font-medium text-slate-800">{r.naam}</div>
                    <div className="text-xs text-slate-400 mt-0.5">{r.sub}</div>
                  </button>
                ))}
              </div>
            );
          })}
        </div>

        <div className="p-3 border-t">
          <button
            onClick={() => setToonTijdlijn((v) => !v)}
            className="w-full text-xs text-indigo-600 hover:text-indigo-800 border border-indigo-200 px-3 py-1.5 rounded-md"
          >
            {toonTijdlijn ? "Verberg tijdlijn" : "Toon regelgevingstijdlijn"}
          </button>
        </div>
      </div>

      {/* Rechter paneel */}
      <div className="flex-1 overflow-y-auto">
        {toonTijdlijn ? (
          <div className="p-8">
            <h2 className="text-xl font-bold text-slate-900 mb-1">Regelgevingstijdlijn</h2>
            <p className="text-sm text-slate-500 mb-6">
              Gewest: <strong>{gewestLabels[gewest]}</strong> (+ federale bepalingen)
            </p>
            <div className="space-y-3">
              {gefilterdeTijdlijn.map((t, i) => (
                <div key={i} className="bg-white border rounded-lg p-4 shadow-sm">
                  <div className="flex items-center gap-3 mb-1">
                    <span className="text-xs font-mono text-slate-400">{t.datum}</span>
                    <span className={`text-xs px-2 py-0.5 rounded-full border ${
                      t.status === "van kracht"
                        ? "bg-green-50 text-green-700 border-green-200"
                        : t.status === "aangekondigd"
                        ? "bg-amber-50 text-amber-700 border-amber-200"
                        : "bg-blue-50 text-blue-700 border-blue-200"
                    }`}>
                      {t.status}
                    </span>
                    <span className="text-xs text-slate-500">{t.gewest}</span>
                  </div>
                  <p className="text-sm text-slate-700 font-medium">{t.verplichting}</p>
                  <p className="text-sm text-slate-500 mt-0.5">{t.omschrijving}</p>
                </div>
              ))}
            </div>
          </div>
        ) : !handeling ? (
          <div className="flex flex-col items-center justify-center h-full text-slate-400">
            <div className="text-5xl mb-4">🏠</div>
            <p className="text-lg font-medium">Selecteer een rechtshandeling</p>
            <p className="text-sm mt-1">De vereiste opzoekingen worden hier getoond.</p>
          </div>
        ) : (
          <div className="p-8">
            <div className="mb-6 flex items-start justify-between">
              <div>
                <p className="text-xs uppercase tracking-wide text-slate-400 mb-1">{handeling.aard}</p>
                <h1 className="text-2xl font-bold text-slate-900">{handeling.naam}</h1>
                <p className="text-sm text-slate-500 mt-1">
                  Gewest: <strong>{gewestLabels[gewest]}</strong> — {handeling.sub}
                </p>
              </div>
              <button
                onClick={() => window.print()}
                className="text-sm text-indigo-600 hover:text-indigo-800 border border-indigo-200 px-3 py-1.5 rounded-md"
              >
                Afdrukken
              </button>
            </div>

            {/* Samenvatting */}
            <div className="flex gap-3 mb-6 flex-wrap">
              {(["ja", "nuance", "nee", "nvt"] as VastgoedStatus[]).map((s) =>
                teller[s] > 0 ? (
                  <div key={s} className={`px-3 py-1.5 rounded-md text-sm border ${statusKleur[s]}`}>
                    {teller[s]} {statusLabel[s]}
                  </div>
                ) : null
              )}
            </div>

            {/* Verplichtingen */}
            <div className="space-y-3">
              {regelsBijHandeling.map(({ verplichting: v, regel }) => {
                const st: VastgoedStatus = regel?.status ?? "nvt";
                const wetRef = wetgeving[v.id];
                const wetEntry = wetRef?.[gewest] ?? wetRef?.fed;
                return (
                  <div
                    key={v.id}
                    className="bg-white border rounded-lg p-4 shadow-sm"
                  >
                    <div className="flex items-start gap-3">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 flex-wrap">
                          <span className="font-medium text-slate-800 text-sm">{v.naam}</span>
                          {v.scope === "fed" && (
                            <span className="text-xs px-1.5 py-0.5 rounded bg-blue-50 text-blue-600 border border-blue-100">
                              federaal
                            </span>
                          )}
                          <span className={`text-xs px-2 py-0.5 rounded-full border ${statusKleur[st]}`}>
                            {statusLabel[st]}
                          </span>
                        </div>
                        {regel?.toelichting && (
                          <p className="text-slate-500 text-sm mt-1">{regel.toelichting}</p>
                        )}
                        {v.cond && (
                          <p className="text-xs text-amber-700 bg-amber-50 border border-amber-100 rounded px-2 py-1 mt-2">
                            {v.cond}
                          </p>
                        )}
                        {regel?.geldig_vanaf && (
                          <p className="text-xs text-slate-400 mt-1">Van kracht vanaf: {regel.geldig_vanaf}</p>
                        )}
                        {wetEntry && (
                          <div className="mt-2 text-xs text-slate-500 border-t pt-2">
                            <span className="font-medium text-slate-600">{wetEntry.tekst}</span>
                            {wetEntry.url && (
                              <a
                                href={wetEntry.url}
                                target="_blank"
                                rel="noopener noreferrer"
                                className="ml-2 text-indigo-500 hover:text-indigo-700 underline"
                              >
                                Wetgeving ↗
                              </a>
                            )}
                            {wetEntry.artikels.length > 0 && (
                              <ul className="mt-1 space-y-0.5 list-disc list-inside">
                                {wetEntry.artikels.map((a, i) => (
                                  <li key={i} className="text-slate-400">
                                    <span className="font-medium text-slate-500">{a.art}</span>
                                    {" — "}{a.toel}
                                  </li>
                                ))}
                              </ul>
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}