'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { FileText, Plus } from 'lucide-react';
import { SectionRenderer } from '../page-editor/sections/index.js';
import { StructureNotice } from '../page-editor/StructureNotice.js';
import { getViewport } from '../page-editor/viewports.js';
import { PostHeader } from './PostHeader.js';
/**
 * Post preview canvas. Mirrors the Page editor canvas (scaled surface that
 * fits the selected viewport) but renders the post header above the section
 * list so the editor shows the full post layout — header regions plus body
 * sections — exactly as it will ship.
 */
export function PostEditorCanvas({ sections, header, context, selectedId, viewport, onSelect, onAddSection, structuralTypes = [], }) {
    const vp = getViewport(viewport);
    const containerRef = useRef(null);
    const surfaceRef = useRef(null);
    const sectionRefs = useRef(new Map());
    const [scale, setScale] = useState(1);
    const [surfaceHeight, setSurfaceHeight] = useState(null);
    const registerRef = useCallback((id, el) => {
        if (el)
            sectionRefs.current.set(id, el);
        else
            sectionRefs.current.delete(id);
    }, []);
    useLayoutEffect(() => {
        const container = containerRef.current;
        if (!container)
            return;
        const recompute = () => {
            const available = container.clientWidth - 48;
            const next = Math.min(1, available / vp.width);
            setScale(next > 0 ? next : 1);
            if (surfaceRef.current) {
                setSurfaceHeight(surfaceRef.current.offsetHeight * (next > 0 ? next : 1));
            }
        };
        recompute();
        const ro = new ResizeObserver(recompute);
        ro.observe(container);
        if (surfaceRef.current)
            ro.observe(surfaceRef.current);
        return () => ro.disconnect();
    }, [vp.width, sections, header, context]);
    useEffect(() => {
        if (!selectedId)
            return;
        const el = sectionRefs.current.get(selectedId);
        if (el)
            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }, [selectedId]);
    return (_jsxs("div", { ref: containerRef, className: "bg-muted h-full overflow-auto p-6", children: [_jsx(StructureNotice, { structuralTypes: structuralTypes }), _jsx("div", { className: "mx-auto", style: { width: vp.width * scale, height: surfaceHeight ?? undefined }, children: _jsxs("div", { ref: surfaceRef, className: "border-border bg-card origin-top overflow-hidden rounded-xl border shadow-sm", style: { width: vp.width, transform: `scale(${scale})`, transformOrigin: 'top left' }, children: [_jsx(PostHeader, { config: header, context: context }), sections.length === 0 ? (_jsx(EmptyBody, { onAddSection: onAddSection })) : (sections.map((section) => (_jsx(SectionRenderer, { section: section, context: context, editable: true, selected: section.id === selectedId, onSelect: onSelect, registerRef: registerRef }, section.id))))] }) })] }));
}
function EmptyBody({ onAddSection }) {
    // This block sits inside the fixed-white preview surface, so the neutral
    // greys intentionally match the website-preview palette used by PostHeader
    // and the section renderers (not the admin theme tokens, which flip in dark
    // mode and would lose contrast on the always-white surface). The CTA is the
    // one true admin affordance here, so it uses the brand `primary` token,
    // which carries a guaranteed-contrast foreground in both modes.
    return (_jsxs("div", { className: "flex flex-col items-center justify-center gap-3 border-t border-zinc-100 px-6 py-16 text-center", children: [_jsx("span", { className: "bg-muted flex h-12 w-12 items-center justify-center rounded-full", children: _jsx(FileText, { className: "text-muted-foreground h-5 w-5", "aria-hidden": true }) }), _jsx("p", { className: "text-muted-foreground text-sm", children: "The header is set by the template. Add body sections to build out this post." }), _jsxs("button", { type: "button", onClick: onAddSection, className: "bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-colors", children: [_jsx(Plus, { className: "h-4 w-4", "aria-hidden": true }), "Add Section"] })] }));
}
//# sourceMappingURL=PostEditorCanvas.js.map