'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Puzzle } from 'lucide-react';
import { ErrorBoundary } from '../../../components/ErrorBoundary.js';
import { getSectionType } from '../section-types.js';
import { ADMIN_RENDER_OPTIONS, useAdminSectionRenderers } from './admin-renderers.js';
import { backgroundClass, paddingClass } 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';
import { EmbedSection } from './EmbedSection.js';
import { WidgetEmbedSection } from './WidgetEmbedSection.js';
/**
 * Section types with a real canvas body component below. Anything else —
 * config-declared custom types (`opal-*`), unmanaged sections, and the
 * `form` embed — renders as a structural placeholder, so the editors use
 * this set to tell authors the canvas shows structure, not design.
 */
const CANVAS_RENDERED_TYPES = new Set([
    'hero',
    'text',
    'feature',
    'stats',
    'cta',
    'article-body',
    'quote',
    'author-bio',
    'related-posts',
    'gallery',
    'embed',
    'widget-embed',
]);
/** True when the canvas renders this type for real (not as a placeholder). */
export function hasCanvasRenderer(sectionType) {
    return CANVAS_RENDERED_TYPES.has(sectionType);
}
/** Dispatch a section's body component by type. Shared by editor + preview. */
function SectionBody({ section, context }) {
    const customRenderers = useAdminSectionRenderers();
    switch (section.sectionType) {
        case 'hero':
            return _jsx(HeroBannerSection, { section: section });
        case 'text':
            return _jsx(MissionSection, { section: section });
        case 'feature':
            return _jsx(FeatureHighlightSection, { section: section });
        case 'stats':
            return _jsx(ByTheNumbersSection, { section: section });
        case 'cta':
            return _jsx(CtaBannerSection, { section: section });
        case 'article-body':
            return _jsx(ArticleBodySection, { section: section, context: context });
        case 'quote':
            return _jsx(PullQuoteSection, { section: section });
        case 'author-bio':
            return _jsx(AuthorBioSection, { section: section, context: context });
        case 'related-posts':
            return _jsx(RelatedPostsSection, { section: section, context: context });
        case 'gallery':
            return _jsx(GallerySection, { section: section });
        case 'embed':
            return _jsx(EmbedSection, { section: section });
        case 'widget-embed':
            return _jsx(WidgetEmbedSection, { section: section });
        default: {
            // Custom (config-declared) and unmanaged types: use a consumer-supplied
            // canvas renderer when one is registered (see admin-renderers.tsx).
            // Consumer code can throw, so a per-section error boundary falls back
            // to the structural placeholder instead of taking down the editor.
            const Custom = customRenderers[section.sectionType];
            if (Custom) {
                // The renderer contract types `settings` as an open record (matching
                // the sections-react wire shape); the admin's concrete
                // `SectionSettings` interface is the same object at runtime but has
                // no index signature, so bridge the nominal gap here.
                const wireSection = {
                    ...section,
                    settings: { ...section.settings },
                };
                // Rendered as a component (not invoked inline) so a throw happens
                // inside the boundary's subtree and is actually caught.
                return (_jsx(ErrorBoundary, { fallback: _jsx(PlaceholderSection, { section: section }), children: _jsx(Custom, { section: wireSection, ctx: context, options: ADMIN_RENDER_OPTIONS }) }, section.id));
            }
            // No renderer registered: a neutral placeholder keeps the canvas
            // reflecting the section's presence + order instead of a blank gap.
            return _jsx(PlaceholderSection, { section: section });
        }
    }
}
/** Fallback canvas card for section types without a built-in renderer. */
function PlaceholderSection({ section }) {
    const def = getSectionType(section.sectionType);
    const label = def?.name ?? section.name;
    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 px-6 py-12 text-center", children: [_jsx("span", { className: "bg-muted text-muted-foreground flex h-10 w-10 items-center justify-center rounded-lg", children: _jsx(Puzzle, { className: "h-5 w-5", "aria-hidden": true }) }), _jsx("p", { className: "text-foreground text-sm font-medium", children: label }), _jsx("p", { className: "text-muted-foreground text-xs", children: section.unmanaged
                    ? `Managed outside the editor (${section.sectionType}) — preview not available here.`
                    : `Custom section "${section.sectionType}" — rendered by your site's renderer.` })] }));
}
/**
 * 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, }) {
    const settings = section.settings ?? {};
    const hidden = editable && !section.visible;
    return (_jsxs("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, "aria-label": editable ? `${section.name} section` : undefined, children: [editable && selected && (_jsx("span", { className: "bg-brand pointer-events-none absolute top-0 left-0 z-10 rounded-br-md px-2 py-0.5 text-xs font-medium text-white", children: section.name })), editable && hidden && (_jsx("span", { className: "bg-foreground pointer-events-none absolute top-0 right-0 z-10 rounded-bl-md px-2 py-0.5 text-xs font-medium text-white", children: "Hidden" })), _jsx(SectionBody, { section: section, context: context })] }));
}
//# sourceMappingURL=SectionRenderer.js.map