import type { Metadata } from "next";
import { Suspense } from "react";
import Link from "next/link";
import { Logo } from "@/components/brand/logo";
import { Badge } from "@/components/ui/badge";
import { ResetForm } from "./reset-form";

export const metadata: Metadata = {
  title: "Réinitialiser le mot de passe",
  description: "Définissez votre nouveau mot de passe.",
  robots: { index: false, follow: false },
};

export default function ResetPasswordPage() {
  return (
    <main
      id="main-content"
      className="min-h-dvh relative overflow-hidden flex items-center justify-center px-4 sm:px-6 py-12"
    >
      <div className="relative z-10 w-full max-w-md">
        <Link href="/" className="block mb-8 text-center" aria-label="Retour à l'accueil">
          <Logo size="lg" />
        </Link>

        <div className="panel p-6 sm:p-8">
          <div className="text-center">
            <h1 className="font-editorial text-3xl font-medium text-text">Nouveau mot de passe</h1>
            <p className="mt-1.5 text-sm text-text-muted">
              Choisissez un mot de passe d'au moins 12 caractères.
            </p>
          </div>

          {/* Suspense pour useSearchParams : le token vient de l'URL ?token=... */}
          <Suspense fallback={null}>
            <ResetForm />
          </Suspense>
        </div>

        <div className="mt-6 text-center">
          <Badge tone="muted">RGPD · Données hébergées en France</Badge>
        </div>
      </div>
    </main>
  );
}