memegoat/frontend/src/app/(dashboard)/admin/users/user-edit-dialog.tsx

"use client";

import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogFooter,
	DialogHeader,
	DialogTitle,
} from "@/components/ui/dialog";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { UserService } from "@/services/user.service";
import type { User } from "@/types/user";

interface UserEditDialogProps {
	user: User | null;
	open: boolean;
	onOpenChange: (open: boolean) => void;
	onSuccess: () => void;
}

export function UserEditDialog({
	user,
	open,
	onOpenChange,
	onSuccess,
}: UserEditDialogProps) {
	const [loading, setLoading] = useState(false);

	const form = useForm<Partial<User>>({
		defaultValues: {
			role: "user",
			status: "active",
		},
	});

	useEffect(() => {
		if (user) {
			form.reset({
				role: user.role || "user",
				status: user.status || "active",
			});
		}
	}, [user, form]);

	const onSubmit = async (values: Partial<User>) => {
		if (!user) return;
		setLoading(true);
		try {
			await UserService.updateAdmin(user.uuid, values);
			onSuccess();
			onOpenChange(false);
		} catch (error) {
			console.error(error);
		} finally {
			setLoading(false);
		}
	};

	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent>
				<DialogHeader>
					<DialogTitle>Modifier l'utilisateur @{user?.username}</DialogTitle>
				</DialogHeader>
				<Form {...form}>
					<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
						<FormField
							control={form.control}
							name="role"
							render={({ field }) => (
								<FormItem>
									<FormLabel>Rôle</FormLabel>
									<Select
										onValueChange={field.onChange}
										defaultValue={field.value}
										value={field.value}
									>
										<FormControl>
											<SelectTrigger>
												<SelectValue placeholder="Sélectionner un rôle" />
											</SelectTrigger>
										</FormControl>
										<SelectContent>
											<SelectItem value="user">Utilisateur</SelectItem>
											<SelectItem value="moderator">Modérateur</SelectItem>
											<SelectItem value="admin">Administrateur</SelectItem>
										</SelectContent>
									</Select>
									<FormMessage />
								</FormItem>
							)}
						/>
						<FormField
							control={form.control}
							name="status"
							render={({ field }) => (
								<FormItem>
									<FormLabel>Statut</FormLabel>
									<Select
										onValueChange={field.onChange}
										defaultValue={field.value}
										value={field.value}
									>
										<FormControl>
											<SelectTrigger>
												<SelectValue placeholder="Sélectionner un statut" />
											</SelectTrigger>
										</FormControl>
										<SelectContent>
											<SelectItem value="active">Actif</SelectItem>
											<SelectItem value="suspended">Suspendu</SelectItem>
											<SelectItem value="pending">En attente</SelectItem>
										</SelectContent>
									</Select>
									<FormMessage />
								</FormItem>
							)}
						/>
						<DialogFooter>
							<Button
								type="button"
								variant="outline"
								onClick={() => onOpenChange(false)}
							>
								Annuler
							</Button>
							<Button type="submit" disabled={loading}>
								{loading ? "Enregistrement..." : "Enregistrer"}
							</Button>
						</DialogFooter>
					</form>
				</Form>
			</DialogContent>
		</Dialog>
	);
}