import React, { useId, useRef, useState } from 'react';

interface DropZoneProps {
    isMultiple?: boolean;
    fileType?: string;
    label?: string;
    error?: string;
    onFilesSelected?: (files: FileList | null) => void;
}

export default function DropZone({
    isMultiple = false,
    fileType,
    label,
    error,
    onFilesSelected,
}: DropZoneProps) {
    const id = useId();
    const [active, setActive] = useState(false);
    const inputRef = useRef<HTMLInputElement>(null);

    const handleDragEnter = (e: React.DragEvent) => {
        e.preventDefault();
        setActive(true);
    };

    const handleDragLeave = (e: React.DragEvent) => {
        e.preventDefault();
        setActive(false);
    };

    const handleDrop = (e: React.DragEvent) => {
        e.preventDefault();
        setActive(false);
        onFilesSelected?.(e.dataTransfer.files);
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        onFilesSelected?.(e.target.files);
    };

    return (
        <div
            onDragEnter={handleDragEnter}
            onDragLeave={handleDragLeave}
            onDragOver={(e) => e.preventDefault()}
            onDrop={handleDrop}
            className={`h-48 flex flex-col items-center justify-center gap-2 border-2 border-dashed rounded-lg transition-colors ${
                active
                    ? 'border-white bg-emerald-500 text-white'
                    : 'border-emerald-500 bg-white text-gray-700'
            }`}
        >
            <p className="font-bold text-xs text-center p-0 m-0">
                {label}
                {error && (
                    <span className="text-red-500 block mt-1">{error}!</span>
                )}
            </p>
            <span className="text-sm">Drag and Drop {isMultiple ? 'Files' : 'File'}</span>
            <span className="text-sm">OR</span>
            <label
                htmlFor={`dropzoneFile-${id}`}
                className={`px-3 py-2 rounded cursor-pointer text-sm transition-colors ${
                    active
                        ? 'bg-white text-emerald-500'
                        : 'bg-emerald-500 text-white'
                }`}
            >
                Select {isMultiple ? 'Files' : 'File'}
            </label>
            <input
                ref={inputRef}
                type="file"
                id={`dropzoneFile-${id}`}
                className="hidden"
                multiple={isMultiple}
                accept={fileType || '.pdf,.png,.jpg'}
                onChange={handleChange}
            />
        </div>
    );
}