{% extends "base.html" %}

{% set active_page = 'chat' %}

{% block title %}Chat Research - Deep Research System{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/css/chat.css?v={{ version }}">
{% if session_id %}
<meta name="chat-session-id" content="{{ session_id }}">
{% endif %}
{% endblock %}

{% block content %}
<div class="ldr-page active" id="chat-page">
    <div class="ldr-chat-container">
        <!-- Chat Header -->
        <div class="ldr-chat-header">
            <div class="ldr-chat-header-left">
                <h1 id="chat-title">New Chat</h1>
                <button type="button" class="ldr-chat-edit-title" id="edit-title-btn" title="Edit title" aria-label="Edit chat title" style="display: none;">
                    <i class="fas fa-pencil-alt"></i>
                </button>
            </div>
            <div class="ldr-chat-header-right">
                <button type="button" class="ldr-btn ldr-btn-secondary ldr-btn-sm" id="new-chat-btn" title="Start new chat" aria-label="Start new chat">
                    <i class="fas fa-plus"></i>
                    <span>New Chat</span>
                </button>
                <button type="button" class="ldr-btn ldr-btn-secondary ldr-btn-sm" id="export-chat-btn" title="Export chat" aria-label="Export chat" style="display: none;">
                    <i class="fas fa-download"></i>
                </button>
            </div>
        </div>

        <!-- Messages Area -->
        <div class="ldr-chat-messages" id="chat-messages" role="log" aria-live="polite" aria-atomic="false" aria-label="Chat messages">
            <!-- Welcome screen shown when no messages -->
            <div class="ldr-chat-welcome" id="chat-welcome">
                <div class="ldr-chat-welcome-icon" aria-hidden="true">👋</div>
                <h2>What would you like to research?</h2>
                <p>Ask anything. Follow up to dig deeper. Every answer is grounded in sources.</p>
                <div class="ldr-chat-suggestions">
                    <button type="button" class="ldr-chat-suggestion" data-query="What are the latest developments in AI research?">
                        Latest AI developments
                    </button>
                    <button type="button" class="ldr-chat-suggestion" data-query="Compare renewable energy sources for home use">
                        Compare energy sources
                    </button>
                    <button type="button" class="ldr-chat-suggestion" data-query="What are effective strategies for improving sleep quality?">
                        Improve sleep quality
                    </button>
                    <button type="button" class="ldr-chat-suggestion" data-query="Explain quantum computing in simple terms">
                        Explain quantum computing
                    </button>
                </div>
            </div>

            <!-- Messages will be inserted here -->
        </div>

        <!-- Research Progress -->
        <div id="chat-progress-wrapper" style="display: none;" role="status" aria-live="polite" aria-atomic="false">
            <!-- Current Task/Milestone Display -->
            <div class="ldr-chat-task-container">
                <div class="ldr-chat-task-label">
                    <i class="fas fa-spinner fa-spin"></i>
                    <span id="chat-progress-label">Current Task:</span>
                </div>
                <div id="chat-current-task" class="ldr-chat-task-text" aria-labelledby="chat-progress-label">Starting research...</div>
                <button
                    type="button"
                    class="ldr-chat-stop-btn"
                    id="chat-stop-research-btn"
                    style="display: none;"
                    aria-label="Stop research"
                    title="Stop research"
                >
                    <i class="fas fa-stop"></i> Stop
                </button>
            </div>
            <!-- Log Panel -->
            {% include "components/log_panel.html" %}
        </div>

        <!-- Input Area -->
        <div class="ldr-chat-input-container">
            <div class="ldr-chat-input-wrapper">
                <textarea
                    id="chat-input"
                    placeholder="Ask a question..."
                    rows="1"
                    maxlength="10000"
                    aria-label="Chat message"
                ></textarea>
                <div class="ldr-chat-input-actions">
                    <button type="button" class="ldr-chat-send-btn" id="send-btn" disabled title="Send message" aria-label="Send message">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
            <div class="ldr-chat-input-hints">
                <span class="ldr-hint-item">
                    <kbd>Enter</kbd> to send
                </span>
                <span class="ldr-hint-item">
                    <kbd>Shift</kbd>+<kbd>Enter</kbd> for new line
                </span>
            </div>
        </div>
    </div>
</div>

<!-- Thinking indicator template -->
<template id="thinking-template">
    <div class="ldr-chat-message ldr-chat-message-assistant ldr-chat-message-thinking"
         role="status" aria-label="AI is thinking">
        <div class="ldr-chat-message-avatar">
            <i class="fas fa-robot"></i>
        </div>
        <div class="ldr-chat-message-content">
            <!-- Live reasoning preview: populated by handleProgressUpdate
                 when a phase='agent_reasoning' event arrives, hidden until
                 the agent produces its first reasoning text. Overwritten
                 (not appended) so only the current thought is visible. -->
            <div class="ldr-chat-thinking-text" hidden></div>
            <div class="ldr-chat-thinking-dots">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
</template>

<!-- Message template -->
<template id="message-template">
    <div class="ldr-chat-message">
        <div class="ldr-chat-message-avatar">
            <i class="fas fa-user"></i>
        </div>
        <div class="ldr-chat-message-content">
            <div class="ldr-chat-message-text"></div>
            <div class="ldr-chat-message-meta">
                <span class="ldr-chat-message-time"></span>
            </div>
        </div>
    </div>
</template>

{% endblock %}

{% block page_scripts %}
<!-- logpanel.js already loaded in base.html -->
<script src="/static/js/components/chat.js?v={{ version }}"></script>
{% endblock %}