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

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='scripts.css') }}?v={{ asset_v }}">

{% if user_plan == 'starter' %}
<div class="scr-starter-note" role="note" style="margin:0 0 1rem;padding:0.8rem 1rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);display:flex;gap:0.7rem;align-items:flex-start;">
    <span aria-hidden="true" style="font-size:1.2rem;line-height:1;flex-shrink:0;">🔌</span>
    <div style="font-size:0.88rem;line-height:1.4;">
        <strong>Plan Starter — mode connecteur uniquement.</strong>
        Tu peux créer et brancher des scripts comme <strong>Connecteur IA</strong> (déclenchés par tes agents).
        Les exécutions automatiques (<a href="/pricing?from=workspace" style="color:var(--accent);">planifié, webhook, hébergé&nbsp;24h/24</a>)
        nécessitent le plan Pro / Pro&nbsp;x3.
    </div>
</div>
{% endif %}

<div class="scr-wrap">

    <!-- Colonne gauche : liste des scripts -->
    <aside class="scr-list-col">
        <div class="scr-list-head">
            <h2 class="scr-title">Scripts</h2>
            <button class="btn btn-primary btn-sm" id="scr-new-btn" type="button">+ Nouveau</button>
        </div>
        <div class="scr-list" id="scr-list">
            <div class="scr-empty" id="scr-list-empty">Aucun script.</div>
        </div>
    </aside>

    <!-- Panneau droit -->
    <section class="scr-main" id="scr-main">

        <!-- Accueil -->
        <div id="scr-welcome" class="scr-welcome">
            <p>Selectionnez un script ou creez-en un nouveau.</p>
            {% if user_plan == 'starter' %}
            <p>Avec ton plan Starter, un script s'active comme <strong>Connecteur IA</strong>
               (commande vocale avec parametres) : attache-le a un groupe d'agents.</p>
            <p style="font-size:0.82rem;color:var(--text-muted);">
                <strong>Projets</strong> (lancement depuis le Chat) et les executions
                automatiques (planifier, webhook, heberge 24h/24) ouvrent avec le
                <a href="/pricing?from=workspace" style="color:var(--accent);">plan Pro / Pro x3</a>.
            </p>
            {% else %}
            <p>Un script peut apparaitre dans <strong>Projets</strong> (lance depuis le Chat)
               ou s'activer comme <strong>Connecteur IA</strong> (commande vocale avec parametres).</p>
            <p style="font-size:0.82rem;color:var(--text-muted);">
                Pour les executions automatiques (planifier, webhook), configurez une
                <a href="/v3/automation" style="color:var(--accent);">Automatisation</a>.
            </p>
            {% endif %}
        </div>

        <!-- Formulaire creation -->
        <div id="scr-create-panel" class="scr-create-form-wrap" style="display:none;">
            <h3>Nouveau script</h3>
            <div class="scr-field">
                <label for="scr-create-name">Nom</label>
                <input type="text" id="scr-create-name" maxlength="200" placeholder="Mon script">
            </div>
            <div class="scr-field">
                <label for="scr-create-desc">Description (optionnel)</label>
                <input type="text" id="scr-create-desc" maxlength="500" placeholder="Ce que fait ce script">
            </div>

            <!-- Import du fichier Python -->
            <div class="scr-field">
                <label>Fichier Python</label>
                <div class="scr-upload-zone" id="scr-create-upload-zone">
                    <span id="scr-create-upload-verbose">Glissez un fichier <strong>.py</strong> ici, ou </span>
                    <label style="color:var(--accent);cursor:pointer;text-decoration:underline;">
                        <span id="scr-create-upload-label">parcourez</span><input type="file" id="scr-create-file-input" accept=".py" hidden>
                    </label><span>.</span>
                    <div style="font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem;">Max 1 Mo — facultatif (vous pourrez l'ajouter plus tard)</div>
                </div>
            </div>

            <!-- Verdict de verification (dry-run, sans enregistrer) -->
            <div id="scr-create-verdict" style="display:none;"></div>

            <div class="scr-form-actions">
                <button class="btn btn-secondary btn-sm" id="scr-create-verify" type="button" disabled>Verifier l'import</button>
                <button class="btn btn-primary btn-sm" id="scr-create-confirm" type="button">Valider l'import</button>
                <button class="btn btn-secondary btn-sm" id="scr-create-cancel" type="button">Annuler</button>
            </div>
            <small class="scr-save-hint err" id="scr-create-error"></small>
        </div>

        <!-- Fiche script (detail) -->
        <div id="scr-detail" style="display:none;">

            <!-- Section : Code -->
            <div class="scr-section">
                <h3 class="scr-section-title">Code</h3>
                <div class="scr-script-state" id="scr-script-state">Aucun script charge</div>
                <div class="scr-upload-zone" id="scr-upload-zone">
                    <span id="scr-upload-verbose">Glissez un fichier <strong>.py</strong> ici, ou </span>
                    <label style="color:var(--accent);cursor:pointer;text-decoration:underline;">
                        <span id="scr-upload-label">parcourez</span><input type="file" id="scr-file-input" accept=".py" hidden>
                    </label><span id="scr-upload-dot">.</span>
                    <div id="scr-upload-hint" style="font-size:0.78rem;color:var(--text-muted);margin-top:0.3rem;">Max 1 Mo</div>
                </div>
                <!-- Modes supportes (lecture seule, deduits du script) -->
                <div class="scr-capabilities" id="scr-capabilities" style="display:none;"></div>
                <details class="scr-explain" id="scr-explain" style="display:none;">
                    <summary>Que fait ce script ?</summary>
                    <div class="scr-explain-body" id="scr-explain-body"></div>
                    <button class="btn btn-secondary btn-sm" id="scr-explain-regen" type="button" style="margin-top:0.5rem;">Regenerer le resume</button>
                </details>
                <div id="scr-security" style="display:none;"></div>
                <div id="scr-meta" style="display:none;"></div>
                <div id="scr-maintenance-warnings" style="display:none;"></div>
                <!-- Verrouillage des dépendances (lockfile uv) : visible seulement si le
                     script déclare des dépendances PEP 723. Fige les versions exactes
                     (utile avant de distribuer le script à des clients). -->
                <div id="scr-lock-row" style="display:none;margin-top:0.5rem;align-items:center;gap:0.5rem;flex-wrap:wrap;">
                    <span class="scr-cap-badge" id="scr-lock-badge" style="display:none;">🔒 deps verrouillées</span>
                    <button class="btn btn-secondary btn-sm" id="scr-lock-btn" type="button">Verrouiller les dépendances</button>
                    <span class="scr-save-hint" id="scr-lock-hint"></span>
                </div>
            </div>

            <!-- Section : Secrets / Cles API declarees par le script (PEP 723).
                 Visible seulement si le script declare au moins un secret. -->
            <div class="scr-section" id="scr-secrets-section" style="display:none;">
                <h3 class="scr-section-title">Secrets / Cles API</h3>
                <p class="scr-mode-hint" id="scr-secrets-hint" style="margin-top:0;">
                    Ce script a besoin des cles ci-dessous pour fonctionner. Elles sont stockees
                    de maniere securisee sur cette machine et injectees au script a l'execution.
                </p>
                <div id="scr-secrets-list"></div>
            </div>

            <!-- Section : Configuration -->
            <div class="scr-section">
                <h3 class="scr-section-title">Configuration</h3>

                <div class="scr-field">
                    <label for="scr-cfg-name">Nom</label>
                    <input type="text" id="scr-cfg-name" maxlength="200">
                </div>

                <div class="scr-field">
                    <label for="scr-cfg-desc">Description</label>
                    <input type="text" id="scr-cfg-desc" maxlength="500">
                </div>

                {# Le prompt systeme, les connecteurs MCP et le modele LLM sont du
                   parametrage PROJET/CHAT (utilises seulement lors d'une conversation
                   IA liee au projet), pas du parametrage script. Ils se configurent
                   cote projet/chat. Un script reste du Python autonome : utilisable
                   comme connecteur, comme script de projet et/ou comme automatisation. #}
            </div>

            <!-- Section : Modes -->
            <div class="scr-section">
                <h3 class="scr-section-title">Modes d'execution</h3>

                <!-- Mode A : Present dans Projets (ex-Mini-application) — Pro -->
                <div class="scr-mode-block">
                    <div class="scr-mode-header" id="scr-mode-miniapp-header">
                        <input type="checkbox" id="scr-mode-miniapp-toggle"{% if user_plan == 'starter' %} disabled{% endif %}>
                        <span>Present dans Projets{% if user_plan == 'starter' %} <a href="/pricing?from=workspace" style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--accent);text-decoration:none;border:1px solid var(--accent);border-radius:4px;padding:0 0.3rem;margin-left:0.3rem;">Pro</a>{% endif %}</span>
                    </div>
                    <div class="scr-mode-body" id="scr-mode-miniapp-body" style="display:none;">
                        <p class="scr-mode-hint">Ce script apparait dans <strong>Projets</strong> pour etre lance depuis le <a href="/v3/chat" style="color:var(--accent);">Chat IA</a>. Selectionnez ce projet dans une conversation pour le declencher.</p>
                    </div>
                </div>

                <!-- Mode C : Connecteur IA (attachable a un groupe, comme un MCP) -->
                <div class="scr-mode-block">
                    <div class="scr-mode-header" id="scr-mode-conn-header">
                        <input type="checkbox" id="scr-mode-conn-toggle">
                        <span>Disponible comme connecteur</span>
                    </div>
                    <small id="scr-mode-conn-hint" style="display:none;color:var(--warning,#f59e0b);font-size:0.78rem;margin:0.15rem 0 0 1.4rem;display:block;"></small>
                    <div class="scr-mode-body" id="scr-mode-conn-body" style="display:none;">
                        <p class="scr-mode-hint">Ce script devient un <strong>connecteur</strong> : attachez-le a un groupe d'agents dans <a href="/v3/agents" style="color:var(--accent);">Agents</a>. Quand vous parlez au groupe, l'orchestrateur peut alors le declencher (l'IA remplit les parametres automatiquement). Plus besoin de mots-cles ni de raccourci dedie.</p>
                    </div>
                </div>

            </div><!-- /scr-section modes -->

            <!-- Barre d'enregistrement : nom, description et modes ne sont persistes
                 qu'au clic explicite (pas de sauvegarde auto invisible). -->
            <div class="scr-save-bar">
                <button class="btn btn-primary btn-sm" id="scr-save-btn" type="button" disabled>Enregistrer les modifications</button>
                <span class="scr-save-hint" id="scr-save-status"></span>
            </div>

            <!-- Zone danger -->
            <div class="scr-danger-zone">
                <button class="btn btn-danger btn-sm" id="scr-delete-btn" type="button">Supprimer ce script</button>
            </div>

        </div><!-- /scr-detail -->

    </section>
</div>
{% endblock %}

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