"use client";
import { useMemo, useState } from "react";
import { woordDiff, segmenteerVoorbeeld, type DiffSegment, type VoorbeeldSegment } from "@/data/modeldocumenten";

/** Eén kolom-inhoud: de huidige (nieuwe) tekst, optioneel met de vorige tekst om tegen te diffen. */
export interface VoorbeeldKolomData {
  label: string;
  tekst: string;
  /** Aanwezig ⇒ toon een woord-diff t.o.v. deze vorige tekst i.p.v. platte tekst. */
  vorigeTekst?: string;
  /** Groene noot onder de kolomkop, bv. "2 clausules nog niet vertaald". */
  opmerking?: string;
}

function DiffTekst({ segmenten }: { segmenten: DiffSegment[] }) {
  return (
    <>
      {segmenten.map((s, i) => {
        if (s.soort === "gelijk") return <span key={i}>{s.tekst}</span>;
        if (s.soort === "toegevoegd")
          return (
            <ins key={i} className="bg-emerald-100 text-emerald-900 no-underline rounded-sm">
              {s.tekst}
            </ins>
          );
        return (
          <del key={i} className="bg-red-100 text-red-700 rounded-sm">
            {s.tekst}
          </del>
        );
      })}
    </>
  );
}

/**
 * Kleurt het voorbeeld: de vaste ONTWERPTEKST in het zwart, de HYPOTHESES
 * (te kiezen varianten) in het rood — zodat de notaris in één oogopslag ziet
 * wat de eigenlijke akte-/documenttekst is en wat een keuze-hypothese is.
 */
function GekleurdVoorbeeld({ segmenten }: { segmenten: VoorbeeldSegment[] }) {
  return (
    <>
      {segmenten.map((s, i) => (
        <span key={i} className={s.soort === "hypothese" ? "text-red-700" : "text-slate-900"}>
          {i > 0 ? "\n" : ""}
          {s.tekst}
        </span>
      ))}
    </>
  );
}

/** Kopieerknop die de ingevulde voorbeeldtekst van deze kolom naar het klembord zet. */
function KopieerKnop({ tekst }: { tekst: string }) {
  const [gekopieerd, setGekopieerd] = useState(false);
  async function kopieer() {
    try {
      await navigator.clipboard.writeText(tekst.trim());
      setGekopieerd(true);
      setTimeout(() => setGekopieerd(false), 2000);
    } catch {
      // Klembord niet beschikbaar (bv. onveilige context) — stil negeren.
    }
  }
  return (
    <button
      onClick={kopieer}
      title="Kopieer het ingevulde voorbeeld naar het klembord"
      className={`shrink-0 text-[11px] font-medium px-2 py-0.5 rounded border transition-colors ${
        gekopieerd
          ? "border-emerald-300 text-emerald-700 bg-emerald-50"
          : "border-slate-300 text-slate-500 hover:border-brand-300 hover:text-brand-700 bg-white"
      }`}
    >
      {gekopieerd ? "✓ Gekopieerd" : "📋 Kopieer"}
    </button>
  );
}

function VoorbeeldKolom({ label, tekst, vorigeTekst, opmerking }: VoorbeeldKolomData) {
  const diff = useMemo(
    () => (vorigeTekst !== undefined ? woordDiff(vorigeTekst, tekst) : null),
    [vorigeTekst, tekst]
  );
  // In de diff-weergave (wijzigingsvoorstel) primeert de rood/groen-markering;
  // anders kleuren we ontwerptekst (zwart) vs. hypotheses (rood).
  const gekleurd = useMemo(() => (diff ? null : segmenteerVoorbeeld(tekst)), [diff, tekst]);
  return (
    <div className="flex-1 min-w-0 border border-slate-200 rounded-lg overflow-hidden">
      <div className="flex items-center gap-2 bg-slate-50 px-3 py-1.5 border-b border-slate-200">
        <p className="flex-1 text-xs font-semibold text-slate-500 uppercase tracking-wide">
          {label}
        </p>
        {tekst.trim() && <KopieerKnop tekst={tekst} />}
      </div>
      {opmerking && (
        <p className="text-[11px] text-emerald-800 bg-emerald-50 px-3 py-1 border-b border-emerald-100">
          {opmerking}
        </p>
      )}
      <pre className="text-xs text-slate-900 whitespace-pre-wrap font-mono leading-relaxed p-3 max-h-80 overflow-y-auto">
        {tekst.trim()
          ? diff
            ? <DiffTekst segmenten={diff} />
            : <GekleurdVoorbeeld segmenten={gekleurd ?? []} />
          : "—"}
      </pre>
    </div>
  );
}

/** Legende die de kleurconventie van het voorbeeld verklaart. */
function Legende() {
  return (
    <p className="text-[11px] text-slate-500 flex flex-wrap items-center gap-x-4 gap-y-1">
      <span className="inline-flex items-center gap-1.5">
        <span className="inline-block w-2.5 h-2.5 rounded-sm bg-slate-900" aria-hidden />
        ontwerptekst
      </span>
      <span className="inline-flex items-center gap-1.5">
        <span className="inline-block w-2.5 h-2.5 rounded-sm bg-red-700" aria-hidden />
        hypotheses (te kiezen varianten, met fictieve maar realistische waarden)
      </span>
    </p>
  );
}

/**
 * Twee kolommen naast elkaar (NL/FR) met een ingevuld voorbeeld. Geef
 * `nlVorige`/`frVorige` mee om de wijziging t.o.v. een bestaande clausule/model
 * te markeren (rood = verwijderd, groen = toegevoegd) — gebruikt in
 * ValiderenTab bij een wijzigingsvoorstel; laat ze weg voor een gewone
 * (niet-diff) voorbeeldweergave in OnderdelenTab/ModellenTab, waar de
 * ontwerptekst zwart en de hypotheses rood worden getoond.
 */
export function VoorbeeldTweeKolommen({
  nl,
  fr,
  nlVorige,
  frVorige,
  frOpmerking,
}: {
  nl?: string;
  fr?: string;
  nlVorige?: string;
  frVorige?: string;
  /** Groene noot boven de FR-kolom, bv. het aantal nog te vertalen clausules. */
  frOpmerking?: string;
}) {
  if (nl === undefined && fr === undefined) return null;
  // De legende hoort enkel bij de gewone (niet-diff) voorbeeldweergave.
  const toonLegende = nlVorige === undefined && frVorige === undefined;
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-col md:flex-row gap-3">
        {nl !== undefined && <VoorbeeldKolom label="NL — voorbeeld" tekst={nl} vorigeTekst={nlVorige} />}
        {fr !== undefined && (
          <VoorbeeldKolom label="FR — voorbeeld" tekst={fr} vorigeTekst={frVorige} opmerking={frOpmerking} />
        )}
      </div>
      {toonLegende && <Legende />}
    </div>
  );
}