"use client";

import { useState } from "react";

import { useT } from "@/hooks/i18n/useT";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useRecoveryCode as submitRecoveryCode } from "@/app/actions/auth/useRecoveryCode";
import { AvisoSemResposta, useEnvioComTeto } from "@/components/auth/teto-da-espera";

interface RecoveryFormProps {
  next?: string;
}

export function RecoveryForm({ next }: RecoveryFormProps) {
  const t = useT();
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const { pendente: isPending, semResposta, enviar } = useEnvioComTeto();

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    // Quem normaliza (espaços, hífen, minúsculas) é o servidor, com a mesma regra da gravação.
    void enviar(() => submitRecoveryCode({ email, code }, next), (res) => {
      if (!res) return; // server-side redirect on success
      if (res.error === "service_unavailable") {
        setError(t("Serviço de recuperação indisponível. Contate o administrador."));
      } else {
        setError(t("Código inválido ou já utilizado."));
      }
    });
  };

  return (
    <form method="post" onSubmit={onSubmit} className="space-y-4" noValidate>
      <div className="space-y-1.5">
        <Label htmlFor="email">{t("Email")}</Label>
        <Input
          id="email"
          type="email"
          autoComplete="email"
          autoFocus
          required
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="recovery-code">{t("Código de recuperação")}</Label>
        <Input
          id="recovery-code"
          inputMode="text"
          autoComplete="one-time-code"
          maxLength={12}
          required
          placeholder="ABCD2345"
          className="font-mono uppercase tracking-widest"
          value={code}
          onChange={(e) => setCode(e.target.value.toUpperCase())}
        />
        <p className="text-xs text-muted-foreground">
          {t("Use um dos 10 códigos que você salvou ao configurar a verificação em duas etapas.")}
        </p>
      </div>

      {error && (
        <div
          role="alert"
          className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive"
        >
          {error}
        </div>
      )}
      {semResposta && <AvisoSemResposta />}

      <Button type="submit" className="w-full" disabled={isPending}>
        {isPending ? t("Validando…") : t("Recuperar acesso")}
      </Button>
    </form>
  );
}