"use client";

import { Suspense } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { AuthLayout } from "../components";
import { PasswordResetForm } from "@/features/auth/components";

function ResetPasswordContent() {
  const searchParams = useSearchParams();
  const token = searchParams.get("token") ?? "";

  if (!token) {
    return (
      <AuthLayout title="Reset your password" subtitle="We couldn't validate your reset link">
        <div className="space-y-4">
          <p className="text-sm text-red-600">
            The password reset link is missing or has expired. Please request a new link to
            continue.
          </p>
          <Link
            href="/auth/forgot-password"
            className="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md"
          >
            Request new reset link
          </Link>
        </div>
      </AuthLayout>
    );
  }

  return (
    <AuthLayout title="Reset your password" subtitle="Set a new password for your account">
      <PasswordResetForm mode="reset" token={token} />
    </AuthLayout>
  );
}

export function ResetPasswordView() {
  return (
    <Suspense
      fallback={
        <AuthLayout title="Reset your password" subtitle="Loading your reset details...">
          <div className="space-y-4 animate-pulse">
            <div className="h-10 rounded bg-gray-200" />
            <div className="h-10 rounded bg-gray-200" />
            <div className="h-10 rounded bg-gray-200" />
          </div>
        </AuthLayout>
      }
    >
      <ResetPasswordContent />
    </Suspense>
  );
}

export default ResetPasswordView;
