"use client";

/**
 * Live wall kiosk controls + reconnect banner (server-26#234). State lives in
 * lib/useKiosk.ts; this file is presentation only.
 */
import { useEffect, useState } from "react";
import type { KioskBanner as Banner, KioskState } from "@/lib/useKiosk";

const btn = "px-2 py-0.5 rounded border border-line text-ink-2 hover:text-ink whitespace-nowrap";

export function KioskControls({ kiosk, state, onToggleKiosk }: {
  kiosk: boolean;
  state: KioskState;
  onToggleKiosk: () => void;
}) {
  return (
    <>
      {state.canFullscreen && (
        <button type="button" onClick={state.toggleFullscreen} aria-pressed={state.fullscreen} className={btn}
          title={state.fullscreen ? "Leave full screen" : "Full screen"}>
          {state.fullscreen ? "Exit full screen" : "Full screen"}
        </button>
      )}
      {kiosk && state.wake === "on" && (
        <span className="text-ink-muted whitespace-nowrap" title="Screen Wake Lock held — this display will not sleep">Awake</span>
      )}
      <button type="button" onClick={onToggleKiosk} aria-pressed={kiosk} className={btn}
        title={kiosk ? "Back to the normal app layout" : "Wall display: no nav bar, large type, screen kept awake"}>
        {kiosk ? "Exit kiosk" : "Kiosk"}
      </button>
    </>
  );
}

export function KioskBanner({ banner, onRetry }: { banner: Banner | null; onRetry: () => void }) {
  const [now, setNow] = useState(() => Date.now());
  useEffect(() => {
    if (!banner?.retryAt) return;
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, [banner?.retryAt]);
  if (!banner) return null;
  const secs = banner.retryAt ? Math.max(0, Math.ceil((banner.retryAt - now) / 1000)) : null;
  return (
    <div role="alert" className="shrink-0 flex items-center gap-3 px-3 py-1.5 border-b border-line bg-raised text-xs text-ink">
      <span className="font-semibold">{banner.tone === "offline" ? "Offline" : "Reconnecting"}</span>
      <span className="text-ink-2">{banner.message}{secs != null ? ` Retrying in ${secs}s.` : ""}</span>
      {banner.tone === "error" && (
        <button type="button" onClick={onRetry} className={`${btn} ml-auto`}>Retry now</button>
      )}
    </div>
  );
}