import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from '../../../app';
import { RegisterStep1 } from './components/register-step-1/register-step-1';
import { RegisterStep2 } from './components/register-step-2/register-step-2';
import { RegisterStep2ExtraPartner } from './components/register-step-2-extra-partner/register-step-2-extra-partner';
import { RegisterStep3 } from './components/register-step-3/register-step-3';
import { Login } from './components/login/login';

export type WizardStep = '1' | '2' | '2-extra-partner' | '3' | 'login';

export interface SetupWizardProps {
  businessTypes: Record<string, string>;
  language: string;
}

export interface WizardFormData {
  userType?: 'Partner' | 'Location';
  businessName?: string;
  ownerName?: string;
  category?: string;
  partnerFirstName?: string;
  partnerPhone?: string;
}

export function SetupWizard({ businessTypes, language }: SetupWizardProps): JSX.Element {
  const [currentStep, setCurrentStep] = useState<WizardStep>('1');
  const [formData, setFormData] = useState<WizardFormData>({});

  const showStep = (step: WizardStep): void => {
    setCurrentStep(step);
  };

  const handleUserTypeSelect = (type: 'Partner' | 'Location'): void => {
    setFormData((prev) => ({ ...prev, userType: type }));
  };

  const updateFormData = (data: Partial<WizardFormData>): void => {
    setFormData((prev) => ({ ...prev, ...data }));
  };

  const renderStep = (): JSX.Element => {
    switch (currentStep) {
      case '1':
        return (
          <RegisterStep1
            onNext={(type) => {
              handleUserTypeSelect(type);
              if (type === 'Partner') {
                showStep('2');
              } else {
                showStep('2');
              }
            }}
            onShowLogin={() => showStep('login')}
          />
        );
      case '2':
        return (
          <RegisterStep2
            businessTypes={businessTypes}
            userType={formData.userType || 'Location'}
            formData={formData}
            onBack={() => showStep('1')}
            onSubmit={(data) => {
              updateFormData(data);
              if (formData.userType === 'Partner') {
                showStep('2-extra-partner');
              } else {
                showStep('3');
              }
            }}
          />
        );
      case '2-extra-partner':
        return (
          <RegisterStep2ExtraPartner
            formData={formData}
            onBack={() => showStep('2')}
            onSubmit={(data) => {
              updateFormData(data);
              showStep('3');
            }}
          />
        );
      case '3':
        return (
          <RegisterStep3
            userType={formData.userType || 'Location'}
            language={language}
            formData={formData}
            onBack={() => {
              if (formData.userType === 'Partner') {
                showStep('2-extra-partner');
              } else {
                showStep('2');
              }
            }}
          />
        );
      case 'login':
        return (
          <Login
            onBackToRegister={() => showStep('1')}
          />
        );
      default:
        return <RegisterStep1 onNext={() => {}} onShowLogin={() => {}} />;
    }
  };

  return (
    <div className="ttsbs-wizard w-full h-full flex justify-center items-center">
      {renderStep()}
    </div>
  );
}

function initSetupWizard(): void {
  const container = document.getElementById('ttsbs-wizard-root');
  if (!container) {
    return;
  }

  // init the app
  App.bootstrap({
    ajaxUrl: container.dataset.ajaxUrl || '',
    nonce: container.dataset.nonce || '',
    bookingAppUrl: container.dataset.bookingAppUrl || '',
  });

  const businessTypes = JSON.parse(container.dataset.businessTypes || '{}');
  const language = container.dataset.language || 'en';

  const root = createRoot(container);
  root.render(
    <SetupWizard
      businessTypes={businessTypes}
      language={language}
    />
  );
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initSetupWizard);
} else {
  initSetupWizard();
}