"use client";

import { useCallback, useEffect, useState } from "react";
import MenuBoardPreviewSurface from "@/components/business/menu-boards/MenuBoardPreviewSurface";
import type { MenuBoard } from "@/components/business/menu-boards/types";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

const REFRESH_INTERVAL_MS = 15_000;

export default function MenuBoardDisplay({ token }: { token: string }) {
  const t = useMenuBoardText();
  const [board, setBoard] = useState<MenuBoard | null>(null);
  const [error, setError] = useState(false);

  const load = useCallback(async () => {
    try {
      const response = await fetch(`/api/menu-boards/display/${token}`, { cache: "no-store" });
      if (!response.ok) throw new Error("Display unavailable");
      const nextBoard = await response.json() as MenuBoard;
      setBoard(nextBoard);
      setError(false);
    } catch {
      setError(true);
    }
  }, [token]);

  useEffect(() => {
    const initialLoad = window.setTimeout(() => void load(), 0);
    const interval = window.setInterval(() => {
      if (document.visibilityState === "visible") void load();
    }, REFRESH_INTERVAL_MS);
    const refreshOnFocus = () => void load();
    window.addEventListener("focus", refreshOnFocus);
    return () => {
      window.clearInterval(interval);
      window.clearTimeout(initialLoad);
      window.removeEventListener("focus", refreshOnFocus);
    };
  }, [load]);

  if (error) return <main className="grid min-h-dvh place-items-center bg-zinc-950 p-6 text-center text-white"><p>{t("previewUnavailable")}</p></main>;
  if (!board) return <main className="grid min-h-dvh place-items-center bg-zinc-950 text-zinc-400">{t("loadingMenu")}</main>;

  const landscape = board.orientation === "LANDSCAPE";
  const canvasStyle = landscape
    ? { width: "min(100vw, calc(100dvh * 16 / 9))", aspectRatio: "16 / 9" }
    : { width: "min(100vw, calc(100dvh * 9 / 16))", aspectRatio: "9 / 16" };
  return (
    <main className="grid h-dvh w-screen place-items-center overflow-hidden bg-black">
      <div className="shrink-0" style={canvasStyle}>
        <MenuBoardPreviewSurface board={board} large fixedRatio showFormatBadge={false} />
      </div>
    </main>
  );
}