// Sessions list (home) + New Session wizard (hero)

function SessionsList({ onNav: onNavProp, stepperVariant }) {
  const { actions } = useStore();
  const onNav = onNavProp || ((k, id) => actions.nav(k, id));
  const [filter, setFilter] = React.useState('all');
  const sessions = window.SESSIONS;
  return (
    <div>
      <Topbar
        title="Sessions"
        right={
          <>
            <button className="btn sm"><Icon name="filter" size={13} /> Filter</button>
            <button className="btn primary sm" onClick={() => onNav('new')}>
              <Icon name="plus" size={13} /> New Session
            </button>
          </>
        }
      />
      <div className="content">
        <div className="page-head">
          <div>
            <h1 className="page-title">Your playable ad sessions</h1>
            <div className="page-sub">Six in flight · two export-ready · average time-to-first-preview: 6m 42s</div>
          </div>
          <div style={{ display: 'flex', gap: 4 }}>
            {['all', 'building', 'awaiting', 'exported'].map(f => (
              <button
                key={f}
                className={`btn sm ${filter === f ? 'primary' : ''}`}
                onClick={() => setFilter(f)}
                style={{ textTransform: 'capitalize' }}
              >{f}</button>
            ))}
          </div>
        </div>

        <table className="table">
          <thead>
            <tr>
              <th style={{ width: '28%' }}>Game</th>
              <th style={{ width: '24%' }}>Stage</th>
              <th style={{ width: '10%' }}>Variants</th>
              <th style={{ width: '16%' }}>Status</th>
              <th style={{ width: '12%' }}>Updated</th>
              <th style={{ width: '10%', textAlign: 'right' }}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {sessions.map(s => {
              const g = window.GAMES.find(x => x.id === s.gameId);
              return (
                <tr key={s.id} className="hoverable" onClick={() => onNav('session', s.id)}>
                  <td>
                    <div className="game-cell">
                      <GameIcon game={g} />
                      <div>
                        <div className="game-name">{g?.name}</div>
                        <div className="game-pub">{g?.publisher} · {g?.genre}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <div className="progress-line">
                        {window.STAGES.map((_, i) => (
                          <div
                            key={i}
                            className={`seg ${i < s.stage ? 'done' : i === s.stage ? 'current' : ''}`}
                          />
                        ))}
                      </div>
                      <div className="spec">{s.stageName}</div>
                    </div>
                  </td>
                  <td className="mono">
                    {s.variantsReady}/{s.variants}
                  </td>
                  <td>
                    <StatusChip status={s.status} />
                  </td>
                  <td className="mono" style={{ color: 'var(--ink-faint)', fontSize: 12 }}>{s.updated}</td>
                  <td style={{ textAlign: 'right' }}>
                    <button className="btn ghost sm" onClick={(e) => e.stopPropagation()}>
                      <Icon name="more" size={13} />
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>

        <div style={{ marginTop: 28 }}>
          <div className="section-label">Golden path</div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            {[
              ['Name game + upload assets', '30s'],
              ['Describe intent', '15s'],
              ['Approve strategy', '40s'],
              ['Watch first preview', '5–8m'],
              ['Export 2 variants', '15m'],
            ].map(([label, time], i) => (
              <div key={i} className="chip" style={{ padding: '6px 10px' }}>
                <span style={{ color: 'var(--ink-faint)' }}>{i + 1}</span>
                <span style={{ color: 'var(--ink)' }}>{label}</span>
                <span style={{ color: 'var(--lime-ink)' }}>· {time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function StatusChip({ status }) {
  const map = {
    in_progress: { label: 'In progress', cls: '', dot: 'neutral' },
    building: { label: 'Building', cls: 'cyan', dot: 'live' },
    export_ready: { label: 'Export-ready', cls: 'lime', dot: 'success' },
    awaiting_assets: { label: 'Awaiting assets', cls: 'warn', dot: 'warn' },
    awaiting_approval: { label: 'Needs approval', cls: 'warn', dot: 'warn' },
    exported: { label: 'Exported', cls: '', dot: 'neutral' },
  };
  const v = map[status] || map.in_progress;
  return <span className={`chip ${v.cls}`}><span className={`dot ${v.dot}`} /> {v.label}</span>;
}

// ---------- New Session wizard (HERO) ----------
function NewSessionWizard({ onNav: onNavProp }) {
  const { actions } = useStore();
  const onNav = onNavProp || ((k, id) => actions.nav(k, id));
  const [step, setStep] = React.useState(1);
  const [gameName, setGameName] = React.useState('');
  const [storeUrl, setStoreUrl] = React.useState('');
  const [assets, setAssets] = React.useState([]);
  const [brief, setBrief] = React.useState('');
  const [scanning, setScanning] = React.useState(false);
  const [hot, setHot] = React.useState(false);

  // Auto-detect game name from store url
  React.useEffect(() => {
    if (storeUrl.includes('gemquest') || storeUrl.includes('gem-quest')) {
      setGameName('Gem Quest: Legends');
    }
  }, [storeUrl]);

  const step1Done = gameName.length > 2;
  const step2Done = assets.length >= 3;
  const step3Done = brief.length > 12;
  const canCreate = step1Done && step2Done && step3Done;

  const simulateUpload = () => {
    if (scanning || assets.length > 0) return;
    setScanning(true);
    const fakes = [
      { name: 'hero_character.png', tag: 'CHARACTER', hue: 330 },
      { name: 'logo_primary.png', tag: 'LOGO', hue: 45 },
      { name: 'screenshot_01.png', tag: 'SCREEN', hue: 280 },
      { name: 'screenshot_02.png', tag: 'SCREEN', hue: 200 },
      { name: 'ui_buttons.png', tag: 'UI-KIT', hue: 150 },
      { name: 'gameplay_loop.mp4', tag: 'VIDEO', hue: 20 },
      { name: 'icon_app.png', tag: 'ICON', hue: 330 },
    ];
    fakes.forEach((f, i) => {
      setTimeout(() => {
        setAssets(prev => [...prev, f]);
        if (i === fakes.length - 1) setScanning(false);
      }, (i + 1) * 180);
    });
  };

  // auto-advance
  React.useEffect(() => { if (step1Done && step === 1) setStep(2); }, [step1Done]);
  React.useEffect(() => { if (step2Done && step === 2 && !scanning) setTimeout(() => setStep(3), 400); }, [step2Done, scanning]);

  return (
    <div>
      <Topbar
        homeButton={() => onNav('home')}
        title="New Session"
        crumbs={[<span key="c" style={{ cursor: 'pointer' }} onClick={() => onNav('home')}>Sessions</span>]}
        right={
          <button className="btn ghost sm" onClick={() => onNav('home')}>
            <Icon name="x" size={13} /> Cancel
          </button>
        }
      />
      <div className="content">
        <div className="wizard">
          <h1 className="tighter">
            Turn <em>your game</em><br />
            into playable ad variants.
          </h1>
          <p className="lede">
            Drop in your game and what you want to test. A first playable preview in under 8 minutes — no agency cycle required.
          </p>

          {/* step 1 */}
          <div className={`wizard-step ${step === 1 ? 'active' : ''} ${step1Done ? 'done' : ''}`}>
            <div className="ws-head">
              <div className="ws-num">{step1Done ? '✓' : '1'}</div>
              <div className="ws-title">Your existing game</div>
              <div className="ws-sub">~10 seconds</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <div>
                <div className="spec" style={{ marginBottom: 5 }}>GAME NAME</div>
                <input
                  className="input"
                  placeholder="e.g. Gem Quest: Legends"
                  value={gameName}
                  onChange={e => setGameName(e.target.value)}
                />
              </div>
              <div>
                <div className="spec" style={{ marginBottom: 5 }}>APP STORE URL (OPTIONAL)</div>
                <input
                  className="input"
                  placeholder="apps.apple.com/ca/app/…"
                  value={storeUrl}
                  onChange={e => setStoreUrl(e.target.value)}
                />
              </div>
            </div>
            {storeUrl && (
              <div style={{ marginTop: 10, fontSize: 12, color: 'var(--lime-ink)', display: 'flex', alignItems: 'center', gap: 6 }}>
                <Icon name="check" size={12} /> Metadata auto-filled from App Store · Casual Puzzle · Match-3
              </div>
            )}
          </div>

          {/* step 2 */}
          <div className={`wizard-step ${step === 2 ? 'active' : ''} ${step2Done && !scanning ? 'done' : ''} ${step < 2 ? 'locked' : ''}`}>
            <div className="ws-head">
              <div className="ws-num">{step2Done && !scanning ? '✓' : '2'}</div>
              <div className="ws-title">Drop your brand assets</div>
              <div className="ws-sub">
                {assets.length > 0
                  ? `${assets.length} file${assets.length > 1 ? 's' : ''} · ${scanning ? 'scanning…' : 'detected'}`
                  : '~15 seconds'}
              </div>
            </div>

            {assets.length === 0 ? (
              <div
                className={`dropzone ${hot ? 'hot' : ''}`}
                onDragOver={e => { e.preventDefault(); setHot(true); }}
                onDragLeave={() => setHot(false)}
                onDrop={e => { e.preventDefault(); setHot(false); simulateUpload(); }}
                onClick={simulateUpload}
              >
                <div style={{ marginBottom: 10 }}>
                  <Icon name="upload" size={22} />
                </div>
                <div className="dropzone-hint">
                  <b>Drag screenshots, logos, or UI art here</b> — or click to browse
                </div>
                <div className="dropzone-sub">
                  png · jpg · svg · mp4 · max 50MB · 3+ assets recommended
                </div>
              </div>
            ) : (
              <div>
                <div className="asset-row">
                  {assets.filter(Boolean).map((a, i) => (
                    <div key={i} className="asset-tile detected fadein" title={a?.name || ''}
                         style={{ background: window.placeholderUrl(a?.tag || 'asset', 120, 120, a?.hue || 180), backgroundSize: 'cover' }}>
                      <div className="badge">{a?.tag}</div>
                    </div>
                  ))}
                  {scanning && (
                    <div className="asset-tile shimmer" style={{ background: 'var(--bg-subtle)' }}>
                    </div>
                  )}
                  <button className="asset-tile" style={{ background: 'var(--bg-sunken)', display: 'grid', placeItems: 'center', color: 'var(--ink-faint)' }}>
                    <Icon name="plus" size={18} />
                  </button>
                </div>
                {!scanning && (
                  <div style={{ marginTop: 10, fontSize: 12, color: 'var(--lime-ink)', display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Icon name="sparkle" size={12} /> Detected 1 character · 1 logo · 2 screenshots · 1 UI kit · 1 gameplay video · 1 app icon
                  </div>
                )}
              </div>
            )}
          </div>

          {/* step 3 */}
          <div className={`wizard-step ${step === 3 ? 'active' : ''} ${step3Done ? 'done' : ''} ${step < 3 ? 'locked' : ''}`}>
            <div className="ws-head">
              <div className="ws-num">{step3Done ? '✓' : '3'}</div>
              <div className="ws-title">What should the agent test?</div>
              <div className="ws-sub">~15 seconds</div>
            </div>
            <textarea
              className="input"
              style={{ minHeight: 80, resize: 'vertical' }}
              placeholder="e.g. Hook users in the first 3 seconds. Prioritize the match-3 mechanic. Test an IAP-reward variant vs. a difficulty-curve variant. Target: US, 18–34, casual puzzle lookalikes."
              value={brief}
              onChange={e => setBrief(e.target.value)}
            />
            <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
              {['Hook in 3s', 'Reward-first', 'Near-miss loop', 'IAP moment', 'Low-funnel CTA'].map(p => (
                <button
                  key={p}
                  className="chip"
                  style={{ cursor: 'pointer' }}
                  onClick={() => setBrief(b => (b ? b + '. ' : '') + p)}
                >+ {p}</button>
              ))}
            </div>
          </div>

          {/* create */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginTop: 18, padding: '14px 22px', background: 'var(--ink)',
            borderRadius: 'var(--r-lg)', color: 'var(--bg)',
          }}>
            <div>
              <div style={{ fontSize: 13, color: 'var(--lime)', fontFamily: 'var(--font-mono)' }}>→ NEXT</div>
              <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.01em', marginTop: 2 }}>
                Build reference pack · generate strategy · queue 4 variants
              </div>
            </div>
            <button
              className="btn accent lg"
              disabled={!canCreate}
              onClick={() => onNav('session', 's1')}
            >
              Create session <Icon name="arrowRight" size={14} />
            </button>
          </div>

          {/* tiny footer */}
          <div style={{ marginTop: 18, fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--ink-faint)', textAlign: 'center' }}>
            your assets stay in your workspace · no model training · no auto-publish
          </div>
        </div>
      </div>
    </div>
  );
}

window.SessionsList = SessionsList;
window.NewSessionWizard = NewSessionWizard;
window.StatusChip = StatusChip;