"use client";

import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { requestEmailVerificationOTP, verifyEmailWithOTP } from "@/lib/actions/auth";

export function OtpForm({ defaultEmail }: { defaultEmail: string }) {
  const t = useTranslations("Auth.verifyEmail");
  const router = useRouter();
  const [email, setEmail] = useState(defaultEmail);
  const [otp, setOtp] = useState("");
  const [isPending, startTransition] = useTransition();
  const [resendPending, startResend] = useTransition();
  const [sent, setSent] = useState(defaultEmail.length > 0);

  function onRequest(e?: React.FormEvent<HTMLFormElement>) {
    e?.preventDefault();
    const trimmed = email.trim();
    if (!trimmed) return;
    startResend(async () => {
      try {
        await requestEmailVerificationOTP({ email: trimmed });
        setSent(true);
        toast.success(t("sentSuccess"));
      } catch {
        toast.error(t("sentFailed"));
      }
    });
  }

  function onVerify(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const trimmedEmail = email.trim();
    const trimmedOtp = otp.trim();
    if (!trimmedEmail || !trimmedOtp) return;
    startTransition(async () => {
      try {
        await verifyEmailWithOTP({ email: trimmedEmail, otp: trimmedOtp });
        toast.success(t("verifiedSuccess"));
        router.push("/dashboard");
      } catch {
        toast.error(t("verifiedFailed"));
      }
    });
  }

  if (!sent) {
    return (
      <form onSubmit={onRequest} className="flex flex-col gap-3">
        <div className="flex flex-col gap-2">
          <Label htmlFor="verify-email">{t("emailLabel")}</Label>
          <Input
            id="verify-email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder={t("emailPlaceholder")}
            required
            autoFocus
          />
        </div>
        <Button type="submit" disabled={resendPending || !email.trim()}>
          {resendPending ? t("sending") : t("sendCode")}
        </Button>
      </form>
    );
  }

  return (
    <form onSubmit={onVerify} className="flex flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label htmlFor="verify-otp">{t("otpLabel")}</Label>
        <Input
          id="verify-otp"
          inputMode="numeric"
          autoComplete="one-time-code"
          value={otp}
          onChange={(e) => setOtp(e.target.value.replace(/\D/g, "").slice(0, 6))}
          placeholder="123456"
          required
          autoFocus
          className="text-center text-2xl tracking-[0.4em]"
          maxLength={6}
        />
        <p className="text-xs text-muted-foreground">{t("otpHelper", { email })}</p>
      </div>
      <Button type="submit" disabled={isPending || otp.length < 4}>
        {isPending ? t("verifying") : t("verify")}
      </Button>
      <Button type="button" variant="ghost" onClick={() => onRequest()} disabled={resendPending}>
        {resendPending ? t("sending") : t("resend")}
      </Button>
    </form>
  );
}