<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .chat-interface {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 20px;
            height: calc(100vh - 200px);
        }
        
        .sidebar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .chat-main {
            background: white;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .controls {
            padding: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .control-group {
            margin-bottom: 15px;
        }
        
        .control-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .control-group select,
        .control-group button {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .control-group button {
            background: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            font-weight: 500;
        }
        
        .control-group button:hover {
            background: #0056b3;
        }
        
        .control-group button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            min-height: 400px;
        }
        
        .message {
            margin-bottom: 15px;
            padding: 12px 16px;
            border-radius: 8px;
            max-width: 80%;
        }
        
        .message.user {
            background: #007bff;
            color: white;
            margin-left: auto;
            margin-right: 0;
        }
        
        .message.assistant {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
        }
        
        .message pre {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }
        
        .message code {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 3px;
            padding: 2px 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }
        
        .message pre code {
            background: none !important;
            border: none;
            padding: 0;
        }
        
        .message pre[class*="language-"] {
            background: #f5f2f0;
        }
        
        .message h1, .message h2, .message h3, .message h4, .message h5, .message h6 {
            margin: 15px 0 10px 0;
            color: #333;
        }
        
        .message ul, .message ol {
            margin: 10px 0;
            padding-left: 20px;
        }
        
        .message li {
            margin: 5px 0;
        }
        
        .message blockquote {
            border-left: 4px solid #007bff;
            margin: 10px 0;
            padding: 10px 0 10px 15px;
            background: #f8f9fa;
            font-style: italic;
        }
        
        .message p {
            margin: 10px 0;
        }
        
        .message strong {
            font-weight: bold;
        }
        
        .message em {
            font-style: italic;
        }
        
        .message table {
            border-collapse: collapse;
            width: 100%;
            margin: 10px 0;
        }
        
        .message th, .message td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        .message th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        
        .message tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .message a {
            color: #007bff;
            text-decoration: none;
        }
        
        .message a:hover {
            text-decoration: underline;
        }
        
        .loading-message {
            opacity: 0.7;
            font-style: italic;
        }
        
        .loading-dots::after {
            content: '...';
            animation: dots 1.5s steps(4, end) infinite;
        }
        
        @keyframes dots {
            0%, 20% { content: ''; }
            40% { content: '.'; }
            60% { content: '..'; }
            80%, 100% { content: '...'; }
        }
        
        .message.system {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            text-align: center;
            margin: 0 auto;
        }
        
        .chat-input {
            padding: 20px;
            border-top: 1px solid #eee;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
        }
        
        .input-group input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .input-group button {
            padding: 12px 24px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
        }
        
        .input-group button:hover {
            background: #218838;
        }
        
        .input-group button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .status {
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 15px;
            text-align: center;
            font-weight: 500;
        }
        
        .status.connected {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.disconnected {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .status.connecting {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        @media (max-width: 768px) {
            .chat-interface {
                grid-template-columns: 1fr;
                height: auto;
            }
            
            .sidebar {
                order: -1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>{{ title }}</h1>
            <p>Connect to MCP servers directly or through AI agents</p>
        </div>
        
        <div class="chat-interface">
            <div class="sidebar">
                <div class="controls">
                    <div class="control-group">
                        <label for="mode">Mode:</label>
                        <select id="mode">
                            <option value="agent">Agent Mode</option>
                            <option value="direct">Direct Mode</option>
                        </select>
                    </div>
                    
                    <div class="control-group">
                        <label for="provider">AI Provider:</label>
                        <select id="provider">
                            {% for provider in ai_providers %}
                            <option value="{{ provider }}">{{ provider.title() }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="control-group">
                        <label for="server">MCP Server:</label>
                        <select id="server">
                            <option value="">None</option>
                            {% for server in servers %}
                            <option value="{{ server }}">{{ server }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="control-group">
                        <button id="connect-btn" onclick="startSession()">Start Session</button>
                    </div>
                    
                    <div class="control-group">
                        <button onclick="clearChat()">Clear Chat</button>
                    </div>
                </div>
                
                <div id="status" class="status disconnected">
                    Disconnected
                </div>
            </div>
            
            <div class="chat-main">
                <div id="chat-messages" class="chat-messages">
                    <div class="message system">
                        Welcome to {{ title }}! Configure your settings and start a session to begin chatting.
                    </div>
                </div>
                
                <div class="chat-input">
                    <div class="input-group">
                        <input 
                            type="text" 
                            id="message-input" 
                            placeholder="Type your message..." 
                            onkeypress="handleKeyPress(event)"
                            disabled
                        >
                        <button id="send-btn" onclick="sendMessage()" disabled>Send</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Include marked.js for markdown parsing -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <!-- Include Prism.js for syntax highlighting -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script>
        let sessionId = null;
        let isConnecting = false;
        
        // Configure marked.js for security
        marked.setOptions({
            sanitize: false, // We'll handle sanitization manually
            breaks: true,   // Support line breaks
            gfm: true,      // GitHub Flavored Markdown
            tables: true,   // Enable tables
            smartLists: true, // Smart list handling
            smartypants: false // Disable smart quotes for simplicity
        });
        
        // Simple HTML sanitization function
        function sanitizeHtml(html) {
            const div = document.createElement('div');
            div.innerHTML = html;
            
            // Remove script tags and other potentially dangerous elements
            const scripts = div.querySelectorAll('script, iframe, object, embed');
            scripts.forEach(script => script.remove());
            
            // Remove javascript: links
            const links = div.querySelectorAll('a[href^="javascript:"]');
            links.forEach(link => link.removeAttribute('href'));
            
            return div.innerHTML;
        }
        
        async function startSession() {
            if (isConnecting) return;
            
            const mode = document.getElementById('mode').value;
            const provider = document.getElementById('provider').value;
            const server = document.getElementById('server').value;
            const connectBtn = document.getElementById('connect-btn');
            const status = document.getElementById('status');
            
            isConnecting = true;
            connectBtn.disabled = true;
            connectBtn.textContent = 'Connecting...';
            status.className = 'status connecting';
            status.textContent = 'Connecting...';
            
            try {
                const response = await fetch('/api/sessions', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ mode, provider, server })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    sessionId = data.session_id;
                    
                    status.className = 'status connected';
                    status.textContent = `Connected (${mode} mode)`;
                    
                    document.getElementById('message-input').disabled = false;
                    document.getElementById('send-btn').disabled = false;
                    
                    connectBtn.textContent = 'Disconnect';
                    connectBtn.onclick = disconnectSession;
                    
                    addMessage('system', `Session started in ${mode} mode${server ? ` with server: ${server}` : ''}${provider ? ` using ${provider}` : ''}`);
                } else {
                    throw new Error('Failed to start session');
                }
            } catch (error) {
                status.className = 'status disconnected';
                status.textContent = 'Connection failed';
                addMessage('system', 'Error starting session: ' + error.message);
            } finally {
                isConnecting = false;
                connectBtn.disabled = false;
                if (!sessionId) {
                    connectBtn.textContent = 'Start Session';
                }
            }
        }
        
        async function disconnectSession() {
            if (sessionId) {
                try {
                    await fetch(`/api/sessions/${sessionId}`, { method: 'DELETE' });
                } catch (error) {
                    console.error('Error disconnecting:', error);
                }
                sessionId = null;
            }
            
            const status = document.getElementById('status');
            const connectBtn = document.getElementById('connect-btn');
            
            status.className = 'status disconnected';
            status.textContent = 'Disconnected';
            
            document.getElementById('message-input').disabled = true;
            document.getElementById('send-btn').disabled = true;
            
            connectBtn.textContent = 'Start Session';
            connectBtn.onclick = startSession;
            
            addMessage('system', 'Session disconnected');
        }
        
        async function sendMessage() {
            const input = document.getElementById('message-input');
            const sendBtn = document.getElementById('send-btn');
            const message = input.value.trim();
            
            if (!message || !sessionId) return;
            
            addMessage('user', message);
            input.value = '';
            sendBtn.disabled = true;
            sendBtn.textContent = 'Sending...';
            
            // Add loading message
            const loadingId = 'loading-' + Date.now();
            addLoadingMessage(loadingId);
            
            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ session_id: sessionId, message })
                });
                
                // Remove loading message
                removeLoadingMessage(loadingId);
                
                if (response.ok) {
                    const data = await response.json();
                    addMessage('assistant', data.response);
                } else {
                    addMessage('system', 'Error processing message');
                }
            } catch (error) {
                removeLoadingMessage(loadingId);
                addMessage('system', 'Error: ' + error.message);
            } finally {
                sendBtn.disabled = false;
                sendBtn.textContent = 'Send';
            }
        }
        
        function addMessage(role, content) {
            const container = document.getElementById('chat-messages');
            const message = document.createElement('div');
            message.className = `message ${role}`;
            
            if (role === 'assistant') {
                // Parse markdown for assistant messages
                const markdownHtml = marked.parse(content);
                // Sanitize the HTML
                const sanitizedHtml = sanitizeHtml(markdownHtml);
                message.innerHTML = sanitizedHtml;
                
                // Apply syntax highlighting to code blocks
                message.querySelectorAll('pre code').forEach((block) => {
                    Prism.highlightElement(block);
                });
            } else {
                // Use plain text for user and system messages
                message.textContent = content;
            }
            
            container.appendChild(message);
            container.scrollTop = container.scrollHeight;
        }
        
        function addLoadingMessage(id) {
            const container = document.getElementById('chat-messages');
            const message = document.createElement('div');
            message.id = id;
            message.className = 'message assistant loading-message';
            message.innerHTML = 'Thinking<span class="loading-dots"></span>';
            container.appendChild(message);
            container.scrollTop = container.scrollHeight;
        }
        
        function removeLoadingMessage(id) {
            const message = document.getElementById(id);
            if (message) {
                message.remove();
            }
        }
        
        async function clearChat() {
            if (!sessionId) {
                // If no session, just clear the UI
                const container = document.getElementById('chat-messages');
                container.innerHTML = '<div class="message system">Chat cleared. Start a new session when ready.</div>';
                return;
            }
            
            try {
                // Clear the server-side conversation history
                const response = await fetch(`/api/sessions/${sessionId}/history`, { 
                    method: 'DELETE' 
                });
                
                if (response.ok) {
                    // Clear the UI
                    const container = document.getElementById('chat-messages');
                    container.innerHTML = '<div class="message system">Chat and history cleared. You can continue the conversation with a fresh context.</div>';
                } else {
                    throw new Error('Failed to clear history on server');
                }
            } catch (error) {
                console.error('Error clearing chat:', error);
                addMessage('system', 'Error clearing history: ' + error.message);
            }
        }
        
        function handleKeyPress(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                sendMessage();
            }
        }
        
        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            // Focus on input when ready
            document.getElementById('message-input').addEventListener('keypress', handleKeyPress);
        });
    </script>
</body>
</html>
