import { cn } from '@/lib/utils';
import { Upload } from 'lucide-react';
import { useState } from 'react';

interface UploadZoneProps {
    onUpload: (files: File[]) => void;
    className?: string;
    compact?: boolean;
}

export function UploadZone({ onUpload, className, compact = false }: UploadZoneProps) {
    const [isDragging, setIsDragging] = useState(false);
    const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20MB in bytes

    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDragging(true);
    };

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

    const validateFiles = (files: File[]): { valid: File[]; errors: string[] } => {
        const valid: File[] = [];
        const errors: string[] = [];

        files.forEach((file) => {
            if (file.size > MAX_FILE_SIZE) {
                errors.push(`${file.name} is too large (${(file.size / 1024 / 1024).toFixed(2)}MB). Max size is 20MB.`);
            } else {
                valid.push(file);
            }
        });

        return { valid, errors };
    };

    const handleDrop = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDragging(false);

        if (e.dataTransfer.files?.length) {
            const { valid, errors } = validateFiles(Array.from(e.dataTransfer.files));

            if (errors.length > 0) {
                alert('Some files were not uploaded:\n' + errors.join('\n'));
            }

            if (valid.length > 0) {
                onUpload(valid);
            }
        }
    };

    const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files?.length) {
            const { valid, errors } = validateFiles(Array.from(e.target.files));

            if (errors.length > 0) {
                alert('Some files were not uploaded:\n' + errors.join('\n'));
            }

            if (valid.length > 0) {
                onUpload(valid);
            }

            e.target.value = '';
        }
    };

    if (compact) {
        return (
            <div
                className={cn(
                    'relative flex min-h-[80px] cursor-pointer flex-col items-center justify-center rounded border-2 border-dashed transition-colors',
                    isDragging
                        ? 'border-[#2271b1] bg-[#f0f6fc] dark:bg-blue-950/20'
                        : 'border-[#c3c4c7] hover:border-[#2271b1] dark:border-zinc-600 dark:hover:border-blue-500',
                    className,
                )}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
                onClick={() => document.getElementById('file-upload-compact')?.click()}
            >
                <Upload className="h-6 w-6 text-[#50575e] dark:text-zinc-400" />
                <span className="mt-1 text-xs text-[#50575e] dark:text-zinc-400">Drop files or click</span>
                <input type="file" id="file-upload-compact" className="hidden" multiple onChange={handleFileInput} />
            </div>
        );
    }

    return (
        <div
            className={cn(
                'relative flex cursor-pointer flex-col items-center justify-center rounded border-2 border-dashed p-12 text-center transition-all',
                isDragging
                    ? 'border-[#2271b1] bg-[#f0f6fc] dark:bg-blue-950/20'
                    : 'border-[#c3c4c7] hover:border-[#2271b1] dark:border-zinc-600 dark:hover:border-blue-500',
                className,
            )}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
            onClick={() => document.getElementById('file-upload')?.click()}
        >
            <div className="flex flex-col items-center justify-center">
                <div
                    className={cn(
                        'mb-4 flex h-16 w-16 items-center justify-center rounded-full transition-colors',
                        isDragging ? 'bg-[#2271b1]/10' : 'bg-[#dcdcde] dark:bg-zinc-700',
                    )}
                >
                    <Upload className={cn('h-8 w-8 transition-colors', isDragging ? 'text-[#2271b1]' : 'text-[#50575e] dark:text-zinc-400')} />
                </div>
                <h3 className="text-lg font-medium text-[#1d2327] dark:text-zinc-200">Drop files to upload</h3>
                <p className="mt-1 text-sm text-[#50575e] dark:text-zinc-400">or</p>
                <button
                    type="button"
                    className="mt-3 rounded bg-[#2271b1] px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-[#135e96]"
                    onClick={(e) => {
                        e.stopPropagation();
                        document.getElementById('file-upload')?.click();
                    }}
                >
                    Select Files
                </button>
                <p className="mt-4 text-xs text-[#646970] dark:text-zinc-500">Maximum upload file size: 20 MB</p>
                <input type="file" id="file-upload" className="hidden" multiple onChange={handleFileInput} />
            </div>
        </div>
    );
}