"use client";

import { Mrt } from "(app)/pilot/_components/mrt/Mrt";
import { Chat } from "../../_components/left/Chat";
import { Report } from "../../_components/left/Report";
import { Dme } from "(app)/pilot/_components/dme/Dme";
import dynamic from "next/dynamic";
import { ConnectedDispatcher } from "tracker/_components/ConnectedDispatcher";
import { useQuery } from "@tanstack/react-query";
import { usePilotConnectionStore } from "_store/pilot/connectionStore";
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
import { checkSimulatorConnected, useDebounce } from "@repo/shared-components";
import { SimConnectionAlert } from "(app)/pilot/_components/SimConnectionAlert";
import { SettingsBoard } from "_components/left/SettingsBoard";
import { BugReport } from "_components/left/BugReport";
import { useEffect, useState } from "react";

const Map = dynamic(() => import("_components/map/Map"), {
	ssr: false,
});

const PilotPage = () => {
	const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
	// Query will be cached anyway, due to this, displayed Markers are in sync with own Aircraft connection-warning
	const { data: aircrafts } = useQuery({
		queryKey: ["aircrafts"],
		queryFn: () => getConnectedAircraftsAPI(),
		refetchInterval: 10_000,
	});
	const [shortlyConnected, setShortlyConnected] = useState(false);
	useDebounce(
		() => {
			if (status === "connected") {
				setShortlyConnected(false);
			}
		},
		30_000,
		[status],
	);

	useEffect(() => {
		if (status === "connected") {
			setShortlyConnected(true);
		}
	}, [status]);

	const ownAircraft = aircrafts?.find((aircraft) => aircraft.id === connectedAircraft?.id);
	const simulatorConnected = ownAircraft ? checkSimulatorConnected(ownAircraft) : false;
	return (
		<div className="ease relative flex h-screen w-full flex-1 overflow-hidden transition-all duration-500">
			{/* <MapToastCard2 /> */}
			<div className="relative flex h-full w-full flex-1">
				<div className="absolute left-0 top-1/2 z-20 flex -translate-y-1/2 transform flex-col space-y-2 pl-4">
					<Chat />
					<Report />
					<BugReport />
				</div>
				<div className="flex h-full w-2/3">
					<div className="relative flex h-full flex-1">
						<div className="top-19/20 absolute left-0 z-20 -translate-y-1/2 transform pl-4">
							<div className="flex items-center justify-between gap-4">
								<SettingsBoard />
							</div>
						</div>
						<Map />
						<div className="absolute right-10 top-5 z-20 space-y-2">
							{!simulatorConnected &&
								status === "connected" &&
								connectedAircraft &&
								!shortlyConnected && (
									<SimConnectionAlert lastUpdated={ownAircraft?.lastHeartbeat} />
								)}
							<ConnectedDispatcher />
						</div>
					</div>
				</div>
				<div className="flex h-full w-1/3">
					<div className="bg-base-300 flex h-full w-full flex-col p-4">
						<h2 className="card-title mb-2">MRT & DME</h2>
						<div className="card bg-base-200 mb-4 shadow-xl">
							<div className="card-body flex h-full w-full items-center justify-center">
								<div className="max-w-150">
									<Mrt />
								</div>
							</div>
						</div>
						<div className="card bg-base-200 flex h-1/2 shadow-xl">
							<div className="card-body mb-0 flex h-full w-full items-center justify-center p-4">
								<div className="max-w-140">
									<Dme />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
};

PilotPage.displayName = "DispatchPage";

export default PilotPage;