"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { ContentCard, SkeletonCard } from "@/components/public/ui";

export default function ClientPage() {
  const t = useTranslations("pages.client");
  const [ticket, setTicket] = useState<string | null>(null);
  const [clientUrl, setClientUrl] = useState("/nitro-client/");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [errorType, setErrorType] = useState<"auth" | "generic" | null>(null);
  const [hotelName, setHotelName] = useState("");
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [onlineCount, setOnlineCount] = useState(0);
  const fetchedRef = useRef(false);

  useEffect(() => {
    if (fetchedRef.current) return;
    fetchedRef.current = true;

    async function fetchTicket() {
      try {
        const res = await fetch("/api/client/sso");
        if (res.status === 401) {
          setErrorType("auth");
          setError(t("errors.unauthorized"));
          return;
        }
        if (!res.ok) throw new Error("SSO fetch failed");
        const data = await res.json();
        setTicket(data.ticket);
        setHotelName(data.hotelName);
        if (data.clientUrl) setClientUrl(data.clientUrl);
      } catch {
        setErrorType("generic");
        setError(t("errors.generic"));
      } finally {
        setLoading(false);
      }
    }
    fetchTicket();
  }, [t]);

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

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

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

  const getClientSrc = useCallback(() => {
    if (!ticket) return "";
    const sep = clientUrl.includes("?") ? "&" : "?";
    return `${clientUrl}${sep}sso=${encodeURIComponent(ticket)}`;
  }, [clientUrl, ticket]);

  if (loading) {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center" style={{ backgroundColor: "var(--color-background)", padding: "2rem" }}>
        <SkeletonCard lines={2} />
      </div>
    );
  }

  if (errorType === "auth") {
    return (
      <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
        <header
          className="flex h-14 items-center border-b px-4"
          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
        >
          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
        </header>
        <main className="flex-1 flex items-center justify-center">
          <ContentCard icon="🔒" title={t("title")} subtitle={t("errors.unauthorized")}>
            <div style={{ textAlign: "center", marginTop: "1rem" }}>
              <Link href="/login" className="btn btn-primary">
                {t("errors.loginRedirect")}
              </Link>
            </div>
          </ContentCard>
        </main>
      </div>
    );
  }

  if (errorType === "generic" || !ticket) {
    return (
      <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
        <header
          className="flex h-14 items-center border-b px-4"
          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
        >
          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
        </header>
        <main className="flex-1 flex items-center justify-center">
          <p className="text-center" style={{ color: "var(--color-text-muted)" }}>
            {error ?? t("errors.generic")}
          </p>
        </main>
      </div>
    );
  }

  const clientSrc = getClientSrc();

  return (
    <div className="relative w-screen h-screen overflow-hidden site-bg" style={{ backgroundColor: "var(--color-background)" }}>
      {/* Floating Toolbar */}
      <div className="fixed top-4 left-4 z-50 flex items-center gap-2">
        {/* Home Button */}
        <Link
          href="/"
          className="w-10 h-10 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"
          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, #1a1a2e)",
          }}
          title="Home"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <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>
        </Link>

        {/* Reload Button */}
        <button
          onClick={() => window.location.reload()}
          className="w-10 h-10 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"
          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, #1a1a2e)",
          }}
          title="Herladen"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <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>
        </button>

        {/* Fullscreen Button */}
        <button
          onClick={toggleFullscreen}
          className="w-10 h-10 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"
          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, #1a1a2e)",
          }}
          title="Fullscreen"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <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>
        </button>

        {/* Online Count Button */}
        <div
          className="h-10 px-3 rounded-lg border-2 flex items-center justify-center gap-1.5 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, #1a1a2e)",
          }}
          title="Online gebruikers"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <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-xs font-bold">{onlineCount}</span>
        </div>
      </div>

      {/* Game Iframe */}
      <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; fullscreen; gamepad"
      />
    </div>
  );
}