import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
import { toast } from "sonner";
import { useState } from "react";
import {
	deleteNotificationDestinationMutation,
	getNotificationDestinationOptions,
	testNotificationDestinationMutation,
} from "~/client/api-client/@tanstack/react-query.gen";
import { Button } from "~/client/components/ui/button";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
} from "~/client/components/ui/alert-dialog";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuSeparator,
	DropdownMenuTrigger,
} from "~/client/components/ui/dropdown-menu";
import { Badge } from "~/client/components/ui/badge";
import { Card, CardTitle } from "~/client/components/ui/card";
import { Separator } from "~/client/components/ui/separator";
import { parseError } from "~/client/lib/errors";
import { cn } from "~/client/lib/utils";
import {
	Bell,
	Bot,
	ChevronDown,
	Globe,
	Hash,
	Key,
	Link,
	Lock,
	Mail,
	AtSign,
	AlertCircle,
	Clock,
	MessageSquare,
	Pencil,
	Server,
	Settings,
	Shield,
	Smile,
	TestTube2,
	Trash2,
	Users,
} from "lucide-react";
import { useNavigate } from "@tanstack/react-router";
import type { GetNotificationDestinationResponse } from "~/client/api-client/types.gen";
import { useTimeFormat } from "~/client/lib/datetime";

type NotificationConfig = GetNotificationDestinationResponse["config"];
type NotificationStatus = GetNotificationDestinationResponse["status"];
type Props = {
	icon: React.ReactNode;
	label: string;
	value: string;
	mono?: boolean;
};

function ConfigRow({ icon, label, value, mono }: Props) {
	return (
		<div className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
			<span className="text-muted-foreground shrink-0">{icon}</span>
			<span className="text-sm text-muted-foreground w-40 shrink-0">{label}</span>
			<span className={cn("text-sm break-all", { "font-mono bg-muted/50 px-2 py-0.5 rounded": mono })}>{value}</span>
		</div>
	);
}

function getStatusLabel(enabled: boolean, status: NotificationStatus) {
	return enabled ? status : "disabled";
}

function getStatusClass(enabled: boolean, status: NotificationStatus) {
	if (!enabled) return "bg-gray-500";
	if (status === "healthy") return "bg-success";
	if (status === "error") return "bg-red-500";
	return "bg-yellow-500";
}

