"use client";
import { useState } from "react";
import type { Artikel, Annotatie } from "@/data/regelgeving";

interface Props {
  artikel: Artikel;
  wetId: string;
  annotaties: Annotatie[];
  isBladwijzer: boolean;
  volledigeTekst?: string;
  onToggleBladwijzer: () => void;
  onAddAnnotatie: (tekst: string) => void;
  onUpdateAnnotatie: (id: string, tekst: string) => void;
  onDeleteAnnotatie: (id: string) => void;
  onSlaVolledigeTekstOp: (tekst: string) => void;
}

export default function ArtikelKaart({
  artikel,
  wetId,
  annotaties,
  isBladwijzer,
  volledigeTekst,
  onToggleBladwijzer,
  onAddAnnotatie,
  onUpdateAnnotatie,
  onDeleteAnnotatie,
  onSlaVolledigeTekstOp,
}: Props) {
  const [uitgevouwen, setUitgevouwen] = useState(false);
  const [toonVolledigeTekst, setToonVolledigeTekst] = useState(false);
  const [bewerkVolledigeTekst, setBewerkVolledigeTekst] = useState(false);
  const [volledigeTekstInput, setVolledigeTekstInput] = useState(volledigeTekst ?? "");
  const [toonAnnotatieForm, setToonAnnotatieForm] = useState(false);
  const [nieuweTekst, setNieuweTekst] = useState("");
  const [bewerkId, setBewerkId] = useState<string | null>(null);
  const [bewerkTekst, setBewerkTekst] = useState("");

  const korteTekst =
    artikel.tekst.length > 200 ? artikel.tekst.slice(0, 200) + "…" : artikel.tekst;

  function handleAddAnnotatie() {
    if (!nieuweTekst.trim()) return;
    onAddAnnotatie(nieuweTekst.trim());
    setNieuweTekst("");
    setToonAnnotatieForm(false);
  }

  function startBewerk(a: Annotatie) {
    setBewerkId(a.id);
    setBewerkTekst(a.tekst);
  }

  function opslaanBewerk() {
    if (bewerkId) {
      onUpdateAnnotatie(bewerkId, bewerkTekst);
      setBewerkId(null);
    }
  }

  return (
    <div id={`artikel-${artikel.id}`} className={`bg-white border rounded-lg shadow-sm transition-shadow hover:shadow-md ${isBladwijzer ? "border-l-4 border-l-amber-400" : ""}`}>
      {/* Header */}
      <div
        className="px-4 py-3 flex items-start gap-3 cursor-pointer select-none"
        onClick={() => setUitgevouwen((v) => !v)}
      >
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="font-mono text-xs font-semibold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded">
              art. {artikel.nummer}
            </span>
            {artikel.titel && (
              <span className="text-sm font-medium text-slate-800">{artikel.titel}</span>
            )}
            {annotaties.length > 0 && (
              <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full">
                {annotaties.length} noot{annotaties.length > 1 ? "s" : ""}
              </span>
            )}
          </div>
          <p className="text-sm text-slate-500 mt-1 leading-relaxed">
            {uitgevouwen ? artikel.tekst : korteTekst}
          </p>
          {artikel.gewijzigd && (
            <p className="text-xs text-slate-400 mt-1">
              Gewijzigd: {new Date(artikel.gewijzigd).toLocaleDateString("nl-BE")}
            </p>
          )}
        </div>
        <div className="flex items-center gap-1 shrink-0 mt-0.5">
          <button
            onClick={(e) => {
              e.stopPropagation();
              onToggleBladwijzer();
            }}
            className={`p-1.5 rounded transition-colors ${
              isBladwijzer
                ? "text-amber-500 hover:text-amber-600"
                : "text-slate-300 hover:text-amber-400"
            }`}
            title={isBladwijzer ? "Bladwijzer verwijderen" : "Bladwijzer toevoegen"}
          >
            ★
          </button>
          <span className="text-slate-400 text-xs">{uitgevouwen ? "▲" : "▼"}</span>
        </div>
      </div>

      {/* Uitgevouwen inhoud */}
      {uitgevouwen && (
        <div className="px-4 pb-4 border-t border-slate-100">
          {/* Trefwoorden */}
          {artikel.trefwoorden.length > 0 && (
            <div className="flex flex-wrap gap-1 mt-3 mb-3">
              {artikel.trefwoorden.map((t) => (
                <span
                  key={t}
                  className="text-xs bg-slate-100 text-slate-500 px-2 py-0.5 rounded-full"
                >
                  {t}
                </span>
              ))}
            </div>
          )}

          {/* Bestaande annotaties */}
          {annotaties.length > 0 && (
            <div className="space-y-2 mb-3">
              <p className="text-xs uppercase tracking-wide text-slate-400 font-medium">
                Notities
              </p>
              {annotaties.map((a) =>
                bewerkId === a.id ? (
                  <div key={a.id} className="flex gap-2">
                    <textarea
                      value={bewerkTekst}
                      onChange={(e) => setBewerkTekst(e.target.value)}
                      className="flex-1 text-sm border border-indigo-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
                      rows={2}
                    />
                    <div className="flex flex-col gap-1">
                      <button
                        onClick={opslaanBewerk}
                        className="text-xs bg-indigo-600 text-white px-2 py-1 rounded"
                      >
                        Opslaan
                      </button>
                      <button
                        onClick={() => setBewerkId(null)}
                        className="text-xs text-slate-400 hover:text-slate-600 px-2 py-1"
                      >
                        Annuleren
                      </button>
                    </div>
                  </div>
                ) : (
                  <div
                    key={a.id}
                    className="bg-amber-50 border border-amber-200 rounded-md px-3 py-2 text-sm text-slate-700 flex items-start gap-2"
                  >
                    <span className="flex-1 whitespace-pre-wrap">{a.tekst}</span>
                    <div className="flex gap-1 shrink-0">
                      <button
                        onClick={() => startBewerk(a)}
                        className="text-xs text-slate-400 hover:text-slate-600"
                        title="Bewerken"
                      >
                        ✏️
                      </button>
                      <button
                        onClick={() => onDeleteAnnotatie(a.id)}
                        className="text-xs text-slate-400 hover:text-red-500"
                        title="Verwijderen"
                      >
                        ×
                      </button>
                    </div>
                  </div>
                )
              )}
            </div>
          )}

          {/* Volledige wettekst */}
          <div className="mb-3">
            <div className="flex items-center justify-between">
              <p className="text-xs uppercase tracking-wide text-slate-400 font-medium">
                Integrale wettekst
              </p>
              <div className="flex gap-2">
                {volledigeTekst && (
                  <button
                    onClick={() => setToonVolledigeTekst((v) => !v)}
                    className="text-xs text-indigo-600 hover:text-indigo-800"
                  >
                    {toonVolledigeTekst ? "Verbergen" : "Tonen"}
                  </button>
                )}
                <button
                  onClick={() => {
                    setBewerkVolledigeTekst(true);
                    setToonVolledigeTekst(true);
                    setVolledigeTekstInput(volledigeTekst ?? "");
                  }}
                  className="text-xs text-slate-400 hover:text-indigo-600"
                >
                  {volledigeTekst ? "✏️ Bewerken" : "+ Toevoegen"}
                </button>
              </div>
            </div>

            {toonVolledigeTekst && volledigeTekst && !bewerkVolledigeTekst && (
              <div className="mt-2 p-3 bg-slate-50 border border-slate-200 rounded-md text-sm text-slate-700 whitespace-pre-wrap leading-relaxed max-h-64 overflow-y-auto font-mono text-xs">
                {volledigeTekst}
              </div>
            )}

            {bewerkVolledigeTekst && (
              <div className="mt-2 space-y-2">
                <textarea
                  value={volledigeTekstInput}
                  onChange={(e) => setVolledigeTekstInput(e.target.value)}
                  placeholder="Plak hier de integrale wettekst…"
                  className="w-full text-xs font-mono border border-slate-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-y"
                  rows={8}
                  autoFocus
                />
                <div className="flex gap-2">
                  <button
                    onClick={() => {
                      onSlaVolledigeTekstOp(volledigeTekstInput);
                      setBewerkVolledigeTekst(false);
                    }}
                    className="text-xs bg-indigo-600 text-white px-3 py-1 rounded"
                  >
                    Opslaan
                  </button>
                  <button
                    onClick={() => setBewerkVolledigeTekst(false)}
                    className="text-xs text-slate-400 hover:text-slate-600 px-2 py-1"
                  >
                    Annuleren
                  </button>
                </div>
              </div>
            )}
          </div>

          {/* Notitie toevoegen */}
          {toonAnnotatieForm ? (
            <div className="flex gap-2">
              <textarea
                value={nieuweTekst}
                onChange={(e) => setNieuweTekst(e.target.value)}
                placeholder="Notitie toevoegen..."
                className="flex-1 text-sm border border-slate-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
                rows={2}
                autoFocus
              />
              <div className="flex flex-col gap-1">
                <button
                  onClick={handleAddAnnotatie}
                  disabled={!nieuweTekst.trim()}
                  className="text-xs bg-indigo-600 text-white px-2 py-1 rounded disabled:opacity-40"
                >
                  Opslaan
                </button>
                <button
                  onClick={() => {
                    setToonAnnotatieForm(false);
                    setNieuweTekst("");
                  }}
                  className="text-xs text-slate-400 hover:text-slate-600 px-2 py-1"
                >
                  Annuleren
                </button>
              </div>
            </div>
          ) : (
            <button
              onClick={() => setToonAnnotatieForm(true)}
              className="text-xs text-indigo-600 hover:text-indigo-800 flex items-center gap-1 mt-1"
            >
              + Notitie toevoegen
            </button>
          )}
        </div>
      )}
    </div>
  );
}