"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Board from "@/components/Board";
import {
	BoardState,
	GameEntry,
	ParsedMessage,
	PlayerEntry,
	ScoreEntry,
	cmd,
	createEmptyBoard,
	placeToken,
	replayMoves,
} from "@/lib/protocol";
import { useConnection } from "@/lib/connection";

interface LiveGame {
	id: number;
	player1: string;
	player2: string;
	board: BoardState;
	lastMove: { column: number; row: number } | null;
	currentTurnColor: 1 | 2;
	result:
		| { kind: "win"; winner: string }
		| { kind: "draw" }
		| { kind: "terminated" }
		| null;
}

export default function SpectatePage() {
	const router = useRouter();
	const {
		role,
		status,
		send,
		subscribe,
		disconnect,
		shouldRedirectToConnect,
		clearRedirectFlag,
	} = useConnection();

	const [tournamentActive, setTournamentActive] = useState(false);
	const [tournamentType, setTournamentType] = useState<string | null>(null);
	const [scores, setScores] = useState<ScoreEntry[]>([]);
	const [players, setPlayers] = useState<PlayerEntry[]>([]);
	const [gameList, setGameList] = useState<GameEntry[]>([]);
	const [liveGames, setLiveGames] = useState<Map<number, LiveGame>>(new Map());
	const [selectedGame, setSelectedGame] = useState<number | null>(null);
	const [log, setLog] = useState<string[]>([]);

	const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
	const liveGamesRef = useRef<Map<number, LiveGame>>(new Map());

	const addLog = useCallback(
		(msg: string) =>
			setLog((prev) => [
				`[${new Date().toLocaleTimeString()}] ${msg}`,
				...prev.slice(0, 79),
			]),
		[],
	);

	const updateGame = useCallback((id: number, patch: Partial<LiveGame>) => {
		setLiveGames((prev) => {
			const next = new Map(prev);
			const existing = next.get(id) ?? {
				id,
				player1: "",
				player2: "",
				board: createEmptyBoard(),
				lastMove: null,
				currentTurnColor: 1 as const,
				result: null,
			};
			next.set(id, { ...existing, ...patch });
			liveGamesRef.current = next;
			return next;
		});
	}, []);

	useEffect(() => {
        if (status === "disconnected" && shouldRedirectToConnect) {
			clearRedirectFlag();
			router.replace("/");
		} else if (status === "idle") {
			router.replace("/");
        }

		if (role !== "observer" && status !== "idle") {
			router.replace("/play");
			return;
		}
	}, [role, status, shouldRedirectToConnect, clearRedirectFlag, router]);

	useEffect(() => {
		const unsubscribe = subscribe((msg: ParsedMessage) => {
			switch (msg.type) {
				case "TOURNAMENT_START":
					setTournamentActive(true);
					setTournamentType(msg.tournamentType);
					setScores([]);
					addLog(`🏆 Tournament started: ${msg.tournamentType}`);
					send(cmd.gameList());
					send(cmd.playerList());
					break;

				case "TOURNAMENT_CANCEL":
					setTournamentActive(false);
					setTournamentType(null);
					addLog("❌ Tournament cancelled");
					break;

				case "TOURNAMENT_SCORES":
					setScores(msg.scores);
					break;

				case "TOURNAMENT_END":
					addLog("Round ended");
					send(cmd.gameList());
					send(cmd.playerList());
					break;

				case "GAME_LIST":
					setGameList(msg.games);
					for (const g of msg.games) {
						if (!liveGamesRef.current.has(g.id)) {
							send(cmd.gameWatch(g.id));
						}
					}
					break;

				case "GAME_WATCH_ACK": {
					const { board, lastMove } = replayMoves(msg.moves, msg.player1);
					const moveCount = msg.moves.length;
					updateGame(msg.matchId, {
						player1: msg.player1,
						player2: msg.player2,
						board,
						lastMove,
						currentTurnColor: (moveCount % 2 === 0 ? 1 : 2) as 1 | 2,
						result: null,
					});
					break;
				}

				case "GAME_MOVE": {
					const gamesSnapshot = liveGamesRef.current;
					for (const [id, game] of gamesSnapshot) {
						if (
							game.player1 === msg.username ||
							game.player2 === msg.username
						) {
							const color: 1 | 2 = msg.username === game.player1 ? 1 : 2;
							const { board: next, row } = placeToken(
								game.board,
								color,
								msg.column,
							);
							updateGame(id, {
								board: next,
								lastMove: { column: msg.column, row },
								currentTurnColor: (color === 1 ? 2 : 1) as 1 | 2,
							});
							break;
						}
					}
					break;
				}

				case "GAME_WIN": {
					const gamesSnapshot = liveGamesRef.current;
					for (const [id, game] of gamesSnapshot) {
						if (game.player1 === msg.winner || game.player2 === msg.winner) {
							updateGame(id, { result: { kind: "win", winner: msg.winner } });
							break;
						}
					}
					setTimeout(() => {
						send(cmd.gameList());
						send(cmd.playerList());
					}, 750);
					break;
				}

				case "GAME_DRAW":
					if (selectedGame !== null) {
						updateGame(selectedGame, { result: { kind: "draw" } });
					}
					break;

				case "GAME_TERMINATED":
					if (selectedGame !== null) {
						updateGame(selectedGame, { result: { kind: "terminated" } });
					}
					send(cmd.gameList());
					break;

				case "PLAYER_LIST":
					setPlayers(msg.players);
					break;

				case "GET_DATA":
					if (
						msg.key === "TOURNAMENT_STATUS" &&
						msg.value &&
						msg.value !== "false"
					) {
						setTournamentActive(true);
						setTournamentType(msg.value);
					}
					break;

				case "ERROR":
					addLog(`Error: ${msg.message}`);
					break;

				default:
					break;
			}
		});

		return unsubscribe;
	}, [addLog, selectedGame, send, subscribe, updateGame]);

	useEffect(() => {
		if (status !== "connected" || role !== "observer") {
			if (pollRef.current) {
				clearInterval(pollRef.current);
				pollRef.current = null;
			}
			return;
		}

		send(cmd.getData("TOURNAMENT_STATUS"));
		send(cmd.gameList());
		send(cmd.playerList());

		pollRef.current = setInterval(() => {
			send(cmd.gameList());
			send(cmd.playerList());
		}, 5000);

		return () => {
			if (pollRef.current) clearInterval(pollRef.current);
		};
	}, [role, send, status]);

	const selectedGameData =
		selectedGame !== null ? liveGames.get(selectedGame) : null;

	return (
		<div className="flex flex-col gap-6">
			<div className="flex items-center justify-between">
				<div>
					<h1 className="text-2xl font-bold text-white">
						👁 Observer Dashboard
					</h1>
					<p className="text-gray-400 text-sm mt-1">
						Unified spectate and tournament view
					</p>
				</div>
				<button
					onClick={disconnect}
					className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white text-sm font-medium rounded-lg transition-colors"
				>
					Disconnect
				</button>
			</div>

			{status !== "connected" && (
				<div className="rounded-lg border border-yellow-700 bg-yellow-950/30 px-4 py-3 text-sm text-yellow-200">
					Waiting for observer connection...
				</div>
			)}

			{status === "connected" && (
				<div
					className={`rounded-xl p-4 border flex items-center gap-4 ${
						tournamentActive
							? "bg-purple-950/40 border-purple-600"
							: "bg-gray-900 border-gray-700"
					}`}
				>
					<div className="text-3xl">{tournamentActive ? "🏆" : "⏳"}</div>
					<div>
						<div className="font-semibold text-white">
							{tournamentActive
								? `Tournament Active - ${tournamentType ?? "Unknown Type"}`
								: "No Active Tournament"}
						</div>
						<div className="text-sm text-gray-400">
							{gameList.length} match{gameList.length !== 1 ? "es" : ""} running
							· {players.filter((p) => p.inMatch).length}/{players.length}{" "}
							players in game
						</div>
					</div>
				</div>
			)}

			<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
				<div className="flex flex-col gap-4">
					<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
						<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
							Leaderboard
						</h2>
						{scores.length === 0 ? (
							<p className="text-gray-500 text-sm text-center py-4">
								No scores yet
							</p>
						) : (
							<div className="flex flex-col gap-1.5">
								{scores.map((s, i) => (
									<div
										key={s.player}
										className="flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800"
									>
										<span className="text-sm font-bold w-6 text-gray-300">
											{i + 1}.
										</span>
										<span className="text-white flex-1 font-medium text-sm">
											{s.player}
										</span>
										<span className="text-blue-400 font-bold">{s.score}</span>
									</div>
								))}
							</div>
						)}
					</div>

					<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
						<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3 flex items-center justify-between">
							<span>Players</span>
							<span className="text-xs text-gray-500 font-normal">
								{players.length} connected
							</span>
						</h2>
						{players.length === 0 ? (
							<p className="text-gray-500 text-sm text-center py-4">
								No players connected
							</p>
						) : (
							<div className="flex flex-col gap-1.5">
								{players.map((p) => (
									<div
										key={p.username}
										className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-800"
									>
										<span className="text-white text-sm flex-1 font-medium">
											{p.username}
										</span>
										{p.inMatch ? (
											<span className="text-xs px-2 py-0.5 rounded-full bg-blue-900/60 text-blue-300 border border-blue-700">
												In game
											</span>
										) : p.ready ? (
											<span className="text-xs px-2 py-0.5 rounded-full bg-green-900/60 text-green-300 border border-green-700">
												Ready
											</span>
										) : (
											<span className="text-xs px-2 py-0.5 rounded-full bg-gray-700 text-gray-500">
												Idle
											</span>
										)}
									</div>
								))}
							</div>
						)}
					</div>

					<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
						<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-2">
							Event Log
						</h2>
						<div className="flex flex-col gap-0.5 max-h-40 overflow-y-auto">
							{log.slice(0, 20).map((entry, i) => (
								<p key={i} className="text-xs text-gray-400 font-mono">
									{entry}
								</p>
							))}
							{log.length === 0 && (
								<p className="text-gray-600 text-xs">No events yet</p>
							)}
						</div>
					</div>
				</div>

				<div className="lg:col-span-2 flex flex-col gap-4">
					<div className="bg-gray-900 border border-gray-700 rounded-xl p-4">
						<h2 className="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
							Active Matches
						</h2>
						{gameList.length === 0 ? (
							<p className="text-gray-500 text-sm text-center py-3">
								No active matches
							</p>
						) : (
							<div className="flex flex-wrap gap-2">
								{gameList.map((g) => {
									const live = liveGames.get(g.id);
									return (
										<button
											key={g.id}
											onClick={() =>
												setSelectedGame(selectedGame === g.id ? null : g.id)
											}
											className={`px-3 py-2 rounded-lg border text-sm transition-colors ${
												selectedGame === g.id
													? "border-blue-500 bg-blue-950/50 text-blue-200"
													: "border-gray-700 bg-gray-800 hover:border-gray-500 text-gray-300"
											}`}
										>
											<span className="text-gray-500 text-xs font-mono mr-1">
												#{g.id}
											</span>
											<span className="text-red-400">{g.player1}</span>
											<span className="text-gray-500 mx-1">vs</span>
											<span className="text-yellow-400">{g.player2}</span>
											{live?.result && (
												<span className="ml-1 text-xs">
													{live.result.kind === "win"
														? ` 🏆 ${live.result.winner}`
														: live.result.kind === "draw"
															? " 🤝"
															: " ⛔"}
												</span>
											)}
										</button>
									);
								})}
							</div>
						)}
					</div>

					<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 flex flex-col items-center gap-4 min-h-64">
						{!selectedGameData ? (
							<div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
								<span className="text-4xl text-gray-700">🎯</span>
								<p className="text-gray-500 text-sm">
									{gameList.length > 0
										? "Click a match above to see the board"
										: "Active matches will appear here"}
								</p>
							</div>
						) : (
							<>
								{selectedGameData.result && (
									<div
										className={`w-full rounded-lg p-3 text-center font-semibold ${
											selectedGameData.result.kind === "win"
												? "bg-green-900/50 border border-green-600 text-green-300"
												: selectedGameData.result.kind === "draw"
													? "bg-blue-900/50 border border-blue-600 text-blue-300"
													: "bg-red-900/50 border border-red-600 text-red-300"
										}`}
									>
										{selectedGameData.result.kind === "win"
											? `🏆 ${selectedGameData.result.winner} wins!`
											: selectedGameData.result.kind === "draw"
												? "🤝 Draw!"
												: "⛔ Match Terminated"}
									</div>
								)}
								<Board
									board={selectedGameData.board}
									lastMove={selectedGameData.lastMove}
									player1={selectedGameData.player1}
									player2={selectedGameData.player2}
									currentTurnColor={
										selectedGameData.result
											? null
											: selectedGameData.currentTurnColor
									}
									disabled
								/>
							</>
						)}
					</div>
				</div>
			</div>
		</div>
	);
}