function NotificationConfigRows({ config }: { config: NotificationConfig }) {
	switch (config.type) {
		case "slack":
			return (
				<>
					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Webhook URL" value={config.webhookUrl} mono />
					<ConfigRow icon={<Bot className="h-4 w-4" />} label="Bot Username" value={config.username || "—"} />
					<ConfigRow icon={<Smile className="h-4 w-4" />} label="Icon Emoji" value={config.iconEmoji || "—"} />
				</>
			);
		case "discord":
			return (
				<>
					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Webhook URL" value={config.webhookUrl} mono />
					<ConfigRow icon={<Bot className="h-4 w-4" />} label="Username" value={config.username || "—"} />
					<ConfigRow icon={<Link className="h-4 w-4" />} label="Avatar URL" value={config.avatarUrl || "—"} mono />
					<ConfigRow icon={<MessageSquare className="h-4 w-4" />} label="Thread ID" value={config.threadId || "—"} />
				</>
			);
		case "email":
			return (
				<>
					<ConfigRow icon={<Server className="h-4 w-4" />} label="SMTP Host" value={config.smtpHost} mono />
					<ConfigRow icon={<Server className="h-4 w-4" />} label="SMTP Port" value={String(config.smtpPort)} />
					<ConfigRow icon={<AtSign className="h-4 w-4" />} label="Username" value={config.username || "—"} />
					<ConfigRow icon={<Lock className="h-4 w-4" />} label="Password" value={config.password || "—"} />
					<ConfigRow icon={<Mail className="h-4 w-4" />} label="From" value={config.from} />
					{config.fromName && (
						<ConfigRow icon={<Mail className="h-4 w-4" />} label="From Name" value={config.fromName} />
					)}
					<ConfigRow icon={<Users className="h-4 w-4" />} label="To" value={config.to.join(", ")} />
					<ConfigRow icon={<Shield className="h-4 w-4" />} label="TLS" value={config.useTLS ? "Enabled" : "Disabled"} />
				</>
			);
		case "gotify":
			return (
				<>
					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Server URL" value={config.serverUrl} mono />
					<ConfigRow icon={<Key className="h-4 w-4" />} label="Token" value={config.token} mono />
					<ConfigRow icon={<Globe className="h-4 w-4" />} label="Path" value={config.path || "—"} mono />
					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={String(config.priority)} />
				</>
			);
		case "ntfy":
			return (
				<>
					<ConfigRow
						icon={<Globe className="h-4 w-4" />}
						label="Server URL"
						value={config.serverUrl || "Default (ntfy.sh)"}
						mono
					/>
					<ConfigRow icon={<Hash className="h-4 w-4" />} label="Topic" value={config.topic} />
					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={config.priority} />
					<ConfigRow icon={<AtSign className="h-4 w-4" />} label="Username" value={config.username || "—"} />
					<ConfigRow icon={<Lock className="h-4 w-4" />} label="Password" value={config.password || "—"} />
					<ConfigRow icon={<Key className="h-4 w-4" />} label="Access Token" value={config.accessToken || "—"} />
				</>
			);
		case "pushover":
			return (
				<>
					<ConfigRow icon={<Key className="h-4 w-4" />} label="User Key" value={config.userKey} mono />
					<ConfigRow icon={<Key className="h-4 w-4" />} label="API Token" value={config.apiToken} mono />
					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Devices" value={config.devices || "—"} />
					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Priority" value={String(config.priority)} />
				</>
			);
		case "telegram":
			return (
				<>
					<ConfigRow icon={<Key className="h-4 w-4" />} label="Bot Token" value={config.botToken} mono />
					<ConfigRow icon={<Hash className="h-4 w-4" />} label="Chat ID" value={config.chatId} mono />
					<ConfigRow icon={<MessageSquare className="h-4 w-4" />} label="Thread ID" value={config.threadId || "—"} />
				</>
			);
		case "generic":
			return (
				<>
					<ConfigRow icon={<Globe className="h-4 w-4" />} label="URL" value={config.url} mono />
					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Method" value={config.method} />
					<ConfigRow icon={<Settings className="h-4 w-4" />} label="Content Type" value={config.contentType || "—"} />
					<ConfigRow
						icon={<Settings className="h-4 w-4" />}
						label="JSON Mode"
						value={config.useJson ? "Enabled" : "Disabled"}
					/>
					<ConfigRow icon={<Key className="h-4 w-4" />} label="Title Key" value={config.titleKey || "—"} mono />
					<ConfigRow icon={<Key className="h-4 w-4" />} label="Message Key" value={config.messageKey || "—"} mono />
					{config.headers?.map((h, i) => (
						<ConfigRow key={i} icon={<Link className="h-4 w-4" />} label={`Header ${i + 1}`} value={h} mono />
					))}
				</>
			);
		case "custom":
			return <ConfigRow icon={<Globe className="h-4 w-4" />} label="Shoutrrr URL" value={config.shoutrrrUrl} mono />;
	}
}

