src/components/chat/FileUpload.tsx

"use client"

import React, { useRef, useState } from "react"
import { Button } from "@/components/ui/button"
import { X, FileText, Image, File, Upload, Plus, Music, Video } from "lucide-react"

interface FileUploadProps {
  files: File[]
  onFilesChange: (files: File[]) => void
  maxFiles?: number
  maxSizeMB?: number
  enableMedia?: boolean // Enable audio/video support
  enableDocuments?: boolean // Enable large document support
}

const ALLOWED_TYPES = {
  // Documents
  "application/pdf": [".pdf"],
  "text/plain": [".txt"],
  "text/markdown": [".md"],
  // Images
  "image/png": [".png"],
  "image/jpeg": [".jpg", ".jpeg"],
  "image/gif": [".gif"],
  "image/webp": [".webp"],
}

// Extended document types for WeKnora knowledge base ingestion
const DOCUMENT_TYPES = {
  "application/msword": [".doc"],
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
  "application/vnd.ms-excel": [".xls"],
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
  "text/csv": [".csv"],
  "application/json": [".json"],
  "application/rtf": [".rtf"],
  "text/html": [".html", ".htm"],
}

const MEDIA_TYPES = {
  // Audio
  "audio/mpeg": [".mp3"],
  "audio/wav": [".wav"],
  "audio/mp4": [".m4a"],
  "audio/ogg": [".ogg"],
  "audio/flac": [".flac"],
  "audio/aac": [".aac"],
  // Video
  "video/mp4": [".mp4"],
  "video/quicktime": [".mov"],
  "video/x-msvideo": [".avi"],
  "video/x-matroska": [".mkv"],
  "video/webm": [".webm"],
  "video/x-m4v": [".m4v"],
}

