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

export const metadata = { title: "Reset password — Iniyaval Return Gifts" };

export default async function ForgotPasswordPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string; sent?: string }>;
}) {
  const { error, sent } = 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">Reset your password</h1>

      {sent ? (
        <>
          <p className="mt-1 text-sm text-stone-500">
            If that email has a password-protected account, we&apos;ve sent a link to reset it. The link expires in 30
            minutes.
          </p>
          <p className="mt-6 text-center text-xs text-stone-500">
            Didn&apos;t get it?{" "}
            <Link href="/account/forgot-password" className="font-medium text-rose-700 hover:underline">
              Try again
            </Link>
          </p>
        </>
      ) : (
        <>
          <p className="mt-1 text-sm text-stone-500">Enter your email and we&apos;ll send you a link to reset your password.</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={requestPasswordReset} className="mt-6 space-y-4">
            <div>
              <label className="text-sm font-medium text-stone-700">Email</label>
              <input
                type="email"
                name="email"
                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>
            <button type="submit" className="w-full rounded-md bg-rose-700 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
              Send reset link
            </button>
          </form>
        </>
      )}

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