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

export const metadata = { title: "Set a new password — Iniyaval Return Gifts" };

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

  if (!token) {
    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">Reset link missing</h1>
        <p className="mt-1 text-sm text-stone-500">
          This page needs a reset link from your email.{" "}
          <Link href="/account/forgot-password" className="font-medium text-rose-700 hover:underline">
            Request a new one
          </Link>
          .
        </p>
        </div>
      </div>
    );
  }

  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">Set a new password</h1>

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

      <form action={resetPassword} className="mt-6 space-y-4">
        <input type="hidden" name="token" value={token} />
        <div>
          <label className="text-sm font-medium text-stone-700">New password</label>
          <input
            type="password"
            name="password"
            required
            minLength={8}
            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"
          />
          <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 new 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">
          Set new password
        </button>
      </form>
      </div>
    </div>
  );
}