ttvfx/components/set/MarkerPicker.tsx

"use client";

import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { Kind, MarkerExtra, MarkerScreen } from "@/lib/markers";

type Mode = "full" | "edge";
type Showing = { src: string; label: string; detail: string; screen?: MarkerScreen; extra?: MarkerExtra };

const KIND_LABEL: Record<Kind, string> = { phone: "Phones", tablet: "Tablets", laptop: "Laptops", monitor: "Monitors" };
const MODE_KEY = "ttvfx-set-mode";

function detectScreen() {
  const dpr = window.devicePixelRatio || 1;
  let w = Math.round(window.screen.width * dpr);
  let h = Math.round(window.screen.height * dpr);
  const landscape = window.matchMedia("(orientation: landscape)").matches;
  // iOS reports screen size in portrait regardless of rotation
  if (landscape !== w > h) [w, h] = [h, w];
  return { w, h, landscape };
}

function bestMatch(screens: MarkerScreen[], w: number, h: number) {
  const pool = screens.filter((s) => s.width > s.height === w > h);
  const candidates = pool.length ? pool : screens;
  let best: { s: MarkerScreen; score: number } | null = null;
  for (const s of candidates) {
    const aspect = Math.abs(s.width / s.height - w / h);
    const size = Math.abs(s.width * s.height - w * h) / (s.width * s.height);
    const score = aspect * 10 + size;
    if (!best || score < best.score) best = { s, score };
  }
  if (!best) return null;
  const exact = Math.abs(best.s.width - w) <= 2 && Math.abs(best.s.height - h) <= 2;
  return { screen: best.s, exact };
}

function srcFor(s: MarkerScreen, mode: Mode) {
  return (mode === "edge" ? s.edge : s.full) ?? s.full ?? s.edge ?? "";
}

function Shape({ w, h, active }: { w: number; h: number; active?: boolean }) {
  const scale = 34 / Math.max(w, h);
  return (
    <span className="flex h-10 w-10 shrink-0 items-center justify-center">
      <span
        className={`block rounded-[3px] border-2 ${active ? "border-accent bg-accent/20" : "border-white/60"}`}
        style={{ width: Math.max(10, w * scale), height: Math.max(10, h * scale) }}
      />
    </span>
  );
}

// --- Browser-owned state, read via useSyncExternalStore -------------------
// The URL hash says which marker is open (#<screen-id>/<full|edge> or #<extra-id>),
// so share links, refresh and the back button all behave the same way.
const HASH_EVENT = "ttvfx-set-hash";
const MODE_EVENT = "ttvfx-set-mode";

function subscribe(events: string[]) {
  return (cb: () => void) => {
    events.forEach((e) => window.addEventListener(e, cb));
    return () => events.forEach((e) => window.removeEventListener(e, cb));
  };
}
const subscribeHash = subscribe(["popstate", "hashchange", HASH_EVENT]);
const subscribeMode = subscribe(["storage", MODE_EVENT]);
const subscribeScreen = subscribe(["resize", "orientationchange"]);

function setHash(hash: string, push: boolean) {
  history[push ? "pushState" : "replaceState"]({ marker: Boolean(hash) }, "", hash || location.pathname);
  window.dispatchEvent(new Event(HASH_EVENT));
}

function readMode(): Mode {
  try {
    return localStorage.getItem(MODE_KEY) === "edge" ? "edge" : "full";
  } catch {
    return "full";
  }
}
function writeMode(m: Mode) {
  try {
    localStorage.setItem(MODE_KEY, m);
  } catch {}
  window.dispatchEvent(new Event(MODE_EVENT));
}

function screenKey() {
  const { w, h } = detectScreen();
  return w > 0 && h > 0 ? `${w}x${h}` : ""; // some browsers report 0×0 while hidden
}

function iosNeedsTip() {
  const ios = /iPhone|iPod/.test(navigator.userAgent);
  const standalone = window.matchMedia("(display-mode: standalone), (display-mode: fullscreen)").matches;
  return ios && !standalone;
}

function requestFullscreen() {
  if (document.fullscreenEnabled && !document.fullscreenElement) {
    document.documentElement.requestFullscreen?.().catch(() => {});
  }
}

