import Link from "next/link";
import { redirect } from "next/navigation";
import { prisma } from "@/lib/prisma";
import { getCurrentCustomerId } from "@/lib/customer-auth";
import { completeProfile } from "@/lib/actions/customer-password-auth";
import AuthBrandMark from "@/components/AuthBrandMark";

export const metadata = { title: "Complete your profile — Iniyaval Return Gifts" };

export default async function CompleteProfilePage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;
  const customerId = await getCurrentCustomerId();
  if (!customerId) redirect("/account/login");

  const customer = await prisma.customer.findUnique({ where: { id: customerId } });
  if (!customer) redirect("/account/login");

  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">Complete your profile</h1>
      <p className="mt-1 text-sm text-stone-500">
        You&apos;re signed in — add a few details and set a password so you can sign in directly next time, no code needed.
      </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={completeProfile} className="mt-6 space-y-4">
        <div>
          <label className="text-sm font-medium text-stone-700">Email</label>
          <input
            type="email"
            value={customer.email}
            disabled
            className="mt-1 block w-full rounded-md border border-stone-200 bg-stone-50 px-3 py-2 text-sm text-stone-500"
          />
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Name</label>
          <input
            type="text"
            name="name"
            required
            autoFocus
            defaultValue={customer.name ?? ""}
            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"
            defaultValue={customer.phone ?? ""}
            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">
          Save &amp; continue
        </button>
      </form>
      </div>

      <p className="mt-4 text-center text-xs text-stone-500">
        <Link href="/account" className="font-medium text-rose-700 hover:underline">
          Skip for now
        </Link>
      </p>
    </div>
  );
}