import type { Models } from "@nontara/server/models";
import { useMutation } from "@tanstack/react-query";
import lodash from "lodash";
import { Loader2Icon } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useOnboard } from "@/hooks/useOnboard";
import { apiClient } from "@/lib/api";

export function OnboardCompletePage() {
	const onboard = useOnboard();
	const navigate = useNavigate();
	const [data] = useState(() => onboard.dump());
	const onboardCompletedMutation = useMutation({
		mutationFn: async (variables: Models.OnboardCompletedInput) => {
			const response = await apiClient.post<Models.OnboardCompletedOutput>(
				"onboard/complete",
				{
					json: variables,
				},
			);
			return await response.json();
		},
	});
	const handleCompletionOnboard = async () => {
		try {
			const onboardResult = onboard.dump();
			await onboardCompletedMutation.mutateAsync(onboardResult);
			navigate("/login");
		} catch (error) {
			if (error instanceof Error) {
				toast.error(error.message);
			}
		}
	};

	const handleBackClick = () => {
		navigate("/onboard/language");
	};

	return (
		<div className="mx-auto flex w-full max-w-3xl flex-col gap-8 py-8 text-center">
			<div className="space-y-2">
				<h1 className="font-semibold text-4xl tracking-tight">
					Setup complete
				</h1>
				<p className="text-muted-foreground">
					You&apos;re all set! Review the summary below and jump into your
					dashboard when you&apos;re ready.
				</p>
			</div>

			<div className="grid gap-4 text-left sm:grid-cols-3">
				<Card>
					<CardHeader>
						<CardTitle className="font-semibold text-muted-foreground text-sm uppercase">
							Account
						</CardTitle>
					</CardHeader>
					<CardContent>
						<p className="font-medium text-lg">
							{data.account.name ?? "Not set"}
						</p>
						<p className="text-muted-foreground text-sm">
							Primary administrator
						</p>
						{lodash.isEmpty(data.account) ? (
							<Button
								onClick={() => navigate("/onboard")}
								size="sm"
								className="mt-5"
							>
								Setup account
							</Button>
						) : null}
					</CardContent>
				</Card>

				<Card>
					<CardHeader>
						<CardTitle className="font-semibold text-muted-foreground text-sm uppercase">
							Libraries
						</CardTitle>
					</CardHeader>
					<CardContent>
						<p className="font-medium text-lg">
							{data.libraries.length === 0
								? "None configured"
								: `${data.libraries.length} ${data.libraries.length === 1 ? "library" : "libraries"}`}
						</p>
						{data.libraries.map((library) => (
							<p
								key={library.id}
								className="truncate text-muted-foreground text-sm"
							>
								{library.name}
							</p>
						))}
						{data.libraries.length === 0 ? (
							<Button
								onClick={() => navigate("/onboard/setup")}
								size="sm"
								className="mt-5 align-bottom"
							>
								Configure libraries
							</Button>
						) : null}
					</CardContent>
				</Card>

				<Card>
					<CardHeader>
						<CardTitle className="font-semibold text-muted-foreground text-sm uppercase">
							Languages
						</CardTitle>
					</CardHeader>
					<CardContent>
						<p className="font-medium text-lg">
							Primary: {data.languages.primary?.toUpperCase() ?? "Not set"}
						</p>
						<p className="text-muted-foreground text-sm">
							Fallback: {data.languages?.fallback?.toUpperCase() ?? "Not set"}
						</p>
						{lodash.isEmpty(data.languages) ? (
							<Button
								onClick={() => navigate("/onboard/language")}
								size="sm"
								className="mt-5 align-bottom"
							>
								Configure language
							</Button>
						) : null}
					</CardContent>
				</Card>
			</div>

			<div className="flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
				<Button
					type="button"
					variant="outline"
					size="lg"
					onClick={handleBackClick}
				>
					Previous
				</Button>
				<Button
					disabled={onboardCompletedMutation.isPending}
					size="lg"
					onClick={handleCompletionOnboard}
				>
					{onboardCompletedMutation.isPending && (
						<Loader2Icon className="animate-spin" />
					)}
					Complete Setup
				</Button>
			</div>
		</div>
	);
}
