"use client";
import { PublicUser } from "@repo/db";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { cn } from "_helpers/cn";
import { getConnectedAircraftsAPI, kickAircraftAPI } from "_querys/aircrafts";
import { getConnectedDispatcherAPI, kickDispatcherAPI } from "_querys/dispatcher";
import { getLivekitRooms, kickLivekitParticipant } from "_querys/livekit";
import { editUserAPI } from "_querys/user";
import { ParticipantInfo } from "livekit-server-sdk";
import {
	Eye,
	LockKeyhole,
	Plane,
	RedoDot,
	Shield,
	ShieldAlert,
	Speaker,
	User,
	UserCheck,
	Workflow,
} from "lucide-react";
import { ReactNode, useRef, useState } from "react";
import toast from "react-hot-toast";

const PenaltyDropdown = ({
	onClick,
	btnClassName,
	showDatePicker,
	btnTip,
	Icon,
}: {
	onClick: (data: { reason: string; until: Date | null }) => void;
	showDatePicker?: boolean;
	btnClassName?: string;
	btnTip?: string;
	Icon: ReactNode;
}) => {
	const [reason, setReason] = useState("");
	const [until, setUntil] = useState<string>("default");
	return (
		<details className="dropdown dropdown-left dropdown-center">
			<summary className={cn("btn btn-xs btn-square btn-soft", btnClassName)}>{Icon}</summary>
			<div className="dropdown-content flex gap-3 bg-base-100 rounded-box z-1 p-2 mr-3 shadow-sm">
				<input
					value={reason}
					onChange={(e) => setReason(e.target.value)}
					type="text"
					className="input min-w-[250px]"
					placeholder="Begründung"
				/>
				{showDatePicker && (
					<select
						className="select min-w-[150px] select-bordered"
						value={until}
						onChange={(e) => setUntil(e.target.value)}
					>
						<option value="default" disabled>
							Unbegrenzt
						</option>
						<option value="1h">1 Stunde</option>
						<option value="6h">6 Stunden</option>
						<option value="12h">12 Stunden</option>
						<option value="24h">24 Stunden</option>
						<option value="72h">72 Stunden</option>
						<option value="1w">1 Woche</option>
						<option value="2w">2 Wochen</option>
						<option value="1m">1 Monat</option>
						<option value="3m">3 Monate</option>
						<option value="6m">6 Monate</option>
						<option value="1y">1 Jahr</option>
					</select>
				)}
				<button
					className={cn(
						"btn btn-square btn-soft tooltip tooltip-bottom tooltip-warning",
						btnClassName,
					)}
					data-tip={btnTip}
					onClick={() => {
						let untilDate: Date | null = null;
						if (until !== "default") {
							const now = new Date();
							switch (until) {
								case "1h":
									untilDate = new Date(now.getTime() + 1 * 60 * 60 * 1000);
									break;
								case "6h":
									untilDate = new Date(now.getTime() + 6 * 60 * 60 * 1000);
									break;
								case "12h":
									untilDate = new Date(now.getTime() + 12 * 60 * 60 * 1000);
									break;
								case "24h":
									untilDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
									break;
								case "72h":
									untilDate = new Date(now.getTime() + 72 * 60 * 60 * 1000);
									break;
								case "1w":
									untilDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
									break;
								case "2w":
									untilDate = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
									break;
								case "1m":
									untilDate = new Date(now.setMonth(now.getMonth() + 1));
									break;
								case "3m":
									untilDate = new Date(now.setMonth(now.getMonth() + 3));
									break;
								case "6m":
									untilDate = new Date(now.setMonth(now.getMonth() + 6));
									break;
								case "1y":
									untilDate = new Date(now.setFullYear(now.getFullYear() + 1));
									break;
								default:
									untilDate = null;
							}
						}
						onClick({ reason, until: untilDate });
					}}
				>
					{Icon}
				</button>
			</div>
		</details>
	);
};

