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

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

<div class="proj-wrap">
    <!-- Colonne gauche : liste des projets -->
    <aside class="proj-list-col" id="proj-list-col">
        <div class="proj-list-head">
            <span class="proj-list-title">Projets</span>
            <button class="btn btn-primary btn-sm" id="btn-new-project" onclick="openModal('modal-new-project')">+ Créer un projet</button>
        </div>
        <div class="proj-list" id="proj-list">
            <div class="proj-list-empty" id="proj-list-empty">Aucun projet.</div>
        </div>
    </aside>

    <!-- Colonne droite : vue d'un projet -->
    <section class="proj-main" id="proj-main">
        <!-- Ecran d'accueil -->
        <div class="proj-welcome" id="proj-welcome">
            <h2>Projets</h2>
            <p>
                Selectionnez un projet pour le lancer manuellement depuis le Chat IA.
            </p>
            <p class="proj-welcome-hint">
                Pour creer ou configurer un script, rendez-vous dans
                <a href="/v3/scripts">Scripts</a>.
            </p>
        </div>

        <!-- Vue projet -->
        <div class="proj-view" id="proj-view" style="display:none;">
            <header class="proj-view-head">
                <div class="proj-view-title">
                    <h2 id="proj-name">Projet</h2>
                    <span class="proj-view-desc" id="proj-desc"></span>
                </div>
                <div class="proj-view-actions">
                    <button class="btn btn-ghost btn-sm" id="btn-publish-project" style="display:none; margin-right:auto;" onclick="publishProject()">Publier</button>
                    <a class="btn btn-secondary btn-sm" id="proj-open-chat" href="/v3/chat">Ouvrir dans le Chat IA</a>
                </div>
            </header>

            <!-- Parametrage : contexte, connecteurs MCP, modele (editable) -->
            <div class="proj-card">
                <div class="proj-card-head">
                    <span class="proj-card-title">Paramétrage</span>
                    <span class="proj-config-state" id="proj-config-state"></span>
                </div>
                <div class="proj-config-body">
                    <div class="proj-field full">
                        <label class="proj-field-label" for="proj-prompt">Contexte du projet</label>
                        <span class="proj-field-help">Instructions injectées dans le Chat IA à chaque conversation liée à ce projet : explique ce que fait le projet, le ton, les règles.</span>
                        <textarea id="proj-prompt" rows="5" placeholder="Ex. Tu assistes le support. Réponds toujours en français, de façon concise…"></textarea>
                    </div>
                    <div class="proj-field full">
                        <label class="proj-field-label">Connecteurs (MCP)</label>
                        <span class="proj-field-help">Outils MCP prioritaires pour ce projet. Vide = tous les outils disponibles.</span>
                        <div class="proj-multi" id="proj-connectors">
                            <span class="proj-cfg-empty" id="proj-connectors-empty">Aucun MCP disponible.</span>
                        </div>
                    </div>
                    <div class="proj-field">
                        <label class="proj-field-label" for="proj-model">Modèle</label>
                        <span class="proj-field-help">Qualité vs vitesse du LLM pour ce projet.</span>
                        <select id="proj-model">
                            <option value="">Hériter du réglage global</option>
                        </select>
                    </div>
                    <div class="proj-field full" id="proj-templates">
                        <label class="proj-field-label">Templates d'artefact (max 3)</label>
                        <span class="proj-field-help">Modèles de la bibliothèque Artefacts que l'IA peut utiliser pour générer un document dans ce projet. Ordre = priorité. <a href="/v3/artifacts">Gérer les templates</a>.</span>
                        <div class="proj-multi" id="proj-templates-list">
                            <span class="proj-cfg-empty" id="proj-templates-empty">Aucun template disponible.</span>
                        </div>
                    </div>
                </div>
                <div class="proj-form-footer">
                    <button class="btn btn-primary btn-sm" id="proj-save-btn" onclick="saveProjectConfig()">Enregistrer les modifications</button>
                </div>
            </div>

            <!-- Script associe (lecture seule ; edition du code dans Scripts) -->
            <div class="proj-card proj-script-card" id="proj-script-card">
                <div class="proj-card-head">
                    <span class="proj-card-title">Script associé</span>
                    <span class="proj-script-state" id="proj-script-state"></span>
                </div>
                <div style="padding:1rem;">
                    <p class="proj-script-hint" id="proj-script-info" style="margin:0 0 0.75rem;"></p>
                    <a class="btn btn-secondary btn-sm" id="proj-configure-link" href="/v3/scripts">Configurer le code dans Scripts</a>
                </div>
            </div>

            <!-- Documentation (RAG) — a venir -->
            <div class="proj-card" style="opacity:0.6;">
                <div class="proj-card-head">
                    <span class="proj-card-title">Documentation (RAG)</span>
                    <span class="proj-meta-badge proj-meta-badge--experimental">Bientôt</span>
                </div>
                <div style="padding:1rem;">
                    <p class="proj-script-hint" style="margin:0;">
                        Bientôt : rattachez des documents au projet pour enrichir automatiquement
                        le contexte du Chat IA (recherche sémantique).
                    </p>
                </div>
            </div>

        </div>
    </section>
</div>

<!-- Modale : creer un projet -->
<div class="modal-overlay" id="modal-new-project">
    <div class="modal">
        <div class="modal-header">
            <h2 class="modal-title">Créer un projet</h2>
            <button class="modal-close" onclick="closeModal('modal-new-project')" aria-label="Fermer">&times;</button>
        </div>
        <div class="modal-body">
            <div class="proj-field full">
                <label class="proj-field-label" for="np-name">Nom <span class="req">*</span></label>
                <input type="text" id="np-name" maxlength="200" placeholder="Ex. Support client">
            </div>
            <div class="proj-field full">
                <label class="proj-field-label" for="np-description">Description</label>
                <textarea id="np-description" rows="3" maxlength="500" placeholder="Optionnel"></textarea>
            </div>
            <div id="np-error" class="proj-form-error" style="display:none;"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-new-project')">Annuler</button>
            <button class="btn btn-primary" onclick="createProject()">Créer</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='projects.js') }}?v={{ asset_v }}"></script>
{% endblock %}