import type { ReactNode } from 'react';
import { LogoMark, LogoWordmark } from '@/components/brand/Logo';
import { AlertIcon, TvIcon } from '@/components/ui/icons';
import { cn } from '@/lib/cn';

/**
 * Centred full-stage message (bad link, connecting, server unreachable). No hooks, so the server
 * page can render it directly inside <TvStage>.
 */
export function TvMessageScreen({
  title,
  body,
  tone = 'neutral',
  detail,
  children,
}: {
  title: string;
  body: ReactNode;
  tone?: 'neutral' | 'error';
  /** Small print for staff (error code, link hint). */
  detail?: ReactNode;
  children?: ReactNode;
}) {
  const Icon = tone === 'error' ? AlertIcon : TvIcon;
  return (
    <div className="flex size-full flex-col items-center justify-center gap-[44px] px-[160px] text-center">
      <div className="flex items-center gap-[22px]">
        <LogoMark className="size-[88px]" />
        <LogoWordmark className="text-[64px]" />
      </div>
      <span
        aria-hidden="true"
        className={cn(
          'grid size-[150px] place-items-center rounded-full border-4',
          tone === 'error' ? 'border-danger/60 bg-danger/10 text-danger-soft shadow-glow-danger' : 'border-cyan/50 bg-cyan/10 text-cyan shadow-glow-cyan',
        )}
      >
        <Icon className="size-[72px]" />
      </span>
      <h1 className="max-w-[1400px] font-display text-[84px] leading-[1.05] font-extrabold tracking-[-0.03em]">{title}</h1>
      <div className="max-w-[1300px] text-[38px] leading-snug text-muted">{body}</div>
      {children}
      {detail && <p className="text-[24px] text-subtle">{detail}</p>}
    </div>
  );
}