export default function MarkerPicker({ screens, extras }: { screens: MarkerScreen[]; extras: MarkerExtra[] }) {
  const hash = useSyncExternalStore(subscribeHash, () => location.hash, () => "");
  const mode = useSyncExternalStore(subscribeMode, readMode, () => "full" as Mode);
  const key = useSyncExternalStore(subscribeScreen, screenKey, () => "");
  const iosTip = useSyncExternalStore(() => () => {}, iosNeedsTip, () => false);
  const [offline, setOffline] = useState<"idle" | "saving" | "ready">("idle");

  const device = useMemo(() => {
    if (!key) return null;
    const [w, h] = key.split("x").map(Number);
    return { w, h };
  }, [key]);
  const match = useMemo(() => (device ? bestMatch(screens, device.w, device.h) : null), [device, screens]);

  // What the viewer shows, derived from the hash
  const showing = useMemo<(Showing & { mode: Mode }) | null>(() => {
    const [id, m] = hash.slice(1).split("/");
    if (!id) return null;
    const viewMode: Mode = m === "edge" ? "edge" : "full";
    const s = screens.find((x) => x.id === id);
    if (s)
      return {
        src: srcFor(s, viewMode),
        label: s.name,
        detail: `${s.width}×${s.height}${s.landscape ? " · landscape" : ""}`,
        screen: s,
        mode: viewMode,
      };
    const e = extras.find((x) => x.id === id);
    return e ? { src: e.src, label: e.name, detail: "", extra: e, mode: viewMode } : null;
  }, [hash, screens, extras]);

  // Leave browser full screen whenever the viewer closes (incl. back button)
  useEffect(() => {
    if (!showing && document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
  }, [showing]);

  // Offline: register the service worker, then warm its cache with every marker
  useEffect(() => {
    if (process.env.NODE_ENV !== "production" || !("serviceWorker" in navigator)) return;
    navigator.serviceWorker
      .register("/set/sw.js", { scope: "/set/" })
      .then(async () => {
        setOffline("saving");
        const urls = [...screens.flatMap((s) => [s.full, s.edge]), ...extras.map((e) => e.src)].filter(Boolean) as string[];
        await Promise.all(urls.map((u) => fetch(u).catch(() => null)));
        setOffline("ready");
      })
      .catch(() => {});
  }, [screens, extras]);

  const showScreen = (s: MarkerScreen) => {
    setHash(`#${s.id}/${mode}`, true);
    requestFullscreen();
  };
  const showExtra = (e: MarkerExtra) => {
    setHash(`#${e.id}`, true);
    requestFullscreen();
  };
  const close = useCallback(() => {
    if (history.state?.marker) history.back();
    else setHash("", false);
  }, []);
  const switchMode = useCallback(
    (m: Mode) => {
      writeMode(m);
      if (showing?.screen) setHash(`#${showing.screen.id}/${m}`, false);
    },
    [showing],
  );
  const chooseMode = writeMode;

  const grouped = useMemo(() => {
    const out = new Map<Kind, MarkerScreen[]>();
    for (const s of screens) out.set(s.kind, [...(out.get(s.kind) ?? []), s]);
    return [...out.entries()];
  }, [screens]);

  return (
    <div className="mx-auto max-w-2xl px-4 pt-6 pb-24">
      <header className="flex items-start justify-between gap-4">
        <div>
          <p className="font-mono text-[11px] tracking-[0.25em] text-accent uppercase">Two Tales VFX · On set</p>
          <h1 className="mt-1 font-display text-3xl font-light tracking-wide uppercase">Screen markers</h1>
        </div>
        <p className="pt-1 text-right font-mono text-[11px] leading-relaxed text-muted">
          {offline === "ready" ? "✓ Works offline" : offline === "saving" ? "Saving for offline…" : ""}
        </p>
      </header>

      {/* Marker style */}
      <div className="mt-6 grid grid-cols-2 gap-2 rounded-xl bg-white/5 p-1.5" role="radiogroup" aria-label="Marker style">
        {(
          [
            ["full", "Full grid", "Dots across the whole screen"],
            ["edge", "Edges only", "Clear centre for actors' hands"],
          ] as const
        ).map(([m, label, hint]) => (
          <button
            key={m}
            type="button"
            role="radio"
            aria-checked={mode === m}
            onClick={() => chooseMode(m)}
            className={`min-h-16 rounded-lg px-3 py-2.5 text-left transition-colors ${
              mode === m ? "bg-fg text-ink" : "text-fg hover:bg-white/5"
            }`}
          >
            <span className="block text-base font-medium">{label}</span>
            <span className={`block text-xs ${mode === m ? "text-ink/70" : "text-muted"}`}>{hint}</span>
          </button>
        ))}
      </div>

      {/* This screen */}
      {match && device && (
        <section className="mt-6">
          <h2 className="mb-2 font-mono text-[11px] tracking-[0.25em] text-muted uppercase">This screen</h2>
          <button
            type="button"
            onClick={() => showScreen(match.screen)}
            className="flex min-h-24 w-full items-center gap-4 rounded-xl border-2 border-accent bg-accent/10 px-4 py-4 text-left active:bg-accent/25"
          >
            <Shape w={match.screen.width} h={match.screen.height} active />
            <span className="min-w-0 flex-1">
              <span className="block text-xl font-medium">{match.screen.name}</span>
              <span className="block font-mono text-xs text-muted">
                {match.screen.width}×{match.screen.height}
                {match.screen.landscape ? " · landscape" : ""} ·{" "}
                {match.exact ? "exact match" : `closest to ${device.w}×${device.h}`}
              </span>
            </span>
            <span className="shrink-0 rounded-lg bg-accent px-4 py-3 text-sm font-semibold text-ink">Show</span>
          </button>
        </section>
      )}

      {iosTip && (
        <p className="mt-4 rounded-lg bg-white/5 px-4 py-3 text-sm leading-relaxed text-muted">
          <span className="text-fg">iPhone tip:</span> Safari can&apos;t hide its bars. For true full screen tap{" "}
          <span className="text-fg">Share → Add to Home Screen</span> once, then open “Markers” from the home screen.
        </p>
      )}

      {/* All screens */}
      {grouped.map(([kind, list]) => (
        <section key={kind} className="mt-8">
          <h2 className="mb-2 font-mono text-[11px] tracking-[0.25em] text-muted uppercase">{KIND_LABEL[kind]}</h2>
          <ul className="divide-y divide-white/10 overflow-hidden rounded-xl bg-white/[0.04]">
            {list.map((s) => {
              const isMatch = match?.screen.id === s.id;
              return (
                <li key={s.id}>
                  <button
                    type="button"
                    onClick={() => showScreen(s)}
                    className="flex min-h-16 w-full items-center gap-4 px-4 py-3 text-left active:bg-white/10"
                  >
                    <Shape w={s.width} h={s.height} active={isMatch} />
                    <span className="min-w-0 flex-1">
                      <span className="block text-base">{s.name}</span>
                      <span className="block font-mono text-xs text-muted">
                        {s.width}×{s.height}
                        {s.landscape ? " · landscape" : " · portrait"}
                      </span>
                    </span>
                    {isMatch && <span className="font-mono text-[10px] tracking-widest text-accent uppercase">This</span>}
                    <span className="text-xl text-muted" aria-hidden="true">
                      ›
                    </span>
                  </button>
                </li>
              );
            })}
          </ul>
        </section>
      ))}

      {extras.length > 0 && (
        <section className="mt-8">
          <h2 className="mb-2 font-mono text-[11px] tracking-[0.25em] text-muted uppercase">Other</h2>
          <ul className="divide-y divide-white/10 overflow-hidden rounded-xl bg-white/[0.04]">
            {extras.map((e) => (
              <li key={e.id}>
                <button
                  type="button"
                  onClick={() => showExtra(e)}
                  className="flex min-h-16 w-full items-center gap-4 px-4 py-3 text-left active:bg-white/10"
                >
                  <span className="flex h-10 w-10 shrink-0 items-center justify-center">
                    <span className="block h-7 w-7 rounded-[3px] bg-[#808080]" />
                  </span>
                  <span className="flex-1 text-base">{e.name}</span>
                  <span className="text-xl text-muted" aria-hidden="true">
                    ›
                  </span>
                </button>
              </li>
            ))}
          </ul>
        </section>
      )}

      <p className="mt-10 text-center text-xs leading-relaxed text-muted">
        Tap the image for controls · Back or Esc to close · Screen stays awake while showing
      </p>

      {showing && (
        <Viewer showing={showing} mode={showing.mode} onMode={switchMode} onClose={close} />
      )}
    </div>
  );
}

function Viewer({
  showing,
  mode,
  onMode,
  onClose,
}: {
  showing: Showing;
  mode: Mode;
  onMode: (m: Mode) => void;
  onClose: () => void;
}) {
  const [controls, setControls] = useState(false);
  const [fullscreen, setFullscreen] = useState(false);
  const hideTimer = useRef<number | undefined>(undefined);
  // Stretch to fill when the image's shape is close to the visible area (markers sit on
  // the real screen edges); otherwise fit it whole so the dots stay round.
  const viewport = useSyncExternalStore(subscribeScreen, () => `${innerWidth}x${innerHeight}`, () => "1x1");
  const fit = useMemo(() => {
    if (!showing.screen) return "object-cover";
    const [vw, vh] = viewport.split("x").map(Number);
    const ratio = showing.screen.width / showing.screen.height / (vw / vh);
    return Math.abs(ratio - 1) <= 0.15 ? "object-fill" : "object-contain";
  }, [showing.screen, viewport]);
  const canFullscreen = typeof document !== "undefined" && document.fullscreenEnabled;

  // Keep the screen awake while a marker is up
  useEffect(() => {
    let lock: WakeLockSentinel | null = null;
    const acquire = async () => {
      try {
        lock = (await navigator.wakeLock?.request("screen")) ?? null;
      } catch {}
    };
    const onVisible = () => document.visibilityState === "visible" && acquire();
    acquire();
    document.addEventListener("visibilitychange", onVisible);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("visibilitychange", onVisible);
      document.body.style.overflow = "";
      lock?.release().catch(() => {});
    };
  }, []);

  useEffect(() => {
    const onFs = () => setFullscreen(Boolean(document.fullscreenElement));
    onFs();
    document.addEventListener("fullscreenchange", onFs);
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape" && !document.fullscreenElement) onClose();
      if (e.key === "f") onMode("full");
      if (e.key === "e") onMode("edge");
      if (e.key === " ") setControls((v) => !v);
    };
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("fullscreenchange", onFs);
      document.removeEventListener("keydown", onKey);
    };
  }, [onClose, onMode]);

  const poke = () => {
    window.clearTimeout(hideTimer.current);
    setControls((v) => {
      if (!v) hideTimer.current = window.setTimeout(() => setControls(false), 4000);
      return !v;
    });
  };

  return (
    <div
      className={`fixed inset-0 z-[100] bg-black ${controls ? "" : "cursor-none"}`}
      onClick={() => {
        if (canFullscreen && !document.fullscreenElement) document.documentElement.requestFullscreen?.().catch(() => {});
        poke();
      }}
    >
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={showing.src} alt={showing.label} className={`h-full w-full select-none ${fit}`} draggable={false} />

      {canFullscreen && !fullscreen && !controls && (
        <p className="pointer-events-none absolute inset-x-0 bottom-6 text-center font-mono text-xs text-white/70">
          Tap for full screen
        </p>
      )}

      {controls && (
        <div
          className="absolute inset-x-0 top-0 flex flex-wrap items-center gap-2 bg-black/85 px-3 pt-[max(0.75rem,env(safe-area-inset-top))] pb-3"
          onClick={(e) => e.stopPropagation()}
        >
          <button
            type="button"
            onClick={onClose}
            className="min-h-12 rounded-lg bg-white/10 px-4 text-sm font-medium text-fg active:bg-white/20"
          >
            ✕ Close
          </button>
          {showing.screen && (
            <div className="flex rounded-lg bg-white/10 p-1">
              {(["full", "edge"] as const).map((m) => (
                <button
                  key={m}
                  type="button"
                  onClick={() => onMode(m)}
                  className={`min-h-10 rounded-md px-3 text-sm ${mode === m ? "bg-fg text-ink" : "text-fg"}`}
                >
                  {m === "full" ? "Full grid" : "Edges"}
                </button>
              ))}
            </div>
          )}
          <span className="min-w-0 flex-1 truncate px-1 text-right font-mono text-xs text-white/70">
            {showing.label} {showing.detail && `· ${showing.detail}`}
          </span>
          <a
            href={showing.src}
            download
            className="flex min-h-12 items-center rounded-lg bg-white/10 px-4 text-sm text-fg active:bg-white/20"
          >
            Save
          </a>
        </div>
      )}
    </div>
  );
}