{% extends '@kohinos/bundles/SonataAdminBundle/standard_layout.html.twig' %}

{% block title %}Boffice - {{ block_title|default('Tickets') }}{% endblock %}

{% block sonata_admin_content %}
<div class="boffice-module">
    {# Sub-navigation tabs + New ticket button #}
    <div style="display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:15px;">
        <ul class="nav nav-tabs" style="margin-bottom:0;border-bottom:none;">
            <li class="{{ app.request.get('_route') == 'boffice_kanban' ? 'active' : '' }}">
                <a href="{{ path('boffice_kanban') }}"><i class="fa fa-columns"></i> Kanban</a>
            </li>
            <li class="{{ app.request.get('_route') == 'boffice_timeline' ? 'active' : '' }}">
                <a href="{{ path('boffice_timeline') }}"><i class="fa fa-calendar"></i> Timeline</a>
            </li>
            <li class="{{ app.request.get('_route') == 'boffice_list' ? 'active' : '' }}">
                <a href="{{ path('boffice_list') }}"><i class="fa fa-list"></i> Liste</a>
            </li>
            {% if boffice_is_global_admin is defined and boffice_is_global_admin %}
            <li class="{{ app.request.get('_route') == 'boffice_installations' ? 'active' : '' }}">
                <a href="{{ path('boffice_installations') }}"><i class="fa fa-money"></i> Monnaies</a>
            </li>
            <li class="{{ app.request.get('_route') == 'boffice_users' ? 'active' : '' }}">
                <a href="{{ path('boffice_users') }}"><i class="fa fa-users"></i> Utilisateurs</a>
            </li>
            {% endif %}
            <li class="{{ app.request.get('_route') == 'boffice_changelog' ? 'active' : '' }}">
                <a href="{{ path('boffice_changelog') }}"><i class="fa fa-newspaper-o"></i> MISE A JOUR</a>
            </li>
        </ul>
        <button type="button" id="boffice-new-ticket-btn" class="btn btn-success btn-sm" style="margin-bottom:2px;">
            <i class="fa fa-plus"></i> Nouveau ticket
        </button>
    </div>

    {# Alert banner for API errors (hidden by default, shown by JS) #}
    <div id="boffice-api-error" class="alert alert-danger alert-static" style="display:none;">
        <i class="fa fa-exclamation-triangle"></i>
        <span id="boffice-api-error-msg">Erreur de communication avec l'API Boffice</span>
        <button type="button" class="btn btn-sm btn-default" id="boffice-retry-btn" style="margin-left:10px;">
            <i class="fa fa-refresh"></i> Réessayer
        </button>
    </div>

    {# Loading indicator #}
    <div id="boffice-loading" style="display:none;text-align:center;padding:40px;">
        <i class="fa fa-spinner fa-spin fa-2x"></i>
        <p style="margin-top:10px;color:#999;">Chargement...</p>
    </div>

    {% block boffice_content %}{% endblock %}
</div>

{# ── Ticket modal (create + edit) ── #}
<div id="boffice-new-ticket-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10001;overflow-y:auto;" role="dialog" aria-modal="true">
    <div style="position:relative;margin:30px auto 50px;background:#fff;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.3);width:720px;max-width:96vw;">
        {# Header #}
        <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 18px 12px;border-bottom:1px solid #e8e8e8;background:#f8f9fa;border-radius:8px 8px 0 0;">
            <h4 style="margin:0;font-size:16px;font-weight:700;color:#222;">
                <i class="fa" id="boffice-modal-icon" style="color:#28a745;"></i>
                <span id="boffice-modal-title">Nouveau ticket</span>
            </h4>
            <button type="button" id="boffice-new-ticket-close" style="background:none;border:none;font-size:22px;line-height:1;color:#bbb;cursor:pointer;padding:0 2px;" title="Fermer">&times;</button>
        </div>
        {# Form #}
        <div style="padding:18px 20px;">
            <form id="boffice-ticket-form" autocomplete="off">
                {# Hidden fields auto-filled #}
                <input type="hidden" name="requested_by" value="{{ app.user ? app.user.email : '' }}">
                <input type="hidden" id="boffice-ticket-mode" value="create">
                <input type="hidden" id="boffice-ticket-edit-id" value="">

                {# Type toggle Bug / Évolution #}
                <div class="form-group" style="margin-bottom:16px;">
                    <div id="boffice-type-toggle" style="display:inline-flex;border-radius:6px;overflow:hidden;border:2px solid #e0e0e0;">
                        <label id="boffice-type-bug-label" style="margin:0;cursor:pointer;padding:7px 18px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;background:#e65c00;color:#fff;transition:all .2s;">
                            <input type="radio" name="type" value="bug" checked style="display:none;">
                            <i class="fa fa-bug"></i> Bug
                        </label>
                        <label id="boffice-type-evo-label" style="margin:0;cursor:pointer;padding:7px 18px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;background:#f0f0f0;color:#888;transition:all .2s;">
                            <input type="radio" name="type" value="evolution" style="display:none;">
                            <i class="fa fa-lightbulb-o"></i> Évolution
                        </label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        {# Area #}
                        <div class="form-group">
                            <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Concerne</label>
                            <select name="area" class="form-control input-sm" data-sonata-select2="false">
                                <option value="public">La partie publique</option>
                                <option value="admin">L'administration</option>
                                <option value="api">L'API</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        {# Priority #}
                        <div class="form-group">
                            <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Priorité</label>
                            <select name="priority" class="form-control input-sm" data-sonata-select2="false">
                                <option value="low">Basse</option>
                                <option value="normal" selected>Normale</option>
                                <option value="high">Haute</option>
                                <option value="critical">Critique</option>
                            </select>
                        </div>
                    </div>
                </div>

                {# Title #}
                <div class="form-group">
                    <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Titre <span style="color:#c00;">*</span></label>
                    <input type="text" name="title" class="form-control" placeholder="Résumé court du ticket..." required maxlength="255" minlength="3">
                    <div class="help-block text-danger" data-field="title" style="display:none;"></div>
                </div>

                {# Description CKEditor #}
                <div class="form-group">
                    <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Description</label>
                    <textarea name="description" id="boffice-ticket-description" class="form-control" rows="5" placeholder="Description détaillée..."></textarea>
                    <div class="help-block text-danger" data-field="description" style="display:none;"></div>
                </div>

                {# Bug-specific fields #}
                <div id="bug-fields">
                    <div class="form-group">
                        <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Étapes à reproduire</label>
                        <textarea name="steps_to_reproduce" class="form-control" rows="2" placeholder="1. Aller sur la page...\n2. Cliquer sur..."></textarea>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Comportement courant</label>
                                <textarea name="current_behavior" class="form-control" rows="2" placeholder="Ce qu'il se passe..."></textarea>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Comportement attendu</label>
                                <textarea name="expected_behavior" class="form-control" rows="2" placeholder="Ce qui devrait se passer..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>

                {# Evolution-specific fields #}
                <div id="evolution-fields" style="display:none;">
                    <div class="form-group">
                        <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Financement</label>
                        <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;">
                            <label style="margin:0;cursor:pointer;font-weight:400;"><input type="radio" name="financing" value="none" checked> Non</label>
                            <label style="margin:0;cursor:pointer;font-weight:400;"><input type="radio" name="financing" value="planned"> Oui, prévu</label>
                            <label style="margin:0;cursor:pointer;font-weight:400;"><input type="radio" name="financing" value="federation"> Fédération</label>
                            <label style="margin:0;cursor:pointer;font-weight:400;"><input type="radio" name="financing" value="grant"> Subvention</label>
                            <label style="margin:0;cursor:pointer;font-weight:400;"><input type="radio" name="financing" value="quote"> Devis</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Échéance souhaitée</label>
                        <input type="date" name="due_date" class="form-control" style="max-width:200px;">
                    </div>
                </div>

                {# Edit-only fields (GLOBAL_ADMIN, mode édition uniquement) #}
                <div id="boffice-edit-only-fields" style="display:none;">
                    <hr style="margin:12px 0;">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Colonne Kanban</label>
                                <select name="column_id" class="form-control input-sm" id="boffice-modal-column" data-sonata-select2="false">
                                    <option value="">-- Choisir une colonne --</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Monnaie associée</label>
                                <select name="installation_id" class="form-control input-sm" id="boffice-modal-installation" data-sonata-select2="false">
                                    <option value="">-- Aucune --</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Catégorie</label>
                                <input type="text" name="category" class="form-control input-sm" id="boffice-modal-category" placeholder="Ex: paiement, compte...">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Date de début</label>
                                <input type="date" name="started_at" class="form-control input-sm" id="boffice-modal-started-at">
                            </div>
                        </div>
                    </div>
                </div>

                {# File upload #}
                <div class="form-group" id="boffice-file-upload-group">
                    <label style="font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.4px;">Capture d'écran</label>
                    <input type="file" name="attachment" id="boffice-file-input" accept=".jpg,.jpeg,.png,.gif,.pdf">
                    <p class="help-block" style="font-size:11px;">JPG, PNG, GIF, PDF — max 5 Mo</p>
                </div>

                {# Footer #}
                <div style="display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid #eee;margin-top:4px;">
                    <span id="boffice-submit-status" style="display:none;font-size:13px;"></span>
                    <div style="margin-left:auto;display:flex;gap:8px;">
                        <button type="button" id="boffice-new-ticket-cancel" class="btn btn-default btn-sm">Annuler</button>
                        <button type="submit" class="btn btn-success btn-sm" id="boffice-submit-btn">
                            <i class="fa" id="boffice-submit-icon"></i>
                            <span id="boffice-submit-label">Envoyer</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{# ── Shared rich ticket modal (accessible from all boffice views) ── #}
<div id="boffice-tl-modal-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;overflow-y:auto;" role="dialog" aria-modal="true">
    <div id="boffice-tl-modal" style="position:relative;margin:40px auto;background:#fff;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.3);width:620px;max-width:96vw;">
        {# Header : titre à gauche, boutons à droite #}
        <div style="display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #e8e8e8;">
            <div style="flex:1;min-width:0;padding-right:12px;">
                <div style="font-size:11px;color:#aaa;font-weight:500;margin-bottom:3px;" id="boffice-tl-modal-num"></div>
                <h4 id="boffice-tl-modal-title" style="margin:0;font-size:16px;font-weight:700;color:#222;word-break:break-word;line-height:1.35;"></h4>
            </div>
            <div style="display:flex;align-items:center;gap:6px;flex-shrink:0;">
                <a href="#" id="boffice-tl-modal-edit-btn" class="btn btn-xs btn-warning" title="Éditer le ticket" style="display:none;">
                    <i class="fa fa-pencil"></i>
                </a>
                <a href="#" id="boffice-tl-modal-view-btn" class="btn btn-xs btn-primary" title="Voir le ticket">
                    <i class="fa fa-eye"></i> Voir
                </a>
                <button type="button" id="boffice-tl-modal-close" style="background:none;border:none;font-size:22px;line-height:1;color:#bbb;cursor:pointer;padding:0 2px;margin-left:2px;" title="Fermer">&times;</button>
            </div>
        </div>
        {# Badges : type, priorité, colonne #}
        <div style="padding:10px 18px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;" id="boffice-tl-modal-badges"></div>
        {# Corps #}
        <div style="padding:14px 18px;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;font-size:13px;background:#f8f9fa;border-radius:6px;padding:12px 14px;" id="boffice-tl-modal-meta"></div>
            <div id="boffice-tl-modal-desc-wrap" style="margin-top:14px;display:none;">
                <div style="font-size:11px;font-weight:700;color:#888;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px;"><i class="fa fa-align-left"></i> Description</div>
                <div id="boffice-tl-modal-desc" style="background:#f9f9f9;border:1px solid #e8e8e8;border-radius:5px;padding:10px 12px;font-size:13px;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow-y:auto;line-height:1.5;"></div>
            </div>
            <div id="boffice-tl-modal-comments-wrap" style="margin-top:14px;display:none;">
                <div style="font-size:11px;font-weight:700;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:.6px;"><i class="fa fa-comments-o"></i> Commentaires <span id="boffice-tl-modal-comments-count" style="font-weight:400;color:#bbb;"></span></div>
                <div id="boffice-tl-modal-comments-list" style="display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;"></div>
            </div>
        </div>
        {# Footer #}
        <div style="padding:12px 18px 16px;border-top:1px solid #e8e8e8;text-align:right;">
            <a href="#" id="boffice-tl-modal-footer-view" class="btn btn-sm btn-primary">
                <i class="fa fa-external-link"></i> Ouvrir le ticket
            </a>
        </div>
    </div>
</div>
{# ── Lightbox overlay for attachment images ── #}
<div id="boffice-lightbox-overlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:10002;overflow-y:auto;cursor:zoom-out;" role="dialog" aria-modal="true">
    <div style="position:relative;margin:30px auto;max-width:92vw;width:fit-content;cursor:default;" id="boffice-lightbox-inner">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(255,255,255,.08);border-radius:6px 6px 0 0;">
            <span id="boffice-lightbox-title" style="color:#eee;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70vw;"></span>
            <div style="display:flex;gap:8px;flex-shrink:0;margin-left:12px;">
                <a id="boffice-lightbox-open" href="#" target="_blank" class="btn btn-xs btn-default" title="Ouvrir dans un nouvel onglet"><i class="fa fa-external-link"></i> Ouvrir</a>
                <button type="button" id="boffice-lightbox-close" style="background:none;border:none;font-size:24px;line-height:1;color:#ccc;cursor:pointer;padding:0 4px;" title="Fermer">&times;</button>
            </div>
        </div>
        <div style="background:#111;border-radius:0 0 6px 6px;padding:10px;text-align:center;">
            <img id="boffice-lightbox-img" src="" alt="" style="max-width:88vw;max-height:80vh;object-fit:contain;display:block;margin:0 auto;border-radius:3px;">
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('boffice') }}
    {% block boffice_css %}{% endblock %}
{% endblock %}

{% block js %}
    {{ parent() }}
    <script src="{{ asset('build/ckeditor/ckeditor.js') }}"></script>
    <script>
        var BOFFICE_API_BASE = '{{ path("boffice_api_proxy", {path: "__PLACEHOLDER__"}) }}'.replace('__PLACEHOLDER__', '');
        var BOFFICE_PROXY_BASE = '{{ path("boffice_dashboard") }}';
        window.BOFFICE_IS_GLOBAL_ADMIN = {{ (boffice_is_global_admin is defined and boffice_is_global_admin) ? 'true' : 'false' }};
    </script>
    {% block boffice_js %}{% endblock %}
    <script>
        (function() {
            'use strict';

            // Show/hide edit button based on global admin status
            if (window.BOFFICE_IS_GLOBAL_ADMIN) {
                var editBtn = document.getElementById('boffice-tl-modal-edit-btn');
                if (editBtn) editBtn.style.display = '';
            }

            // ── Shared ticket detail modal close handlers ──
            document.addEventListener('click', function(e) {
                if (e.target.id === 'boffice-tl-modal-close') {
                    e.preventDefault();
                    BofficeApi.closeTicketModal();
                }
                if (e.target.id === 'boffice-tl-modal-overlay') {
                    BofficeApi.closeTicketModal();
                }
            });

            // ── Ticket modal (create + edit) ──

            var overlay = document.getElementById('boffice-new-ticket-overlay');
            var form    = document.getElementById('boffice-ticket-form');
            var modeInput   = document.getElementById('boffice-ticket-mode');
            var editIdInput = document.getElementById('boffice-ticket-edit-id');

            var _pendingCKData = null;

            function destroyCKEditor() {
                if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['boffice-ticket-description']) {
                    CKEDITOR.instances['boffice-ticket-description'].destroy(true);
                }
                _pendingCKData = null;
            }

            function initCKEditor(initialData) {
                if (typeof CKEDITOR === 'undefined') {
                    document.getElementById('boffice-ticket-description').value = initialData || '';
                    return;
                }
                // Destroy existing instance before recreating to guarantee setData works correctly
                if (CKEDITOR.instances['boffice-ticket-description']) {
                    CKEDITOR.instances['boffice-ticket-description'].destroy(true);
                }
                _pendingCKData = initialData || '';
                var editor = CKEDITOR.replace('boffice-ticket-description', {
                    toolbar: [
                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
                        { name: 'paragraph',   items: ['NumberedList', 'BulletedList', '-', 'Blockquote'] },
                        { name: 'links',       items: ['Link', 'Unlink'] },
                        { name: 'insert',      items: ['Image', 'Table', 'HorizontalRule'] },
                        { name: 'styles',      items: ['Format'] },
                        '/',
                        { name: 'clipboard',   items: ['Undo', 'Redo'] }
                    ],
                    height: 180,
                    removePlugins: 'elementspath',
                    resize_enabled: false,
                    language: 'fr'
                });
                editor.on('instanceReady', function() {
                    if (_pendingCKData !== null) {
                        editor.setData(_pendingCKData);
                        _pendingCKData = null;
                    }
                    console.log('[BofficeModal] CKEditor prêt, data chargée');
                });
            }

            function setCKEditorData(html) {
                if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['boffice-ticket-description']) {
                    CKEDITOR.instances['boffice-ticket-description'].setData(html || '');
                } else {
                    document.getElementById('boffice-ticket-description').value = html || '';
                }
            }

            function getCKEditorData() {
                if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances['boffice-ticket-description']) {
                    return CKEDITOR.instances['boffice-ticket-description'].getData().trim();
                }
                return document.getElementById('boffice-ticket-description').value.trim();
            }

            function setTypeToggle(type) {
                var bugLabel = document.getElementById('boffice-type-bug-label');
                var evoLabel = document.getElementById('boffice-type-evo-label');
                var bugFields = document.getElementById('bug-fields');
                var evoFields = document.getElementById('evolution-fields');
                var bugRadio  = form.querySelector('input[name="type"][value="bug"]');
                var evoRadio  = form.querySelector('input[name="type"][value="evolution"]');
                if (type === 'bug') {
                    bugLabel.style.cssText = 'margin:0;cursor:pointer;padding:7px 18px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;background:#e65c00;color:#fff;transition:all .2s;';
                    evoLabel.style.cssText = 'margin:0;cursor:pointer;padding:7px 18px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;background:#f0f0f0;color:#888;transition:all .2s;';
                    bugFields.style.display = '';
                    evoFields.style.display = 'none';
                    if (bugRadio) bugRadio.checked = true;
                } else {
                    evoLabel.style.cssText = 'margin:0;cursor:pointer;padding:7px 18px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;background:#3c8dbc;color:#fff;transition:all .2s;';
                    bugLabel.style.cssText = 'margin:0;cursor:pointer;padding:7px 18px;font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;background:#f0f0f0;color:#888;transition:all .2s;';
                    bugFields.style.display = 'none';
                    evoFields.style.display = '';
                    if (evoRadio) evoRadio.checked = true;
                }
            }

            function clearFormErrors() {
                form.querySelectorAll('.help-block[data-field]').forEach(function(el) {
                    el.style.display = 'none';
                    el.textContent = '';
                });
                var status = document.getElementById('boffice-submit-status');
                if (status) status.style.display = 'none';
            }

            function setModalCreateMode() {
                modeInput.value  = 'create';
                editIdInput.value = '';
                document.getElementById('boffice-modal-icon').className  = 'fa fa-plus-circle';
                document.getElementById('boffice-modal-icon').style.color = '#28a745';
                document.getElementById('boffice-modal-title').textContent = 'Nouveau ticket';
                document.getElementById('boffice-submit-icon').className  = 'fa fa-paper-plane';
                document.getElementById('boffice-submit-label').textContent = 'Envoyer';
                var submitBtn = document.getElementById('boffice-submit-btn');
                submitBtn.className = 'btn btn-success btn-sm';
                document.getElementById('boffice-edit-only-fields').style.display = 'none';
                document.getElementById('boffice-file-upload-group').style.display = '';
            }

            function setModalEditMode(ticket) {
                modeInput.value   = 'edit';
                editIdInput.value = ticket.id;
                document.getElementById('boffice-modal-icon').className  = 'fa fa-pencil';
                document.getElementById('boffice-modal-icon').style.color = '#f39c12';
                document.getElementById('boffice-modal-title').textContent = 'Modifier le ticket #' + ticket.id;
                document.getElementById('boffice-submit-icon').className  = 'fa fa-save';
                document.getElementById('boffice-submit-label').textContent = 'Enregistrer';
                var submitBtn = document.getElementById('boffice-submit-btn');
                submitBtn.className = 'btn btn-warning btn-sm';
                document.getElementById('boffice-edit-only-fields').style.display = '';
                document.getElementById('boffice-file-upload-group').style.display = 'none';
            }

            function resetFormFields() {
                form.reset();
                setTypeToggle('bug');
                clearFormErrors();
                // Clear bug-specific fields explicitly (form.reset() may not clear them if they had JS-set values)
                var stepsEl    = form.querySelector('[name="steps_to_reproduce"]');
                var currentEl  = form.querySelector('[name="current_behavior"]');
                var expectedEl = form.querySelector('[name="expected_behavior"]');
                if (stepsEl)    stepsEl.value    = '';
                if (currentEl)  currentEl.value  = '';
                if (expectedEl) expectedEl.value = '';
            }

            // ── Open in create mode ──
            function openCreateModal() {
                resetFormFields();
                setModalCreateMode();
                overlay.style.display = '';
                initCKEditor('');  // recreate CKEditor fresh with empty content
                console.log('[BofficeModal] Ouverture modale création');
            }

            // ── Open in edit mode (called from boffice-ticket-show.js) ──
            window.bofficeOpenEditTicketModal = function(ticket, columns, installations) {
                resetFormFields();
                setModalEditMode(ticket);
                overlay.style.display = '';
                // initCKEditor with the description as initial data — instanceReady event sets it reliably
                initCKEditor(ticket.description || '');

                // Populate common fields
                form.querySelector('[name="title"]').value    = ticket.title    || '';
                form.querySelector('[name="area"]').value     = ticket.area     || 'public';
                form.querySelector('[name="priority"]').value = ticket.priority || 'normal';
                setTypeToggle(ticket.type || 'bug');

                // Populate bug-specific fields (champs séparés de l'API)
                if (ticket.type === 'bug') {
                    var stepsEl    = form.querySelector('[name="steps_to_reproduce"]');
                    var currentEl  = form.querySelector('[name="current_behavior"]');
                    var expectedEl = form.querySelector('[name="expected_behavior"]');
                    if (stepsEl)    stepsEl.value    = ticket.stepsToReproduce || '';
                    if (currentEl)  currentEl.value  = ticket.currentBehavior  || '';
                    if (expectedEl) expectedEl.value = ticket.expectedBehavior || '';
                }
                console.log('[BofficeModal] Ouverture modale édition ticket #' + ticket.id);

                // Populate evolution-specific
                if (ticket.type === 'evolution') {
                    var financingVal = ticket.financing || 'none';
                    var financingRadio = form.querySelector('input[name="financing"][value="' + financingVal + '"]');
                    if (financingRadio) financingRadio.checked = true;
                    var dueDateEl = form.querySelector('[name="due_date"]');
                    if (dueDateEl) dueDateEl.value = ticket.dueDate ? ticket.dueDate.substring(0, 10) : '';
                }

                // Populate edit-only selects
                populateColumnSelect(columns || [], ticket.column ? ticket.column.id : null);
                populateInstallationSelect(installations || [], ticket.installation ? ticket.installation.id : null);

                // Populate edit-only inputs
                var categoryEl  = document.getElementById('boffice-modal-category');
                var startedAtEl = document.getElementById('boffice-modal-started-at');
                if (categoryEl)  categoryEl.value  = ticket.category  || '';
                if (startedAtEl) startedAtEl.value = ticket.startedAt ? ticket.startedAt.substring(0, 10) : '';
            };

            function populateColumnSelect(cols, selectedId) {
                var sel = document.getElementById('boffice-modal-column');
                if (!sel) return;
                sel.innerHTML = '<option value="">-- Choisir une colonne --</option>';
                cols.sort(function(a, b) { return (a.position || 0) - (b.position || 0); });
                cols.forEach(function(col) {
                    if (!col.archived) {
                        var opt = document.createElement('option');
                        opt.value = col.id;
                        opt.textContent = col.name;
                        if (selectedId && String(col.id) === String(selectedId)) opt.selected = true;
                        sel.appendChild(opt);
                    }
                });
            }

            function populateInstallationSelect(insts, selectedId) {
                var sel = document.getElementById('boffice-modal-installation');
                if (!sel) return;
                sel.innerHTML = '<option value="">-- Aucune --</option>';
                insts.forEach(function(inst) {
                    var opt = document.createElement('option');
                    opt.value = inst.id;
                    opt.textContent = inst.name;
                    if (selectedId && String(inst.id) === String(selectedId)) opt.selected = true;
                    sel.appendChild(opt);
                });
            }

            function closeModal() {
                overlay.style.display = 'none';
                destroyCKEditor();  // destroy to guarantee fresh init on next open
                console.log('[BofficeModal] Modale fermée, CKEditor détruit');
            }

            // ── Open button (create) ──
            document.addEventListener('click', function(e) {
                if (e.target.id === 'boffice-new-ticket-btn' || e.target.closest('#boffice-new-ticket-btn')) {
                    openCreateModal();
                }
            });

            // ── Close handlers ──
            document.addEventListener('click', function(e) {
                if (e.target.id === 'boffice-new-ticket-close' || e.target.id === 'boffice-new-ticket-cancel') {
                    closeModal();
                }
                if (e.target.id === 'boffice-new-ticket-overlay') {
                    closeModal();
                }
            });

            // ── Type toggle styling ──
            document.addEventListener('change', function(e) {
                if (e.target.name === 'type' && e.target.closest('#boffice-ticket-form')) {
                    setTypeToggle(e.target.value);
                }
            });

            // ── Clear field errors on input ──
            document.addEventListener('input', function(e) {
                if (!e.target.closest('#boffice-ticket-form')) return;
                var name = e.target.name;
                if (name) {
                    var errEl = form.querySelector('[data-field="' + name + '"]');
                    if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
                }
            });
            document.addEventListener('change', function(e) {
                if (!e.target.closest('#boffice-ticket-form') || e.target.name === 'type') return;
                var name = e.target.name;
                if (name) {
                    var errEl = form.querySelector('[data-field="' + name + '"]');
                    if (errEl) { errEl.style.display = 'none'; errEl.textContent = ''; }
                }
            });

            // ── Form submit (create + edit) ──
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                var submitBtn = document.getElementById('boffice-submit-btn');
                var status    = document.getElementById('boffice-submit-status');
                var mode      = modeInput.value;
                var editId    = editIdInput.value;

                clearFormErrors();

                var type        = (form.querySelector('input[name="type"]:checked') || {}).value || 'bug';
                var description = getCKEditorData();

                var data = {
                    type:         type,
                    area:         form.querySelector('[name="area"]').value,
                    title:        form.querySelector('[name="title"]').value.trim(),
                    description:  description,
                    priority:     form.querySelector('[name="priority"]').value,
                    requested_by: form.querySelector('[name="requested_by"]').value
                };

                // Client-side validation
                if (!data.title || data.title.length < 3) {
                    var titleErr = form.querySelector('[data-field="title"]');
                    if (titleErr) { titleErr.textContent = 'Le titre doit contenir au moins 3 caractères'; titleErr.style.display = ''; }
                    return;
                }
                // Type-specific fields
                if (type === 'bug') {
                    var steps    = ((form.querySelector('[name="steps_to_reproduce"]') || {}).value || '').trim();
                    var current  = ((form.querySelector('[name="current_behavior"]')   || {}).value || '').trim();
                    var expected = ((form.querySelector('[name="expected_behavior"]')  || {}).value || '').trim();
                    // Envoi en champs séparés (l'API les stocke indépendamment de la description)
                    if (steps)    data.steps_to_reproduce = steps;
                    if (current)  data.current_behavior   = current;
                    if (expected) data.expected_behavior  = expected;
                } else {
                    var financingEl = form.querySelector('input[name="financing"]:checked');
                    data.financing = financingEl ? financingEl.value : 'none';
                    var dueDateEl2 = form.querySelector('[name="due_date"]');
                    if (dueDateEl2 && dueDateEl2.value) data.due_date = dueDateEl2.value;
                }

                // Edit-mode additional fields
                if (mode === 'edit') {
                    var colId   = (document.getElementById('boffice-modal-column')       || {}).value || '';
                    var instId  = (document.getElementById('boffice-modal-installation') || {}).value || '';
                    var catVal  = (document.getElementById('boffice-modal-category')     || {}).value || '';
                    var startEl = document.getElementById('boffice-modal-started-at');
                    if (colId)  data.column_id        = parseInt(colId, 10);
                    data.installation_id = instId ? parseInt(instId, 10) : null;
                    data.category    = catVal.trim();
                    data.started_at  = startEl && startEl.value ? startEl.value : null;
                }

                submitBtn.disabled = true;
                // Ne pas écraser innerHTML (détruirait les id boffice-submit-icon/label utilisés par setModalEditMode)
                var _icon = document.getElementById('boffice-submit-icon');
                var _lbl  = document.getElementById('boffice-submit-label');
                if (_icon) _icon.className   = 'fa fa-spinner fa-spin';
                if (_lbl)  _lbl.textContent  = mode === 'edit' ? 'Enregistrement...' : 'Envoi...';

                function onSuccess(response) {
                    if (mode === 'edit') {
                        status.innerHTML = '<span class="text-success"><i class="fa fa-check"></i> Ticket modifié avec succès !</span>';
                        status.style.display = '';
                        setTimeout(function() {
                            closeModal();
                            resetFormFields();
                            if (typeof window.bofficeReload === 'function') window.bofficeReload();
                        }, 800);
                    } else {
                        status.innerHTML = '<span class="text-success"><i class="fa fa-check"></i> Ticket créé avec succès !</span>';
                        status.style.display = '';
                        var fileInput = document.getElementById('boffice-file-input');
                        var hasFile   = fileInput && fileInput.files.length > 0 && response && response.id;

                        function afterUpload() {
                            setTimeout(function() {
                                closeModal();
                                resetFormFields();
                                if (typeof window.bofficeReload === 'function') window.bofficeReload();
                            }, 800);
                        }

                        if (hasFile) {
                            status.innerHTML = '<span class="text-success"><i class="fa fa-spinner fa-spin"></i> Envoi de la pièce jointe...</span>';
                            var formData = new FormData();
                            formData.append('file', fileInput.files[0]);
                            fetch(window.BOFFICE_PROXY_BASE + '/ticket/' + response.id + '/upload', {
                                method: 'POST',
                                body: formData
                            }).then(afterUpload).catch(afterUpload);
                        } else {
                            setTimeout(afterUpload, 1200);
                        }
                    }
                }

                function onError(statusCode, responseJson) {
                    var defaultMsg = mode === 'edit' ? 'Erreur lors de la modification du ticket' : 'Erreur lors de la création du ticket';
                    if (statusCode === 422 && responseJson) {
                        var errors = responseJson.violations || responseJson.errors || responseJson;
                        if (Array.isArray(errors)) {
                            errors.forEach(function(err) {
                                var errEl = form.querySelector('[data-field="' + (err.propertyPath || err.field) + '"]');
                                if (errEl) { errEl.textContent = err.message; errEl.style.display = ''; }
                            });
                        } else {
                            status.innerHTML = '<span class="text-danger"><i class="fa fa-times"></i> ' + (responseJson.error || 'Erreur de validation') + '</span>';
                            status.style.display = '';
                        }
                    } else {
                        status.innerHTML = '<span class="text-danger"><i class="fa fa-times"></i> ' + defaultMsg + '</span>';
                        status.style.display = '';
                    }
                }

                function resetSubmitBtn() {
                    submitBtn.disabled = false;
                    // Mise à jour ciblée pour ne pas détruire les id boffice-submit-icon/label
                    var _iconR = document.getElementById('boffice-submit-icon');
                    var _lblR  = document.getElementById('boffice-submit-label');
                    if (_iconR) _iconR.className   = 'fa ' + (mode === 'edit' ? 'fa-save' : 'fa-paper-plane');
                    if (_lblR)  _lblR.textContent  = mode === 'edit' ? 'Enregistrer' : 'Envoyer';
                }

                if (mode === 'edit') {
                    // PATCH via proxy endpoint
                    fetch(window.BOFFICE_PROXY_BASE + '/ticket/' + editId + '/update', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(data)
                    }).then(function(res) {
                        return res.json().then(function(json) { return { ok: res.ok, status: res.status, json: json }; });
                    }).then(function(r) {
                        if (r.ok) { onSuccess(r.json); } else { onError(r.status, r.json); }
                    }).catch(function() {
                        status.innerHTML = '<span class="text-danger"><i class="fa fa-times"></i> Erreur réseau</span>';
                        status.style.display = '';
                    }).finally(resetSubmitBtn);
                } else {
                    BofficeApi.post('tickets', data).done(function(response) {
                        onSuccess(response);
                    }).fail(function(xhr) {
                        onError(xhr.status, xhr.responseJSON);
                    }).always(resetSubmitBtn);
                }
            });

            // ── Escape key closes whichever modal is open ──
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    if (overlay.style.display !== 'none') {
                        closeModal();
                    } else {
                        var tlOverlay = document.getElementById('boffice-tl-modal-overlay');
                        if (tlOverlay && tlOverlay.style.display !== 'none') {
                            BofficeApi.closeTicketModal();
                        }
                    }
                }
            });

            console.log('[BofficeModal] Modale ticket initialisée (create + edit)');
        })();
    </script>
{% endblock %}