'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useDropzone } from 'react-dropzone';
import { Button } from '@/components/ui/button';
import { useCallback } from 'react';
import { useUploadProfileMutation } from '@/store/slice/uploadApi';
import {
	ProfileImageInput,
	profileImageSchema,
} from '@/lib/schemas/profile.schema';
import { useRouter } from 'next/navigation';

export function ProfileUpload() {
	const router = useRouter();
	const [uploadProfile, { isLoading }] = useUploadProfileMutation();

	const form = useForm<ProfileImageInput>({
		resolver: zodResolver(profileImageSchema),
	});

	const onDrop = useCallback(
		(acceptedFiles: File[]) => {
			if (acceptedFiles.length > 0) {
				form.setValue('file', acceptedFiles[0], { shouldValidate: true });
			}
		},
		[form]
	);

	const { getRootProps, getInputProps } = useDropzone({
		onDrop,
		accept: { 'image/*': [] },
		maxFiles: 1,
	});

	const onSubmit = async (data: ProfileImageInput) => {
		try {
			const formData = new FormData();
			formData.append('file', data.file);

			const res = await uploadProfile(formData).unwrap();

			console.log('Uploaded:', res.profileImage);

			// Refresh server component
			router.refresh();
		} catch (error) {
			console.error('Upload failed', error);
		}
	};

	return (
		<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
			<div
				{...getRootProps()}
				className="border-2 border-dashed p-6 text-center cursor-pointer rounded-lg"
			>
				<input {...getInputProps()} />
				<p>Drag & drop profile image here</p>
			</div>

			{form.formState.errors.file && (
				<p className="text-red-500 text-sm">
					{form.formState.errors.file.message}
				</p>
			)}

			<Button type="submit" disabled={isLoading}>
				{isLoading ? 'Uploading...' : 'Upload'}
			</Button>
		</form>
	);
}