{% extends "base.html" %}

{% block title %}FaultRay - Infrastructure Chat{% endblock %}
{% block page_title %}Infrastructure Chat{% endblock %}
{% block page_subtitle %}<span class="page-subtitle">Ask questions about your infrastructure</span>{% endblock %}

{% block head %}
<style>
    .chat-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 140px);
        max-width: 900px;
        margin: 0 auto;
        background: var(--card-bg, #161b22);
        border-radius: 12px;
        border: 1px solid var(--border-color, #30363d);
        overflow: hidden;
    }

    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        scroll-behavior: smooth;
    }

    .chat-message {
        display: flex;
        gap: 12px;
        max-width: 85%;
        animation: fadeIn 0.3s ease-in;
    }

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

    .chat-message.user {
        align-self: flex-end;
        flex-direction: row-reverse;
    }

    .chat-message.bot {
        align-self: flex-start;
    }

    .chat-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        flex-shrink: 0;
    }

    .chat-avatar.user-avatar {
        background: #238636;
        color: white;
    }

    .chat-avatar.bot-avatar {
        background: #1f6feb;
        color: white;
    }

    .chat-bubble {
        padding: 12px 16px;
        border-radius: 12px;
        line-height: 1.6;
        font-size: 14px;
    }

    .chat-message.user .chat-bubble {
        background: #238636;
        color: #f0f0f0;
        border-bottom-right-radius: 4px;
    }

    .chat-message.bot .chat-bubble {
        background: #21262d;
        color: #c9d1d9;
        border: 1px solid #30363d;
        border-bottom-left-radius: 4px;
    }

    .chat-bubble table {
        width: 100%;
        border-collapse: collapse;
        margin: 8px 0;
        font-size: 13px;
    }

    .chat-bubble table th,
    .chat-bubble table td {
        border: 1px solid #30363d;
        padding: 6px 10px;
        text-align: left;
    }

    .chat-bubble table th {
        background: #161b22;
        font-weight: 600;
        color: #58a6ff;
    }

    .chat-bubble table td {
        color: #c9d1d9;
    }

    .chat-bubble strong {
        color: #58a6ff;
    }

    .chat-bubble code {
        background: #161b22;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 13px;
        color: #f0883e;
    }

    .chat-bubble ul, .chat-bubble ol {
        padding-left: 20px;
        margin: 4px 0;
    }

    .chat-bubble li {
        margin: 2px 0;
    }

    /* Suggestions */
    .chat-suggestions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .chat-suggestion-chip {
        background: #1f6feb22;
        border: 1px solid #1f6feb;
        color: #58a6ff;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .chat-suggestion-chip:hover {
        background: #1f6feb44;
        transform: translateY(-1px);
    }

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

    .typing-indicator span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #484f58;
        animation: typing 1.4s infinite;
    }

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

    @keyframes typing {
        0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
        30% { opacity: 1; transform: scale(1); }
    }

    /* Input area */
    .chat-input-area {
        padding: 16px 24px;
        border-top: 1px solid var(--border-color, #30363d);
        background: #0d1117;
    }

    .chat-input-form {
        display: flex;
        gap: 12px;
        align-items: flex-end;
    }

    .chat-input-wrapper {
        flex: 1;
        position: relative;
    }

    .chat-input {
        width: 100%;
        padding: 12px 16px;
        background: #161b22;
        border: 1px solid #30363d;
        border-radius: 8px;
        color: #c9d1d9;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s;
        resize: none;
        font-family: inherit;
    }

    .chat-input:focus {
        border-color: #1f6feb;
    }

    .chat-input::placeholder {
        color: #484f58;
    }

    .chat-send-btn {
        padding: 12px 20px;
        background: #1f6feb;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .chat-send-btn:hover {
        background: #388bfd;
    }

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

    /* Welcome state */
    .chat-welcome {
        text-align: center;
        padding: 48px 24px;
        color: #8b949e;
    }

    .chat-welcome h2 {
        color: #c9d1d9;
        margin-bottom: 8px;
        font-size: 24px;
    }

    .chat-welcome p {
        margin-bottom: 24px;
        font-size: 15px;
    }
</style>
{% endblock %}

{% block content %}
<div class="chat-container" id="chatApp">
    <div class="chat-messages" id="chatMessages">
        <!-- Welcome message -->
        <div class="chat-welcome" id="chatWelcome">
            <h2>Infrastructure Chat</h2>
            <p>Ask questions about your infrastructure in natural language.</p>
            <div class="chat-suggestions" id="initialSuggestions">
                {% for suggestion in suggestions %}
                <button class="chat-suggestion-chip"
                        onclick="sendSuggestion(this.textContent)">{{ suggestion }}</button>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="chat-input-area">
        <form class="chat-input-form" onsubmit="sendMessage(event)">
            <div class="chat-input-wrapper">
                <input type="text"
                       class="chat-input"
                       id="chatInput"
                       placeholder="Ask about your infrastructure..."
                       autocomplete="off"
                       autofocus>
            </div>
            <button type="submit" class="chat-send-btn" id="sendBtn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="22" y1="2" x2="11" y2="13"/>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                </svg>
                Send
            </button>
        </form>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const chatMessages = document.getElementById('chatMessages');
const chatInput = document.getElementById('chatInput');
const sendBtn = document.getElementById('sendBtn');
const chatWelcome = document.getElementById('chatWelcome');

// Simple markdown-to-HTML converter
function renderMarkdown(text) {
    // Tables
    text = text.replace(/\n\|(.+)\|\n\|[-| ]+\|\n((?:\|.+\|\n?)*)/g, function(match, header, body) {
        const headers = header.split('|').filter(h => h.trim());
        let html = '<table><thead><tr>';
        headers.forEach(h => { html += '<th>' + h.trim() + '</th>'; });
        html += '</tr></thead><tbody>';
        body.trim().split('\n').forEach(row => {
            const cells = row.split('|').filter(c => c.trim());
            html += '<tr>';
            cells.forEach(c => { html += '<td>' + c.trim() + '</td>'; });
            html += '</tr>';
        });
        html += '</tbody></table>';
        return html;
    });

    // Bold
    text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    // Italic
    text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
    // Inline code
    text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
    // Numbered lists
    text = text.replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>');
    // Bullet lists
    text = text.replace(/^[-*]\s+(.+)$/gm, '<li>$1</li>');
    // Wrap consecutive <li> in <ul>
    text = text.replace(/((?:<li>.+<\/li>\n?)+)/g, '<ul>$1</ul>');
    // Line breaks
    text = text.replace(/\n\n/g, '<br><br>');
    text = text.replace(/\n/g, '<br>');

    return text;
}

function addMessage(content, isUser, suggestions) {
    // Hide welcome on first message
    if (chatWelcome) {
        chatWelcome.style.display = 'none';
    }

    const msgDiv = document.createElement('div');
    msgDiv.className = 'chat-message ' + (isUser ? 'user' : 'bot');

    const avatar = document.createElement('div');
    avatar.className = 'chat-avatar ' + (isUser ? 'user-avatar' : 'bot-avatar');
    avatar.textContent = isUser ? 'U' : 'F';

    const bubble = document.createElement('div');
    bubble.className = 'chat-bubble';

    if (isUser) {
        bubble.textContent = content;
    } else {
        bubble.innerHTML = renderMarkdown(content);
    }

    msgDiv.appendChild(avatar);
    msgDiv.appendChild(bubble);
    chatMessages.appendChild(msgDiv);

    // Add suggestions if provided
    if (!isUser && suggestions && suggestions.length > 0) {
        const sugDiv = document.createElement('div');
        sugDiv.className = 'chat-message bot';
        sugDiv.innerHTML = '<div class="chat-avatar bot-avatar" style="visibility:hidden">F</div>';

        const sugContainer = document.createElement('div');
        sugContainer.className = 'chat-suggestions';
        suggestions.forEach(s => {
            const chip = document.createElement('button');
            chip.className = 'chat-suggestion-chip';
            chip.textContent = s;
            chip.onclick = () => sendSuggestion(s);
            sugContainer.appendChild(chip);
        });
        sugDiv.appendChild(sugContainer);
        chatMessages.appendChild(sugDiv);
    }

    scrollToBottom();
}

function addTypingIndicator() {
    const msgDiv = document.createElement('div');
    msgDiv.className = 'chat-message bot';
    msgDiv.id = 'typingIndicator';

    const avatar = document.createElement('div');
    avatar.className = 'chat-avatar bot-avatar';
    avatar.textContent = 'F';

    const bubble = document.createElement('div');
    bubble.className = 'chat-bubble';
    bubble.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>';

    msgDiv.appendChild(avatar);
    msgDiv.appendChild(bubble);
    chatMessages.appendChild(msgDiv);
    scrollToBottom();
}

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

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

async function sendMessage(event) {
    if (event) event.preventDefault();

    const question = chatInput.value.trim();
    if (!question) return;

    // Add user message
    addMessage(question, true);
    chatInput.value = '';
    sendBtn.disabled = true;

    // Show typing indicator
    addTypingIndicator();

    try {
        const response = await fetch('/api/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ question: question }),
        });

        removeTypingIndicator();

        if (response.ok) {
            const data = await response.json();
            addMessage(data.text, false, data.suggestions);
        } else {
            addMessage('Sorry, there was an error processing your question. Please try again.', false);
        }
    } catch (err) {
        removeTypingIndicator();
        addMessage('Connection error. Please check that the server is running.', false);
    }

    sendBtn.disabled = false;
    chatInput.focus();
}

function sendSuggestion(text) {
    chatInput.value = text;
    sendMessage(null);
}

// Handle Enter key
chatInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage(null);
    }
});
</script>
{% endblock %}