"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useRef, useState, type FormEvent } from "react";
import { REGEXP_ONLY_DIGITS } from "input-otp";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
import { authClient } from "@/lib/auth/client";

export function RegistrationOtpForm({ email, nextPath, setup }: {
  email: string; nextPath: string; setup: boolean;
}) {
  const router = useRouter();
  const emailRef = useRef<HTMLInputElement>(null);
  const [busy, setBusy] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const [sent, setSent] = useState(setup);

  async function verify(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (busy) return;
    const form = new FormData(event.currentTarget);
    const address = String(form.get("email") ?? "").trim();
    const otp = String(form.get("otp") ?? "").trim();
    setBusy(true);
    setError("");
    try {
      const result = await authClient.emailOtp.verifyEmail({ email: address, otp });
      if (result.error) throw new Error("รหัสไม่ถูกต้องหรือหมดอายุ กรุณาลองอีกครั้ง");
      const returnPath = setup ? `/auth/register?step=profile&next=${encodeURIComponent(nextPath)}` : nextPath;
      router.replace(returnPath);
      router.refresh();
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "ยืนยันอีเมลไม่สำเร็จ");
    } finally { setBusy(false); }
  }

  async function resend() {
    if (sending || busy) return;
    const address = emailRef.current?.value.trim() ?? "";
    if (!address) return;
    setSending(true);
    setError("");
    try {
      const result = await authClient.emailOtp.sendVerificationOtp({ email: address, type: "email-verification" });
      if (result.error) throw new Error("ส่งรหัสใหม่ไม่สำเร็จ กรุณาลองอีกครั้ง");
      setSent(true);
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "ส่งรหัสใหม่ไม่สำเร็จ");
    } finally { setSending(false); }
  }

  return <Card className="w-full max-w-sm">
    <CardHeader><CardTitle>ยืนยันอีเมล</CardTitle></CardHeader>
    <CardContent className="flex flex-col gap-4">
      {sent && <Alert><AlertDescription>กรอกรหัส 6 หลักที่ส่งไปยังอีเมลของคุณ รหัสหมดอายุใน 5 นาที</AlertDescription></Alert>}
      {!sent && <p className="text-sm text-muted-foreground">กรอกรหัสจากอีเมล หรือกดส่งรหัสใหม่หากยังไม่มีรหัส</p>}
      {error && <Alert variant="destructive"><AlertDescription>{error}</AlertDescription></Alert>}
      <form onSubmit={verify}>
        <FieldGroup>
          <Field><FieldLabel htmlFor="otp-email">อีเมล</FieldLabel>
            <Input ref={emailRef} id="otp-email" name="email" type="email" defaultValue={email} autoComplete="email" required disabled={busy || sending} />
          </Field>
          <Field><FieldLabel htmlFor="otp-code">รหัส OTP</FieldLabel>
            <InputOTP id="otp-code" name="otp" containerClassName="w-full" inputMode="numeric" autoComplete="one-time-code"
              pattern={REGEXP_ONLY_DIGITS} minLength={6} maxLength={6} required disabled={busy || sending}>
              <InputOTPGroup className="w-full">
                {Array.from({ length: 6 }, (_, index) => <InputOTPSlot key={index} index={index} className="flex-1" />)}
              </InputOTPGroup>
            </InputOTP>
          </Field>
          <Button type="submit" disabled={busy || sending}>{busy ? "กำลังยืนยัน..." : "ยืนยันอีเมล"}</Button>
        </FieldGroup>
      </form>
      <Button variant="link" onClick={resend} disabled={busy || sending}>
        {sending ? "กำลังส่ง..." : "ส่งรหัสใหม่"}
      </Button>
      <Button variant="link" nativeButton={false} render={<Link href="/auth/login" />}>กลับไปเข้าสู่ระบบ</Button>
    </CardContent>
  </Card>;
}