'use client';

import type { Standing, TeamStanding } from '@pintrush/engine';
import { cn } from '@/lib/cn';
import { formatNumber } from '../format';

const medal = ['text-amber', 'text-cyan-soft', 'text-violet-soft'];

export function PlayerStandings({ standings, emptyText }: { standings: readonly Standing[]; emptyText: string }) {
  if (standings.length === 0) return <p className="text-sm text-muted">{emptyText}</p>;
  return (
    <ol className="flex flex-col gap-1.5">
      {standings.map((s) => (
        <li key={s.playerId} className="flex items-center gap-3 rounded-xl bg-night/40 px-3 py-2">
          <span className={cn('num w-7 text-right font-display text-sm font-bold', medal[s.rank - 1] ?? 'text-subtle')} aria-label={`Rank ${s.rank}`}>
            {s.rank}
          </span>
          <span className="min-w-0 flex-1 truncate font-semibold">{s.nickname}</span>
          <span className="text-xs text-subtle">
            {s.correct} correct{s.lines > 0 ? ` · ${s.lines} line${s.lines === 1 ? '' : 's'}` : ''}
          </span>
          <span className="num w-16 text-right font-display font-bold">{formatNumber(s.points)}</span>
        </li>
      ))}
    </ol>
  );
}

/**
 * "x/y playing" only means something for a real team. Solo units of players without a team carry
 * the engine's `solo:` id prefix; a team of one is waiting for tablemates.
 */
function teamMeta(t: TeamStanding): string | null {
  if (t.teamId.startsWith('solo:')) return null;
  if (t.members === 1) return 'waiting for tablemates';
  return `${t.activeMembers}/${t.members} playing`;
}

export function TeamStandings({ teams, emptyText }: { teams: readonly TeamStanding[]; emptyText: string }) {
  if (teams.length === 0) return <p className="text-sm text-muted">{emptyText}</p>;
  return (
    <ol className="flex flex-col gap-1.5">
      {teams.map((t) => (
        <li key={t.teamId} className="flex items-center gap-3 rounded-xl bg-night/40 px-3 py-2">
          <span className={cn('num w-7 text-right font-display text-sm font-bold', medal[t.rank - 1] ?? 'text-subtle')} aria-label={`Rank ${t.rank}`}>
            {t.rank}
          </span>
          <span className="min-w-0 flex-1 truncate font-semibold">{t.name}</span>
          {teamMeta(t) && <span className="text-xs text-subtle">{teamMeta(t)}</span>}
          <span className="num w-16 text-right font-display font-bold">{formatNumber(t.score)}</span>
        </li>
      ))}
    </ol>
  );
}