"use client";

import { AuthLayout } from "../components";
import { SignupForm } from "@/features/auth/components";
import { useAuthStore } from "../services/auth.store";
import { LoadingOverlay } from "@/components/atoms";

export function SignupView() {
  const { loading, isAuthenticated } = useAuthStore();

  return (
    <>
      <AuthLayout
        title="Create your portal account"
        subtitle="Verify your details and set up secure access in a few guided steps"
      >
        <div className="space-y-8">
          <div className="bg-blue-50 border border-blue-200 rounded-xl p-5">
            <h2 className="text-sm font-semibold text-blue-800 mb-3">What you&apos;ll need</h2>
            <ul className="text-sm text-blue-700 space-y-2 list-disc list-inside">
              <li>Your Assist Solutions customer number</li>
              <li>Primary contact details and service address</li>
              <li>A secure password that meets our enhanced requirements</li>
            </ul>
          </div>
          <SignupForm />
        </div>
      </AuthLayout>

      {/* Full-page loading overlay during authentication */}
      <LoadingOverlay
        isVisible={loading && isAuthenticated}
        title="Setting up your account..."
        subtitle="Please wait while we prepare your dashboard"
      />
    </>
  );
}

export default SignupView;
