"use client";
import { useLeftMenuStore } from "_store/leftMenuStore";
import { cn } from "_helpers/cn";
import { ListCollapse, Plane } from "lucide-react";
import { useQuery } from "@tanstack/react-query";
import { getMissionsAPI } from "_querys/missions";
import { Station } from "@repo/db";
import { getConnectedAircraftsAPI } from "_querys/aircrafts";
import { FMS_STATUS_COLORS, FMS_STATUS_TEXT_COLORS } from "_helpers/fmsStatusColors";
import { useMapStore } from "_store/mapStore";
import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";

export const SituationBoard = () => {
	const { setSituationTabOpen, situationTabOpen } = useLeftMenuStore();
	const dispatcherConnected = useDispatchConnectionStore((state) => state.status === "connected");
	const { data: missions } = useQuery({
		queryKey: ["missions", "missions-on-stations"],
		queryFn: () =>
			getMissionsAPI(
				{
					state: {
						not: "finished",
					},
				},
				{
					MissionsOnStations: {
						include: {
							Station: true,
						},
					},
				},
				{
					createdAt: "desc",
				},
			),
	});
	const { data: connectedAircrafts } = useQuery({
		queryKey: ["aircrafts"],
		queryFn: () => getConnectedAircraftsAPI(),
	});
	const { setOpenAircraftMarker, setOpenMissionMarker, setMap } = useMapStore((state) => state);

	console.log("station", connectedAircrafts);

	return (
		<div className={cn("dropdown dropdown-top", situationTabOpen && "dropdown-open")}>
			<div className="indicator">
				<button
					className="btn btn-soft btn-sm btn-info"
					onClick={() => {
						setSituationTabOpen(!situationTabOpen);
					}}
				>
					<ListCollapse className="w-4 h-4" />
				</button>
			</div>
			{situationTabOpen && (
				<div
					tabIndex={0}
					className="dropdown-content card bg-base-200 shadow-md z-[1100] ml-2 border-1 border-info"
				>
					<div className="card-body flex flex-row gap-4">
						<div className="flex-1">
							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
								<ListCollapse /> Einsatzliste
							</h2>
							<div className="overflow-x-auto">
								<table className="table table-xs">
									{/* head */}
									<thead>
										<tr>
											<th>E-Nr.</th>
											<th>Stichwort</th>
											<th>Stadt</th>
											<th>Stationen</th>
										</tr>
									</thead>
									<tbody>
										{/* row 1 */}
										{missions?.map(
											(mission) =>
												(dispatcherConnected || mission.state !== "draft") && (
													<tr
														onDoubleClick={() => {
															setOpenMissionMarker({
																open: [
																	{
																		id: mission.id,
																		tab: "home",
																	},
																],
																close: [],
															});
															setMap({
																center: {
																	lat: mission.addressLat,
																	lng: mission.addressLng,
																},
																zoom: 14,
															});
														}}
														key={mission.id}
														className={cn(mission.state === "draft" && "missionListItem")}
													>
														<td>{mission.publicId}</td>
														<td>{mission.missionKeywordAbbreviation}</td>
														<td>{mission.addressCity}</td>
														<td>
															{(mission as any).MissionsOnStations?.map(
																(mos: { Station: Station }) => mos.Station?.bosCallsignShort,
															).join(", ")}
														</td>
													</tr>
												),
										)}
									</tbody>
								</table>
							</div>
						</div>
						<div className="w-px bg-gray-400 mx-2" />
						<div className="flex-1">
							<h2 className="inline-flex items-center gap-2 text-lg font-bold mb-2">
								<Plane /> Stationen
							</h2>
							<div className="overflow-x-auto">
								<table className="table table-xs">
									<thead>
										<tr>
											<th>BOS Name</th>
											<th>Status</th>
											<th>LST</th>
										</tr>
									</thead>
									<tbody>
										{connectedAircrafts?.map((station) => (
											<tr
												key={station.id}
												onDoubleClick={() => {
													setOpenAircraftMarker({
														open: [
															{
																id: station.id,
																tab: "home",
															},
														],
														close: [],
													});
													if (station.posLat === null || station.posLng === null) return;
													setMap({
														center: {
															lat: station.posLat,
															lng: station.posLng,
														},
														zoom: 14,
													});
												}}
											>
												<td>{station.Station.bosCallsignShort}</td>
												<td
													className="text-center font-lg font-semibold"
													style={{
														color: FMS_STATUS_TEXT_COLORS[station.fmsStatus],
														backgroundColor: FMS_STATUS_COLORS[station.fmsStatus],
													}}
												>
													{station.fmsStatus}
												</td>
												<td className="whitespace-nowrap">{station.Station.bosRadioArea}</td>
											</tr>
										))}
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			)}
		</div>
	);
};