// Claude Code IDE JavaScript
let currentSession = null;
let currentProjectName = null;
let ws = null;

// Make ws globally accessible for other scripts
Object.defineProperty(window, 'ws', {
    get: function() { return ws; },
    set: function(value) { ws = value; },
    enumerable: true,
    configurable: true
});

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    initNavigation();
    connectWebSocket();

    // Check URL params for session, prompt, and project
    const urlParams = new URLSearchParams(window.location.search);
    const sessionId = urlParams.get('session');
    const prompt = urlParams.get('prompt');
    const project = urlParams.get('project');

    // Parse project parameter if present
    if (project) {
        window.currentProjectDir = decodeURIComponent(project);
        currentProjectName = project.split('/').filter(Boolean).pop() || 'Project';
        console.log('[Init] Project context loaded:', currentProjectName, window.currentProjectDir);
    }

    if (sessionId || prompt) {
        // Switch to chat view first
        switchView('chat');

        // Wait for chat to load, then handle session/prompt
        setTimeout(() => {
            if (sessionId) {
                attachToSession(sessionId);
            }

            if (prompt) {
                setTimeout(() => {
                    const input = document.getElementById('chat-input');
                    if (input) {
                        input.value = decodeURIComponent(prompt);
                        sendChatMessage();
                    }
                }, 1000);
            }
        }, 500);
    } else {
        // Default to chat view
        switchView('chat');
    }
});

// Navigation
function initNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', () => {
            const view = item.dataset.view;
            switchView(view);
        });
    });
}

function switchView(viewName) {
    // Update nav items
    document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
        if (item.dataset.view === viewName) {
            item.classList.add('active');
        }
    });

    // Update views
    document.querySelectorAll('.view').forEach(view => {
        view.classList.remove('active');
    });
    document.getElementById(`${viewName}-view`).classList.add('active');

    // Load content for the view
    switch(viewName) {
        case 'dashboard':
            loadDashboard();
            break;
        case 'chat':
            loadChatView();
            break;
        case 'sessions':
            loadSessions();
            break;
        case 'projects':
            loadProjects();
            break;
        case 'files':
            loadFiles();
            break;
        case 'terminal':
            loadTerminal();
            break;
    }
}

// WebSocket Connection
function connectWebSocket() {
    const wsUrl = `wss://${window.location.host}/claude/api/claude/chat`;
    console.log('Connecting to WebSocket:', wsUrl);

    window.ws = new WebSocket(wsUrl);

    window.ws.onopen = () => {
        console.log('WebSocket connected, readyState:', window.ws.readyState);
        // Send a test message to verify connection
        try {
            window.ws.send(JSON.stringify({ type: 'ping' }));
        } catch (error) {
            console.error('Error sending ping:', error);
        }
    };

    window.ws.onmessage = (event) => {
        const data = JSON.parse(event.data);
        console.log('WebSocket message received:', data.type);
        handleWebSocketMessage(data);
    };

    window.ws.onerror = (error) => {
        console.error('WebSocket error:', error);
        console.log('WebSocket error details:', {
            type: error.type,
            target: error.target,
            readyState: window.ws?.readyState
        });
    };

    window.ws.onclose = (event) => {
        console.log('WebSocket disconnected:', {
            code: event.code,
            reason: event.reason,
            wasClean: event.wasClean
        });
        // Clear the ws reference
        window.ws = null;
        // Attempt to reconnect after 5 seconds
        setTimeout(() => {
            console.log('Attempting to reconnect...');
            connectWebSocket();
        }, 5000);
    };
}

function handleWebSocketMessage(data) {
    switch(data.type) {
        case 'connected':
            console.log(data.message);
            break;
        case 'output':
            handleSessionOutput(data);
            break;
        case 'operations-detected':
            handleOperationsDetected(data);
            break;
        case 'operations-executed':
            handleOperationsExecuted(data);
            break;
        case 'operations-error':
            handleOperationsError(data);
            break;
        case 'operation-progress':
            handleOperationProgress(data);
            break;
        case 'error':
            console.error('WebSocket error:', data.error);
            // Show error in chat if attached
            if (typeof appendSystemMessage === 'function') {
                appendSystemMessage('Error: ' + data.error);
            }
            break;
    }
}

/**
 * Handle operations detected event
 */
