Aegis/frontend/src/components/EvidenceUpload.tsx

import { useState, useCallback, useRef, useEffect } from "react";
import { Upload, Loader2, X, FileIcon, ClipboardPaste, ImageIcon } 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 [pasteHint, setPasteHint] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // ── Clipboard paste handler ─────────────────────────────────────
  const handlePaste = useCallback(
    async (e: ClipboardEvent) => {
      const items = e.clipboardData?.items;
      if (!items) return;

      for (const item of Array.from(items)) {
        if (item.type.startsWith("image/")) {
          e.preventDefault();
          const blob = item.getAsFile();
          if (!blob) continue;

          // Generate a timestamped filename for pasted screenshots
          const ext = item.type.split("/")[1] || "png";
          const ts = new Date()
            .toISOString()
            .replace(/[:.]/g, "-")
            .slice(0, 19);
          const file = new File([blob], `screenshot-${ts}.${ext}`, {
            type: item.type,
          });
          setSelectedFile(file);
          // Brief pulse animation to confirm paste was detected
          setPasteHint(true);
          setTimeout(() => setPasteHint(false), 1500);
          return;
        }
      }
    },
    [],
  );

  // Listen for paste on the whole document while this component is mounted
  useEffect(() => {
    document.addEventListener("paste", handlePaste);
    return () => document.removeEventListener("paste", handlePaste);
  }, [handlePaste]);

  // ── Drag & drop ─────────────────────────────────────────────────
  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);
  }, []);

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

  // ── Upload ───────────────────────────────────────────────────────
  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";
  };

  const isImage = selectedFile?.type.startsWith("image/");

  return (
    <div className="space-y-3" ref={containerRef}>
      {/* Drop zone */}
      <div
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={() => fileInputRef.current?.click()}
        className={`cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-all ${
          pasteHint
            ? "border-cyan-400 bg-cyan-500/15 scale-[1.01]"
            : 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-8 w-8 ${
            pasteHint ? "text-cyan-400" : isDragging ? "text-cyan-400" : "text-gray-500"
          }`}
        />
        <p className="mt-2 text-sm text-gray-400">
          {pasteHint ? (
            <span className="text-cyan-400 font-medium">Screenshot detected ✓</span>
          ) : isDragging ? (
            "Drop file here"
          ) : (
            <>
              Drag & drop, <span className="text-cyan-400">browse</span>, or{" "}
              <span className="text-cyan-400">Ctrl+V</span> to paste a screenshot
            </>
          )}
        </p>
        <div className="mt-2 flex items-center justify-center gap-3 text-[10px] text-gray-600">
          <span className="flex items-center gap-1">
            <ClipboardPaste className="h-3 w-3" /> Paste from clipboard
          </span>
          <span>·</span>
          <span className="flex items-center gap-1">
            <ImageIcon className="h-3 w-3" /> Screenshots, logs, pcap… (max 50 MB)
          </span>
        </div>
      </div>

      {/* Selected file preview */}
      {selectedFile && (
        <div className="rounded-lg border border-gray-700 bg-gray-800 overflow-hidden">
          {/* Image preview for pasted screenshots */}
          {isImage && (
            <div className="relative max-h-48 overflow-hidden bg-gray-900">
              <img
                src={URL.createObjectURL(selectedFile)}
                alt="Screenshot preview"
                className="w-full object-contain max-h-48"
              />
              <div className="absolute top-1 right-1 rounded bg-black/60 px-1.5 py-0.5 text-[10px] text-gray-300">
                preview
              </div>
            </div>
          )}

          <div className="flex items-center justify-between p-3">
            <div className="flex items-center gap-3 min-w-0">
              {isImage ? (
                <ImageIcon className="h-7 w-7 shrink-0 text-cyan-400" />
              ) : (
                <FileIcon className="h-7 w-7 shrink-0 text-gray-400" />
              )}
              <div className="min-w-0">
                <p className="text-sm font-medium text-gray-200 truncate">
                  {selectedFile.name}
                </p>
                <p className="text-xs text-gray-500">
                  {formatFileSize(selectedFile.size)}
                  {isImage && (
                    <span className="ml-2 text-cyan-500/70">screenshot</span>
                  )}
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2 shrink-0 ml-3">
              <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 transition-colors"
              >
                {isUploading ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    Uploading…
                  </>
                ) : (
                  <>
                    <Upload className="h-4 w-4" />
                    Upload
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}