/* global React, Icon, PRODUCTS, useReveal, useCountUp */
const { useEffect, useState, useRef } = React;

/* ── Interactive Live Demo ─────────────────────────────────── */
const SUGGESTIONS = [
  'Buldak Carbonara',
  'Labubu Plush',
  'Olipop Cherry Cola',
  'Stanley Quencher H2.0',
];

function findMatch(query) {
  const q = query.trim().toLowerCase();
  if (!q) return null;
  return (
    PRODUCTS.find((p) =>
      p.name.toLowerCase().includes(q) || q.includes(p.name.toLowerCase().split(' ')[0])
    ) || PRODUCTS[0]
  );
}

function LiveDemo() {
  const ref = useReveal();
  const [query, setQuery] = useState('Buldak Carbonara');
  const [state, setState] = useState({ kind: 'ready', product: PRODUCTS[0] });
  // states: ready | running | result
  const [step, setStep] = useState(0);

  const STEPS = [
    { label: 'Resolving entity',          tag: 'haiku-4-5'  },
    { label: 'Reading the web',           tag: 'sonnet-4-6' },
    { label: 'Scoring growth/demand/momentum', tag: 'sonnet-4-6' },
    { label: 'Structuring output',        tag: 'schema'     },
  ];

  function run(q) {
    const target = findMatch(q || query);
    if (!target) return;
    setState({ kind: 'running', product: target });
    setStep(0);
    let i = 0;
    const id = setInterval(() => {
      i += 1;
      setStep(i);
      if (i >= STEPS.length) {
        clearInterval(id);
        setTimeout(() => setState({ kind: 'result', product: target }), 320);
      }
    }, 620);
  }

  const onSubmit = (e) => {
    e.preventDefault();
    run();
  };

  const p = state.product;

  return (
    <section className="section demo" id="demo" ref={ref}>
      <div className="container-wide">
        <div className="demo-head reveal">
          <span className="eyebrow">
            <span className="dot" />
            Live demo · No signup
          </span>
          <h2 className="heading-l demo-h">
            Type a product. <em>Watch it score.</em>
          </h2>
          <p className="lede demo-sub">
            A mock of what the app does. Pick a suggestion or type your own —
            results below are pre-baked; the real product runs Claude end-to-end in &lt; 30s.
          </p>
        </div>

        <div className="demo-shell reveal reveal-delay-1">
          {/* Window chrome */}
          <div className="demo-chrome">
            <div className="row gap">
              <span className="chrome-dot" style={{ background: '#ff5f56' }} />
              <span className="chrome-dot" style={{ background: '#ffbd2e' }} />
              <span className="chrome-dot" style={{ background: '#27c93f' }} />
            </div>
            <div className="chrome-url mono">
              app.nextwave.dev / <span style={{ color: 'var(--accent)' }}>insights</span>
            </div>
            <div className="row gap" style={{ minWidth: 80, justifyContent: 'flex-end' }}>
              <span className="chip mono" style={{ fontSize: 10 }}>
                <span className="dot" style={{ background: 'var(--success)' }} />
                Live
              </span>
            </div>
          </div>

          {/* Body */}
          <div className="demo-body">
            {/* Input row */}
            <form className="demo-input-row" onSubmit={onSubmit}>
              <button type="button" className="demo-icon-btn" title="Upload image">
                <Icon name="image" size={16} />
              </button>
              <input
                className="demo-input"
                type="text"
                placeholder="e.g. Buldak Carbonara, Labubu, Olipop…"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                disabled={state.kind === 'running'}
              />
              <button
                type="submit"
                className="btn btn-accent btn-sm demo-go"
                disabled={state.kind === 'running'}
              >
                {state.kind === 'running' ? 'Analyzing…' : 'Analyze'}
                {state.kind !== 'running' && <Icon name="arrow" size={14} />}
              </button>
            </form>

            {/* Suggestions */}
            <div className="demo-suggestions">
              <span className="eyebrow">Try</span>
              {SUGGESTIONS.map((s) => (
                <button
                  key={s}
                  className={'demo-pill ' + (query === s ? 'is-active' : '')}
                  onClick={() => { setQuery(s); run(s); }}
                  disabled={state.kind === 'running'}
                >
                  {s}
                </button>
              ))}
            </div>

            {/* Progress steps */}
            {state.kind === 'running' && (
              <div className="demo-steps">
                {STEPS.map((s, i) => (
                  <div
                    key={i}
                    className={
                      'demo-step ' +
                      (i < step ? 'is-done ' : '') +
                      (i === step ? 'is-active ' : '')
                    }
                  >
                    <div className="demo-step-bullet">
                      {i < step ? <Icon name="check" size={12} /> :
                        i === step ? <span className="spinner" /> :
                        <span style={{ opacity: 0.3 }}>{i + 1}</span>}
                    </div>
                    <div className="col">
                      <span>{s.label}</span>
                      <span className="mono subtle" style={{ fontSize: 11 }}>{s.tag}</span>
                    </div>
                  </div>
                ))}
              </div>
            )}

            {/* Result preview */}
            {state.kind === 'result' && (
              <div className="demo-result" key={p.name}>
                <div className="demo-result-head">
                  <div>
                    <div className="eyebrow">Result</div>
                    <div className="demo-result-name display">{p.name}</div>
                    <div className="mono subtle" style={{ fontSize: 12 }}>
                      {p.brand} · {p.category}
                    </div>
                  </div>
                  <span
                    className="hsc-stage mono"
                    style={{
                      background: p.stageHue + '22',
                      color: p.stageHue,
                      borderColor: p.stageHue + '44',
                    }}
                  >
                    <span className="hsc-stage-dot" style={{ background: p.stageHue }} />
                    {p.stage}
                  </span>
                </div>

                <div className="demo-result-grid">
                  <DemoScore label="Growth"   value={p.growth}   keyId={p.name + 'g2'} />
                  <DemoScore label="Demand"   value={p.demand}   keyId={p.name + 'd2'} />
                  <DemoScore label="Momentum" value={p.momentum} keyId={p.name + 'm2'} />
                </div>

                <p className="demo-result-sum">{p.summary}</p>

                <div className="demo-result-meta">
                  {p.metrics.slice(0, 4).map((m) => (
                    <div key={m.label} className="demo-metric">
                      <div className="eyebrow">{m.label}</div>
                      <div className="demo-metric-v mono tabular">{m.value}</div>
                    </div>
                  ))}
                </div>

                <div className="demo-result-foot">
                  <span className="mono subtle" style={{ fontSize: 11 }}>
                    Completed in {(20 + Math.random() * 8).toFixed(1)}s · Schema-valid
                  </span>
                  <button
                    className="btn btn-ghost btn-sm"
                    onClick={() => setState({ kind: 'ready', product: p })}
                  >
                    <Icon name="refresh" size={14} />
                    Run again
                  </button>
                </div>
              </div>
            )}

            {/* Idle placeholder when ready */}
            {state.kind === 'ready' && (
              <div className="demo-idle">
                <div className="demo-idle-ill" aria-hidden="true">
                  <Icon name="sparkles" size={28} />
                </div>
                <div className="demo-idle-text">
                  <div className="display" style={{ fontSize: 22 }}>
                    Press <em>Analyze</em> to run.
                  </div>
                  <div className="muted" style={{ fontSize: 14 }}>
                    Mock scoring · No data leaves your browser.
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function DemoScore({ label, value, keyId }) {
  const v = useCountUp(value, 900, keyId);
  return (
    <div className="demo-score">
      <div className="eyebrow">{label}</div>
      <div className="demo-score-row">
        <div className="demo-score-num display tabular">{v}</div>
        <div className="demo-score-bar">
          <div
            className="demo-score-bar-fill"
            style={{ transform: `scaleX(${value / 100})` }}
          />
        </div>
      </div>
    </div>
  );
}

window.LiveDemo = LiveDemo;