// Inkooporder-agent sandbox — interactief, klikbaar
// 3 voorbereide mock-orders, gebruiker klikt door 6 fases.
// Verschillende eindstaten per scenario.

const IO_SCENARIOS = [
  {
    id: 'standaard',
    klantNaam: 'Repetive Constructies',
    klantTag: 'Klant · 1042',
    omschrijving: 'Standaard order — alle regels matchen, werkorder klaar voor release.',
    kortLabel: 'Standaard · alle regels matchen',
    mailFrom: 'inkoop@repetive-constructies.nl',
    mailQuote: 'Voor het project “DC Tilburg”, graag onderstaande inkooporder. Leverdatum vrijdag wk 22.',
    accent: 'standaard',
    poId: 'PO-2026-0847',
    project: 'DC Tilburg',
    leverdatum: 'Vrijdag wk 22',
    leverdatumIso: '29 mei 2026',
    aanhef: 'Geachte heer / mevrouw,',
    intro: 'Voor het project "DC Tilburg" plaatsen wij de volgende inkooporder:',
    afsluiting: 'Met vriendelijke groet,\nPieter Repetive',
    capWeek: 'wk 22',
    capBase: 45,
    capExtra: 18,
    capLimit: 90,
    capWarning: false,
    regels: [
      { qty: 12, ruwTekst: 'frame-element type A, 1500×800 mm', code: 'FRAME-A-1500', codeSub: 'Frame-element type A', mat: 'S355', matSub: 'plaatstaal 4mm', matExtra: '5,2 kg per stuk', conf: 0.98, status: 'match' },
      { qty: 24, ruwTekst: 'koppelplaat 200×120, 8 stuks per frame', code: 'KPL-200-120', codeSub: 'Koppelplaat 200×120', mat: 'S235', matSub: 'plaatstaal 8mm', matExtra: '1,5 kg per stuk', conf: 0.96, status: 'match' }
    ],
    eindResultaat: {
      type: 'release',
      titel: 'Werkorder klaar voor release',
      sub: 'Alle 3 regels gematcht, materiaal gekoppeld, slot in wk 22.',
      extras: [
        { kind: 'mail', label: 'Orderbevestiging verstuurd', detail: 'naar inkoop@repetive-constructies.nl · met leverdatum vr 29 mei en regel-overzicht.' }
      ]
    }
  },
  {
    id: 'review',
    klantNaam: 'Repetive Bouwsystemen',
    klantTag: 'Klant · 0813',
    omschrijving: 'Specs onduidelijk — één regel mist materiaal-keuze, agent stelt review-vraag.',
    kortLabel: 'Specs onduidelijk · review-vraag',
    mailFrom: 'sander@repetive-bouwsystemen.nl',
    mailQuote: 'Graag bevestiging voor de verbouw kantoor Eindhoven. Leverdatum maandag wk 24.',
    accent: 'review',
    poId: 'PO-2026-0912',
    project: 'Verbouw kantoor Eindhoven',
    leverdatum: 'Maandag wk 24',
    leverdatumIso: '8 juni 2026',
    aanhef: 'Hoi,',
    intro: 'Graag een offerte-bevestiging voor de volgende items:',
    afsluiting: 'Groet,\nSander Repetive',
    capWeek: 'wk 24',
    capBase: 52,
    capExtra: 14,
    capLimit: 90,
    capWarning: false,
    regels: [
      { qty: 8, ruwTekst: 'consoles type B voor balkonbevestiging', code: 'CONS-B', codeSub: 'Console type B', mat: 'S355', matSub: 'plaatstaal 6mm', matExtra: '3,8 kg per stuk', conf: 0.97, status: 'match' },
      { qty: 4, ruwTekst: 'kokerprofiel 80×80, lengte 3m, "zoals vorige keer"', code: 'KOK-80', codeSub: 'Kokerprofiel 80×80', mat: '— review nodig', matSub: 'wanddikte onbekend (3 of 4 mm)', matExtra: 'in laatste order: 4 mm', conf: 0.62, status: 'review', reviewVraag: 'Wanddikte 3 mm of 4 mm? Laatste order van deze klant was 4 mm.' }
    ],
    eindResultaat: {
      type: 'review',
      titel: 'Werkorder klaar — 1 regel wacht op review',
      sub: '1 van 2 regels gereleased. 1 regel terug naar werkvoorbereider.',
      extras: [
        { kind: 'review', label: 'Review-vraag voor werkvoorbereider', detail: 'Regel 2 · Kokerprofiel 80×80 — wanddikte 3 mm of 4 mm? Laatste order: 4 mm.' }
      ]
    }
  },
  {
    id: 'krap',
    klantNaam: 'Repetive Metaalwerk',
    klantTag: 'Klant · 0529',
    omschrijving: 'Krappe deadline — leverdatum buiten capaciteit, signaal naar planning.',
    kortLabel: 'Krappe deadline · signaal naar planner',
    mailFrom: 'kim@repetive-metaalwerk.nl',
    mailQuote: 'Spoed-aanvraag Hoogovens. Graag deze week leveren als het kan — woensdag wk 22.',
    accent: 'krap',
    poId: 'PO-2026-0991',
    project: 'Spoed-order Hoogovens',
    leverdatum: 'Woensdag wk 22',
    leverdatumIso: '27 mei 2026',
    aanhef: 'Beste,',
    intro: 'Spoed-aanvraag, graag deze week leveren als het kan:',
    afsluiting: 'Mvg,\nKim Repetive',
    capWeek: 'wk 22',
    capBase: 78,
    capExtra: 16,
    capLimit: 90,
    capWarning: true,
    regels: [
      { qty: 20, ruwTekst: 'liggers HEB 200, lengte 6m', code: 'HEB-200-6M', codeSub: 'Ligger HEB 200 · 6 m', mat: 'S355JR', matSub: 'walsstaal', matExtra: '61,3 kg per meter', conf: 0.99, status: 'match' },
      { qty: 8, ruwTekst: 'kopplaten 300×300×20', code: 'KP-300-20', codeSub: 'Kopplaat 300×300×20', mat: 'S355', matSub: 'plaatstaal 20mm', matExtra: '14,1 kg per stuk', conf: 0.96, status: 'match' }
    ],
    eindResultaat: {
      type: 'krap',
      titel: 'Werkorder klaar — planning-conflict',
      sub: 'Regels gematcht, maar wk 22 zit op 94% met deze order. Naar planner.',
      extras: [
        { kind: 'signal', label: 'Signaal naar planner', detail: 'wk 22 overschrijdt 90%-grens met deze order (94%). Voorrang vs. PO-0847 (Constructies) graag bevestigen.' }
      ]
    }
  }
];

