'use client';

import { cn } from '@admin/utils/common';
import { Upload, X } from 'lucide-react';
import { useRef, useState } from 'react';
import { Controller, useFormContext } from 'react-hook-form';

interface FileFieldProps {
    name: string;
    accept?: string;
    multiple?: boolean;
    maxSize?: number; // in MB
    disabled?: boolean;
    className?: string;
    placeholder?: string;
    preview?: boolean; // Show image preview
    dragDrop?: boolean; // Enable drag and drop
    currentUrl?: string; // Existing image url to show when no new file is selected
    placeholderUrl?: string; // Placeholder image url
}

export const FileField = ({
    name,
    accept,
    multiple = false,
    maxSize = 5,
    disabled,
    className,
    placeholder = 'Choose File',
    preview = true,
    dragDrop = false,
    currentUrl,
    placeholderUrl,
}: FileFieldProps) => {
    const { control, setValue } = useFormContext();
    const fileInputRef = useRef<HTMLInputElement>(null);
    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
    const [previewUrls, setPreviewUrls] = useState<string[]>([]);

    const handleFileSelect = (files: FileList | null) => {
        if (!files) return;
        const fileArray = Array.from(files);
        const validFiles = fileArray.filter((file) => {
            if (maxSize && file.size > maxSize * 1024 * 1024) {
                console.warn(`File ${file.name} exceeds maximum size of ${maxSize}MB`);
                return false;
            }
            return true;
        });

        setSelectedFiles(validFiles);

        // Create preview URLs for images
        if (preview) {
            const urls = validFiles.map((file) => {
                if (file.type.startsWith('image/')) {
                    return URL.createObjectURL(file);
                }
                return '';
            });
            setPreviewUrls(urls);
        }

        // Update form value
        setValue(name, multiple ? validFiles : validFiles[0] || null);
    };

    const removeFile = (index: number) => {
        const newFiles = selectedFiles.filter((_, i) => i !== index);
        const newUrls = previewUrls.filter((_, i) => i !== index);

        setSelectedFiles(newFiles);
        setPreviewUrls(newUrls);
        setValue(name, multiple ? newFiles : newFiles[0] || null);
    };

    const openFileDialog = () => {
        if (disabled) return;
        fileInputRef.current?.click();
    };

    return (
        <Controller
            control={control}
            name={name}
            render={({ field }) => (
                <div className="space-y-4">
                    {/* Selected Image Preview - Show current logo or uploaded image */}
                    <div className="flex justify-center">
                        {selectedFiles.length > 0 && previewUrls[0] ? (
                            <div className="relative">
                                <img src={previewUrls[0]} alt="Company Logo" className="h-20 w-auto max-w-full object-contain" />
                                <button
                                    type="button"
                                    onClick={() => removeFile(0)}
                                    className="absolute -top-2 -right-2 rounded-full bg-red-500 p-1 text-white hover:bg-red-600"
                                    disabled={disabled}
                                >
                                    <X className="h-3 w-3" />
                                </button>
                            </div>
                        ) : currentUrl ? (
                            <div className="flex h-20 w-32 items-center justify-center rounded-lg bg-gray-50">
                                <img
                                    src={currentUrl}
                                    alt="Company Logo"
                                    className="h-20 w-auto max-w-full object-contain"
                                    onError={(e) => {
                                        (e.target as HTMLImageElement).src = placeholderUrl;
                                    }}
                                />
                            </div>
                        ) : (
                            // Default placeholder
                            <div className="flex h-20 w-32 items-center justify-center rounded-lg bg-gray-50">
                                <img src={placeholderUrl} alt="Company Logo" className="h-20 w-auto max-w-full object-contain" />
                            </div>
                        )}
                    </div>

                    {/* File Input Button */}
                    <div className="text-center">
                        <input
                            ref={fileInputRef}
                            type="file"
                            accept={accept}
                            multiple={multiple}
                            disabled={disabled}
                            onChange={(e) => handleFileSelect(e.target.files)}
                            className="sr-only"
                        />

                        <button
                            type="button"
                            onClick={openFileDialog}
                            disabled={disabled}
                            className={cn(
                                'inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none',
                                disabled && 'cursor-not-allowed opacity-50',
                                className,
                            )}
                        >
                            <Upload className="mr-2 h-4 w-4" />
                            {placeholder}
                        </button>
                    </div>
                </div>
            )}
        />
    );
};