"use client";

import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useState } from "react";

import { safeNextUrl } from "@/lib/auth-navigation";
import {
  getMe,
  registerWithPassword,
  type WebAuthNormalizedError,
} from "@/lib/web-auth-client";

function friendlyRegisterMessage(err: WebAuthNormalizedError): string {
  if (err.status === 409) return "Email này đã được dùng.";
  return err.message || "Đã có lỗi xảy ra.";
}

function RegisterFormInner() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const nextDest = safeNextUrl(searchParams.get("next"), "/");

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    const em = email.trim();
    if (!em) {
      setError("Vui lòng nhập email.");
      return;
    }
    if (password.length < 8) {
      setError("Mật khẩu cần ít nhất 8 ký tự.");
      return;
    }
    if (password !== confirm) {
      setError("Mật khẩu xác nhận không khớp.");
      return;
    }
    setLoading(true);
    try {
      await registerWithPassword(em, password, name.trim() || undefined);
      const { user } = await getMe();
      if (user.requiresPhoneVerification) {
        router.replace(`/verify-phone?next=${encodeURIComponent(nextDest)}`);
      } else {
        router.replace(nextDest);
      }
    } catch (caught: unknown) {
      const err = caught as WebAuthNormalizedError;
      setError(friendlyRegisterMessage(err));
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="mt-10 space-y-5">
      {error ? (
        <p
          className="rounded-lg border border-red-900/40 bg-red-950/25 px-3 py-2 text-sm text-red-200/90"
          role="alert"
        >
          {error}
        </p>
      ) : null}
      <div>
        <label htmlFor="reg-name" className="block text-xs font-medium uppercase tracking-wider text-stone-500">
          Tên hiển thị <span className="normal-case text-stone-600">(tuỳ chọn)</span>
        </label>
        <input
          id="reg-name"
          name="name"
          type="text"
          autoComplete="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="mt-1.5 w-full rounded-lg border border-stone-800/80 bg-black/30 px-3 py-2.5 text-[15px] text-stone-100 outline-none ring-amber-900/25 focus:ring-2"
        />
      </div>
      <div>
        <label htmlFor="reg-email" className="block text-xs font-medium uppercase tracking-wider text-stone-500">
          Email
        </label>
        <input
          id="reg-email"
          name="email"
          type="email"
          autoComplete="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="mt-1.5 w-full rounded-lg border border-stone-800/80 bg-black/30 px-3 py-2.5 text-[15px] text-stone-100 outline-none ring-amber-900/25 focus:ring-2"
        />
      </div>
      <div>
        <label htmlFor="reg-password" className="block text-xs font-medium uppercase tracking-wider text-stone-500">
          Mật khẩu <span className="normal-case text-stone-600">(tối thiểu 8 ký tự)</span>
        </label>
        <input
          id="reg-password"
          name="password"
          type="password"
          autoComplete="new-password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          className="mt-1.5 w-full rounded-lg border border-stone-800/80 bg-black/30 px-3 py-2.5 text-[15px] text-stone-100 outline-none ring-amber-900/25 focus:ring-2"
        />
      </div>
      <div>
        <label htmlFor="reg-confirm" className="block text-xs font-medium uppercase tracking-wider text-stone-500">
          Xác nhận mật khẩu
        </label>
        <input
          id="reg-confirm"
          name="confirm"
          type="password"
          autoComplete="new-password"
          value={confirm}
          onChange={(e) => setConfirm(e.target.value)}
          className="mt-1.5 w-full rounded-lg border border-stone-800/80 bg-black/30 px-3 py-2.5 text-[15px] text-stone-100 outline-none ring-amber-900/25 focus:ring-2"
        />
      </div>
      <button
        type="submit"
        disabled={loading}
        className="mt-2 w-full rounded-xl border border-amber-700/45 bg-amber-950/45 py-3 text-sm font-medium text-amber-50/95 transition hover:bg-amber-950/65 disabled:cursor-not-allowed disabled:opacity-50"
      >
        {loading ? "Đang tạo tài khoản…" : "Đăng ký"}
      </button>
      <p className="text-center text-sm text-stone-500">
        Đã có tài khoản?{" "}
        <Link href="/login" className="ctkp-text-link">
          Đăng nhập
        </Link>
      </p>
    </form>
  );
}

export default function RegisterPage() {
  return (
    <main className="mx-auto max-w-[1100px] flex-1 px-4 py-16 sm:px-8 sm:py-20">
      <article className="mx-auto max-w-md">
        <header className="text-center">
          <div className="ctkp-rule mx-auto mb-8 w-20 opacity-80" aria-hidden />
          <p className="ctkp-eyebrow tracking-[0.36em]">Cổ Thư Kỳ Tịch · mở sổ</p>
          <h1 className="font-ctkp-display mt-5 text-[1.85rem] font-semibold leading-tight tracking-tight text-stone-100 sm:text-[2rem]">
            Đăng ký
          </h1>
          <p className="mt-3 text-sm leading-relaxed text-stone-500">
            Tạo tài khoản beta — sau đó xác minh số điện thoại.
          </p>
        </header>
        <Suspense
          fallback={
            <p className="mt-10 text-center text-sm text-stone-500" role="status">
              Đang tải…
            </p>
          }
        >
          <RegisterFormInner />
        </Suspense>
        <p className="mt-10 text-center">
          <Link href="/" className="ctkp-text-link text-sm">
            ← Về trang chủ
          </Link>
        </p>
      </article>
    </main>
  );
}