"use client";

import type { User } from "@/app/admin/users/columns";
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { DialogClose } from "@/components/ui/dialog";
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { useToast } from "@/components/ui/use-toast";
import { deleteUser, updateUser } from "@/server/actions/users";
import type { UserRole } from "@/server/auth/permissions";
import { zodResolver } from "@hookform/resolvers/zod";
import { SaveIcon, TrashIcon } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";

export const formSchema = z.object({
	username: z
		.string()
		.min(2, {
			message: "Der Benutzername muss mindestens 2 Zeichen lang sein.",
		})
		.max(50),
	displayName: z
		.string()
		.min(2, {
			message: "Der Anzeigename muss mindestens 2 Zeichen lang sein.",
		})
		.max(50),
	email: z.string().email(),
	role: z.enum(["admin", "user", "guest"]),
});

interface ProfileFormProps {
	user: User;
}

export function ProfileForm(props: ProfileFormProps) {
	const { user } = props;
	const { toast } = useToast();

	// 1. Define your form.
	const form = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
		defaultValues: {
			username: user.username,
			displayName: user.displayName,
			email: user.email,
			role: user.role as UserRole,
		},
	});

	// 2. Define a submit handler.
	async function onSubmit(values: z.infer<typeof formSchema>) {
		toast({ description: "Benutzerprofil wird aktualisiert..." });

		await updateUser(user.id, values);

		toast({ description: "Benutzerprofil wurde aktualisiert." });
	}

	return (
		<Form {...form}>
			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
				<FormField
					control={form.control}
					name="username"
					render={({ field }) => (
						<FormItem>
							<FormLabel>Benutzername</FormLabel>
							<FormControl>
								<Input placeholder="MAXMUS" {...field} />
							</FormControl>
							<FormDescription>
								Nur in Ausnahmefällen sollte der Benutzername geändert werden.
							</FormDescription>
							<FormMessage />
						</FormItem>
					)}
				/>
				<FormField
					control={form.control}
					name="displayName"
					render={({ field }) => (
						<FormItem>
							<FormLabel>Anzeigename</FormLabel>
							<FormControl>
								<Input placeholder="Max Mustermann" {...field} />
							</FormControl>
							<FormDescription>
								Der Anzeigename darf frei verändert werden.
							</FormDescription>
							<FormMessage />
						</FormItem>
					)}
				/>
				<FormField
					control={form.control}
					name="email"
					render={({ field }) => (
						<FormItem>
							<FormLabel>E-Mail Adresse</FormLabel>
							<FormControl>
								<Input
									placeholder="max.mustermann@mercedes-benz.com"
									{...field}
								/>
							</FormControl>
							<FormDescription>
								Nur in Ausnahmefällen sollte die E-Mail Adresse geändert werden.
							</FormDescription>
							<FormMessage />
						</FormItem>
					)}
				/>
				<FormField
					control={form.control}
					name="role"
					render={({ field }) => (
						<FormItem>
							<FormLabel>Benutzerrolle</FormLabel>
							<Select onValueChange={field.onChange} defaultValue={field.value}>
								<FormControl>
									<SelectTrigger>
										<SelectValue placeholder="Select a verified email to display" />
									</SelectTrigger>
								</FormControl>
								<SelectContent>
									<SelectItem value="admin">Administrator</SelectItem>
									<SelectItem value="user">Benutzer</SelectItem>
									<SelectItem value="guest">Gast</SelectItem>
								</SelectContent>
							</Select>
							<FormDescription>
								Die Benutzerrolle bestimmt die Berechtigungen des Benutzers.
							</FormDescription>
							<FormMessage />
						</FormItem>
					)}
				/>
				<div className="flex justify-between items-center">
					<AlertDialog>
						<AlertDialogTrigger asChild>
							<Button
								type="submit"
								variant="destructive"
								className="gap-2 flex items-center"
							>
								<TrashIcon className="w-4 h-4" />
								<span>Benutzer löschen</span>
							</Button>
						</AlertDialogTrigger>
						<AlertDialogContent>
							<AlertDialogHeader>
								<AlertDialogTitle>Bist du dir sicher?</AlertDialogTitle>
								<AlertDialogDescription>
									Diese Aktion kann nicht rückgängig gemacht werden. Das
									Benutzerprofil und die damit verbundenen Daten werden
									unwiderruflich gelöscht.
								</AlertDialogDescription>
							</AlertDialogHeader>
							<AlertDialogFooter>
								<AlertDialogCancel>Abbrechen</AlertDialogCancel>
								<AlertDialogAction
									className="bg-red-500"
									onClick={() => {
										toast({ description: "Benutzerprofil wird gelöscht..." });
										deleteUser(user.id);
										toast({ description: "Benutzerprofil wurde gelöscht." });
									}}
								>
									Ja, löschen
								</AlertDialogAction>
							</AlertDialogFooter>
						</AlertDialogContent>
					</AlertDialog>
					<DialogClose asChild>
						<Button type="submit" className="gap-2 flex items-center">
							<SaveIcon className="w-4 h-4" />
							<span>Speichern</span>
						</Button>
					</DialogClose>
				</div>
			</form>
		</Form>
	);
}
