// Step 1 — Input / Product Select
function StepInput({ onSubmit, onPickOdoo, config, setConfig, demoKey, setDemoKey }) {
  const [query, setQuery] = useState(DEMO_PRODUCTS[demoKey].query);
  const [typing, setTyping] = useState(false);

  useEffect(() => { setQuery(DEMO_PRODUCTS[demoKey].query); }, [demoKey]);

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20 }}>
      {/* LEFT — product input */}
      <div className="brut" style={{ padding: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <Chip tone="red">STEP 01</Chip>
          <Label>PRODUCT SELECTION</Label>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
            <Chip>EN</Chip><Chip>TH</Chip><Chip>ZH</Chip>
          </div>
        </div>

        <div className="big-num" style={{ fontSize: 32, marginBottom: 4 }}>What are we pricing today?</div>
        <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 20 }}>
          // TYPE A PRODUCT NAME, BRAND, OR SKU — MIXED EN/TH/ZH OK
        </div>

        <div style={{ position: 'relative' }}>
          <input
            className="input"
            style={{ fontSize: 18, padding: '16px 18px', paddingLeft: 52 }}
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="e.g. ท่อ Brand MUGEN SX32221GSA"
          />
          <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)',
                        fontWeight: 800, fontSize: 18 }}>{'>'}</div>
        </div>

        {/* Suggestions */}
        <div style={{ marginTop: 12, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          <Label style={{ width: '100%', marginBottom: 4 }}>RECENT / SUGGESTED</Label>
          {['MUGEN SX32221GSA', 'Xiaomi X20+', 'Anker 735 GaNPrime', 'BT-X77 IP67', 'JVC HA-S20BT', 'Tronsmart Bang Max'].map(s =>
            <button key={s} className="chip" style={{ cursor: 'pointer' }}
              onClick={() => setQuery(s)}>{s}</button>
          )}
        </div>

        <hr className="divider" style={{ margin: '20px 0' }} />

        {/* Odoo picker */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
          <Label>OR PICK FROM ODOO CATALOG</Label>
          <Chip tone="ink">MCP · LIVE</Chip>
          <span className="mono" style={{ fontSize: 11, marginLeft: 'auto', color: 'var(--muted)' }}>
            conn: odoo-mcp@0.4.2 · 18.2k SKUs indexed
          </span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
            { sku: 'ODO-03421', name: 'MUGEN SX32221GSA', stock: 0, synced: '12d ago' },
            { sku: 'ODO-01188', name: 'Xiaomi Robot X20+', stock: 42, synced: '2h ago' },
            { sku: 'ODO-02990', name: 'Anker 735 GaNPrime', stock: 140, synced: '1d ago' },
            { sku: 'ODO-04102', name: 'Baseus 100W Cable 2m', stock: 320, synced: '6h ago' },
          ].map(o => (
            <button key={o.sku} onClick={() => onPickOdoo(o)} className="brut-sm"
              style={{ padding: 10, textAlign: 'left', cursor: 'pointer', background: 'var(--paper-2)' }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>{o.sku}</div>
              <div style={{ fontWeight: 700, fontSize: 13 }}>{o.name}</div>
              <div className="mono" style={{ fontSize: 10, display: 'flex', justifyContent: 'space-between', marginTop: 4 }}>
                <span>STOCK {o.stock}</span><span>{o.synced}</span>
              </div>
            </button>
          ))}
        </div>

        <div style={{ marginTop: 22, display: 'flex', gap: 10, alignItems: 'center' }}>
          <Btn variant="primary" onClick={() => onSubmit(query)} size="md">
            RESOLVE & DISAMBIGUATE &nbsp;→
          </Btn>
          <Chip>EST. ฿1.10</Chip>
          <Chip>~7s</Chip>
          <div className="mono" style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--muted)' }}>
            enter ↵
          </div>
        </div>
      </div>

      {/* RIGHT — financial config */}
      <div>
        <div className="brut" style={{ padding: 18, marginBottom: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <Chip tone="yellow">CONFIG</Chip>
            <Label>LANDED-COST PARAMETERS</Label>
          </div>
          {[
            { k: 'vat',       l: 'VAT',          suffix: '%', step: 0.5 },
            { k: 'import',    l: 'IMPORT DUTY',  suffix: '%', step: 0.5 },
            { k: 'transport', l: 'TRANSPORT',    suffix: '%', step: 0.5 },
            { k: 'extra',     l: 'OTHER EXTRA',  suffix: 'THB', step: 10 },
          ].map(f => (
            <div key={f.k} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', alignItems: 'center', gap: 8, padding: '10px 0', borderBottom: '2px dashed var(--ink)' }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 13 }}>{f.l}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>
                  {f.k === 'vat' && 'Thailand standard · §83'}
                  {f.k === 'import' && 'HS-code driven · default 20%'}
                  {f.k === 'transport' && 'FOB → TH warehouse'}
                  {f.k === 'extra' && 'Handling, insurance, margin pad'}
                </div>
              </div>
              <div style={{ display: 'inline-flex', border: '2px solid var(--ink)' }}>
                <button className="mono" style={{ border: 'none', borderRight: '2px solid var(--ink)', background: 'var(--paper-2)', padding: '0 10px', fontWeight: 800, cursor: 'pointer', color: 'var(--ink)' }}
                        onClick={() => setConfig({ ...config, [f.k]: Math.max(0, config[f.k] - f.step) })}>−</button>
                <div className="mono" style={{ padding: '6px 12px', minWidth: 60, textAlign: 'center', fontWeight: 700 }}>{config[f.k]}</div>
                <button className="mono" style={{ border: 'none', borderLeft: '2px solid var(--ink)', background: 'var(--paper-2)', padding: '0 10px', fontWeight: 800, cursor: 'pointer', color: 'var(--ink)' }}
                        onClick={() => setConfig({ ...config, [f.k]: config[f.k] + f.step })}>+</button>
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', width: 30 }}>{f.suffix}</div>
            </div>
          ))}
          <div className="mono" style={{ fontSize: 11, marginTop: 10, color: 'var(--muted)' }}>
            // Persisted to company profile · last edit 2d ago
          </div>
        </div>

        <div className="brut" style={{ padding: 14 }}>
          <Label>CONFIDENCE THRESHOLD</Label>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
            <div className="big-num mono" style={{ fontSize: 36 }}>75<span style={{ fontSize: 16 }}>%</span></div>
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 11 }}>AUTO-PERSIST TO ODOO</div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>Below → log-only · review manually</div>
            </div>
            <Chip tone="green">LOCKED</Chip>
          </div>
        </div>
      </div>
    </div>
  );
}

window.StepInput = StepInput;