igny8/frontend/src/components/onboarding/OnboardingWizard.tsx

/**
 * OnboardingWizard Component
 * Multi-step wizard for new user onboarding
 * Provides a guided flow: Welcome → Add Site → Connect Integration → Add Keywords → Complete
 */
import React, { useState, useCallback, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card } from '../ui/card';
import Button from '../ui/button/Button';
import { 
  ArrowRightIcon,
  ArrowLeftIcon,
  CloseIcon,
  BoltIcon,
  CheckCircleIcon,
} from '../../icons';
import { useOnboardingStore } from '../../store/onboardingStore';
import { useToast } from '../ui/toast/ToastContainer';

// Step components
import Step1Welcome from './steps/Step1Welcome';
import Step2AddSite from './steps/Step2AddSite';
import Step3ConnectIntegration from './steps/Step3ConnectIntegration';
import Step4AddKeywords from './steps/Step4AddKeywords';
import Step5Complete from './steps/Step5Complete';

export interface WizardStep {
  id: number;
  title: string;
  description: string;
  isOptional?: boolean;
}

export interface WizardData {
  // Site data
  siteName: string;
  domain: string;
  hostingType: string;
  industryId: number | null;
  industrySlug: string;
  selectedSectors: string[];
  // Created site reference
  createdSiteId: number | null;
  // Integration data
  integrationTested: boolean;
  // Keywords data
  keywordsAdded: boolean;
  keywordsCount: number;
}

const STEPS: WizardStep[] = [
  { id: 1, title: 'Welcome', description: 'Get started with IGNY8' },
  { id: 2, title: 'Add Site', description: 'Create your first site' },
  { id: 3, title: 'Connect', description: 'Install WordPress plugin', isOptional: true },
  { id: 4, title: 'Keywords', description: 'Add target keywords', isOptional: true },
  { id: 5, title: 'Complete', description: 'You\'re all set!' },
];

interface OnboardingWizardProps {
  onComplete?: () => void;
  onSkip?: () => void;
}

export default function OnboardingWizard({ onComplete, onSkip }: OnboardingWizardProps) {
  const navigate = useNavigate();
  const toast = useToast();
  const { dismissGuide } = useOnboardingStore();
  
  const [currentStep, setCurrentStep] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  
  const [wizardData, setWizardData] = useState<WizardData>({
    siteName: '',
    domain: '',
    hostingType: 'wordpress',
    industryId: null,
    industrySlug: '',
    selectedSectors: [],
    createdSiteId: null,
    integrationTested: false,
    keywordsAdded: false,
    keywordsCount: 0,
  });

  const updateWizardData = useCallback((updates: Partial<WizardData>) => {
    setWizardData(prev => ({ ...prev, ...updates }));
  }, []);

  const handleNext = useCallback(() => {
    if (currentStep < STEPS.length) {
      setCurrentStep(prev => prev + 1);
    }
  }, [currentStep]);

  const handleBack = useCallback(() => {
    if (currentStep > 1) {
      setCurrentStep(prev => prev - 1);
    }
  }, [currentStep]);

  const handleSkipStep = useCallback(() => {
    // Skip to next step (for optional steps)
    handleNext();
  }, [handleNext]);

  const handleComplete = useCallback(async () => {
    setIsLoading(true);
    try {
      await dismissGuide();
      
      if (onComplete) {
        onComplete();
      }
      
      // Navigate to the site dashboard
      if (wizardData.createdSiteId) {
        navigate(`/sites/${wizardData.createdSiteId}`);
      } else {
        navigate('/dashboard');
      }
      
      toast.success('Welcome to IGNY8! Your content pipeline is ready.');
    } catch (error) {
      console.error('Failed to complete onboarding:', error);
    } finally {
      setIsLoading(false);
    }
  }, [dismissGuide, navigate, onComplete, toast, wizardData.createdSiteId]);

  const handleSkipAll = useCallback(async () => {
    await dismissGuide();
    if (onSkip) {
      onSkip();
    }
    navigate('/dashboard');
  }, [dismissGuide, navigate, onSkip]);

  // Calculate progress percentage
  const progressPercent = ((currentStep - 1) / (STEPS.length - 1)) * 100;

  const renderStepContent = () => {
    switch (currentStep) {
      case 1:
        return (
          <Step1Welcome
            onNext={handleNext}
            onSkip={handleSkipAll}
          />
        );
      case 2:
        return (
          <Step2AddSite
            data={wizardData}
            updateData={updateWizardData}
            onNext={handleNext}
            onBack={handleBack}
            setIsLoading={setIsLoading}
          />
        );
      case 3:
        return (
          <Step3ConnectIntegration
            data={wizardData}
            updateData={updateWizardData}
            onNext={handleNext}
            onBack={handleBack}
            onSkip={handleSkipStep}
          />
        );
      case 4:
        return (
          <Step4AddKeywords
            data={wizardData}
            updateData={updateWizardData}
            onNext={handleNext}
            onBack={handleBack}
            onSkip={handleSkipStep}
          />
        );
      case 5:
        return (
          <Step5Complete
            data={wizardData}
            onComplete={handleComplete}
            isLoading={isLoading}
          />
        );
      default:
        return null;
    }
  };

  return (
    <div className="w-full max-w-3xl mx-auto">
      <Card className="w-full bg-white dark:bg-gray-900 rounded-2xl shadow-lg overflow-hidden">
        {/* Header */}
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="size-10 rounded-xl bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center text-white">
                <BoltIcon className="h-5 w-5" />
              </div>
              <div>
                <h2 className="text-lg font-bold text-gray-900 dark:text-white">
                  Getting Started
                </h2>
                <p className="text-sm text-gray-500 dark:text-gray-400">
                  Step {currentStep} of {STEPS.length}
                </p>
              </div>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={handleSkipAll}
              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
            >
              <CloseIcon className="w-5 h-5" />
            </Button>
          </div>
          
          {/* Progress Bar */}
          <div className="mt-4">
            <div className="flex items-center justify-between mb-2">
              {STEPS.map((step) => (
                <div
                  key={step.id}
                  className={`flex items-center ${step.id < STEPS.length ? 'flex-1' : ''}`}
                >
                  <div
                    className={`size-8 rounded-full flex items-center justify-center text-sm font-medium transition-colors ${
                      step.id < currentStep
                        ? 'bg-success-500 text-white'
                        : step.id === currentStep
                        ? 'bg-brand-500 text-white'
                        : 'bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
                    }`}
                  >
                    {step.id < currentStep ? (
                      <CheckCircleIcon className="w-5 h-5" />
                    ) : (
                      step.id
                    )}
                  </div>
                  {step.id < STEPS.length && (
                    <div
                      className={`h-1 flex-1 mx-2 rounded transition-colors ${
                        step.id < currentStep
                          ? 'bg-success-500'
                          : 'bg-gray-200 dark:bg-gray-700'
                      }`}
                    />
                  )}
                </div>
              ))}
            </div>
            <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
              {STEPS.map((step) => (
                <span
                  key={step.id}
                  className={`text-center ${
                    step.id === currentStep ? 'text-brand-600 dark:text-brand-400 font-medium' : ''
                  }`}
                  style={{ width: `${100 / STEPS.length}%` }}
                >
                  {step.title}
                </span>
              ))}
            </div>
          </div>
        </div>
        
        {/* Step Content */}
        <div className="p-6">
          {renderStepContent()}
        </div>
      </Card>
    </div>
  );
}