import type { PageSection, Category, AccordionSectionPayload, ContactInfoSectionPayload, ContactFormSectionPayload } from '@homaroma/types';
import DynamicHero from './DynamicHero';
import DynamicHeroV2 from './DynamicHeroV2';
import DynamicUspBar from './DynamicUspBar';
import DynamicCategories from './DynamicCategories';
import DynamicProducts from './DynamicProducts';
import DynamicBanner from './DynamicBanner';
import DynamicText from './DynamicText';
import DynamicAnnouncementBar from './DynamicAnnouncementBar';
import DynamicNewsletter from './DynamicNewsletter';
import DynamicEditorialTile from './DynamicEditorialTile';
import DynamicEditorialCarousel from './DynamicEditorialCarousel';
import DynamicHeroArticle from './DynamicHeroArticle';
import DynamicScentNotesBreakdown from './DynamicScentNotesBreakdown';
import DynamicQuoteCallout from './DynamicQuoteCallout';
import DynamicProductCarousel from './DynamicProductCarousel';
import DynamicRichText from './DynamicRichText';
import AccordionSection from './sections/AccordionSection';
import ContactInfoSection from './sections/ContactInfoSection';
import ContactFormSection from './sections/ContactFormSection';
import ScrollReveal from './ScrollReveal';

interface DynamicPageRendererProps {
  sections: PageSection[];
  categories: Category[];
  categoriesLoading: boolean;
}

export default function DynamicPageRenderer({
  sections,
  categories,
  categoriesLoading
}: DynamicPageRendererProps) {
  return (
    <div className="flex flex-col w-full">
      {sections.map((section) => {
        if (!section.isActive) return null;

        switch (section.type.toUpperCase()) {
          // ไม่ animate — แสดงตั้งแต่ต้น
          case 'ANNOUNCEMENT_BAR':
            return <DynamicAnnouncementBar key={section.id} payload={section.payload} />;
          case 'HERO':
            return <DynamicHero key={section.id} payload={section.payload} />;
          case 'HERO_V2':
            return <DynamicHeroV2 key={section.id} payload={section.payload} />;
          case 'USP_BAR':
            return <DynamicUspBar key={section.id} payload={section.payload} />;

          // animate เมื่อ scroll เข้า viewport
          case 'NEWSLETTER':
            return <ScrollReveal key={section.id}><DynamicNewsletter payload={section.payload} /></ScrollReveal>;
          case 'CATEGORIES':
            return (
              <ScrollReveal key={section.id}>
                <DynamicCategories
                  payload={section.payload}
                  categories={categories}
                  loading={categoriesLoading}
                />
              </ScrollReveal>
            );
          case 'PRODUCTS':
            return (
              <ScrollReveal key={section.id}>
                <DynamicProducts
                  payload={section.payload}
                  categories={categories}
                />
              </ScrollReveal>
            );
          case 'BANNER':
            return <ScrollReveal key={section.id}><DynamicBanner payload={section.payload} /></ScrollReveal>;
          case 'TEXT':
            return <ScrollReveal key={section.id}><DynamicText payload={section.payload} /></ScrollReveal>;
          case 'RICH_TEXT':
            return <ScrollReveal key={section.id}><DynamicRichText section={section} /></ScrollReveal>;
          case 'EDITORIAL_TILE':
            return <ScrollReveal key={section.id}><DynamicEditorialTile payload={section.payload} /></ScrollReveal>;
          case 'EDITORIAL_CAROUSEL':
            return <ScrollReveal key={section.id}><DynamicEditorialCarousel payload={section.payload} /></ScrollReveal>;
          case 'HERO_ARTICLE':
            return <ScrollReveal key={section.id}><DynamicHeroArticle payload={section.payload} /></ScrollReveal>;
          case 'SCENT_NOTES_BREAKDOWN':
            return <ScrollReveal key={section.id}><DynamicScentNotesBreakdown payload={section.payload} /></ScrollReveal>;
          case 'QUOTE_CALLOUT':
            return <ScrollReveal key={section.id}><DynamicQuoteCallout payload={section.payload} /></ScrollReveal>;
          case 'PRODUCT_CAROUSEL':
            return <ScrollReveal key={section.id}><DynamicProductCarousel payload={section.payload} /></ScrollReveal>;
          case 'ACCORDION':
            return <ScrollReveal key={section.id}><AccordionSection payload={section.payload as AccordionSectionPayload & { title?: string }} /></ScrollReveal>;
          case 'CONTACT_INFO':
            return <ScrollReveal key={section.id}><ContactInfoSection payload={section.payload as ContactInfoSectionPayload & { title?: string }} /></ScrollReveal>;
          case 'CONTACT_FORM':
            return <ScrollReveal key={section.id}><ContactFormSection payload={section.payload as ContactFormSectionPayload} /></ScrollReveal>;
          default:
            console.warn(`[DynamicPageRenderer] Unknown block type: ${section.type}`);
            return null;
        }
      })}
    </div>
  );
}