'use client';

import FormProvider from '@/components/forms/FormProvider';
import RHFTextField from '@/components/forms/RHFTextField';
import RHFUploadImage from '@/components/forms/RHFUploadImage';
import PrimaryButton from '@/components/button/PrimaryButton';
import { User, Mail, Lock } from 'lucide-react';
import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import { AdminAccount } from '@/app/generated/prisma/client';
import {
	useCreateAdminMutation,
	useUpdateAdminMutation,
} from '@/store/slice/adminAccountApi';
import {
	AdminFormInput,
	AdminSchema,
	defaultAdminValues,
	UpdateAdminFormInput,
	updateAdminSchema,
	defaultUpdateAdminValues,
} from '../_schema/admin';
import useFormSubmitHandler from '@/hooks/formHandler';

interface Props {
	isDialogOpen: boolean;
	setIsDialogOpen: (open: boolean) => void;
	isEditing?: boolean;
	admin?: AdminAccount | null;
	setEditAdmin?: (admin: AdminAccount | null) => void;
}

const AdminForm = ({
	isDialogOpen,
	setIsDialogOpen,
	isEditing = false,
	admin,
	setEditAdmin = () => {},
}: Props) => {
	const [createAdmin] = useCreateAdminMutation();
	const [updateAdmin] = useUpdateAdminMutation();

	// Select schema and default values
	const methods = useForm<AdminFormInput | UpdateAdminFormInput>({
		defaultValues: isEditing ? defaultUpdateAdminValues : defaultAdminValues,
		resolver: zodResolver(isEditing ? updateAdminSchema : AdminSchema) as any,
		mode: 'onChange',
	});

	const watchedIsActive = methods.watch('isActive');

	// -----------------------
	// Submit Handler
	// -----------------------
	const handleSubmitForm = useFormSubmitHandler(
		async (data: AdminFormInput | UpdateAdminFormInput) => {
			const formData = new FormData();

			formData.append('fullName', data.fullName);
			formData.append('email', data.email);
			formData.append('isActive', String(data.isActive));

			if ('password' in data && data.password) {
				formData.append('password', data.password);
			}

			if (data.profileImage instanceof File) {
				formData.append('profileImage', data.profileImage);
			} else if (typeof data.profileImage === 'string') {
				formData.append('profileImage', data.profileImage);
			}

			let result;

			if (isEditing) {
				result = await updateAdmin(formData).unwrap();
			} else {
				result = await createAdmin(formData).unwrap();
			}

			return { data: result }; // ✅ REQUIRED
		},
		() => {
			setIsDialogOpen(false);
			setEditAdmin(null);
		},
		isEditing ? 'Admin updated successfully' : 'Admin created successfully'
	);

	// Reset form when dialog opens
	useEffect(() => {
		if (admin && isDialogOpen) {
			methods.reset({
				fullName: admin.fullName,
				email: admin.email,
				isActive: admin.isActive,
				profileImage: admin.profileImage || null,
			});
		} else if (isDialogOpen) {
			methods.reset(
				isEditing ? defaultUpdateAdminValues : defaultAdminValues
			);
		}
	}, [admin, isDialogOpen, isEditing, methods]);

	return (
		<CustomResponsiveDialog
			open={isDialogOpen}
			setOpen={setIsDialogOpen}
			header={
				<div className="w-full">
					<h2 className="text-2xl font-bold bg-linear-to-r from-primary to-primary/60 bg-clip-text text-transparent">
						{isEditing ? 'Edit Admin User' : 'Add New Admin'}
					</h2>
					<p className="mt-2 text-sm text-foreground/60">
						{isEditing
							? 'Update admin user details below'
							: 'Add a new admin user to manage the platform'}
					</p>
				</div>
			}
			classNameContent="m-0 p-0 max-w-2xl rounded-2xl bg-background border-none max-h-[90vh] overflow-y-auto scrollbar-thin scrollbar-thumb-primary/20 scrollbar-track-transparent"
			classNameBody="px-8 py-8"
			classNameCloseBtn="absolute top-6 right-6 text-foreground/40 hover:text-primary hover:rotate-90 transition-all duration-300 cursor-pointer"
		>
			<FormProvider
				methods={methods}
				onSubmit={methods.handleSubmit(handleSubmitForm)}
			>
				<div className="space-y-8">
					<RHFUploadImage
						name="profileImage"
						label="Profile Image"
						size={150}
					/>

					<div className="space-y-6">
						<div className="relative group">
							<User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground/40 group-focus-within:text-primary transition-colors" />
							<RHFTextField
								name="fullName"
								label="Full Name"
								placeholder="Enter full name"
								isRequired
							/>
						</div>

						<div className="relative group">
							<Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground/40 group-focus-within:text-primary transition-colors" />
							<RHFTextField
								name="email"
								label="Email"
								placeholder="Enter email"
								isRequired
								disabled={isEditing} // <-- disable in edit mode
							/>
						</div>

						{!isEditing && (
							<div className="relative group">
								<Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-foreground/40 group-focus-within:text-primary transition-colors" />
								<RHFTextField
									name="password"
									label="Password"
									placeholder="Enter password"
									type="password"
									isRequired
								/>
							</div>
						)}

						<div className="flex items-center justify-between p-4 bg-foreground/5 rounded-xl">
							<div className="space-y-1">
								<Label
									htmlFor="isActive"
									className="text-sm font-medium"
								>
									Active Status
								</Label>
								<p className="text-xs text-foreground/40">
									Toggle to enable or disable this admin
								</p>
							</div>
							<div className="flex items-center gap-3">
								<span className="text-sm text-foreground/60">
									{watchedIsActive ? 'Active' : 'Inactive'}
								</span>
								<Switch
									id="isActive"
									checked={watchedIsActive}
									onCheckedChange={(checked) =>
										methods.setValue('isActive', checked)
									}
									className="data-[state=checked]:bg-primary"
								/>
							</div>
						</div>
					</div>

					<PrimaryButton
						type="submit"
						title={isEditing ? 'Update Admin' : 'Add Admin'}
						isLoading={false}
					/>
				</div>
			</FormProvider>
		</CustomResponsiveDialog>
	);
};

export default AdminForm;