'use client'

import type { PageSection } from '../../../lib/page-editor-service.js'
import { backgroundClass, paddingClass, type PostRenderContext } from './parts.js'
import { HeroBannerSection } from './HeroBannerSection.js'
import { MissionSection } from './MissionSection.js'
import { FeatureHighlightSection } from './FeatureHighlightSection.js'
import { ByTheNumbersSection } from './ByTheNumbersSection.js'
import { CtaBannerSection } from './CtaBannerSection.js'
import { ArticleBodySection } from './ArticleBodySection.js'
import { PullQuoteSection } from './PullQuoteSection.js'
import { AuthorBioSection } from './AuthorBioSection.js'
import { RelatedPostsSection } from './RelatedPostsSection.js'
import { GallerySection } from './GallerySection.js'

/** Dispatch a section's body component by type. Shared by editor + preview. */
function SectionBody({ section, context }: { section: PageSection; context?: PostRenderContext }) {
  switch (section.sectionType) {
    case 'hero':
      return <HeroBannerSection section={section} />
    case 'text':
      return <MissionSection section={section} />
    case 'feature':
      return <FeatureHighlightSection section={section} />
    case 'stats':
      return <ByTheNumbersSection section={section} />
    case 'cta':
      return <CtaBannerSection section={section} />
    case 'article-body':
      return <ArticleBodySection section={section} context={context} />
    case 'quote':
      return <PullQuoteSection section={section} />
    case 'author-bio':
      return <AuthorBioSection section={section} context={context} />
    case 'related-posts':
      return <RelatedPostsSection section={section} context={context} />
    case 'gallery':
      return <GallerySection section={section} />
    default:
      return null
  }
}

export interface SectionRendererProps {
  section: PageSection
  /** Editor mode: adds click-to-select, the selection outline + label, and
   *  renders hidden sections muted instead of removing them. */
  editable?: boolean
  selected?: boolean
  onSelect?: (id: string) => void
  /** Lets the canvas register the DOM node for scroll-to-section. */
  registerRef?: (id: string, el: HTMLElement | null) => void
  /** Live post data for post-oriented section renderers (pages omit this). */
  context?: PostRenderContext
}

/**
 * Renders one section with its background + padding, dispatching to the
 * shared body component. In `editable` mode it layers editor-only chrome
 * (outline + a small purple type label) on top of the same markup the
 * public preview uses — so what you edit is what ships.
 */
export function SectionRenderer({
  section,
  editable = false,
  selected = false,
  onSelect,
  registerRef,
  context,
}: SectionRendererProps) {
  const settings = section.settings ?? {}
  const hidden = editable && !section.visible

  return (
    <section
      ref={(el) => registerRef?.(section.id, el)}
      data-section-id={section.id}
      id={settings.anchorId || undefined}
      className={`relative ${backgroundClass(settings)} ${paddingClass(settings)} ${
        settings.cssClass ?? ''
      } ${hidden ? 'opacity-40' : ''} ${
        editable ? 'cursor-pointer outline-2 -outline-offset-2 transition-[outline]' : ''
      } ${selected ? 'outline outline-violet-500' : 'outline-transparent'}`}
      onClick={editable ? () => onSelect?.(section.id) : undefined}
      // Selection is a convenience in the editor; the section list is the
      // primary, fully-accessible control surface, so this stays a region.
      aria-label={editable ? `${section.name} section` : undefined}
    >
      {editable && selected && (
        <span className="pointer-events-none absolute top-0 left-0 z-10 rounded-br-md bg-violet-600 px-2 py-0.5 text-xs font-medium text-white">
          {section.name}
        </span>
      )}
      {editable && hidden && (
        <span className="pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md bg-zinc-700 px-2 py-0.5 text-xs font-medium text-white">
          Hidden
        </span>
      )}
      <SectionBody section={section} context={context} />
    </section>
  )
}
