<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="jb_ai_assistant.AiChat">
        <div class="o_ai_chat o_action" t-ref="hub" t-att-style="chatStyle">
            <!-- Left ~10%: new chat + conversation history -->
            <aside class="o_ai_chat_col o_ai_chat_col--left d-flex flex-column">
                <div class="o_ai_chat_sidebar_header p-3">
                    <button class="btn btn-primary w-100" t-on-click="onNewChat">
                        <i class="fa fa-plus me-1"/> New chat
                    </button>
                </div>
                <div class="o_ai_chat_sidebar_user px-3 pb-2 text-muted small">
                    <span t-esc="state.userName"/>
                    <span class="mx-1">·</span>
                    <span t-esc="state.botName"/>
                </div>
                <div class="o_ai_chat_history flex-grow-1 overflow-auto px-2">
                    <t t-if="state.isLoading">
                        <div class="text-center text-muted p-3">Loading...</div>
                    </t>
                    <t t-else="">
                        <t t-foreach="state.conversations" t-as="conv" t-key="conv.id">
                            <div t-attf-class="o_ai_chat_history_item #{state.activeConversationId === conv.id ? 'active' : ''}"
                                 t-on-click="() => this.selectConversation(conv.id)">
                                <span class="o_ai_chat_history_title text-truncate" t-esc="conv.name"/>
                                <button class="btn btn-link btn-sm o_ai_chat_delete p-0"
                                        title="Delete"
                                        t-on-click="(ev) => this.onDeleteConversation(ev, conv.id)">
                                    <i class="fa fa-trash-o"/>
                                </button>
                            </div>
                        </t>
                        <t t-if="!state.conversations.length">
                            <div class="text-muted small p-3">No chats yet. Start a new conversation.</div>
                        </t>
                    </t>
                </div>
            </aside>

            <div class="o_ai_chat_resize_handle"
                 t-att-class="state.isResizing === 'left' ? 'o_ai_chat_resize_handle--active' : ''"
                 t-on-mousedown="(ev) => this.onResizeStart('left', ev)"
                 title="Drag to resize panels"/>

            <!-- Centre ~80%: active chat -->
            <main class="o_ai_chat_col o_ai_chat_col--center d-flex flex-column">
                <header class="o_ai_chat_header d-flex align-items-center justify-content-between px-3 py-2 border-bottom">
                    <div class="d-flex align-items-center gap-2 min-w-0">
                        <h5 class="mb-0" t-esc="state.botName"/>
                        <t t-if="activeConversation">
                            <span class="text-muted">—</span>
                            <span class="text-muted text-truncate o_ai_chat_header_title" t-esc="activeConversation.name"/>
                        </t>
                    </div>
                    <div class="o_ai_chat_model_select" t-if="state.models.length">
                        <select class="form-select form-select-sm"
                                t-att-value="state.selectedModelId"
                                t-on-change="onModelChange">
                            <t t-foreach="state.models" t-as="model" t-key="model.id">
                                <option t-att-value="model.id" t-esc="model.name"/>
                            </t>
                        </select>
                    </div>
                </header>

                <t t-if="!state.apiConfigured">
                    <div class="alert alert-warning m-3 mb-0">
                        OpenAI API key is not configured. Ask your administrator to set it in Settings → AI Assistant.
                    </div>
                </t>

                <div class="o_ai_chat_messages flex-grow-1 overflow-auto p-3" t-ref="messages">
                    <t t-if="!state.messages.length and !state.isSending">
                        <div class="o_ai_chat_welcome text-center text-muted mt-5">
                            <i class="fa fa-comments-o fa-3x mb-3 d-block"/>
                            <h4 t-esc="welcomeTitle"/>
                            <p>Your conversations are private. Only you (and admins for support) can see them.</p>
                        </div>
                    </t>
                    <t t-foreach="state.messages" t-as="msg" t-key="msg.id">
                        <div t-attf-class="o_ai_chat_message o_ai_chat_message_#{msg.role}"
                             t-att-data-message-id="msg.id">
                            <div class="o_ai_chat_message_role">
                                <t t-if="msg.role === 'user'">You</t>
                                <t t-else="" t-esc="state.botName"/>
                            </div>
                            <div class="o_ai_chat_message_body" t-esc="msg.body"/>
                        </div>
                    </t>
                    <t t-if="state.isSending">
                        <div class="o_ai_chat_message o_ai_chat_message_assistant">
                            <div class="o_ai_chat_message_role" t-esc="state.botName"/>
                            <div class="o_ai_chat_message_body o_ai_chat_typing">
                                <span class="dot"/> <span class="dot"/> <span class="dot"/>
                            </div>
                        </div>
                    </t>
                </div>

                <footer class="o_ai_chat_composer border-top p-3">
                    <div class="d-flex gap-2 align-items-end">
                        <textarea class="form-control o_ai_chat_input"
                                  rows="2"
                                  placeholder="Message your assistant..."
                                  t-att-disabled="state.isSending"
                                  t-model="state.composerText"
                                  t-on-keydown="onComposerKeydown"/>
                        <button class="btn btn-primary o_ai_chat_send"
                                t-att-disabled="state.isSending or !state.composerText.trim()"
                                t-on-click="onSend">
                            <i class="fa fa-paper-plane"/>
                        </button>
                    </div>
                </footer>
            </main>

            <div class="o_ai_chat_resize_handle"
                 t-att-class="state.isResizing === 'right' ? 'o_ai_chat_resize_handle--active' : ''"
                 t-on-mousedown="(ev) => this.onResizeStart('right', ev)"
                 title="Drag to resize panels"/>

            <!-- Right ~10%: artifacts, files, chat timeline -->
            <aside class="o_ai_chat_col o_ai_chat_col--right d-flex flex-column">
                <div class="o_ai_chat_panel_section">
                    <div class="o_ai_chat_panel_title">
                        <i class="fa fa-bookmark me-1"/> Session memory
                    </div>
                    <t t-if="!hasActiveChat">
                        <div class="o_ai_chat_panel_empty text-muted small">
                            Start a chat to add persistent notes for this session.
                        </div>
                    </t>
                    <t t-else="">
                        <textarea class="form-control form-control-sm o_ai_chat_memory_input"
                                  rows="4"
                                  placeholder="Facts, preferences, and context for this chat..."
                                  t-model="state.sessionMemory"/>
                        <button type="button"
                                class="btn btn-sm btn-outline-primary mt-2 w-100"
                                t-att-disabled="state.isSavingMemory"
                                t-on-click="onSaveMemory">
                            <t t-if="state.isSavingMemory">Saving...</t>
                            <t t-else="">Save memory</t>
                        </button>
                    </t>
                </div>

                <div class="o_ai_chat_panel_section">
                    <div class="o_ai_chat_panel_title">
                        <i class="fa fa-magic me-1"/> Artifacts
                    </div>
                    <div class="o_ai_chat_panel_empty text-muted small">
                        No artifacts yet for this chat.
                    </div>
                </div>

                <div class="o_ai_chat_panel_section">
                    <div class="o_ai_chat_panel_title">
                        <i class="fa fa-paperclip me-1"/> Files
                    </div>
                    <div class="o_ai_chat_panel_empty text-muted small">
                        No files uploaded yet.
                    </div>
                </div>

                <div class="o_ai_chat_panel_section o_ai_chat_panel_section--grow">
                    <div class="o_ai_chat_panel_title">
                        <i class="fa fa-history me-1"/> This chat
                    </div>
                    <t t-if="!hasActiveChat">
                        <div class="o_ai_chat_panel_empty text-muted small">
                            Select or start a chat to see its timeline.
                        </div>
                    </t>
                    <t t-elif="!state.messages.length">
                        <div class="o_ai_chat_panel_empty text-muted small">
                            No messages in this chat yet.
                        </div>
                    </t>
                    <t t-else="">
                        <div class="o_ai_chat_timeline flex-grow-1 overflow-auto">
                            <t t-foreach="state.messages" t-as="msg" t-key="msg.id">
                                <button type="button"
                                        class="o_ai_chat_timeline_item"
                                        t-on-click="() => this.onTimelineClick(msg.id)">
                                    <span class="o_ai_chat_timeline_role">
                                        <t t-if="msg.role === 'user'">You</t>
                                        <t t-else="" t-esc="state.botName"/>
                                    </span>
                                    <span class="o_ai_chat_timeline_preview text-truncate" t-esc="messagePreview(msg.body)"/>
                                </button>
                            </t>
                        </div>
                    </t>
                </div>
            </aside>
        </div>
    </t>

</templates>