function handleOperationsDetected(data) {
    console.log('Operations detected:', data.operations.length);

    // Only show if we're attached to this session
    if (data.sessionId !== attachedSessionId) return;

    // Store response for execution
    window.currentOperationsResponse = data.response;

    // Use tag renderer to show operations panel
    if (typeof tagRenderer !== 'undefined') {
        tagRenderer.showOperationsPanel(data.operations, data.response);
    }
}

/**
 * Handle operations executed event
 */
function handleOperationsExecuted(data) {
    console.log('Operations executed:', data.results);

    // Only handle if we're attached to this session
    if (data.sessionId !== attachedSessionId) return;

    // Hide progress and show completion
    if (typeof tagRenderer !== 'undefined') {
        tagRenderer.hideProgress();
        tagRenderer.hideOperationsPanel();
        tagRenderer.showCompletion(data.results);
    }
}

/**
 * Handle operations error event
 */
function handleOperationsError(data) {
    console.error('Operations error:', data.error);

    // Only handle if we're attached to this session
    if (data.sessionId !== attachedSessionId) return;

    // Show error
    if (typeof tagRenderer !== 'undefined') {
        tagRenderer.hideProgress();
        tagRenderer.showError(data.error);
    }
}

/**
 * Handle operation progress event
 */
function handleOperationProgress(data) {
    console.log('Operation progress:', data.progress);

    // Only handle if we're attached to this session
    if (data.sessionId !== attachedSessionId) return;

    // Update progress
    if (typeof tagRenderer !== 'undefined') {
        const progress = data.progress;
        let message = '';

        switch(progress.type) {
            case 'write':
                message = `Creating ${progress.path}...`;
                break;
            case 'rename':
                message = `Renaming ${progress.from} to ${progress.to}...`;
                break;
            case 'delete':
                message = `Deleting ${progress.path}...`;
                break;
            case 'install':
                message = `Installing packages: ${progress.packages.join(', ')}...`;
                break;
            case 'command':
                message = `Executing command: ${progress.command}...`;
                break;
            default:
                message = 'Processing...';
        }

        tagRenderer.updateProgress(message);
    }
}

function handleSessionOutput(data) {
    // Handle output for sessions view
    if (currentSession && data.sessionId === currentSession.id) {
        appendOutput(data.data);
    }

    // Handle output for chat view
    if (typeof attachedSessionId !== 'undefined' && data.sessionId === attachedSessionId) {
        // Hide streaming indicator
        if (typeof hideStreamingIndicator === 'function') {
            hideStreamingIndicator();
        }

        // Append output as assistant message
        if (typeof appendMessage === 'function') {
            appendMessage('assistant', data.data.content, true);
        }
    }
}

// Dashboard
async function loadDashboard() {
    try {
        // Load stats
        const [sessionsRes, projectsRes] = await Promise.all([
            fetch('/claude/api/claude/sessions'),
            fetch('/claude/api/claude/projects')
        ]);

        const sessionsData = await sessionsRes.json();
        const projectsData = await projectsRes.json();

        // Update stats
        document.getElementById('active-sessions-count').textContent =
            sessionsData.active?.length || 0;
        document.getElementById('historical-sessions-count').textContent =
            sessionsData.historical?.length || 0;
        document.getElementById('total-projects-count').textContent =
            projectsData.projects?.length || 0;

        // Update active sessions list
        const activeSessionsEl = document.getElementById('active-sessions-list');
        if (sessionsData.active && sessionsData.active.length > 0) {
            activeSessionsEl.innerHTML = sessionsData.active.map(session => `
                <div class="session-item" onclick="viewSession('${session.id}')">
                    <div class="session-header">
                        <span class="session-id">${session.id.substring(0, 20)}...</span>
                        <span class="session-status ${session.status}">${session.status}</span>
                    </div>
                    <div class="session-meta">
                        Working: ${session.workingDir}<br>
                        Created: ${new Date(session.createdAt).toLocaleString()}
                    </div>
                </div>
            `).join('');
        } else {
            activeSessionsEl.innerHTML = '<p class="placeholder">No active sessions</p>';
        }

        // Update projects list
        const projectsEl = document.getElementById('recent-projects-list');
        if (projectsData.projects && projectsData.projects.length > 0) {
            projectsEl.innerHTML = projectsData.projects.slice(0, 5).map(project => `
                <div class="project-card" onclick="viewProject('${project.name}')">
                    <h3>${project.name}</h3>
                    <p class="project-meta">
                        Modified: ${new Date(project.modified).toLocaleDateString()}
                    </p>
                </div>
            `).join('');
        } else {
            projectsEl.innerHTML = '<p class="placeholder">No projects yet</p>';
        }
    } catch (error) {
        console.error('Error loading dashboard:', error);
    }
}

