KanzlAI-mGMT/frontend/src/components/documents/DocumentUpload.tsx

"use client";

import { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Upload, FileText, X, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { api } from "@/lib/api";
import type { Document } from "@/lib/types";

interface DocumentUploadProps {
  caseId: string;
}

export function DocumentUpload({ caseId }: DocumentUploadProps) {
  const [files, setFiles] = useState<File[]>([]);
  const queryClient = useQueryClient();

  const uploadMutation = useMutation({
    mutationFn: async (file: File) => {
      const formData = new FormData();
      formData.append("file", file);
      formData.append("title", file.name);
      return api.postFormData<Document>(`/cases/${caseId}/documents`, formData);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["case-documents", caseId] });
      queryClient.invalidateQueries({ queryKey: ["case", caseId] });
    },
  });

  const onDrop = useCallback((acceptedFiles: File[]) => {
    setFiles((prev) => [...prev, ...acceptedFiles]);
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    disabled: uploadMutation.isPending,
  });

  function removeFile(index: number) {
    setFiles((prev) => prev.filter((_, i) => i !== index));
  }

  async function handleUpload() {
    if (files.length === 0) return;

    let successCount = 0;
    for (const file of files) {
      try {
        await uploadMutation.mutateAsync(file);
        successCount++;
      } catch (err) {
        const msg =
          err && typeof err === "object" && "error" in err
            ? (err as { error: string }).error
            : file.name;
        toast.error(`Fehler beim Hochladen: ${msg}`);
      }
    }

    if (successCount > 0) {
      toast.success(
        successCount === 1
          ? "Dokument hochgeladen"
          : `${successCount} Dokumente hochgeladen`,
      );
      setFiles([]);
    }
  }

  return (
    <div className="space-y-3">
      <div
        {...getRootProps()}
        className={`cursor-pointer rounded-md border-2 border-dashed px-6 py-6 text-center transition-colors ${
          isDragActive
            ? "border-neutral-500 bg-neutral-50"
            : "border-neutral-300 hover:border-neutral-400"
        } ${uploadMutation.isPending ? "pointer-events-none opacity-50" : ""}`}
      >
        <input {...getInputProps()} />
        <Upload className="mx-auto h-6 w-6 text-neutral-400" />
        <p className="mt-2 text-sm text-neutral-600">
          Dateien hierher ziehen oder{" "}
          <span className="font-medium text-neutral-900">durchsuchen</span>
        </p>
        <p className="mt-1 text-xs text-neutral-400">Max. 50 MB pro Datei</p>
      </div>

      {files.length > 0 && (
        <div className="space-y-2">
          {files.map((file, i) => (
            <div
              key={`${file.name}-${i}`}
              className="flex items-center gap-3 rounded-md border border-neutral-200 bg-neutral-50 px-3 py-2"
            >
              <FileText className="h-4 w-4 shrink-0 text-neutral-500" />
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm text-neutral-900">{file.name}</p>
                <p className="text-xs text-neutral-400">
                  {formatFileSize(file.size)}
                </p>
              </div>
              <button
                type="button"
                onClick={() => removeFile(i)}
                disabled={uploadMutation.isPending}
                className="rounded p-1 text-neutral-400 hover:bg-neutral-200 hover:text-neutral-600"
              >
                <X className="h-3.5 w-3.5" />
              </button>
            </div>
          ))}

          <button
            type="button"
            onClick={handleUpload}
            disabled={uploadMutation.isPending}
            className="inline-flex items-center gap-2 rounded-md bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-800 disabled:opacity-50"
          >
            {uploadMutation.isPending ? (
              <>
                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                Hochladen...
              </>
            ) : (
              <>
                <Upload className="h-3.5 w-3.5" />
                {files.length === 1 ? "Hochladen" : `${files.length} Dateien hochladen`}
              </>
            )}
          </button>
        </div>
      )}
    </div>
  );
}

function formatFileSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}