import Link from 'next/link';
import type { Metadata } from 'next';
import { ROUTES } from '@/lib/routes';
import { ResetPasswordForm } from '@/components/auth/reset-password-form';

export const metadata: Metadata = { title: 'Reset Password' };

export default function ResetPasswordPage({ searchParams }: { searchParams: { token?: string; email?: string } }) {
  const token = searchParams?.token ?? '';
  const email = searchParams?.email ?? '';
  const hasLinkData = Boolean(token && email);

  return (
    <section className="bg-beige py-16">
      <div className="container-page flex justify-center">
        <div className="card w-full max-w-md p-8">
          <h1 className="text-center font-serif text-2xl font-bold text-navy-800">Reset Password</h1>

          {hasLinkData ? (
            <>
              <p className="mt-1 text-center text-xs text-navy-500">Choose a new password for {email}.</p>
              <ResetPasswordForm token={token} email={email} />
            </>
          ) : (
            <div className="mt-4 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-center text-sm text-red-700">
              This reset link is missing information.{' '}
              <Link href={ROUTES.forgotPassword} className="font-semibold underline">
                Request a new one
              </Link>
              .
            </div>
          )}
        </div>
      </div>
    </section>
  );
}