function refreshSessions() {
    loadDashboard();
}

// Sessions
async function loadSessions() {
    const sessionsListEl = document.getElementById('sessions-list');

    try {
        // Get current project from URL
        const urlParams = new URLSearchParams(window.location.search);
        const projectPath = urlParams.get('project');

        // Build API URL with project filter
        let apiUrl = '/claude/api/claude/sessions';
        if (projectPath) {
            apiUrl += `?project=${encodeURIComponent(projectPath)}`;
            console.log('[Sessions] Loading sessions for project:', projectPath);
        }

        // Show loading state
        sessionsListEl.innerHTML = '<div class="loading">Loading sessions...</div>';

        const res = await fetch(apiUrl);

        // Handle HTTP errors
        if (!res.ok) {
            if (res.status === 401) {
                sessionsListEl.innerHTML = `
                    <div class="error-state">
                        <p>⚠️ Session expired</p>
                        <button class="btn-primary" onclick="location.reload()">Login Again</button>
                    </div>
                `;
                return;
            }
            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
        }

        const data = await res.json();

        // Handle API errors
        if (data.error) {
            throw new Error(data.error);
        }

        const allSessions = [
            ...(data.active || []).map(s => ({...s, type: 'active'})),
            ...(data.historical || []).map(s => ({...s, type: 'historical'}))
        ];

        // Sort by last activity (newest first)
        allSessions.sort((a, b) => {
            const dateA = new Date(a.lastActivity || a.createdAt || a.created_at);
            const dateB = new Date(b.lastActivity || b.createdAt || b.created_at);
            return dateB - dateA;
        });

        // Empty state
        if (allSessions.length === 0) {
            const projectName = projectPath ? projectPath.split('/').pop() : 'this project';
            sessionsListEl.innerHTML = `
                <div class="empty-state">
                    <div class="empty-icon">📂</div>
                    <p>No sessions found for <strong>${escapeHtml(projectName)}</strong></p>
                    <button class="btn-primary" onclick="startNewChat()">Create New Session</button>
                </div>
            `;
            return;
        }

        // Render session list
        sessionsListEl.innerHTML = allSessions.map(session => {
            const isRunning = session.status === 'running' && session.type === 'active';
            const relativeTime = getRelativeTime(session);
            const messageCount = session.messageCount || session.metadata?.messageCount || 0;

            return `
                <div class="session-item ${session.type}" onclick="viewSessionDetails('${session.id}')">
                    <div class="session-header">
                        <div class="session-info">
                            <span class="session-id">${session.id.substring(0, 12)}...</span>
                            <span class="session-status ${isRunning ? 'running' : 'stopped'}">
                                ${isRunning ? '🟢 Running' : '⏸️ ' + (session.type === 'historical' ? 'Historical' : 'Stopped')}
                            </span>
                        </div>
                        <div class="session-time">${relativeTime}</div>
                    </div>
                    <div class="session-meta">
                        <div class="session-path">📁 ${escapeHtml(session.workingDir)}</div>
                        <div class="session-stats">
                            <span>💬 ${messageCount} messages</span>
                        </div>
                    </div>
                </div>
            `;
        }).join('');

    } catch (error) {
        console.error('[loadSessions] Error:', error);
        sessionsListEl.innerHTML = `
            <div class="error-state">
                <div class="error-icon">⚠️</div>
                <p>Failed to load sessions</p>
                <p class="error-message">${escapeHtml(error.message)}</p>
                <button class="btn-secondary" onclick="loadSessions()">Try Again</button>
            </div>
        `;
    }
}

