{% extends "base.html" %}

{% block title %}Chat - CheddahBot{% endblock %}
{% block nav_chat_active %}active{% endblock %}

{% block content %}
<div class="chat-layout">
    <!-- Sidebar -->
    <aside class="chat-sidebar" id="chat-sidebar">
        <div class="sidebar-header">
            <h3>Agents</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()" aria-label="Close sidebar">&#x2715;</button>
        </div>
        <div class="agent-selector" id="agent-selector">
            {% for agent in agents %}
            <button
                class="agent-btn {% if agent.name == default_agent %}active{% endif %}"
                data-agent="{{ agent.name }}"
                onclick="switchAgent('{{ agent.name }}')"
            >{{ agent.display_name }}</button>
            {% endfor %}
        </div>

        <div class="sidebar-divider"></div>

        <button
            class="btn btn-new-chat"
            hx-post="/chat/new"
            hx-vals='{"agent_name": "{{ default_agent }}"}'
            hx-target="#chat-messages"
            hx-swap="innerHTML"
            onclick="this.setAttribute('hx-vals', JSON.stringify({agent_name: getActiveAgent()}))"
        >+ New Chat</button>

        <h3>History</h3>
        <div id="sidebar-conversations"
             hx-get="/chat/conversations?agent_name={{ default_agent }}"
             hx-trigger="load"
             hx-swap="innerHTML">
        </div>
    </aside>

    <!-- Mobile sidebar toggle + overlay -->
    <button class="sidebar-open-btn" onclick="toggleSidebar()" aria-label="Open sidebar">&#9776;</button>
    <div id="sidebar-overlay" class="sidebar-overlay" onclick="toggleSidebar()"></div>

    <!-- Chat area -->
    <div class="chat-main">
        <!-- Status bar -->
        <div class="status-bar">
            <span class="status-item">Model: <strong>{{ chat_model }}</strong></span>
            <span class="status-item">Exec: <strong class="{% if exec_available %}text-ok{% else %}text-err{% endif %}">{{ "OK" if exec_available else "N/A" }}</strong></span>
            <span class="status-item">ClickUp: <strong class="{% if clickup_enabled %}text-ok{% else %}text-err{% endif %}">{{ "ON" if clickup_enabled else "OFF" }}</strong></span>
        </div>

        <!-- Notification banner (populated by SSE) -->
        <div id="notification-banner" class="notification-banner" style="display:none;"></div>

        <!-- Messages -->
        <div class="chat-messages" id="chat-messages">
            <!-- Messages loaded here -->
        </div>

        <!-- Input area -->
        <form id="chat-form" class="chat-input-area"
              hx-post="/chat/send"
              hx-target="#chat-messages"
              hx-swap="beforeend"
              hx-encoding="multipart/form-data"
              hx-on::after-request="afterSend(event)">
            <input type="hidden" name="agent_name" id="input-agent-name" value="{{ default_agent }}">
            <input type="hidden" name="conv_id" id="input-conv-id" value="">
            <div class="input-row">
                <label class="file-upload-btn" title="Attach files">
                    &#x1f4ce;
                    <input type="file" name="files" multiple style="display:none;" onchange="showFileNames(this)">
                </label>
                <textarea name="text" id="chat-input" rows="1" placeholder="Type a message..."
                          onkeydown="handleKeydown(event)" oninput="autoResize(this)"></textarea>
                <button type="submit" class="send-btn" title="Send">&#x27A4;</button>
            </div>
            <div id="file-preview" class="file-preview" style="display:none;"></div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Initialize session state
    const SESSION_KEY = 'cheddahbot_session';
    let session = JSON.parse(localStorage.getItem(SESSION_KEY) || '{}');
    if (!session.agent_name) session.agent_name = '{{ default_agent }}';

    // Restore session on load
    document.addEventListener('DOMContentLoaded', function() {
        if (session.agent_name) {
            setActiveAgent(session.agent_name);
        }
        if (session.conv_id) {
            loadConversation(session.conv_id);
        }
        // Load conversations for sidebar
        refreshSidebar();
    });

    function saveSession() {
        localStorage.setItem(SESSION_KEY, JSON.stringify(session));
    }
</script>
{% endblock %}