EpicNext-Cms/src/app/client/client-view.tsx

"use client";

import { LogOut } from "lucide-react";
import Link from "next/link";
import { signOut } from "next-auth/react";
import {
	type ReactNode,
	useCallback,
	useEffect,
	useState,
} from "react";
import { createPortal } from "react-dom";

function ToolbarBtn({
	onClick,
	title,
	children,
	href,
}: {
	onClick?: () => void;
	title: string;
	children: ReactNode;
	href?: string;
}) {
	const cls =
		"w-7 h-7 sm:w-8 sm:h-8 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
	const style = {
		borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
		background:
			"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
		color:
			"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
	} as const;
	if (href) {
		return (
			<Link href={href} className={cls} style={style} title={title}>
				{children}
			</Link>
		);
	}
	return (
		<button
			onClick={onClick}
			className={cls}
			style={style}
			title={title}
			type="button"
		>
			{children}
		</button>
	);
}

export function ClientView({
	ticket,
	clientUrl,
	hotelName,
	initialOnline,
}: {
	ticket: string;
	clientUrl: string;
	hotelName: string;
	initialOnline: number;
}) {
	const [_isFullscreen, setIsFullscreen] = useState(false);
	const [onlineCount, setOnlineCount] = useState(initialOnline);

	useEffect(() => {
		const interval = setInterval(async () => {
			try {
				const res = await fetch("/api/online/count");
				if (res.ok) setOnlineCount((await res.json()).count ?? 0);
			} catch {}
		}, 15000);
		return () => clearInterval(interval);
	}, []);

	const toggleFullscreen = useCallback(() => {
		if (!document.fullscreenElement) {
			document.documentElement.requestFullscreen().catch(() => {});
			setIsFullscreen(true);
		} else {
			document.exitFullscreen().catch(() => {});
			setIsFullscreen(false);
		}
	}, []);

	useEffect(() => {
		function onChange() {
			setIsFullscreen(!!document.fullscreenElement);
		}
		document.addEventListener("fullscreenchange", onChange);
		return () => document.removeEventListener("fullscreenchange", onChange);
	}, []);

	const base = clientUrl.replace(/(\?|&)sso=[^&]*/, "");
	const sep = base.includes("?") ? "&" : "?";
	const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;

	const [mounted, setMounted] = useState(false);
	useEffect(() => { setMounted(true); }, []);

	const toolbar = (
		<div className="fixed top-2 sm:top-4 right-2 sm:right-4 z-[9999] flex items-center gap-1 sm:gap-2">
			<ToolbarBtn href="/" title="Home">
				<svg
					width="14"
					height="14"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
					role="img"
					aria-label="Home"
				>
					<title>Home</title>
					<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
					<polyline points="9 22 9 12 15 12 15 22" />
				</svg>
			</ToolbarBtn>
			<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
				<svg
					width="14"
					height="14"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
					role="img"
					aria-label="Reload"
				>
					<title>Reload</title>
					<polyline points="23 4 23 10 17 10" />
					<polyline points="1 20 1 14 7 14" />
					<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
				</svg>
			</ToolbarBtn>
			<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
				<svg
					width="14"
					height="14"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
					role="img"
					aria-label="Fullscreen"
				>
					<title>Fullscreen</title>
					<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
				</svg>
			</ToolbarBtn>
			<div
				className="h-7 sm:h-8 px-1.5 sm:px-2 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
				style={{
					borderColor:
						"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
					background:
						"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
					color:
						"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
				}}
				title="Online users"
			>
				<svg
					width="14"
					height="14"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
					role="img"
					aria-label="Online users"
				>
					<title>Online users</title>
					<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
					<circle cx="12" cy="7" r="4" />
				</svg>
				<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
			</div>
			<ToolbarBtn
				onClick={() => signOut({ callbackUrl: "/" })}
				title="Logout"
			>
				<LogOut size={14} />
			</ToolbarBtn>
		</div>
	);

	return (
		<div
			className="relative w-screen h-screen overflow-hidden"
			style={{ backgroundColor: "var(--color-background)" }}
		>
			{mounted && createPortal(toolbar, document.body)}

			<iframe
				id="nitro"
				src={clientSrc}
				className="absolute inset-0 w-full h-full border-0 m-0 p-0 overflow-hidden"
				title={hotelName}
				allow="autoplay; gamepad"
			/>
		</div>
	);
}