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

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

<div class="auto-wrap">
    <!-- Colonne gauche : liste des automatisations -->
    <aside class="auto-list-col">
        <div class="auto-list-head">
            <h2 class="auto-title">Automatisation</h2>
            <button class="btn btn-primary btn-sm" id="auto-new-btn" type="button">+ Nouvelle</button>
        </div>
        <p class="auto-hint">Déclencheurs temps (intervalle / heure quotidienne) ou webhook (HTTP POST).
            Chaque automatisation exécute un script. En local, les tâches tournent pendant que
            l'application est ouverte.</p>
        <div class="auto-list" id="auto-list">
            <div class="auto-empty" id="auto-list-empty">Aucune automatisation.</div>
        </div>
    </aside>

    <!-- Colonne droite : detail / edition -->
    <section class="auto-main" id="auto-main">
        <!-- Accueil -->
        <div class="auto-welcome" id="auto-welcome">
            <p>Sélectionnez une automatisation ou créez-en une nouvelle.</p>
        </div>

        <!-- Formulaire (creation / edition) -->
        <div class="auto-form" id="auto-form" style="display:none;">
            <h3 id="auto-form-title">Nouvelle automatisation</h3>

            <label class="auto-field">
                <span>Nom</span>
                <input type="text" id="auto-name" maxlength="200" placeholder="Rapport quotidien">
            </label>

            <label class="auto-field">
                <span>Projet</span>
                <select id="auto-project"></select>
            </label>

            <label class="auto-field">
                <span>Déclencheur</span>
                <select id="auto-trigger-type">
                    <option value="interval">Toutes les N minutes</option>
                    <option value="daily">Chaque jour a heure fixe</option>
                    <option value="webhook">Webhook (HTTP POST)</option>
                </select>
            </label>

            <label class="auto-field" id="auto-interval-field">
                <span>Intervalle (minutes)</span>
                <input type="number" id="auto-every" min="1" step="1" value="60">
            </label>

            <label class="auto-field" id="auto-daily-field" style="display:none;">
                <span>Heure (HH:MM)</span>
                <input type="time" id="auto-at" value="09:00">
                <small id="auto-daily-tz-hint" style="display:none; color:var(--muted);">
                    ⚠️ Hébergé h24 : heure en UTC. Paris en été = UTC+2 (ex : 09:00 UTC = 11:00 Paris).
                </small>
            </label>

            <!-- Champs webhook (visibles si trigger = webhook) -->
            <div id="auto-webhook-fields" style="display:none;">
                <label class="auto-field">
                    <span>URL webhook</span>
                    <div style="display:flex; gap:8px; align-items:center;">
                        <input type="text" id="auto-webhook-url" readonly
                               style="font-family:ui-monospace,monospace; font-size:0.8rem; background:var(--bg); color:var(--muted);">
                        <button class="btn btn-secondary btn-sm" type="button" id="auto-webhook-copy" style="flex-shrink:0;">Copier</button>
                    </div>
                    <small style="color:var(--muted);">Exposez Vicsia (ngrok / reverse-proxy) pour que les services externes appellent cette URL.</small>
                </label>
                <label class="auto-field">
                    <span>Secret HMAC (optionnel)</span>
                    <input type="text" id="auto-webhook-secret" placeholder="Laissez vide pour desactiver la verification">
                    <small style="color:var(--muted);">Si renseigné, Vicsia vérifie l'entête <code>X-Hub-Signature-256</code> (compatible GitHub, Aircall, Stripe).</small>
                </label>
            </div>

            {% if user_plan in ('pro_x3', 'local') %}
            <div class="auto-field">
                <span>Exécution</span>
                <label class="auto-radio">
                    <input type="radio" name="auto-hosting" id="auto-hosting-local" value="local" checked>
                    Sur ma machine <small>(Vicsia doit être ouvert)</small>
                </label>
                <label class="auto-radio" id="auto-hosting-server-label">
                    <input type="radio" name="auto-hosting" id="auto-hosting-server" value="server">
                    Sur nos serveurs ☁
                    <small id="auto-hosted-counter" data-max="{{ hosted_max if hosted_max >= 0 else 999 }}">
                        0/{{ hosted_max if hosted_max >= 0 else '∞' }} utilisée(s)
                    </small>
                </label>
            </div>
            {% endif %}

            <label class="auto-field">
                <span>Entrées fixes (JSON)</span>
                <textarea id="auto-inputs" rows="5" placeholder='{ "site": "Lyon" }'>{}</textarea>
                <small class="auto-error" id="auto-inputs-error"></small>
            </label>

            <label class="auto-checkbox">
                <input type="checkbox" id="auto-enabled"> Activée
            </label>

            <div class="auto-actions">
                <button class="btn btn-primary" id="auto-save-btn" type="button">Enregistrer</button>
                <button class="btn btn-secondary" id="auto-cancel-btn" type="button">Annuler</button>
            </div>
            <small class="auto-error" id="auto-form-error"></small>
        </div>

        <!-- Detail (lecture + historique) -->
        <div class="auto-detail" id="auto-detail" style="display:none;">
            <div class="auto-detail-head">
                <h3 id="auto-detail-name"></h3>
                <span class="auto-badge" id="auto-detail-state"></span>
            </div>
            <p class="auto-detail-sub" id="auto-detail-sub"></p>

            <label class="auto-field" id="auto-detail-webhook" style="display:none;">
                <span>URL webhook</span>
                <div style="display:flex; gap:8px; align-items:center;">
                    <input type="text" id="auto-detail-webhook-url" readonly
                           style="font-family:ui-monospace,monospace; font-size:0.8rem; background:var(--bg); color:var(--muted);">
                    <button class="btn btn-secondary btn-sm" type="button" id="auto-detail-webhook-copy" style="flex-shrink:0;">Copier</button>
                </div>
            </label>

            <div class="auto-detail-actions">
                <button class="btn btn-primary btn-sm" id="auto-run-btn" type="button">Exécuter maintenant</button>
                <button class="btn btn-secondary btn-sm" id="auto-toggle-btn" type="button">Activer</button>
                <button class="btn btn-secondary btn-sm" id="auto-edit-btn" type="button">Modifier</button>
                <button class="btn btn-danger btn-sm" id="auto-delete-btn" type="button">Supprimer</button>
            </div>

            <h4 class="auto-runs-title">Historique</h4>
            <div class="auto-runs" id="auto-runs">
                <div class="auto-empty" id="auto-runs-empty">Aucune exécution.</div>
            </div>
        </div>
    </section>
</div>
{% endblock %}

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