"use client";

import { Suspense, useEffect } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { AuthLayout } from "../components";
import { SetPasswordForm } from "@/features/auth/components";
import { LoadingOverlay } from "@/components/atoms";

function SetPasswordContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const email = searchParams.get("email") ?? "";

  useEffect(() => {
    if (!email) {
      router.replace("/auth/link-whmcs");
    }
  }, [email, router]);

  const handlePasswordSetSuccess = () => {
    // Redirect to dashboard after successful password setup
    router.push("/dashboard");
  };

  if (!email) {
    return (
      <AuthLayout title="Set password" subtitle="Redirecting you to the account transfer flow">
        <div className="space-y-4">
          <p className="text-sm text-gray-600">
            We couldn&apos;t find the email associated with your transfer. Please start the process
            again so we can verify your account.
          </p>
          <Link
            href="/auth/link-whmcs"
            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"
          >
            Go to account transfer
          </Link>
        </div>
      </AuthLayout>
    );
  }

  return (
    <AuthLayout
      title="Create your new portal password"
      subtitle="Complete your account transfer with a secure password"
    >
      <div className="space-y-8">
        <div className="p-5 bg-green-50 border border-green-200 rounded-xl">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg className="h-5 w-5 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="ml-3 text-sm text-green-800">
              <p>
                Great! We matched your account <strong>{email}</strong>. Create a new password to
                finish the transfer and unlock the upgraded portal experience.
              </p>
            </div>
          </div>
        </div>

        <SetPasswordForm email={email} onSuccess={handlePasswordSetSuccess} />

        <div className="pt-6 border-t border-gray-200 space-y-2 text-sm text-gray-600">
          <h3 className="font-medium text-gray-900">What happens next?</h3>
          <ul className="list-disc list-inside space-y-1">
            <li>This new password replaces your previous portal credentials</li>
            <li>Your services, billing history, and account data stay exactly the same</li>
            <li>You can manage everything from the upgraded Assist Solutions portal</li>
          </ul>
        </div>
      </div>
    </AuthLayout>
  );
}

export function SetPasswordView() {
  return (
    <Suspense
      fallback={
        <AuthLayout title="Set password" subtitle="Preparing your account transfer...">
          <LoadingOverlay
            isVisible={true}
            title="Preparing your account..."
            subtitle="Please wait while we set up your transfer"
            overlayClassName="bg-transparent"
          />
        </AuthLayout>
      }
    >
      <SetPasswordContent />
    </Suspense>
  );
}

export default SetPasswordView;
