'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { Star, Type, Image, LayoutGrid, MousePointer, Play, Grid, HelpCircle, FileText, Code, Box, X, ArrowLeft, Search, Check, } from 'lucide-react';
import { BlockCatalog } from '@actuate-media/cms-core/page-builder';
const iconMap = {
    Star,
    Type,
    Image,
    LayoutGrid,
    MousePointer,
    Play,
    Grid,
    HelpCircle,
    FileText,
    Code,
};
function resolveIcon(name) {
    return iconMap[name] ?? Box;
}
export function BlockPicker({ open, onClose, onSelect }) {
    const [search, setSearch] = useState('');
    const [selectedBlock, setSelectedBlock] = useState(null);
    const searchInputRef = useRef(null);
    const variantListRef = useRef(null);
    const catalog = useMemo(() => new BlockCatalog(), []);
    const allBlocks = useMemo(() => catalog.getAll(), [catalog]);
    const filteredBlocks = useMemo(() => {
        if (!search.trim())
            return allBlocks;
        const q = search.toLowerCase();
        return allBlocks.filter((block) => block.label.toLowerCase().includes(q) ||
            (block.description?.toLowerCase().includes(q) ?? false));
    }, [allBlocks, search]);
    const resetState = useCallback(() => {
        setSearch('');
        setSelectedBlock(null);
    }, []);
    useEffect(() => {
        if (open) {
            resetState();
        }
    }, [open, resetState]);
    useEffect(() => {
        if (open && !selectedBlock) {
            const timer = setTimeout(() => searchInputRef.current?.focus(), 50);
            return () => clearTimeout(timer);
        }
    }, [open, selectedBlock]);
    useEffect(() => {
        if (selectedBlock && variantListRef.current) {
            const firstButton = variantListRef.current.querySelector('button[data-variant]');
            firstButton?.focus();
        }
    }, [selectedBlock]);
    function handleBlockClick(block) {
        if (block.variants.length === 1) {
            onSelect(block.type, block.variants[0].name);
            onClose();
            return;
        }
        setSelectedBlock(block);
    }
    function handleVariantClick(variant) {
        if (!selectedBlock)
            return;
        onSelect(selectedBlock.type, variant.name);
        onClose();
    }
    function handleBack() {
        setSelectedBlock(null);
    }
    function handleKeyDownOnGrid(e) {
        if (e.key === 'Escape') {
            e.stopPropagation();
            onClose();
        }
    }
    function handleKeyDownOnVariants(e) {
        if (e.key === 'Escape') {
            e.stopPropagation();
            handleBack();
        }
    }
    return (_jsx(Dialog.Root, { open: open, onOpenChange: (isOpen) => !isOpen && onClose(), children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "motion-safe:animate-in motion-safe:fade-in-0 fixed inset-0 z-50 bg-black/50" }), _jsx(Dialog.Content, { className: "bg-card border-border fixed top-1/2 left-1/2 z-50 flex max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border shadow-2xl", "aria-describedby": undefined, onEscapeKeyDown: () => {
                        if (selectedBlock) {
                            handleBack();
                        }
                    }, children: selectedBlock ? (_jsx(VariantView, { block: selectedBlock, variantListRef: variantListRef, onBack: handleBack, onVariantClick: handleVariantClick, onKeyDown: handleKeyDownOnVariants })) : (_jsx(BlockTypeGrid, { search: search, filteredBlocks: filteredBlocks, searchInputRef: searchInputRef, onSearchChange: setSearch, onBlockClick: handleBlockClick, onClose: onClose, onKeyDown: handleKeyDownOnGrid })) })] }) }));
}
function BlockTypeGrid({ search, filteredBlocks, searchInputRef, onSearchChange, onBlockClick, onClose, onKeyDown, }) {
    return (_jsxs("div", { className: "flex h-full flex-col", onKeyDown: onKeyDown, children: [_jsxs("div", { className: "flex items-center justify-between gap-3 px-5 pt-5 pb-3", children: [_jsx(Dialog.Title, { className: "text-foreground text-lg font-medium", children: "Add Block" }), _jsx(Dialog.Close, { asChild: true, children: _jsx("button", { type: "button", className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors", "aria-label": "Close", children: _jsx(X, { size: 18 }) }) })] }), _jsx("div", { className: "px-5 pb-3", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2", size: 16 }), _jsx("input", { ref: searchInputRef, type: "text", placeholder: "Search blocks...", value: search, onChange: (e) => onSearchChange(e.target.value), className: "bg-background border-input focus:ring-ring w-full rounded-md border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none", "aria-label": "Search block types" })] }) }), _jsx("div", { className: "flex-1 overflow-y-auto px-5 pb-5", children: filteredBlocks.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Search, { size: 24, className: "text-muted-foreground mb-2" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: ["No blocks match \u201C", search, "\u201D"] })] })) : (_jsx("div", { className: "grid grid-cols-2 gap-3", role: "list", "aria-label": "Available block types", children: filteredBlocks.map((block) => {
                        const Icon = resolveIcon(block.icon);
                        return (_jsxs("button", { type: "button", role: "listitem", onClick: () => onBlockClick(block), className: "border-border hover:border-primary bg-card group focus:ring-ring flex cursor-pointer items-start gap-3 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none", children: [_jsx("div", { className: "bg-accent text-foreground group-hover:bg-primary/10 group-hover:text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-md transition-colors", children: _jsx(Icon, { size: 18 }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-foreground truncate text-sm font-medium", children: block.label }), block.description && (_jsx("p", { className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs", children: block.description }))] })] }, block.type));
                    }) })) })] }));
}
function VariantView({ block, variantListRef, onBack, onVariantClick, onKeyDown, }) {
    const Icon = resolveIcon(block.icon);
    return (_jsxs("div", { className: "flex h-full flex-col", onKeyDown: onKeyDown, children: [_jsxs("div", { className: "flex items-center gap-3 px-5 pt-5 pb-3", children: [_jsx("button", { type: "button", onClick: onBack, className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors", "aria-label": "Back to block types", children: _jsx(ArrowLeft, { size: 18 }) }), _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Icon, { size: 18, className: "text-foreground shrink-0" }), _jsx("h2", { className: "text-foreground truncate text-lg font-medium", children: block.label })] })] }), block.description && (_jsx("p", { className: "text-muted-foreground px-5 pb-3 text-sm", children: block.description })), _jsx("div", { className: "flex-1 overflow-y-auto px-5 pb-5", ref: variantListRef, children: _jsx("div", { className: "space-y-2", role: "list", "aria-label": `${block.label} variants`, children: block.variants.map((variant, index) => (_jsx("button", { type: "button", role: "listitem", "data-variant": variant.name, onClick: () => onVariantClick(variant), className: "border-border hover:border-primary bg-card group focus:ring-ring flex w-full cursor-pointer items-center gap-3 rounded-lg border p-4 text-left transition-colors focus:ring-2 focus:outline-none", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-foreground text-sm font-medium", children: variant.label }), index === 0 && (_jsxs("span", { className: "text-primary bg-primary/10 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs", children: [_jsx(Check, { size: 10 }), "Default"] }))] }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: variant.description })] }) }, variant.name))) }) })] }));
}
//# sourceMappingURL=BlockPicker.js.map