function getRelativeTime(session) {
    const date = new Date(session.lastActivity || session.createdAt || session.created_at);
    const now = new Date();
    const diffMins = Math.floor((now - date) / 60000);

    if (diffMins < 1) return 'Just now';
    if (diffMins < 60) return `${diffMins}m ago`;
    if (diffMins < 1440) return `${Math.floor(diffMins/60)}h ago`;
    return `${Math.floor(diffMins/1440)}d ago`;
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

async function viewSessionDetails(sessionId) {
    const detailEl = document.getElementById('session-detail');

    try {
        // Show loading state
        detailEl.innerHTML = '<div class="loading">Loading session details...</div>';

        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);

        // Handle 404 - session not found
        if (res.status === 404) {
            detailEl.innerHTML = `
                <div class="error-state">
                    <div class="error-icon">🔍</div>
                    <h3>Session Not Found</h3>
                    <p>The session <code>${escapeHtml(sessionId)}</code> could not be found.</p>
                    <button class="btn-primary" onclick="loadSessions()">Back to Sessions</button>
                </div>
            `;
            return;
        }

        if (!res.ok) {
            throw new Error(`HTTP ${res.status}: ${res.statusText}`);
        }

        const data = await res.json();

        if (data.error) {
            throw new Error(data.error);
        }

        if (!data.session) {
            throw new Error('No session data in response');
        }

        const session = data.session;
        const isRunning = session.status === 'running' && session.pid;
        const messageCount = session.outputBuffer?.length || 0;

        // Render session detail card
        detailEl.innerHTML = `
            <div class="session-detail-card">
                <div class="session-detail-header">
                    <div class="session-title">
                        <h2>Session ${session.id.substring(0, 12)}...</h2>
                        <span class="session-status-badge ${isRunning ? 'running' : 'stopped'}">
                            ${isRunning ? '🟢 Running' : '⏸️ Stopped'}
                        </span>
                    </div>
                    <div class="session-detail-actions">
                        <button class="btn-primary" onclick="continueSessionInChat('${session.id}')">
                            💬 Continue in Chat
                        </button>
                        <button class="btn-secondary" onclick="duplicateSession('${session.id}')">
                            📋 Duplicate
                        </button>
                        ${isRunning ? `
                            <button class="btn-danger" onclick="terminateSession('${session.id}')">
                                ⏹️ Terminate
                            </button>
                        ` : ''}
                    </div>
                </div>

                <div class="session-detail-meta">
                    <div class="meta-row">
                        <span class="meta-label">Working Directory:</span>
                        <span class="meta-value">${escapeHtml(session.workingDir)}</span>
                    </div>
                    <div class="meta-row">
                        <span class="meta-label">Created:</span>
                        <span class="meta-value">${new Date(session.createdAt).toLocaleString()}</span>
                    </div>
                    <div class="meta-row">
                        <span class="meta-label">Last Activity:</span>
                        <span class="meta-value">${new Date(session.lastActivity).toLocaleString()}</span>
                    </div>
                    <div class="meta-row">
                        <span class="meta-label">Messages:</span>
                        <span class="meta-value">${messageCount}</span>
                    </div>
                    ${session.pid ? `
                        <div class="meta-row">
                            <span class="meta-label">PID:</span>
                            <span class="meta-value">${session.pid}</span>
                        </div>
                    ` : ''}
                </div>

                <div class="session-context">
                    <h3>Token Usage</h3>
                    <div class="context-bar">
                        <div class="context-fill" style="width: ${Math.min(100, (session.context?.totalTokens || 0) / (session.context?.maxTokens || 200000) * 100)}%"></div>
                    </div>
                    <div class="context-stats">
                        <span>${(session.context?.totalTokens || 0).toLocaleString()} / ${(session.context?.maxTokens || 200000).toLocaleString()} tokens</span>
                        <span>${Math.round((session.context?.totalTokens || 0) / (session.context?.maxTokens || 200000) * 100)}% used</span>
                    </div>
                </div>

                <div class="session-output-preview">
                    <h3>Session Output (${messageCount} entries)</h3>
                    <div class="output-scroll-area">
                        ${session.outputBuffer?.slice(0, 50).map(entry => `
                            <div class="output-entry ${entry.type}">
                                <div class="output-header">
                                    <span class="output-type">${entry.type}</span>
                                    <span class="output-time">${new Date(entry.timestamp).toLocaleTimeString()}</span>
                                </div>
                                <div class="output-content">${escapeHtml(entry.content.substring(0, 500))}${entry.content.length > 500 ? '...' : ''}</div>
                            </div>
                        `).join('') || '<p class="no-output">No output yet</p>'}
                        ${session.outputBuffer?.length > 50 ? `<p class="output-truncated">...and ${session.outputBuffer.length - 50} more entries</p>` : ''}
                    </div>
                </div>
            </div>
        `;

        currentSession = session;

    } catch (error) {
        console.error('[viewSessionDetails] Error:', error);
        detailEl.innerHTML = `
            <div class="error-state">
                <div class="error-icon">⚠️</div>
                <h3>Failed to Load Session</h3>
                <p class="error-message">${escapeHtml(error.message)}</p>
                <button class="btn-primary" onclick="loadSessions()">Back to Sessions</button>
            </div>
        `;
    }
}

