// Factuurverwerkings-agent sandbox — interactief & klikbaar.
// Gebruiker klikt op upload-knop, kiest één van twee mock-facturen,
// en klikt vervolgens door 5 fases. Auto-progress met vinkjes.

const FV_SCENARIOS = [
  {
    id: 'klopt',
    accent: 'ok',
    leverancier: 'Staaltech Industrie BV',
    leverancierTag: 'Vaste leverancier · sinds 2023',
    label: 'Alles klopt',
    sub: 'Alle regels matchen · klaar voor boeking',
    invoiceNo: 'FAC-2026-4127',
    invoiceDate: '24 mei 2026',
    poRef: 'PO-2026-0847',
    ontvangstRef: 'GR-2026-0847',
    project: 'DC Tilburg · uitbreiding',
    totaal: '€ 4.090,00',
    btw: '€ 858,90',
    grootboek: '7100 · Materiaal',
    kostenplaats: 'KP-12 · Productie',
    regels: [
      { qty: 12, oms: 'HEB 200 ligger · 6 m',              prijs: 245.00, afspraak: 245.00, qtyPO: 12, qtyLev: 12, afwijk: 0,   status: 'ok' },
      { qty: 24, oms: 'Hoekstaal 50×50×5 · 6 m',            prijs:  18.75, afspraak:  18.75, qtyPO: 24, qtyLev: 24, afwijk: 0,   status: 'ok' },
      { qty:  8, oms: 'Plaatstaal S355 · 2000×1000×8 mm',   prijs:  87.50, afspraak:  87.50, qtyPO:  8, qtyLev:  8, afwijk: 0,   status: 'ok' }
    ],
    maxAfwijk: 0,
    routing: 'boeking'
  },
  {
    id: 'afwijking',
    accent: 'warn',
    leverancier: 'Lagerhuis Nederland',
    leverancierTag: 'Leverancier · sinds 2024',
    label: 'Prijsafwijking 8%',
    sub: 'Regel 2 wijkt af · dossier voor goedkeuring',
    invoiceNo: 'FAC-2026-4189',
    invoiceDate: '24 mei 2026',
    poRef: 'PO-2026-0912',
    ontvangstRef: 'GR-2026-0912',
    project: 'Onderhoud lijn 3',
    totaal: '€ 637,50',
    btw: '€ 133,88',
    grootboek: null,
    kostenplaats: null,
    regels: [
      { qty: 40, oms: 'Kogellager 6204-2RS',                prijs:   4.20, afspraak:   4.20, qtyPO: 40, qtyLev: 40, afwijk: 0,   status: 'ok'   },
      { qty: 25, oms: 'Glijlager brons · 25×30',            prijs:  13.50, afspraak:  12.50, qtyPO: 25, qtyLev: 25, afwijk: 8.0, status: 'fail' },
      { qty:  6, oms: 'Smeervet HD-220 · 1 kg',             prijs:  22.00, afspraak:  22.00, qtyPO:  6, qtyLev:  6, afwijk: 0,   status: 'ok'   }
    ],
    maxAfwijk: 8.0,
    routing: 'dossier'
  }
];

const FV_FASES = [
  { id: 'upload',     num: '01', label: 'Upload',      titel: 'Factuur ontvangen.' },
  { id: 'extractie',  num: '02', label: 'Extractie',   titel: 'Regels uit de PDF gehaald.' },
  { id: 'match',      num: '03', label: 'Match',       titel: 'Inkooporder · levering · factuur naast elkaar.' },
  { id: 'afwijking',  num: '04', label: 'Afwijking',   titel: 'Per regel getoetst aan de afspraken.' },
  { id: 'routing',    num: '05', label: 'Routing',     titel: 'Naar boeking, of naar dossier voor goedkeuring.' }
];

const FV_AUTOPLAY_MS = 3600;

const fmtEur = (n) => '€ ' + n.toFixed(2).replace('.', ',');

// Tolerantie-buckets · ≤2 % groen, 2-5 % geel, >5 % rood
const tolBucket = (pct) => {
  if (pct <= 2) return 'ok';
  if (pct <= 5) return 'warn';
  return 'fail';
};