const IO_FASES = [
  { id: 'kies',      label: 'Aanvraag',  korte: '00', titel: 'Kies een binnenkomende order.' },
  { id: 'lezen',     label: 'Lezen',     korte: '01', titel: 'Inkooporder gelezen, regels eruit gehaald.' },
  { id: 'match',     label: 'Matchen',   korte: '02', titel: 'Regels gematcht tegen het artikelbestand.' },
  { id: 'materiaal', label: 'Materiaal', korte: '03', titel: 'Materiaal en specs gekoppeld per regel.' },
  { id: 'planning',  label: 'Planning',  korte: '04', titel: 'Productieplanning nagekeken op haalbaarheid.' },
  { id: 'werkorder', label: 'Werkorder', korte: '05', titel: 'Werkorder klaar voor de werkplaats.' }
];

const AUTOPLAY_MS = 3600;

const IOSandbox = () => {
  const [scenarioId, setScenarioId] = React.useState(null);
  const [faseIdx, setFaseIdx] = React.useState(0);
  const [autoplay, setAutoplay] = React.useState(false);
  const scenario = scenarioId ? IO_SCENARIOS.find(s => s.id === scenarioId) : null;
  const fase = IO_FASES[faseIdx];
  const atEnd = faseIdx === IO_FASES.length - 1;

  // Autoplay-loop · pas ná keuze
  React.useEffect(() => {
    if (!autoplay || !scenario) return;
    if (atEnd) { setAutoplay(false); return; }
    const t = setTimeout(() => setFaseIdx(f => Math.min(f + 1, IO_FASES.length - 1)), AUTOPLAY_MS);
    return () => clearTimeout(t);
  }, [autoplay, faseIdx, atEnd, scenario]);

  const pickScenario = (id) => {
    setScenarioId(id);
    setFaseIdx(1); // door naar 'lezen'
    setAutoplay(true);
  };
  const jumpToFase = (i) => {
    if (i === 0) { resetAll(); return; } // klik op 'Aanvraag' = andere order kiezen
    if (i > 0 && !scenario) return;
    setFaseIdx(i);
    setAutoplay(false);
  };
  const togglePlay = () => {
    if (!scenario) return;
    if (atEnd) { setFaseIdx(1); setAutoplay(true); return; }
    setAutoplay(p => !p);
  };
  const resetAll = () => {
    setScenarioId(null);
    setFaseIdx(0);
    setAutoplay(false);
  };

  return (
    <section className="iosb" id="sandbox">
      <div className="iosb-wrap">
        <div className="iosb-head">
          <div className="eyebrow-big"><span className="bar"></span> Probeer het zelf</div>
          <h2>Drie voorbeeld-orders. Zie wat de agent met elk doet.</h2>
          <p className="iosb-lede">
            Kies een binnenkomende order, en loop mee door de stappen. Drie scenario's,
            drie verschillende uitkomsten.
          </p>
        </div>

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

          <div className="iosb-frame">
            <IOHeader scenario={scenario} />
            {!scenario
              ? <IOPickerBody onPick={pickScenario} />
              : <IOFaseBody scenario={scenario} fase={fase} faseIdx={faseIdx} />}
          </div>

          <div className="iosb-controls">
            <button
              className="iosb-btn-ghost"
              onClick={togglePlay}
              disabled={!scenario}
              aria-label={autoplay ? 'Pauze' : (atEnd ? 'Opnieuw afspelen' : 'Afspelen')}
            >
              {!scenario
                ? '▶ Kies eerst een order'
                : autoplay
                  ? '❚❚ Pauze'
                  : (atEnd ? '↻ Opnieuw afspelen' : '▶ Verder')}
            </button>
            <div className="iosb-controls-meta">
              {!scenario
                ? <span>Klik op een order in de inbox</span>
                : atEnd
                  ? <span>Klaar · scenario "{scenario.klantNaam}"</span>
                  : <span>Stap {faseIdx + 1} van {IO_FASES.length} · {fase.label}</span>}
            </div>
            {scenario && (
              <button className="iosb-btn-ghost iosb-btn-reset" onClick={resetAll}>
                Andere order
              </button>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

// Picker · fase 0 · inbox met 3 binnenkomende orders
const IOPickerBody = ({ onPick }) => (
  <div className="iosb-canvas iosb-picker">
    <div className="iosb-picker-head">
      <div className="iosb-picker-tag">Inbox · binnenkomende orders</div>
      <div className="iosb-picker-titel">Kies een order uit de inbox</div>
      <div className="iosb-picker-sub">Drie voorbereide voorbeelden — elk een ander type orderafwikkeling.</div>
    </div>
    <div className="iosb-picker-grid">
      {IO_SCENARIOS.map((sc, i) => (
        <button
          key={sc.id}
          type="button"
          className={'iosb-picker-card iosb-acc-' + sc.accent}
          onClick={() => onPick(sc.id)}
        >
          <div className="iosb-picker-card-top">
            <span className="iosb-picker-card-num">{String(i + 1).padStart(2, '0')}</span>
            <span className="iosb-picker-card-from mono">{sc.mailFrom}</span>
          </div>
          <div className="iosb-picker-card-klant">{sc.klantNaam}</div>
          <div className="iosb-picker-card-tag">{sc.kortLabel}</div>
          <div className="iosb-picker-card-foot">
            <span>{sc.klantTag}</span>
            <span className="iosb-picker-card-arrow">→</span>
          </div>
        </button>
      ))}
    </div>
  </div>
);

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

const IOHeader = ({ scenario }) => (
  <div className="iosb-frame-head">
    <div className="iosb-fh-left">
      <div className="iosb-fh-avatar">I</div>
      <div>
        <div className="iosb-fh-name">Inkooporder-agent</div>
        <div className="iosb-fh-sub">verbonden met ERP · artikelbestand · productieplanning</div>
      </div>
    </div>
    {scenario && (
      <div className="iosb-fh-meta">
        <span className="iosb-fh-meta-l">Order van</span>
        <span className="iosb-fh-meta-v">{scenario.klantNaam}</span>
      </div>
    )}
  </div>
);

const IOFaseBody = ({ scenario, fase, faseIdx }) => {
  // faseIdx 0 = kies (handled door IOPickerBody)
  // faseIdx 1 = lezen, 2 = match, 3 = materiaal, 4 = planning, 5 = werkorder
  const showSrc   = faseIdx >= 2;
  const showArt   = faseIdx >= 2;
  const showMat   = faseIdx >= 3;
  const showSlot  = faseIdx >= 4;
  const showFinal = faseIdx >= 5;
  const totaal = scenario.capBase + scenario.capExtra;
  const overlimit = totaal > scenario.capLimit;
  const resType = scenario.eindResultaat.type;

  return (
    <div className="iosb-canvas">
      <div className="iosb-mail" aria-label="Bron-mail">
        <div className="iosb-mail-row">
          <span className="iosb-mail-ico" aria-hidden="true">✉</span>
          <span className="iosb-mail-from">{scenario.mailFrom}</span>
          <span className="iosb-mail-dot">·</span>
          <span className="iosb-mail-subj mono">{scenario.poId}</span>
        </div>
        <div className="iosb-mail-quote">"{scenario.mailQuote}"</div>
      </div>

      <div className={'iosb-grid' + (showFinal ? ' iosb-grid-final iosb-grid-' + resType : '')}>
        <div className="iosb-grid-head">
          <div className={'col col-src' + (showSrc ? ' on' : '')}>PO-regel</div>
          <div className={'col col-art' + (showArt ? ' on' : '')}>Artikel</div>
          <div className={'col col-mat' + (showMat ? ' on' : '')}>Materiaal</div>
          <div className={'col col-slot' + (showSlot ? ' on' : '')}>Slot</div>
        </div>
        {scenario.regels.map((r, i) => (
          <div key={i} className={'iosb-grid-row iosb-status-' + r.status}>
            <div className={'col col-src' + (showSrc ? ' on' : '')} data-label="PO-regel">
              {showSrc ? (
                <>
                  <span className="qty mono">{r.qty}×</span>
                  <span className="ruw">{r.ruwTekst}</span>
                </>
              ) : <span className="dash">—</span>}
            </div>
            <div className={'col col-art' + (showArt ? ' on' : '')} data-label="Artikel">
              {showArt
                ? <span className="code mono">{r.code}</span>
                : <span className="dash">—</span>}
            </div>
            <div className={'col col-mat' + (showMat ? ' on' : '')} data-label="Materiaal">
              {showMat ? (
                r.status === 'review'
                  ? <span className="iosb-mat-review">— review nodig</span>
                  : <span>{r.mat} · {r.matSub}</span>
              ) : <span className="dash">—</span>}
            </div>
            <div className={'col col-slot' + (showSlot ? ' on' : '')} data-label="Slot">
              {showSlot ? <span>{scenario.capWeek}</span> : <span className="dash">—</span>}
            </div>
          </div>
        ))}
      </div>

      <div className={'iosb-cap' + (showSlot ? ' on' : '') + (overlimit && showSlot ? ' over' : '')}>
        <div className="iosb-cap-l">Capaciteit lasercel {scenario.capWeek}</div>
        <div className="iosb-cap-bar">
          <div className="iosb-cap-base" style={{ width: scenario.capBase + '%' }}></div>
          {showSlot && (
            <div
              className={'iosb-cap-new' + (overlimit ? ' over' : '')}
              style={{ left: scenario.capBase + '%', width: scenario.capExtra + '%' }}
            ></div>
          )}
          <div className="iosb-cap-lim" style={{ left: scenario.capLimit + '%' }}>
            <span className="lbl">{scenario.capLimit}%</span>
          </div>
        </div>
        <div className="iosb-cap-pct mono">{(showSlot ? totaal : scenario.capBase) + '%'}</div>
      </div>

      {showFinal && scenario.eindResultaat.extras.length > 0 && (
        <div className="iosb-extras">
          {scenario.eindResultaat.extras.map((ex, i) => (
            <div key={i} className={'iosb-extra iosb-extra-' + ex.kind}>
              <div className="iosb-extra-ico">
                {ex.kind === 'mail'   && <span>✉</span>}
                {ex.kind === 'review' && <span>?</span>}
                {ex.kind === 'signal' && <span>!</span>}
              </div>
              <div className="iosb-extra-body">
                <div className="iosb-extra-label">{ex.label}</div>
                <div className="iosb-extra-detail">{ex.detail}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

Object.assign(window, { IOSandbox });