// Step 2 — Disambiguation (3 candidates)
function StepDisambiguate({ product, onConfirm, onBack }) {
  const [selected, setSelected] = useState(0);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 20, alignItems: 'start' }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <Chip tone="red">STEP 02</Chip>
            <Label>DISAMBIGUATION · PRE-FLIGHT</Label>
            <Chip tone="yellow">~฿1.10 SPENT</Chip>
            <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>
              // 3 candidates surfaced in 6.2s via SearXNG + haiku-4.5
            </span>
          </div>

          <div className="big-num" style={{ fontSize: 28, marginBottom: 6 }}>
            Which variant did you mean?
          </div>
          <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 20 }}>
            Confirming the right SKU now prevents spending ~฿30 on the wrong deep-research pass.
          </div>

          <div style={{ display: 'grid', gap: 12 }}>
            {product.candidates.map((c, i) => {
              const isSel = selected === i;
              return (
                <button
                  key={i}
                  onClick={() => setSelected(i)}
                  className={`brut ${isSel ? 'on-bright' : ''}`}
                  style={{
                    display: 'grid', gridTemplateColumns: '110px 1fr auto', gap: 14, padding: 14,
                    textAlign: 'left', cursor: 'pointer',
                    background: isSel ? 'var(--yellow)' : 'var(--paper)',
                    transform: isSel ? 'translate(-2px,-2px)' : 'none',
                    boxShadow: isSel ? '8px 8px 0 var(--ink)' : '6px 6px 0 var(--ink)',
                    transition: 'all 120ms ease',
                  }}
                >
                  <ImgPlaceholder label={product.image} size={110} tone={isSel ? 'red' : 'ink'} />
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div style={{ fontWeight: 800, fontSize: 16 }}>{c.name}</div>
                      {isSel && <Chip tone="ink">SELECTED</Chip>}
                    </div>
                    <div className="mono" style={{ fontSize: 12, marginTop: 4, color: 'var(--muted)' }}>{c.variant}</div>
                    <div className="mono" style={{ fontSize: 11, marginTop: 8 }}>
                      <span style={{ fontWeight: 700 }}>NOTE &nbsp;</span>{c.note}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right', minWidth: 110 }}>
                    <Label>MATCH</Label>
                    <div className="big-num mono" style={{ fontSize: 32, marginTop: 2 }}>
                      {(c.match * 100).toFixed(0)}<span style={{ fontSize: 14 }}>%</span>
                    </div>
                    <div style={{ height: 8, border: '2px solid var(--ink)', marginTop: 6, width: 100, marginLeft: 'auto', background: 'var(--paper)' }}>
                      <div style={{
                        width: `${c.match * 100}%`, height: '100%',
                        background: c.match > 0.85 ? 'var(--green)' : c.match > 0.6 ? 'var(--yellow)' : 'var(--red)',
                      }} />
                    </div>
                  </div>
                </button>
              );
            })}
          </div>

          <div style={{ marginTop: 22, display: 'flex', gap: 10, alignItems: 'center' }}>
            <Btn variant="ghost" onClick={onBack}>← EDIT QUERY</Btn>
            <Btn variant="primary" onClick={() => onConfirm(selected)}>
              CONFIRM & DEEP RESEARCH &nbsp;→
            </Btn>
            <Chip>EST. ฿38</Chip>
            <Chip>~42s</Chip>
            <span className="mono" style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--muted)' }}>
              raises variant-match confidence ~70% → ~90%
            </span>
          </div>
        </div>

        {/* Right sidebar — context */}
        <div>
          <div className="brut" style={{ padding: 14, marginBottom: 14 }}>
            <Label>RESOLVE TRACE</Label>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, marginTop: 8, lineHeight: 1.6 }}>
              <div>▸ odoo.mcp.search(<b>"{product.query}"</b>)</div>
              <div style={{ color: 'var(--muted)' }}>&nbsp;&nbsp;&nbsp;→ 0 exact matches</div>
              <div>▸ pgvector.knn(bge-m3, k=5)</div>
              <div style={{ color: 'var(--muted)' }}>&nbsp;&nbsp;&nbsp;→ 2 fuzzy &lt; threshold</div>
              <div>▸ web.search(preflight)</div>
              <div style={{ color: 'var(--muted)' }}>&nbsp;&nbsp;&nbsp;→ 3 candidates</div>
              <div style={{ marginTop: 6, color: 'var(--red)' }}>▸ USER ATTENTION REQUIRED</div>
            </div>
          </div>

          <div className="brut" style={{ padding: 14, background: 'var(--paper-2)' }}>
            <Label>PRODUCT FINGERPRINT</Label>
            <div style={{ marginTop: 8, fontSize: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px dashed var(--ink)' }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>QUERY</span>
                <span style={{ fontWeight: 700 }}>{product.query}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px dashed var(--ink)' }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>CATEGORY</span>
                <span style={{ fontWeight: 700 }}>{product.category}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px dashed var(--ink)' }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>HS CODE</span>
                <span className="mono" style={{ fontWeight: 700 }}>{product.hsCode}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px dashed var(--ink)' }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>BRAND</span>
                <span style={{ fontWeight: 700 }}>{product.brand}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>TIER</span>
                <span style={{ fontWeight: 700 }}>{product.tier}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.StepDisambiguate = StepDisambiguate;