// "Übersicht" — admin dashboard with submission counts, recent activity,
// top submitters and top voters. Pure read; data comes from /api/stats.

function StatsScreen({ me, dark }) {
  const [stats, setStats] = React.useState(null);
  const [err, setErr] = React.useState('');

  const refresh = React.useCallback(async () => {
    try {
      const data = await Api.stats();
      setStats(data);
      setErr('');
    } catch (e) {
      setErr(e.message);
    }
  }, []);

  React.useEffect(() => { refresh(); }, [refresh]);

  if (me.group !== 'admin') {
    return (
      <div style={{ padding: '60px 32px', maxWidth: 600, margin: '0 auto' }}>
        <ApGlass dark={dark} radius={20} padding={36} style={{ textAlign: 'center', opacity: 0.7 }}>
          <ApIcon name="shield" size={32} color="#fbbf24"/>
          <h2 style={{ fontSize: 20, fontWeight: 800, margin: '12px 0 6px' }}>Nur Admins</h2>
        </ApGlass>
      </div>
    );
  }

  if (err) {
    return (
      <div style={{ padding: '28px 32px', maxWidth: 1100, margin: '0 auto' }}>
        <ApGlass dark={dark} radius={20} padding={32} style={{ textAlign: 'center', color: '#f87171' }}>
          {err}
        </ApGlass>
      </div>
    );
  }

  if (!stats) {
    return (
      <div style={{ padding: '60px 32px', textAlign: 'center', opacity: 0.5 }}>
        Lade Statistiken…
      </div>
    );
  }

  const acceptRatio = stats.counts.total > 0
    ? Math.round((stats.counts.accepted / stats.counts.total) * 100)
    : 0;

  return (
    <div style={{ padding: '28px 32px', maxWidth: 1100, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 12, opacity: 0.55, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>
            Übersicht
          </div>
          <h1 style={{ fontSize: 32, fontWeight: 800, letterSpacing: -0.7, margin: 0 }}>Statistiken</h1>
        </div>
        <button onClick={refresh} style={{
          background: dark ? 'rgba(255,255,255,0.06)' : 'rgba(255,255,255,0.5)',
          border: dark ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(0,0,0,0.08)',
          color: 'inherit', cursor: 'pointer', borderRadius: 10,
          padding: '8px 14px', fontSize: 12.5, fontWeight: 600,
          display: 'flex', alignItems: 'center', gap: 6,
        }}>
          Neu laden
        </button>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
        <BigStat label="Insgesamt" value={stats.counts.total} accent="#a78bfa" dark={dark}/>
        <BigStat label="In Prüfung"     value={stats.counts.pending}  accent="#fbbf24" dark={dark}/>
        <BigStat label="Veröffentlicht" value={stats.counts.accepted} accent="#34d399" dark={dark}/>
        <BigStat label="Abgelehnt"  value={stats.counts.rejected} accent="#f87171" dark={dark}/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 18 }}>
        <BigStat label="Akzeptanz-Quote" value={`${acceptRatio}%`}        accent="#34d399" dark={dark}/>
        <BigStat label="Letzte 24h"      value={stats.submissionsLast24h} accent="#3eb8ff" dark={dark}/>
        <BigStat label="Letzte 7 Tage"   value={stats.submissionsLast7d}  accent="#3eb8ff" dark={dark}/>
      </div>

      <div style={{
        fontSize: 11, opacity: 0.55, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 700,
        margin: '24px 0 10px',
      }}>
        Ingame
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
        <BigStat label="Streams"    value={stats.streams   ?? 0} accent="#ff4d8d" dark={dark}/>
        <BigStat label="Plays"      value={stats.plays     ?? 0} accent="#ec4899" dark={dark}/>
        <BigStat label="Likes"      value={stats.likes     ?? 0} accent="#f87171" dark={dark}/>
        <BigStat label="Hörer"      value={stats.listeners ?? 0} accent="#a78bfa" dark={dark}/>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <TrackLeaderboard
          title="Meist gehört"
          empty="Noch keine Streams."
          rows={stats.topTracks || []}
          dark={dark}
        />
        <Leaderboard
          title="Top Creators"
          empty="Noch keine Tracks hochgeladen."
          rows={stats.topSubmitters || []}
          dark={dark}
        />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
        <Leaderboard
          title="Top Voter"
          empty="Noch niemand abgestimmt."
          rows={stats.topVoters || []}
          dark={dark}
        />
        <ApGlass dark={dark} radius={18} padding={18} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <ApIcon name="shield" size={28} color="#fbbf24"/>
          <div>
            <div style={{ fontSize: 13, fontWeight: 700 }}>
              {stats.blockCount} {stats.blockCount === 1 ? 'gesperrter Spieler' : 'gesperrte Spieler'}
            </div>
            <div style={{ fontSize: 12, opacity: 0.6 }}>Verwalten unter „Sperren".</div>
          </div>
        </ApGlass>
      </div>
    </div>
  );
}

