'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import { useAppContext } from '@/app/AppContext';
import { Eye } from 'lucide-react';

import CardSelect from '@/components/CardSelect';
import CopyButton from '@/components/CopyButton';
import Notes from '@/components/Notes';
import NotFound from '@/components/NotFound';
import Settings from '@/components/Settings';
import TarokkaGrid from '@/components/TarokkaGrid';

import type { Deck } from '@/types';

export default function GamePage() {
	const { gameData, noGame, handleSettings, select, setGameID } = useAppContext();
	const { gameID } = useParams();

	const [selectCard, setSelectCard] = useState(-1);

	const { dmID, cards, settings } = gameData;
	const isDM = !!dmID;
	const selectDeck: Deck | null = selectCard >= 0 ? cards[selectCard].deck : null;

	useEffect(() => {
		if (gameID) {
			setGameID(Array.isArray(gameID) ? gameID[0] : gameID);
		}
	}, [gameID]);

	return noGame ? (
		<NotFound />
	) : cards ? (
		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
			{isDM && (
				<CopyButton
					copy={`${location.origin}/${gameData.spectatorID}`}
					tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
					Icon={Eye}
					className={`fixed top-3 left-3 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
					size={24}
				/>
			)}

			{isDM && <Settings gameData={gameData} changeAction={handleSettings} />}
			<TarokkaGrid />
			<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
			<CardSelect
				show={selectDeck}
				hand={cards}
				settings={settings}
				closeAction={() => setSelectCard(-1)}
				selectAction={select}
			/>
		</main>
	) : null;
}