"use client";

import { useOnboardingStore } from "@/stores/onboarding";
import { WelcomeStep } from "@/components/onboarding/welcome-step";
import { ChoosePathStep } from "@/components/onboarding/choose-path-step";
import { CreateResidenceStep } from "@/components/onboarding/create-residence-step";
import { JoinResidenceStep } from "@/components/onboarding/join-residence-step";
import { FirstTaskStep } from "@/components/onboarding/first-task-step";
import { CompleteStep } from "@/components/onboarding/complete-step";

export default function OnboardingPage() {
  const { currentStep, path } = useOnboardingStore();

  // Step flow:
  // 0: Welcome
  // 1: Choose path (create or join)
  // 2: Create Residence (path=create) or Join Residence (path=join)
  // 3: First Task (path=create only) or Complete (path=join)
  // 4: Complete (path=create)

  if (currentStep === 0) {
    return <WelcomeStep />;
  }

  if (currentStep === 1) {
    return <ChoosePathStep />;
  }

  if (currentStep === 2) {
    if (path === "create") {
      return <CreateResidenceStep />;
    }
    if (path === "join") {
      return <JoinResidenceStep />;
    }
    // Fallback if path not set (shouldn't happen)
    return <ChoosePathStep />;
  }

  if (currentStep === 3) {
    if (path === "create") {
      return <FirstTaskStep />;
    }
    // path === "join" reaches complete at step 3
    return <CompleteStep />;
  }

  if (currentStep === 4) {
    return <CompleteStep />;
  }

  // Fallback
  return <WelcomeStep />;
}