export function FileUpload({

  files,

  onFilesChange,

  maxFiles = 10,

  maxSizeMB = 50, // Increased for larger documents

  enableMedia = true,

  enableDocuments = true, // Enable extended document types by default

}: FileUploadProps) {
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [dragActive, setDragActive] = useState(false)
  const [imagePreviews, setImagePreviews] = useState<Map<string, string>>(new Map())

  // Combine allowed types based on flags
  const getAllowedTypes = () => {
    let types = { ...ALLOWED_TYPES }
    if (enableDocuments) {
      types = { ...types, ...DOCUMENT_TYPES }
    }
    if (enableMedia) {
      types = { ...types, ...MEDIA_TYPES }
    }
    return types
  }

  const handleFiles = (fileList: FileList | null) => {
    if (!fileList) return

    const newFiles: File[] = []
    const maxSize = maxSizeMB * 1024 * 1024
    const allowedTypes = getAllowedTypes()

    Array.from(fileList).forEach((file) => {
      // Check file count
      if (files.length + newFiles.length >= maxFiles) {
        return
      }

      // Check file size
      if (file.size > maxSize) {
        alert(`File ${file.name} exceeds ${maxSizeMB}MB limit`)
        return
      }

      // Check file type
      const isValidType = Object.keys(allowedTypes).some((mimeType) => {
        const extensions = allowedTypes[mimeType as keyof typeof allowedTypes]
        return extensions.some((ext) => file.name.toLowerCase().endsWith(ext))
      })

      if (!isValidType) {
        alert(`File type not supported: ${file.name}`)
        return
      }

      newFiles.push(file)
    })

    if (newFiles.length > 0) {
      const updatedFiles = [...files, ...newFiles]
      onFilesChange(updatedFiles)
      
      // Generate image previews for new image files
      newFiles.forEach((file) => {
        if (file.type.startsWith("image/")) {
          const fileKey = `${file.name}-${file.size}`
          const reader = new FileReader()
          reader.onload = (e) => {
            if (e.target?.result) {
              setImagePreviews(prev => new Map(prev).set(fileKey, e.target!.result as string))
            }
          }
          reader.readAsDataURL(file)
        }
      })
    }
  }

  const handleDrag = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (e.type === "dragenter" || e.type === "dragover") {
      setDragActive(true)
    } else if (e.type === "dragleave") {
      setDragActive(false)
    }
  }

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

    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
      handleFiles(e.dataTransfer.files)
    }
  }

  const removeFile = (index: number) => {
    const fileToRemove = files[index]
    const newFiles = files.filter((_, i) => i !== index)
    onFilesChange(newFiles)
    // Clean up preview for removed file
    if (fileToRemove) {
      const fileKey = `${fileToRemove.name}-${fileToRemove.size}`
      setImagePreviews(prev => {
        const newMap = new Map(prev)
        newMap.delete(fileKey)
        return newMap
      })
    }
  }

  const getFileIcon = (file: File) => {
    if (file.type === "application/pdf") {
      return <FileText className="w-4 h-4" />
    } else if (file.type.startsWith("image/")) {
      return <Image className="w-4 h-4" />
    } else if (file.type.startsWith("audio/")) {
      return <Music className="w-4 h-4 text-blue-400" />
    } else if (file.type.startsWith("video/")) {
      return <Video className="w-4 h-4 text-purple-400" />
    } else {
      return <File className="w-4 h-4" />
    }
  }

  const formatFileSize = (bytes: number) => {
    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 = (file: File) => file.type.startsWith("image/")
  const canAddMore = files.length < maxFiles

  // Build accept string based on enableMedia
  const getAcceptString = () => {
    let base = ".pdf,.png,.jpg,.jpeg,.gif,.webp,.txt,.md"
    if (enableDocuments) {
      base += ",.doc,.docx,.xls,.xlsx,.csv,.json,.rtf,.html,.htm"
    }
    if (enableMedia) {
      base += ",.mp3,.wav,.m4a,.ogg,.flac,.aac,.mp4,.mov,.avi,.mkv,.webm,.m4v"
    }
    return base
  }

  const getDescriptionText = () => {
    if (enableDocuments && enableMedia) {
      return `Documents, Images, Audio, Video (max ${maxSizeMB}MB, up to ${maxFiles} files)`
    } else if (enableDocuments) {
      return `PDF, DOC, Excel, CSV, Images (max ${maxSizeMB}MB, up to ${maxFiles} files)`
    } else if (enableMedia) {
      return `PDF, Images, Audio, Video (max ${maxSizeMB}MB, up to ${maxFiles} files)`
    }
    return `PDF, Images, Text files (max ${maxSizeMB}MB, up to ${maxFiles} files)`
  }

  return (
    <div className="space-y-2">

      <input

        ref={fileInputRef}

        type="file"

        title="Upload Files"

        multiple

        accept={getAcceptString()}

        onChange={(e) => handleFiles(e.target.files)}

        className="hidden"

      />



      {/* Show upload area only when no files are present */}

      {files.length === 0 && (

        <div

          className={`border-2 border-dashed rounded-lg p-3 md:p-4 transition-colors ${

            dragActive

              ? "border-primary bg-primary/5"

              : "border-muted-foreground/25 hover:border-muted-foreground/50"

          }`}

          onDragEnter={handleDrag}

          onDragLeave={handleDrag}

          onDragOver={handleDrag}

          onDrop={handleDrop}

        >

          <div className="flex flex-col items-center justify-center space-y-2">

            <Upload className="w-5 h-5 md:w-6 md:h-6 text-muted-foreground" />

            <p className="text-xs md:text-sm text-muted-foreground text-center">

              Drag and drop files here, or{" "}

              <button

                type="button"

                onClick={() => fileInputRef.current?.click()}

                className="text-primary hover:underline"

              >

                browse

              </button>

            </p>

            <p className="text-[10px] md:text-xs text-muted-foreground">

              {getDescriptionText()}

            </p>

          </div>

        </div>

      )}



      {/* Show compact file list when files are present */}

      {files.length > 0 && (

        <div className="space-y-2">

          {/* Horizontal scrollable file list */}

          <div className="flex gap-2 overflow-x-auto pb-2 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">

            {files.map((file, index) => (

              <div

                key={index}

                className="flex-shrink-0 w-24 md:w-28 bg-muted/50 rounded-lg border border-white/10 overflow-hidden group relative"

              >

                {/* Image preview or icon */}

                {isImage(file) && imagePreviews.get(`${file.name}-${file.size}`) ? (

                  <div className="relative w-full h-20 md:h-24 bg-muted">

                    <img

                      src={imagePreviews.get(`${file.name}-${file.size}`)}

                      alt={file.name}

                      className="w-full h-full object-cover"

                    />

                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />

                  </div>

                ) : (

                  <div className="w-full h-20 md:h-24 bg-muted/80 flex items-center justify-center">

                    {getFileIcon(file)}

                  </div>

                )}

                

                {/* File info */}

                <div className="p-1.5 md:p-2 space-y-0.5">

                  <p className="text-[10px] md:text-xs font-medium truncate" title={file.name}>

                    {file.name}

                  </p>

                  <p className="text-[9px] md:text-[10px] text-muted-foreground">

                    {formatFileSize(file.size)}

                  </p>

                </div>



                {/* Remove button */}

                <Button

                  type="button"

                  variant="ghost"

                  size="sm"

                  onClick={() => removeFile(index)}

                  className="absolute top-1 right-1 h-6 w-6 md:h-7 md:w-7 p-0 rounded-full bg-black/50 hover:bg-black/70 text-white opacity-0 group-hover:opacity-100 transition-opacity"

                >

                  <X className="w-3 h-3 md:w-3.5 md:h-3.5" />

                </Button>

              </div>

            ))}



            {/* Add more files button */}

            {canAddMore && (

              <button

                type="button"

                onClick={() => fileInputRef.current?.click()}

                className="flex-shrink-0 w-24 md:w-28 h-full min-h-[120px] md:min-h-[140px] border-2 border-dashed border-muted-foreground/25 hover:border-primary/50 rounded-lg flex flex-col items-center justify-center gap-1.5 md:gap-2 transition-colors bg-muted/30 hover:bg-muted/50"

              >

                <Plus className="w-5 h-5 md:w-6 md:h-6 text-muted-foreground" />

                <span className="text-[10px] md:text-xs text-muted-foreground text-center px-1">

                  Add more

                </span>

              </button>

            )}

          </div>



          {/* File count indicator */}

          <div className="flex items-center justify-between text-[10px] md:text-xs text-muted-foreground px-1">

            <span>

              {files.length} of {maxFiles} files

            </span>

            {files.length >= maxFiles && (

              <span className="text-orange-500">Maximum reached</span>

            )}

          </div>

        </div>

      )}

    </div>
  )
}