// Logistiek-service sandbox
// Similar structure to Max sandbox but for logistics service
// Preset mode = canned, custom mode = live claude.complete

const TRACK_PRESETS = {
  bezorg: `Hoi,

Ik wacht al 2 dagen op mijn bestelling met ordernummer ORD-48293. Track & trace pagina laat niks nieuws zien sinds maandag. Klant staat te wachten op de bouwplaats, kunnen jullie even kijken waar het blijft?

Groet, Sam (Repetive Bouw)`,

  retour: `Goedemiddag,

We hebben een pallet staal geleverd gekregen (order 48190) maar de HEB 200 balken lijken niet te kloppen met wat we besteld hebben · we hadden 6m nodig, dit is 4m. Kan dat retour en wanneer komt de juiste order?

Mvg, Robin - Projectmanager Repetive Projecten`,

  spoed: `Ik heb vanochtend een spoedorder geplaatst (48401) en had begrepen dat het vandaag nog geleverd zou worden. We hebben monteurs die staan te wachten. Klopt dat nog steeds?

Jamie`
};

const TRACK_RESULTS = {
  bezorg: {
    klant: 'Sam · Repetive Bouw',
    ordernr: 'ORD-48293',
    status: 'delayed',
    statusLabel: 'Vertraging geconstateerd',
    events: [
      { t: 'Ma 14:32', ev: 'Order gepickt in magazijn Tilburg', ok: true },
      { t: 'Ma 16:45', ev: 'Vertrokken naar DC Rotterdam', ok: true },
      { t: 'Di 04:12', ev: 'Aankomst DC Rotterdam', ok: true },
      { t: 'Di 07:30', ev: 'Zou moeten zijn opgehaald door bezorgwagen', ok: false },
      { t: 'Nu', ev: 'Status onveranderd · bezorgwagen mogelijk overvol', ok: false }
    ],
    actie: 'Ticket aangemaakt bij planner · Klant krijgt proactief bericht met nieuwe ETA',
    concept: `Hallo Sam,

Bedankt voor je bericht · ik zie dat je order ORD-48293 vast zit op ons DC in Rotterdam sinds gisterenochtend. De geplande bezorgwagen was overvol.

Ik heb je order zojuist doorgezet naar de route van morgenvroeg. Je ontvangt uiterlijk 10:30 de levering op de bouwplaats.
Mocht dat niet haalbaar zijn voor je planning, dan regelen we kosteloos een extra bezorging vandaag nog.

Laat me weten of dit werkt.

Groet,
Service-team MySteel`
  },
  retour: {
    klant: 'Robin · Repetive Projecten',
    ordernr: 'ORD-48190',
    status: 'issue',
    statusLabel: 'Foutlevering geconstateerd',
    events: [
      { t: 'Vr', ev: 'Order geplaatst: 40x HEB 200 · 6m', ok: true },
      { t: 'Ma', ev: 'Gepickt uit magazijn', ok: true },
      { t: 'Di', ev: 'Geleverd bij klant', ok: true },
      { t: 'Nu', ev: 'Klant meldt: geleverde lengte 4m i.p.v. 6m', ok: false },
      { t: 'Nu', ev: 'Magazijn-check: HEB 200 · 6m staat nog op locatie B-12', ok: false }
    ],
    actie: 'Escalatie naar sales + planning · Retour-ticket + nieuwe leverslot ingepland',
    concept: `Robin,

Bedankt voor de melding · ik heb de order nagekeken en zie dat er verkeerd is gepickt. De 6m balken staan nog op onze locatie, dus we kunnen het morgen eerste rit leveren.

We halen de 4m balken gelijk mee retour. Er is geen aanvullende kost voor jou.
Ons magazijn-team krijgt een flag op deze picker-ID zodat we kunnen voorkomen dat dit weer gebeurt.

Excuses voor het ongemak.

Groet,
Service-team MySteel`
  },
  spoed: {
    klant: 'Jamie (geen klantnaam)',
    ordernr: 'ORD-48401',
    status: 'onschema',
    statusLabel: 'Op schema · bezorging vandaag',
    events: [
      { t: '09:14', ev: 'Spoedorder binnengekomen', ok: true },
      { t: '09:28', ev: 'Goedgekeurd door planner', ok: true },
      { t: '10:05', ev: 'Gepickt in magazijn', ok: true },
      { t: '11:20', ev: 'Op route 7 (Midden-Brabant)', ok: true },
      { t: 'ETA 14:30', ev: 'Verwachte aankomst bij klant', ok: true }
    ],
    actie: 'Geen actie nodig · Klant krijgt automatische bevestiging met ETA',
    concept: `Hallo Jamie,

Goed nieuws · je spoedorder ORD-48401 is vanmorgen gepickt en zit nu op route 7. Verwachte aankomst op je locatie is 14:30.
Chauffeur belt 30 minuten van tevoren.

Mocht je iets niet kloppen zien, bel me direct op 040-xxxxxxx.

Groet,
Service-team MySteel`
  }
};

