'use client';

import { OnboardingWizard } from '@/components/onboarding/OnboardingWizard';
import { PreferencesStep } from '@/components/onboarding/steps/PreferencesStep';
import { ProfileStep } from '@/components/onboarding/steps/ProfileStep';
import { WelcomeStep } from '@/components/onboarding/steps/WelcomeStep';

const onboardingSteps = [
  {
    id: 'welcome',
    title: 'Welcome',
    description: 'Get started with Nexus Console',
    component: WelcomeStep,
  },
  {
    id: 'profile',
    title: 'Profile',
    description: 'Set up your profile information',
    component: ProfileStep,
  },
  {
    id: 'preferences',
    title: 'Preferences',
    description: 'Configure your preferences',
    component: PreferencesStep,
  },
];

export default function OnboardingPage() {
  const handleComplete = async () => {
    const profile =
      typeof window !== 'undefined'
        ? {
            fullName: (
              document.getElementById('onboarding-full-name') as HTMLInputElement | null
            )?.value,
            role: (document.getElementById('onboarding-role') as HTMLInputElement | null)?.value,
          }
        : {};

    const preferences =
      typeof window !== 'undefined'
        ? {
            theme: (document.getElementById('onboarding-theme') as HTMLSelectElement | null)?.value,
          }
        : {};

    const response = await fetch('/api/onboarding', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ profile, preferences }),
    });

    if (!response.ok) {
      const payload = await response.json().catch(() => ({ message: 'Failed to complete onboarding.' }));
      throw new Error(typeof payload.message === 'string' ? payload.message : 'Failed to complete onboarding.');
    }
  };

  return <OnboardingWizard steps={onboardingSteps} onComplete={handleComplete} />;
}
