FRASA-CAS/apps/alta-clientes/src/components/FileUploader.tsx

import { useCallback, useEffect, useState } from 'react'
import { useDropzone } from 'react-dropzone'
import type { DocumentoCargado, SlotDocumento } from '../types'
import { TAMANO_MAX_DOCUMENTO } from '../data/constantes'

interface Props {
  slot: SlotDocumento
  etiqueta: string
  documento?: DocumentoCargado
  onAgregar: (doc: DocumentoCargado) => void
  onQuitar: (slot: SlotDocumento) => void
}

function formatoTamano(bytes: number): string {
  return bytes >= 1024 * 1024 ? `${(bytes / (1024 * 1024)).toFixed(1)} MB` : `${Math.round(bytes / 1024)} KB`
}

/** Miniatura del documento: imagen con object-cover o recuadro plano para PDF */
function Miniatura({ documento, url }: { documento: DocumentoCargado; url: string }) {
  const esImagen = documento.tipoMime.startsWith('image/')
  return (
    <a
      href={url}
      target="_blank"
      rel="noreferrer"
      title={`Abrir ${documento.nombre} en una pestaña nueva`}
      aria-label={`Abrir ${documento.nombre} en una pestaña nueva`}
      className="block h-20 w-20 shrink-0 border border-neutral-200 bg-neutral-50"
    >
      {esImagen ? (
        <img src={url} alt={`Vista previa de ${documento.nombre}`} className="h-full w-full object-cover" />
      ) : (
        <span className="flex h-full w-full flex-col items-center justify-center gap-1">
          <span className="text-xs font-bold uppercase tracking-widest text-neutral-900">PDF</span>
          <span className="max-w-full truncate px-1 text-[10px] font-light text-neutral-500">{documento.nombre}</span>
        </span>
      )}
    </a>
  )
}

/** Slot de carga de un documento (PDF/JPG/PNG, máx 10 MB) con vista previa */
export default function FileUploader({ slot, etiqueta, documento, onAgregar, onQuitar }: Props) {
  const [urlObjeto, setUrlObjeto] = useState('')

  // URL de objeto para la miniatura y para abrir en pestaña nueva; se revoca al quitar/desmontar
  useEffect(() => {
    if (!documento) {
      setUrlObjeto('')
      return
    }
    const url = URL.createObjectURL(documento.archivo)
    setUrlObjeto(url)
    return () => URL.revokeObjectURL(url)
  }, [documento])

  const onDrop = useCallback(
    (aceptados: File[]) => {
      const archivo = aceptados[0]
      if (!archivo) return
      onAgregar({ slot, nombre: archivo.name, tamano: archivo.size, tipoMime: archivo.type, archivo })
    },
    [slot, onAgregar],
  )

  const { getRootProps, getInputProps, isDragActive, fileRejections } = useDropzone({
    onDrop,
    multiple: false,
    maxSize: TAMANO_MAX_DOCUMENTO,
    accept: {
      'application/pdf': ['.pdf'],
      'image/jpeg': ['.jpg', '.jpeg'],
      'image/png': ['.png'],
    },
  })

  if (documento) {
    return (
      <div className="flex items-center justify-between gap-4 border border-neutral-200 bg-white px-4 py-3">
        <div className="flex min-w-0 items-center gap-4">
          {urlObjeto && <Miniatura documento={documento} url={urlObjeto} />}
          <div className="min-w-0">
            <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{etiqueta}</p>
            <p className="mt-1 truncate text-sm text-neutral-900">
              {documento.nombre} · {formatoTamano(documento.tamano)}
            </p>
          </div>
        </div>
        <button
          type="button"
          onClick={() => onQuitar(slot)}
          className="shrink-0 border border-red-300 bg-white px-3 py-1.5 text-xs font-bold uppercase tracking-widest text-red-700 transition-colors duration-150 hover:bg-red-50"
        >
          Quitar
        </button>
      </div>
    )
  }

  return (
    <div>
      <div
        {...getRootProps()}
        className={`cursor-pointer border border-dashed border-neutral-300 bg-white px-4 py-6 text-center transition-colors duration-150 ${
          isDragActive ? 'border-neutral-900 bg-neutral-50' : 'hover:border-neutral-500'
        }`}
      >
        <input {...getInputProps()} aria-label={`Seleccionar archivo para ${etiqueta}`} />
        <p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{etiqueta}</p>
        <p className="mt-2 text-xs font-light text-neutral-500">Arrastra el archivo aquí · PDF/JPG/PNG · máx 10 MB</p>
        <button
          type="button"
          className="mt-4 border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white"
        >
          Seleccionar archivo
        </button>
      </div>
      {fileRejections.length > 0 && (
        <p className="mt-1 text-xs text-red-700">Archivo rechazado: formato no permitido o mayor a 10 MB</p>
      )}
    </div>
  )
}