'use client'

import { useRef, useState } from 'react'

const ACCEPTED = [
  'image/jpeg', 'image/png', 'image/heic', 'image/webp',
  'video/mp4', 'video/quicktime',
  'application/pdf',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
].join(',')

const MAX_SIZE = {
  'video/mp4': 200 * 1024 * 1024,
  'video/quicktime': 200 * 1024 * 1024,
  default: 10 * 1024 * 1024,
}

interface Props {
  onFilesChange: (files: File[]) => void
  disabled?: boolean
}

export function FileUpload({ onFilesChange, disabled = false }: Props) {
  const inputRef = useRef<HTMLInputElement>(null)
  const [files, setFiles] = useState<File[]>([])
  const [errors, setErrors] = useState<string[]>([])
  const [dragging, setDragging] = useState(false)

  function validate(incoming: File[]): { valid: File[]; errs: string[] } {
    const valid: File[] = []
    const errs: string[] = []
    for (const f of incoming) {
      const limit = MAX_SIZE[f.type as keyof typeof MAX_SIZE] ?? MAX_SIZE.default
      if (f.size > limit) {
        errs.push(`${f.name}: exceeds ${limit / 1024 / 1024}MB limit`)
      } else {
        valid.push(f)
      }
    }
    return { valid, errs }
  }

  function addFiles(incoming: File[]) {
    const { valid, errs } = validate(incoming)
    const next = [...files, ...valid]
    setFiles(next)
    setErrors(errs)
    onFilesChange(next)
  }

  function remove(index: number) {
    const next = files.filter((_, i) => i !== index)
    setFiles(next)
    onFilesChange(next)
  }

  return (
    <div className="space-y-2">
      <div
        className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
          ${dragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'}
          ${disabled ? 'opacity-50 pointer-events-none' : ''}`}
        onClick={() => inputRef.current?.click()}
        onDragOver={e => { e.preventDefault(); setDragging(true) }}
        onDragLeave={() => setDragging(false)}
        onDrop={e => {
          e.preventDefault()
          setDragging(false)
          addFiles(Array.from(e.dataTransfer.files))
        }}
      >
        <p className="text-sm text-gray-600">
          Tap to add photos / videos / documents
        </p>
        <p className="text-xs text-gray-400 mt-1">
          Photos/docs up to 10MB · Videos up to 200MB
        </p>
      </div>

      <input
        ref={inputRef}
        type="file"
        multiple
        accept={ACCEPTED}
        className="hidden"
        onChange={e => addFiles(Array.from(e.target.files ?? []))}
        disabled={disabled}
      />

      {errors.map((err, i) => (
        <p key={i} className="text-sm text-red-600">{err}</p>
      ))}

      {files.length > 0 && (
        <ul className="space-y-1">
          {files.map((f, i) => (
            <li key={i} className="flex items-center justify-between bg-gray-50 rounded px-3 py-2 text-sm">
              <span className="truncate max-w-xs">{f.name}</span>
              <button
                type="button"
                onClick={() => remove(i)}
                className="ml-2 text-red-500 hover:text-red-700 text-xs"
                disabled={disabled}
              >
                Remove
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}