'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
import Editor from '@monaco-editor/react';
import { File, Folder, FolderOpen, X, FloppyDisk, CaretRight, CaretDown, Spinner, Plus, Minus, Eye, Code, Trash, ArrowsOut, ArrowClockwise } from '@phosphor-icons/react';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { useModeContext, useWorkspace, useNotes, useEditorState, getMonacoLanguage, getFileType, supportsPreview } from '@/lib/api-docs/code-editor';
// VSCode-style file icon with color coding
function FileIcon({ path, className }) {
    const type = getFileType(path);
    const colorMap = {
        'javascript': 'text-yellow-400',
        'typescript': 'text-blue-400',
        'python': 'text-green-500',
        'go': 'text-cyan-400',
        'ruby': 'text-red-400',
        'php': 'text-purple-400',
        'shell': 'text-green-400',
        'markdown': 'text-blue-300',
        'mermaid': 'text-pink-400',
        'json': 'text-yellow-500',
        'yaml': 'text-red-300',
        'text': 'text-zinc-400'
    };
    return /*#__PURE__*/ _jsx(File, {
        className: cn('h-4 w-4 flex-shrink-0', colorMap[type] || 'text-zinc-400', className),
        weight: "fill"
    });
}
function buildFileTree(files) {
    const root = [];
    // Filter out .folder placeholder files - they're only used internally to create folder structure
    const visibleFiles = files.filter((f)=>!f.path.endsWith('.folder') && !f.path.includes('/.folder'));
    const sortedFiles = [
        ...visibleFiles
    ].sort((a, b)=>a.path.localeCompare(b.path));
    for (const file of sortedFiles){
        const parts = file.path.split('/');
        let current = root;
        for(let i = 0; i < parts.length; i++){
            const part = parts[i];
            const isLastPart = i === parts.length - 1;
            const currentPath = parts.slice(0, i + 1).join('/');
            let existing = current.find((n)=>n.name === part);
            if (!existing) {
                existing = {
                    name: part,
                    path: currentPath,
                    isFolder: !isLastPart,
                    children: isLastPart ? undefined : [],
                    file: isLastPart ? file : undefined
                };
                current.push(existing);
            }
            if (!isLastPart && existing.children) {
                current = existing.children;
            }
        }
    }
    // Sort: folders first, then alphabetically
    const sortNodes = (nodes)=>{
        return nodes.sort((a, b)=>{
            if (a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1;
            return a.name.localeCompare(b.name);
        }).map((node)=>({
                ...node,
                children: node.children ? sortNodes(node.children) : undefined
            }));
    };
    return sortNodes(root);
}
function FileTreeItem({ node, depth, activeFile, expandedFolders, onFileClick, onFolderToggle, onDelete }) {
    const isExpanded = expandedFolders.has(node.path);
    const isActive = activeFile === node.path;
    const [showContextMenu, setShowContextMenu] = useState(null);
    // Close context menu
    useEffect(()=>{
        if (showContextMenu) {
            const handleClick = ()=>setShowContextMenu(null);
            const handleKeyDown = (e)=>{
                if (e.key === 'Escape') setShowContextMenu(null);
            };
            document.addEventListener('click', handleClick);
            document.addEventListener('keydown', handleKeyDown);
            return ()=>{
                document.removeEventListener('click', handleClick);
                document.removeEventListener('keydown', handleKeyDown);
            };
        }
    }, [
        showContextMenu
    ]);
    const handleClick = (e)=>{
        e.preventDefault();
        if (node.isFolder) {
            onFolderToggle(node.path);
        } else {
            onFileClick(node.path);
        }
    };
    const handleContextMenu = (e)=>{
        e.preventDefault();
        setShowContextMenu({
            x: e.clientX,
            y: e.clientY
        });
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: "relative",
        children: [
            /*#__PURE__*/ _jsxs("button", {
                onClick: handleClick,
                onContextMenu: handleContextMenu,
                className: cn('w-full flex items-center gap-1 text-[13px] text-left transition-colors group', isActive && 'sandbox-file-active', !isActive && 'sandbox-file-hover'),
                style: {
                    height: '22px',
                    paddingLeft: `${depth * 8 + 4}px`,
                    paddingRight: '8px'
                },
                children: [
                    /*#__PURE__*/ _jsx("span", {
                        className: "w-4 h-4 flex items-center justify-center flex-shrink-0",
                        children: node.isFolder && (isExpanded ? /*#__PURE__*/ _jsx(CaretDown, {
                            className: "h-3 w-3 text-zinc-400",
                            weight: "bold"
                        }) : /*#__PURE__*/ _jsx(CaretRight, {
                            className: "h-3 w-3 text-zinc-400",
                            weight: "bold"
                        }))
                    }),
                    node.isFolder ? isExpanded ? /*#__PURE__*/ _jsx(FolderOpen, {
                        className: "h-4 w-4 text-amber-400 flex-shrink-0",
                        weight: "fill"
                    }) : /*#__PURE__*/ _jsx(Folder, {
                        className: "h-4 w-4 text-amber-400 flex-shrink-0",
                        weight: "fill"
                    }) : /*#__PURE__*/ _jsx(FileIcon, {
                        path: node.path
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: cn('truncate ml-1', isActive && 'text-white', !isActive && 'text-zinc-300'),
                        children: node.name
                    })
                ]
            }),
            showContextMenu && !node.isFolder && /*#__PURE__*/ _jsx("div", {
                className: "fixed z-50 min-w-[140px] py-1 sandbox-context-menu rounded shadow-xl",
                style: {
                    left: showContextMenu.x,
                    top: showContextMenu.y
                },
                onClick: (e)=>e.stopPropagation(),
                children: /*#__PURE__*/ _jsxs("button", {
                    onClick: ()=>{
                        onDelete?.(node.path);
                        setShowContextMenu(null);
                    },
                    className: "w-full flex items-center gap-2 px-3 py-1.5 text-[13px] sandbox-context-menu-delete text-left",
                    children: [
                        /*#__PURE__*/ _jsx(Trash, {
                            className: "h-4 w-4"
                        }),
                        "Delete"
                    ]
                })
            }),
            node.isFolder && isExpanded && node.children && /*#__PURE__*/ _jsx("div", {
                children: node.children.map((child)=>/*#__PURE__*/ _jsx(FileTreeItem, {
                        node: child,
                        depth: depth + 1,
                        activeFile: activeFile,
                        expandedFolders: expandedFolders,
                        onFileClick: onFileClick,
                        onFolderToggle: onFolderToggle,
                        onDelete: onDelete
                    }, child.path))
            })
        ]
    });
}
// Editor tabs
function EditorTabs({ tabs, activeTab, onTabClick, onTabClose }) {
    if (tabs.length === 0) return null;
    return /*#__PURE__*/ _jsxs("div", {
        className: "flex items-center h-[35px] sandbox-tabs overflow-x-auto",
        children: [
            tabs.map((path)=>{
                const fileName = path.split('/').pop() || path;
                const isActive = path === activeTab;
                return /*#__PURE__*/ _jsxs("div", {
                    className: cn('relative flex items-center gap-1.5 px-3 h-full text-[13px] cursor-pointer group min-w-0', isActive ? 'sandbox-tab-active' : 'sandbox-tab-inactive'),
                    onClick: ()=>onTabClick(path),
                    children: [
                        isActive && /*#__PURE__*/ _jsx("div", {
                            className: "absolute top-0 left-0 right-0 h-[2px] sandbox-tab-indicator"
                        }),
                        /*#__PURE__*/ _jsx(FileIcon, {
                            path: path,
                            className: "h-4 w-4 flex-shrink-0"
                        }),
                        /*#__PURE__*/ _jsx("span", {
                            className: "truncate",
                            children: fileName
                        }),
                        /*#__PURE__*/ _jsx("button", {
                            onClick: (e)=>{
                                e.stopPropagation();
                                onTabClose(path);
                            },
                            className: cn('p-0.5 rounded flex-shrink-0 ml-1 sandbox-tab-close', isActive ? '' : 'opacity-0 group-hover:opacity-100'),
                            children: /*#__PURE__*/ _jsx(X, {
                                className: "h-3 w-3"
                            })
                        })
                    ]
                }, path);
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "flex-1 h-full sandbox-tabs"
            })
        ]
    });
}
// Note type templates
const noteTemplates = [
    {
        ext: '.py',
        name: 'Python',
        color: 'text-green-400',
        bg: 'bg-green-500/10 hover:bg-green-500/20 border-green-500/30',
        desc: 'Python script'
    },
    {
        ext: '.ts',
        name: 'TypeScript',
        color: 'text-blue-400',
        bg: 'bg-blue-500/10 hover:bg-blue-500/20 border-blue-500/30',
        desc: 'TypeScript code'
    },
    {
        ext: '.js',
        name: 'JavaScript',
        color: 'text-yellow-400',
        bg: 'bg-yellow-500/10 hover:bg-yellow-500/20 border-yellow-500/30',
        desc: 'JavaScript code'
    },
    {
        ext: '.md',
        name: 'Markdown',
        color: 'text-blue-300',
        bg: 'bg-blue-400/10 hover:bg-blue-400/20 border-blue-400/30',
        desc: 'Documentation'
    },
    {
        ext: '.mmd',
        name: 'Mermaid',
        color: 'text-pink-400',
        bg: 'bg-pink-500/10 hover:bg-pink-500/20 border-pink-500/30',
        desc: 'Diagrams'
    },
    {
        ext: '.json',
        name: 'JSON',
        color: 'text-yellow-500',
        bg: 'bg-yellow-500/10 hover:bg-yellow-500/20 border-yellow-500/30',
        desc: 'Data/Config'
    },
    {
        ext: '.go',
        name: 'Go',
        color: 'text-cyan-400',
        bg: 'bg-cyan-500/10 hover:bg-cyan-500/20 border-cyan-500/30',
        desc: 'Go code'
    },
    {
        ext: '.rb',
        name: 'Ruby',
        color: 'text-red-400',
        bg: 'bg-red-500/10 hover:bg-red-500/20 border-red-500/30',
        desc: 'Ruby script'
    }
];
// New file dialog - VSCode style command palette
function NewNoteDialog({ open, onOpenChange, onCreateNote }) {
    const [fileName, setFileName] = useState('');
    const [selectedTemplate, setSelectedTemplate] = useState(null);
    const inputRef = useRef(null);
    // Reset on open
    useEffect(()=>{
        if (open) {
            setFileName('');
            setSelectedTemplate(null);
            setTimeout(()=>inputRef.current?.focus(), 50);
        }
    }, [
        open
    ]);
    // Detect file type from name
    const detectedType = useMemo(()=>{
        const ext = fileName.match(/\.[^.]+$/)?.[0];
        return noteTemplates.find((t)=>t.ext === ext) || null;
    }, [
        fileName
    ]);
    const handleCreate = ()=>{
        if (!fileName.trim()) return;
        let finalName = fileName.trim();
        // Add extension if not present and template selected
        if (selectedTemplate && !finalName.includes('.')) {
            finalName += selectedTemplate.ext;
        }
        onCreateNote(finalName);
        setFileName('');
        setSelectedTemplate(null);
        onOpenChange(false);
    };
    const handleTemplateClick = (template)=>{
        setSelectedTemplate(template);
        // Update file name with new extension
        const baseName = fileName.replace(/\.[^.]+$/, '') || 'untitled';
        setFileName(baseName + template.ext);
        inputRef.current?.focus();
    };
    const handleKeyDown = (e)=>{
        if (e.key === 'Enter' && fileName.trim()) {
            handleCreate();
        }
        if (e.key === 'Escape') {
            onOpenChange(false);
        }
    };
    const activeTemplate = detectedType || selectedTemplate;
    if (!open) return null;
    return /*#__PURE__*/ _jsxs("div", {
        className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: "absolute inset-0 bg-black/50",
                onClick: ()=>onOpenChange(false)
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "relative w-full max-w-lg mx-4 bg-[#1e1e1e] border border-[#454545] rounded-lg shadow-2xl overflow-hidden",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center gap-3 p-3 border-b border-[#3c3c3c]",
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: cn("w-8 h-8 rounded flex items-center justify-center flex-shrink-0 transition-colors", activeTemplate ? activeTemplate.bg : "bg-[#2d2d2d]"),
                                children: /*#__PURE__*/ _jsx(File, {
                                    className: cn("h-4 w-4", activeTemplate?.color || "text-zinc-400"),
                                    weight: "fill"
                                })
                            }),
                            /*#__PURE__*/ _jsx("input", {
                                ref: inputRef,
                                type: "text",
                                value: fileName,
                                onChange: (e)=>setFileName(e.target.value),
                                onKeyDown: handleKeyDown,
                                placeholder: "Enter file name...",
                                className: "flex-1 bg-transparent text-sm text-zinc-100 placeholder:text-zinc-500 outline-none"
                            }),
                            fileName.trim() && /*#__PURE__*/ _jsx("button", {
                                onClick: handleCreate,
                                className: "px-3 py-1.5 text-xs font-medium bg-[#007acc] hover:bg-[#006bb3] text-white rounded transition-colors",
                                children: "Create"
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "p-3",
                        children: [
                            /*#__PURE__*/ _jsx("p", {
                                className: "text-[11px] uppercase tracking-wider text-zinc-500 mb-2 px-1",
                                children: "Select type"
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                className: "grid grid-cols-4 gap-2",
                                children: noteTemplates.map((template)=>{
                                    const isActive = activeTemplate?.ext === template.ext;
                                    return /*#__PURE__*/ _jsxs("button", {
                                        onClick: ()=>handleTemplateClick(template),
                                        className: cn("flex flex-col items-center gap-1.5 p-3 rounded-lg border transition-all", isActive ? `${template.bg} border-current` : "bg-[#2d2d2d] border-[#3c3c3c] hover:bg-[#333333] hover:border-[#4c4c4c]"),
                                        children: [
                                            /*#__PURE__*/ _jsx(File, {
                                                className: cn("h-5 w-5", template.color),
                                                weight: "fill"
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                className: cn("text-[11px] font-medium", isActive ? template.color : "text-zinc-300"),
                                                children: template.name
                                            })
                                        ]
                                    }, template.ext);
                                })
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "px-4 py-2.5 bg-[#252526] border-t border-[#3c3c3c] flex items-center justify-between",
                        children: [
                            /*#__PURE__*/ _jsxs("p", {
                                className: "text-[11px] text-zinc-500",
                                children: [
                                    "Tip: Use ",
                                    /*#__PURE__*/ _jsx("code", {
                                        className: "px-1 py-0.5 bg-[#3c3c3c] rounded text-zinc-400",
                                        children: "folder/file.ext"
                                    }),
                                    " for nested files"
                                ]
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "flex items-center gap-2 text-[11px] text-zinc-500",
                                children: [
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "px-1.5 py-0.5 bg-[#3c3c3c] rounded text-[10px]",
                                        children: "↵"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        children: "Create"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "px-1.5 py-0.5 bg-[#3c3c3c] rounded text-[10px]",
                                        children: "Esc"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        children: "Cancel"
                                    })
                                ]
                            })
                        ]
                    })
                ]
            })
        ]
    });
}
// Error Boundary for Mermaid Preview
class MermaidErrorBoundary extends React.Component {
    static getDerivedStateFromError(error) {
        return {
            hasError: true,
            error: error.message
        };
    }
    componentDidCatch(error, errorInfo) {
        console.error('[MermaidErrorBoundary] Error:', error, errorInfo);
    }
    // Reset error when code changes
    componentDidUpdate(prevProps) {
        if (prevProps.code !== this.props.code && this.state.hasError) {
            this.setState({
                hasError: false,
                error: null
            });
        }
    }
    render() {
        if (this.state.hasError) {
            return /*#__PURE__*/ _jsxs("div", {
                className: "flex flex-col items-center justify-center h-full text-zinc-400 text-sm p-4 gap-4",
                children: [
                    /*#__PURE__*/ _jsxs("p", {
                        className: "text-red-400",
                        children: [
                            "Render Error: ",
                            this.state.error
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "w-full max-w-lg",
                        children: [
                            /*#__PURE__*/ _jsx("p", {
                                className: "text-xs text-zinc-500 mb-2",
                                children: "Source:"
                            }),
                            /*#__PURE__*/ _jsx("pre", {
                                className: "p-4 bg-[#2d2d2d] rounded text-xs overflow-auto max-h-[200px] text-zinc-300",
                                children: this.props.code
                            })
                        ]
                    })
                ]
            });
        }
        return this.props.children;
    }
    constructor(props){
        super(props);
        this.state = {
            hasError: false,
            error: null
        };
    }
}
// Mermaid preview component with zoom/pan
function MermaidPreviewInner({ code }) {
    const containerRef = useRef(null);
    const contentRef = useRef(null);
    const [svg, setSvg] = useState('');
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(true);
    const renderIdRef = useRef(0);
    // Zoom and pan state
    const [scale, setScale] = useState(1);
    const [position, setPosition] = useState({
        x: 0,
        y: 0
    });
    const [isDragging, setIsDragging] = useState(false);
    const dragStart = useRef({
        x: 0,
        y: 0
    });
    const positionStart = useRef({
        x: 0,
        y: 0
    });
    useEffect(()=>{
        if (!code.trim()) {
            setLoading(false);
            setSvg('');
            setError(null);
            return;
        }
        const currentRenderId = ++renderIdRef.current;
        setLoading(true);
        setError(null);
        const renderDiagram = async ()=>{
            try {
                const mermaid = (await import('mermaid')).default;
                mermaid.initialize({
                    startOnLoad: false,
                    theme: 'dark',
                    themeVariables: {
                        // Force dark backgrounds everywhere
                        background: '#1e1e1e',
                        primaryColor: '#3b82f6',
                        primaryTextColor: '#ffffff',
                        primaryBorderColor: '#60a5fa',
                        secondaryColor: '#3b82f6',
                        secondaryTextColor: '#ffffff',
                        secondaryBorderColor: '#60a5fa',
                        tertiaryColor: '#3b82f6',
                        tertiaryTextColor: '#ffffff',
                        tertiaryBorderColor: '#60a5fa',
                        // Node backgrounds - force blue
                        mainBkg: '#3b82f6',
                        nodeBkg: '#3b82f6',
                        nodeBorder: '#60a5fa',
                        nodeTextColor: '#ffffff',
                        // Cluster styling
                        clusterBkg: '#27272a',
                        clusterBorder: '#52525b',
                        titleColor: '#ffffff',
                        // Lines
                        lineColor: '#94a3b8',
                        // Font
                        fontFamily: 'system-ui, sans-serif',
                        fontSize: '14px'
                    },
                    flowchart: {
                        htmlLabels: true,
                        useMaxWidth: true
                    }
                });
                // Use unique ID to avoid conflicts
                const { svg: renderedSvg } = await mermaid.render(`mermaid-${currentRenderId}-${Date.now()}`, code);
                // Only update if this is still the latest render
                if (currentRenderId === renderIdRef.current) {
                    setSvg(renderedSvg);
                    setError(null);
                    // Reset zoom/pan when diagram changes
                    setScale(1);
                    setPosition({
                        x: 0,
                        y: 0
                    });
                }
            } catch (err) {
                if (currentRenderId === renderIdRef.current) {
                    // Extract meaningful error message from mermaid errors
                    let errorMessage = 'Failed to render diagram';
                    if (err instanceof Error) {
                        // Mermaid errors often have detailed messages
                        errorMessage = err.message;
                        // Clean up common mermaid error prefixes
                        if (errorMessage.includes('Parse error')) {
                            const match = errorMessage.match(/Parse error on line (\d+)/);
                            if (match) {
                                errorMessage = `Syntax error on line ${match[1]}`;
                            }
                        }
                    } else if (typeof err === 'string') {
                        errorMessage = err;
                    } else if (err && typeof err === 'object' && 'str' in err) {
                        // Mermaid sometimes returns {str: "error message"}
                        errorMessage = String(err.str);
                    }
                    setError(errorMessage);
                    setSvg(''); // Clear any previous SVG
                }
            } finally{
                if (currentRenderId === renderIdRef.current) {
                    setLoading(false);
                }
            }
        };
        // Debounce rendering
        const timer = setTimeout(renderDiagram, 300);
        return ()=>clearTimeout(timer);
    }, [
        code
    ]);
    // Handle mouse wheel zoom
    const handleWheel = useCallback((e)=>{
        e.preventDefault();
        const delta = e.deltaY > 0 ? -0.1 : 0.1;
        setScale((prev)=>Math.min(Math.max(0.25, prev + delta), 3));
    }, []);
    // Handle mouse down for pan
    const handleMouseDown = useCallback((e)=>{
        if (e.button !== 0) return; // Only left click
        setIsDragging(true);
        dragStart.current = {
            x: e.clientX,
            y: e.clientY
        };
        positionStart.current = position;
    }, [
        position
    ]);
    // Handle mouse move for pan
    const handleMouseMove = useCallback((e)=>{
        if (!isDragging) return;
        const dx = e.clientX - dragStart.current.x;
        const dy = e.clientY - dragStart.current.y;
        setPosition({
            x: positionStart.current.x + dx,
            y: positionStart.current.y + dy
        });
    }, [
        isDragging
    ]);
    // Handle mouse up
    const handleMouseUp = useCallback(()=>{
        setIsDragging(false);
    }, []);
    // Handle zoom controls
    const zoomIn = useCallback(()=>setScale((prev)=>Math.min(prev + 0.25, 3)), []);
    const zoomOut = useCallback(()=>setScale((prev)=>Math.max(prev - 0.25, 0.25)), []);
    const resetView = useCallback(()=>{
        setScale(1);
        setPosition({
            x: 0,
            y: 0
        });
    }, []);
    if (loading) {
        return /*#__PURE__*/ _jsxs("div", {
            className: "flex items-center justify-center h-full text-zinc-500 text-sm",
            children: [
                /*#__PURE__*/ _jsx(Spinner, {
                    className: "h-5 w-5 animate-spin mr-2"
                }),
                "Rendering diagram..."
            ]
        });
    }
    if (error) {
        return /*#__PURE__*/ _jsxs("div", {
            className: "flex flex-col items-center justify-center h-full text-zinc-400 text-sm p-4 gap-4",
            children: [
                /*#__PURE__*/ _jsxs("p", {
                    className: "text-red-400",
                    children: [
                        "Syntax Error: ",
                        error
                    ]
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "w-full max-w-lg",
                    children: [
                        /*#__PURE__*/ _jsx("p", {
                            className: "text-xs text-zinc-500 mb-2",
                            children: "Source:"
                        }),
                        /*#__PURE__*/ _jsx("pre", {
                            className: "p-4 bg-[#2d2d2d] rounded text-xs overflow-auto max-h-[200px] text-zinc-300",
                            children: code
                        })
                    ]
                })
            ]
        });
    }
    return /*#__PURE__*/ _jsxs("div", {
        className: "relative h-full w-full bg-[#1e1e1e]",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "absolute top-3 right-3 z-10 flex items-center gap-1 bg-[#2d2d2d] rounded-md border border-[#3c3c3c] p-1",
                children: [
                    /*#__PURE__*/ _jsx("button", {
                        onClick: zoomOut,
                        className: "p-1.5 hover:bg-[#3c3c3c] rounded text-zinc-400 hover:text-zinc-200 transition-colors",
                        title: "Zoom out",
                        children: /*#__PURE__*/ _jsx(Minus, {
                            className: "h-4 w-4"
                        })
                    }),
                    /*#__PURE__*/ _jsxs("span", {
                        className: "text-xs text-zinc-400 min-w-[3rem] text-center",
                        children: [
                            Math.round(scale * 100),
                            "%"
                        ]
                    }),
                    /*#__PURE__*/ _jsx("button", {
                        onClick: zoomIn,
                        className: "p-1.5 hover:bg-[#3c3c3c] rounded text-zinc-400 hover:text-zinc-200 transition-colors",
                        title: "Zoom in",
                        children: /*#__PURE__*/ _jsx(Plus, {
                            className: "h-4 w-4"
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "w-px h-4 bg-[#3c3c3c] mx-1"
                    }),
                    /*#__PURE__*/ _jsx("button", {
                        onClick: resetView,
                        className: "p-1.5 hover:bg-[#3c3c3c] rounded text-zinc-400 hover:text-zinc-200 transition-colors",
                        title: "Reset view",
                        children: /*#__PURE__*/ _jsx(ArrowsOut, {
                            className: "h-4 w-4"
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                ref: containerRef,
                className: "h-full w-full overflow-hidden cursor-grab active:cursor-grabbing",
                onWheel: handleWheel,
                onMouseDown: handleMouseDown,
                onMouseMove: handleMouseMove,
                onMouseUp: handleMouseUp,
                onMouseLeave: handleMouseUp,
                children: /*#__PURE__*/ _jsx("div", {
                    ref: contentRef,
                    className: "h-full w-full flex items-center justify-center [&_svg]:max-w-none",
                    style: {
                        transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
                        transformOrigin: 'center center',
                        transition: isDragging ? 'none' : 'transform 0.1s ease-out'
                    },
                    dangerouslySetInnerHTML: {
                        __html: svg
                    }
                })
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "absolute bottom-3 left-3 text-[10px] text-zinc-600",
                children: "Scroll to zoom • Drag to pan"
            })
        ]
    });
}
// Mermaid preview with error boundary wrapper
function MermaidPreview({ code }) {
    return /*#__PURE__*/ _jsx(MermaidErrorBoundary, {
        code: code,
        children: /*#__PURE__*/ _jsx(MermaidPreviewInner, {
            code: code
        })
    });
}
// Main Notes Mode component
export function NotesMode({ apiSpecUrl, apiName }) {
    const { activeFilePath, setActiveFilePath, streamingContent, setStreamingContent, notesRefreshTrigger } = useModeContext();
    const { workspace, loading: workspaceLoading } = useWorkspace(apiSpecUrl, apiName);
    const { notes, loading: notesLoading, createNote, readNote, updateNote, deleteNote, refresh } = useNotes(workspace?.id || null);
    const { state: editorState, openTab, closeTab, setActiveTab, clearAllTabs } = useEditorState(workspace?.id || null);
    // Editor refs
    const editorRef = useRef(null);
    // Local state
    const [fileContent, setFileContent] = useState('');
    const [isModified, setIsModified] = useState(false);
    const [isSaving, setIsSaving] = useState(false);
    const [isLoadingContent, setIsLoadingContent] = useState(false);
    const [expandedFolders, setExpandedFolders] = useState(new Set());
    const [showNewNote, setShowNewNote] = useState(false);
    const [showPreview, setShowPreview] = useState(false);
    // Build file tree
    const fileTree = useMemo(()=>buildFileTree(notes), [
        notes
    ]);
    // Refresh notes when triggered by agent (delete, update operations)
    useEffect(()=>{
        if (notesRefreshTrigger > 0) {
            refresh();
        }
    }, [
        notesRefreshTrigger,
        refresh
    ]);
    // Clear tabs when all notes are deleted
    useEffect(()=>{
        if (!notesLoading && notes.length === 0 && editorState?.openTabs && editorState.openTabs.length > 0) {
            clearAllTabs();
            setFileContent('');
        }
    }, [
        notes.length,
        notesLoading,
        editorState?.openTabs,
        clearAllTabs
    ]);
    // State validation: Clean up orphaned tabs (pointing to deleted files)
    useEffect(()=>{
        if (notesLoading || !editorState?.openTabs || editorState.openTabs.length === 0) return;
        const notePaths = new Set(notes.map((n)=>n.path));
        const orphanedTabs = editorState.openTabs.filter((tab)=>!notePaths.has(tab));
        if (orphanedTabs.length > 0) {
            console.log('[NotesMode] Cleaning up orphaned tabs:', orphanedTabs);
            // Close each orphaned tab
            orphanedTabs.forEach((tab)=>closeTab(tab));
        }
    }, [
        notes,
        notesLoading,
        editorState?.openTabs,
        closeTab
    ]);
    // State validation: Clear stuck streaming state (no active streaming after 30s)
    useEffect(()=>{
        if (!streamingContent?.isStreaming) return;
        const timeout = setTimeout(()=>{
            if (streamingContent?.isStreaming) {
                console.log('[NotesMode] Clearing stuck streaming state');
                setStreamingContent(null);
            }
        }, 30000) // 30 second timeout
        ;
        return ()=>clearTimeout(timeout);
    }, [
        streamingContent?.isStreaming,
        setStreamingContent
    ]);
    // Load file content when active tab changes
    useEffect(()=>{
        if (!editorState?.activeTab) {
            setFileContent('');
            setIsLoadingContent(false);
            return;
        }
        setIsLoadingContent(true);
        const loadContent = async ()=>{
            const content = await readNote(editorState.activeTab);
            setFileContent(content);
            setIsModified(false);
            setIsLoadingContent(false);
        };
        loadContent();
    }, [
        editorState?.activeTab,
        readNote
    ]);
    // Track last processed path to avoid re-processing
    const lastProcessedPath = useRef(null);
    // Handle file navigation from agent
    useEffect(()=>{
        if (activeFilePath && workspace) {
            // Strip timestamp from path if present (used to force refresh)
            const cleanPath = activeFilePath.split('?')[0];
            const hasTimestamp = activeFilePath.includes('?t=');
            // Skip if we've already processed this path (unless it has a timestamp for force refresh)
            if (lastProcessedPath.current === cleanPath && !hasTimestamp) {
                return;
            }
            lastProcessedPath.current = cleanPath;
            // Refresh notes first to ensure file is in the list
            refresh().then(async ()=>{
                openTab(cleanPath);
                // Auto-enable preview for mermaid files
                if (cleanPath.endsWith('.mmd')) {
                    setShowPreview(true);
                }
                // If this was a write operation (has timestamp), force content reload
                if (hasTimestamp) {
                    setIsLoadingContent(true);
                    const content = await readNote(cleanPath);
                    setFileContent(content);
                    setIsModified(false);
                    setIsLoadingContent(false);
                    // Clear streaming content after file is loaded (prevents flash of empty content)
                    if (streamingContent?.path === cleanPath) {
                        setStreamingContent(null);
                    }
                }
                // Expand parent folders
                const parts = cleanPath.split('/');
                if (parts.length > 1) {
                    const foldersToExpand = parts.slice(0, -1).map((_, i)=>parts.slice(0, i + 1).join('/'));
                    setExpandedFolders((prev)=>{
                        const next = new Set(prev);
                        foldersToExpand.forEach((f)=>next.add(f));
                        return next;
                    });
                }
            });
        }
    }, [
        activeFilePath,
        workspace,
        openTab,
        refresh,
        readNote,
        streamingContent,
        setStreamingContent
    ]);
    // Handle folder toggle
    const handleFolderToggle = useCallback((path)=>{
        setExpandedFolders((prev)=>{
            const next = new Set(prev);
            if (next.has(path)) {
                next.delete(path);
            } else {
                next.add(path);
            }
            return next;
        });
    }, []);
    // Handle content change
    const handleContentChange = useCallback((value)=>{
        if (value !== undefined) {
            setFileContent(value);
            setIsModified(true);
        }
    }, []);
    // Handle save
    const handleSave = useCallback(async ()=>{
        if (!editorState?.activeTab || !isModified) return;
        setIsSaving(true);
        try {
            await updateNote(editorState.activeTab, fileContent);
            setIsModified(false);
        } finally{
            setIsSaving(false);
        }
    }, [
        editorState?.activeTab,
        fileContent,
        isModified,
        updateNote
    ]);
    // Keyboard shortcuts
    useEffect(()=>{
        const handleKeyDown = (e)=>{
            if ((e.metaKey || e.ctrlKey) && e.key === 's') {
                e.preventDefault();
                handleSave();
            }
            if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
                e.preventDefault();
                setShowNewNote(true);
            }
        };
        window.addEventListener('keydown', handleKeyDown);
        return ()=>window.removeEventListener('keydown', handleKeyDown);
    }, [
        handleSave
    ]);
    // Handle create note
    const handleCreateNote = useCallback(async (path)=>{
        await createNote(path, '');
        await refresh();
        await openTab(path);
    }, [
        createNote,
        refresh,
        openTab
    ]);
    // Handle delete note
    const handleDeleteNote = useCallback(async (path)=>{
        await deleteNote(path);
        closeTab(path);
        await refresh();
    }, [
        deleteNote,
        closeTab,
        refresh
    ]);
    // Handle reset workspace (clears all state)
    const handleResetWorkspace = useCallback(async ()=>{
        if (!window.confirm('Reset workspace? This will clear all notes and tabs.')) {
            return;
        }
        try {
            // Clear all notes from IndexedDB
            for (const note of notes){
                await deleteNote(note.path);
            }
            // Clear all tabs
            clearAllTabs();
            // Clear streaming content
            setStreamingContent(null);
            // Clear file content
            setFileContent('');
            setIsModified(false);
            // Refresh notes list
            await refresh();
            console.log('[NotesMode] Workspace reset complete');
        } catch (err) {
            console.error('[NotesMode] Failed to reset workspace:', err);
        }
    }, [
        notes,
        deleteNote,
        clearAllTabs,
        setStreamingContent,
        refresh
    ]);
    // Handle editor mount
    const handleEditorMount = (editor)=>{
        editorRef.current = editor;
    };
    // Check if current file supports preview
    const currentFileSupportsPreview = editorState?.activeTab ? supportsPreview(editorState.activeTab) : false;
    const currentFileType = editorState?.activeTab ? getFileType(editorState.activeTab) : null;
    // Auto-enable preview for mermaid files when tab changes
    useEffect(()=>{
        if (editorState?.activeTab?.endsWith('.mmd')) {
            setShowPreview(true);
        }
    }, [
        editorState?.activeTab
    ]);
    // Auto-scroll editor to end while streaming
    useEffect(()=>{
        if (streamingContent?.isStreaming && editorRef.current) {
            const model = editorRef.current.getModel();
            if (model) {
                const lineCount = model.getLineCount();
                editorRef.current.revealLine(lineCount);
                // Also position cursor at the end
                editorRef.current.setPosition({
                    lineNumber: lineCount,
                    column: 1
                });
            }
        }
    }, [
        streamingContent?.content,
        streamingContent?.isStreaming
    ]);
    // Loading state
    if (workspaceLoading || notesLoading) {
        return /*#__PURE__*/ _jsx("div", {
            className: "flex items-center justify-center h-full sandbox-bg",
            children: /*#__PURE__*/ _jsx(Spinner, {
                className: "h-6 w-6 animate-spin sandbox-text-muted"
            })
        });
    }
    return /*#__PURE__*/ _jsxs("div", {
        className: "flex flex-col h-full sandbox-bg",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "flex items-center justify-between px-3 py-1.5 sandbox-header",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center gap-2",
                        children: [
                            /*#__PURE__*/ _jsx("span", {
                                className: "text-xs sandbox-text-secondary",
                                children: workspace?.name || 'Notes'
                            }),
                            isModified && /*#__PURE__*/ _jsx("span", {
                                className: "text-[11px] sandbox-text-warning font-medium",
                                children: "● Unsaved"
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center gap-1.5",
                        children: [
                            currentFileSupportsPreview && /*#__PURE__*/ _jsxs(Button, {
                                variant: "ghost",
                                size: "sm",
                                onClick: ()=>setShowPreview(!showPreview),
                                className: cn("h-7 px-2 sandbox-btn", showPreview ? "sandbox-btn-active" : ""),
                                children: [
                                    showPreview ? /*#__PURE__*/ _jsx(Code, {
                                        className: "h-3.5 w-3.5 mr-1"
                                    }) : /*#__PURE__*/ _jsx(Eye, {
                                        className: "h-3.5 w-3.5 mr-1"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "text-xs",
                                        children: showPreview ? 'Code' : 'Preview'
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsxs(Button, {
                                variant: "ghost",
                                size: "sm",
                                onClick: ()=>setShowNewNote(true),
                                className: "sandbox-btn h-7 px-2",
                                children: [
                                    /*#__PURE__*/ _jsx(Plus, {
                                        className: "h-3.5 w-3.5 mr-1"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "text-xs",
                                        children: "New"
                                    })
                                ]
                            }),
                            /*#__PURE__*/ _jsxs(Button, {
                                variant: "ghost",
                                size: "sm",
                                onClick: handleSave,
                                disabled: !isModified || isSaving,
                                className: "sandbox-btn h-7 px-2 disabled:opacity-40",
                                children: [
                                    /*#__PURE__*/ _jsx(FloppyDisk, {
                                        className: "h-3.5 w-3.5 mr-1"
                                    }),
                                    /*#__PURE__*/ _jsx("span", {
                                        className: "text-xs",
                                        children: "Save"
                                    })
                                ]
                            }),
                            (notes.length > 0 || (editorState?.openTabs?.length ?? 0) > 0) && /*#__PURE__*/ _jsxs(Tooltip, {
                                children: [
                                    /*#__PURE__*/ _jsx(TooltipTrigger, {
                                        asChild: true,
                                        children: /*#__PURE__*/ _jsx(Button, {
                                            variant: "ghost",
                                            size: "sm",
                                            onClick: handleResetWorkspace,
                                            className: "sandbox-btn-danger h-7 w-7 p-0",
                                            children: /*#__PURE__*/ _jsx(ArrowClockwise, {
                                                className: "h-3.5 w-3.5"
                                            })
                                        })
                                    }),
                                    /*#__PURE__*/ _jsx(TooltipContent, {
                                        side: "bottom",
                                        children: "Reset workspace"
                                    })
                                ]
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "flex flex-1 overflow-hidden",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "w-52 flex-shrink-0 border-r border-[#3c3c3c] flex flex-col bg-[#181818]",
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: "px-2.5 py-1.5 border-b border-[#3c3c3c] bg-[#252526]",
                                children: /*#__PURE__*/ _jsx("span", {
                                    className: "text-[11px] font-medium uppercase tracking-wider text-zinc-400",
                                    children: "Notes"
                                })
                            }),
                            /*#__PURE__*/ _jsx("div", {
                                className: "flex-1 overflow-y-auto",
                                children: notes.length === 0 ? /*#__PURE__*/ _jsxs("div", {
                                    className: "px-3 py-4 text-xs text-zinc-500 text-center",
                                    children: [
                                        /*#__PURE__*/ _jsx("p", {
                                            className: "mb-2",
                                            children: "No notes yet"
                                        }),
                                        /*#__PURE__*/ _jsx(Button, {
                                            variant: "link",
                                            size: "sm",
                                            className: "text-xs text-blue-400 hover:text-blue-300",
                                            onClick: ()=>setShowNewNote(true),
                                            children: "Create your first note"
                                        })
                                    ]
                                }) : fileTree.map((node)=>/*#__PURE__*/ _jsx(FileTreeItem, {
                                        node: node,
                                        depth: 0,
                                        activeFile: editorState?.activeTab || null,
                                        expandedFolders: expandedFolders,
                                        onFileClick: (path)=>{
                                            openTab(path);
                                            setActiveFilePath(path); // Update URL
                                        },
                                        onFolderToggle: handleFolderToggle,
                                        onDelete: handleDeleteNote
                                    }, node.path))
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex-1 flex flex-col overflow-hidden bg-[#1e1e1e]",
                        children: [
                            /*#__PURE__*/ _jsx(EditorTabs, {
                                tabs: editorState?.openTabs || [],
                                activeTab: editorState?.activeTab || null,
                                onTabClick: (path)=>{
                                    setActiveTab(path);
                                    setActiveFilePath(path); // Update URL
                                },
                                onTabClose: closeTab
                            }),
                            /*#__PURE__*/ _jsxs("div", {
                                className: "flex-1 overflow-hidden relative",
                                children: [
                                    isLoadingContent && !streamingContent?.isStreaming && /*#__PURE__*/ _jsx("div", {
                                        className: "absolute inset-0 bg-[#1e1e1e] z-10 flex items-center justify-center",
                                        children: /*#__PURE__*/ _jsxs("div", {
                                            className: "flex items-center gap-2 text-zinc-400",
                                            children: [
                                                /*#__PURE__*/ _jsx(Spinner, {
                                                    className: "h-5 w-5 animate-spin"
                                                }),
                                                /*#__PURE__*/ _jsx("span", {
                                                    className: "text-sm",
                                                    children: "Loading content..."
                                                })
                                            ]
                                        })
                                    }),
                                    streamingContent?.isStreaming && streamingContent.path === editorState?.activeTab && /*#__PURE__*/ _jsxs("div", {
                                        className: "absolute top-2 right-2 z-10 flex items-center gap-2 px-2 py-1 rounded bg-blue-600/80 text-white text-xs",
                                        children: [
                                            /*#__PURE__*/ _jsx(Spinner, {
                                                className: "h-3 w-3 animate-spin"
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                children: "AI writing..."
                                            })
                                        ]
                                    }),
                                    editorState?.activeTab ? showPreview && currentFileType === 'mermaid' ? /*#__PURE__*/ _jsx(MermaidPreview, {
                                        code: streamingContent?.isStreaming && streamingContent.path === editorState.activeTab ? streamingContent.content : fileContent
                                    }) : /*#__PURE__*/ _jsx(Editor, {
                                        height: "100%",
                                        language: getMonacoLanguage(editorState.activeTab),
                                        value: streamingContent?.isStreaming && streamingContent.path === editorState.activeTab ? streamingContent.content : fileContent,
                                        onChange: handleContentChange,
                                        onMount: handleEditorMount,
                                        options: {
                                            minimap: {
                                                enabled: false
                                            },
                                            fontSize: 13,
                                            fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
                                            lineNumbers: 'on',
                                            scrollBeyondLastLine: false,
                                            wordWrap: 'on',
                                            tabSize: 2,
                                            automaticLayout: true,
                                            padding: {
                                                top: 8,
                                                bottom: 8
                                            },
                                            renderWhitespace: 'selection',
                                            bracketPairColorization: {
                                                enabled: true
                                            },
                                            cursorBlinking: 'smooth',
                                            smoothScrolling: true,
                                            lineHeight: 20,
                                            readOnly: streamingContent?.isStreaming && streamingContent.path === editorState.activeTab
                                        },
                                        theme: "vs-dark"
                                    }) : /*#__PURE__*/ _jsx("div", {
                                        className: "flex items-center justify-center h-full",
                                        children: /*#__PURE__*/ _jsxs("div", {
                                            className: "text-center",
                                            children: [
                                                /*#__PURE__*/ _jsx("div", {
                                                    className: "w-16 h-16 mx-auto mb-4 rounded-lg bg-[#2d2d2d] flex items-center justify-center",
                                                    children: /*#__PURE__*/ _jsx(File, {
                                                        className: "h-8 w-8 text-zinc-600"
                                                    })
                                                }),
                                                /*#__PURE__*/ _jsx("p", {
                                                    className: "text-sm text-zinc-500 mb-1",
                                                    children: "No file open"
                                                }),
                                                /*#__PURE__*/ _jsx("p", {
                                                    className: "text-xs text-zinc-600",
                                                    children: "Create a note or select one from the sidebar"
                                                })
                                            ]
                                        })
                                    })
                                ]
                            })
                        ]
                    })
                ]
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "flex items-center justify-between h-[22px] px-2.5 border-t border-[#3c3c3c] bg-[#007acc] text-white text-[11px]",
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: "flex items-center gap-3",
                        children: editorState?.activeTab && /*#__PURE__*/ _jsx("span", {
                            className: "opacity-90",
                            children: getFileType(editorState.activeTab)
                        })
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "flex items-center gap-3",
                        children: /*#__PURE__*/ _jsxs("span", {
                            className: "opacity-70",
                            children: [
                                notes.length,
                                " note",
                                notes.length !== 1 ? 's' : ''
                            ]
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(NewNoteDialog, {
                open: showNewNote,
                onOpenChange: setShowNewNote,
                onCreateNote: handleCreateNote
            })
        ]
    });
}
