frontend/components/FileUpload.tsx

import React, { useCallback, useState } from 'react';
import { Icons } from '../constants';

interface FileUploadProps {
  onFileSelect: (file: File) => void;
  disabled: boolean;
}

const FileUpload: React.FC<FileUploadProps> = ({ onFileSelect, disabled }) => {
  const [isDragging, setIsDragging] = useState(false);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    if (!disabled) setIsDragging(true);
  }, [disabled]);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    if (!disabled) setIsDragging(false);
  }, [disabled]);

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

    const files = e.dataTransfer.files;
    if (files.length > 0) {
      const file = files[0];
      if (validateFile(file)) {
        onFileSelect(file);
      }
    }
  }, [disabled, onFileSelect]);

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (disabled || !e.target.files) return;
    const file = e.target.files[0];
    if (file && validateFile(file)) {
      onFileSelect(file);
    }
  };

  const validateFile = (file: File) => {
    const validTypes = ['application/pdf', 'image/jpeg', 'image/png', 'image/webp'];
    // For browser based base64, we limit to ~20MB strictly to prevent browser crash.
    // In a real app with File API, this could be 2GB.
    const maxSize = 50 * 1024 * 1024;

    if (!validTypes.includes(file.type)) {
      alert("Invalid file type. Please upload PDF, JPEG, PNG, or WEBP.");
      return false;
    }
    if (file.size > maxSize) {
      alert("File too large (Max 50MB).");
      return false;
    }
    return true;
  };

  return (
    <div
      className={`relative border-2 border-dashed rounded-xl p-12 transition-all duration-300 flex flex-col items-center justify-center cursor-pointer group
        ${isDragging
          ? 'border-petro-500 bg-petro-900/20'
          : 'border-industrial-800 hover:border-petro-600/50 hover:bg-industrial-900'
        }
        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
      `}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
      onClick={() => !disabled && document.getElementById('fileInput')?.click()}
    >
      <input
        type="file"
        id="fileInput"
        className="hidden"
        onChange={handleFileInput}
        accept=".pdf,.jpg,.jpeg,.png,.webp"
        disabled={disabled}
      />

      <div className={`p-4 rounded-full mb-4 transition-colors ${isDragging ? 'bg-petro-500/20 text-petro-400' : 'bg-industrial-800 text-gray-400 group-hover:text-petro-400 group-hover:bg-petro-900/20'}`}>
        <Icons.Upload />
      </div>

      <h3 className="text-xl font-display font-semibold text-gray-200 mb-2">
        Upload Document
      </h3>
      <p className="text-gray-400 text-center max-w-sm">
        Drag & drop or click to select Oil & Gas reports, drilling logs, or production data.
      </p>
      <p className="text-xs text-gray-500 mt-4 uppercase tracking-wider">
        Supported: PDF, JPG, PNG (Max 50MB)
      </p>
    </div>
  );
};

export default FileUpload;