// screens-sports.jsx — Multi-sport unified view within WVU
// Not a "team picker" — Derek's school IS WVU. This shows every sport,
// emphasizes what's LIVE/NEXT, orders by his preferences.

function ScreenSports({ onOpenGame, onOpenSportDetail }) {
  const [filter, setFilter] = React.useState('all'); // all | mine | inSeason
  const filters = [
    { id: 'all',     label: 'All 18' },
    { id: 'mine',    label: 'Your 5' },
    { id: 'inSeason',label: 'In season' },
  ];

  let list = SPORTS;
  if (filter === 'mine') list = SPORTS.filter(s => DEREK.favoriteSports.includes(s.id));
  if (filter === 'inSeason') list = SPORTS.filter(s => s.status === 'IN_SEASON');

  // order: favorited first, then by tier, then by season status
  list = [...list].sort((a, b) => {
    const favA = DEREK.favoriteSports.includes(a.id) ? 0 : 1;
    const favB = DEREK.favoriteSports.includes(b.id) ? 0 : 1;
    if (favA !== favB) return favA - favB;
    if (a.tier !== b.tier) return a.tier - b.tier;
    return (a.status === 'IN_SEASON' ? 0 : 1) - (b.status === 'IN_SEASON' ? 0 : 1);
  });

  return (
    <div style={{
      position: 'absolute', inset: 0, overflow: 'auto',
      background: WVU.ink, color: WVU.cream,
      paddingTop: 104, paddingBottom: 120,
    }} className="mtn-scrollbar">
      {/* Header */}
      <div style={{ padding: '0 20px 18px' }}>
        <div style={{ fontFamily: DS.mono, fontSize: 10, color: WVU.gold, letterSpacing: '0.16em', marginBottom: 6 }}>
          WEST VIRGINIA · ALL SPORTS
        </div>
        <div style={{
          fontFamily: DS.display, fontSize: 30, fontWeight: 800,
          letterSpacing: '-0.03em', lineHeight: 1, color: WVU.cream,
        }}>
          One program.<br/>
          <span style={{ color: WVU.gold }}>Eighteen</span> teams.
        </div>
        <div style={{ fontFamily: DS.sans, fontSize: 13, color: WVU.creamDim, marginTop: 10 }}>
          Three live now, five in action this week, all in one feed.
        </div>
      </div>

      {/* Filter segment */}
      <div style={{ padding: '0 16px 16px' }}>
        <div style={{
          display: 'inline-flex', background: WVU.ink2, borderRadius: DS.r.pill,
          padding: 3, border: `0.5px solid ${WVU.line}`,
        }}>
          {filters.map(f => {
            const on = f.id === filter;
            return (
              <button key={f.id} onClick={() => setFilter(f.id)} style={{
                padding: '8px 16px', borderRadius: DS.r.pill, border: 'none',
                background: on ? WVU.gold : 'transparent',
                color: on ? WVU.blueDim : WVU.creamDim,
                fontFamily: DS.sans, fontSize: 12, fontWeight: 700,
                cursor: 'pointer', letterSpacing: '-0.01em',
              }}>{f.label}</button>
            );
          })}
        </div>
      </div>

      {/* LIVE strip */}
      <div style={{ padding: '0 16px 16px' }}>
        <div onClick={onOpenGame} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '12px 14px',
          background: 'linear-gradient(90deg, rgba(234,170,0,0.14), rgba(20,17,12,0.4))',
          border: `0.5px solid ${WVU.gold}55`,
          borderRadius: DS.r.lg, cursor: 'pointer',
        }}>
          <div style={{
            width: 7, height: 7, borderRadius: 4, background: WVU.gold,
            animation: 'mtnPulse 1.4s ease-in-out infinite', flexShrink: 0,
          }} />
          <div style={{
            fontFamily: DS.sans, fontSize: 9, fontWeight: 800,
            color: WVU.gold, letterSpacing: '0.14em', flexShrink: 0,
          }}>LIVE</div>
          <div style={{
            fontFamily: DS.sans, fontSize: 12, fontWeight: 600,
            color: WVU.cream, flex: 1, minWidth: 0,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>
            Football · vs KSU · 3Q 8:42
          </div>
          <div style={{
            fontFamily: DS.sans, fontSize: 13, fontWeight: 800, color: WVU.cream,
            fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.01em', flexShrink: 0,
          }}>24–17</div>
        </div>
      </div>

      {/* Sports grid */}
      <div style={{
        padding: '0 16px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10,
      }}>
        {list.map(s => (
          <SportCard key={s.id} sport={s}
            favorited={DEREK.favoriteSports.includes(s.id)}
            onClick={() => onOpenSportDetail(s.id)} />
        ))}
      </div>

      {/* Cross-sport story */}
      <div style={{ padding: '22px 16px 0' }}>
        <div style={{
          fontFamily: DS.sans, fontSize: 10, fontWeight: 600, color: WVU.gold, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8, textTransform: 'uppercase',
        }}>Cross-sport story · This week</div>
        <div style={{
          borderRadius: DS.r.lg, overflow: 'hidden', border: `0.5px solid ${WVU.line}`,
        }}>
          <WarmHero h={180} variant="gold" caption="ATHLETICS STORY · EP. 4" />
          <div style={{ padding: 14, background: WVU.ink2 }}>
            <div style={{
              fontFamily: DS.display, fontSize: 18, fontWeight: 800,
              letterSpacing: '-0.02em', lineHeight: 1.1, color: WVU.cream,
            }}>Every team, one flag: Mountaineer Madness week</div>
            <div style={{ fontFamily: DS.sans, fontSize: 12, color: WVU.creamDim, marginTop: 6, lineHeight: 1.4 }}>
              Football ranked. Wrestling #9. Rifle #1. Gymnastics healthy. Four teams, one weekend.
            </div>
            <div style={{ marginTop: 10 }}>
              <Whisper>Because you follow 5 WVU sports</Whisper>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SportCard({ sport, favorited, onClick }) {
  const live = sport.id === 'fb'; // demo: football is live
  return (
    <div onClick={onClick} style={{
      background: favorited
        ? `linear-gradient(155deg, rgba(234,170,0,0.10), ${WVU.ink2} 65%)`
        : WVU.ink2,
      border: `0.5px solid ${favorited ? WVU.gold + '33' : WVU.line}`,
      borderRadius: DS.r.lg, padding: 14,
      cursor: 'pointer', position: 'relative', overflow: 'hidden',
      minHeight: 140, display: 'flex', flexDirection: 'column',
    }}>
      {favorited && (
        <div style={{
          position: 'absolute', top: 10, right: 10,
          width: 14, height: 14, borderRadius: 7,
          background: WVU.gold,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: DS.sans, fontSize: 8, fontWeight: 900, color: WVU.blueDim,
        }}>★</div>
      )}
      {/* top row: short + rank */}
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
        <div style={{
          fontFamily: DS.display, fontSize: 18, fontWeight: 900,
          color: favorited ? WVU.gold : WVU.cream,
          letterSpacing: '0.01em',
        }}>{sport.short}</div>
        {sport.rank && (
          <div style={{ fontFamily: DS.mono, fontSize: 9, color: WVU.gold, letterSpacing: '0.1em' }}>
            {sport.rank}
          </div>
        )}
      </div>
      {/* name */}
      <div style={{
        fontFamily: DS.sans, fontSize: 12, fontWeight: 700,
        color: WVU.cream, letterSpacing: '-0.005em', lineHeight: 1.2,
      }}>{sport.name}</div>
      {/* record */}
      {sport.record !== '—' && (
        <div style={{
          fontFamily: DS.mono, fontSize: 10, color: WVU.creamDim,
          letterSpacing: '0.06em', marginTop: 4,
        }}>{sport.record} · {sport.season}</div>
      )}
      {sport.record === '—' && (
        <div style={{
          fontFamily: DS.mono, fontSize: 10, color: WVU.creamDim,
          letterSpacing: '0.06em', marginTop: 4,
        }}>{sport.season} · {sport.status === 'PRESEASON' ? 'Preseason' : 'Offseason'}</div>
      )}
      {/* push to bottom */}
      <div style={{ flex: 1 }} />
      {/* next */}
      <div style={{
        paddingTop: 8, borderTop: `0.5px solid ${WVU.line}`,
        fontFamily: DS.sans, fontSize: 11, color: live ? WVU.gold : WVU.creamDim,
        letterSpacing: '-0.005em',
        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
      }}>
        {live ? '● LIVE · 3Q 8:42' : sport.next}
      </div>
    </div>
  );
}

Object.assign(window, { ScreenSports });