// ============================================================
// FRAGTA — Forespørgsel: 3-trins RFQ-flow
//   1 Analyse · 2 Match & send · 3 Tilbud & valg
// ============================================================

// ---- Trin-indikator --------------------------------------------------------
function Stepper({ step, setStep, maxStep }) {
  const steps = [
    ['Analyse', 'Original e-mail udtrukket'],
    ['Match & send', 'Forespørgsel til vognmænd'],
    ['Tilbud & valg', 'Vælg og svar kunden'],
  ];
  return (
    <div className="stepper">
      {steps.map(([t, sub], i) => {
        const n = i + 1;
        const state = n < step ? 'done' : n === step ? 'on' : '';
        const reachable = n <= maxStep;
        return (
          <React.Fragment key={n}>
            {i > 0 && <span className={'step-bar' + (n <= step ? ' fill' : '')}></span>}
            <button className={'step ' + state} disabled={!reachable} onClick={() => reachable && setStep(n)}>
              <span className="step-n">{n < step ? <Icon n="check" /> : n}</span>
              <span className="step-tx"><b>{t}</b><small>{sub}</small></span>
            </button>
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ---- AI-analyse felt --------------------------------------------------------
function AField({ label, value, wide, mono, onChange }) {
  if (onChange) {
    return (
      <div className={'ai-field' + (wide ? ' wide' : '')}>
        <label>{label}</label>
        <input className={'ai-input' + (mono ? ' mono' : '')} value={value || ''} onChange={e => onChange(e.target.value)} placeholder="—" />
      </div>
    );
  }
  return (
    <div className={'ai-field' + (wide ? ' wide' : '')}>
      <label>{label}</label>
      <div className={'ai-val' + (mono ? ' mono' : '') + (!value || value === '—' ? ' empty' : '')}>{value || '—'}</div>
    </div>
  );
}

// ---- Trin 1: Analyse --------------------------------------------------------
function StepAnalyse({ r, a, onNext }) {
  const [edit, setEdit] = useState(false);
  const [scan, setScan] = useState(false);
  const reanalyse = () => {
    if (scan) return;
    setScan(true);
    setTimeout(() => { setScan(false); setV(s => ({ ...s, conf: Math.min(99, (s.conf || 90) + 2) })); }, 2600);
  };
  const [v, setV] = useState(a);
  useEffect(() => { setV(a); }, [r.id]);
  const set = (k, val) => setV(s => ({ ...s, [k]: val }));
  const F = (label, key, opts = {}) => <AField label={label} value={v[key]} mono={opts.mono} wide={opts.wide} onChange={edit ? (val => set(key, val)) : undefined} />;
  if (!r.offers.length) {
    return (
      <div className="empty" style={{ border: '1px solid var(--border)', background: 'var(--panel)' }}>
        <span className="em-ico"><Icon n="xc" /></span>
        <h4>Kunne ikke fortolkes</h4>
        <p>Fragta fandt ikke nok information til at matche vognmænd. Udfyld manuelt eller afvis forespørgslen.</p>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-ghost btn-sm"><Icon n="edit" /> Udfyld manuelt</button>
          <button className="btn btn-quiet btn-sm" style={{ color: 'var(--danger)' }}><Icon n="x" /> Afvis</button>
        </div>
      </div>
    );
  }
  return (
    <>
      <div className="detail-grid">
        {/* original mail */}
        <div className="mailcard">
          <div className="mc-head">
            <span className="mc-env"><Icon n="mail" /></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="mc-from">{r.from}</div>
              <div className="mc-sub">{r.subject}</div>
            </div>
            {r.status === 'new' && <span className="badge b-new"><span className="d" style={{ background: 'currentColor' }}></span>Ny</span>}
          </div>
          <div className="mc-meta">
            <div><span className="k">Fra</span>{r.email}</div>
            <div><span className="k">Modtaget</span>{r.when}</div>
          </div>
          <div className="mc-body">
            {r.body.map((seg, i) => {
              if (seg.startsWith('b:')) return <b key={i}>{seg.slice(2)}</b>;
              if (seg.startsWith('hl:')) return <span className="hl" key={i}>{seg.slice(3)}</span>;
              return <React.Fragment key={i}>{seg}</React.Fragment>;
            })}
          </div>
        </div>

        {/* AI analyse */}
        <div className="ai-panel">
          {scan && (
            <div className="ai-scan">
              <div className="ai-scan-inner">
                <div className="asc-head"><span className="asc-spin"><Icon n="refresh" /></span> Fragta opdaterer analysen…</div>
                <div className="asc-timeline">
                  {['Læser original mail', 'Udtrækker felter', 'Validerer rute & mål', 'Beregner sikkerhed'].map((s, i) => (
                    <div className="asc-step" style={{ animationDelay: (i * 0.55) + 's' }} key={i}>
                      <span className="asc-dot"></span><span className="asc-label">{s}</span><Icon n="check" />
                    </div>
                  ))}
                </div>
                <div className="asc-bar"><i></i></div>
              </div>
            </div>
          )}
          <div className="ai-head">
            <span className="p-cap" style={{ padding: 0 }}>AI-analyse</span>
            <span className="ai-conf"><i></i> Sikkerhed {v.conf}%</span>
          </div>
          <div className="ai-body">
            <div className="ai-grid">
              {F('Oprindelsesland', 'originCountry')}
              {F('By', 'originCity')}
              {F('Postnr.', 'originZip', { mono: true })}
              {F('Destinationsland', 'destCountry')}
              {F('By', 'destCity')}
              {F('Postnr.', 'destZip', { mono: true })}
              {F('Vare', 'goods', { wide: true })}
              {F('Servicetype', 'service')}
              {F('Lasttype', 'loadType')}
              {F('Incoterm', 'incoterm', { mono: true })}
              {F('Bruttovægt', 'weight', { mono: true })}
              {F('Antal kolli', 'packages', { mono: true })}
              {F('Mål (LxBxH)', 'dims', { mono: true })}
              {F('Volumen CBM', 'cbm', { mono: true })}
              {F('Volumen LDM', 'ldm', { mono: true })}
              {F('Særlige krav', 'special', { wide: true })}
            </div>
            <div className="ai-foot">
              <button className={'btn btn-sm ' + (edit ? 'btn-primary' : 'btn-ghost')} onClick={() => setEdit(e => !e)}>
                <Icon n={edit ? 'check' : 'edit'} /> {edit ? 'Gem ændringer' : 'Redigér felter'}
              </button>
              <button className="btn btn-ghost btn-sm" onClick={reanalyse} disabled={scan}><Icon n="refresh" /> Opdater analyse</button>
              <button className="btn btn-primary btn-arrow btn-sm" onClick={onNext}>Match vognmænd</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

// ---- Match-række med e-mail-udkast ------------------------------------------
function MatchRow({ m, draft, checked, onToggle, open, onOpen, onRemove }) {
  return (
    <div className={'match-row' + (checked ? '' : ' off')}>
      <div className="mr-top">
        <button className="mr-check" onClick={onToggle} aria-label="Vælg">
          {checked && <Icon n="check" />}
        </button>
        <div className="mr-id">
          <div className="mr-nm">{m.nm}</div>
          <div className="mr-sub">{m.contact} · {m.mail}</div>
        </div>
        <button className="btn btn-quiet btn-sm mr-x" onClick={onRemove}><Icon n="x" /> Fjern</button>
        <div className="mr-meta">
          <span className="mr-score">Score {m.score}</span>
          <span className="co-flag"><Icon n="pin" style={{ width: 12, height: 12 }} />{m.land}</span>
          <span className="mono">{m.ref}</span>
          <span className="mono">Sprog: {m.lang}</span>
        </div>
      </div>
      <button className={'mr-draft-toggle' + (open ? ' open' : '')} onClick={onOpen}>
        <Icon n="chevR" /> Rediger e-mail-udkast
      </button>
      {open && (
        <div className="draft-editor">
          <label>Emne</label>
          <input className="de-input" defaultValue={draft.subject} />
          <label>Indhold</label>
          <textarea className="de-area" defaultValue={draft.body} rows={9}></textarea>
          <div className="de-foot">
            <span className="de-note"><Icon n="spark" /> Genereret af Fragta · tilpas frit før afsendelse</span>
            <button className="btn btn-ghost btn-sm"><Icon n="check" /> Gem udkast</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ---- Trin 2: Match & send ---------------------------------------------------
function StepMatch({ r, a, matched, onSend }) {
  const [sel, setSel] = useState(() => new Set(matched.map(m => m.id)));
  const [removed, setRemoved] = useState(() => new Set());
  const [open, setOpen] = useState(null);
  const live = matched.filter(m => !removed.has(m.id));
  const chosen = live.filter(m => sel.has(m.id));
  const allOn = live.length > 0 && chosen.length === live.length;

  const toggle = (id) => setSel(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
  const toggleAll = () => setSel(allOn ? new Set() : new Set(live.map(m => m.id)));
  const remove = (id) => { setRemoved(s => new Set(s).add(id)); setSel(s => { const n = new Set(s); n.delete(id); return n; }); };

  return (
    <div className="panel match-panel">
      <div className="match-bar">
        <div className="mb-l">
          <h3>Matchede virksomheder <span className="mb-count">{live.length}</span></h3>
          <button className="check-all" onClick={toggleAll}>
            <span className={'mr-check sm' + (allOn ? ' on' : '')}>{allOn && <Icon n="check" />}</span>
            Vælg alle
          </button>
        </div>
        <button className="btn btn-ghost btn-sm"><Icon n="refresh" /> Rematch vognmænd</button>
      </div>

      <div className="match-list">
        {live.map(m => (
          <MatchRow
            key={m.id}
            m={m}
            draft={buildDraft(r, a, m)}
            checked={sel.has(m.id)}
            onToggle={() => toggle(m.id)}
            open={open === m.id}
            onOpen={() => setOpen(o => o === m.id ? null : m.id)}
            onRemove={() => remove(m.id)}
          />
        ))}
      </div>

      <div className="match-foot">
        <div className="oc-note"><Icon n="spark" /> Intet sendes uden din godkendelse — du vælger hvem forespørgslen går til.</div>
        <button className="btn btn-primary btn-arrow" disabled={!chosen.length} onClick={onSend}>
          Godkend &amp; send til {chosen.length} {chosen.length === 1 ? 'vognmand' : 'vognmænd'}
        </button>
      </div>
    </div>
  );
}

// ---- Trin 3: Tilbud & valg --------------------------------------------------
const MEDALS = [
  { emoji: '🥇', label: 'Guld', cls: 'gold' },
  { emoji: '🥈', label: 'Sølv', cls: 'silver' },
  { emoji: '🥉', label: 'Bronze', cls: 'bronze' },
];
const WHY = [
  { tag: 'Lavest totalpris', ico: 'tag', why: 'Billigste gyldige bud på ruten — bedste totalpris inkl. afgifter. Vægter højest i din profil.' },
  { tag: 'Hurtigst transit', ico: 'clock', why: 'Korteste leveringstid blandt buddene. Lidt dyrere, men leverer hurtigst.' },
  { tag: 'Højest pålidelighed', ico: 'shield', why: 'Stærkest pålidelighedsscore og leveringshistorik, selvom prisen er en smule højere.' },
];
function buildDispatch(r, sentTotal) {
  // carriers the request was sent to, with reply status
  const replied = (r.offers || []).map((o, i) => ({
    nm: o.nm, md: o.md, pr: o.pr, rk: o.rk,
    transit: o.transit || [3, 5, 7, 9, 6][i % 5] + ' dage',
    note: o.note || [
      'Gælder til månedens udgang · lokale afgifter ekskl.',
      'All-in · afhentning og dokumenter inkluderet',
      'Plads bekræftet · ekskl. forsikring',
      'Subject to space · D/O fee ved destination',
    ][i % 4],
    received: o.received || r.when,
    conf: o.conf || [100, 96, 92, 88, 85][i % 5],
    score: o.score || [94, 91, 88, 82, 79][i % 5],
    status: 'replied',
  }));
  // pending / no-bid carriers to fill out the "sent to" count
  const extra = ['EuroLink Transport', 'NordFracht', 'BalticMove', 'CargoOne', 'Via Logistics', 'TransEU'];
  const total = Math.max(sentTotal || 0, r.replies || replied.length, replied.length);
  const pending = [];
  for (let i = 0; replied.length + pending.length < total && i < extra.length; i++) {
    pending.push({ nm: extra[i], status: i % 4 === 3 ? 'nobid' : 'pending', received: '—' });
  }
  return { replied, pending, total };
}

function OfferRow({ o, idx, selected, onSelect, answered }) {
  const [why, setWhy] = useState(false);
  const m = MEDALS[idx] || { emoji: idx + 1, label: '', cls: '' };
  const w = WHY[idx];
  return (
    <div className={'offer2 m-' + (m.cls || 'none') + (selected ? ' sel' : '') + (idx === 0 ? ' top' : '')}>
      <div className="o2-head" onClick={() => !answered && onSelect()}>
        <span className={'o2-medal ' + m.cls} title={m.label + ' · #' + (idx + 1)}>{m.emoji}</span>
        <div className="o2-main">
          <div className="o2-titlerow">
            <span className="o2-nm">{o.nm}</span>
            {w && <span className={'o2-why ' + m.cls}><Icon n={w.ico} />{w.tag}</span>}
          </div>
          <div className="o2-md">{o.md}</div>
          <div className="o2-figs">
            <span className="o2-pr">{o.pr}</span>
            <span className="o2-tt">{o.transit} · pålidelighed {o.score}</span>
          </div>
        </div>
        <div className="o2-actions">
          {!answered && <span className={'o2-radio' + (selected ? ' on' : '')}>{selected && <Icon n="check" />}</span>}
          {w && <button className="o2-info" title="Hvorfor denne placering?" onClick={e => { e.stopPropagation(); setWhy(v => !v); }}><Icon n="info" /></button>}
        </div>
      </div>
      {why && w && (
        <div className="o2-whybox">
          <div className="wb-h"><Icon n="spark" /> Hvorfor {m.label.toLowerCase()}?</div>
          <p>{w.why}</p>
          <div className="wb-metrics">
            <span><b>{o.pr}</b> pris</span>
            <span><b>{o.transit}</b> transit</span>
            <span><b>{o.score}</b> pålidelighed</span>
          </div>
        </div>
      )}
      <div className="o2-note-block">
        <span className="o2-note-k">Betingelser & noter</span>
        <span className="o2-note-v">{o.note}</span>
        <span className="o2-conf">Confidence {o.conf}%</span>
      </div>
    </div>
  );
}

function WinnerEmail({ r, winner, onClose }) {
  const [copied, setCopied] = useState(false);
  const subject = 'Tilbud — ' + r.route[0] + ' → ' + r.route[1] + (r.id ? ' (' + r.id + ')' : '');
  const bodyText =
'Kære ' + (r.fromShort || 'kunde') + ',\n\n' +
'Tak for jeres forespørgsel på transport ' + r.route[0] + ' → ' + r.route[1] + '.\n\n' +
'Vi kan tilbyde følgende:\n' +
'  • Pris: ' + winner.pr + '\n' +
'  • Transittid: ' + winner.transit + '\n' +
'  • Vilkår: ' + winner.note + '\n\n' +
'Lad os vide, om vi skal gå videre med bookingen, så reserverer vi kapaciteten med det samme.\n\n' +
'Venlig hilsen\n' + getDemo().workspace;
  const copy = () => {
    try { navigator.clipboard.writeText('Emne: ' + subject + '\n\n' + bodyText); } catch (e) {}
    setCopied(true); setTimeout(() => setCopied(false), 1800);
  };
  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 660 }}>
        <div className="m-head">
          <div>
            <div className="m-title">Svar til kunden</div>
            <div className="m-sub">Det vindende tilbud — {winner.nm} · {winner.pr}</div>
          </div>
          <button className="m-x" onClick={onClose}><Icon n="x" /></button>
        </div>
        <div className="m-body">
          <div className="we-mail">
            <div className="we-row"><span className="we-k">Til</span><span className="we-v">{r.email || (r.fromShort + '@kunde.dk')}</span></div>
            <div className="we-row"><span className="we-k">Fra</span><span className="we-v">{getDemo().workspace} &lt;quotes@{getDemo().workspace.toLowerCase().replace(/[^a-z0-9]+/g,'')}.dk&gt;</span></div>
            <div className="we-row"><span className="we-k">Emne</span><span className="we-v" style={{ fontWeight: 600 }}>{subject}</span></div>
            <textarea className="we-body" defaultValue={bodyText}></textarea>
          </div>
          <div className="we-hint"><Icon n="spark" /> Forhåndsudfyldt af Fragta i {getDemo().workspace}s navn. Tilpas frit før afsendelse.</div>
        </div>
        <div className="m-foot">
          <button className="btn btn-ghost btn-sm" onClick={copy}>
            <Icon n={copied ? 'check' : 'doc'} /> {copied ? 'Kopieret!' : 'Tag over i egen indbakke (kopiér)'}
          </button>
          <button className="btn btn-primary btn-sm" onClick={onClose}><Icon n="send" /> Send fra Fragta</button>
        </div>
      </div>
    </div>
  );
}

function StepOffers({ r, sentCount, onBack, onAnswer }) {
  const [sel, setSel] = useState(0);
  const [answered, setAnswered] = useState(r.status === 'done');
  const [showMail, setShowMail] = useState(false);
  const d = buildDispatch(r, Math.max(sentCount || 0, r.replies || 0));
  const total = d.total;
  const pendingCount = total - d.replied.length;
  return (
    <div className="detail-grid offers-grid">
      <div className="panel sent-panel">
        <div className="panel-head"><h3>Sendt til vognmænd</h3><span className="badge b-sent">{total} sendt</span></div>
        <div className="sent-body">
          <div className="dispatch-stats">
            <div className="ds"><span className="ds-n">{total}</span><span className="ds-l">Sendt ud</span></div>
            <div className="ds"><span className="ds-n" style={{ color: 'var(--good)' }}>{d.replied.length}</span><span className="ds-l">Svaret</span></div>
            <div className="ds"><span className="ds-n" style={{ color: 'var(--warn)' }}>{pendingCount}</span><span className="ds-l">Afventer</span></div>
          </div>
          <div className="dispatch-list">
            {d.replied.map((c, i) => (
              <div className="dl-row" key={'r' + i}>
                <span className="dl-rk">{i + 1}</span>
                <span className="dl-nm">{c.nm}</span>
                <span className="dl-st replied"><Icon n="check" /> Svaret</span>
                <span className="dl-pr">{c.pr}</span>
              </div>
            ))}
            {d.pending.map((c, i) => (
              <div className="dl-row dim" key={'p' + i}>
                <span className="dl-rk">·</span>
                <span className="dl-nm">{c.nm}</span>
                {c.status === 'nobid'
                  ? <span className="dl-st nobid"><Icon n="x" /> Afgav ikke bud</span>
                  : <span className="dl-st pending"><span className="pulse-dot"></span> Afventer</span>}
                <span className="dl-pr">—</span>
              </div>
            ))}
          </div>
          <div className="sent-track">
            <div className="st-row"><span className="st-dot done"><Icon n="check" /></span> Forespørgsel sendt · {r.when}</div>
            <div className="st-row"><span className="st-dot done"><Icon n="check" /></span> {d.replied.length} af {total} har svaret</div>
            <div className="st-row"><span className={'st-dot' + (answered ? ' done' : ' live')}>{answered ? <Icon n="check" /> : ''}</span> {answered ? 'Svar sendt til kunden' : 'Afventer dit valg'}</div>
          </div>
        </div>
      </div>

      <div className="offers-card">
        <div className="oc-head">
          <span className="oc-cap">Top 3 · rangeret af Fragta</span>
          <span className="oc-cap" style={{ color: 'var(--ink-faint)' }}>{d.replied.length} svar modtaget</span>
        </div>
        <div className="offers2-list">
          {d.replied.slice(0, 3).map((o, i) => (
            <OfferRow key={i} o={o} idx={i} selected={sel === i} onSelect={() => setSel(i)} answered={answered} />
          ))}
        </div>
        {d.replied.length > 3 && (
          <div className="more-offers">
            <div className="oc-cap" style={{ padding: '4px 0 8px', color: 'var(--ink-faint)' }}>Øvrige svar</div>
            {d.replied.slice(3).map((o, i) => (
              <div className="mo-row" key={i}>
                <span className="mo-nm">{o.nm}</span>
                <span className="mo-md">{o.transit}</span>
                <span className="mo-pr">{o.pr}</span>
              </div>
            ))}
          </div>
        )}
        <div className="oc-foot">
          {answered ? (
            <button className="btn btn-ghost" style={{ width: '100%', color: 'var(--good)', borderColor: 'var(--good)' }} onClick={() => setShowMail(true)}>
              <Icon n="mail" /> Se sendt svar til {r.fromShort}
            </button>
          ) : (
            <button className="btn btn-primary btn-arrow" onClick={() => setShowMail(true)}>Vælg #{sel + 1} ({d.replied[sel] ? d.replied[sel].nm : ''}) — se svar-mail</button>
          )}
          <div className="oc-note"><Icon n="spark" /> Sendes som om det kom fra jer — kunden mærker ingen mellemmand.</div>
        </div>
      </div>
      {showMail && d.replied[sel] && (
        <WinnerEmail r={r} winner={d.replied[sel]} onClose={() => { setShowMail(false); if (!answered) { setAnswered(true); onAnswer && onAnswer(); } }} />
      )}
    </div>
  );
}

// ---- FORESPØRGSEL DETAIL (wrapper) -----------------------------------------
function RequestDetail({ id, onBack }) {
  const r = findRequest(id) || REQUESTS[0];
  const a = getAnalyse(r);
  const matched = getMatched(r);

  const startStep = r.status === 'new' || r.status === 'err' ? 1 : r.status === 'wait' ? 2 : 3;
  const [step, setStep] = useState(startStep);
  const [maxStep, setMaxStep] = useState(startStep);
  const [sentCount, setSentCount] = useState(matched.length);

  useEffect(() => {
    const s = r.status === 'new' || r.status === 'err' ? 1 : r.status === 'wait' ? 2 : 3;
    setStep(s); setMaxStep(s); setSentCount(matched.length);
  }, [id]);

  // Bridge for the external guided tour: let it drive Analyse→Match→Tilbud
  useEffect(() => {
    window.__extSetReqStep = (n) => { setStep(n); setMaxStep(m => Math.max(m, n)); };
    return () => { if (window.__extSetReqStep) delete window.__extSetReqStep; };
  }, []);

  const advance = (to, count) => {
    setStep(to); setMaxStep(m => Math.max(m, to));
    if (count != null) setSentCount(count);
    if (to === 3) setRequestStatus(r.id, 'sent');
  };
  const [matching, setMatching] = useState(false);
  const runMatch = () => {
    if (matching) return;
    setMatching(true);
    setTimeout(() => { setMatching(false); advance(2); }, 2200);
  };

  return (
    <div className="page reveal">
      <div className="wrap">
        <a className="back-link" onClick={onBack}><Icon n="arrowL" /> Tilbage til forespørgsler</a>

        <div className="page-head" style={{ marginBottom: 20 }}>
          <div className="lead-h">
            <span className="eyebrow">Forespørgsel #{r.id}</span>
            <h1 className="page-title" style={{ fontSize: 'clamp(24px,2.8vw,34px)' }}>{r.route[0]} → {r.route[1]}</h1>
          </div>
          <div className="head-actions"><StatusBadge s={r.status} /></div>
        </div>

        {r.offers.length > 0 && <Stepper step={step} setStep={setStep} maxStep={maxStep} />}

        <div className="step-body" key={step}>
          {matching && (
            <div className="match-loader">
              <div className="ml-inner">
                <div className="ml-head"><span className="asc-spin"><Icon n="refresh" /></span> Matcher mod jeres katalog…</div>
                <div className="asc-timeline">
                  {['Læser rute, gods & krav', 'Scorer 248 vognmænd', 'Filtrerer på service & ruter', 'Rangerer bedste match'].map((s, i) => (
                    <div className="asc-step" style={{ animationDelay: (i * 0.45) + 's' }} key={i}>
                      <span className="asc-dot"></span><span className="asc-label">{s}</span><Icon n="check" />
                    </div>
                  ))}
                </div>
                <div className="asc-bar"><i style={{ animationDuration: '2.1s' }}></i></div>
              </div>
            </div>
          )}
          {step === 1 && !matching && <StepAnalyse r={r} a={a} onNext={runMatch} />}
          {step === 2 && <StepMatch r={r} a={a} matched={matched} onSend={() => advance(3, matched.length)} />}
          {step === 3 && <StepOffers r={r} sentCount={sentCount} onBack={() => setStep(2)} onAnswer={() => setRequestStatus(r.id, 'done')} />}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RequestDetail });