frontend/components/DocumentUpload.tsx

'use client'

import { useState, useCallback, useRef } from 'react'
import { processDocument, IDPAPIError } from '@/lib/api'
import { IDPResponse } from '@/types/idp'

interface DocumentUploadProps {
    onResult: (result: IDPResponse | null) => void
    onLoadingChange: (loading: boolean) => void
    isLoading?: boolean
}

export default function DocumentUpload({ onResult, onLoadingChange, isLoading = false }: DocumentUploadProps) {
    const [file, setFile] = useState<File | null>(null)
    const [isDragging, setIsDragging] = useState(false)
    const [error, setError] = useState<string | null>(null)
    const fileInputRef = useRef<HTMLInputElement>(null)

    const validateFile = (file: File): string | null => {
        const maxSize = 10 * 1024 * 1024
        const allowedTypes = ['application/pdf', 'image/png', 'image/jpeg', 'image/jpg']

        if (file.size > maxSize) {
            return `File too large: ${(file.size / (1024 * 1024)).toFixed(2)}MB. Max: 10MB`
        }

        if (!allowedTypes.includes(file.type)) {
            return `Unsupported file type. Allowed: PDF, PNG, JPEG`
        }

        return null
    }

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const selectedFile = e.target.files?.[0]
        if (selectedFile) {
            handleFileChange(selectedFile)
        }
        // Reset input value to allow selecting the same file again if needed
        e.target.value = ''
    }

    // Auto-process when file is set
    const processFile = useCallback(async (fileToProcess: File) => {
        if (isLoading) return

        onLoadingChange(true)
        setError(null)

        try {
            const response = await processDocument(fileToProcess)
            onResult(response)
        } catch (err) {
            if (err instanceof IDPAPIError) {
                setError(err.message)
            } else {
                setError('An unexpected error occurred')
            }
            onResult(null)
        } finally {
            onLoadingChange(false)
        }
    }, [isLoading, onResult, onLoadingChange])

    const handleFileChange = (selectedFile: File | null) => {
        if (!selectedFile) return

        const validationError = validateFile(selectedFile)
        if (validationError) {
            setError(validationError)
            setFile(null)
            return
        }

        setFile(selectedFile)
        setError(null)
        onResult(null)

        // Auto-process
        processFile(selectedFile)
    }

    const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault()
        if (isLoading) return
        setIsDragging(false)
        const droppedFile = e.dataTransfer.files[0]
        handleFileChange(droppedFile)
    }

    const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
        e.preventDefault()
        if (isLoading) return
        setIsDragging(true)
    }

    const handleDragLeave = () => {
        setIsDragging(false)
    }

    const handleZoneClick = (e: React.MouseEvent<HTMLDivElement>) => {
        if (isLoading) return
        // Prevent triggering if clicking on children that stop propagation
        if (e.defaultPrevented) return

        // Reset value before clicking to ensure change event fires
        if (fileInputRef.current) {
            fileInputRef.current.value = ''
            fileInputRef.current.click()
        }
    }

    const handleUpload = useCallback(async () => {
        if (!file || isLoading) return

        onLoadingChange(true)
        setError(null)

        try {
            const response = await processDocument(file)
            onResult(response)
        } catch (err) {
            if (err instanceof IDPAPIError) {
                setError(err.message)
            } else {
                setError('An unexpected error occurred')
            }
            onResult(null)
        } finally {
            onLoadingChange(false)
        }
    }, [file, isLoading, onResult, onLoadingChange])

    return (
        <div className="space-y-6">
            {/* Upload Zone */}
            <div
                onDrop={handleDrop}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onClick={handleZoneClick}
                className={`upload-zone ${isDragging ? 'active border-black bg-gray-50' : ''} ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`}
            >
                <input
                    ref={fileInputRef}
                    type="file"
                    accept=".pdf,.png,.jpg,.jpeg"
                    onChange={handleInputChange}
                    className="hidden"
                    style={{ display: 'none' }} // Explicit fallback
                    disabled={isLoading}
                />

                <div className="space-y-4">
                    {file ? (
                        <div className="w-16 h-16 mx-auto rounded-full bg-green-100 flex items-center justify-center text-green-600">
                            <svg className="w-8 h-8" width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                    ) : (
                        <div className="w-16 h-16 mx-auto rounded-full bg-gray-100 flex items-center justify-center text-gray-500 group-hover:bg-gray-200 transition-colors">
                            <svg className="w-8 h-8" width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                            </svg>
                        </div>
                    )}

                    <div>
                        <p className="text-lg font-semibold text-gray-900">
                            {file ? file.name : 'Click or drop file'}
                        </p>
                        <p className="text-sm text-gray-500 mt-1">
                            {file ? `${(file.size / 1024).toFixed(2)} KB • Ready` : 'PDF, PNG, JPEG (max 10MB)'}
                        </p>
                    </div>

                    {file && !isLoading && (
                        <button
                            onClick={(e) => {
                                e.stopPropagation()
                                setFile(null)
                                if (fileInputRef.current) fileInputRef.current.value = ''
                            }}
                            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-red-50 text-red-600 text-sm font-medium hover:bg-red-100 transition-colors"
                        >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                            </svg>
                            Remove
                        </button>
                    )}
                </div>
            </div>

            {/* Error */}
            {error && (
                <div className="p-4 rounded-lg bg-red-50 border border-red-100 animate-fade-in">
                    <div className="flex items-start gap-3">
                        <svg className="w-5 h-5 text-red-500 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                        </svg>
                        <p className="text-sm text-red-700">{error}</p>
                    </div>
                </div>
            )}
        </div>
    )
}