const FVSandbox = () => {
  const [scenarioId, setScenarioId] = React.useState(null); // null = nog niet gekozen
  const [pickerOpen, setPickerOpen] = React.useState(false);
  const [faseIdx, setFaseIdx] = React.useState(0);
  const [autoplay, setAutoplay] = React.useState(false);

  const scenario = scenarioId ? FV_SCENARIOS.find(s => s.id === scenarioId) : null;
  const fase = FV_FASES[faseIdx];
  const atEnd = faseIdx === FV_FASES.length - 1;

  // Auto-progress door de fases na een keuze
  React.useEffect(() => {
    if (!autoplay || !scenario) return;
    if (atEnd) { setAutoplay(false); return; }
    const t = setTimeout(() => setFaseIdx(f => Math.min(f + 1, FV_FASES.length - 1)), FV_AUTOPLAY_MS);
    return () => clearTimeout(t);
  }, [autoplay, faseIdx, atEnd, scenario]);

  const openPicker = () => setPickerOpen(true);
  const pickScenario = (id) => {
    setScenarioId(id);
    setPickerOpen(false);
    setFaseIdx(0);
    setAutoplay(true);
  };
  const jumpToFase = (i) => {
    if (!scenario) return;
    setFaseIdx(i);
    setAutoplay(false);
  };
  const togglePlay = () => {
    if (!scenario) return;
    if (atEnd) { setFaseIdx(0); setAutoplay(true); return; }
    setAutoplay(p => !p);
  };
  const resetAll = () => {
    setScenarioId(null);
    setFaseIdx(0);
    setAutoplay(false);
    setPickerOpen(false);
  };

  return (
    <section className="fvsb" id="sandbox">
      <div className="fvsb-wrap">
        <div className="fvsb-head">
          <div className="eyebrow-big"><span className="bar"></span> Probeer het zelf</div>
          <h2>Upload een factuur. Zie wat de agent doet.</h2>
          <p className="fvsb-lede">
            Twee voorbereide mock-facturen. Klik op upload, kies er één, en loop mee door de stappen.
            Eén klopt helemaal. Eén heeft een prijsafwijking.
          </p>
        </div>

        <div className="fvsb-stage">
          <FVStepper faseIdx={faseIdx} setFaseIdx={jumpToFase} autoplay={autoplay} active={!!scenario} />

          <div className="fvsb-frame">
            <FVHeader scenario={scenario} fase={fase} onReset={resetAll} />
            <div className="fvsb-canvas">
              {!scenario && (
                <FVUploadZone onOpen={openPicker} pickerOpen={pickerOpen} onPick={pickScenario} onClose={() => setPickerOpen(false)} />
              )}
              {scenario && (
                <FVFaseBody scenario={scenario} fase={fase} faseIdx={faseIdx} />
              )}
            </div>

            <div className="fvsb-controls">
              <button
                className="fvsb-btn-ghost"
                onClick={togglePlay}
                disabled={!scenario}
              >
                {!scenario
                  ? '▶ Kies eerst een factuur'
                  : autoplay
                    ? '❚❚ Pauze'
                    : (atEnd ? '↻ Opnieuw afspelen' : '▶ Verder')}
              </button>
              <div className="fvsb-controls-meta">
                {!scenario
                  ? <span>Klik op upload om te starten</span>
                  : atEnd
                    ? <span>Klaar · "{scenario.label}"</span>
                    : <span>Stap {faseIdx + 1} van {FV_FASES.length} · {fase.label}</span>}
              </div>
              {scenario && (
                <button className="fvsb-btn-ghost fvsb-btn-reset" onClick={resetAll}>
                  Andere factuur
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ----------------------------------------------------------------
// STEPPER
// ----------------------------------------------------------------
const FVStepper = ({ faseIdx, setFaseIdx, autoplay, active }) => (
  <div className={'fvsb-stepper' + (active ? '' : ' fvsb-stepper-disabled')} role="tablist">
    {FV_FASES.map((f, i) => (
      <button
        key={f.id}
        className={
          'fvsb-step' +
          (i === faseIdx && active ? ' active' : '') +
          (i < faseIdx && active ? ' done' : '')
        }
        onClick={() => setFaseIdx(i)}
        role="tab"
        disabled={!active}
      >
        <span className="fvsb-step-num">{i < faseIdx && active ? '✓' : f.num}</span>
        <span className="fvsb-step-label">{f.label}</span>
        {i === faseIdx && autoplay && active && <span className="fvsb-step-prog" aria-hidden="true"></span>}
      </button>
    ))}
  </div>
);

// ----------------------------------------------------------------
// FRAME-HEADER
// ----------------------------------------------------------------
const FVHeader = ({ scenario, fase, onReset }) => (
  <div className="fvsb-frame-head">
    <div className="fvsb-fh-left">
      <div className="fvsb-fh-avatar">F</div>
      <div>
        <div className="fvsb-fh-name">Factuurverwerkings-agent</div>
        <div className="fvsb-fh-sub">verbonden met ERP · inkooporders · ontvangstbonnen</div>
      </div>
    </div>
    {scenario && (
      <div className="fvsb-fh-meta">
        <div>
          <div className="l">Leverancier</div>
          <div className="v">{scenario.leverancier}</div>
        </div>
        <div>
          <div className="l">Factuur</div>
          <div className="v mono">{scenario.invoiceNo}</div>
        </div>
        <div>
          <div className="l">Fase</div>
          <div className="v">{fase.label}</div>
        </div>
      </div>
    )}
  </div>
);

// ----------------------------------------------------------------
// UPLOAD-ZONE · initiële staat, geen scenario gekozen
// ----------------------------------------------------------------
const FVUploadZone = ({ onOpen, pickerOpen, onPick, onClose }) => (
  <div className="fv-uploadzone">
    {!pickerOpen && (
      <>
        <div className="fv-uploadzone-ico">
          <svg viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
            <path d="M24 32 V14 M24 14 L17 21 M24 14 L31 21" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            <rect x="8" y="34" width="32" height="4" rx="2" fill="currentColor" opacity="0.18"/>
          </svg>
        </div>
        <div className="fv-uploadzone-titel">Upload een factuur</div>
        <div className="fv-uploadzone-sub">Kies één van twee voorbereide voorbeelden uit een productie-omgeving.</div>
        <button className="fvsb-btn-primary" onClick={onOpen}>
          + Upload factuur
        </button>
      </>
    )}
    {pickerOpen && (
      <div className="fv-picker">
        <div className="fv-picker-head">
          <div className="fv-picker-titel">Kies een voorbeeld-factuur</div>
          <button className="fv-picker-x" onClick={onClose} aria-label="Sluiten">×</button>
        </div>
        <div className="fv-picker-grid">
          {FV_SCENARIOS.map(sc => (
            <button
              key={sc.id}
              className={'fv-picker-card fv-picker-' + sc.accent}
              onClick={() => onPick(sc.id)}
            >
              <FVInvoiceThumb scenario={sc} />
              <div className="fv-picker-body">
                <div className="fv-picker-lev">{sc.leverancier}</div>
                <div className="fv-picker-tag">{sc.leverancierTag}</div>
                <div className={'fv-picker-pill fv-picker-pill-' + sc.accent}>{sc.label}</div>
                <div className="fv-picker-sub">{sc.sub}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    )}
  </div>
);

// Mini PDF-thumbnail · voor picker en als bron in extractie
const FVInvoiceThumb = ({ scenario, scanning = false }) => (
  <div className="fv-thumb">
    <div className="fv-thumb-corner">PDF</div>
    <div className="fv-thumb-h1"></div>
    <div className="fv-thumb-h2"></div>
    <div className="fv-thumb-lines">
      <span></span><span></span><span></span>
    </div>
    <div className="fv-thumb-rows">
      {scenario.regels.map((r, i) => (
        <div key={i} className={'fv-thumb-row' + (scanning ? ' fv-thumb-row-scanning' : '')} style={{animationDelay: (i * 0.18) + 's'}}>
          <span className="fv-thumb-row-qty"></span>
          <span className="fv-thumb-row-oms"></span>
          <span className="fv-thumb-row-prijs"></span>
        </div>
      ))}
    </div>
    {scanning && <div className="fv-thumb-scanline" aria-hidden="true"></div>}
  </div>
);

// ----------------------------------------------------------------
// FASE-BODY · 5 fases
// ----------------------------------------------------------------
const FVFaseBody = ({ scenario, fase, faseIdx }) => {
  return (
    <div className="fv-phase-wrap" key={fase.id /* re-mount voor fade-in per fase */}>
      <div className="fv-phase-titel">
        <span className="fv-phase-num mono">{fase.num}</span>
        <span className="fv-phase-h">{fase.titel}</span>
      </div>

      {fase.id === 'upload'    && <FVPhaseUpload    scenario={scenario} />}
      {fase.id === 'extractie' && <FVPhaseExtractie scenario={scenario} />}
      {fase.id === 'match'     && <FVPhaseMatch     scenario={scenario} />}
      {fase.id === 'afwijking' && <FVPhaseAfwijking scenario={scenario} />}
      {fase.id === 'routing'   && <FVPhaseRouting   scenario={scenario} />}
    </div>
  );
};

// FASE 1 · UPLOAD · bevestiging dat de factuur binnen is
const FVPhaseUpload = ({ scenario }) => (
  <div className="fv-p1">
    <div className="fv-p1-thumb">
      <FVInvoiceThumb scenario={scenario} />
    </div>
    <div className="fv-p1-meta">
      <div className="fv-p1-tag">Ontvangen via mail · 24 mei 2026, 09:14</div>
      <div className="fv-p1-lev">{scenario.leverancier}</div>
      <div className="fv-p1-sub">{scenario.leverancierTag}</div>
      <div className="fv-p1-kv-list">
        <div className="fv-p1-kv"><span className="l">Factuurnr.</span><span className="v mono">{scenario.invoiceNo}</span></div>
        <div className="fv-p1-kv"><span className="l">Factuurdatum</span><span className="v">{scenario.invoiceDate}</span></div>
        <div className="fv-p1-kv"><span className="l">Refereert PO</span><span className="v mono">{scenario.poRef}</span></div>
        <div className="fv-p1-kv"><span className="l">Project</span><span className="v">{scenario.project}</span></div>
        <div className="fv-p1-kv"><span className="l">Bedrag excl.</span><span className="v">{scenario.totaal}</span></div>
        <div className="fv-p1-kv"><span className="l">BTW</span><span className="v">{scenario.btw}</span></div>
      </div>
    </div>
  </div>
);

// FASE 2 · EXTRACTIE · PDF links, regels worden uit-getrokken naar rechts
const FVPhaseExtractie = ({ scenario }) => (
  <div className="fv-p2">
    <div className="fv-p2-left">
      <div className="fv-p2-label mono">Bron-PDF</div>
      <FVInvoiceThumb scenario={scenario} scanning={true} />
    </div>
    <div className="fv-p2-arrow" aria-hidden="true">
      <svg viewBox="0 0 60 24" width="60" height="24">
        <path d="M2 12 H 52 M44 4 L 56 12 L 44 20" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </div>
    <div className="fv-p2-right">
      <div className="fv-p2-label mono">Uitgepakte regels</div>
      <div className="fv-p2-table">
        <div className="fv-p2-thead">
          <span className="c-qty">Aantal</span>
          <span className="c-oms">Omschrijving</span>
          <span className="c-prijs">Prijs/stuk</span>
        </div>
        {scenario.regels.map((r, i) => (
          <div key={i} className="fv-p2-row" style={{animationDelay: (0.25 + i * 0.22) + 's'}}>
            <span className="c-qty mono">{r.qty}×</span>
            <span className="c-oms">{r.oms}</span>
            <span className="c-prijs mono">{fmtEur(r.prijs)}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// FASE 3 · MATCH · 3 kolommen naast elkaar (PO · Levering · Factuur)
const FVPhaseMatch = ({ scenario }) => (
  <div className="fv-p3">
    <div className="fv-p3-cols">
      <div className="fv-p3-col">
        <div className="fv-p3-col-head">
          <span className="fv-p3-col-tag mono">Inkooporder</span>
          <span className="fv-p3-col-ref mono">{scenario.poRef}</span>
        </div>
        {scenario.regels.map((r, i) => (
          <div key={i} className="fv-p3-row" style={{animationDelay: (i * 0.12) + 's'}}>
            <span className="fv-p3-qty mono">{r.qtyPO}×</span>
            <span className="fv-p3-oms">{r.oms}</span>
          </div>
        ))}
      </div>

      <div className="fv-p3-col">
        <div className="fv-p3-col-head">
          <span className="fv-p3-col-tag mono">Levering</span>
          <span className="fv-p3-col-ref mono">{scenario.ontvangstRef}</span>
        </div>
        {scenario.regels.map((r, i) => (
          <div key={i} className="fv-p3-row" style={{animationDelay: (0.1 + i * 0.12) + 's'}}>
            <span className="fv-p3-qty mono">{r.qtyLev}×</span>
            <span className="fv-p3-oms">{r.oms}</span>
          </div>
        ))}
      </div>

      <div className="fv-p3-col">
        <div className="fv-p3-col-head">
          <span className="fv-p3-col-tag mono">Factuur</span>
          <span className="fv-p3-col-ref mono">{scenario.invoiceNo}</span>
        </div>
        {scenario.regels.map((r, i) => (
          <div key={i} className="fv-p3-row" style={{animationDelay: (0.2 + i * 0.12) + 's'}}>
            <span className="fv-p3-qty mono">{r.qty}×</span>
            <span className="fv-p3-oms">{r.oms}</span>
            <span className="fv-p3-check" aria-label="Match">✓</span>
          </div>
        ))}
      </div>
    </div>
    <div className="fv-p3-foot">
      <span className="fv-p3-foot-l">Aantallen op alle 3 documenten gelijk. Drie-zijdige match.</span>
      <span className="fv-p3-foot-pill">{scenario.regels.length} van {scenario.regels.length} regels</span>
    </div>
  </div>
);

// FASE 4 · AFWIJKING · prijzen per regel met afwijking-pill
const FVPhaseAfwijking = ({ scenario }) => (
  <div className="fv-p4">
    <div className="fv-p4-legend">
      <div className="fv-p4-legend-row"><span className="fv-pill-mini fv-pill-ok">≤ 2 %</span><span>binnen tolerantie</span></div>
      <div className="fv-p4-legend-row"><span className="fv-pill-mini fv-pill-warn">2 - 5 %</span><span>grensgeval</span></div>
      <div className="fv-p4-legend-row"><span className="fv-pill-mini fv-pill-fail">&gt; 5 %</span><span>buiten tolerantie</span></div>
    </div>
    <div className="fv-p4-table">
      <div className="fv-p4-thead">
        <span className="c-oms">Regel</span>
        <span className="c-prijs">Afspraak</span>
        <span className="c-prijs">Factuur</span>
        <span className="c-delta">Δ</span>
      </div>
      {scenario.regels.map((r, i) => {
        const bucket = tolBucket(r.afwijk);
        return (
          <div key={i} className={'fv-p4-row fv-p4-row-' + bucket} style={{animationDelay: (i * 0.18) + 's'}}>
            <span className="c-oms">
              <span className="fv-p4-qty mono">{r.qty}×</span>
              {r.oms}
            </span>
            <span className="c-prijs mono">{fmtEur(r.afspraak)}</span>
            <span className="c-prijs mono">{fmtEur(r.prijs)}</span>
            <span className="c-delta">
              <span className={'fv-pill fv-pill-' + bucket}>
                {r.afwijk === 0 ? '0 %' : '+' + r.afwijk.toFixed(1).replace('.', ',') + ' %'}
              </span>
            </span>
          </div>
        );
      })}
    </div>
  </div>
);

// FASE 5 · ROUTING · eindbestemming
const FVPhaseRouting = ({ scenario }) => {
  const isBoeking = scenario.routing === 'boeking';
  return (
    <div className="fv-p5">
      <div className="fv-p5-rail">
        <div className="fv-p5-source">
          <div className="fv-p5-source-tag mono">Factuur</div>
          <div className="fv-p5-source-id mono">{scenario.invoiceNo}</div>
          <div className="fv-p5-source-lev">{scenario.leverancier}</div>
        </div>
        <div className="fv-p5-arrow" aria-hidden="true">
          <svg viewBox="0 0 80 24" width="80" height="24">
            <path d="M2 12 H 72 M64 4 L 76 12 L 64 20" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="fv-p5-dests">
          <div className={'fv-p5-dest fv-p5-dest-boeking' + (isBoeking ? ' active' : ' dim')}>
            <div className="fv-p5-dest-ico">€</div>
            <div className="fv-p5-dest-body">
              <div className="fv-p5-dest-titel">Boeking</div>
              <div className="fv-p5-dest-sub">{isBoeking ? 'Geboekt in administratie' : 'Niet van toepassing'}</div>
              {isBoeking && (
                <div className="fv-p5-dest-meta">
                  <div><span className="l mono">Grootboek</span><span className="v">{scenario.grootboek}</span></div>
                  <div><span className="l mono">Kostenplaats</span><span className="v">{scenario.kostenplaats}</span></div>
                </div>
              )}
            </div>
          </div>
          <div className={'fv-p5-dest fv-p5-dest-dossier' + (!isBoeking ? ' active' : ' dim')}>
            <div className="fv-p5-dest-ico">?</div>
            <div className="fv-p5-dest-body">
              <div className="fv-p5-dest-titel">Dossier voor goedkeuring</div>
              <div className="fv-p5-dest-sub">{!isBoeking ? 'Klaar voor finance · met bewijzen en aanbeveling' : 'Niet van toepassing'}</div>
              {!isBoeking && (
                <div className="fv-p5-dest-meta">
                  <div><span className="l mono">Aanleiding</span><span className="v">Prijsafwijking 8 % op regel 2</span></div>
                  <div><span className="l mono">Aanbeveling</span><span className="v">Terugvragen bij leverancier</span></div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      {!isBoeking && (
        <div className="fv-p5-signal">
          <div className="fv-p5-signal-ico">!</div>
          <div>
            <div className="fv-p5-signal-titel">Seintje naar inkoop</div>
            <div className="fv-p5-signal-sub">Glijlager brons 25×30 ligt 8 % boven afspraak. Volgende order opnieuw checken.</div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { FVSandbox });