'use client';

import FormProvider from '@/components/forms/FormProvider';
import RHFTextField from '@/components/forms/RHFTextField';
import PrimaryButton from '@/components/button/PrimaryButton';
import { Building2, Link2 } from 'lucide-react';
import { useEffect } from 'react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import {
	CreateTrustedClientInput,
	createTrustedClientInputDefault,
	CreateTrustedClientSchema,
	UpdateTrustedClientSchema,
} from '@/lib/modules/trusted-client/trusted-client.validation';
import useFormSubmitHandler from '@/hooks/formHandler';
import RHFUploadImage from '@/components/forms/RHFUploadImage';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import { TrustedClient } from '@/lib/modules/trusted-client/trusted-client.types';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import {
	useCreateTrustedClientMutation,
	useUpdateTrustedClientMutation,
} from '@/store/slice/trustedClientApi';

const TrustedClientForm = ({
	isDialogOpen,
	setIsDialogOpen,
	isEditing = false,
	setEditClient = () => {},
	client,
}: {
	isEditing: boolean;
	setEditClient?: (client: any) => void;
	client?: TrustedClient | null;
	setIsDialogOpen: (open: boolean) => void;
	isDialogOpen: boolean;
}) => {
	const [createClient, { isLoading: isCreating }] =
		useCreateTrustedClientMutation();

	const [updateClient, { isLoading: isUpdating }] =
		useUpdateTrustedClientMutation();
	const schema = isEditing
		? UpdateTrustedClientSchema
		: CreateTrustedClientSchema;

	const methods = useForm<CreateTrustedClientInput>({
		defaultValues: createTrustedClientInputDefault,
		resolver: zodResolver(schema) as any,
		mode: 'onChange',
	});

	const handleCreateClient = useFormSubmitHandler(
		async (data: CreateTrustedClientInput) => {
			const formData = new FormData();

			formData.append('name', data.name);
			formData.append('link', data.link || '');
			formData.append('isActive', String(data.isActive ?? true));

			// Handle logo upload
			if (data.logo instanceof File) {
				formData.append('logo', data.logo);
			} else if (
				typeof data.logo === 'string' &&
				data.logo.trim().length > 0
			) {
				formData.append('logo', data.logo);
			}

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

			let result = null;

			console.log(formData);

			if (isEditing && client) {
				result = await updateClient({
					id: client.id,
					formData,
				}).unwrap();
			} else {
				result = await createClient(formData).unwrap();
			}
			return { data: result };
		},
		() => {
			setIsDialogOpen(false);
			setEditClient(null);
		},
		isEditing
			? 'Trusted client updated successfully'
			: 'Trusted client created successfully'
	);

	const watch = methods.watch;

	const watchedIsActive = watch('isActive');

	// Reset form when opening
	useEffect(() => {
		if (client && client?.id && isDialogOpen) {
			methods.reset({
				name: client.name,
				link: client.link || '',
				isActive: client.isActive,
				logo: client.logo || '',
			});
		}

		if (!client && isDialogOpen) {
			methods.reset(createTrustedClientInputDefault);
		}
	}, [client, isDialogOpen, methods]);

	const isLoading = isEditing ? isUpdating : isCreating;

	return (
		<>
			<CustomResponsiveDialog
				open={isDialogOpen}
				setOpen={(v) => {
					setIsDialogOpen(v);
					if (!v) {
						// setEditClient(null);
					}
				}}
				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 Trusted Client'
								: 'Add New Trusted Client'}
						</h2>
						<p className="mt-2 text-sm text-foreground/60">
							{isEditing
								? 'Update your trusted client details below'
								: 'Add a new trusted client to showcase on your website'}
						</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(handleCreateClient)}
				>
					<div className="space-y-8">
						{/* Logo Upload Section */}
						<div className="relative">
							<RHFUploadImage
								name="logo"
								label="Company Logo"
								size={150}
							/>
						</div>

						{/* Form Fields */}
						<div className="space-y-6">
							{/* Name Field */}
							<div className="relative group">
								<Building2 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="name"
									label="Company name"
									placeholder="Company name"
									isRequired
								/>
							</div>

							{/* Link Field */}
							<div className="relative group">
								<Link2 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="link"
									label="Website URL"
									placeholder="Website URL"
									isRequired={false}
								/>
							</div>

							{/* Active Status Switch */}
							<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 show/hide this client on your website
									</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>

						{/* Submit Button */}
						<PrimaryButton
							type="submit"
							title={isEditing ? 'Update Client' : 'Add Client'}
							isLoading={isLoading}
						/>
					</div>
				</FormProvider>
			</CustomResponsiveDialog>
		</>
	);
};

export default TrustedClientForm;