@page "/chatroom_base/{typellm:int}"

<div class="chatroom-container">

    <!-- Liste des conversations -->
    <div class="conversation-list">
        <button class="btn btn-primary" @onclick="CreateConversation">
            Nouvelle conversation
        </button>

        <ul>
            @foreach (var conv in Conversations)
            {
                <li @onclick="() => SelectConversation(conv.Id)"
                    class="@(conv.Id == SelectedConversationId ? "selected" : "")">
                    @conv.Title
                </li>
            }
        </ul>
    </div>

    <!-- Zone principale -->
    <div class="chat-area">
        @if (SelectedConversation != null)
        {
            <h3>@SelectedConversation.Title</h3>

            <div class="messages">
                @foreach (var msg in Messages)
                {
                    <div class="message-row @(msg.IsUser ? "user" : "assistant")">
                        <div class="avatar @(msg.IsUser ? "avatar-user" : "avatar-assistant")">
                            @(msg.IsUser ? "👤" : "🤖")
                        </div>

                        <div class="bubble @(msg.IsUser ? "bubble-user" : "bubble-assistant")">
                            @msg.Text
                        </div>
                    </div>
                }
            </div>

            <div class="chat-input">
                <textarea @bind="CurrentInput"></textarea>

                <div class="options">
                    <select @bind="SelectedMode" disabled>
                        <option value="llm">LLM</option>
                        <option value="rag">RAG</option>
                        <option value="code">Code</option>
                        <option value="image">Image</option>
                    </select>

                    <select @bind="SelectedModel" hidden>
                        @foreach (var model in OllamaModels)
                        {
                            <option value="@model">@model</option>
                        }
                    </select>

                    <label for="SelectedDomain" class="col-form-label" hidden="@hiddenDomain">Domaine RAG :</label>
                    <select @bind="SelectedDomain" hidden="@hiddenDomain">
                        <option value="">(Aucun domaine)</option>
                        @foreach (var d in RagDomains)
                        {
                            <option value="@d">@d</option>
                        }
                    </select>

                    <label for="IsWithHistorique" class="col-form-label">Inclure l'historique ? :</label>
                    <input id="IsWithHistorique" @bind="IsWithHistorique" type="checkbox" class="form-check-input" />
                </div>
                <div class="document-upload">
                    <InputFile OnChange="UploadDocuments" multiple />

                    @if (UploadedDocuments.Any())
                    {
                        <div class="doc-list">
                            @foreach (var doc in UploadedDocuments)
                            {
                                <div class="doc-item">
                                    <span>@doc.FileName (@(doc.Bytes.Length / 1024) Ko)</span>
                                    <button class="btn btn-sm btn-danger" @onclick="() => RemoveDocument(doc)">X</button>
                                </div>
                            }
                        </div>
                    }
                </div>
                <button class="btn btn-primary" @onclick="SendMessage">Envoyer</button>
            </div>
        }
        else
        {
            <p>Sélectionne ou crée une conversation.</p>
        }
    </div>
</div>

