// Step 3: Generation + results + history
const { useState: useState3, useEffect: useEffect3 } = React;

function Step3Generate({ product, analysis, config, setConfig, onBack, history, addToHistory }) {
  const [status, setStatus] = useState3('idle'); // idle | loading | done
  const [results, setResults] = useState3([]);
  const [lightbox, setLightbox] = useState3(null);
  const [stageIdx, setStageIdx] = useState3(0);

  const stages = ['Preparing reference', 'Composing scene', 'Rendering', 'Finishing'];

  const envObj = window.SaltaireData.environments.find(e => e.id === config.env) || {};

  const handleGenerate = async () => {
    setStatus('loading');
    setResults([]);
    setStageIdx(0);
    // Animate through stages
    const interval = setInterval(() => {
      setStageIdx((i) => Math.min(i + 1, stages.length - 1));
    }, 1400);

    const prompt = window.SaltaireAgent.buildPrompt({ product, analysis, ...config });
    try {
      const imgs = await window.SaltaireAgent.generate({
        prompt,
        model: config.model,
        variants: config.variants,
        referenceImage: product.images[0],
        aspectRatio: config.aspectRatio,
        productType: analysis.productType
      });
      // Ensure at least 4.5s for stage anim
      await new Promise(r => setTimeout(r, 2500));
      clearInterval(interval);
      setStageIdx(stages.length);
      const enriched = imgs.map(img => ({
        ...img,
        product: product.name,
        env: envObj.name,
        aspectRatio: config.aspectRatio
      }));
      setResults(enriched);
      enriched.forEach(e => addToHistory(e));
      setStatus('done');
    } catch (e) {
      clearInterval(interval);
      setStatus('idle');
      console.error(e);
    }
  };

  const models = window.SaltaireData.suboptions.models;
  const modelObj = models.find(m => m.id === config.model) || models[0];

  return (
    <div className="step3-wrap fade-in">
      {/* Summary column */}
      <div className="gen-summary">
        <div className="card gen-summary-card">
          <div className="hairline muted" style={{ marginBottom: 16 }}>Generation Brief</div>
          <div className="summary-row">
            <div className="lbl">Product</div>
            <div className="val" style={{ fontSize: 14 }}>{product.name}</div>
          </div>
          <div className="summary-row">
            <div className="lbl">Scene</div>
            <div className="val">{envObj.name}</div>
          </div>
          <div className="summary-row">
            <div className="lbl">Lighting</div>
            <div className="val">{window.SaltaireData.suboptions.lighting.find(l => l.id === config.lighting)?.name}</div>
          </div>
          <div className="summary-row">
            <div className="lbl">Time</div>
            <div className="val">{window.SaltaireData.suboptions.timeOfDay.find(t => t.id === config.timeOfDay)?.name}</div>
          </div>
          <div className="summary-row">
            <div className="lbl">Mood</div>
            <div className="val">{window.SaltaireData.suboptions.mood.find(m => m.id === config.mood)?.name}</div>
          </div>
          <div className="summary-row">
            <div className="lbl">Aspect</div>
            <div className="val">{config.aspectRatio}</div>
          </div>
        </div>

        <div className="card" style={{ padding: 24 }}>
          <div className="hairline muted" style={{ marginBottom: 16 }}>Output Settings</div>
          <label className="field-label">Model</label>
          <select className="select" value={config.model} onChange={(e) => setConfig({ ...config, model: e.target.value })}>
            {models.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
          </select>
          <div style={{ fontSize: 11, color: 'var(--ink-faint)', marginTop: 6, fontStyle: 'italic' }}>
            {modelObj.note}{modelObj.cost ? ` · $${modelObj.cost.toFixed(3)}/image` : ''}
          </div>

          <label className="field-label" style={{ marginTop: 18 }}>Variants</label>
          <div style={{ display: 'flex', gap: 6 }}>
            {[1, 2, 4].map(n => (
              <button
                key={n}
                className={'btn ghost small'}
                style={{
                  flex: 1,
                  background: config.variants === n ? 'var(--walnut)' : 'transparent',
                  color: config.variants === n ? 'var(--ivory)' : 'var(--walnut)',
                  borderColor: config.variants === n ? 'var(--walnut)' : 'var(--rule)'
                }}
                onClick={() => setConfig({ ...config, variants: n })}
              >{n}</button>
            ))}
          </div>

          <button
            className="btn primary"
            style={{ width: '100%', marginTop: 24, padding: '16px' }}
            onClick={handleGenerate}
            disabled={status === 'loading'}
          >
            {status === 'loading' ? <><span className="spinner" /> Generating</> : <>✦ Generate {config.variants > 1 ? `${config.variants} Variants` : 'Image'}</>}
          </button>
          {modelObj.cost && config.variants && (
            <div style={{ fontSize: 10, color: 'var(--ink-faint)', textAlign: 'center', marginTop: 6, letterSpacing: '0.08em' }}>
              Est. ${(modelObj.cost * config.variants).toFixed(3)} per generation
            </div>
          )}
          <button className="btn ghost" style={{ width: '100%', marginTop: 8 }} onClick={onBack}>
            ← Refine scene
          </button>
        </div>
      </div>

      {/* Results stage */}
      <div>
        <div className="results-stage">
          {status === 'idle' && results.length === 0 && (
            <div className="results-empty">
              <div className="ornament">Ready</div>
              <div className="big" style={{ marginTop: 24 }}>Press Generate to compose the scene</div>
              <div style={{ maxWidth: 400, textAlign: 'center' }}>
                Your product will be preserved pixel-perfect and placed into <em style={{ fontFamily: 'var(--serif)' }}>{envObj.name}</em>.
              </div>
            </div>
          )}
          {status === 'loading' && (
            <div className="gen-loading">
              <div className="hairline" style={{ color: 'var(--brass)' }}>Rendering</div>
              <div className="big">{stages[Math.min(stageIdx, stages.length - 1)]}…</div>
              <div className="sub">Preserving silhouette, patina, and hardware from the reference while composing the new environment.</div>
              <div className="gen-progress" />
              <div className="gen-stages">
                {stages.map((s, i) => (
                  <div key={s} className={`stg ${i < stageIdx ? 'done' : i === stageIdx ? 'active' : ''}`}>{s}</div>
                ))}
              </div>
            </div>
          )}
          {status === 'done' && results.length > 0 && (
            <>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
                <div>
                  <div className="hairline" style={{ color: 'var(--brass)' }}>Generated</div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 26, color: 'var(--walnut)', marginTop: 4 }}>
                    {product.name.split(' ').slice(0, 4).join(' ')} <em style={{ fontStyle: 'italic', color: 'var(--terracotta)' }}>in {envObj.name}</em>
                  </div>
                </div>
                <button className="btn ghost small" onClick={handleGenerate}>↻ Regenerate</button>
              </div>
              <div className={`results-grid cols-${results.length === 4 ? 4 : results.length}`}>
                {results.map((r) => (
                  <div key={r.id} className="result-image" onClick={() => setLightbox(r)}>
                    <img src={r.src} alt="" />
                    <div className="result-overlay">
                      <button className="result-btn" onClick={(e) => { e.stopPropagation(); const a = document.createElement('a'); a.href = r.src; a.download = `saltaire-${r.id}.jpg`; a.target='_blank'; a.click(); }}>↓ Download</button>
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>

        {/* History */}
        <div className="history">
          <div className="history-header">
            <h3 className="serif">Recent <em>generations</em></h3>
            <div className="muted hairline">{history.length} total</div>
          </div>
          {history.length === 0 ? (
            <div className="history-empty">No past generations yet — yours will appear here.</div>
          ) : (
            <div className="history-grid">
              {history.slice(0, 12).map((h) => (
                <div key={h.id} className="history-item" onClick={() => setLightbox(h)}>
                  <img src={h.src} alt="" />
                  <div className="he-meta">{h.env}</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {lightbox && (
        <div className={`lightbox open`} onClick={() => setLightbox(null)}>
          <button className="lightbox-close" onClick={() => setLightbox(null)}>×</button>
          <img src={lightbox.src} alt="" onClick={(e) => e.stopPropagation()} />
        </div>
      )}
    </div>
  );
}

window.Step3Generate = Step3Generate;