import { LogoMark } from '@/components/brand/Logo';
import { CheckIcon, TrophyIcon } from '@/components/ui/icons';
import { QrCode } from '@/components/ui/QrCode';
import { cn } from '@/lib/cn';
import { absoluteUrl } from '@/lib/site';
import s from './stage.module.css';

/** The demo room's real join link (see ARCHITECTURE §4: venue `demo`, code DEMO). */
const DEMO_JOIN_URL = absoluteUrl('/join/DEMO');

const answers = [
  { letter: 'A', text: 'Mars' },
  { letter: 'B', text: 'Jupiter', correct: true },
  { letter: 'C', text: 'Venus' },
  { letter: 'D', text: 'Mercury' },
] as const;

const leaderboard = [
  { name: 'TriviaTitan', score: '2,980' },
  { name: 'NachoAverage', score: '2,560', move: 'down' },
  { name: 'Mike 2', score: '2,310', next: '2,710', move: 'up', plus: '+400' },
  { name: 'QuizLightyear', score: '2,140' },
  { name: 'PintSizedPro', score: '1,960' },
] as const;

function TopBar({ round, category }: { round: string; category: string }) {
  return (
    <div className="flex items-center justify-between gap-[2cqw]">
      <div className="flex items-center gap-[1cqw]">
        <LogoMark className="size-[3.4cqw]" />
        <span className="font-display text-[1.6cqw] font-bold tracking-[-0.02em]">THE RUSH</span>
        <span className="num rounded-full border border-line-strong/60 px-[1cqw] py-[0.3cqw] text-[1.1cqw] font-semibold text-muted">
          {round}
        </span>
      </div>
      <span className="rounded-full border border-cyan/40 bg-cyan/15 px-[1.4cqw] py-[0.4cqw] text-[1.2cqw] font-bold tracking-[0.18em] text-cyan-soft">
        {category}
      </span>
      <div className="flex items-center gap-[1cqw]">
        <div className="text-right leading-tight">
          <p className="text-[1cqw] text-subtle">Scan to play</p>
          <p className="font-display text-[1.35cqw] font-bold">
            CODE <span className="text-amber">DEMO</span>
          </p>
        </div>
        <QrCode value={DEMO_JOIN_URL} label="QR code that joins the PintRush demo room" className="size-[4.8cqw]" />
      </div>
    </div>
  );
}

function CountdownRing({ value }: { value?: number }) {
  return (
    <div className="relative size-[10.5cqw] shrink-0">
      <svg viewBox="0 0 40 40" className="size-full -rotate-90" aria-hidden="true">
        <circle cx="20" cy="20" r="17" fill="none" stroke="var(--color-line)" strokeWidth="3.4" />
        <circle cx="20" cy="20" r="17" fill="none" strokeWidth="3.4" strokeLinecap="round" pathLength={100} className={s.ring} />
      </svg>
      {value === undefined ? (
        <span className={cn('num absolute inset-0 grid place-items-center font-display text-[3.8cqw] font-bold', s.count)} />
      ) : (
        <span className="num absolute inset-0 grid place-items-center font-display text-[3.8cqw] font-bold">{value}</span>
      )}
    </div>
  );
}

