gridpilot.gg/apps/website/components/onboarding/OnboardingWizard.tsx

import { useState, FormEvent } from 'react';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import { StepIndicator } from '@/ui/StepIndicator';
import { PersonalInfoStep, PersonalInfo } from './PersonalInfoStep';
import { AvatarStep, AvatarInfo } from './AvatarStep';

type OnboardingStep = 1 | 2;

interface FormErrors {
  [key: string]: string | undefined;
  firstName?: string;
  lastName?: string;
  displayName?: string;
  country?: string;
  facePhoto?: string;
  avatar?: string;
  submit?: string;
}

interface OnboardingWizardProps {
  onCompleted: () => void;
  onCompleteOnboarding: (data: {
    firstName: string;
    lastName: string;
    displayName: string;
    country: string;
    timezone?: string;
  }) => Promise<{ success: boolean; error?: string }>;
  onGenerateAvatars: (params: {
    facePhotoData: string;
    suitColor: string;
  }) => Promise<{ success: boolean; data?: { success: boolean; avatarUrls?: string[]; errorMessage?: string }; error?: string }>;
}

export function OnboardingWizard({ onCompleted, onCompleteOnboarding, onGenerateAvatars }: OnboardingWizardProps) {
  const [step, setStep] = useState<OnboardingStep>(1);
  const [errors, setErrors] = useState<FormErrors>({});

  // Form state
  const [personalInfo, setPersonalInfo] = useState<PersonalInfo>({
    firstName: '',
    lastName: '',
    displayName: '',
    country: '',
    timezone: '',
  });

  const [avatarInfo, setAvatarInfo] = useState<AvatarInfo>({
    facePhoto: null,
    suitColor: 'blue',
    generatedAvatars: [],
    selectedAvatarIndex: null,
    isGenerating: false,
    isValidating: false,
  });

  // Validation
  const validateStep = (currentStep: OnboardingStep): boolean => {
    const newErrors: FormErrors = {};

    if (currentStep === 1) {
      if (!personalInfo.firstName.trim()) {
        newErrors.firstName = 'First name is required';
      }
      if (!personalInfo.lastName.trim()) {
        newErrors.lastName = 'Last name is required';
      }
      if (!personalInfo.displayName.trim()) {
        newErrors.displayName = 'Display name is required';
      } else if (personalInfo.displayName.length < 3) {
        newErrors.displayName = 'Display name must be at least 3 characters';
      }
      if (!personalInfo.country) {
        newErrors.country = 'Please select your country';
      }
    }

    if (currentStep === 2) {
      if (!avatarInfo.facePhoto) {
        newErrors.facePhoto = 'Please upload a photo of your face';
      }
      if (avatarInfo.generatedAvatars.length > 0 && avatarInfo.selectedAvatarIndex === null) {
        newErrors.avatar = 'Please select one of the generated avatars';
      }
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleNext = () => {
    const isValid = validateStep(step);
    if (isValid && step < 2) {
      setStep((step + 1) as OnboardingStep);
    }
  };

  const handleBack = () => {
    if (step > 1) {
      setStep((step - 1) as OnboardingStep);
    }
  };

  const generateAvatars = async () => {
    if (!avatarInfo.facePhoto) {
      setErrors({ ...errors, facePhoto: 'Please upload a photo first' });
      return;
    }

    setAvatarInfo(prev => ({ ...prev, isGenerating: true, generatedAvatars: [], selectedAvatarIndex: null }));
    const newErrors = { ...errors };
    delete newErrors.avatar;
    setErrors(newErrors);

    try {
      const result = await onGenerateAvatars({
        facePhotoData: avatarInfo.facePhoto,
        suitColor: avatarInfo.suitColor,
      });

      if (result.success && result.data?.success && result.data.avatarUrls) {
        setAvatarInfo(prev => ({
          ...prev,
          generatedAvatars: result.data!.avatarUrls!,
          isGenerating: false,
        }));
      } else {
        setErrors(prev => ({ ...prev, avatar: result.data?.errorMessage || result.error || 'Failed to generate avatars' }));
        setAvatarInfo(prev => ({ ...prev, isGenerating: false }));
      }
    } catch (error) {
      setErrors(prev => ({ ...prev, avatar: 'Failed to generate avatars. Please try again.' }));
      setAvatarInfo(prev => ({ ...prev, isGenerating: false }));
    }
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    // Validate step 2 - must have selected an avatar
    if (!validateStep(2)) {
      return;
    }

    if (avatarInfo.selectedAvatarIndex === null) {
      setErrors({ ...errors, avatar: 'Please select an avatar' });
      return;
    }

    setErrors({});

    try {
      const result = await onCompleteOnboarding({
        firstName: personalInfo.firstName.trim(),
        lastName: personalInfo.lastName.trim(),
        displayName: personalInfo.displayName.trim(),
        country: personalInfo.country,
        timezone: personalInfo.timezone || undefined,
      });

      if (result.success) {
        onCompleted();
      } else {
        setErrors({ submit: result.error || 'Failed to create profile' });
      }
    } catch (error) {
      setErrors({ submit: 'Failed to create profile' });
    }
  };

  // Loading state comes from the mutations
  const loading = false; // This would be managed by the parent component

  return (
    <div className="max-w-3xl mx-auto px-4 py-10">
      {/* Header */}
      <div className="text-center mb-8">
        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-primary-blue/20 to-purple-600/10 border border-primary-blue/30 mx-auto mb-4">
          <span className="text-2xl">🏁</span>
        </div>
        <h1 className="text-4xl font-bold mb-2">Welcome to GridPilot</h1>
        <p className="text-gray-400">
          Let us set up your racing profile
        </p>
      </div>

      {/* Progress Indicator */}
      <StepIndicator currentStep={step} />

      {/* Form Card */}
      <Card className="relative overflow-hidden">
        {/* Background accent */}
        <div className="absolute top-0 right-0 w-40 h-40 bg-gradient-to-bl from-primary-blue/10 to-transparent rounded-bl-full" />

        <form onSubmit={handleSubmit} className="relative">
          {/* Step 1: Personal Information */}
          {step === 1 && (
            <PersonalInfoStep
              personalInfo={personalInfo}
              setPersonalInfo={setPersonalInfo}
              errors={errors}
              loading={loading}
            />
          )}

          {/* Step 2: Avatar Generation */}
          {step === 2 && (
            <AvatarStep
              avatarInfo={avatarInfo}
              setAvatarInfo={setAvatarInfo}
              errors={errors}
              setErrors={setErrors}
              onGenerateAvatars={generateAvatars}
            />
          )}

          {/* Error Message */}
          {errors.submit && (
            <div className="mt-6 flex items-start gap-3 p-4 rounded-xl bg-red-500/10 border border-red-500/30">
              <span className="text-red-400 flex-shrink-0 mt-0.5">⚠</span>
              <p className="text-sm text-red-400">{errors.submit}</p>
            </div>
          )}

          {/* Navigation Buttons */}
          <div className="mt-8 flex items-center justify-between">
            <Button
              type="button"
              variant="secondary"
              onClick={handleBack}
              disabled={step === 1 || loading}
              className="flex items-center gap-2"
            >
              <span>←</span>
              Back
            </Button>

            {step < 2 ? (
              <Button
                type="button"
                variant="primary"
                onClick={handleNext}
                disabled={loading}
                className="flex items-center gap-2"
              >
                Continue
                <span>→</span>
              </Button>
            ) : (
              <Button
                type="submit"
                variant="primary"
                disabled={loading || avatarInfo.selectedAvatarIndex === null}
                className="flex items-center gap-2"
              >
                {loading ? (
                  <>
                    <span className="animate-spin">⟳</span>
                    Creating Profile...
                  </>
                ) : (
                  <>
                    <span>✓</span>
                    Complete Setup
                  </>
                )}
              </Button>
            )}
          </div>
        </form>
      </Card>

      {/* Help Text */}
      <p className="text-center text-xs text-gray-500 mt-6">
        Your avatar will be AI-generated based on your photo and chosen suit color
      </p>
    </div>
  );
}