const TRACK_STEPS = [
  { t: 'Bericht geclassificeerd', d: 'Type: status-vraag / probleem / wijziging' },
  { t: 'Klant & ordernr geëxtraheerd', d: 'Sam · Repetive Bouw · ORD-48293' },
  { t: 'TMS + tracking opgehaald', d: 'Laatste status + historie per stap' },
  { t: 'Afwijkingen gedetecteerd', d: 'Vergelijking met geplande ETA' },
  { t: 'Antwoord opgesteld', d: 'Feitelijk, in de toon die bij klant past' },
  { t: 'Planner geïnformeerd', d: 'Alleen bij afwijking; ticket met context' }
];

const detectTrackPreset = (text) => {
  for (const k of Object.keys(TRACK_PRESETS)) {
    if (TRACK_PRESETS[k] === text) return k;
  }
  return null;
};

const LogistiekServiceSandbox = () => {
  const [text, setText] = React.useState(TRACK_PRESETS.bezorg);
  const [running, setRunning] = React.useState(false);
  const [activeStep, setActiveStep] = React.useState(-1);
  const [showResult, setShowResult] = React.useState(false);
  const [liveResult, setLiveResult] = React.useState(null);
  const [error, setError] = React.useState(null);

  const activePreset = detectTrackPreset(text);
  const isCustom = !activePreset;

  const runPreset = () => {
    setRunning(true);
    setShowResult(false);
    setActiveStep(-1);
    setError(null);
    setLiveResult(null);
    TRACK_STEPS.forEach((_, i) => {
      setTimeout(() => setActiveStep(i), 400 + i * 380);
    });
    setTimeout(() => {
      setRunning(false);
      setShowResult(true);
    }, 400 + TRACK_STEPS.length * 380 + 200);
  };

  const runCustom = async () => {
    setRunning(true);
    setShowResult(false);
    setActiveStep(-1);
    setError(null);
    setLiveResult(null);

    TRACK_STEPS.slice(0, 4).forEach((_, i) => {
      setTimeout(() => setActiveStep(i), 400 + i * 380);
    });

    try {
      const prompt = `Je bent een logistiek-service-agent voor een logistieke dienstverlener. Een klant stuurt een bericht over een zending. Jij moet een dossier samenstellen, eventueel een aanpassing in TMS/WMS doen, en een antwoord opstellen.

De agent kan ook aanpassingen doen in systemen (afleveradres wijzigen, leverdatum aanpassen) en escaleert bij schade of onverwachte situaties.

Verzin plausibele data: ordernummer, events in het TMS, status. Gebruik een realistische tijdlijn.

Geef je antwoord ALLEEN als geldige JSON in dit exacte schema (geen markdown):
{
  "klant": "Naam · Bedrijf (of 'onbekend')",
  "ordernr": "ORD-XXXXX",
  "status": "onschema|delayed|issue",
  "statusLabel": "Korte status-tekst",
  "events": [{"t":"tijd/dag","ev":"wat er gebeurde","ok":true|false}],
  "actie": "Wat er nu gebeurt · proactief bericht / escalatie / ticket",
  "concept": "Concept-antwoord aan de klant (aanhef + 2-3 zinnen + afsluiting)"
}

Klantbericht:
${text}`;

      const response = await window.claude.complete(prompt);
      const jsonMatch = response.match(/\{[\s\S]*\}/);
      const parsed = JSON.parse(jsonMatch ? jsonMatch[0] : response);
      setLiveResult(parsed);
      setActiveStep(4);
      setTimeout(() => setActiveStep(5), 400);
      setTimeout(() => {
        setRunning(false);
        setShowResult(true);
      }, 800);
    } catch (e) {
      console.error(e);
      setError('Kon antwoord niet parsen. Probeer het opnieuw of kies een voorbeeld.');
      setRunning(false);
    }
  };

  const run = () => {
    if (running) return;
    if (isCustom) runCustom();
    else runPreset();
  };

  const setPreset = (k) => {
    setText(TRACK_PRESETS[k]);
    setShowResult(false);
    setActiveStep(-1);
    setLiveResult(null);
    setError(null);
  };

  const result = showResult ? (liveResult || TRACK_RESULTS[activePreset]) : null;

  return (
    <section className="sandbox" id="sandbox">
      <div className="sandbox-wrap">
        <div className="sandbox-head">
          <div>
            <div className="eyebrow-big"><span className="bar"></span> Live proberen</div>
            <h2 className="section-h">Stuur de logistiek-service-agent een vraag.</h2>
          </div>
          <p>
            Typ een klantbericht of kies een voorbeeld. Voorbeelden draaien op canned data (snel, voorspelbaar).
            Eigen tekst laat de agent live zoeken en een concept-antwoord opstellen.
          </p>
        </div>

        <div className="sandbox-frame">
          <div className="sb-input">
            <div className="sb-input-head">
              <span>Inkomend klantbericht</span>
              <span className={'demo-badge ' + (isCustom ? 'custom' : '')}>
                {isCustom ? '● Eigen input · live' : '○ Voorbeeld-bericht'}
              </span>
            </div>
            <div className="from">Van: klant → tracking@logistiek.nl</div>
            <textarea
              value={text}
              onChange={e => { setText(e.target.value); setShowResult(false); setLiveResult(null); setError(null); }}
              disabled={running}
              readOnly
            />
            <div className="presets">
              {[['bezorg', 'Bezorg-vertraging'], ['retour', 'Foutlevering'], ['spoed', 'Spoedorder-check']].map(([k, l]) => (
                <button key={k} className="preset" onClick={() => setPreset(k)} disabled={running} style={activePreset === k ? {borderColor: 'var(--brand-purple)', color: 'var(--brand-purple)', background: 'var(--surface-tint-purple)'} : {}}>{l}</button>
              ))}
            </div>
            <button className="run" onClick={run} disabled={running || !text.trim()}>
              {running ? 'Agent werkt…' : isCustom ? '→ Stuur naar agent (live)' : '→ Stuur naar agent'}
            </button>
            <div className="sandbox-tip">
              <span className="demo-pill">Demo op voorbeelddata</span>
            </div>
          </div>

          <div className="sb-output">
            <div className="sb-output-head">
              <div className="max-badge">
                <div className="max-avatar">L</div>
                <span>Logistiek-service-agent</span>
              </div>
              <span>{running ? 'verwerken' : showResult ? 'klaar voor review' : 'standby'}</span>
            </div>

            {!running && !showResult && !error && (
              <div className="sb-empty">
                <div className="big">Agent is standby.</div>
                <div>Druk op "Stuur naar agent" om een voorbeeld te zien draaien.</div>
              </div>
            )}

            {error && (
              <div className="sb-empty">
                <div className="big" style={{color: 'var(--tint-pink-deep)'}}>Oeps.</div>
                <div>{error}</div>
                <button className="run" style={{marginTop: 16, display: 'inline-block', width: 'auto', padding: '8px 18px'}} onClick={run}>Opnieuw proberen</button>
              </div>
            )}

            {(running || showResult) && !error && (
              <>
                {TRACK_STEPS.map((s, i) => (
                  <div key={i} className={'sb-step' + (i <= activeStep ? ' done' : '') + (i === activeStep + 1 && running ? ' active' : '')}>
                    <div className="dot">{i <= activeStep ? '✓' : ''}</div>
                    <div className="body">
                      <div className="t">{s.t}</div>
                      <div className="d">{s.d}</div>
                    </div>
                    <div className="timing">{i <= activeStep ? `${(0.3 + Math.random() * 0.7).toFixed(1)}s` : '·'}</div>
                  </div>
                ))}

                {showResult && result && (
                  <div className="sb-result">
                    <h5>
                      Dossier {result.ordernr}
                      <span className="badge" style={{
                        background: result.status === 'issue' ? '#FFE4EE' : result.status === 'delayed' ? '#FFF3E4' : '#E8FBF3',
                        color: result.status === 'issue' ? '#C0265B' : result.status === 'delayed' ? '#F59E0B' : '#10B981'
                      }}>{result.statusLabel}</span>
                    </h5>
                    <div style={{fontSize: '12px', color: 'var(--ink-4)', marginBottom: '16px'}}>
                      Klant: <strong style={{color: 'var(--ink-2)'}}>{result.klant}</strong>
                    </div>

                    <div className="track-timeline">
                      {(result.events || []).map((e, i) => (
                        <div key={i} className={'tt-event' + (e.ok ? '' : ' issue')}>
                          <div className="tt-dot"></div>
                          <div className="tt-body">
                            <div className="tt-t">{e.t}</div>
                            <div className="tt-ev">{e.ev}</div>
                          </div>
                        </div>
                      ))}
                    </div>

                    <div className="track-action">
                      <div className="track-action-label">Volgende actie</div>
                      <div className="track-action-body">{result.actie}</div>
                    </div>

                    <div className="track-concept">
                      <div className="track-concept-label">Concept-antwoord</div>
                      <pre className="track-concept-body">{result.concept}</pre>
                    </div>

                    <div className="footer">
                      <span>Klant krijgt reactie binnen 2 minuten na binnenkomst</span>
                      <button className="review-btn">Review & verstuur →</button>
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

window.LogistiekServiceSandbox = LogistiekServiceSandbox;