import { notFound } from 'next/navigation';

import { SECTION_ORDER, SECTION_DATA } from '../sectionConfig';
import { AGE_DATA } from '../ageConfig';
import { WHOLETHING_DATA } from '../wholethingConfig';
import { IMAGE_LANDING_PAGES, BENEFITS_PAGES, STORY_PAGES } from '../payloads';
import { OnboardingPageWrapper } from '../OnboardingPageWrapper';

import WelcomePage from '../components/WelcomePage';
import SocialProofPage from '../components/SocialProofPage';
import AgeSection from '../components/AgeSection';
import TopicsSectionPicker from '../components/TopicsSectionPicker';
import WholethingSection from '../components/WholethingSection';
import ImageLandingCard from '../components/ImageLandingCard';
import BenefitsCard from '../components/BenefitsCard';
import StorySection from '../components/StorySection';
import LoadingPlanSection from '../components/LoadingPlanSection';
import GrowthChartSection from '../components/GrowthChartSection';
import PlansSection from '../components/PlansSection';
import PlansTemplateSection from '../components/PlansTemplateSection';
import PlansOneSection from '../components/PlansOneSection';

interface PageProps {
  params: { page: string };
}

export default function OnboardingPage({ params }: PageProps) {
  const { page: slug } = params;

  // Helper to get next section
  const getNext = () => {
    const idx = SECTION_ORDER.indexOf(slug);
    if (idx === -1 || idx === SECTION_ORDER.length - 1) return undefined;
    return SECTION_ORDER[idx + 1];
  };

  // 1. Welcome page
  if (slug === 'welcome') {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <WelcomePage />
      </OnboardingPageWrapper>
    );
  }

  // 2. Social proof page
  if (slug === 'social-proof') {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <SocialProofPage />
      </OnboardingPageWrapper>
    );
  }

  // 3. Single-choice questions (AgeSection)
  const ageData = AGE_DATA[slug];
  if (ageData) {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <AgeSection data={ageData} nextSection={getNext()} slug={slug} />
      </OnboardingPageWrapper>
    );
  }

  // 4. Image landing cards (interstitials with images)
  const imageLanding = IMAGE_LANDING_PAGES[slug];
  if (imageLanding) {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <ImageLandingCard payload={imageLanding} slug={slug} />
      </OnboardingPageWrapper>
    );
  }

  // 5. Yes/No with image (WholethingSection)
  const wholething = WHOLETHING_DATA[slug];
  if (wholething) {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <WholethingSection data={wholething} nextSection={getNext()} slug={slug} />
      </OnboardingPageWrapper>
    );
  }

  // 6. Multi-select topics
  const topicData = SECTION_DATA[slug];
  if (topicData) {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <TopicsSectionPicker section={topicData} nextSection={getNext()} slug={slug} />
      </OnboardingPageWrapper>
    );
  }

  // 7. Benefits card (divine guidance)
  const benefits = BENEFITS_PAGES[slug];
  if (benefits) {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <BenefitsCard payload={benefits} slug={slug} />
      </OnboardingPageWrapper>
    );
  }

  // 8. Story sections (yes/no with video thumbnail)
  const story = STORY_PAGES[slug];
  if (story) {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <StorySection data={story} nextSection={getNext()} slug={slug} />
      </OnboardingPageWrapper>
    );
  }

  // 9. Loading plan animation
  if (slug === 'loading-plan') {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <LoadingPlanSection />
      </OnboardingPageWrapper>
    );
  }

  // 10. Growth chart
  if (slug === 'growth-chart') {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <GrowthChartSection />
      </OnboardingPageWrapper>
    );
  }

  // 11. Plans / paywall (new payment wall)
  if (slug === 'plans') {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <PlansSection />
      </OnboardingPageWrapper>
    );
  }

  // 12. Old plans template (kept reachable for reuse)
  if (slug === 'plans-template') {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <PlansTemplateSection />
      </OnboardingPageWrapper>
    );
  }

  // 13. Plans one — paywall with PayPal/Credit Card toggle
  if (slug === 'plansone') {
    return (
      <OnboardingPageWrapper pageName={slug}>
        <PlansOneSection />
      </OnboardingPageWrapper>
    );
  }

  notFound();
}
