'use client';

import type { PublicState } from '@pintrush/engine';
import { DEFAULT_TIMINGS, POINTS } from '@pintrush/engine';
import { BoltIcon, SparklesIcon } from '@/components/ui/icons';
import { cn } from '@/lib/cn';
import { fitDisplaySize } from '@/lib/tv/results';
import { lateJoinOpen } from '@/lib/tv/screen';
import { DrainBar, CountdownSeconds } from '../parts/Countdown';
import { PredictionBar } from '../parts/FinalRush';
import { CornerJoin } from '../parts/JoinQr';
import { TopBar } from '../parts/TopBar';
import s from '../tv.module.css';

/** "Up next": the category teaser before a question opens. The prompt is not known to clients yet. */
export function PendingScreen({ pub }: { pub: PublicState }) {
  const q = pub.question;
  const round = pub.round;
  if (!q || !round) return null;
  const opensAt = q.opensAt ?? round.phaseEndsAt;
  const difficult = q.difficulty === 'DIFFICULT';
  const showPredictions = round.kind === 'FINAL_RUSH' && q.index === 0;

  return (
    <div className="absolute inset-0 flex flex-col px-[72px] pt-[48px] pb-[56px]">
      <TopBar pub={pub} />
      <div className="relative flex min-h-0 flex-1 flex-col items-center justify-center text-center">
        <p className="text-[36px] font-bold tracking-[0.3em] text-cyan uppercase">
          Up next · Question {q.index + 1} of {round.questionCount}
        </p>
        <h1
          className={cn(
            'mt-[24px] max-w-[1700px] font-display leading-[0.98] font-extrabold tracking-[-0.045em]',
            q.isWildcard ? 'text-gradient-gold' : 'text-gradient-brand',
            s.slam,
          )}
          // Up to two lines across 1700 px; long custom category names shrink instead of overflowing.
          style={{ fontSize: fitDisplaySize(q.isWildcard ? 'Wildcard' : q.categoryLabel, 1700 * 1.6, 190, 110) }}
        >
          {q.isWildcard ? 'Wildcard' : q.categoryLabel}
        </h1>
        <div className={cn('mt-[40px] flex flex-wrap items-center justify-center gap-[20px]', s.sceneIn)}>
          {q.isWildcard && (
            <span className="flex items-center gap-[12px] rounded-full border border-lime/50 bg-lime/12 px-[28px] py-[12px] text-[30px] font-bold text-lime-soft">
              <SparklesIcon className="size-[34px]" />
              Answer right to light any tile you choose · {q.categoryLabel}
            </span>
          )}
          {difficult && (
            <span className="flex items-center gap-[12px] rounded-full border border-amber/50 bg-amber/12 px-[28px] py-[12px] text-[30px] font-bold text-amber-soft">
              <BoltIcon className="size-[34px]" />
              Hard · {POINTS.CORRECT_DIFFICULT} points
            </span>
          )}
          {q.type === 'TRUE_FALSE' && (
            <span className="rounded-full border border-line-strong bg-raised px-[28px] py-[12px] text-[30px] font-bold text-muted">True or false</span>
          )}
          {round.kind === 'TABLE_WARS' && (
            <span className="rounded-full border border-cyan/50 bg-cyan/12 px-[28px] py-[12px] text-[30px] font-bold text-cyan-soft">Table challenge · +200 per member</span>
          )}
        </div>
        {showPredictions && <PredictionBar pub={pub} className="mt-[56px] w-[1500px] text-left" />}
        {lateJoinOpen(round) && <CornerJoin className="absolute right-0 bottom-0" />}
      </div>
      <div className="flex items-center gap-[28px]">
        <DrainBar startsAt={opensAt - DEFAULT_TIMINGS.pendingMs} endsAt={opensAt} className="flex-1" />
        <span className="text-[28px] font-semibold text-muted">
          Opens in <CountdownSeconds endsAt={opensAt} className="font-display text-[36px] font-bold text-fg" />
        </span>
      </div>
    </div>
  );
}