export function NotificationDetailsPage({ notificationId }: { notificationId: string }) {
	const navigate = useNavigate();
	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
	const { formatDateTime } = useTimeFormat();

	const { data } = useSuspenseQuery({
		...getNotificationDestinationOptions({ path: { id: notificationId } }),
	});

	const deleteDestination = useMutation({
		...deleteNotificationDestinationMutation(),
		onSuccess: () => {
			toast.success("Notification destination deleted successfully");
			void navigate({ to: "/notifications" });
		},
		onError: (error) => {
			toast.error("Failed to delete notification destination", {
				description: parseError(error)?.message,
			});
		},
	});

	const testDestination = useMutation({
		...testNotificationDestinationMutation(),
		onSuccess: () => {
			toast.success("Test notification sent successfully");
		},
		onError: (error) => {
			toast.error("Failed to send test notification", {
				description: parseError(error)?.message,
			});
		},
	});

	const handleConfirmDelete = () => {
		setShowDeleteConfirm(false);
		deleteDestination.mutate({ path: { id: String(data.id) } });
	};

	const handleTest = () => {
		testDestination.mutate({ path: { id: String(data.id) } });
	};

	return (
		<>
			<div className="flex flex-col gap-6 @container">
				<Card className="px-6 py-5">
					<div className="flex flex-col @wide:flex-row @wide:items-center justify-between gap-4">
						<div className="flex items-center gap-4">
							<div className="hidden @medium:flex items-center justify-center w-10 h-10 shrink-0 rounded-lg bg-muted/50 border border-border/50">
								<Bell className="h-5 w-5 text-muted-foreground" />
							</div>
							<div>
								<div className="flex items-center gap-2">
									<h2 className="text-lg font-semibold tracking-tight">{data.name}</h2>
									<Separator orientation="vertical" className="h-4 mx-1" />
									<Badge variant="outline" className="capitalize gap-1.5">
										<span className={cn("w-2 h-2 rounded-full shrink-0", getStatusClass(data.enabled, data.status))} />
										{getStatusLabel(data.enabled, data.status)}
									</Badge>
									<Badge variant="secondary" className="capitalize">
										{data.type}
									</Badge>
								</div>
								<p className="text-sm text-muted-foreground mt-0.5">Created {formatDateTime(data.createdAt)}</p>
							</div>
						</div>
						<div className="flex items-center gap-2">
							<Button
								onClick={handleTest}
								disabled={testDestination.isPending || !data.enabled}
								variant="outline"
								loading={testDestination.isPending}
							>
								<TestTube2 className="h-4 w-4 mr-2" />
								Test
							</Button>
							<DropdownMenu>
								<DropdownMenuTrigger asChild>
									<Button variant="outline">
										Actions
										<ChevronDown className="h-4 w-4 ml-1" />
									</Button>
								</DropdownMenuTrigger>
								<DropdownMenuContent align="end">
									<DropdownMenuItem onClick={() => navigate({ to: `/notifications/${data.id}/edit` })}>
										<Pencil />
										Edit
									</DropdownMenuItem>
									<DropdownMenuSeparator />
									<DropdownMenuItem
										variant="destructive"
										onClick={() => setShowDeleteConfirm(true)}
										disabled={deleteDestination.isPending}
									>
										<Trash2 />
										Delete
									</DropdownMenuItem>
								</DropdownMenuContent>
							</DropdownMenu>
						</div>
					</div>
				</Card>

				<Card className="px-6 py-6">
					<CardTitle className="flex items-center gap-2 mb-5">
						<Settings className="h-4 w-4 text-muted-foreground" />
						Configuration
					</CardTitle>
					<div className="space-y-0 divide-y divide-border/50">
						<NotificationConfigRows config={data.config} />
					</div>
				</Card>

				<Card className="px-6 py-6">
					<CardTitle className="flex items-center gap-2 mb-5">
						<Clock className="h-4 w-4 text-muted-foreground" />
						Delivery Health
					</CardTitle>
					<div className="space-y-0 divide-y divide-border/50">
						<ConfigRow
							icon={<Bell className="h-4 w-4" />}
							label="Status"
							value={getStatusLabel(data.enabled, data.status)}
						/>
						<ConfigRow icon={<Settings className="h-4 w-4" />} label="Enabled" value={data.enabled ? "Yes" : "No"} />
						<ConfigRow
							icon={<Clock className="h-4 w-4" />}
							label="Last Checked"
							value={data.lastChecked ? formatDateTime(data.lastChecked) : "Never"}
						/>
					</div>
				</Card>

				<Card className={cn("px-6 py-6", { hidden: !data.lastError })}>
					<CardTitle className="flex items-center gap-2 mb-3 text-red-600">
						<AlertCircle className="h-4 w-4" />
						Last Delivery Error
					</CardTitle>
					<p className="text-sm text-muted-foreground wrap-break-word">{data.lastError}</p>
				</Card>
			</div>

			<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
				<AlertDialogContent>
					<AlertDialogHeader>
						<AlertDialogTitle>Delete Notification Destination</AlertDialogTitle>
						<AlertDialogDescription>
							Are you sure you want to delete the notification destination "{data.name}"? This action cannot be undone
							and will remove this destination from all backup schedules.
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogCancel>Cancel</AlertDialogCancel>
						<AlertDialogAction onClick={handleConfirmDelete}>
							<Trash2 className="h-4 w-4 mr-2" />
							Delete
						</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
			</AlertDialog>
		</>
	);
}