"use client";
import { useSession } from "next-auth/react";
import { useDispatchConnectionStore } from "../../../../_store/dispatch/connectionStore";
import { useEffect, useRef, useState } from "react";
import { toast } from "react-hot-toast";
import { useMutation } from "@tanstack/react-query";
import { Prisma } from "@repo/db";
import { changeDispatcherAPI } from "_querys/connected-user";

export const ConnectionBtn = () => {
	const modalRef = useRef<HTMLDialogElement>(null);
	const connection = useDispatchConnectionStore((state) => state);
	const [form, setForm] = useState({
		logoffTime: "",
		selectedZone: "LST_01",
	});
	const changeDispatcherMutation = useMutation({
		mutationFn: ({ id, data }: { id: number; data: Prisma.ConnectedDispatcherUpdateInput }) =>
			changeDispatcherAPI(id, data),
	});
	const [logoffDebounce, setLogoffDebounce] = useState<NodeJS.Timeout | null>(null);
	const session = useSession();
	const uid = session.data?.user?.id;
	if (!uid) return null;

	// useEffect für die Logoff-Zeit
	useEffect(() => {
		if (logoffDebounce) clearTimeout(logoffDebounce);

		const timeout = setTimeout(async () => {
			if (!form.logoffTime || !connection.connectedDispatcher) return;
			await changeDispatcherMutation.mutateAsync({
				id: connection.connectedDispatcher?.id,
				data: {
					esimatedLogoutTime: new Date(
						new Date().toDateString() + " " + form.logoffTime,
					).toISOString(),
				},
			});
			toast.success("Änderung gespeichert!");
			modalRef.current?.close();
		}, 2000);

		setLogoffDebounce(timeout);

		// Cleanup function
		return () => {
			if (logoffDebounce) clearTimeout(logoffDebounce);
		};
	}, [form.logoffTime, connection.connectedDispatcher]);

	useEffect(() => {
		// Disconnect the socket when the component unmounts
		return () => {
			connection.disconnect();
		};
	}, [connection.disconnect]);

	return (
		<div className="rounded-box bg-base-200 flex justify-center items-center gap-2 p-1">
			{connection.message.length > 0 && (
				<span className="mx-2 text-error">{connection.message}</span>
			)}

			{connection.status == "connected" ? (
				<button
					className="btn btn-sm btn-soft btn-success"
					type="submit"
					onSubmit={() => false}
					onClick={() => {
						modalRef.current?.showModal();
					}}
				>
					Verbunden
				</button>
			) : (
				<button
					type="submit"
					onSubmit={() => false}
					onClick={() => {
						modalRef.current?.showModal();
					}}
					className="btn btn-sm btn-soft btn-info"
				>
					{connection.status == "disconnected" ? "Verbinden" : connection.status}
				</button>
			)}

			<dialog ref={modalRef} className="modal">
				<div className="modal-box flex flex-col items-center justify-center">
					{connection.status == "connected" ? (
						<h3 className="text-lg font-bold mb-5">
							Verbunden als <span className="text-info">&lt;{connection.selectedZone}&gt;</span>
						</h3>
					) : (
						<h3 className="text-lg font-bold mb-5">Als Disponent anmelden</h3>
					)}
					<fieldset className="fieldset w-full">
						<label className="floating-label w-full text-base">
							<span>Logoff Zeit (UTC+1)</span>
							<input
								onChange={(e) => {
									const value = e.target.value;
									setForm({
										...form,
										logoffTime: value,
									});
								}}
								value={form.logoffTime}
								type="time"
								className="input w-full"
							/>
						</label>
						{connection.status == "disconnected" && (
							<p className="fieldset-label">Du kannst diese Zeit später noch anpassen.</p>
						)}
					</fieldset>
					<div className="modal-action flex justify-between w-full">
						<form method="dialog" className="w-full flex justify-between">
							<button className="btn btn-soft">Zurück</button>
							{connection.status == "connected" ? (
								<button
									className="btn btn-soft btn-error"
									type="submit"
									onSubmit={() => false}
									onClick={() => {
										connection.disconnect();
									}}
								>
									Verbindung Trennen
								</button>
							) : (
								<button
									type="submit"
									onSubmit={() => false}
									onClick={() => {
										connection.connect(uid, form.selectedZone, form.logoffTime);
									}}
									className="btn btn-soft btn-info"
								>
									{connection.status == "disconnected" ||
									// eslint-disable-next-line @typescript-eslint/no-explicit-any
									(connection.status as any) === ""
										? "Verbinden"
										: connection.status}
								</button>
							)}
						</form>
					</div>
				</div>
			</dialog>
		</div>
	);
};

export const Connection = () => {
	return (
		<div>
			<ConnectionBtn />
		</div>
	);
};
