veza/apps/web/src/components/upload/BulkUploadModal.tsx

import React from 'react';
import { X, Play, Upload, Layers } from 'lucide-react';
import { Button } from '../ui/button';
import { FilePreviewCard, UploadFile } from './FilePreviewCard';

interface BulkUploadModalProps {
  files: UploadFile[];
  onClose: () => void;
  onStartUpload: () => void;
  onCancelFile: (id: string) => void;
  onPauseFile: (id: string) => void;
  onResumeFile: (id: string) => void;
}

export const BulkUploadModal: React.FC<BulkUploadModalProps> = ({
  files,
  onClose,
  onStartUpload,
  onCancelFile,
  onPauseFile,
  onResumeFile,
}) => {
  const totalProgress =
    files.reduce((acc, f) => acc + f.progress, 0) / (files.length || 1);
  const uploadingCount = files.filter((f) => f.status === 'uploading').length;
  const completedCount = files.filter((f) => f.status === 'completed').length;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-background/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-3xl bg-card border border-border rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-layout-modal-sm animate-scaleIn">
        {/* Header */}
        <div className="p-8 border-b border-border bg-muted flex justify-between items-center">
          <div>
            <h3 className="font-display font-bold text-xl text-white flex items-center gap-2">
              <Layers className="w-5 h-5 text-kodo-steel" /> Bulk Upload Manager
            </h3>
            <p className="text-xs text-muted-foreground mt-1">
              {completedCount} / {files.length} files uploaded •{' '}
              {files.length - completedCount} remaining
            </p>
          </div>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="w-5 h-5" />
          </Button>
        </div>

        {/* Global Progress */}
        <div className="px-6 py-2 bg-kodo-slate/30 border-b border-kodo-steel">
          <div className="flex justify-between text-xs font-bold text-muted-foreground uppercase mb-1">
            <span>Overall Progress</span>
            <span>{Math.round(totalProgress)}%</span>
          </div>
          <div className="h-1 bg-muted rounded-full overflow-hidden">
            <div
              className="h-full bg-kodo-cyan transition-all duration-[var(--duration-normal)]"
              style={{ width: `${totalProgress}%` }}
            ></div>
          </div>
        </div>

        {/* File List */}
        <div className="flex-1 overflow-y-auto p-8 space-y-4 bg-muted/50">
          {files.map((file) => (
            <FilePreviewCard
              key={file.id}
              fileData={file}
              onCancel={() => onCancelFile(file.id)}
              onPause={() => onPauseFile(file.id)}
              onResume={() => onResumeFile(file.id)}
            />
          ))}
        </div>

        {/* Footer Actions */}
        <div className="p-8 border-t border-border bg-muted flex justify-between items-center">
          <div className="flex gap-2">
            <Button
              variant="ghost"
              size="sm"
              className="text-muted-foreground hover:text-foreground"
              onClick={onClose}
            >
              Cancel All
            </Button>
          </div>
          <div className="flex gap-4">
            <Button
              variant="secondary"
              size="sm"
              icon={<Upload className="w-4 h-4" />}
            >
              Apply Metadata to All
            </Button>
            {uploadingCount === 0 && completedCount < files.length && (
              <Button
                variant="primary"
                size="sm"
                icon={<Play className="w-4 h-4" />}
                onClick={onStartUpload}
              >
                Start Upload
              </Button>
            )}
            {completedCount === files.length && (
              <Button variant="primary" size="sm" onClick={onClose}>
                Done
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};