'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import { LayoutTemplate, Plus } from 'lucide-react';
import { SectionRenderer } from './sections/index.js';
import { getViewport } from './viewports.js';
/**
 * The preview canvas. Renders the page at the selected viewport's logical
 * width and scales it down with a CSS transform so wide viewports (1440px,
 * 1920px) fit inside the available canvas column. Scale is recomputed from
 * a ResizeObserver so it stays correct as panels open/close.
 */
export function EditorCanvas({ sections, selectedId, viewport, onSelect, onAddSection, }) {
    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);
    }, []);
    // Recompute scale + scaled height from the container width.
    useLayoutEffect(() => {
        const container = containerRef.current;
        if (!container)
            return;
        const recompute = () => {
            // 48px breathing room so the surface never kisses the column edges.
            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]);
    // Scroll the selected section into view within the canvas.
    useEffect(() => {
        if (!selectedId)
            return;
        const el = sectionRefs.current.get(selectedId);
        if (el)
            el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }, [selectedId]);
    return (_jsx("div", { ref: containerRef, className: "bg-muted h-full overflow-auto p-6", children: sections.length === 0 ? (_jsx(EmptyCanvas, { onAddSection: onAddSection })) : (_jsx("div", { className: "mx-auto", style: { width: vp.width * scale, height: surfaceHeight ?? undefined }, children: _jsx("div", { ref: surfaceRef, className: "border-border origin-top overflow-hidden rounded-xl border bg-white shadow-sm", style: {
                    width: vp.width,
                    transform: `scale(${scale})`,
                    transformOrigin: 'top left',
                }, children: sections.map((section) => (_jsx(SectionRenderer, { section: section, editable: true, selected: section.id === selectedId, onSelect: onSelect, registerRef: registerRef }, section.id))) }) })) }));
}
function EmptyCanvas({ onAddSection }) {
    return (_jsxs("div", { className: "mx-auto flex h-full max-w-md flex-col items-center justify-center text-center", children: [_jsx("div", { className: "bg-card border-border mb-4 flex h-14 w-14 items-center justify-center rounded-full border", children: _jsx(LayoutTemplate, { className: "text-muted-foreground h-6 w-6", "aria-hidden": true }) }), _jsx("h2", { className: "text-foreground text-lg font-medium", children: "This page has no sections yet" }), _jsx("p", { className: "text-muted-foreground mt-1 mb-5 text-sm", children: "Add your first section to start building the page. You can reorder, hide, and edit sections at any time." }), _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=EditorCanvas.js.map