"use client"

import type React from "react"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { Upload, X, File, Check } from "lucide-react"

export function FileUploader() {
  const [files, setFiles] = useState<File[]>([])
  const [uploading, setUploading] = useState(false)
  const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({})
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const newFiles = Array.from(e.target.files)
      setFiles((prev) => [...prev, ...newFiles])
      simulateUpload(newFiles)
    }
  }

  const simulateUpload = (newFiles: File[]) => {
    setUploading(true)

    // Initialize progress for each file
    const initialProgress: Record<string, number> = {}
    newFiles.forEach((file) => {
      initialProgress[file.name] = 0
    })

    setUploadProgress((prev) => ({ ...prev, ...initialProgress }))

    // Simulate progress updates
    newFiles.forEach((file) => {
      const intervalId = setInterval(() => {
        setUploadProgress((prev) => {
          const currentProgress = prev[file.name] || 0
          const newProgress = Math.min(currentProgress + 10, 100)

          // Clear interval when upload is complete
          if (newProgress === 100) {
            clearInterval(intervalId)

            // Check if all files are uploaded
            const allUploaded = Object.values({ ...prev, [file.name]: newProgress }).every((p) => p === 100)
            if (allUploaded) {
              setUploading(false)
            }
          }

          return { ...prev, [file.name]: newProgress }
        })
      }, 300)
    })
  }

  const removeFile = (fileName: string) => {
    setFiles((prev) => prev.filter((file) => file.name !== fileName))
    setUploadProgress((prev) => {
      const newProgress = { ...prev }
      delete newProgress[fileName]
      return newProgress
    })
  }

  const triggerFileInput = () => {
    fileInputRef.current?.click()
  }

  return (
    <div className="space-y-4">
      <div
        className="border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors"
        onClick={triggerFileInput}
      >
        <input type="file" ref={fileInputRef} onChange={handleFileChange} className="hidden" multiple />
        <Upload className="h-10 w-10 text-muted-foreground mb-2" />
        <p className="text-sm font-medium">Drag and drop files here or click to browse</p>
        <p className="text-xs text-muted-foreground mt-1">Supported file types: PDF, JPG, PNG, DOC, DOCX (Max 10MB)</p>
      </div>

      {files.length > 0 && (
        <div className="space-y-2">
          <p className="text-sm font-medium">Uploaded Files</p>
          <div className="space-y-2">
            {files.map((file, index) => (
              <div key={index} className="flex items-center justify-between p-2 border rounded-md">
                <div className="flex items-center space-x-2">
                  <File className="h-4 w-4 text-muted-foreground" />
                  <span className="text-sm truncate max-w-[200px]">{file.name}</span>
                </div>
                <div className="flex items-center space-x-2">
                  {uploadProgress[file.name] === 100 ? (
                    <Check className="h-4 w-4 text-green-500" />
                  ) : (
                    <Progress value={uploadProgress[file.name] || 0} className="w-20 h-2" />
                  )}
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-6 w-6"
                    onClick={(e) => {
                      e.stopPropagation()
                      removeFile(file.name)
                    }}
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      <Button type="button" variant="outline" onClick={triggerFileInput} className="mt-2">
        <Upload className="mr-2 h-4 w-4" />
        Upload Files
      </Button>
    </div>
  )
}