async function continueSessionInChat(sessionId) {
    console.log('[Sessions] Continuing session in Chat:', sessionId);

    try {
        showLoadingOverlay('Loading session...');

        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
        if (!res.ok) {
            throw new Error(`HTTP ${res.status}`);
        }

        const data = await res.json();
        if (!data.session) {
            throw new Error('Session not found');
        }

        const session = data.session;

        // Check if session is runnable
        if (session.status === 'terminated' || session.status === 'stopped') {
            hideLoadingOverlay();

            if (confirm('This session has ended. Do you want to create a new session with the same working directory?')) {
                await duplicateSession(sessionId);
            }
            return;
        }

        // Store pending session and switch views
        window.pendingSessionId = sessionId;
        window.pendingSessionData = session;

        switchView('chat');

    } catch (error) {
        console.error('[continueSessionInChat] Error:', error);
        hideLoadingOverlay();
        showToast('❌ Failed to load session: ' + error.message, 'error');
    }
}

async function duplicateSession(sessionId) {
    try {
        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
        const data = await res.json();

        if (!data.session) {
            throw new Error('Session not found');
        }

        const workingDir = data.session.workingDir;
        const projectName = workingDir.split('/').pop();

        showLoadingOverlay('Duplicating session...');

        const createRes = await fetch('/claude/api/claude/sessions', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                workingDir,
                metadata: {
                    type: 'chat',
                    source: 'web-ide',
                    project: projectName,
                    duplicatedFrom: sessionId
                }
            })
        });

        if (!createRes.ok) {
            throw new Error(`HTTP ${createRes.status}`);
        }

        const createData = await createRes.json();

        hideLoadingOverlay();
        showToast('✅ Session duplicated!', 'success');

        loadSessions();

        setTimeout(() => {
            if (confirm('Start chatting in the duplicated session?')) {
                continueSessionInChat(createData.session.id);
            }
        }, 500);

    } catch (error) {
        console.error('[duplicateSession] Error:', error);
        hideLoadingOverlay();
        showToast('Failed to duplicate session: ' + error.message, 'error');
    }
}

async function terminateSession(sessionId) {
    if (!confirm('Are you sure you want to terminate this session?')) {
        return;
    }

    try {
        showLoadingOverlay('Terminating session...');

        const res = await fetch(`/claude/api/claude/sessions/${sessionId}`, {
            method: 'DELETE'
        });

        if (!res.ok) {
            throw new Error(`HTTP ${res.status}`);
        }

        hideLoadingOverlay();
        showToast('✅ Session terminated', 'success');

        loadSessions();

        if (currentSession && currentSession.id === sessionId) {
            document.getElementById('session-detail').innerHTML = `
                <div class="placeholder">
                    <h2>Session Terminated</h2>
                    <p>Select another session from the sidebar</p>
                </div>
            `;
            currentSession = null;
        }

    } catch (error) {
        console.error('[terminateSession] Error:', error);
        hideLoadingOverlay();
        showToast('Failed to terminate session: ' + error.message, 'error');
    }
}

// Projects
async function loadProjects() {
    try {
        const res = await fetch('/claude/api/claude/projects');
        const data = await res.json();

        const gridEl = document.getElementById('projects-grid');
        if (data.projects && data.projects.length > 0) {
            gridEl.innerHTML = data.projects.map(project => `
                <div class="project-card" onclick="viewProject('${project.name}')">
                    <h3>${project.name}</h3>
                    <p class="project-meta">
                        Modified: ${new Date(project.modified).toLocaleString()}
                    </p>
                    <p class="project-description">Click to view project details</p>
                </div>
            `).join('');
        } else {
            gridEl.innerHTML = '<p class="placeholder">No projects yet. Create your first project!</p>';
        }
    } catch (error) {
        console.error('Error loading projects:', error);
    }
}

