"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { UserPlus, Mail } from "lucide-react";
import { Button, Input, Label } from "@/components/ui";
import type { Locale } from "@/lib/i18n";

const labels = {
  en: {
    name: "Name",
    email: "Email",
    password: "Password",
    registerFailed: "Could not create the account.",
    creating: "Creating...",
    createAccount: "Create account",
    checkEmail: "Check your email for a verification code."
  },
  ar: {
    name: "الاسم",
    email: "البريد الإلكتروني",
    password: "كلمة المرور",
    registerFailed: "لم نتمكن من إنشاء الحساب.",
    creating: "جاري الإنشاء...",
    createAccount: "إنشاء الحساب",
    checkEmail: "تحقق من بريدك الإلكتروني للحصول على رمز التحقق."
  }
} as const;

export function RegisterForm({ locale }: { locale: Locale }) {
  const router = useRouter();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const t = labels[locale];

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);
    setError("");
    const formData = new FormData(event.currentTarget);
    const payload = {
      username: formData.get("name"),
      email: formData.get("email"),
      password: formData.get("password")
    };

    const response = await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    });

    const body = (await response.json()) as { error?: string; email?: string; needsVerification?: boolean; message?: string };

    if (!response.ok) {
      setError(body.error || t.registerFailed);
      setLoading(false);
      return;
    }

    // If verification is required, redirect to OTP page
    if (body.needsVerification && body.email) {
      // Store email in session storage for OTP page
      sessionStorage.setItem("pending_verification_email", body.email);
      router.push(`/register/verify-otp?email=${encodeURIComponent(body.email)}`);
      return;
    }

    // Fallback to login page
    router.push("/login?registered=true");
    router.refresh();
  }

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      <div>
        <Label htmlFor="name">{t.name}</Label>
        <Input id="name" name="name" autoComplete="name" required disabled={loading} />
      </div>
      <div>
        <Label htmlFor="email">{t.email}</Label>
        <Input id="email" name="email" type="email" autoComplete="email" required disabled={loading} />
      </div>
      <div>
        <Label htmlFor="password">{t.password}</Label>
        <Input id="password" name="password" type="password" minLength={8} autoComplete="new-password" required disabled={loading} />
      </div>
      {error && <p className="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}
      <Button className="w-full" disabled={loading}>
        {loading ? (
          <>
            <UserPlus size={16} className="animate-spin mr-2" />
            {t.creating}
          </>
        ) : (
          <>
            <UserPlus size={16} className="mr-2" />
            {t.createAccount}
          </>
        )}
      </Button>
      <p className="text-center text-sm text-slate-500 flex items-center justify-center gap-2">
        <Mail size={14} />
        You&apos;ll receive a verification code via email
      </p>
    </form>
  );
}