/* ============================================
   HOME / DISCOVER
   ============================================ */
function HomeScreen({ onPlay, onOpenTrack, onNavigate, onShare }) {
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const h = () => setTick(t => t + 1);
    window.addEventListener('dataLoaded', h);
    return () => window.removeEventListener('dataLoaded', h);
  }, []);

  const tracks  = window.TRACKS || TRACKS;
  const featured = tracks[4] || tracks[0];

  // Real stats computed from live data
  const fmtNum = n => n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? Math.round(n / 1e3) + 'K' : String(n || 0);
  const totalPlays  = tracks.reduce((s, t) => s + (t.plays || 0), 0);
  const totalUsers  = (window.USERS  || []).length || (window.ANALYTICS?.totalUsers || 0);
  const ratedTracks = tracks.filter(t => t.ratings > 0);
  const avgRating   = ratedTracks.length
    ? (ratedTracks.reduce((s, t) => s + t.rating * t.ratings, 0) /
       ratedTracks.reduce((s, t) => s + t.ratings, 0)).toFixed(1)
    : (window.ANALYTICS?.avgRating || '—');

  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <div className="hero glass glass-strong">
        <div className="aurora" style={{ position: 'absolute', inset: 0, opacity: 0.6, zIndex: 1 }}><span /></div>
        <div className="hero-content">
          <div className="eyebrow">⚡ NEW THIS WEEK</div>
          <h1 className="h1">
            Sound that <span className="gradient-text">writes itself</span>.
          </h1>
          <p className="fg-2" style={{ fontSize: 15, maxWidth: 440, lineHeight: 1.55 }}>
            Neural composition models trained on thousands of hours. Drop in, rate, comment at the moment, build playlists, share anywhere.
          </p>
          <div className="row gap-3" style={{ marginTop: 8 }}>
            <button className="btn btn-primary btn-lg" onClick={() => onPlay(featured)}>
              <Icon name="play" size={14} /> Play featured
            </button>
            <button className="btn btn-glass btn-lg" onClick={() => onNavigate('tracks')}>
              Browse all tracks <Icon name="arrow-right" size={14} />
            </button>
          </div>
          <div className="hero-stat-row">
            <div className="hero-stat">
              <div className="hero-stat-num">{fmtNum(totalPlays)}</div>
              <div className="hero-stat-lbl">Total plays</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat-num">{fmtNum(totalUsers)}</div>
              <div className="hero-stat-lbl">Listeners</div>
            </div>
            <div className="hero-stat">
              <div className="hero-stat-num">{avgRating}</div>
              <div className="hero-stat-lbl">Avg rating</div>
            </div>
          </div>
        </div>
        <div className="hero-visual">
          <div className="hero-disc"></div>
        </div>
      </div>

      {/* TRENDING STRIP */}
      <div className="section-head">
        <div>
          <div className="eyebrow">🔥 Trending now</div>
          <h2 className="h2" style={{ marginTop: 4 }}>Heat check<span className="accent-dot"></span></h2>
        </div>
        <button className="btn btn-ghost btn-sm" onClick={() => onNavigate('trending')}>
          See chart <Icon name="arrow-right" size={12} />
        </button>
      </div>
      <div className="card-grid" style={{ marginBottom: 'var(--space-7)' }}>
        {tracks.slice(0, 4).map((t, i) => (
          <div className="track-card glass" key={t.id} onClick={() => onOpenTrack(t)}>
            <div className="track-cover">
              <Art index={t.art} className="cover-art" />
              <button className="play-overlay" onClick={e => { e.stopPropagation(); onPlay(t); }}>
                <Icon name="play" size={16} />
              </button>
            </div>
            <div className="track-info">
              <div className="track-title-line">
                <div className="h4" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.title}</div>
                <span className={`track-tag ${t.tag === 'ai' ? 'ai' : (t.tag === 'human' ? 'human' : '')}`}>{t.tag}</span>
              </div>
              <div className="fg-2" style={{ fontSize: 12 }}>{t.artist} · {t.duration}</div>
              <div className="row gap-3" style={{ marginTop: 6, fontSize: 11 }}>
                <span className="mono fg-3">{(t.plays / 1000).toFixed(1)}k plays</span>
                <span className="mono fg-3">★ {t.rating}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* TWO-COLUMN */}
      <div className="home-two-col" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-5)' }}>
        {/* New releases */}
        <div className="glass" style={{ padding: 'var(--space-5)' }}>
          <div className="section-head">
            <div>
              <div className="eyebrow">Fresh drops</div>
              <h3 className="h3" style={{ marginTop: 4 }}>New releases</h3>
            </div>
          </div>
          <div className="track-list">
            {tracks.slice(0, 5).map((t, i) => (
              <div className="track-row" key={t.id} onClick={() => onPlay(t)}>
                <div className="idx">{String(i + 1).padStart(2, '0')}</div>
                <div className="row-cover"><Art index={t.art} /></div>
                <div className="col">
                  <div className="row-title">{t.title}</div>
                  <div className="row-sub">{t.artist}</div>
                </div>
                <div className="col row-sub-mobile-hide">
                  <span className={`track-tag ${t.tag === 'ai' ? 'ai' : (t.tag === 'human' ? 'human' : '')}`}>{t.tag}</span>
                </div>
                <div className="row gap-2 row-rating" style={{ justifyContent: 'flex-end' }}>
                  <StarRating value={t.rating} readonly size={11} />
                </div>
                <div className="row-duration">{t.duration}</div>
                <div className="row-actions">
                  <button className="icon-btn" onClick={e => { e.stopPropagation(); onShare(t); }}><Icon name="share" size={14} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Made for you */}
        <div className="glass" style={{ padding: 'var(--space-5)' }}>
          <div className="section-head">
            <div>
              <div className="eyebrow">Personal</div>
              <h3 className="h3" style={{ marginTop: 4 }}>Made for you</h3>
            </div>
          </div>
          {(window.PLAYLISTS || []).length === 0 ? (
            <div style={{ textAlign: 'center', padding: 'var(--space-5) 0', color: 'var(--fg-3)', fontSize: 13 }}>
              <div style={{ fontSize: 28 }}>🎵</div>
              <div style={{ marginTop: 8 }}>No playlists yet</div>
              <div style={{ marginTop: 4, fontSize: 12 }}>Create one to see it here.</div>
            </div>
          ) : (
            <div className="col gap-3">
              {(window.PLAYLISTS || []).slice(0, 3).map(p => (
                <div key={p.id} className="row gap-3" style={{
                  padding: 12, borderRadius: 14, cursor: 'pointer',
                  transition: 'background 200ms',
                }}
                  onClick={() => onNavigate('playlists')}
                  onMouseEnter={e => e.currentTarget.style.background = 'var(--glass-highlight)'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                >
                  <div style={{ width: 56, height: 56, borderRadius: 12, overflow: 'hidden', position: 'relative', flexShrink: 0 }}>
                    <Art index={p.cover} />
                  </div>
                  <div className="col" style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name}</div>
                    <div className="fg-2 mono" style={{ fontSize: 11 }}>{(p.tracks||[]).length} tracks · {(p.plays||0).toLocaleString()} plays</div>
                  </div>
                  <button className="icon-btn" onClick={e => { e.stopPropagation(); onShare({ playlist: p }); }}><Icon name="share" size={14} /></button>
                </div>
              ))}
              <button className="btn btn-glass btn-block" onClick={() => onNavigate('playlists')}>
                <Icon name="plus" size={14} /> New playlist
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ============================================
   TRACKS — ALL TRACKS LIST
   ============================================ */
function TracksScreen({ onPlay, onOpenTrack, onShare, currentTrack, searchQuery }) {
  const [filter, setFilter] = React.useState('all');
  const [view, setView] = React.useState('list');
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const h = () => setTick(t => t + 1);
    window.addEventListener('dataLoaded', h);
    return () => window.removeEventListener('dataLoaded', h);
  }, []);

  const allTracks = window.TRACKS || TRACKS;
  const filtered = allTracks.filter(t => {
    const matchesFilter = filter === 'all' || t.tag.includes(filter);
    const matchesSearch = !searchQuery || t.title.toLowerCase().includes(searchQuery.toLowerCase()) || (t.artist||'').toLowerCase().includes(searchQuery.toLowerCase());
    return matchesFilter && matchesSearch;
  });

  return (
    <div data-screen-label="02 Tracks">
      <div className="section-head" style={{ marginBottom: 'var(--space-3)' }}>
        <div>
          <div className="eyebrow">Catalog · {allTracks.length} tracks</div>
          <h1 className="h1" style={{ fontSize: 40, marginTop: 8 }}>All tracks<span style={{ display: 'inline-block', width: 12, height: 12, borderRadius: '50%', background: 'var(--accent)', marginLeft: 12, boxShadow: '0 0 16px var(--accent-glow)' }}></span></h1>
        </div>
        <div className="row gap-2">
          <div className="row gap-1" style={{ padding: 4, background: 'var(--bg-1)', borderRadius: 999, border: '1px solid var(--line)' }}>
            <button className={`chip ${view === 'list' ? 'active' : ''}`} style={{ padding: '4px 12px' }} onClick={() => setView('list')}><Icon name="list" size={14} /></button>
            <button className={`chip ${view === 'grid' ? 'active' : ''}`} style={{ padding: '4px 12px' }} onClick={() => setView('grid')}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/><rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/></svg>
            </button>
          </div>
        </div>
      </div>

      <div className="chip-row" style={{ marginBottom: 'var(--space-5)' }}>
        {['all', 'ai', 'human+ai', 'human'].map(k => (
          <button key={k} className={`chip ${filter === k ? 'active' : ''}`} onClick={() => setFilter(k)}>
            {k === 'all' ? 'All' : k.toUpperCase()}
          </button>
        ))}
      </div>

      {view === 'list' ? (
        <div className="glass" style={{ padding: 'var(--space-4)' }}>
          <div className="track-list">
            <div className="track-row" style={{ cursor: 'default', borderBottom: '1px solid var(--glass-border)', borderRadius: 0, paddingBottom: 8 }}>
              <div className="idx mono">#</div>
              <div></div>
              <div className="mono fg-3" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Title</div>
              <div className="mono fg-3 row-sub-mobile-hide" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Type</div>
              <div className="mono fg-3 row-rating" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Rating</div>
              <div className="mono fg-3" style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'right' }}>Length</div>
              <div></div>
            </div>
            {filtered.length === 0 && (
              <div style={{ textAlign: 'center', padding: 'var(--space-6)', color: 'var(--fg-3)', fontSize: 13 }}>
                No tracks match your search.
              </div>
            )}
            {filtered.map((t, i) => (
              <div className={`track-row ${currentTrack && currentTrack.id === t.id ? 'playing' : ''}`} key={t.id} onClick={() => onOpenTrack(t)}>
                <div className="idx">{String(i + 1).padStart(2, '0')}</div>
                <div className="row-cover"><Art index={t.art} /></div>
                <div className="col">
                  <div className="row-title">{t.title}</div>
                  <div className="row-sub">{t.artist} · {(t.plays / 1000).toFixed(1)}k plays</div>
                </div>
                <div className="row-sub-mobile-hide">
                  <span className={`track-tag ${t.tag === 'ai' ? 'ai' : (t.tag === 'human' ? 'human' : '')}`}>{t.tag}</span>
                </div>
                <div className="row gap-2 row-rating" style={{ justifyContent: 'flex-end' }}>
                  <StarRating value={t.rating} readonly size={11} />
                  <span className="mono fg-3" style={{ fontSize: 10 }}>{t.rating}</span>
                </div>
                <div className="row-duration">{t.duration}</div>
                <div className="row-actions">
                  <button className="icon-btn" onClick={e => { e.stopPropagation(); onPlay(t); }}><Icon name="play" size={14} /></button>
                  <button className="icon-btn" onClick={e => { e.stopPropagation(); onShare(t); }}><Icon name="share" size={14} /></button>
                </div>
              </div>
            ))}
          </div>
        </div>
      ) : (
        <div className="card-grid">
          {filtered.map(t => (
            <div className="track-card glass" key={t.id} onClick={() => onOpenTrack(t)}>
              <div className="track-cover">
                <Art index={t.art} className="cover-art" />
                <button className="play-overlay" onClick={e => { e.stopPropagation(); onPlay(t); }}>
                  <Icon name="play" size={16} />
                </button>
              </div>
              <div className="track-info">
                <div className="track-title-line">
                  <div className="h4" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.title}</div>
                </div>
                <div className="fg-2" style={{ fontSize: 12 }}>{t.artist} · {t.duration}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ============================================
   TRENDING
   ============================================ */
function TrendingScreen({ onPlay, onOpenTrack }) {
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const h = () => setTick(t => t + 1);
    window.addEventListener('dataLoaded', h);
    return () => window.removeEventListener('dataLoaded', h);
  }, []);

  // Sort live tracks by plays descending → that IS the chart
  const allTracks = window.TRACKS || TRACKS;
  const sorted = [...allTracks].sort((a, b) => (b.plays || 0) - (a.plays || 0));

  // Load previous-session ranks from localStorage to compute movement arrows
  const prevRanks = React.useMemo(() => {
    try { return JSON.parse(localStorage.getItem('ams-trending-ranks') || '{}'); } catch { return {}; }
  }, []); // intentionally empty deps — snapshot is taken once per mount

  // Save current ranks to localStorage (for next visit's movement calculation)
  React.useEffect(() => {
    const snap = {};
    sorted.forEach((t, i) => { snap[t.id] = i + 1; });
    try { localStorage.setItem('ams-trending-ranks', JSON.stringify(snap)); } catch {}
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sorted.map(t => t.id + t.plays).join(',')]);

  // Build display list with live rank + movement indicator
  const trending = sorted.map((t, i) => {
    const rank = i + 1;
    const prev = prevRanks[t.id];
    let change;
    if (!prev || t.plays === 0) {
      change = 'new';
    } else if (prev === rank) {
      change = '=';
    } else {
      // positive = moved up (prev rank was higher number = lower position)
      change = prev - rank;
    }
    return { ...t, rank, change };
  });

  // Admin can override order via Firestore config/trending — respect it if present and populated
  const firestoreTrending = window.TRENDING;
  const hasFSTrending = firestoreTrending && firestoreTrending.length > 0 &&
    firestoreTrending.some(t => (t.plays || 0) > 0 || t.change !== 'new');
  const display = hasFSTrending ? firestoreTrending : trending;

  const ChangeChip = ({ change }) => {
    if (change === 'new') return <span style={{ color: 'var(--accent)', fontWeight: 700 }}>NEW</span>;
    if (change === '=')   return <span style={{ color: 'var(--fg-3)' }}>—</span>;
    if (change > 0)       return <span style={{ color: 'var(--ok, #4ade80)', fontWeight: 600 }}>▲{change}</span>;
    return                       <span style={{ color: 'var(--danger, #f87171)', fontWeight: 600 }}>▼{Math.abs(change)}</span>;
  };

  return (
    <div data-screen-label="03 Trending">
      <div className="section-head" style={{ marginBottom: 'var(--space-5)' }}>
        <div>
          <div className="eyebrow">Updated hourly · global</div>
          <h1 className="h1" style={{ fontSize: 40, marginTop: 8 }}>The chart<span style={{ display: 'inline-block', width: 12, height: 12, borderRadius: '50%', background: 'var(--accent)', marginLeft: 12, boxShadow: '0 0 16px var(--accent-glow)' }}></span></h1>
          <div className="fg-2" style={{ fontSize: 14, marginTop: 8 }}>Top tracks across AI Music Studio right now.</div>
        </div>
      </div>

      <div className="glass" style={{ padding: 'var(--space-4)' }}>
        {display.length === 0 && (
          <div style={{ textAlign: 'center', padding: 'var(--space-7)', color: 'var(--fg-3)', fontSize: 13 }}>
            No tracks yet — check back soon.
          </div>
        )}
        {display.map(t => (
          <div className="trend-bar" key={t.id} onClick={() => onOpenTrack(t)}>
            <div className={`trend-rank ${t.rank <= 3 ? 'top' : ''}`}>#{t.rank}</div>
            <div style={{ width: 48, height: 48, borderRadius: 12, overflow: 'hidden', position: 'relative', flexShrink: 0 }}>
              <Art index={t.art} />
            </div>
            <div className="col" style={{ flex: 1, minWidth: 0 }}>
              <div className="row gap-2">
                <strong style={{ fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.title}</strong>
                <span className={`track-tag ${t.tag === 'ai' ? 'ai' : (t.tag === 'human' ? 'human' : '')}`} style={{ flexShrink: 0 }}>{t.tag}</span>
              </div>
              <div className="fg-2 mono" style={{ fontSize: 11 }}>
                {t.artist} · <ChangeChip change={t.change} /> this week
              </div>
            </div>
            <div className="trend-plays">
              {t.plays >= 1000 ? `${(t.plays / 1000).toFixed(1)}k` : (t.plays || 0)} plays
            </div>
            <button className="icon-btn" onClick={e => { e.stopPropagation(); onPlay(t); }}><Icon name="play" size={14} /></button>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, TracksScreen, TrendingScreen });