// Meldungen — community-flagged tracks. Mods view, only admins act.
//
// Each row shows the underlying track inline + a tally bar of reports
// vs dismissals (the same vote shape we use for review submissions,
// just inverted — here reports → bad, dismisses → good). Auto-flips
// to "delisted" at ≥6 votes with ≥60% reports; admins can act sooner.

function ReportsScreen({ me }) {
  const [list, setList] = React.useState(null);
  const audio = useAudioStatus();

  const refresh = React.useCallback(async () => {
    try {
      setList(await Api.reports.list());
    } catch (e) {
      toast.error('Reports laden fehlgeschlagen: ' + e.message);
    }
  }, []);

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

  // Auto-refresh every 30s so an open tab doesn't go stale during a
  // busy reporting period. One GET per cycle — cheap.
  React.useEffect(() => {
    const id = setInterval(refresh, 30_000);
    return () => clearInterval(id);
  }, [refresh]);

  const isAdmin = canForceAccept(me);

  const onDismiss = async (id) => {
    if (!confirm('Alle Meldungen für diesen Track verwerfen?\n\nDer Track bleibt online, die Stimmen werden gelöscht.')) return;
    try {
      if (audio.currentId === id) AudioService.stop();
      await Api.reports.dismiss(id);
      await refresh();
      toast.success('Meldungen verworfen.');
    } catch (e) {
      toast.error('Verwerfen fehlgeschlagen: ' + e.message);
    }
  };

  const onForceDelete = async (id) => {
    if (!confirm('Track sofort delisten?\n\nStatus wird auf „Abgelehnt" gesetzt, Track verschwindet aus dem Katalog. Meldungen werden gelöscht. CDN-Dateien bleiben — falls du die auch entfernen willst, geh über den normalen Delete-Knopf.')) return;
    try {
      if (audio.currentId === id) AudioService.stop();
      await Api.reports.forceDelete(id);
      await refresh();
      toast.info('Track delistet.');
    } catch (e) {
      toast.error('Delisten fehlgeschlagen: ' + e.message);
    }
  };

  return (
    <div style={{ padding: '32px 36px 140px', maxWidth: 1100, margin: '0 auto' }}>

      <div style={{ marginBottom: 22 }}>
        <Eyebrow style={{ marginBottom: 6 }}>{list ? `${list.length} gemeldet` : 'lädt…'}</Eyebrow>
        <h1 style={{ fontWeight: 800, fontSize: 40, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
          Meldungen
        </h1>
        <p style={{ fontSize: 14.5, color: 'var(--fg-2)', marginTop: 8, maxWidth: 660, opacity: 0.82 }}>
          Tracks, die Spieler ingame gemeldet haben. Bei <b style={{ color: 'var(--foam)' }}>60%</b> Zustimmung
          mit mindestens <b style={{ color: 'var(--foam)' }}>6</b> Stimmen wird automatisch delistet —
          Admins können sofort entscheiden.
        </p>
      </div>

      {list === null ? (
        <Glass radius={20} padding={32} style={{ textAlign: 'center', color: 'var(--fg-3)' }}>
          Lädt…
        </Glass>
      ) : list.length === 0 ? (
        <EmptyState
          icon="check"
          iconColor="var(--success)"
          title="Keine offenen Meldungen"
          description="Sobald Spieler einen Track ingame melden, taucht er hier auf."
        />
      ) : (
        <Glass radius={20} padding={0}>
          {list.map((r, i) => {
            const total = r.reports + r.dismissals;
            const ratio = total > 0 ? r.reports / total : 0;
            const ratioPct = Math.round(ratio * 100);
            const isPlaying = audio.currentId === r.trackId;
            const submitter = playerByIdent(r.identifier);

            return (
              <div key={r.trackId} style={{
                display: 'flex', alignItems: 'center', gap: 14, padding: '12px 18px',
                borderBottom: i < list.length - 1 ? '1px solid var(--border-hairline)' : 'none',
                background: isPlaying ? 'rgba(255,110,138,0.08)' : 'transparent',
                transition: 'background 150ms var(--ease-out)',
              }}>
                <Cover colors={['#A972F4', '#FF7E8B']} src={r.coverUrl} size={48} radius={10}/>

                {r.audioUrl && (
                  <button
                    onClick={() => audio.play({ id: r.trackId, audioUrl: r.audioUrl, title: r.title, artist: r.artist, cover: ['#A972F4', '#FF7E8B'], coverUrl: r.coverUrl, duration: r.duration })}
                    title={isPlaying && audio.isPlaying ? 'Pausieren' : 'Anhören'}
                    aria-label={isPlaying && audio.isPlaying ? 'Pausieren' : 'Anhören'}
                    style={{
                      width: 36, height: 36, borderRadius: '50%',
                      background: isPlaying && audio.isPlaying ? 'var(--grad-lila)' : 'rgba(196,154,255,0.10)',
                      border: '1px solid var(--border-soft)',
                      color: isPlaying && audio.isPlaying ? 'var(--foam)' : 'var(--fg-2)',
                      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0,
                      boxShadow: isPlaying && audio.isPlaying ? 'var(--glow-lila)' : 'none',
                    }}>
                    <ApIcon name={isPlaying && audio.isPlaying ? 'pause' : 'play'} size={13}/>
                  </button>
                )}

                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--foam)' }}>{r.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--fg-3)', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                    <span>{r.artist}</span>
                    <span style={{ color: 'var(--fg-4)' }}>·</span>
                    <span>von <PlayerName player={submitter} size={12} opacity={1}/></span>
                    <span style={{ color: 'var(--fg-4)' }}>·</span>
                    <span>{timeAgo(r.latest)}</span>
                  </div>
                </div>

                {/* Tally bar — reports (red) over dismissals (green) */}
                <div style={{ minWidth: 150, textAlign: 'right' }}>
                  <div style={{
                    fontSize: 11.5, fontVariantNumeric: 'tabular-nums',
                    fontWeight: ratio >= 0.6 ? 700 : 600,
                    marginBottom: 4,
                    color: ratio >= 0.6 ? 'var(--danger)' : 'var(--fg-2)',
                  }}>
                    <span style={{ color: 'var(--danger)' }}>{r.reports}</span>
                    {' / '}
                    <span style={{ color: 'var(--success)' }}>{r.dismissals}</span>
                    {' '}<span style={{ color: 'var(--fg-3)' }}>({ratioPct}%)</span>
                  </div>
                  <div style={{
                    height: 4, borderRadius: 2,
                    background: 'rgba(196,154,255,0.16)', overflow: 'hidden',
                  }}>
                    <div style={{
                      width: `${ratioPct}%`, height: '100%',
                      background: ratio >= 0.6 ? 'var(--danger)' : 'var(--warning)',
                      transition: 'width 200ms var(--ease-out)',
                    }}/>
                  </div>
                </div>

                <StatusPill status={r.status}/>

                {isAdmin && (
                  <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
                    <Button variant="success" size="sm" icon="check"
                      onClick={() => onDismiss(r.trackId)}
                      title="Meldungen verwerfen — Track bleibt">
                      Passt so
                    </Button>
                    <Button variant="danger" size="sm" icon="x"
                      onClick={() => onForceDelete(r.trackId)}
                      title="Track delisten + Meldungen löschen">
                      Delisten
                    </Button>
                  </div>
                )}
              </div>
            );
          })}
        </Glass>
      )}
    </div>
  );
}

window.ReportsScreen = ReportsScreen;