// Step 2: Agent analysis + environment picker
const { useState: useState2, useEffect: useEffect2, useMemo: useMemo2 } = React;

function Step2Analyze({ product, analysis, onAnalysisReady, config, setConfig, onBack, onNext }) {
  const [loading, setLoading] = useState2(!analysis);
  const [stage, setStage] = useState2('Reading product page');
  const [showPrompt, setShowPrompt] = useState2(false);

  useEffect2(() => {
    if (analysis) return;
    let cancelled = false;
    (async () => {
      setStage('Reading product page');
      await new Promise(r => setTimeout(r, 700));
      if (cancelled) return;
      setStage('Identifying material & era');
      await new Promise(r => setTimeout(r, 600));
      if (cancelled) return;
      setStage('Matching environments');
      const result = await window.SaltaireAgent.analyze(product);
      if (cancelled) return;
      onAnalysisReady(result);
      setLoading(false);
    })();
    return () => { cancelled = true; };
  }, [product]);

  const envs = window.SaltaireData.environments;
  const subs = window.SaltaireData.suboptions;
  const recommended = analysis?.bestEnvironments || [];

  // Order envs: recommended first, then others, custom last
  const orderedEnvs = useMemo2(() => {
    if (!analysis) return envs;
    const rec = envs.filter(e => recommended.includes(e.id));
    const other = envs.filter(e => !recommended.includes(e.id) && !e.custom);
    const custom = envs.filter(e => e.custom);
    return [...rec, ...other, ...custom];
  }, [analysis]);

  const promptPreview = useMemo2(() => {
    if (!analysis) return '';
    return window.SaltaireAgent.buildPrompt({
      product, analysis, ...config
    });
  }, [analysis, config]);

  if (loading) {
    return (
      <div className="card fade-in" style={{ padding: 80, textAlign: 'center' }}>
        <div className="ornament" style={{ width: 300, margin: '0 auto 28px' }}>Analyzing</div>
        <div style={{ fontFamily: 'var(--serif)', fontSize: 32, fontStyle: 'italic', color: 'var(--walnut)', marginBottom: 12 }}>
          {stage}…
        </div>
        <div className="muted" style={{ marginBottom: 28 }}>
          The agent is reading the listing, identifying materials, and matching environments.
        </div>
        <div className="gen-progress" style={{ margin: '0 auto' }} />
      </div>
    );
  }

  return (
    <div className="step2-grid fade-in">
      {/* Left: product preview */}
      <div className="product-preview">
        <div className="product-image-wrap">
          <img src={product.images[0]} alt={product.name} />
        </div>
        <div className="product-info">
          <div className="pname">{product.name}</div>
          <div className="pmeta">{analysis.dimensions} · {product.sku || ''}</div>
          {product.price && <div className="price">{product.price}</div>}
          <div className="source">{product.url}</div>
        </div>
      </div>

      {/* Right: analysis + env picker */}
      <div>
        <div className="card analysis-card">
          <div className="analysis-header hairline">Agent Analysis</div>
          <h2 className="analysis-title">{analysis.productType}</h2>
          <p className="analysis-sub">{analysis.character}</p>

          <div className="attr-grid">
            <div className="attr"><div className="attr-label">Era</div><div className="attr-value">{analysis.era}</div></div>
            <div className="attr"><div className="attr-label">Material</div><div className="attr-value">{analysis.material}</div></div>
            <div className="attr"><div className="attr-label">Finish</div><div className="attr-value">{analysis.finish}</div></div>
            <div className="attr"><div className="attr-label">Dimensions</div><div className="attr-value">{analysis.dimensions}</div></div>
            <div className="attr"><div className="attr-label">Lite Configuration</div><div className="attr-value">{analysis.liteCount}</div></div>
            <div className="attr"><div className="attr-label">Hardware</div><div className="attr-value">{analysis.hardware}</div></div>
          </div>

          <div className="condition-block">
            <div className="hairline" style={{ color: 'var(--brass)', marginBottom: 6 }}>Condition Note</div>
            {analysis.condition}
          </div>

          <div className="section-label">
            <h3 className="serif">Choose an environment</h3>
            <div className="hint muted">{recommended.length} recommended for this piece</div>
          </div>

          <div className="env-grid">
            {orderedEnvs.map((env) => {
              const selected = config.env === env.id;
              const isRec = recommended.includes(env.id);
              return (
                <div key={env.id} className={`env-card ${selected ? 'selected' : ''}`} onClick={() => setConfig({ ...config, env: env.id })}>
                  <div className="env-thumb" style={env.thumb ? { backgroundImage: `url(${env.thumb})` } : {}}>
                    {!env.thumb && (
                      <div style={{position:'absolute',inset:0,display:'flex',alignItems:'center',justifyContent:'center',color:'var(--ink-faint)',fontFamily:'var(--serif)',fontStyle:'italic',fontSize:28}}>+</div>
                    )}
                    {isRec && <div className="env-recommended">Recommended</div>}
                  </div>
                  <div className="env-info">
                    <div className="env-name">{env.name}</div>
                    <div className="env-desc">{env.desc}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {envs.find(e => e.id === config.env)?.custom && (
            <div style={{ marginBottom: 24 }}>
              <label className="field-label">Describe your custom scene</label>
              <textarea
                className="textarea"
                value={config.envCustom || ''}
                onChange={(e) => setConfig({ ...config, envCustom: e.target.value })}
                placeholder="e.g. a restored 1920s Brooklyn brownstone vestibule with checkered marble floor..."
              />
            </div>
          )}

          <div className="section-label">
            <h3 className="serif">Refine the scene</h3>
          </div>
          <div className="suboptions">
            <div>
              <label className="field-label">Lighting</label>
              <select className="select" value={config.lighting} onChange={(e) => setConfig({ ...config, lighting: e.target.value })}>
                {subs.lighting.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
              </select>
            </div>
            <div>
              <label className="field-label">Time of Day</label>
              <select className="select" value={config.timeOfDay} onChange={(e) => setConfig({ ...config, timeOfDay: e.target.value })}>
                {subs.timeOfDay.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
              </select>
            </div>
            <div>
              <label className="field-label">Aspect Ratio</label>
              <select className="select" value={config.aspectRatio} onChange={(e) => setConfig({ ...config, aspectRatio: e.target.value })}>
                {subs.aspectRatio.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
              </select>
            </div>
            <div>
              <label className="field-label">Mood</label>
              <select className="select" value={config.mood} onChange={(e) => setConfig({ ...config, mood: e.target.value })}>
                {subs.mood.map(o => <option key={o.id} value={o.id}>{o.name}</option>)}
              </select>
            </div>
          </div>

          <div className={`prompt-preview-toggle ${showPrompt ? 'open' : ''}`} onClick={() => setShowPrompt(!showPrompt)}>
            <svg width="10" height="10" viewBox="0 0 10 10"><path d="M3 1l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/></svg>
            Preview generation prompt
          </div>
          {showPrompt && <div className="prompt-block">{promptPreview}</div>}

          <div className="step-actions">
            <button className="btn ghost" onClick={onBack}>← Change product</button>
            <button className="btn primary" onClick={onNext} disabled={!config.env || (envs.find(e => e.id === config.env)?.custom && !config.envCustom)}>
              Continue to Generate →
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.Step2Analyze = Step2Analyze;