/**
 * @ai-summary Desktop signup page with centered card layout
 */

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { SignupForm } from '../components/SignupForm';
import { useSignup } from '../hooks/useSignup';
import { SignupRequest } from '../types/auth.types';

export const SignupPage: React.FC = () => {
  const navigate = useNavigate();
  const { mutate: signup, isPending } = useSignup();

  const handleSubmit = (data: SignupRequest) => {
    signup(data, {
      onSuccess: () => {
        // Store email in localStorage for post-verification login_hint
        // (navigation state is lost when Auth0 redirects after verification)
        localStorage.setItem('pendingVerificationEmail', data.email);
        // Pass email to verify-email page for resend functionality
        navigate('/verify-email', { state: { email: data.email } });
      },
    });
  };

  return (
    <div className="min-h-screen bg-nero flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="bg-nero border border-white/10 rounded-lg shadow-lg shadow-black/30 p-8">
          <div className="text-center mb-8">
            <img
              src="/images/logos/motovaultpro-title-slogan.png"
              alt="MotoVaultPro - Precision Vehicle Management"
              className="h-12 md:h-14 w-auto mx-auto mb-4"
            />
            <h2 className="text-xl font-semibold text-avus">Create Your Account</h2>
            <p className="text-sm text-titanio mt-2">
              Start tracking your vehicle maintenance and fuel logs
            </p>
          </div>

          <SignupForm onSubmit={handleSubmit} loading={isPending} />

          <div className="mt-6 text-center text-sm text-titanio">
            Already have an account?{' '}
            <button
              onClick={() => navigate('/login')}
              className="text-primary-500 hover:text-primary-400 font-medium focus:outline-none focus:underline"
            >
              Login
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