/** Live question with countdown ring and leaderboard. Animates when inside a `.live` stage. */
export function TvQuestionScreen() {
  return (
    <div
      className={cn(
        'absolute inset-0 flex flex-col gap-[1.6cqw] bg-[radial-gradient(70%_60%_at_80%_0%,rgb(124_92_255/0.22),transparent_70%),radial-gradient(50%_50%_at_0%_100%,rgb(34_211_238/0.12),transparent_70%)] p-[2.2cqw]',
        s.cycle,
      )}
    >
      <TopBar round="Q4 / 10" category="SCIENCE" />
      <div className="grid min-h-0 flex-1 grid-cols-[26cqw_1fr] gap-[1.8cqw]">
        <div className="flex flex-col rounded-[1.6cqw] border border-line bg-surface/80 p-[1.4cqw]">
          <div className="mb-[0.8cqw] flex items-center justify-between">
            <p className="text-[1.05cqw] font-bold tracking-[0.2em] text-subtle">TONIGHT</p>
            <TrophyIcon className="size-[1.7cqw] text-amber" />
          </div>
          <ol className="relative flex flex-col">
            {leaderboard.map((row, index) => (
              <li key={row.name} className="flex h-[5.4cqw] items-center gap-[0.9cqw]">
                <span
                  className={cn(
                    'num grid size-[2.5cqw] shrink-0 place-items-center rounded-[0.6cqw] font-display text-[1.25cqw] font-bold',
                    index === 0 ? 'bg-amber text-on-bright' : 'bg-raised text-muted',
                  )}
                >
                  {index + 1}
                </span>
                <div
                  className={cn(
                    'relative flex h-full min-w-0 flex-1 items-center justify-between gap-[0.6cqw] rounded-[0.7cqw] px-[0.8cqw]',
                    'move' in row && row.move === 'up' && cn('bg-violet/15', s.rowUp),
                    'move' in row && row.move === 'down' && s.rowDown,
                  )}
                >
                  <span className={cn('truncate text-[1.35cqw] font-semibold', 'move' in row && row.move === 'up' ? 'text-violet-soft' : 'text-fg')}>
                    {row.name}
                  </span>
                  <span className="num relative font-display text-[1.4cqw] font-bold">
                    {'next' in row ? (
                      <>
                        <span className={s.scoreOld}>{row.score}</span>
                        <span className={cn('absolute inset-0 text-amber', s.scoreNew)}>{row.next}</span>
                      </>
                    ) : (
                      row.score
                    )}
                  </span>
                  {'plus' in row && (
                    <span
                      className={cn(
                        'absolute -top-[1cqw] right-[0.4cqw] rounded-full bg-amber px-[0.7cqw] py-[0.15cqw] font-display text-[0.95cqw] font-extrabold text-on-bright',
                        s.plusChip,
                      )}
                    >
                      {row.plus}
                    </span>
                  )}
                </div>
              </li>
            ))}
          </ol>
          <p className="mt-auto border-t border-line/70 pt-[0.9cqw] text-[1.05cqw] text-subtle">
            Top table · <span className="font-semibold text-cyan-soft">The Quizzly Bears</span>
          </p>
        </div>

        <div className="flex min-h-0 flex-col gap-[1.4cqw] rounded-[1.6cqw] border border-line bg-surface/80 p-[1.8cqw]">
          {/* Ring sits left of the question so the hero phone never covers it. */}
          <div className="flex items-center gap-[1.8cqw]">
            <CountdownRing />
            <p className="font-display text-[3.1cqw] leading-[1.15] font-semibold tracking-[-0.02em]">
              Which planet has the shortest day?
            </p>
          </div>
          <ul className="mt-auto grid grid-cols-2 gap-[1cqw]">
            {answers.map((answer) => (
              <li
                key={answer.letter}
                className={cn(
                  'flex items-center gap-[1cqw] rounded-[1cqw] border border-line bg-raised/70 px-[1.1cqw] py-[1cqw]',
                  'correct' in answer ? s.tvCorrect : s.tvDim,
                )}
              >
                <span className="grid size-[2.7cqw] shrink-0 place-items-center rounded-[0.6cqw] bg-violet/25 font-display text-[1.3cqw] font-bold text-violet-soft">
                  {answer.letter}
                </span>
                <span className="text-[1.8cqw] font-semibold">{answer.text}</span>
                {'correct' in answer && <CheckIcon className={cn('ml-auto size-[2cqw] text-lime', s.revealSwap)} />}
              </li>
            ))}
          </ul>
          <div className="relative h-[2.2cqw] text-[1.15cqw]">
            <div className={cn('absolute inset-0 flex items-center gap-[1cqw]', s.pendingSwap)}>
              <span className="num shrink-0 text-muted">37 of 42 answered</span>
              <span className="h-[0.6cqw] flex-1 overflow-hidden rounded-full bg-line">
                <span className="block h-full w-[88%] rounded-full bg-[linear-gradient(90deg,var(--color-violet),var(--color-cyan))]" />
              </span>
            </div>
            <p className={cn('absolute inset-0 flex items-center gap-[0.6cqw] text-lime-soft', s.revealSwap)}>
              <span className="font-bold">Jupiter.</span>
              <span className="text-muted">It spins once in under 10 hours.</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

const topTen = [
  ['TriviaTitan', '9,840'],
  ['NachoAverage', '9,215'],
  ['Mike 2', '8,990'],
  ['QuizLightyear', '8,410'],
  ['The Quizzly Bears', '8,055'],
  ['PintSizedPro', '7,620'],
] as const;

/** Between-rounds attract mode: QR, next-round timer, nightly board, next championship. */
export function TvAttractScreen() {
  return (
    <div className="absolute inset-0 grid grid-cols-[1.1fr_1fr] gap-[2.4cqw] bg-[radial-gradient(60%_70%_at_20%_30%,rgb(124_92_255/0.25),transparent_70%),radial-gradient(40%_50%_at_100%_100%,rgb(255_176_32/0.12),transparent_70%)] p-[3cqw]">
      <div className="flex flex-col justify-between">
        <div className="flex items-center gap-[1.2cqw]">
          <LogoMark className="size-[4.4cqw]" />
          <span className="font-display text-[2.4cqw] font-bold tracking-[-0.03em]">
            Pint<span className="text-gradient-brand">Rush</span>
          </span>
        </div>
        <div className="flex items-center gap-[2.4cqw]">
          <QrCode value={DEMO_JOIN_URL} label="QR code that joins the PintRush demo room" className="size-[17cqw] shrink-0 rounded-[1cqw]" />
          <div className="flex flex-col gap-[0.8cqw]">
            <p className="font-display text-[3.6cqw] leading-none font-extrabold tracking-[-0.03em]">Scan to play</p>
            <p className="text-[1.5cqw] text-muted">No app. No sign-up. Just a nickname.</p>
            <p className="mt-[0.6cqw] text-[1.4cqw] text-subtle">
              or go to <span className="font-semibold text-fg">pintrush.com/join</span> · code{' '}
              <span className="font-display font-bold text-amber">DEMO</span>
            </p>
          </div>
        </div>
        <div className="flex items-center gap-[1.4cqw]">
          <div className="rounded-[1.2cqw] border border-cyan/40 bg-cyan/10 px-[1.6cqw] py-[1cqw]">
            <p className="text-[1.05cqw] font-bold tracking-[0.18em] text-cyan-soft">NEXT ROUND IN</p>
            <p className="num font-display text-[3.4cqw] leading-none font-bold">0:42</p>
          </div>
          <div className="rounded-[1.2cqw] border border-amber/40 bg-amber/10 px-[1.6cqw] py-[1cqw]">
            <p className="text-[1.05cqw] font-bold tracking-[0.18em] text-amber-soft">CHAMPIONSHIP</p>
            <p className="font-display text-[2cqw] leading-tight font-bold">Thursday · 8 PM</p>
          </div>
        </div>
      </div>
      <div className="flex flex-col rounded-[1.8cqw] border border-line bg-surface/85 p-[2cqw]">
        <div className="mb-[1cqw] flex items-center justify-between">
          <p className="text-[1.2cqw] font-bold tracking-[0.2em] text-subtle">TONIGHT&apos;S TOP 10</p>
          <TrophyIcon className="size-[2cqw] text-amber" />
        </div>
        <ol className="flex flex-1 flex-col justify-between">
          {topTen.map(([name, score], index) => (
            <li key={name} className="flex items-center gap-[1.2cqw] border-b border-line/50 py-[0.7cqw] last:border-0">
              <span
                className={cn(
                  'num grid size-[3cqw] shrink-0 place-items-center rounded-[0.7cqw] font-display text-[1.4cqw] font-bold',
                  index === 0 ? 'bg-amber text-on-bright' : index < 3 ? 'bg-violet/30 text-violet-soft' : 'bg-raised text-muted',
                )}
              >
                {index + 1}
              </span>
              <span className="flex-1 truncate text-[1.6cqw] font-semibold">{name}</span>
              <span className="num font-display text-[1.7cqw] font-bold">{score}</span>
            </li>
          ))}
        </ol>
      </div>
    </div>
  );
}

/** A revealed question as the TV shows it after lock: distribution bars and fastest fingers. */
export function TvRevealScreen() {
  const bars = [
    { letter: 'A', text: 'Mars', pct: 12 },
    { letter: 'B', text: 'Jupiter', pct: 61, correct: true },
    { letter: 'C', text: 'Venus', pct: 9 },
    { letter: 'D', text: 'Mercury', pct: 18 },
  ];
  return (
    <div className="absolute inset-0 flex flex-col gap-[1.6cqw] bg-[radial-gradient(60%_60%_at_80%_0%,rgb(182_242_58/0.12),transparent_70%)] p-[2.2cqw]">
      <TopBar round="Q4 / 10" category="SCIENCE" />
      <div className="grid flex-1 grid-cols-[1fr_24cqw] gap-[1.8cqw]">
        <div className="flex flex-col gap-[1.2cqw] rounded-[1.6cqw] border border-line bg-surface/80 p-[1.8cqw]">
          <p className="font-display text-[2.6cqw] leading-tight font-semibold tracking-[-0.02em]">Which planet has the shortest day?</p>
          <ul className="flex flex-1 flex-col justify-center gap-[0.9cqw]">
            {bars.map((bar) => (
              <li key={bar.letter} className="flex items-center gap-[1cqw]">
                <span
                  className={cn(
                    'grid size-[2.6cqw] shrink-0 place-items-center rounded-[0.6cqw] font-display text-[1.2cqw] font-bold',
                    bar.correct ? 'bg-lime text-on-bright' : 'bg-raised text-muted',
                  )}
                >
                  {bar.letter}
                </span>
                <div className="relative h-[3.4cqw] flex-1 overflow-hidden rounded-[0.8cqw] bg-raised/70">
                  <div
                    className={cn('absolute inset-y-0 left-0 rounded-[0.8cqw]', bar.correct ? 'bg-lime/30' : 'bg-line')}
                    style={{ width: `${bar.pct}%` }}
                  />
                  <span className={cn('absolute inset-y-0 left-[1.2cqw] flex items-center text-[1.6cqw] font-semibold', bar.correct && 'text-lime-soft')}>
                    {bar.text}
                  </span>
                  <span className="num absolute inset-y-0 right-[1.2cqw] flex items-center font-display text-[1.4cqw] font-bold">{bar.pct}%</span>
                </div>
              </li>
            ))}
          </ul>
        </div>
        <div className="flex flex-col gap-[1cqw] rounded-[1.6cqw] border border-line bg-surface/80 p-[1.4cqw]">
          <p className="text-[1.05cqw] font-bold tracking-[0.2em] text-subtle">FASTEST CORRECT</p>
          {[
            ['Mike 2', '1.9s'],
            ['TriviaTitan', '2.4s'],
            ['QuizLightyear', '3.1s'],
          ].map(([name, time], index) => (
            <div key={name} className="flex items-center justify-between rounded-[0.8cqw] bg-raised/70 px-[1cqw] py-[0.9cqw]">
              <span className="text-[1.35cqw] font-semibold">
                <span className="num mr-[0.6cqw] text-amber">{index + 1}</span>
                {name}
              </span>
              <span className="num font-display text-[1.3cqw] font-bold text-cyan-soft">{time}</span>
            </div>
          ))}
          <p className="mt-auto text-[1.05cqw] leading-snug text-subtle">Speed bonus up to +50 for quick correct answers.</p>
        </div>
      </div>
    </div>
  );
}