import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { forVenue, getDb } from '@pintrush/db';
import { LogoMark, LogoWordmark } from '@/components/brand/Logo';
import { QrCode } from '@/components/ui/QrCode';
import { PrintButton } from '@/components/host/client';
import { linkStyles } from '@/components/host/ui';
import { requireHost } from '@/lib/auth/session';
import { joinUrl } from '@/lib/server/tokens';
import { siteUrl } from '@/lib/site';

export const metadata: Metadata = { title: 'QR poster' };

/**
 * Printable table-tent / wall poster for one room: a big scannable QR code to the room's join link,
 * the venue name and the join code for anyone typing it in. Screen shows a paper preview; print
 * CSS prints just the sheet in black on white (brand accents kept where the printer allows).
 */
export default async function PosterPage({ params }: { params: Promise<{ roomId: string }> }) {
  const { roomId } = await params;
  const { venue } = await requireHost(`/host/rooms/${encodeURIComponent(roomId)}/poster`);
  const room = await forVenue(getDb(), venue.id).rooms.get(roomId);
  if (!room) notFound();
  const url = joinUrl(siteUrl.origin, venue.joinCode, room.id);
  const shortUrl = `${siteUrl.host}/join/${venue.joinCode}`;

  return (
    <main id="main" tabIndex={-1} className="min-h-dvh py-8 outline-none print:min-h-0 print:p-0">
      {/* Letter paper, no browser margins: the sheet below carries its own padding. */}
      <style>{'@page { size: letter portrait; margin: 0; }'}</style>
      <div className="container-page mb-6 flex flex-wrap items-center justify-between gap-4 print:hidden">
        <div>
          <Link href="/host" className={`${linkStyles} text-sm`}>
            ← Back to dashboard
          </Link>
          <h1 className="mt-2 font-display text-2xl font-bold">QR poster · {room.name}</h1>
          <p className="mt-1 text-sm text-muted">Print on letter paper and put one on every table, the bar and the bathroom mirror.</p>
        </div>
        <PrintButton />
      </div>

      <article
        aria-label={`Poster for ${venue.name}`}
        className="mx-auto flex aspect-[8.5/11] w-[min(100%-2rem,42rem)] flex-col items-center justify-between rounded-2xl bg-white px-[7%] py-[8%] text-center text-[#070b1f] shadow-lift [print-color-adjust:exact] print:h-[11in] print:w-[8.5in] print:max-w-none print:rounded-none print:shadow-none"
      >
        <div className="flex items-center gap-3">
          <LogoMark className="size-12 print:size-14" />
          <LogoWordmark className="text-3xl text-[#070b1f] print:text-4xl" />
        </div>
        <div className="flex flex-col items-center">
          <p className="text-sm font-bold tracking-[0.22em] text-[#4b2fd6] uppercase print:text-base">Live trivia tonight at</p>
          <p className="mt-2 font-display text-[clamp(1.75rem,5vw,2.75rem)] leading-tight font-extrabold tracking-[-0.03em] print:text-5xl">{venue.name}</p>
        </div>
        <div className="flex w-full flex-col items-center">
          <div className="w-[62%] rounded-3xl border-[6px] border-[#070b1f] p-3">
            <QrCode value={url} label={`QR code to join PintRush at ${venue.name}`} className="w-full" />
          </div>
          <p className="mt-5 font-display text-[clamp(1.25rem,3.4vw,2rem)] font-bold print:text-4xl">Scan to play — no app needed</p>
        </div>
        <div className="flex flex-col items-center gap-1">
          <p className="text-sm text-[#3a4270] print:text-base">or go to <span className="font-semibold text-[#070b1f]">{shortUrl}</span></p>
          <p className="text-sm text-[#3a4270] print:text-base">
            Join code <span className="num ml-1 rounded-lg bg-[#070b1f] px-3 py-1 font-display text-xl font-bold tracking-[0.12em] text-[#ffb020]">{venue.joinCode}</span>
          </p>
          <p className="mt-3 text-xs text-[#5a628f]">Free to play · no sign-up · just a nickname</p>
        </div>
      </article>
    </main>
  );
}