"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { StationOptionalDefaultsSchema } from "@repo/db/zod";
import { useForm } from "react-hook-form";
import { BosUse, ConnectedAircraft, Country, Station, User } from "@repo/db";
import { FileText, LocateIcon, PlaneIcon, UserIcon } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
import { deleteStation, upsertStation } from "../action";
import { Button } from "../../../../_components/ui/Button";
import { redirect } from "next/navigation";
import toast from "react-hot-toast";
import { PaginatedTable, PaginatedTableRef } from "_components/PaginatedTable";
import { ColumnDef } from "@tanstack/react-table";
import Link from "next/link";
import { deletePilotHistory } from "(app)/admin/user/action";
import { useRef } from "react";
import { cn } from "@repo/shared-components";

export const StationForm = ({ station }: { station?: Station }) => {
	const form = useForm({
		resolver: zodResolver(StationOptionalDefaultsSchema),
		defaultValues: station,
	});
	const dispoTableRef = useRef<PaginatedTableRef>(null);
	// const [deleteLoading, setDeleteLoading] = useState(false);
	return (
		<>
			<form
				onSubmit={form.handleSubmit(async (values) => {
					await upsertStation(values, station?.id);
					toast.success("Daten gespeichert");
					if (!station) redirect(`/admin/station`);
				})}
				className="grid grid-cols-6 gap-3"
			>
				<div className="card bg-base-200 col-span-2 shadow-xl max-xl:col-span-6">
					<div className="card-body">
						<h2 className="card-title">
							<FileText className="h-5 w-5" /> Allgemeines
						</h2>
						<Input form={form} label="BOS Rufname" name="bosCallsign" className="input-sm" />
						<Input
							form={form}
							label="BOS Rufname (kurz)"
							name="bosCallsignShort"
							className="input-sm"
						/>
						<Input form={form} label="Betreiber" name="operator" className="input-sm" />
						<Input form={form} label="ATC Rufname" name="atcCallsign" className="input-sm" />
						<Input
							form={form}
							label="FIR (Flight Information Region)"
							name="fir"
							className="input-sm"
						/>
						<Input
							form={form}
							label="Leitstelle Rufname"
							name="bosRadioArea"
							className="input-sm"
						/>

						<label className="form-control w-full">
							<span className="label-text flex items-center gap-2 text-lg">BOS Nutzung</span>
							<select
								className="input-sm select select-bordered select-sm"
								{...form.register("bosUse")}
							>
								{Object.keys(BosUse).map((use) => (
									<option key={use} value={use}>
										{use}
									</option>
								))}
							</select>
						</label>
					</div>
				</div>
				<div className="card bg-base-200 col-span-2 shadow-xl max-xl:col-span-6">
					<div className="card-body">
						<h2 className="card-title">
							<LocateIcon className="h-5 w-5" /> Standort + Ausrüstung
						</h2>
						<label className="form-control w-full">
							<span className="label-text flex items-center gap-2 text-lg">Land</span>
							<select
								className="input-sm select select-bordered select-sm"
								{...form.register("country", {})}
							>
								{Object.keys(Country).map((use) => (
									<option key={use} value={use}>
										{use}
									</option>
								))}
							</select>
						</label>
						<Input form={form} label="Bundesland" name="locationState" className="input-sm" />
						<Input
							form={form}
							label="Bundesland (kurz)"
							name="locationStateShort"
							className="input-sm"
						/>
						<span className="label-text flex items-center gap-2 text-lg">Ausgerüstet mit:</span>
						<div className="form-control space-y-2">
							<label className="label flex cursor-pointer">
								<span className="flex-1 text-left">Winde</span>
								<input type="checkbox" className="toggle" {...form.register("hasWinch")} />
							</label>
							<label className="label flex cursor-pointer">
								<span className="flex-1 text-left">Nachtsicht-Gerät</span>
								<input type="checkbox" className="toggle" {...form.register("hasNvg")} />
							</label>
							<label className="label flex cursor-pointer">
								<span className="flex-1 text-left">24-Stunden Einsatzfähig</span>
								<input type="checkbox" className="toggle" {...form.register("is24h")} />
							</label>
							<label className="label flex cursor-pointer">
								<span className="flex-1 text-left">Bergetau</span>
								<input type="checkbox" className="toggle" {...form.register("hasRope")} />
							</label>
						</div>

						<Input
							form={form}
							label="Breitengrad"
							name="latitude"
							className="input-sm"
							formOptions={{ valueAsNumber: true }}
							type="number"
							step="any"
						/>
						<Input
							form={form}
							label="Längengrad"
							name="longitude"
							className="input-sm"
							formOptions={{ valueAsNumber: true }}
							type="number"
							step="any"
						/>
						<label className="label flex cursor-pointer">
							<span className="flex-1 text-left text-lg">Reichweiten ausblenden</span>
							<input type="checkbox" className="toggle" {...form.register("hideRangeRings")} />
						</label>
					</div>
				</div>
				<div className="card bg-base-200 col-span-2 shadow-xl max-xl:col-span-6">
					<div className="card-body">
						<h2 className="card-title">
							<PlaneIcon className="h-5 w-5" /> Hubschrauber
						</h2>
						<Input form={form} label="Hubschrauber Typ" name="aircraft" className="input-sm" />
						<Input
							form={form}
							formOptions={{ valueAsNumber: true }}
							type="number"
							label="Hubschrauber Geschwindigkeit"
							className="input-sm"
							name="aircraftSpeed"
						/>
						<Input
							form={form}
							label="Hubschrauber Registrierung"
							name="aircraftRegistration"
							className="input-sm"
						/>
					</div>
				</div>
				<div className="card bg-base-200 col-span-6 shadow-xl">
					<div className="card-body">
						<div className="flex w-full gap-4">
							<Button
								isLoading={form.formState.isSubmitting}
								type="submit"
								className="btn btn-primary flex-1"
							>
								Speichern
							</Button>
							{station && (
								<Button
									onClick={async () => {
										await deleteStation(station.id);
										redirect("/admin/station");
									}}
									className="btn btn-error"
								>
									Löschen
								</Button>
							)}
						</div>
					</div>
				</div>
				<div className="card bg-base-200 col-span-6 shadow-xl">
					<PaginatedTable
						leftOfSearch={
							<div className="flex items-center gap-2 text-lg font-bold">
								<UserIcon className="h-5 w-5" />
								Verbundene Piloten
							</div>
						}
						filter={{
							stationId: station?.id,
						}}
						searchFields={["User.firstname", "User.lastname", "User.publicId"]}
						prismaModel={"connectedAircraft"}
						include={{ Station: true, User: true }}
						columns={
							[
								{
									accessorKey: "User.firstname",
									header: "Nutzer",
									cell: ({ row }) => {
										return (
											<Link
												className="link link-hover"
												href={`/admin/user/${row.original.User.id}`}
											>
												{row.original.User.firstname} {row.original.User.lastname} (
												{row.original.User.publicId})
											</Link>
										);
									},
								},
								{
									accessorKey: "loginTime",
									header: "Login",
									cell: ({ row }) => {
										return new Date(row.getValue("loginTime")).toLocaleString("de-DE");
									},
								},
								{
									accessorKey: "logoutTime",
									header: "Logout",
									cell: ({ row }) => {
										return new Date(row.getValue("logoutTime")).toLocaleString("de-DE");
									},
								},
								{
									header: "Time Online",
									cell: ({ row }) => {
										if (!row.original.logoutTime) {
											return <span className="text-success">Online</span>;
										}
										const loginTime = new Date(row.original.loginTime).getTime();
										const logoutTime = new Date(row.original.logoutTime).getTime();
										const timeOnline = logoutTime - loginTime;

										const hours = Math.floor(timeOnline / 1000 / 60 / 60);
										const minutes = Math.floor((timeOnline / 1000 / 60) % 60);

										return (
											<span className={cn(hours > 2 && "text-error")}>
												{hours}h {minutes}min
											</span>
										);
									},
								},
								{
									header: "Aktionen",
									cell: ({ row }) => {
										return (
											<div>
												<button
													className="btn btn-sm btn-error"
													onClick={async () => {
														await deletePilotHistory(row.original.id);
														dispoTableRef.current?.refresh();
													}}
												>
													löschen
												</button>
											</div>
										);
									},
								},
							] as ColumnDef<ConnectedAircraft & { Station: Station; User: User }>[]
						}
					/>
				</div>
			</form>
		</>
	);
};
