import { cn } from '@/lib/cn';
import { teamFlag } from '@/lib/teams';
import type { StandingRow } from '@/lib/types';

/** One group's standings. Top 2 qualify directly; 3rd may advance as a best-third. */
export function GroupTable({ group, rows }: { group: string; rows: StandingRow[] }) {
  return (
    <div className="overflow-hidden rounded-xl border border-line bg-panel">
      <div className="flex items-center justify-between border-b border-line px-3 py-2">
        <span className="font-display text-sm font-bold text-ink">Group {group}</span>
        <span className="smallcaps">Pld · Pts</span>
      </div>
      <table className="w-full border-collapse text-sm">
        <thead>
          <tr className="text-[11px] uppercase tracking-wide text-faint">
            <th className="px-3 py-1.5 text-left font-semibold">Team</th>
            <th className="w-8 py-1.5 text-center font-semibold">P</th>
            <th className="w-8 py-1.5 text-center font-semibold">GD</th>
            <th className="w-9 py-1.5 text-center font-semibold">Pts</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr
              key={r.team}
              className={cn(
                'border-t border-line/60',
                r.rank <= 2 && 'bg-accent-glow',
                r.rank === 3 && 'bg-gold/5',
              )}
            >
              <td className="px-3 py-1.5">
                <span className="flex items-center gap-2">
                  <span
                    className={cn(
                      'w-4 text-center text-[11px] font-bold tabular-nums',
                      r.rank <= 2 ? 'text-accent' : r.rank === 3 ? 'text-gold' : 'text-faint',
                    )}
                  >
                    {r.rank}
                  </span>
                  <span aria-hidden className="text-base leading-none">{teamFlag(r.team)}</span>
                  <span className="truncate text-ink">{r.team}</span>
                </span>
              </td>
              <td className="py-1.5 text-center tabular-nums text-muted">{r.played}</td>
              <td className="py-1.5 text-center tabular-nums text-muted">
                {r.gd > 0 ? `+${r.gd}` : r.gd}
              </td>
              <td className="py-1.5 text-center font-bold tabular-nums text-ink">{r.points}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
