'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Copy, Eye, EyeOff, GripVertical, Lock, MoreVertical, Plus, Trash2, } from 'lucide-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 * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { adminPortalContainer } from '../../lib/portal-container.js';
import { sectionIconFor } from './section-icons.js';
export function SectionsPanel({ sections, selectedId, canEdit, onSelect, onReorder, onToggleVisibility, onDuplicate, onRequestDelete, onAdd, }) {
    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 = sections.map((s) => s.id);
        const from = ids.indexOf(String(active.id));
        const to = ids.indexOf(String(over.id));
        if (from === -1 || to === -1)
            return;
        const next = ids.slice();
        const [moved] = next.splice(from, 1);
        next.splice(to, 0, moved);
        onReorder(next);
    }
    return (_jsxs("aside", { className: "bg-card border-border flex h-full w-72 shrink-0 flex-col border-r", "aria-label": "Page sections", children: [_jsx("div", { className: "border-border flex items-center justify-between border-b px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "text-foreground text-sm font-medium", children: "Sections" }), _jsx("span", { className: "bg-muted text-muted-foreground rounded-full px-2 py-0.5 text-xs font-medium tabular-nums", children: sections.length })] }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-2", children: sections.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-2 py-6 text-center text-sm", children: "No sections yet. Add one below to get started." })) : (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: sections.map((s) => s.id), strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "space-y-1", children: sections.map((section) => (_jsx(SortableSectionItem, { section: section, selected: section.id === selectedId, canEdit: canEdit, onSelect: onSelect, onToggleVisibility: onToggleVisibility, onDuplicate: onDuplicate, onRequestDelete: onRequestDelete }, section.id))) }) }) })) }), _jsx("div", { className: "border-border border-t p-3", children: _jsxs("button", { type: "button", onClick: onAdd, disabled: !canEdit, className: "border-border text-foreground hover:bg-accent flex w-full items-center justify-center gap-2 rounded-lg border border-dashed px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50", children: [_jsx(Plus, { className: "h-4 w-4", "aria-hidden": true }), "Add Section"] }) })] }));
}
function SortableSectionItem({ section, selected, canEdit, onSelect, onToggleVisibility, onDuplicate, onRequestDelete, }) {
    // Unmanaged (externally-managed) sections are read-only: no drag, duplicate,
    // delete, or visibility toggle — only selectable to view the read-only notice.
    const locked = section.unmanaged === true;
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
        id: section.id,
        disabled: !canEdit || locked,
    });
    const Icon = sectionIconFor(section.sectionType);
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
        zIndex: isDragging ? 10 : undefined,
    };
    return (_jsx("li", { ref: setNodeRef, style: style, children: _jsxs("div", { className: `group flex items-center gap-2 rounded-lg border px-2 py-2 ${selected ? 'border-primary bg-accent' : 'hover:bg-accent/60 border-transparent'} ${isDragging ? 'shadow-md' : ''}`, children: [_jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground shrink-0 cursor-grab touch-none disabled:cursor-not-allowed disabled:opacity-40", "aria-label": `Drag to reorder ${section.name}`, disabled: !canEdit || locked, ...attributes, ...listeners, children: _jsx(GripVertical, { className: "h-4 w-4", "aria-hidden": true }) }), _jsxs("button", { type: "button", onClick: () => onSelect(section.id), className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [_jsx("span", { className: "bg-muted text-muted-foreground flex h-7 w-7 shrink-0 items-center justify-center rounded-md", children: _jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }) }), _jsx("span", { className: `truncate text-sm ${section.visible ? 'text-foreground' : 'text-muted-foreground line-through'}`, children: section.name })] }), locked ? (_jsx("span", { className: "text-muted-foreground shrink-0 p-1", title: "Managed outside the editor \u2014 read-only", "aria-label": `${section.name} is managed outside the editor and is read-only`, children: _jsx(Lock, { className: "h-4 w-4", "aria-hidden": true }) })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => onToggleVisibility(section.id), disabled: !canEdit, "aria-pressed": !section.visible, "aria-label": section.visible ? `Hide ${section.name}` : `Show ${section.name}`, className: "text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40", children: section.visible ? (_jsx(Eye, { className: "h-4 w-4", "aria-hidden": true })) : (_jsx(EyeOff, { className: "h-4 w-4", "aria-hidden": true })) }), _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { type: "button", disabled: !canEdit, "aria-label": `More actions for ${section.name}`, className: "text-muted-foreground hover:text-foreground shrink-0 rounded p-1 disabled:opacity-40", children: _jsx(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }), _jsx(DropdownMenu.Portal, { container: adminPortalContainer(), children: _jsxs(DropdownMenu.Content, { align: "end", sideOffset: 4, className: "border-border bg-popover z-[70] min-w-44 rounded-lg border p-1 shadow-md", children: [_jsx(MenuItem, { onSelect: () => onDuplicate(section.id), icon: Copy, children: "Duplicate" }), _jsx(DropdownMenu.Separator, { className: "bg-border my-1 h-px" }), _jsx(MenuItem, { onSelect: () => onRequestDelete(section.id), icon: Trash2, destructive: true, children: "Delete" })] }) })] })] }))] }) }));
}
function MenuItem({ children, icon: Icon, onSelect, destructive, }) {
    return (_jsxs(DropdownMenu.Item, { onSelect: onSelect, className: `flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none ${destructive ? 'text-destructive focus:bg-destructive/10' : 'text-foreground focus:bg-accent'}`, children: [_jsx(Icon, { className: "h-4 w-4", "aria-hidden": true }), children] }));
}
//# sourceMappingURL=SectionsPanel.js.map