'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Bookmark, Code, FileText, Grid, GripVertical, HelpCircle, Image, LayoutGrid, LayoutTemplate, MousePointer, PanelLeftClose, PanelLeftOpen, Play, Plus, Star, Type, } from 'lucide-react';
import { BlockCatalog } from '@actuate-media/cms-core/page-builder';
/** Same icon-name → component mapping the BlockPicker uses for the catalog. */
const BLOCK_ICONS = {
    Star,
    Type,
    Image,
    LayoutGrid,
    MousePointer,
    Play,
    Grid,
    HelpCircle,
    FileText,
    Code,
};
function collectBlockTypes(node, out) {
    if (node.type === 'block') {
        out.push(node.settings.blockType);
        return;
    }
    if (node.type === 'savedSectionRef')
        return;
    for (const child of node.children)
        collectBlockTypes(child, out);
}
function humanize(type) {
    return type.charAt(0).toUpperCase() + type.slice(1);
}
/**
 * Builder sections have no user-facing title, so each row derives its name
 * from the section's first block (via the catalog label) and summarizes its
 * contents as the kind label — enough for the editor to recognize and jump
 * between sections without inventing data we don't store.
 */
function buildEntries(tree, catalog) {
    return tree.children.map((node, index) => {
        if (node.type === 'savedSectionRef') {
            return {
                id: node.id,
                name: 'Saved section',
                meta: 'From the section library',
                icon: Bookmark,
                hidden: false,
            };
        }
        const blockTypes = [];
        collectBlockTypes(node, blockTypes);
        const firstType = blockTypes[0];
        const def = firstType ? catalog.get(firstType) : undefined;
        return {
            id: node.id,
            name: def?.label ?? (firstType ? humanize(firstType) : `Section ${index + 1}`),
            meta: blockTypes.length === 0
                ? 'Empty section'
                : `${blockTypes.length} block${blockTypes.length === 1 ? '' : 's'}`,
            icon: (def && BLOCK_ICONS[def.icon]) ?? LayoutTemplate,
            hidden: node.settings.visibility === 'hidden',
        };
    });
}
const ICON_BUTTON_CLASS = 'flex h-8 w-8 items-center justify-center rounded-[7px] text-[var(--sub)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none';
/**
 * Design-parity left rail for the Page Builder (PageBuilder.html): the page's
 * sections listed in order with drag-to-reorder, click-to-select (which
 * highlights the section on the canvas and opens its settings in the existing
 * right-hand context panel), and an "Add Section" affordance at the bottom.
 */
export function BuilderSectionsPanel({ tree, selectedNodeId, collapsed, onToggleCollapsed, onSelect, onReorder, onAddSection, }) {
    const catalog = useMemo(() => new BlockCatalog(), []);
    const entries = useMemo(() => buildEntries(tree, catalog), [tree, catalog]);
    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
    function handleDragEnd(event) {
        const { active, over } = event;
        if (!over || active.id === over.id)
            return;
        const ids = entries.map((e) => e.id);
        const to = ids.indexOf(String(over.id));
        if (to === -1 || !ids.includes(String(active.id)))
            return;
        onReorder(String(active.id), to);
    }
    if (collapsed) {
        return (_jsx("nav", { "aria-label": "Page sections", className: "flex w-11 shrink-0 flex-col items-center border-r border-[var(--bdr)] bg-[var(--sb)] py-2", children: _jsx("button", { type: "button", onClick: onToggleCollapsed, "aria-expanded": false, "aria-label": "Expand sections panel", className: ICON_BUTTON_CLASS, children: _jsx(PanelLeftOpen, { size: 16, "aria-hidden": true }) }) }));
    }
    return (_jsxs("nav", { "aria-label": "Page sections", className: "flex w-[280px] shrink-0 flex-col overflow-hidden border-r border-[var(--bdr)] bg-[var(--sb)]", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--bdr)] py-2 pr-2 pl-3.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-[13px] font-medium text-[var(--txt)]", children: "Sections" }), _jsx("span", { className: "rounded-[4px] bg-[var(--acc-l)] px-[7px] py-0.5 text-[11px] font-medium text-[var(--acc)] tabular-nums", children: entries.length })] }), _jsx("button", { type: "button", onClick: onToggleCollapsed, "aria-expanded": true, "aria-label": "Collapse sections panel", className: ICON_BUTTON_CLASS, children: _jsx(PanelLeftClose, { size: 16, "aria-hidden": true }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto", children: entries.length === 0 ? (_jsx("p", { className: "px-4 py-6 text-center text-[12.5px] text-[var(--muted)]", children: "No sections yet. Add one below to start building." })) : (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: entries.map((e) => e.id), strategy: verticalListSortingStrategy, children: _jsx("ul", { "aria-label": "Sections in page order", children: entries.map((entry) => (_jsx(SortableSectionRow, { entry: entry, selected: entry.id === selectedNodeId, onSelect: onSelect }, entry.id))) }) }) })) }), _jsx("div", { className: "border-t border-[var(--bdr)]", children: _jsxs("button", { type: "button", onClick: onAddSection, className: "flex w-full items-center gap-2 px-3.5 py-3 text-[13px] font-medium text-[var(--acc)] transition-colors duration-[var(--motion-fast)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none focus-visible:ring-inset", children: [_jsx(Plus, { size: 14, "aria-hidden": true }), "Add Section"] }) })] }));
}
function SortableSectionRow({ entry, selected, onSelect }) {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
        id: entry.id,
    });
    const Icon = entry.icon;
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        zIndex: isDragging ? 10 : undefined,
    };
    return (_jsx("li", { ref: setNodeRef, style: style, className: isDragging ? 'shadow-[var(--shd2)]' : undefined, children: _jsxs("div", { className: `flex items-center gap-1.5 border-b border-[var(--bdr)] py-2 pr-2.5 pl-1.5 transition-colors duration-[var(--motion-fast)] ${selected ? 'bg-[var(--acc-l)]' : 'hover:bg-[var(--acc-l)]'}`, children: [_jsx("button", { type: "button", "aria-label": `Drag to reorder ${entry.name}`, ...attributes, ...listeners, className: "shrink-0 cursor-grab touch-none rounded p-1 text-[var(--muted)] transition-colors duration-[var(--motion-fast)] hover:text-[var(--acc)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none active:cursor-grabbing", children: _jsx(GripVertical, { size: 15, "aria-hidden": true }) }), _jsxs("button", { type: "button", onClick: () => onSelect(entry.id), "aria-current": selected ? 'true' : undefined, className: "flex min-w-0 flex-1 items-center gap-2.5 rounded text-left focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none", children: [_jsx("span", { "aria-hidden": true, className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-[7px] bg-[var(--acc-l)] text-[var(--acc)]", children: _jsx(Icon, { size: 14 }) }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: `truncate text-[13px] font-medium ${entry.hidden ? 'text-[var(--muted)] line-through' : 'text-[var(--txt)]'}`, children: entry.name }), _jsx("span", { className: "truncate text-[11px] text-[var(--muted)]", children: entry.meta })] })] })] }) }));
}
//# sourceMappingURL=BuilderSectionsPanel.js.map