Aegis/frontend/src/components/EvidenceUpload.tsx

import { useState, useCallback, useRef } from "react";
import { Upload, Loader2, X, FileIcon } from "lucide-react";

interface EvidenceUploadProps {
  onUpload: (file: File) => Promise<void>;
  isUploading: boolean;
}

export default function EvidenceUpload({ onUpload, isUploading }: EvidenceUploadProps) {
  const [isDragging, setIsDragging] = useState(false);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

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

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

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const file = e.dataTransfer.files[0];
    if (file) {
      setSelectedFile(file);
    }
  }, []);

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  const handleUpload = async () => {
    if (selectedFile) {
      await onUpload(selectedFile);
      setSelectedFile(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = "";
      }
    }
  };

  const clearSelection = () => {
    setSelectedFile(null);
    if (fileInputRef.current) {
      fileInputRef.current.value = "";
    }
  };

  const formatFileSize = (bytes: number): string => {
    if (bytes < 1024) return bytes + " B";
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
  };

  return (
    <div className="space-y-4">
      {/* Drop zone */}
      <div
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={() => fileInputRef.current?.click()}
        className={`cursor-pointer rounded-lg border-2 border-dashed p-8 text-center transition-colors ${
          isDragging
            ? "border-cyan-500 bg-cyan-500/10"
            : "border-gray-700 bg-gray-800/50 hover:border-gray-600 hover:bg-gray-800"
        }`}
      >
        <input
          ref={fileInputRef}
          type="file"
          onChange={handleFileSelect}
          className="hidden"
        />
        <Upload
          className={`mx-auto h-10 w-10 ${isDragging ? "text-cyan-400" : "text-gray-500"}`}
        />
        <p className="mt-2 text-sm text-gray-400">
          {isDragging ? (
            "Drop file here"
          ) : (
            <>
              Drag and drop a file, or <span className="text-cyan-400">browse</span>
            </>
          )}
        </p>
        <p className="mt-1 text-xs text-gray-500">
          Screenshots, logs, pcap files, etc.
        </p>
      </div>

      {/* Selected file preview */}
      {selectedFile && (
        <div className="flex items-center justify-between rounded-lg border border-gray-700 bg-gray-800 p-3">
          <div className="flex items-center gap-3">
            <FileIcon className="h-8 w-8 text-gray-400" />
            <div>
              <p className="text-sm font-medium text-gray-200">{selectedFile.name}</p>
              <p className="text-xs text-gray-500">{formatFileSize(selectedFile.size)}</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={clearSelection}
              disabled={isUploading}
              className="rounded p-1 text-gray-400 hover:bg-gray-700 hover:text-white"
            >
              <X className="h-4 w-4" />
            </button>
            <button
              onClick={handleUpload}
              disabled={isUploading}
              className="flex items-center gap-1.5 rounded-lg bg-cyan-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-cyan-500 disabled:opacity-50"
            >
              {isUploading ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" />
                  Uploading...
                </>
              ) : (
                <>
                  <Upload className="h-4 w-4" />
                  Upload
                </>
              )}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}