'use client';

import type { PublicState } from '@pintrush/engine';
import { cn } from '@/lib/cn';
import { FinalistsRace } from '../parts/FinalRush';
import { Leaderboard } from '../parts/Leaderboard';
import { Podium } from '../parts/Podium';
import { TeamStandings } from '../parts/TeamStandings';
import { roundCaption } from '../parts/TopBar';
import { LogoMark } from '@/components/brand/Logo';
import { tableBoards } from '@/lib/tv/results';
import s from '../tv.module.css';

/** Deterministic tie-break order (ARCHITECTURE §2.4), printed on the TV as the spec requires. */
export const TIE_BREAK_NOTE = 'Ties: correct answers, then total answer speed, then earliest last correct.';

/** ROUND_OVER: podium, top 10 with the tie-break rule, and table standings when teams are playing. */
export function RoundOverScreen({ pub }: { pub: PublicState }) {
  const round = pub.round;
  if (!round) return null;
  const boards = tableBoards(pub);
  const showTeams = boards.show;
  const nextLabel = pub.plan?.nextLabel ?? null;
  const podium = pub.leaderboard.slice(0, 3).map((p) => ({ id: p.playerId, name: p.nickname, points: p.points }));

  return (
    <div className="absolute inset-0 flex flex-col px-[72px] pt-[52px] pb-[44px]">
      <header className="flex items-end justify-between gap-[40px]">
        <div className="flex items-center gap-[24px]">
          <LogoMark className="size-[76px]" />
          <div>
            <p className="text-[26px] font-bold tracking-[0.24em] text-cyan uppercase">{roundCaption(pub, round, 'complete')}</p>
            <h1 className={cn('mt-[6px] font-display text-[88px] leading-none font-extrabold tracking-[-0.04em]', s.slam)}>
              {round.label} <span className="text-gradient-brand">wrap-up</span>
            </h1>
          </div>
        </div>
        {nextLabel && (
          <p className="rounded-full border border-violet/50 bg-violet/15 px-[28px] py-[12px] text-[28px] font-semibold text-violet-soft">
            Up next: <span className="font-display font-bold text-fg">{nextLabel}</span>
          </p>
        )}
      </header>

      <div className={cn('mt-[40px] grid min-h-0 flex-1 gap-[48px]', showTeams ? 'grid-cols-[640px_minmax(0,1fr)_500px]' : 'grid-cols-[760px_minmax(0,1fr)]')}>
        <section aria-label={pub.mode === 'CHAMPIONSHIP' ? 'Championship leaders' : 'Tonight’s leaders'} className="flex min-w-0 flex-col justify-end rounded-[34px] border border-line bg-surface/70 px-[28px] pt-[28px]">
          <h2 className="mb-auto text-[24px] font-bold tracking-[0.2em] text-subtle uppercase">{pub.mode === 'CHAMPIONSHIP' ? 'Championship leaders' : 'Tonight’s leaders'}</h2>
          {round.kind === 'FINAL_RUSH' ? <FinalistsRace pub={pub} className="mb-[28px]" /> : <Podium entries={podium} label="Top three" />}
        </section>

        <section aria-label="Top 10" className="flex min-w-0 flex-col">
          <h2 className="mb-[16px] text-[24px] font-bold tracking-[0.2em] text-subtle uppercase">Top 10</h2>
          <Leaderboard standings={pub.leaderboard} label="Top 10" />
          <p className="mt-auto pt-[16px] text-[20px] text-subtle">{TIE_BREAK_NOTE}</p>
        </section>

        {showTeams && (
          <div className="flex min-w-0 flex-col gap-[28px]">
            <TeamStandings
              title={boards.title}
              teams={boards.tables}
              limit={boards.solos.length > 0 ? 5 : 8}
              markSolos={boards.merged}
              note={boards.merged ? 'Table score = average points of members who answered; solo players score their own points.' : 'Table score = average points of members who answered.'}
            />
            {boards.solos.length > 0 && <TeamStandings title="Solo" teams={boards.solos} limit={3} />}
          </div>
        )}
      </div>
    </div>
  );
}