"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import {
	AlertTriangle,
	Laptop,
	Loader2,
	Moon,
	Palette,
	Save,
	Settings,
	Sun,
	Trash2,
	User as UserIcon,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useTheme } from "next-themes";
import * as React from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import * as z from "zod";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Spinner } from "@/components/ui/spinner";
import { Textarea } from "@/components/ui/textarea";
import { useAuth } from "@/providers/auth-provider";
import { UserService } from "@/services/user.service";

const settingsSchema = z.object({
	displayName: z.string().max(32, "Le nom d'affichage est trop long").optional(),
	bio: z.string().max(255, "La bio est trop longue").optional(),
});

type SettingsFormValues = z.infer<typeof settingsSchema>;

export default function SettingsPage() {
	const { theme, setTheme } = useTheme();
	const { user, isLoading, refreshUser, logout } = useAuth();
	const router = useRouter();
	const [isSaving, setIsSaving] = React.useState(false);
	const [isDeleting, setIsDeleting] = React.useState(false);
	const [mounted, setMounted] = React.useState(false);

	React.useEffect(() => {
		setMounted(true);
	}, []);

	const form = useForm<SettingsFormValues>({
		resolver: zodResolver(settingsSchema),
		defaultValues: {
			displayName: "",
			bio: "",
		},
	});

	React.useEffect(() => {
		if (user) {
			form.reset({
				displayName: user.displayName || "",
				bio: user.bio || "",
			});
		}
	}, [user, form]);

	if (isLoading) {
		return (
			<div className="flex h-[400px] items-center justify-center">
				<Spinner className="h-8 w-8 text-primary" />
			</div>
		);
	}

	if (!user) {
		return (
			<div className="max-w-2xl mx-auto py-8 px-4 text-center">
				<Card>
					<CardHeader>
						<CardTitle>Accès refusé</CardTitle>
						<CardDescription>
							Vous devez être connecté pour accéder aux paramètres.
						</CardDescription>
					</CardHeader>
				</Card>
			</div>
		);
	}

	const onSubmit = async (values: SettingsFormValues) => {
		setIsSaving(true);
		try {
			await UserService.updateMe(values);
			toast.success("Paramètres mis à jour !");
			await refreshUser();
		} catch (error) {
			console.error(error);
			toast.error("Erreur lors de la mise à jour des paramètres.");
		} finally {
			setIsSaving(false);
		}
	};

	const handleDeleteAccount = async () => {
		setIsDeleting(true);
		try {
			await UserService.removeMe();
			toast.success("Votre compte a été supprimé.");
			logout();
			router.push("/");
		} catch (error) {
			console.error(error);
			toast.error("Erreur lors de la suppression du compte.");
		} finally {
			setIsDeleting(false);
		}
	};

	return (
		<div className="max-w-2xl mx-auto py-12 px-4">
			<div className="flex items-center gap-3 mb-8">
				<div className="bg-primary/10 p-3 rounded-xl">
					<Settings className="h-6 w-6 text-primary" />
				</div>
				<h1 className="text-3xl font-bold tracking-tight">Paramètres</h1>
			</div>

			<div className="space-y-8">
				<Card className="border-none shadow-sm">
					<CardHeader className="pb-4">
						<div className="flex items-center gap-2 mb-1">
							<UserIcon className="h-5 w-5 text-primary" />
							<CardTitle>Informations personnelles</CardTitle>
						</div>
						<CardDescription>
							Mettez à jour vos informations publiques. Ces données seront visibles par
							les autres utilisateurs.
						</CardDescription>
					</CardHeader>
					<CardContent>
						<Form {...form}>
							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
								<div className="grid gap-6">
									<div className="grid sm:grid-cols-2 gap-4">
										<FormItem>
											<FormLabel>Nom d'utilisateur</FormLabel>
											<FormControl>
												<Input
													value={user.username}
													disabled
													className="bg-muted cursor-not-allowed"
												/>
											</FormControl>
											<FormDescription>Identifiant unique non modifiable.</FormDescription>
										</FormItem>

										<FormField
											control={form.control}
											name="displayName"
											render={({ field }) => (
												<FormItem>
													<FormLabel>Nom d'affichage</FormLabel>
													<FormControl>
														<Input placeholder="Votre nom" {...field} />
													</FormControl>
													<FormDescription>Nom visible sur votre profil.</FormDescription>
													<FormMessage />
												</FormItem>
											)}
										/>
									</div>

									<FormField
										control={form.control}
										name="bio"
										render={({ field }) => (
											<FormItem>
												<FormLabel>Bio</FormLabel>
												<FormControl>
													<Textarea
														placeholder="Racontez-nous quelque chose sur vous..."
														className="resize-none min-h-[100px]"
														{...field}
													/>
												</FormControl>
												<FormDescription>
													Une courte description de vous (max 255 caractères).
												</FormDescription>
												<FormMessage />
											</FormItem>
										)}
									/>
								</div>

								<div className="flex justify-end border-t pt-6">
									<Button type="submit" disabled={isSaving} className="min-w-[150px]">
										{isSaving ? (
											<>
												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
												Enregistrement...
											</>
										) : (
											<>
												<Save className="mr-2 h-4 w-4" />
												Enregistrer
											</>
										)}
									</Button>
								</div>
							</form>
						</Form>
					</CardContent>
				</Card>

				<Card className="border-none shadow-sm">
					<CardHeader className="pb-4">
						<div className="flex items-center gap-2 mb-1">
							<Palette className="h-5 w-5 text-primary" />
							<CardTitle>Apparence</CardTitle>
						</div>
						<CardDescription>
							Personnalisez l'apparence de l'application selon vos préférences.
						</CardDescription>
					</CardHeader>
					<CardContent>
						<RadioGroup
							value={mounted ? theme : "system"}
							onValueChange={(value) => setTheme(value)}
							className="grid grid-cols-1 sm:grid-cols-3 gap-4"
						>
							<div className="relative">
								<RadioGroupItem value="light" id="light" className="peer sr-only" />
								<Label
									htmlFor="light"
									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
								>
									<Sun className="mb-3 h-6 w-6" />
									<span className="text-sm font-semibold">Clair</span>
								</Label>
							</div>

							<div className="relative">
								<RadioGroupItem value="dark" id="dark" className="peer sr-only" />
								<Label
									htmlFor="dark"
									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
								>
									<Moon className="mb-3 h-6 w-6" />
									<span className="text-sm font-semibold">Sombre</span>
								</Label>
							</div>

							<div className="relative">
								<RadioGroupItem value="system" id="system" className="peer sr-only" />
								<Label
									htmlFor="system"
									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
								>
									<Laptop className="mb-3 h-6 w-6" />
									<span className="text-sm font-semibold">Système</span>
								</Label>
							</div>
						</RadioGroup>
					</CardContent>
				</Card>

				<Card className="border-destructive/20 shadow-sm bg-destructive/5">
					<CardHeader className="pb-4">
						<div className="flex items-center gap-2 mb-1">
							<AlertTriangle className="h-5 w-5 text-destructive" />
							<CardTitle className="text-destructive">Zone de danger</CardTitle>
						</div>
						<CardDescription className="text-destructive/80 font-medium">
							Actions irréversibles concernant votre compte.
						</CardDescription>
					</CardHeader>
					<CardContent>
						<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 rounded-lg bg-white dark:bg-zinc-900 border border-destructive/20">
							<div className="space-y-1">
								<p className="font-bold">Supprimer mon compte</p>
								<p className="text-sm text-muted-foreground">
									Toutes vos données seront supprimées définitivement.
								</p>
							</div>
							<AlertDialog>
								<AlertDialogTrigger asChild>
									<Button variant="destructive" size="sm" className="font-semibold">
										<Trash2 className="h-4 w-4 mr-2" />
										Supprimer le compte
									</Button>
								</AlertDialogTrigger>
								<AlertDialogContent>
									<AlertDialogHeader>
										<AlertDialogTitle>Êtes-vous absolument sûr ?</AlertDialogTitle>
										<AlertDialogDescription>
											Cette action est irréversible. Votre compte sera supprimé
											définitivement ainsi que tous vos mèmes et vos favoris.
										</AlertDialogDescription>
									</AlertDialogHeader>
									<AlertDialogFooter>
										<AlertDialogCancel disabled={isDeleting}>Annuler</AlertDialogCancel>
										<AlertDialogAction
											onClick={handleDeleteAccount}
											disabled={isDeleting}
											className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
										>
											{isDeleting ? (
												<>
													<Loader2 className="mr-2 h-4 w-4 animate-spin" />
													Suppression...
												</>
											) : (
												"Confirmer la suppression"
											)}
										</AlertDialogAction>
									</AlertDialogFooter>
								</AlertDialogContent>
							</AlertDialog>
						</div>
					</CardContent>
				</Card>
			</div>
		</div>
	);
}