"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 { getAircraftsAPI } from "_querys/aircrafts";
import { checkSimulatorConnected } from "@repo/shared-components";
import { SimConnectionAlert } from "(app)/pilot/_components/SimConnectionAlert";

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

const PilotPage = () => {
	const { connectedAircraft, status } = usePilotConnectionStore((state) => state);
	const { data: ownAircraftArray = [] } = useQuery({
		queryKey: ["own-aircraft", connectedAircraft?.id],
		queryFn: () =>
			getAircraftsAPI({
				id: connectedAircraft?.id,
			}),
		refetchInterval: 10000,
	});
	const ownAircraft = ownAircraftArray[0];
	const simulatorConnected = ownAircraft ? checkSimulatorConnected(ownAircraft) : false;
	return (
		<div className="relative flex-1 flex transition-all duration-500 ease w-full h-screen overflow-hidden">
			{/* <MapToastCard2 /> */}
			<div className="flex flex-1 relative w-full h-full">
				<div className="absolute left-0 top-1/2 transform -translate-y-1/2 pl-4 z-999999">
					<Chat />
					<div className="mt-2">
						<Report />
					</div>
				</div>
				<div className="flex w-2/3 h-full">
					<div className="relative flex flex-1 h-full">
						<Map />
						<div className="absolute top-5 right-10 z-99999 space-y-2">
							{!simulatorConnected && status === "connected" && (
								<SimConnectionAlert lastUpdated={ownAircraft?.lastHeartbeat} />
							)}
							<ConnectedDispatcher />
						</div>
					</div>
				</div>
				<div className="flex w-1/3 h-full">
					<div className="flex flex-col w-full h-full p-4 bg-base-300">
						<h2 className="card-title mb-2">MRT & DME</h2>
						<div className="card bg-base-200 shadow-xl mb-4">
							<div className="card-body w-full h-full flex items-center justify-center">
								<div className=" max-w-150">
									<Mrt />
								</div>
							</div>
						</div>
						<div className="card bg-base-200 shadow-xl h-1/2 flex">
							<div className="card-body w-full h-full p-4 mb-0 flex items-center justify-center">
								<div className=" max-w-140">
									<Dme />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
};

PilotPage.displayName = "DispatchPage";

export default PilotPage;