"use client"

import { useState } from "react"
import { Upload, X, File, ImageIcon, Film, Music, Archive, AlertCircle, FileText } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { cn } from "@/lib/utils"

interface FileItem {
  id: string
  name: string
  size: string
  type: string
  progress: number
  status: "uploading" | "complete" | "error"
}

export function FileUploadBlock() {
  const [files, setFiles] = useState<FileItem[]>([
    {
      id: "1",
      name: "project-proposal.pdf",
      size: "2.4 MB",
      type: "pdf",
      progress: 100,
      status: "complete",
    },
    {
      id: "2",
      name: "presentation.pptx",
      size: "4.8 MB",
      type: "pptx",
      progress: 100,
      status: "complete",
    },
    {
      id: "3",
      name: "screenshot.png",
      size: "1.2 MB",
      type: "image",
      progress: 65,
      status: "uploading",
    },
    {
      id: "4",
      name: "data-analysis.xlsx",
      size: "3.5 MB",
      type: "xlsx",
      progress: 0,
      status: "error",
    },
  ])

  const removeFile = (id: string) => {
    setFiles(files.filter((file) => file.id !== id))
  }

  const getFileIcon = (type: string) => {
    switch (type) {
      case "pdf":
        return <FileText className="h-6 w-6 text-rose-500" />
      case "image":
        return <ImageIcon className="h-6 w-6 text-emerald-500" />
      case "video":
        return <Film className="h-6 w-6 text-blue-500" />
      case "audio":
        return <Music className="h-6 w-6 text-purple-500" />
      case "zip":
      case "rar":
        return <Archive className="h-6 w-6 text-amber-500" />
      case "pptx":
        return <FileText className="h-6 w-6 text-orange-500" />
      case "xlsx":
        return <FileText className="h-6 w-6 text-emerald-600" />
      default:
        return <File className="h-6 w-6 text-blue-500" />
    }
  }

  return (
    <Card className="w-full max-w-md mx-auto shadow-sm">
      <CardHeader className="p-6">
        <CardTitle>File Upload</CardTitle>
        <CardDescription>Upload your files here.</CardDescription>
      </CardHeader>
      <CardContent className="p-6 pt-0 space-y-6">
        <div className="border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center cursor-pointer hover:bg-muted/50 transition-colors">
          <Upload className="h-10 w-10 text-muted-foreground mb-4" />
          <h3 className="text-lg font-medium mb-2">Drag files here or click to browse</h3>
          <p className="text-sm text-muted-foreground mb-1">Support for PDF, DOCX, XLSX, JPG, PNG and more</p>
          <p className="text-xs text-muted-foreground mb-4">Up to 10MB per file</p>
          <input type="file" className="hidden" multiple />
          <Button>Select Files</Button>
        </div>

        <div className="space-y-3">
          {files.map((file) => (
            <div
              key={file.id}
              className={cn(
                "flex items-center p-4 rounded-lg border",
                file.status === "error" && "border-destructive/50 bg-destructive/10",
              )}
            >
              <div className="mr-4 flex-shrink-0">{getFileIcon(file.type)}</div>
              <div className="flex-1 min-w-0">
                <div className="flex justify-between items-start mb-1">
                  <div className="truncate font-medium text-sm">{file.name}</div>
                  <button
                    onClick={() => removeFile(file.id)}
                    className="ml-2 text-muted-foreground hover:text-foreground transition-colors"
                  >
                    <X className="h-4 w-4" />
                  </button>
                </div>
                <div className="flex items-center justify-between text-xs">
                  <span className="text-muted-foreground">{file.size}</span>
                  {file.status === "error" && (
                    <span className="flex items-center text-destructive">
                      <AlertCircle className="h-3 w-3 mr-1" />
                      Upload failed
                    </span>
                  )}
                  {file.status === "complete" && <span className="text-emerald-500">Complete</span>}
                  {file.status === "uploading" && <span className="text-muted-foreground">{file.progress}%</span>}
                </div>
                {file.status === "uploading" && <Progress value={file.progress} className="h-1 mt-2" />}
              </div>
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between border-t p-6 gap-4">
        <Button variant="outline" size="sm">
          Cancel All
        </Button>
        <Button size="sm">Upload All</Button>
      </CardFooter>
    </Card>
  )
}