import { RecoveryForm } from '../../components/recovery-form';

export default async function ForgotPasswordPage({
  searchParams,
}: {
  searchParams: Promise<{ token?: string | string[] }>;
}) {
  const { token } = await searchParams;
  const initialToken = typeof token === 'string' ? token : '';
  return (
    <div className="min-h-[calc(100vh-80px)] pt-24 pb-16 px-4 flex items-center justify-center bg-brand-bg relative overflow-hidden">
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-96 h-96 bg-brand-cyan/10 rounded-full blur-3xl pointer-events-none"></div>

      <div className="w-full max-w-md relative z-10">
        <div className="text-center mb-8 space-y-2">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-container-low border border-outline-variant/40 text-[11px] font-mono tracking-wide text-primary-fixed-dim">
            <span className="w-1.5 h-1.5 rounded-full bg-secondary-fixed"></span>
            Account Security
          </div>
          <h1 className="text-3xl font-extrabold text-white tracking-tight">
            Reset access safely.
          </h1>
          <p className="text-sm text-on-surface-variant max-w-xs mx-auto">
            Request a short-lived reset link, then choose a new password.
          </p>
        </div>

        <div className="glass-card rounded-2xl border border-brand-border p-6 sm:p-8 shadow-2xl backdrop-blur-xl relative overflow-hidden">
          <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-container via-surface-tint to-transparent"></div>
          <RecoveryForm key={initialToken} initialToken={initialToken} />
        </div>
      </div>
    </div>
  );
}