'use client';

import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { STAGE_HEIGHT, STAGE_WIDTH, fitStage, type StageFit } from '@/lib/tv/stage';
import { TvBackdrop } from './TvBackdrop';

const CURSOR_IDLE_MS = 2500;

/** Hide the mouse pointer after a short idle, so a TV left with a mouse attached shows no cursor. */
function useIdleCursor(idleMs: number): boolean {
  const [idle, setIdle] = useState(false);
  useEffect(() => {
    let timer: ReturnType<typeof setTimeout> | null = null;
    const wake = () => {
      setIdle(false);
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => setIdle(true), idleMs);
    };
    wake();
    window.addEventListener('pointermove', wake, { passive: true });
    window.addEventListener('pointerdown', wake, { passive: true });
    window.addEventListener('keydown', wake);
    return () => {
      if (timer) clearTimeout(timer);
      window.removeEventListener('pointermove', wake);
      window.removeEventListener('pointerdown', wake);
      window.removeEventListener('keydown', wake);
    };
  }, [idleMs]);
  return idle;
}

/**
 * Fixed 1920×1080 canvas scaled to fit the viewport (letterboxed), full-bleed night background, no
 * scrollbars. Children lay out in stage pixels. Owns the page's <main> landmark.
 */
export function TvStage({ children, label }: { children: ReactNode; label: string }) {
  const viewportRef = useRef<HTMLElement>(null);
  const [fit, setFit] = useState<StageFit | null>(null);
  const idle = useIdleCursor(CURSOR_IDLE_MS);

  // Layout effect: measure before the first paint so the canvas never flashes at the wrong size.
  useLayoutEffect(() => {
    const el = viewportRef.current;
    if (!el) return;
    const measure = () => setFit(fitStage(el.clientWidth, el.clientHeight));
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(el);
    window.addEventListener('orientationchange', measure);
    return () => {
      observer.disconnect();
      window.removeEventListener('orientationchange', measure);
    };
  }, []);

  return (
    <main
      id="main"
      ref={viewportRef}
      tabIndex={-1}
      aria-label={label}
      className={cn('fixed inset-0 overflow-hidden bg-night text-fg outline-none select-none', idle && 'cursor-none')}
    >
      <div
        className="absolute top-0 left-0 origin-top-left overflow-hidden bg-night"
        style={{
          width: STAGE_WIDTH,
          height: STAGE_HEIGHT,
          transform: fit ? `translate(${fit.offsetX}px, ${fit.offsetY}px) scale(${fit.scale})` : undefined,
          visibility: fit ? 'visible' : 'hidden',
        }}
      >
        <TvBackdrop />
        <div className="relative isolate size-full">{children}</div>
      </div>
    </main>
  );
}