async function viewProject(projectName) {
    // Open the project file in the files view
    const path = `Claude Projects/${projectName}.md`;
    loadFileContent(path);
    switchView('files');
}

// Files
async function loadFiles() {
    try {
        const res = await fetch('/claude/api/files');
        const data = await res.json();

        const treeEl = document.getElementById('file-tree');
        treeEl.innerHTML = renderFileTree(data.tree);
    } catch (error) {
        console.error('Error loading files:', error);
    }
}

async function loadTerminal() {
    // Initialize terminal manager if not already done
    if (!window.terminalManager) {
        window.terminalManager = new TerminalManager();
        await window.terminalManager.initialize();
    }

    // Set up new terminal button
    const btnNewTerminal = document.getElementById('btn-new-terminal');
    if (btnNewTerminal) {
        btnNewTerminal.onclick = () => {
            window.terminalManager.createTerminal();
        };
    }
}

function renderFileTree(tree, level = 0) {
    return tree.map(item => {
        const padding = level * 1 + 0.5;
        const icon = item.type === 'folder' ? '📁' : '📄';

        if (item.type === 'folder' && item.children) {
            return `
                <div style="padding-left: ${padding}rem">
                    <div class="tree-item folder" onclick="toggleFolder(this)">
                        <span>${icon}</span>
                        <span>${item.name}</span>
                    </div>
                    <div class="tree-children" style="display: none;">
                        ${renderFileTree(item.children, level + 1)}
                    </div>
                </div>
            `;
        } else {
            return `
                <div style="padding-left: ${padding}rem">
                    <div class="tree-item file" onclick="loadFile('${item.path}')">
                        <span>${icon}</span>
                        <span>${item.name}</span>
                    </div>
                </div>
            `;
        }
    }).join('');
}

function toggleFolder(element) {
    const children = element.parentElement.querySelector('.tree-children');
    const icon = element.querySelector('span:first-child');

    if (children.style.display === 'none') {
        children.style.display = 'block';
        icon.textContent = '📂';
    } else {
        children.style.display = 'none';
        icon.textContent = '📁';
    }
}

async function loadFile(filePath) {
    try {
        const res = await fetch(`/claude/api/file/${encodeURIComponent(filePath)}`);
        const data = await res.json();

        const isHtmlFile = filePath.toLowerCase().endsWith('.html') || filePath.toLowerCase().endsWith('.htm');

        const editorEl = document.getElementById('file-editor');

        if (isHtmlFile) {
            // HTML file - show with preview option
            editorEl.innerHTML = `
                <div class="file-header">
                    <h2>${filePath}</h2>
                    <div class="file-actions">
                        <button class="btn-secondary btn-sm" onclick="editFile('${filePath}')">Edit</button>
                        <button class="btn-primary btn-sm" onclick="showHtmlPreview('${filePath}')">👁️ Preview</button>
                    </div>
                </div>
                <div class="file-content" id="file-content-view">
                    <div class="view-toggle">
                        <button class="toggle-btn active" data-view="code" onclick="switchFileView('code')">Code</button>
                        <button class="toggle-btn" data-view="preview" onclick="switchFileView('preview')">Preview</button>
                    </div>
                    <div class="code-view">
                        <pre><code class="language-html">${escapeHtml(data.content)}</code></pre>
                    </div>
                    <div class="preview-view" style="display: none;">
                        <iframe id="html-preview-frame" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
                    </div>
                </div>
            `;

            // Store file content for preview
            window.currentFileContent = data.content;
            window.currentFilePath = filePath;

            // Highlight code
            if (window.hljs) {
                document.querySelectorAll('#file-content-view pre code').forEach((block) => {
                    hljs.highlightElement(block);
                });
            }
        } else {
            // Non-HTML file - show as before
            editorEl.innerHTML = `
                <div class="file-header">
                    <h2>${filePath}</h2>
                    <div class="file-actions">
                        <button class="btn-secondary btn-sm" onclick="editFile('${filePath}')">Edit</button>
                    </div>
                </div>
                <div class="file-content">
                    <div class="markdown-body">${data.html}</div>
                </div>
            `;
        }
    } catch (error) {
        console.error('Error loading file:', error);
    }
}

