import Link from "next/link";
import { registerWithPassword } from "@/lib/actions/customer-password-auth";
import AuthBrandMark from "@/components/AuthBrandMark";

export const metadata = { title: "Create an account — Iniyaval Return Gifts" };

export default async function CustomerRegisterPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;

  return (
    <div className="mx-auto flex min-h-[70vh] max-w-sm flex-col justify-center px-4">
      <AuthBrandMark />
      <div className="mt-6 rounded-xl border border-rose-100 bg-white p-6 shadow-sm">
      <h1 className="font-[family-name:var(--font-heading)] text-xl font-bold text-stone-800">Create an account</h1>
      <p className="mt-1 text-sm text-stone-500">Set a password so you can sign in directly next time.</p>

      {error && <p className="mt-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">{decodeURIComponent(error)}</p>}

      <form action={registerWithPassword} className="mt-6 space-y-4">
        <div>
          <label className="text-sm font-medium text-stone-700">Name</label>
          <input
            type="text"
            name="name"
            required
            autoFocus
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
          />
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Email</label>
          <input
            type="email"
            name="email"
            required
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
          />
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Mobile number</label>
          <input
            type="tel"
            name="phone"
            required
            inputMode="numeric"
            pattern="\d{10}"
            maxLength={10}
            title="Enter a 10-digit mobile number"
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
          />
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Password</label>
          <input
            type="password"
            name="password"
            required
            minLength={8}
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
          />
          <p className="mt-1 text-xs text-stone-400">At least 8 characters.</p>
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Confirm password</label>
          <input
            type="password"
            name="confirmPassword"
            required
            minLength={8}
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm focus:border-rose-400 focus:outline-none"
          />
        </div>
        <button type="submit" className="w-full rounded-md bg-rose-700 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
          Create account
        </button>
      </form>

      <p className="mt-4 text-center text-xs text-stone-500">
        We&apos;ll email you a code to confirm it&apos;s really you before signing you in.
      </p>

      <div className="mt-6 space-y-2 border-t border-rose-100 pt-4 text-center text-xs text-stone-500">
        <p>
          Already have an account?{" "}
          <Link href="/account/login" className="font-medium text-rose-700 hover:underline">
            Sign in
          </Link>
        </p>
      </div>
      </div>
    </div>
  );
}