import React, { useRef, useState } from 'react'
import { Upload, Film, X } from 'lucide-react'

interface UploadZoneProps {
  onFile: (file: File) => void
  file: File | null
  onClear: () => void
  label?: string
}

export default function UploadZone({ onFile, file, onClear, label = 'Arraste seu vídeo aqui' }: UploadZoneProps) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [dragging, setDragging] = useState(false)

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setDragging(false)
    const f = e.dataTransfer.files[0]
    if (f && f.type.startsWith('video/')) onFile(f)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const f = e.target.files?.[0]
    if (f) onFile(f)
  }

  const fmt = (bytes: number) => {
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
    return `${(bytes / 1024 / 1024).toFixed(1)} MB`
  }

  if (file) {
    return (
      <div className="flex items-center gap-3 bg-white/5 border border-white/10 rounded-xl px-4 py-3">
        <Film size={20} className="text-indigo-400 flex-shrink-0" />
        <div className="flex-1 min-w-0">
          <p className="text-sm text-slate-200 truncate font-medium">{file.name}</p>
          <p className="text-xs text-slate-500">{fmt(file.size)}</p>
        </div>
        <button
          onClick={onClear}
          className="text-slate-500 hover:text-red-400 transition-colors"
        >
          <X size={16} />
        </button>
      </div>
    )
  }

  return (
    <div
      onClick={() => inputRef.current?.click()}
      onDrop={handleDrop}
      onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
      onDragLeave={() => setDragging(false)}
      className={`
        border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all
        ${dragging
          ? 'border-indigo-400 bg-indigo-500/10'
          : 'border-white/10 hover:border-indigo-500/50 hover:bg-white/3'
        }
      `}
    >
      <input
        ref={inputRef}
        type="file"
        accept="video/mp4,video/mov,video/quicktime,video/avi,video/webm,video/x-matroska"
        className="hidden"
        onChange={handleChange}
      />
      <Upload size={32} className="mx-auto mb-3 text-slate-500" />
      <p className="text-slate-300 font-medium mb-1">{label}</p>
      <p className="text-xs text-slate-500">MP4, MOV, AVI, WebM - máx. 500 MB</p>
    </div>
  )
}