// === Live Updates feed screen ===
function Updates({ onBack, onOpenTool }) {
  const [filter, setFilter] = React.useState('all');
  const [subs, setSubs] = React.useState({});
  const [email, setEmail] = React.useState('');
  const [digestStatus, setDigestStatus] = React.useState('idle');
  const [digestMessage, setDigestMessage] = React.useState('');
  const all = window.UPDATES;
  const filtered = filter === 'all' ? all : all.filter(u => u.heat === filter);
  const toggleSub = (k) => setSubs(s => ({ ...s, [k]: !s[k] }));
  const subscribeDigest = async (event) => {
    event.preventDefault();
    setDigestStatus('saving');
    setDigestMessage('');
    try {
      const response = await fetch('/api/subscriptions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, subscriptionType: 'digest' })
      });
      const payload = await response.json();
      if (!response.ok || !payload.ok) throw new Error(payload.error || 'Subscription failed.');
      setDigestStatus('saved');
      setDigestMessage(payload.subscription?.duplicate ? 'Already on the list.' : 'Saved. Check your email to confirm.');
    } catch (error) {
      setDigestStatus('error');
      setDigestMessage(error.message || 'Subscription failed.');
    }
  };

  return (
    <div className="updates page-enter">
      <NeonGrid hue="#c6ff3d" />
      <div className="updates__head">
        <button className="btn btn--ghost" onClick={onBack}>⟵ BACK</button>
        <h1 className="updates__title"><GlitchText>WHAT MOVED</GlitchText></h1>
        <Chip color="#c6ff3d"><span style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:'#c6ff3d',boxShadow:'0 0 8px #c6ff3d',marginRight:6}}></span>LIVE</Chip>
      </div>

      <div className="updates__hero">
        <div className="updates__hero-left">
          <div className="updates__eyebrow">WEEK 19 · 2026</div>
          <h2 className="updates__hero-title">The week the local LLMs caught up.</h2>
          <p className="updates__hero-sub">3 weights drops, 2 pricing cuts, 1 acquisition rumour. Your weekly digest, opinionated.</p>
          <form className="updates__hero-cta" onSubmit={subscribeDigest}>
            <input className="updates__email" placeholder="you@where.you.work" type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
            <button className="btn btn--primary" disabled={digestStatus === 'saving'}>
              {digestStatus === 'saved' ? '✓ SUBSCRIBED' : digestStatus === 'saving' ? 'SAVING…' : 'SUBSCRIBE TO WEEKLY ⟶'}
            </button>
          </form>
          {digestMessage && <div className={`subscribe-control__msg subscribe-control__msg--${digestStatus}`}>{digestMessage}</div>}
          <div className="updates__sub-options">
            <Chip color="#00f0ff" size="sm">+ 12,847 SUBSCRIBERS</Chip>
            <Chip color="#a78bff" size="sm">SUNDAYS · 10AM</Chip>
            <Chip color="#ff2bd6" size="sm">UNSUB ANYTIME</Chip>
          </div>
        </div>
        <div className="updates__hero-right">
          <Movers />
        </div>
      </div>

      <div className="updates__filters">
        {['all', 'hot', 'mid', 'cold'].map(f => (
          <button
            key={f}
            className={`updates__filter ${filter === f ? 'is-active' : ''}`}
            onClick={() => setFilter(f)}
          >
            {f === 'all' ? 'ALL' : f === 'hot' ? '🔥 HOT' : f === 'mid' ? '↑ NOTABLE' : '· QUIET'}
          </button>
        ))}
      </div>

      <div className="updates__feed">
        {filtered.map((u, i) => {
          const tool = window.TOOLS.find(t => t.name === u.tool);
          return (
            <div key={i} className={`update update--${u.heat}`} style={{'--accent': tool?.color || '#00f0ff'}}>
              <div className="update__when">{u.when.toUpperCase()}</div>
              <div className="update__glyph" style={{color: tool?.color}}>{tool?.emoji || '◇'}</div>
              <div className="update__body">
                <div className="update__head"><b>{u.tool}</b> <span className="update__cat">{tool?.cat}</span></div>
                <div className="update__what">{u.what}</div>
              </div>
              <div className="update__heat">
                {u.heat === 'hot' && <span className="update__pill update__pill--hot">🔥 HOT</span>}
                {u.heat === 'mid' && <span className="update__pill update__pill--mid">↑ NOTABLE</span>}
                {u.heat === 'cold' && <span className="update__pill update__pill--cold">· QUIET</span>}
              </div>
              <button
                className={`update__sub ${subs[u.tool] ? 'is-on' : ''}`}
                onClick={() => toggleSub(u.tool)}
              >
                {subs[u.tool] ? '✓ SUBBED' : '◉ SUBSCRIBE'}
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Movers() {
  return (
    <div className="movers">
      <div className="movers__head">MOVERS · LAST 24H</div>
      {window.TOOLS.slice(0, 6).map((t, i) => {
        const delta = (Math.sin(i * 1.3) * 40 + (i % 2 ? 10 : -10)).toFixed(0);
        const up = +delta >= 0;
        return (
          <div key={t.id} className="movers__row">
            <span className="movers__glyph" style={{color: t.color}}>{t.emoji}</span>
            <span className="movers__name">{t.name}</span>
            <span className="movers__bar">
              <span
                className="movers__bar-fill"
                style={{
                  width: `${Math.abs(+delta)}%`,
                  marginLeft: up ? '50%' : `${50 - Math.abs(+delta)}%`,
                  background: up ? '#c6ff3d' : '#ff3b6a',
                }}
              ></span>
              <span className="movers__bar-axis"></span>
            </span>
            <span className={`movers__delta ${up ? 'is-up' : 'is-down'}`}>{up ? '+' : ''}{delta}</span>
          </div>
        );
      })}
    </div>
  );
}

window.Updates = Updates;