// Step 5 — Persist to Odoo (review queue)
function StepPersist({ product, onDone, onBack }) {
  const autoPersist = product.confidence.overall >= 0.75;
  const [stage, setStage] = useState(0); // 0 connecting, 1 writing, 2 done
  useEffect(() => {
    const t1 = setTimeout(() => setStage(1), 900);
    const t2 = setTimeout(() => setStage(2), 2000);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [product.id]);

  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
        <Chip tone="red">STEP 05</Chip>
        <Label>PERSIST · {autoPersist ? 'ODOO PENDING-REVIEW' : 'APP DB LOG-ONLY'}</Label>
        <Chip tone="ink">MCP · ODOO 17</Chip>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {/* LEFT: write transaction */}
        <div className="brut" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '10px 14px', display:'flex', alignItems:'center', gap:8 }}>
            <Label style={{ color: 'var(--paper)' }}>MCP TRANSACTION</Label>
            <Chip tone="yellow" style={{ marginLeft: 'auto' }}>{stage < 2 ? <><span className="blink">●</span> RUNNING</> : '✓ COMMITTED'}</Chip>
          </div>
          <div style={{ padding: 14, fontFamily: 'JetBrains Mono, monospace', fontSize: 12, lineHeight: 1.8 }}>
            <div>{stage >= 0 ? '▸' : '·'} odoo.mcp.connect() <span style={{ color: 'var(--muted)' }}>// odoo-mcp@0.4.2</span></div>
            {stage >= 1 && <>
              <div>{stage >= 1 ? '▸' : '·'} odoo.product.template.create(</div>
              <pre style={{ margin: '4px 0 4px 20px', padding: 10, background: 'var(--paper-2)', border: '2px solid var(--ink)', whiteSpace: 'pre-wrap' }}>
{`{
  "name": "${product.resolvedName}",
  "default_code": "${product.sku}",
  "list_price_range": [${product.recommended[0]}, ${product.recommended[1]}],
  "standard_price": ${product.landed.landed_thb},
  "x_hs_code": "${product.hsCode}",
  "x_brand": "${product.brand}",
  "x_confidence": ${product.confidence.overall.toFixed(2)},
  "x_state": "${autoPersist ? 'pending_review' : 'log_only'}",
  "x_synthesis_id": "syn_${product.id}_${Date.now().toString(36)}"
}`}
              </pre>
              <div>{stage >= 2 ? '✓' : '·'} returned id = <b>{autoPersist ? '3421' : '—'}</b></div>
            </>}
            {stage >= 2 && <>
              <div style={{ marginTop: 8, color: autoPersist ? 'var(--green)' : 'var(--red)', fontWeight: 800 }}>
                {autoPersist ? '✓ QUEUED FOR HUMAN REVIEWER' : '⊘ NOT PERSISTED · logged in app DB only'}
              </div>
              <div style={{ color: 'var(--muted)', fontSize: 11 }}>
                // 2 reviewers in queue · avg review time 4m 12s
              </div>
            </>}
          </div>
        </div>

        {/* RIGHT: reviewer card preview */}
        <div>
          <div className="brut" style={{ padding: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <Label>REVIEWER WILL SEE</Label>
              <Chip tone="ink" style={{ marginLeft: 'auto' }}>PREVIEW</Chip>
            </div>
            <div className="brut-sm" style={{ padding: 12, background: 'var(--paper-2)' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '72px 1fr', gap: 10 }}>
                <ImgPlaceholder label={product.image} size={72} />
                <div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>PENDING #3421</div>
                  <div style={{ fontWeight: 800, fontSize: 14 }}>{product.resolvedName}</div>
                  <div className="mono" style={{ fontSize: 11 }}>{product.sku} · {product.brand}</div>
                </div>
              </div>
              <hr className="divider-dashed" style={{ margin: '10px 0' }}/>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, fontSize: 11 }} className="mono">
                <div><span style={{ color: 'var(--muted)' }}>BAND </span><b>฿{product.recommended[0]}–{product.recommended[1]}</b></div>
                <div><span style={{ color: 'var(--muted)' }}>LANDED </span><b>฿{product.landed.landed_thb}</b></div>
                <div><span style={{ color: 'var(--muted)' }}>CONF </span><b>{(product.confidence.overall*100).toFixed(0)}%</b></div>
                <div><span style={{ color: 'var(--muted)' }}>COMPS </span><b>{product.competitors.filter(c=>c.price_thb).length}</b></div>
              </div>
              <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
                <Btn size="sm" variant="primary" disabled>✓ APPROVE</Btn>
                <Btn size="sm" variant="ghost" disabled>✎ EDIT</Btn>
                <Btn size="sm" variant="ghost" disabled>✕ REJECT</Btn>
              </div>
            </div>
          </div>

          <div className="brut" style={{ padding: 14, marginTop: 12, background: 'var(--paper-2)' }}>
            <Label>NEXT</Label>
            <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
              <Btn variant="primary" onClick={onDone}>+ NEW QUERY</Btn>
              <Btn variant="ghost" onClick={onBack}>← BACK TO RESULTS</Btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.StepPersist = StepPersist;