async function loadFileContent(filePath) {
    await loadFile(filePath);
    switchView('files');
}

// HTML Preview Functions
function showHtmlPreview(filePath) {
    switchFileView('preview');
}

function switchFileView(view) {
    const codeView = document.querySelector('.code-view');
    const previewView = document.querySelector('.preview-view');
    const toggleBtns = document.querySelectorAll('.toggle-btn');

    // Update buttons
    toggleBtns.forEach(btn => {
        btn.classList.remove('active');
        if (btn.dataset.view === view) {
            btn.classList.add('active');
        }
    });

    // Show/hide views
    if (view === 'code') {
        codeView.style.display = 'block';
        previewView.style.display = 'none';
    } else if (view === 'preview') {
        codeView.style.display = 'none';
        previewView.style.display = 'block';

        // Load HTML into iframe using blob URL
        const iframe = document.getElementById('html-preview-frame');
        if (iframe && window.currentFileContent) {
            // Create blob URL from HTML content
            const blob = new Blob([window.currentFileContent], { type: 'text/html' });
            const blobUrl = URL.createObjectURL(blob);

            // Load blob URL in iframe
            iframe.src = blobUrl;

            // Clean up blob URL when iframe is unloaded
            iframe.onload = () => {
                // Keep the blob URL active while preview is shown
            };
        }
    }
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Modals
function createNewSession() {
    document.getElementById('modal-overlay').classList.remove('hidden');
    document.getElementById('new-session-modal').classList.remove('hidden');
}

function createNewProject() {
    document.getElementById('modal-overlay').classList.remove('hidden');
    document.getElementById('new-project-modal').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('modal-overlay').classList.add('hidden');
    document.querySelectorAll('.modal').forEach(modal => {
        modal.classList.add('hidden');
    });
}

async function submitNewSession() {
    const workingDir = document.getElementById('session-working-dir').value;
    const project = document.getElementById('session-project').value;

    try {
        const res = await fetch('/claude/api/claude/sessions', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                workingDir,
                metadata: { project }
            })
        });

        const data = await res.json();

        if (data.success) {
            closeModal();
            viewSession(data.session.id);
        }
    } catch (error) {
        console.error('Error creating session:', error);
        alert('Failed to create session');
    }
}

async function submitNewProject() {
    const name = document.getElementById('project-name').value;
    const description = document.getElementById('project-description').value;
    const type = document.getElementById('project-type').value;

    if (!name) {
        alert('Please enter a project name');
        return;
    }

    try {
        const res = await fetch('/claude/api/claude/projects', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, description, type })
        });

        const data = await res.json();

        if (data.success) {
            closeModal();
            loadProjects();
            viewProject(name);
        }
    } catch (error) {
        console.error('Error creating project:', error);
        alert('Failed to create project');
    }
}

// Utility functions
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * Show toast notification
 * @param {string} message - The message to display
 * @param {string} type - The type of toast: 'success', 'error', 'info'
 * @param {number} duration - Duration in milliseconds (default: 3000)
 */
function showToast(message, type = 'info', duration = 3000) {
    // Remove existing toasts
    const existingToasts = document.querySelectorAll('.toast-notification');
    existingToasts.forEach(toast => toast.remove());

    // Create toast element
    const toast = document.createElement('div');
    toast.className = `toast-notification toast-${type}`;
    toast.innerHTML = `
        <span class="toast-icon">${getToastIcon(type)}</span>
        <span class="toast-message">${escapeHtml(message)}</span>
    `;

    document.body.appendChild(toast);

    // Trigger animation
    setTimeout(() => {
        toast.classList.add('visible');
    }, 10);

    // Auto remove after duration
    setTimeout(() => {
        toast.classList.remove('visible');
        setTimeout(() => {
            toast.remove();
        }, 300);
    }, duration);
}

/**
 * Get toast icon based on type
 */
function getToastIcon(type) {
    const icons = {
        success: '✓',
        error: '✕',
        info: 'ℹ',
        warning: '⚠'
    };
    return icons[type] || icons.info;
}

function showProjects() {
    switchView('projects');
}

// Logout
document.getElementById('logout-btn')?.addEventListener('click', async () => {
    try {
        await fetch('/claude/api/logout', { method: 'POST' });
        window.location.reload();
    } catch (error) {
        console.error('Error logging out:', error);
    }
});