'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { useDropzone } from 'react-dropzone';
import { X, RotateCcw, UploadCloud } from 'lucide-react';

interface RHFUploadImageProps {
	name: string;
	label?: string;
	size?: number;
	defaultValue?: string;
	maxSizeMB?: number;
	className?: string;
}

const RHFUploadImage = ({
	name,
	label = 'Profile Picture',
	size = 160,
	defaultValue,
	maxSizeMB = 5,
	className,
}: RHFUploadImageProps) => {
	const { control, setValue } = useFormContext();
	const [lastFile, setLastFile] = useState<File | null>(null);
	const [previewUrl, setPreviewUrl] = useState<string | null>(null);

	const maxSizeBytes = maxSizeMB * 1024 * 1024;

	/** HANDLE FILE DROP */
	const onDrop = useCallback(
		(acceptedFiles: File[]) => {
			if (!acceptedFiles?.length) return;

			const file = acceptedFiles[0];

			if (file.size > maxSizeBytes) {
				alert(`File must be smaller than ${maxSizeMB}MB`);
				return;
			}

			setLastFile(file);
			setValue(name, file, { shouldValidate: true });
		},
		[name, setValue, maxSizeBytes, maxSizeMB]
	);

	const dropzone = useDropzone({
		onDrop,
		multiple: false,
		accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.webp'] },
	});

	/** CLEAN PREVIEW URL */
	useEffect(() => {
		return () => {
			if (previewUrl?.startsWith('blob:')) {
				URL.revokeObjectURL(previewUrl);
			}
		};
	}, [previewUrl]);

	return (
		<Controller
			name={name}
			control={control}
			render={({ field, fieldState }) => {
				const value = field.value || defaultValue;

				const preview = useMemo(() => {
					if (value instanceof File) {
						const url = URL.createObjectURL(value);
						setPreviewUrl(url);
						return url;
					}
					if (typeof value === 'string') return value;
					return null;
				}, [value]);

				const handleRemove = () => {
					setPreviewUrl(null);
					setLastFile(null);
					setValue(name, null, { shouldValidate: true });
				};

				const handleRetry = () => {
					if (lastFile) {
						setValue(name, lastFile, { shouldValidate: true });
					}
				};

				return (
					<div className="flex flex-col justify-center items-center gap-3 relative mt-4">
						{/* LABEL */}
						<div>
							<p className="font-semibold text-sm">{label}</p>
							{fieldState.error && (
								<p className="text-red-500 text-xs mt-1">
									{fieldState.error.message}
								</p>
							)}
						</div>

						{/* DROPZONE */}
						<div
							{...dropzone.getRootProps()}
							style={{ width: size, height: size }}
							className={`
  relative overflow-hidden rounded-xl
  border border-dashed
  flex items-center justify-center text-center cursor-pointer
  transition-all duration-300
  bg-[#1A1612]
  ${
		dropzone.isDragActive
			? 'border-[#CBB26A] bg-[#1F1A16]'
			: 'border-[#3A332C] hover:border-[#B89E55]'
  }
  shadow-[0_2px_8px_rgba(0,0,0,0.4)] ${className}
`}
						>
							<input {...dropzone.getInputProps()} />

							{preview ? (
								<>
									<img
										src={preview}
										alt="Uploaded preview"
										className="absolute inset-0 w-full h-full object-cover"
									/>

									<div className="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition flex items-center justify-center text-white text-xs">
										Click or drag to replace
									</div>
								</>
							) : (
								<div className="flex flex-col items-center gap-2 text-muted-foreground">
									<UploadCloud size={28} />
									<p className="text-xs">
										Drag & drop or click to upload
									</p>
									<p className="text-[11px]">
										PNG, JPG, WEBP (max {maxSizeMB}MB)
									</p>
								</div>
							)}
						</div>

						{/* REMOVE BUTTON */}
						{value && (
							<button
								type="button"
								onClick={handleRemove}
								className="absolute top-8 right-1/3 bg-red-500 hover:bg-red-600 text-white rounded-full p-1 shadow"
							>
								<X size={14} />
							</button>
						)}

						{/* RETRY BUTTON */}
						{lastFile && !value && (
							<button
								type="button"
								onClick={handleRetry}
								className="flex items-center gap-1 text-orange-600 text-xs hover:underline"
							>
								Retry <RotateCcw size={14} />
							</button>
						)}
					</div>
				);
			}}
		/>
	);
};

export default RHFUploadImage;