'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import * as Tabs from '@radix-ui/react-tabs';
import { Blocks, Settings2, FileText, Search, Palette } from 'lucide-react';
import { BlockEditor } from './BlockEditor.js';
import { NodeSettings } from './NodeSettings.js';
import { PageSettingsEditor } from './PageSettings.js';
import { BuilderSEOPanel } from './SEOPanel.js';
import { DesignScorePanel } from './DesignScore.js';
const TABS = [
    { value: 'block', label: 'Block', icon: Blocks },
    { value: 'node', label: 'Node', icon: Settings2 },
    { value: 'page', label: 'Page', icon: FileText },
    { value: 'seo', label: 'SEO', icon: Search },
    { value: 'design', label: 'Design', icon: Palette },
];
export function ContextPanel({ activeTab, onTabChange, selectedNode, tree, pageSettings, onUpdateSettings, onUpdateBlock, onRemoveNode, onDuplicateNode, onMoveNodeUp, onMoveNodeDown, onPageSettingsChange, onAddRow, config, }) {
    const availableTabs = useMemo(() => {
        if (!selectedNode)
            return TABS.filter((t) => t.value !== 'block' && t.value !== 'node');
        if (selectedNode.type === 'block')
            return TABS.filter((t) => t.value !== 'node');
        return TABS.filter((t) => t.value !== 'block');
    }, [selectedNode]);
    const effectiveTab = useMemo(() => {
        if (availableTabs.some((t) => t.value === activeTab))
            return activeTab;
        if (selectedNode?.type === 'block')
            return 'block';
        if (selectedNode)
            return 'node';
        return 'page';
    }, [activeTab, availableTabs, selectedNode]);
    return (_jsx("div", { className: "bg-card h-full w-full overflow-y-auto", children: _jsxs(Tabs.Root, { value: effectiveTab, onValueChange: (value) => onTabChange(value), children: [_jsx(Tabs.List, { className: "border-border bg-muted/30 flex border-b", children: availableTabs.map((tab) => {
                        const Icon = tab.icon;
                        return (_jsxs(Tabs.Trigger, { value: tab.value, className: "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground data-[state=active]:border-primary data-[state=active]:bg-background flex flex-1 items-center justify-center gap-1.5 px-2 py-2.5 text-xs font-medium transition-colors data-[state=active]:border-b-2", children: [_jsx(Icon, { size: 14 }), _jsx("span", { children: tab.label })] }, tab.value));
                    }) }), _jsx(Tabs.Content, { value: "block", children: selectedNode?.type === 'block' && (_jsx(BlockEditor, { node: selectedNode, onUpdateBlock: onUpdateBlock, onUpdateSettings: onUpdateSettings, onRemoveNode: onRemoveNode, onDuplicateNode: onDuplicateNode, config: config })) }), _jsx(Tabs.Content, { value: "node", children: selectedNode &&
                        selectedNode.type !== 'block' &&
                        selectedNode.type !== 'page' &&
                        selectedNode.type !== 'savedSectionRef' && (_jsx(NodeSettings, { node: selectedNode, onUpdateSettings: onUpdateSettings, onRemoveNode: onRemoveNode, onDuplicateNode: onDuplicateNode, onMoveNodeUp: onMoveNodeUp, onMoveNodeDown: onMoveNodeDown, onAddRow: selectedNode.type === 'section' ? onAddRow : undefined })) }), _jsx(Tabs.Content, { value: "page", children: _jsx(PageSettingsEditor, { settings: pageSettings, onChange: onPageSettingsChange }) }), _jsx(Tabs.Content, { value: "seo", children: _jsx(BuilderSEOPanel, { tree: tree, pageSettings: pageSettings, onPageSettingsChange: onPageSettingsChange, selectedNodeId: selectedNode?.id ?? null }) }), _jsx(Tabs.Content, { value: "design", children: _jsx(DesignScorePanel, { tree: tree }) })] }) }));
}
//# sourceMappingURL=ContextPanel.js.map