"use client";

import { useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import type { Game } from "@/lib/types";
import { useProfile } from "@/lib/profile/context";
import { getUiSkin } from "@/lib/uiSkins";
import { ClassicHome } from "./ClassicHome";
import { CabinetShell } from "./CabinetShell";

export function HomeExperience({
  local,
  free,
  all,
  results,
  query,
}: {
  local: Game[];
  free: Game[];
  all: Game[];
  results: Game[] | null;
  query?: string;
}) {
  const { ready, account, profile } = useProfile();
  const router = useRouter();

  useEffect(() => {
    if (!ready || !account) return;
    if (account.needsUiSetup) {
      router.replace("/setup/ui");
    }
  }, [ready, account, router]);

  const skinId =
    account?.preferredUi ?? profile?.settings.preferredUi ?? "classic";
  const skin = getUiSkin(skinId);
  const consoleHome = skin.mode === "console" && !query && !results;

  useEffect(() => {
    if (!ready) return;
    document.documentElement.classList.toggle("cabinet-home-mode", consoleHome);
    document.documentElement.classList.toggle(
      "classic-home-mode",
      !consoleHome,
    );
    return () => {
      document.documentElement.classList.remove("cabinet-home-mode");
      document.documentElement.classList.remove("classic-home-mode");
    };
  }, [ready, consoleHome]);

  if (!ready) {
    return (
      <div className="flex min-h-[60vh] items-center justify-center text-muted">
        Warming up the tube…
      </div>
    );
  }

  if (account?.needsUiSetup) {
    return (
      <div className="flex min-h-[60vh] items-center justify-center text-muted">
        Choosing your cabinet…
      </div>
    );
  }

  if (consoleHome) {
    return (
      <div className="cabinet-home fixed inset-0 z-40 bg-black">
        <div className="cabinet-home-stage absolute inset-0 overflow-hidden">
          <CabinetShell skin={skin} games={all} />
        </div>
        <div className="cabinet-home-dock">
          <p className="cabinet-home-dock-brand">
            <span className="text-amber">CADE</span>
            <span className="opacity-40"> · </span>
            {skin.name}
          </p>
          <div className="flex flex-wrap justify-center gap-2">
            <Link href="/setup/ui" className="btn-ghost border-white/25 py-2 text-white">
              Change UI
            </Link>
            <Link href="/profiles" className="btn-ghost border-white/25 py-2 text-white">
              Profiles
            </Link>
            <Link href="/settings" className="btn-ghost border-white/25 py-2 text-white">
              Settings
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return (
    <ClassicHome
      local={local}
      free={free}
      results={results}
      query={query}
    />
  );
}