{% extends "v3/base.html" %}

{% block content %}
<!-- Feuille de style isolee du chat (variables heritees de v3.css) -->
<link rel="stylesheet" href="{{ url_for('static', filename='chat.css') }}?v={{ asset_v }}">

<!-- data-artifacts-enabled : expose le flag jinja a chat.js sans script inline.
     La CSP globale autorise encore 'unsafe-inline', mais ce fichier n'utilise
     aucun handler inline par discipline (durcissement CSP prevu). -->
<div class="chat-wrap" data-artifacts-enabled="{{ 'true' if artifacts_enabled else 'false' }}">
    <!-- Colonne gauche : liste des conversations -->
    <aside class="chat-convs" id="chat-convs">
        <div class="chat-convs-head">
            <button class="btn btn-primary btn-sm chat-new-btn" id="chat-new-btn" type="button">
                + Nouvelle conversation
            </button>
        </div>
        <div class="chat-convs-list" id="conv-list">
            <!-- rempli par chat.js (groupes Aujourd'hui / Hier / Avant) -->
            <div class="chat-convs-empty" id="conv-empty">Aucune conversation.</div>
        </div>
    </aside>

    <!-- Colonne droite : entete (modele + reflexion) + messages + saisie -->
    <section class="chat-main">
        <!-- Controles de conversation : choix du modele + bascule reflexion.
             Memorises par conversation cote JS et envoyes a chaque message. -->
        <header class="chat-header" id="chat-header">
            <button type="button" class="chat-icon-btn chat-convs-toggle" id="chat-convs-toggle"
                aria-controls="chat-convs" aria-expanded="true"
                aria-label="Afficher ou masquer les conversations">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><line x1="9" y1="4" x2="9" y2="20"/></svg>
            </button>
            <label class="chat-model">
                <span class="chat-model-label">Modele</span>
                <select id="chat-model-select" class="chat-model-select" aria-label="Modele de reponse">
                    <option value="small">Rapide</option>
                    <option value="medium">Approfondi</option>
                </select>
            </label>
            <label class="chat-think" title="Activer la reflexion approfondie">
                <input type="checkbox" id="chat-think-toggle" class="chat-think-input">
                <span class="chat-think-track"><span class="chat-think-thumb"></span></span>
                <span class="chat-think-text">Reflexion</span>
            </label>
            <label class="chat-think" title="Autoriser la recherche internet">
                <input type="checkbox" id="chat-web-toggle" class="chat-think-input">
                <span class="chat-think-track"><span class="chat-think-thumb"></span></span>
                <span class="chat-think-text">Web</span>
            </label>
            <!-- Selecteur de projet (parametrage actif de la conversation).
                 Masque proprement si GET /api/chat/projects echoue (backend non merge). -->
            <label class="chat-project" id="chat-project-field" hidden>
                <span class="chat-project-label">Projet</span>
                <select id="chat-project-select" class="chat-project-select"
                        aria-label="Projet de la conversation">
                    <option value="">Aucun projet</option>
                </select>
            </label>
            <!-- (Badge projet actif retiré : faisait doublon avec le sélecteur + élargissait le header.) -->
            <!-- Lancement explicite du script du projet (mode guide, Cycle 1).
                 Visible seulement si le projet de la conversation a un script. -->
            <button class="btn btn-primary btn-sm chat-run-btn" id="chat-run-btn"
                    type="button" hidden></button>
        </header>

        <div class="chat-messages" id="chat-messages">
            <div class="chat-welcome" id="chat-welcome">
                <h2>Assistant IA</h2>
                <p>Posez une question, redigez un document, ou demandez une action a un agent.</p>
                <div class="chat-suggestions">
                    <button type="button" class="chat-suggestion"
                            data-suggestion="Resume-moi les points cles de ce texte : ">Resumer un texte</button>
                    <button type="button" class="chat-suggestion"
                            data-suggestion="Ecris un mail professionnel pour ">Rediger un mail</button>
                    <button type="button" class="chat-suggestion"
                            data-suggestion="Cherche des informations sur ">Rechercher</button>
                    <button type="button" class="chat-suggestion"
                            data-suggestion="Explique-moi ce bloc de code : ">Expliquer du code</button>
                </div>
            </div>
        </div>

        <!-- Vignettes des images jointes (collees ou choisies), au-dessus de la saisie. -->
        <div class="chat-attach-previews" id="chat-attach-previews" hidden></div>

        <!-- Banniere "mode guide" : pendant l'execution d'un script, la saisie libre
             est desactivee ; l'utilisateur repond via les briques du formulaire.
             Le bouton Annuler ressort du mode guide. -->
        <div class="chat-guided-bar" id="chat-guided-bar" hidden>
            <span class="chat-guided-dot" aria-hidden="true"></span>
            <span class="chat-guided-text">Mode guide : repondez via le formulaire ci-dessus.</span>
            <button type="button" class="btn btn-secondary btn-sm chat-guided-cancel"
                    id="chat-guided-cancel">Annuler</button>
        </div>

        <form class="chat-input-bar" id="chat-form" autocomplete="off">
            <input type="file" id="chat-file-input" accept="image/*" multiple hidden>
            <button type="button" class="chat-icon-btn" id="chat-attach-btn"
                    title="Joindre une image (ou coller depuis le presse-papier)"
                    aria-label="Joindre une image">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
                </svg>
            </button>
            <textarea id="chat-input" class="chat-input" rows="1"
                      placeholder="Ecrivez votre message... (Entree pour envoyer, Maj+Entree pour un retour a la ligne)"
                      aria-label="Message"></textarea>
            <button type="button" class="chat-icon-btn" id="chat-mic-btn"
                    title="Dicter" aria-label="Dicter">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                    <line x1="12" x2="12" y1="19" y2="22"/>
                </svg>
            </button>
            <button type="submit" class="btn btn-primary chat-send-btn" id="chat-send-btn"
                    aria-label="Envoyer">Envoyer</button>
        </form>
    </section>

    <!-- Panneau lateral "canvas" : affiche un artefact genere par le chat
         (markdown / code / HTML en iframe sandbox). Masque tant qu'aucun artefact. -->
    <section class="chat-canvas" id="chat-canvas" hidden>
        <header class="chat-canvas-head">
            <div class="chat-canvas-title">
                <span class="chat-canvas-type" id="chat-canvas-type"></span>
                <span class="chat-canvas-name" id="chat-canvas-name">Artefact</span>
            </div>
            <div class="chat-canvas-actions">
                <a class="chat-canvas-link" id="chat-canvas-open" href="/v3/artifacts" target="_blank"
                   rel="noopener" hidden>Ouvrir dans Artefacts</a>
                <button type="button" class="chat-icon-btn" id="chat-canvas-close"
                        aria-label="Fermer le panneau" title="Fermer">✕</button>
            </div>
        </header>
        <div class="chat-canvas-body" id="chat-canvas-body"></div>
    </section>
</div>
{% endblock %}

{% block scripts %}
<!-- Libs vendorisees en local (static/chat-vendor/) : rendu markdown securise
     (marked -> DOMPurify) + coloration syntaxique. Vendorise plutot que CDN pour
     respecter la CSP stricte (script-src 'self'), fonctionner hors-ligne et eviter
     toute dependance externe (souverainete). Meme principe que socket.io.min.js. -->
<link rel="stylesheet"
      href="{{ url_for('static', filename='chat-vendor/github-dark.min.css') }}?v={{ asset_v }}">
<script src="{{ url_for('static', filename='chat-vendor/marked.min.js') }}?v={{ asset_v }}"></script>
<script src="{{ url_for('static', filename='chat-vendor/purify.min.js') }}?v={{ asset_v }}"></script>
<script src="{{ url_for('static', filename='chat-vendor/highlight.min.js') }}?v={{ asset_v }}"></script>
<script src="{{ url_for('static', filename='chat.js') }}?v={{ asset_v }}"></script>
{% endblock %}