// "Decided" tab — accepted + rejected submissions, newest first. Each row has
// a tiny play button so admins can re-listen to anything that already passed.

function DecidedList({ submissions, me, refresh, dark }) {
  const audio = useAudio();
  const isAdmin = canForceAccept(me);
  const decided = submissions
    .filter(s => s.status !== 'pending')
    .sort((a, b) => b.submittedAt - a.submittedAt);

  return (
    <div style={{ padding: '28px 32px', maxWidth: 1100, margin: '0 auto' }}>
      <h1 style={{ fontSize: 32, fontWeight: 800, letterSpacing: -0.7, margin: '0 0 24px' }}>Verlauf</h1>
      {decided.length === 0 ? (
        <ApGlass dark={dark} radius={20} padding={32} style={{ textAlign: 'center', opacity: 0.6 }}>
          Noch nichts entschieden.
        </ApGlass>
      ) : (
        <ApGlass dark={dark} radius={20} padding={6}>
          {decided.map((s, i) => {
            const t = tally(s);
            const submitter = playerByIdent(s.identifier);
            const isPlaying = audio.currentId === s.id;
            return (
              <div key={s.id} style={{
                display: 'flex', alignItems: 'center', gap: 14, padding: '12px 14px', borderRadius: 14,
                borderBottom: i < decided.length - 1 ? (dark ? '1px solid rgba(255,255,255,0.05)' : '1px solid rgba(0,0,0,0.04)') : 'none',
                background: isPlaying ? 'rgba(255,77,141,0.08)' : 'transparent',
                transition: 'background 0.15s',
              }}>
                <ApCover colors={s.cover} src={s.coverUrl} size={48} radius={10}/>

                {s.audioUrl && (
                  <button
                    onClick={() => audio.play(s.id, s.audioUrl)}
                    title={isPlaying ? 'Pausieren' : 'Anhören'}
                    style={{
                      width: 36, height: 36, borderRadius: '50%',
                      background: isPlaying ? '#ff4d8d' : (dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)'),
                      border: dark ? '1px solid rgba(255,255,255,0.12)' : '1px solid rgba(0,0,0,0.08)',
                      color: isPlaying ? '#fff' : 'inherit',
                      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0,
                    }}
                  >
                    <ApIcon name={isPlaying ? 'pause' : 'play'} size={14}/>
                  </button>
                )}

                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700 }}>{s.title}</div>
                  <div style={{ fontSize: 12, opacity: 0.6, display: 'flex', alignItems: 'center', gap: 6 }}>
                    {s.artist} <span style={{ opacity: 0.5 }}>·</span> Hochgeladen von <ApPlayerName player={submitter} size={12} opacity={1}/>
                  </div>
                </div>
                <div style={{ fontSize: 11.5, opacity: 0.55, minWidth: 110, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>
                  <span style={{ color: '#34d399' }}>{t.accepts}</span> / <span style={{ color: '#f87171' }}>{t.rejects}</span>
                </div>
                <ApStatusPill status={s.status}/>
                {isAdmin && <AdminMenu sub={s} refresh={refresh} dark={dark}/>}
              </div>
            );
          })}
        </ApGlass>
      )}
    </div>
  );
}

window.DecidedList = DecidedList;