'use client';

import { Button } from '@/components/ui/button';
import FormProvider from '@/components/forms/FormProvider';
import RHFTextField from '@/components/forms/RHFTextField';
import PrimaryButton from '@/components/button/PrimaryButton';
import { Plus } from 'lucide-react';
import { useEffect } from 'react';
import RHFTextArea from '@/components/forms/RHFTextArea';
import {
	useCreateServiceMutation,
	useUpdateServiceMutation,
} from '@/store/slice/serviceApi';
import { zodResolver } from '@hookform/resolvers/zod/dist/zod.js';
import { useForm } from 'react-hook-form';
import {
	CreateServiceInput,
	createServiceInputDefault,
	CreateServiceSchema,
	UpdateServiceSchema,
} from '@/lib/modules/service/service.validation';
import useFormSubmitHandler from '@/hooks/formHandler';
import RHFUploadImage from '@/components/forms/RHFUploadImage';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import { Service } from '@/types';
import RHFCheckbox from '@/components/forms/RHFChekBox';

const ServiceForm = ({
	isDialogOpen,
	setIsDialogOpen,
	isEditing = false,
	setEditService,
	service,
}: {
	isEditing: boolean;
	setEditService: (service: any) => void;
	service?: Service | null;
	setIsDialogOpen: (open: boolean) => void;
	isDialogOpen: boolean;
}) => {
	const [createService, { isLoading: isCreating }] =
		useCreateServiceMutation();

	const [updateService, { isLoading: isUpdating }] =
		useUpdateServiceMutation();

	const schema = isEditing ? UpdateServiceSchema : CreateServiceSchema;

	const methods = useForm<CreateServiceInput>({
		defaultValues: createServiceInputDefault,
		resolver: zodResolver(schema),
		mode: 'onChange',
	});
	const handleCreateService = useFormSubmitHandler(
		async (data: CreateServiceInput) => {
			const formData = new FormData();

			formData.append('title', data.title);
			formData.append('slug', data.slug);
			formData.append('description', data.description);
			formData.append('isActive', data.isActive ? 'true' : 'false');

			// Only append image when it really exists:
			if (data.image instanceof File) {
				formData.append('image', data.image);
			} else if (
				typeof data.image === 'string' &&
				data.image.trim().length > 0
			) {
				formData.append('image', data.image);
			}

			if (isEditing && service?.id) {
				formData.append('id', service.id);
			}

			let result = null;

			console.log('Submitting service form with data:', {
				title: data.title,
				slug: data.slug,
				description: data.description,
				image: data.image instanceof File ? data.image.name : data.image,
				id: service?.id,
			});

			if (isEditing && service)
				result = await updateService({
					id: service.id,
					data: formData,
				}).unwrap();
			else result = await createService(formData).unwrap();
			return { data: result };
		},
		() => {
			setIsDialogOpen(false);
		},
		isEditing
			? 'Service updated successfully'
			: 'Service created successfully'
	);

	// reset form when opening for edit (use null for image default)
	useEffect(() => {
		if (service && service?.id && isDialogOpen) {
			methods.reset({
				title: service.title,
				slug: service.slug,
				description: service.description,
				image: service.image ?? '',
				isActive: service.isActive || false,
			});
		}

		// if creating new -> reset to defaults when opening
		if (!service && isDialogOpen) {
			methods.reset(createServiceInputDefault as any);
		}
	}, [service, isDialogOpen]);

	const isLoading = isEditing ? isUpdating : isCreating;

	return (
		<>
			<Button onClick={() => setIsDialogOpen(true)}>
				<Plus className="mr-2 h-4 w-4" /> Add Service
			</Button>

			<CustomResponsiveDialog
				open={isDialogOpen}
				setOpen={(v) => {
					setIsDialogOpen(v);
					// clear edit intent when closing
					if (!v) setEditService(null);
				}}
				// header: responsive title + subtitle
				header={
					<div className="w-full">
						<h2 className="text-lg font-semibold text-foreground/90">
							{isEditing ? 'Edit Service' : 'Add New Service'}
						</h2>
						<p className="mt-1 text-sm text-foreground/60">
							{isEditing
								? 'Update the details of your service'
								: 'Add a new service to your portfolio'}
						</p>
					</div>
				}
				// control padding for dialog content (desktop)
				classNameContent="m-0 p-0 max-w-[640px] p-4 rounded-lg bg-background border-none max-h-[90vh] overflow-y-scroll overflow-x-scroll scrollbar-x-hidden"
				// control body padding for both dialog & drawer
				classNameBody="px-2 py-6 sm:px-12 sm:py-6"
				// style the close button (absolute top-right)
				classNameCloseBtn="absolute top-4 right-4 text-[#CD3232] cursor-pointer"
			>
				{/* children (form) */}
				<FormProvider
					methods={methods}
					onSubmit={methods.handleSubmit(handleCreateService)}
				>
					<div className="grid w-full items-center gap-4">
						<RHFUploadImage
							name="image"
							label="Service Image"
							size={200}
						/>
						<RHFTextField
							name="title"
							label="Service Title"
							placeholder="Enter service title"
							isRequired
						/>
						<RHFTextField
							name="slug"
							label="Service Slug"
							placeholder="Enter service slug"
							isRequired
						/>
						<RHFTextArea
							name="description"
							label="Service Description"
							placeholder="Enter a brief description of the service"
							isRequired
							rows={4}
						/>
						<RHFCheckbox
							name="isActive"
							disabled={false}
							label="Make this fleet active (visible to customers)"
						/>

						<PrimaryButton
							type="submit"
							title={isEditing ? 'Update Service' : 'Create Service'}
							className="bg-primary/90 w-full"
							isLoading={isLoading}
						/>
					</div>
				</FormProvider>
			</CustomResponsiveDialog>
		</>
	);
};

export default ServiceForm;