motovaultpro/frontend/src/features/onboarding/pages/OnboardingPage.tsx

/**
 * @ai-summary Desktop onboarding page with multi-step wizard
 */

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useSavePreferences, useCompleteOnboarding } from '../hooks/useOnboarding';
import { PreferencesStep } from '../components/PreferencesStep';
import { AddVehicleStep } from '../components/AddVehicleStep';
import { CompleteStep } from '../components/CompleteStep';
import { OnboardingStep, OnboardingPreferences } from '../types/onboarding.types';
import { CreateVehicleRequest } from '../../vehicles/types/vehicles.types';
import { vehiclesApi } from '../../vehicles/api/vehicles.api';
import toast from 'react-hot-toast';

export const OnboardingPage: React.FC = () => {
  const navigate = useNavigate();
  const [currentStep, setCurrentStep] = useState<OnboardingStep>('preferences');
  const savePreferences = useSavePreferences();
  const completeOnboarding = useCompleteOnboarding();
  const [isAddingVehicle, setIsAddingVehicle] = useState(false);

  const stepNumbers: Record<OnboardingStep, number> = {
    preferences: 1,
    vehicle: 2,
    complete: 3,
  };

  const handleSavePreferences = async (data: OnboardingPreferences) => {
    try {
      await savePreferences.mutateAsync(data);
      setCurrentStep('vehicle');
    } catch (error) {
      // Error is handled by the mutation hook
    }
  };

  const handleAddVehicle = async (data: CreateVehicleRequest) => {
    setIsAddingVehicle(true);
    try {
      await vehiclesApi.create(data);
      toast.success('Vehicle added successfully');
      setCurrentStep('complete');
    } catch (error: any) {
      toast.error(error.response?.data?.error || 'Failed to add vehicle');
    } finally {
      setIsAddingVehicle(false);
    }
  };

  const handleSkipVehicle = () => {
    setCurrentStep('complete');
  };

  const handleComplete = async () => {
    try {
      await completeOnboarding.mutateAsync();
      navigate('/garage');
    } catch (error) {
      // Error is handled by the mutation hook
    }
  };

  const handleBack = () => {
    if (currentStep === 'vehicle') {
      setCurrentStep('preferences');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
      <div className="w-full max-w-2xl">
        {/* Progress Indicator */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-2">
            {(['preferences', 'vehicle', 'complete'] as OnboardingStep[]).map((step, index) => (
              <React.Fragment key={step}>
                <div className="flex items-center">
                  <div
                    className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold transition-all ${
                      stepNumbers[currentStep] >= stepNumbers[step]
                        ? 'bg-primary-600 text-white dark:bg-primary-700 dark:text-white'
                        : 'bg-gray-200 text-gray-500 dark:bg-inactive dark:text-gray-400'
                    }`}
                  >
                    {stepNumbers[step]}
                  </div>
                  <span
                    className={`ml-2 text-sm font-medium hidden sm:inline ${
                      stepNumbers[currentStep] >= stepNumbers[step]
                        ? 'text-primary-600 dark:text-primary-400'
                        : 'text-gray-500 dark:text-gray-400'
                    }`}
                  >
                    {step === 'preferences' && 'Preferences'}
                    {step === 'vehicle' && 'Add Vehicle'}
                    {step === 'complete' && 'Complete'}
                  </span>
                </div>
                {index < 2 && (
                  <div
                    className={`flex-1 h-1 mx-2 rounded transition-all ${
                      stepNumbers[currentStep] > stepNumbers[step]
                        ? 'bg-primary-600 dark:bg-primary-700'
                        : 'bg-gray-200 dark:bg-inactive'
                    }`}
                  />
                )}
              </React.Fragment>
            ))}
          </div>
          <p className="text-sm text-slate-600 dark:text-gray-300 text-center mt-4">
            Step {stepNumbers[currentStep]} of 3
          </p>
        </div>

        {/* Step Content */}
        <div className="bg-white dark:bg-card rounded-2xl shadow-xl border border-slate-200 dark:border-border p-6 md:p-8">
          {currentStep === 'preferences' && (
            <PreferencesStep
              onNext={handleSavePreferences}
              loading={savePreferences.isPending}
            />
          )}

          {currentStep === 'vehicle' && (
            <AddVehicleStep
              onNext={handleSkipVehicle}
              onAddVehicle={handleAddVehicle}
              onBack={handleBack}
              loading={isAddingVehicle}
            />
          )}

          {currentStep === 'complete' && (
            <CompleteStep
              onComplete={handleComplete}
              loading={completeOnboarding.isPending}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default OnboardingPage;