"use client"

import { useCallback, useEffect, useState } from "react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RefreshCw } from "lucide-react"

export type CaptchaValor = { token: string; answer: string } | null

/**
 * Suma de verificación anti-bots (ver lib/captcha.ts). El padre recibe
 * {token, answer} por onChange y los manda en el body como
 * captchaToken/captchaAnswer; el servidor valida. Si el envío falla por
 * captcha, subir `refreshKey` para pedir una suma nueva.
 *
 * Estilos con tokens semánticos: funciona igual en el admin (claro) y en el
 * sitio público vestido de Palco.
 */
export function CaptchaSuma({
  onChange,
  refreshKey = 0,
  className = "",
}: {
  onChange: (valor: CaptchaValor) => void
  refreshKey?: number
  className?: string
}) {
  const [reto, setReto] = useState<{ a: number; b: number; token: string } | null>(null)
  const [answer, setAnswer] = useState("")
  const [error, setError] = useState(false)

  const cargar = useCallback(() => {
    setReto(null)
    setAnswer("")
    setError(false)
    onChange(null)
    fetch("/api/captcha")
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then(setReto)
      .catch(() => setError(true))
    // onChange llega inline desde los formularios; incluirlo re-dispararía
    // la carga en cada render del padre.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [refreshKey])

  useEffect(() => {
    cargar()
  }, [cargar])

  useEffect(() => {
    onChange(reto && answer.trim() !== "" ? { token: reto.token, answer: answer.trim() } : null)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [reto, answer])

  return (
    <div className={className}>
      <Label htmlFor="captcha-suma" className="flex items-center gap-2">
        <span>
          Verificación: ¿cuánto es{" "}
          <strong>{reto ? `${reto.a} + ${reto.b}` : error ? "…" : "…"}</strong>?
        </span>
        <button
          type="button"
          onClick={cargar}
          aria-label="Pedir otra suma"
          className="text-muted-foreground hover:text-foreground transition-colors"
        >
          <RefreshCw className="h-3.5 w-3.5" />
        </button>
      </Label>
      <Input
        id="captcha-suma"
        type="text"
        inputMode="numeric"
        autoComplete="off"
        placeholder="Escribe el resultado"
        value={answer}
        onChange={(e) => setAnswer(e.target.value)}
        className="mt-1"
      />
      {error && (
        <p className="text-xs text-destructive mt-1">
          No se pudo cargar la verificación. Toca la flecha para reintentar.
        </p>
      )}
    </div>
  )
}