import type { PageContent, SectionBlock } from "@/types/sections";
import { useLocale } from "@/i18n/LocaleContext";
import { useEffect } from "react";
import { HeroCarousel } from "./sections/HeroCarousel";
import { TextIntro } from "./sections/TextIntro";
import { TextImage } from "./sections/TextImage";
import { ServicesList } from "./sections/ServicesList";
import { PhotoGallery } from "./sections/PhotoGallery";
import { EventsList } from "./sections/EventsList";
import { BusinessesList } from "./sections/BusinessesList";
import { ContactForm } from "./sections/ContactForm";
import { CtaSection } from "./sections/CtaSection";
import { Wysiwyg } from "./sections/Wysiwyg";
import { CouncilGrid } from "./sections/CouncilGrid";
import { DocumentsList } from "./sections/DocumentsList";
import { PdfEmbed } from "./sections/PdfEmbed";

function renderBlock(block: SectionBlock, idx: number) {
  switch (block.type) {
    case "hero-carousel":   return <HeroCarousel  key={idx} block={block} />;
    case "text-intro":      return <TextIntro     key={idx} block={block} />;
    case "text-image":      return <TextImage     key={idx} block={block} />;
    case "services-list":   return <ServicesList  key={idx} block={block} />;
    case "photo-gallery":   return <PhotoGallery  key={idx} block={block} />;
    case "events-list":     return <EventsList    key={idx} block={block} />;
    case "businesses-list": return <BusinessesList key={idx} block={block} />;
    case "contact-form":    return <ContactForm   key={idx} block={block} />;
    case "cta-section":     return <CtaSection    key={idx} block={block} />;
    case "wysiwyg":         return <Wysiwyg       key={idx} block={block} />;
    case "council-grid":    return <CouncilGrid   key={idx} block={block} />;
    case "documents-list":  return <DocumentsList key={idx} block={block} />;
    case "pdf-embed":       return <PdfEmbed      key={idx} block={block} />;
    default: {
      // Exhaustiveness check
      const _exhaustive: never = block;
      return _exhaustive;
    }
  }
}

declare global {
  interface Window {
    __CASCA_PAGE__?: Partial<PageContent>;
  }
}

export function PageRenderer({ page }: { page: PageContent }) {
  const { t, locale } = useLocale();
  const wpPage = window.__CASCA_PAGE__;
  const renderedPage = wpPage?.sections?.length ? ({ ...page, ...wpPage } as PageContent) : page;

  // Per-page SEO (title + description). React 19 will hoist these to <head>.
  useEffect(() => {
    document.title = t(renderedPage.seo.title);
    const setMeta = (name: string, content: string) => {
      let el = document.querySelector(`meta[name="${name}"]`) as HTMLMetaElement | null;
      if (!el) {
        el = document.createElement("meta");
        el.setAttribute("name", name);
        document.head.appendChild(el);
      }
      el.setAttribute("content", content);
    };
    setMeta("description", t(renderedPage.seo.description));
  }, [renderedPage, locale, t]);

  return (
    <>
      {renderedPage.pageHeader && (
        <section className="bg-bar text-bar-foreground">
          <div className="container py-14 md:py-20">
            {renderedPage.pageHeader.eyebrow && (
              <p className="text-xs sm:text-sm uppercase tracking-[0.25em] text-bar-foreground/70 mb-3">
                {t(renderedPage.pageHeader.eyebrow)}
              </p>
            )}
            <h1 className="font-display italic text-4xl sm:text-5xl md:text-6xl text-balance">
              {t(renderedPage.pageHeader.title)}
            </h1>
          </div>
        </section>
      )}
      {renderedPage.sections.map((block, idx) => renderBlock(block, idx))}
    </>
  );
}