export default function AdminPanel() {
	const queryClient = useQueryClient();
	const { data: pilots } = useQuery({
		queryKey: ["pilots"],
		queryFn: () => getConnectedAircraftsAPI(),
		refetchInterval: 10000,
	});
	const { data: dispatcher } = useQuery({
		queryKey: ["dispatcher"],

		queryFn: () => getConnectedDispatcherAPI(),
		refetchInterval: 10000,
	});
	const { data: livekitRooms } = useQuery({
		queryKey: ["livekit-rooms"],
		queryFn: () => getLivekitRooms(),
		refetchInterval: 10000,
	});
	const kickLivekitParticipantMutation = useMutation({
		mutationFn: kickLivekitParticipant,
		onSuccess: () => {
			queryClient.invalidateQueries({ queryKey: ["livekit-rooms"] });
		},
	});
	const kickPilotMutation = useMutation({
		mutationFn: kickAircraftAPI,
		onSuccess: () => {
			toast.success("Pilot wurde erfolgreich gekickt");
			queryClient.invalidateQueries({
				queryKey: ["aircrafts"],
			});
			queryClient.invalidateQueries({
				queryKey: ["connected-audio-users"],
			});
		},
	});
	const kickDispatchMutation = useMutation({
		mutationFn: kickDispatcherAPI,
		onSuccess: () => {
			toast.success("Disponent wurde erfolgreich gekickt");
			queryClient.invalidateQueries({
				queryKey: ["dispatcher"],
			});
			queryClient.invalidateQueries({
				queryKey: ["connected-audio-users"],
			});
		},
	});

	const participants: { participant: ParticipantInfo; room: string }[] = [];

	if (livekitRooms) {
		livekitRooms?.forEach((room) => {
			room.participants.forEach((participant) => {
				participants.push({
					participant,
					room: room.room.name,
				});
			});
		});
	}
	const livekitUserNotConnected = participants.filter((p) => {
		const pilot = pilots?.find(
			(d) => (d.publicUser as unknown as PublicUser).publicId === p.participant.identity,
		);
		const fDispatcher = dispatcher?.find(
			(d) => (d.publicUser as unknown as PublicUser).publicId === p.participant.identity,
		);
		return !pilot && !fDispatcher;
	});

	const modalRef = useRef<HTMLDialogElement>(null);

	return (
		<div>
			<button
				className="btn btn-soft btn-primary btn-sm flex items-center gap-2"
				onSubmit={() => false}
				onClick={() => {
					modalRef.current?.showModal();
				}}
			>
				<Shield size={18} /> Admin Panel
			</button>
			<dialog ref={modalRef} className="modal min-w-[500px]">
				<div className="modal-box w-11/12 max-w-7xl">
					<form method="dialog">
						<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
					</form>
					<h3 className="font-bold text-lg flex items-center gap-2">
						<Shield size={22} /> Admin Panel
					</h3>
					<div className="flex gap-2 mt-4 w-full">
						<div className="card bg-base-300 shadow-md w-full h-96 overflow-y-auto">
							<div className="card-body">
								<div className="card-title flex items-center gap-2">
									<UserCheck size={20} /> Verbundene Clients
								</div>
								<table className="table w-full">
									<thead>
										<tr>
											<th>VAR #</th>
											<th>Name</th>
											<th>Station</th>
											<th>Voice</th>
											<th>Actions</th>
										</tr>
									</thead>
									<tbody>
										{pilots?.map((p) => {
											const publicUser = p.publicUser as unknown as PublicUser;
											const livekitParticipant = participants.find(
												(p) => p.participant.identity === publicUser.publicId,
											);
											return (
												<tr key={p.id}>
													<td className="flex items-center gap-2">
														<Plane /> {publicUser.publicId}
													</td>
													<td>{publicUser.fullName}</td>
													<td>{p.Station.bosCallsign}</td>
													<td>
														{!livekitParticipant ? (
															<span className="text-error">Nicht verbunden</span>
														) : (
															<span className="text-success">{livekitParticipant.room}</span>
														)}
													</td>
													<td className="flex gap-2">
														<PenaltyDropdown
															btnClassName="btn-warning"
															btnTip="Kick"
															Icon={<RedoDot size={15} />}
															onClick={({ reason }) =>
																kickPilotMutation.mutate({ id: p.id, reason })
															}
														/>
														<PenaltyDropdown
															btnClassName="btn-error"
															btnTip="Kick + Berechtigungen entfernen"
															showDatePicker
															Icon={<LockKeyhole size={15} />}
															onClick={({ reason, until }) =>
																kickPilotMutation.mutate({ id: p.id, reason, bann: true, until })
															}
														/>
														<a
															href={`${process.env.NEXT_PUBLIC_HUB_URL}/admin/user/${p.userId}`}
															target="_blank"
															rel="noopener noreferrer"
														>
															<button
																className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
																data-tip="Profil"
															>
																<User size={15} />
															</button>
														</a>
													</td>
												</tr>
											);
										})}
										{dispatcher?.map((d) => {
											const publicUser = d.publicUser as unknown as PublicUser;
											const livekitParticipant = participants.find(
												(p) => p.participant.identity === publicUser.publicId,
											);
											return (
												<tr key={d.id}>
													<td className="flex items-center gap-2">
														<Workflow /> {publicUser.publicId}
													</td>
													<td>{publicUser.fullName}</td>
													<td>{d.zone}</td>
													<td>
														{!livekitParticipant ? (
															<span className="text-error">Nicht verbunden</span>
														) : (
															<span className="text-success">{livekitParticipant.room}</span>
														)}
													</td>
													<td className="flex gap-2">
														<PenaltyDropdown
															btnClassName="btn-warning"
															btnTip="Kick"
															Icon={<RedoDot size={15} />}
															onClick={({ reason }) =>
																kickDispatchMutation.mutate({ id: d.id, reason })
															}
														/>
														<PenaltyDropdown
															btnClassName="btn-error"
															btnTip="Kick + Berechtigungen entfernen"
															showDatePicker
															Icon={<LockKeyhole size={15} />}
															onClick={({ reason, until }) =>
																kickDispatchMutation.mutate({ id: d.id, reason, bann: true, until })
															}
														/>
														<a
															href={`${process.env.NEXT_PUBLIC_HUB_URL}/admin/user/${d.userId}`}
															target="_blank"
															rel="noopener noreferrer"
														>
															<button
																className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
																data-tip="Profil"
															>
																<User size={15} />
															</button>
														</a>
													</td>
												</tr>
											);
										})}
										{livekitUserNotConnected.map((p) => {
											const publicUser = JSON.parse(
												p.participant.attributes.publicUser || "{}",
											) as PublicUser;
											return (
												<tr key={p.participant.identity}>
													<td className="flex items-center gap-2">
														<Speaker /> {p.participant.identity}
													</td>
													<td>{publicUser?.fullName}</td>
													<td>
														<span className="text-error">Nicht verbunden</span>
													</td>
													<td>
														<span className="text-success">{p.room}</span>
													</td>
													<td className="flex gap-2">
														<button
															className="btn btn-xs btn-square btn-warning btn-soft tooltip tooltip-bottom tooltip-warning"
															data-tip="Kick"
															onClick={() =>
																kickLivekitParticipantMutation.mutate({
																	roomName: p.room,
																	identity: p.participant.identity,
																})
															}
														>
															<RedoDot size={15} />
														</button>
														<button
															className="btn btn-xs btn-square btn-error btn-soft tooltip tooltip-bottom tooltip-error"
															data-tip="Kick + Berechtigungen entfernen"
														>
															<LockKeyhole size={15} />
														</button>
														<a
															href={`${process.env.NEXT_PUBLIC_HUB_URL}/admin/user/${p.participant.attributes.userId}`}
															target="_blank"
															rel="noopener noreferrer"
														>
															<button
																className="btn btn-xs btn-square btn-info btn-soft tooltip tooltip-bottom tooltip-info"
																data-tip="Profil"
															>
																<User size={15} />
															</button>
														</a>
													</td>
												</tr>
											);
										})}
									</tbody>
								</table>
							</div>
						</div>
					</div>
					{/* <div className="card bg-base-300 shadow-md w-full mt-4 max-h-48 overflow-y-auto">
						<div className="card-body">
							<div className="card-title flex items-center gap-2">
								<ShieldAlert size={20} /> Allgemeine Befehle
							</div>
							<div className="flex items-center justify-between gap-2">
								<div className="flex items-center justify-left gap-2">
									<button className="btn btn-soft btn-error mt-2">Kick Everybody</button>
									<button className="btn btn-soft btn-warning mt-2">
										Wartungsmodus einschalten
									</button>
									<button className="btn btn-soft btn-info mt-2">Delete All Missions</button>
								</div>

								<button className="btn btn-outline btn-info mt-2 flex items-center gap-2">
									<Eye size={22} />
									Als Observer verbinden
								</button>
							</div>
						</div>
					</div> */}
				</div>
				<form method="dialog" className="modal-backdrop">
					<button>close</button>
				</form>
			</dialog>
		</div>
	);
}