"use client";

import { useEffect, useState } from "react";

interface Player
{
	name: string;
	position: string;
	team: string | null;
	tag: string | null;
	country: string | null;
	logo: string | null;
	championId: number;
	teamId: number;
	wr: number;
	championImage: string;
	countryFlag: string;
	positionIcon: string;
}

interface LobbyData
{
	inGame: boolean;
	gameId?: number;
	players?: Player[];
}

export default function Lobby ( { player }: { player: string } )
{
	const [ data, setData ] = useState<LobbyData | null>( null );
	const [ lastGameId, setLastGameId ] = useState<number | null>( null );
	const [ showAnimation, setShowAnimation ] = useState( false );

	useEffect( () =>
	{
		const fetchLobby = async () =>
		{
			const res = await fetch( `/api/lobby/${ player }` );
			if ( !res.ok ) return;
			const json = await res.json();
			setData( json );

			if ( json.inGame && json.gameId !== lastGameId )
			{
				setShowAnimation( true );
				setLastGameId( json.gameId );
			}
		};

		fetchLobby();
		const interval = setInterval( fetchLobby, 45 * 1000 );
		return () => clearInterval( interval );
	}, [ player, lastGameId ] );

	if ( !data || !data.inGame || !data.players ) return null;

	const overlayClass = `overlay slide-animation max-h-screen grid grid-rows-2 items-center font-sans font-bold tracking-wide ${ showAnimation ? "" : "hidden"
		}`;

	return (
		<div className={ overlayClass } onAnimationEnd={ () => setShowAnimation( false ) }>
			{ [ 200, 100 ].map( ( teamId ) => (
				<div className="team w-max" key={ teamId }>
					{ data.players
						.filter( ( p ) => p.teamId === teamId )
						.map( ( player, i ) =>
						{
							const playerClass =
								"player flex flex-row justify-between items-center my-2 min-w-56 w-full max-w-[400px] bg-opacity-50 rounded-xl shadow-md " +
								( teamId === 100 ? "bg-sky-800" : "bg-red-800" );

							return (
								<div key={ i } className={ playerClass }>
									<div
										className="champion w-11 h-11 scaler-125 bg-center bg-no-repeat bg-[length:120%] rounded-br-xl rounded-tr-xl"
										style={ {
											backgroundImage: `url(${ player.championImage })`,
										} }
									></div>

									<div className="grid grid-rows-2 flex-grow mx-4 min-w-0">
										<div className="name font-semibold text-white text-sm text-shadow-xl truncate">
											{ player.tag ? `${ player.tag } ${ player.name }` : player.name }
										</div>

										<div className="flex flex-row gap-1">
											<div
												className="country w-8 h-6 scaler-75 bg-center bg-contain bg-no-repeat"
												style={ {
													backgroundImage: `url(${ player.countryFlag })`,
												} }
											></div>
											<div
												className="position w-6 h-6 scaler-105 bg-center bg-contain bg-no-repeat"
												style={ {
													backgroundImage: `url(${ player.positionIcon })`,
												} }
											></div>
											<div className="wr font-bold text-white text-xs text-shadow-xl ml-1 pt-1">
												{ player.wr }%
											</div>
										</div>
									</div>

									{ player.logo && (
										<div
											className="logo w-10 h-10 scaler-90 mr-1 -ml-1 my-1 bg-center bg-contain bg-no-repeat rounded-lg"
											style={ { backgroundImage: `url(${ player.logo })` } }
										></div>
									) }
								</div>
							);
						} ) }
				</div>
			) ) }
		</div>
	);
}