/**
 * @ai-summary Mobile signup screen with glass card styling
 */

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

export const SignupMobileScreen: 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 (
    <MobileContainer>
      <div className="flex-1 overflow-y-auto p-4 space-y-6">
        <div className="text-center pt-8 pb-4">
          <h1 className="text-3xl font-bold text-primary-600 mb-2">MotoVaultPro</h1>
          <h2 className="text-xl font-semibold text-slate-800">Create Your Account</h2>
          <p className="text-sm text-slate-600 mt-2">
            Start tracking your vehicle maintenance and fuel logs
          </p>
        </div>

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

        <div className="text-center text-sm text-slate-600 pb-8">
          Already have an account?{' '}
          <button
            onClick={() => navigate('/login')}
            className="text-primary-600 hover:text-primary-700 font-medium focus:outline-none focus:underline min-h-[44px] inline-flex items-center"
          >
            Login
          </button>
        </div>
      </div>
    </MobileContainer>
  );
};

export default SignupMobileScreen;