// Variant of Leaderboard for songs — shows title + artist instead of avatars.
function TrackLeaderboard({ title, empty, rows, dark }) {
  return (
    <ApGlass dark={dark} radius={18} padding={18}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', opacity: 0.65, marginBottom: 12 }}>
        {title}
      </div>
      {rows.length === 0 ? (
        <div style={{ fontSize: 13, opacity: 0.55 }}>{empty}</div>
      ) : rows.map((t, i) => (
        <div key={t.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
          <div style={{
            width: 22, fontSize: 13, opacity: 0.4, textAlign: 'center',
            fontWeight: 700, fontVariantNumeric: 'tabular-nums',
          }}>{i + 1}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.title}</div>
            <div style={{ fontSize: 11, opacity: 0.55, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.artist}</div>
          </div>
          <div style={{ fontSize: 13, fontWeight: 700, color: '#ff4d8d', fontVariantNumeric: 'tabular-nums' }}>
            {t.streams}
          </div>
        </div>
      ))}
    </ApGlass>
  );
}

function BigStat({ label, value, accent, dark }) {
  return (
    <ApGlass dark={dark} radius={16} padding={'18px 18px 16px'}>
      <div style={{
        fontSize: 10.5, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', opacity: 0.55,
      }}>{label}</div>
      <div style={{ fontSize: 32, fontWeight: 800, color: accent, marginTop: 6, letterSpacing: -1, fontVariantNumeric: 'tabular-nums' }}>
        {value}
      </div>
    </ApGlass>
  );
}

function Leaderboard({ title, empty, rows, dark }) {
  return (
    <ApGlass dark={dark} radius={18} padding={18}>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.6, textTransform: 'uppercase', opacity: 0.65, marginBottom: 12 }}>
        {title}
      </div>
      {rows.length === 0 ? (
        <div style={{ fontSize: 13, opacity: 0.55 }}>{empty}</div>
      ) : rows.map((r, i) => {
        const player = playerByIdent(r.identifier);
        return (
          <div key={r.identifier} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0' }}>
            <div style={{
              width: 22, fontSize: 13, opacity: 0.4, textAlign: 'center',
              fontWeight: 700, fontVariantNumeric: 'tabular-nums',
            }}>{i + 1}</div>
            {player ? <ApAvatar player={player} size={28}/> : <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }}/>}
            <div style={{ flex: 1, minWidth: 0 }}>
              {player
                ? <ApPlayerName player={player} size={13} opacity={1}/>
                : <span style={{ fontSize: 12, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', opacity: 0.7 }}>{r.identifier}</span>}
            </div>
            <div style={{
              fontSize: 13, fontWeight: 700, color: '#ff4d8d', fontVariantNumeric: 'tabular-nums',
            }}>
              {r.count}
            </div>
          </div>
        );
      })}
    </ApGlass>
  );
}

window.StatsScreen = StatsScreen;