"use client";

import { useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { Loader2 } from "lucide-react";
import { Link, useRouter } from "@/i18n/navigation";
import AuthLayout from "@/components/auth/AuthLayout";
import Input from "@/components/ui/Input";
import Button from "@/components/ui/Button";
import { useBrand } from "@/components/providers/BrandProvider";
import { readApiJson, toastError, toastPromise } from "@/lib/toast";

export default function RegisterPage() {
  const router = useRouter();
  const locale = useLocale();
  const t = useTranslations("auth");
  const tc = useTranslations("common");
  const brand = useBrand();
  const [form, setForm] = useState({
    firstName: "",
    lastName: "",
    username: "",
    email: "",
    password: "",
    confirm: "",
  });
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    if (form.password !== form.confirm) {
      toastError(t("passwordMismatch"));
      return;
    }

    setLoading(true);
    try {
      await toastPromise(
        readApiJson(
          await fetch("/api/register", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              firstName: form.firstName,
              lastName: form.lastName,
              username: form.username,
              email: form.email,
              password: form.password,
              locale,
            }),
          }),
          t("registrationFailed")
        ),
        {
          loading: t("creatingAccount"),
          success: t("accountCreated"),
          error: (err) =>
            err instanceof Error ? err.message : t("registrationFailed"),
        }
      );
      router.push("/login?registered=true");
    } catch {
      // surfaced via toast
    } finally {
      setLoading(false);
    }
  }

  return (
    <AuthLayout title={t("createAccount")} subtitle={t("createAccountSubtitle", { appName: brand.name })}>
      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="grid gap-4 sm:grid-cols-2">
          <Input
            label={t("firstName")}
            type="text"
            value={form.firstName}
            onChange={(e) => setForm({ ...form, firstName: e.target.value })}
            placeholder={t("firstNamePlaceholder")}
            required
            disabled={loading}
            autoComplete="given-name"
          />
          <Input
            label={t("lastName")}
            type="text"
            value={form.lastName}
            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
            placeholder={t("lastNamePlaceholder")}
            required
            disabled={loading}
            autoComplete="family-name"
          />
        </div>
        <div className="space-y-1.5">
          <Input
            label={t("username")}
            hint={t("usernameHint")}
            hintLabel={tc("helpLabel")}
            type="text"
            value={form.username}
            onChange={(e) => setForm({ ...form, username: e.target.value.toLowerCase() })}
            placeholder={t("usernamePlaceholder")}
            required
            disabled={loading}
            autoComplete="username"
          />
        </div>
        <Input
          label={t("email")}
          type="email"
          value={form.email}
          onChange={(e) => setForm({ ...form, email: e.target.value })}
          placeholder={t("emailPlaceholder")}
          required
          disabled={loading}
        />
        <Input
          label={t("password")}
          type="password"
          value={form.password}
          onChange={(e) => setForm({ ...form, password: e.target.value })}
          placeholder={t("passwordMinPlaceholder")}
          required
          disabled={loading}
        />
        <Input
          label={t("confirmPassword")}
          type="password"
          value={form.confirm}
          onChange={(e) => setForm({ ...form, confirm: e.target.value })}
          placeholder={t("repeatPassword")}
          required
          disabled={loading}
        />

        <Button type="submit" disabled={loading} className="w-full" size="lg">
          {loading ? (
            <>
              <Loader2 className="w-4 h-4 animate-spin" />
              {t("creatingAccount")}
            </>
          ) : (
            t("createAccount")
          )}
        </Button>
      </form>

      <p className="text-center text-sm text-[var(--text-muted)] mt-6">
        {t("hasAccount")}{" "}
        <Link href="/login" className="cursor-pointer font-medium text-[var(--accent)] transition-colors hover:text-[var(--accent-hover)]">
          {t("loginLink")}
        </Link>
      </p>
    </AuthLayout>
  );
}