import { useRef, useEffect } from 'react'
import SignatureCanvas from 'react-signature-canvas'

interface Props {
  onFirma: (dataUrl: string) => void
}

/** Pad de firma del cliente; exporta PNG base64 al terminar cada trazo */
export default function SignaturePad({ onFirma }: Props) {
  const ref = useRef<SignatureCanvas | null>(null)

  useEffect(() => {
    // Notifica firma vacía al montar (estado inicial)
    onFirma('')
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const limpiar = () => {
    ref.current?.clear()
    onFirma('')
  }

  const alTerminar = () => {
    const pad = ref.current
    if (!pad) return
    onFirma(pad.isEmpty() ? '' : pad.getTrimmedCanvas().toDataURL('image/png'))
  }

  return (
    <div>
      <div className="border border-neutral-900 bg-white">
        <SignatureCanvas
          ref={ref}
          onEnd={alTerminar}
          canvasProps={{ className: 'h-40 w-full', 'aria-label': 'Firma del cliente' }}
          penColor="black"
        />
      </div>
      <button
        type="button"
        onClick={limpiar}
        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"
      >
        Limpiar firma
      </button>
    </div>
  )
}