kit-ui/components/media/FileUpload.tsx

'use client';

import * as React from 'react';
import { Upload, X, File, FileVideo, FileAudio, FileImage, Clock, HardDrive, Film } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import { Button } from '@/components/ui/button';
import type { ConversionFormat } from '@/types/media';

export interface FileUploadProps {
  onFileSelect: (files: File[]) => void;
  onFileRemove: (index: number) => void;
  selectedFiles?: File[];
  accept?: string;
  maxSizeMB?: number;
  disabled?: boolean;
  inputRef?: React.RefObject<HTMLInputElement | null>;
  inputFormat?: ConversionFormat;
}

export function FileUpload({
  onFileSelect,
  onFileRemove,
  selectedFiles = [],
  accept,
  maxSizeMB = 500,
  disabled = false,
  inputRef,
  inputFormat,
}: FileUploadProps) {
  const [isDragging, setIsDragging] = React.useState(false);
  const [fileMetadata, setFileMetadata] = React.useState<Record<number, any>>({});
  const localFileInputRef = React.useRef<HTMLInputElement>(null);
  const fileInputRef = inputRef || localFileInputRef;

  // Extract metadata for files
  React.useEffect(() => {
    const extractMetadata = async () => {
      if (selectedFiles.length === 0 || !inputFormat) {
        setFileMetadata({});
        return;
      }

      const metadata: Record<number, any> = {};

      for (let i = 0; i < selectedFiles.length; i++) {
        const file = selectedFiles[i];
        const baseMetadata = {
          name: file.name,
          size: file.size < 1024 * 1024 ? `${(file.size / 1024).toFixed(2)} KB` : `${(file.size / (1024 * 1024)).toFixed(2)} MB`,
          type: inputFormat.name,
        };

        // Extract media-specific metadata
        if (inputFormat.category === 'video' && file.type.startsWith('video/')) {
          try {
            const video = document.createElement('video');
            video.preload = 'metadata';

            const metadataPromise = new Promise<any>((resolve) => {
              video.onloadedmetadata = () => {
                const duration = video.duration;
                const minutes = Math.floor(duration / 60);
                const seconds = Math.floor(duration % 60);
                resolve({
                  ...baseMetadata,
                  duration: `${minutes}:${seconds.toString().padStart(2, '0')}`,
                  dimensions: `${video.videoWidth} × ${video.videoHeight}`,
                });
                URL.revokeObjectURL(video.src);
              };

              video.onerror = () => {
                resolve(baseMetadata);
                URL.revokeObjectURL(video.src);
              };
            });

            video.src = URL.createObjectURL(file);
            metadata[i] = await metadataPromise;
          } catch (error) {
            metadata[i] = baseMetadata;
          }
        } else if (inputFormat.category === 'audio' && file.type.startsWith('audio/')) {
          try {
            const audio = document.createElement('audio');
            audio.preload = 'metadata';

            const metadataPromise = new Promise<any>((resolve) => {
              audio.onloadedmetadata = () => {
                const duration = audio.duration;
                const minutes = Math.floor(duration / 60);
                const seconds = Math.floor(duration % 60);
                resolve({
                  ...baseMetadata,
                  duration: `${minutes}:${seconds.toString().padStart(2, '0')}`,
                });
                URL.revokeObjectURL(audio.src);
              };

              audio.onerror = () => {
                resolve(baseMetadata);
                URL.revokeObjectURL(audio.src);
              };
            });

            audio.src = URL.createObjectURL(file);
            metadata[i] = await metadataPromise;
          } catch (error) {
            metadata[i] = baseMetadata;
          }
        } else if (inputFormat.category === 'image' && file.type.startsWith('image/')) {
          try {
            const img = new Image();

            const metadataPromise = new Promise<any>((resolve) => {
              img.onload = () => {
                resolve({
                  ...baseMetadata,
                  dimensions: `${img.width} × ${img.height}`,
                });
                URL.revokeObjectURL(img.src);
              };

              img.onerror = () => {
                resolve(baseMetadata);
                URL.revokeObjectURL(img.src);
              };
            });

            img.src = URL.createObjectURL(file);
            metadata[i] = await metadataPromise;
          } catch (error) {
            metadata[i] = baseMetadata;
          }
        } else {
          metadata[i] = baseMetadata;
        }
      }

      setFileMetadata(metadata);
    };

    extractMetadata();
  }, [selectedFiles, inputFormat]);

  const getCategoryIcon = () => {
    if (!inputFormat) return <File className="h-5 w-5 text-primary" />;
    switch (inputFormat.category) {
      case 'video':
        return <FileVideo className="h-5 w-5 text-primary" />;
      case 'audio':
        return <FileAudio className="h-5 w-5 text-primary" />;
      case 'image':
        return <FileImage className="h-5 w-5 text-primary" />;
      default:
        return <File className="h-5 w-5 text-primary" />;
    }
  };

  const handleDragEnter = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (!disabled) {
      setIsDragging(true);
    }
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    setIsDragging(false);

    if (disabled) return;

    const files = Array.from(e.dataTransfer.files);
    if (files.length > 0) {
      handleFiles(files);
    }
  };

  const handleFileInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length > 0) {
      handleFiles(files);
    }
  };

  const handleFiles = (files: File[]) => {
    // Check file sizes
    const maxBytes = maxSizeMB * 1024 * 1024;
    const validFiles = files.filter(file => {
      if (file.size > maxBytes) {
        alert(`${file.name} exceeds ${maxSizeMB}MB limit and will be skipped.`);
        return false;
      }
      return true;
    });

    if (validFiles.length > 0) {
      onFileSelect(validFiles);
    }

    // Reset input
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const handleClick = () => {
    if (!disabled) {
      fileInputRef.current?.click();
    }
  };

  const handleRemove = (index: number) => (e: React.MouseEvent) => {
    e.stopPropagation();
    onFileRemove(index);
  };

  return (
    <div className="w-full space-y-3">
      <input
        ref={fileInputRef}
        type="file"
        multiple
        className="hidden"
        accept={accept}
        onChange={handleFileInput}
        disabled={disabled}
      />

      {selectedFiles.length > 0 ? (
        <div className="space-y-3">
          {selectedFiles.map((file, index) => {
            const metadata = fileMetadata[index];
            return (
              <div key={`${file.name}-${index}`} className="border border-border rounded-xl p-4 bg-card/50 backdrop-blur-sm">
                <div className="flex items-start gap-4">
                  <div className="p-2 bg-primary/10 rounded-lg shrink-0">
                    {getCategoryIcon()}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-start justify-between gap-2">
                      <p className="text-sm font-semibold text-foreground truncate" title={file.name}>
                        {file.name}
                      </p>
                      <Button
                        variant="ghost"
                        size="icon-xs"
                        onClick={handleRemove(index)}
                        disabled={disabled}
                        className="rounded-full hover:bg-destructive/10 hover:text-destructive shrink-0"
                      >
                        <X className="h-3.5 w-3.5" />
                        <span className="sr-only">Remove file</span>
                      </Button>
                    </div>
                    {metadata && (
                      <div className="mt-2 flex flex-wrap gap-4 text-[10px] text-muted-foreground uppercase tracking-wider font-bold">
                        {/* File Size */}
                        <div className="flex items-center gap-1.5">
                          <HardDrive className="h-3 w-3" />
                          <span>{metadata.size}</span>
                        </div>

                        {/* Type */}
                        <div className="flex items-center gap-1.5">
                          <File className="h-3 w-3" />
                          <span>{metadata.type}</span>
                        </div>

                        {/* Duration (for video/audio) */}
                        {metadata.duration && (
                          <div className="flex items-center gap-1.5">
                            <Clock className="h-3 w-3" />
                            <span>{metadata.duration}</span>
                          </div>
                        )}

                        {/* Dimensions */}
                        {metadata.dimensions && (
                          <div className="flex items-center gap-1.5">
                            {inputFormat?.category === 'video' ? (
                              <Film className="h-3 w-3" />
                            ) : (
                              <FileImage className="h-3 w-3" />
                            )}
                            <span>{metadata.dimensions}</span>
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}

          {/* Add more files button */}
          <Button
            variant="outline"
            onClick={handleClick}
            disabled={disabled}
            className="w-full rounded-xl"
            size="lg"
          >
            <Upload className="h-4 w-4 mr-2" />
            Add More Files
          </Button>
        </div>
      ) : (
        <div
          onClick={handleClick}
          onDragEnter={handleDragEnter}
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          className={cn(
            'border-2 border-dashed rounded-xl p-10 text-center cursor-pointer transition-all duration-300',
            'hover:border-primary/50 hover:bg-primary/5',
            {
              'border-primary bg-primary/10 scale-[0.98]': isDragging,
              'border-border bg-muted/30': !isDragging,
              'opacity-50 cursor-not-allowed': disabled,
            }
          )}
        >
          <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <Upload className="h-8 w-8 text-primary" />
          </div>
          <p className="text-sm font-semibold text-foreground mb-1">
            Drop your files here or click to browse
          </p>
          <p className="text-xs text-muted-foreground">
            Maximum file size: {maxSizeMB}MB per file
          </p>
        </div>
      )}
    </div>
  );
}