<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ display_name }}</title>
    <meta name="description" content="{{ description }}">
    <style>
        :root {
            --bg-primary: #0f0f0f;
            --bg-secondary: #1a1a1a;
            --bg-tertiary: #252525;
            --text-primary: #e8e8e8;
            --text-secondary: #a0a0a0;
            --accent: #00d4aa;
            --accent-dim: #00a080;
            --user-bg: #1e3a5f;
            --bot-bg: #2d2d2d;
            --error: #ff6b6b;
            --border: #333;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
            background: var(--bg-primary);
            color: var(--text-primary);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* Header */
        .header {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .header-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--accent), var(--accent-dim));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .header-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        .header-subtitle {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .status-indicator {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--error);
            transition: background 0.3s;
        }

        .status-dot.connected {
            background: var(--accent);
        }

        /* Chat Container */
        .chat-container {
            flex: 1;
            overflow-y: auto;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* Messages */
        .message {
            max-width: 85%;
            padding: 1rem 1.25rem;
            border-radius: 12px;
            line-height: 1.6;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .message.user {
            align-self: flex-end;
            background: var(--user-bg);
            border-bottom-right-radius: 4px;
        }

        .message.bot {
            align-self: flex-start;
            background: var(--bot-bg);
            border-bottom-left-radius: 4px;
        }

        .message.error {
            background: rgba(255, 107, 107, 0.1);
            border: 1px solid var(--error);
            color: var(--error);
        }

        .message.progress {
            align-self: flex-start;
            background: transparent;
            color: var(--text-secondary);
            font-size: 0.85rem;
            padding: 0.5rem 1rem;
            font-style: italic;
        }

        .message-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .message.user .message-label {
            text-align: right;
        }

        .message-content {
            white-space: pre-wrap;
            word-break: break-word;
        }

        .message-content code {
            background: rgba(0, 212, 170, 0.1);
            padding: 0.15rem 0.4rem;
            border-radius: 4px;
            font-size: 0.9em;
        }

        .message-content pre {
            background: var(--bg-primary);
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 0.5rem 0;
        }

        /* Typing indicator */
        .typing-indicator {
            display: flex;
            gap: 4px;
            padding: 1rem;
        }

        .typing-indicator span {
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            animation: bounce 1.4s infinite;
        }

        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes bounce {
            0%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-6px); }
        }

        /* Input Area */
        .input-area {
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            padding: 1rem 1.5rem;
        }

        .input-wrapper {
            display: flex;
            gap: 0.75rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .input-field {
            flex: 1;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.875rem 1rem;
            color: var(--text-primary);
            font-family: inherit;
            font-size: 0.95rem;
            resize: none;
            outline: none;
            transition: border-color 0.2s;
        }

        .input-field:focus {
            border-color: var(--accent);
        }

        .input-field::placeholder {
            color: var(--text-secondary);
        }

        .send-button {
            background: var(--accent);
            border: none;
            border-radius: 10px;
            padding: 0 1.5rem;
            color: var(--bg-primary);
            font-family: inherit;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .send-button:hover:not(:disabled) {
            background: var(--accent-dim);
            transform: translateY(-1px);
        }

        .send-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Welcome message */
        .welcome {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-secondary);
        }

        .welcome h2 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .welcome p {
            font-size: 0.9rem;
        }

        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-primary);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-secondary);
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header-icon">🤖</div>
        <div>
            <div class="header-title" id="chatTitle">{{ display_name }}</div>
            <div class="header-subtitle">{{ description }}</div>
        </div>
        <div class="status-indicator">
            <div class="status-dot" id="statusDot"></div>
            <span id="statusText">Disconnected</span>
        </div>
    </header>

    <div class="chat-container" id="chatContainer">
        <div class="welcome">
            <h2>Welcome to {{ display_name }}!</h2>
            <p>Type a message below to start chatting.</p>
        </div>
    </div>

    <div class="input-area">
        <div class="input-wrapper">
            <textarea
                class="input-field"
                id="messageInput"
                placeholder="Type your message..."
                rows="1"
                disabled
            ></textarea>
            <button class="send-button" id="sendButton" disabled>
                Send ↵
            </button>
        </div>
    </div>

    <script>
        const chatContainer = document.getElementById('chatContainer');
        const messageInput = document.getElementById('messageInput');
        const sendButton = document.getElementById('sendButton');
        const statusDot = document.getElementById('statusDot');
        const statusText = document.getElementById('statusText');

        let ws = null;
        let isProcessing = false;

        function connect() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/ws`;
            
            ws = new WebSocket(wsUrl);

            ws.onopen = () => {
                statusDot.classList.add('connected');
                statusText.textContent = 'Connected';
                messageInput.disabled = false;
                sendButton.disabled = false;
                messageInput.focus();
            };

            ws.onclose = () => {
                statusDot.classList.remove('connected');
                statusText.textContent = 'Disconnected';
                messageInput.disabled = true;
                sendButton.disabled = true;
                // Reconnect after 3 seconds
                setTimeout(connect, 3000);
            };

            ws.onerror = (error) => {
                console.error('WebSocket error:', error);
                addMessage('Connection error. Retrying...', 'error');
            };

            ws.onmessage = (event) => {
                const data = JSON.parse(event.data);
                handleMessage(data);
            };
        }

        function handleMessage(data) {
            switch (data.type) {
                case 'user_message':
                    // Already added when sending
                    break;
                case 'progress':
                    updateProgress(data.content);
                    break;
                case 'bot_response':
                    removeTypingIndicator();
                    removeProgress();
                    addMessage(data.content, 'bot');
                    break;
                case 'complete':
                    removeTypingIndicator();
                    removeProgress();
                    isProcessing = false;
                    sendButton.disabled = false;
                    messageInput.disabled = false;
                    messageInput.focus();
                    break;
                case 'error':
                    removeTypingIndicator();
                    removeProgress();
                    addMessage(data.content, 'error');
                    isProcessing = false;
                    sendButton.disabled = false;
                    messageInput.disabled = false;
                    break;
            }
        }

        function addMessage(content, type) {
            // Remove welcome message if present
            const welcome = chatContainer.querySelector('.welcome');
            if (welcome) welcome.remove();

            const message = document.createElement('div');
            message.className = `message ${type}`;
            
            const label = type === 'user' ? 'You' : type === 'error' ? 'Error' : 'Assistant';
            
            message.innerHTML = `
                <div class="message-label">${label}</div>
                <div class="message-content">${escapeHtml(content)}</div>
            `;
            
            chatContainer.appendChild(message);
            scrollToBottom();
        }

        function addTypingIndicator() {
            const indicator = document.createElement('div');
            indicator.className = 'typing-indicator';
            indicator.id = 'typingIndicator';
            indicator.innerHTML = '<span></span><span></span><span></span>';
            chatContainer.appendChild(indicator);
            scrollToBottom();
        }

        function removeTypingIndicator() {
            const indicator = document.getElementById('typingIndicator');
            if (indicator) indicator.remove();
        }

        function updateProgress(content) {
            removeProgress();
            const progress = document.createElement('div');
            progress.className = 'message progress';
            progress.id = 'progressMessage';
            progress.innerHTML = `<div class="message-content">${escapeHtml(content)}</div>`;
            chatContainer.appendChild(progress);
            scrollToBottom();
        }

        function removeProgress() {
            const progress = document.getElementById('progressMessage');
            if (progress) progress.remove();
        }

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

        function scrollToBottom() {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        function sendMessage() {
            const message = messageInput.value.trim();
            if (!message || isProcessing || !ws || ws.readyState !== WebSocket.OPEN) return;

            isProcessing = true;
            sendButton.disabled = true;
            messageInput.disabled = true;

            addMessage(message, 'user');
            addTypingIndicator();

            ws.send(JSON.stringify({ message }));
            messageInput.value = '';
            adjustTextareaHeight();
        }

        function adjustTextareaHeight() {
            messageInput.style.height = 'auto';
            messageInput.style.height = Math.min(messageInput.scrollHeight, 150) + 'px';
        }

        // Event listeners
        sendButton.addEventListener('click', sendMessage);

        messageInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        messageInput.addEventListener('input', adjustTextareaHeight);

        // Connect on load
        connect();
    </script>
</body>
</html>

