const API_BASE = '';
let allTickets = [];
let filteredTickets = [];
let customFieldsMap = [];
let lastUsername = '';
let lastApiToken = '';
let currentGanttView = 'month'; 
let currentSortCol = null;
let isAsc = true;


// Sauvegarde les paramètres dans le stockage local du navigateur
function saveSettings() {
    const settings = {
        projectKey: document.getElementById('projectKey').value,
        customFields: document.getElementById('customFields').value,
        jqlQuery: document.getElementById('jqlQuery').value
    };
    localStorage.setItem('jira_roadmap_settings', JSON.stringify(settings));
}

// Charge les paramètres au démarrage
function loadSettings() {
    const saved = localStorage.getItem('jira_roadmap_settings');
    if (saved) {
        const settings = JSON.parse(saved);
        document.getElementById('projectKey').value = settings.projectKey || '';
        document.getElementById('customFields').value = settings.customFields || '';
        document.getElementById('jqlQuery').value = settings.jqlQuery || '';
    }
}


// --- UTILITAIRES ---
function showToast(msg, type='success') {
    const c = document.getElementById('toastContainer');
    const t = document.createElement('div');
    t.className = `toast toast-${type}`;
    t.innerHTML = `<i class="fa-solid fa-${type==='success'?'check-circle':'xmark-circle'}"></i><span>${msg}</span>`;
    c.appendChild(t);
    setTimeout(() => t.remove(), 3500);
}

function autoJql() {
    const key = document.getElementById('projectKey').value.trim().toUpperCase();
    const jql = document.getElementById('jqlQuery');
    if (!jql.value.trim() || jql.value.trim().startsWith('project =')) {
        jql.value = `project = "${key}" ORDER BY created DESC`;
    }
}

async function pingApi() {
    saveSettings();

    const btn = event.target.closest('.btn');
    const orig = btn.innerHTML; btn.innerHTML = '<span class="spinner"></span> Test...'; btn.disabled = true;
    try {
        const r = await fetch(`${API_BASE}/api/extract`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify({username:'_', apiToken:'_', projectKey:'_'}) });
        if (r.status === 400) showToast('API locale connectée !', 'success');
        else showToast('API répond : ' + r.status, 'success');
    } catch(e) {
        showToast('API inaccessible. Lancez "npm start".', 'error');
    } finally { btn.innerHTML = orig; btn.disabled = false; }
}

async function startExtraction() {
    saveSettings();

    const btn = document.getElementById('extractBtn');
    const user = document.getElementById('username').value.trim();
    const token = document.getElementById('apiToken').value.trim();
    const project = document.getElementById('projectKey').value.trim().toUpperCase();
    const jql = document.getElementById('jqlQuery').value.trim();
    const custom = document.getElementById('customFields').value.trim();

    if (!user || !token || !project) { showToast('Champs requis manquants.', 'error'); return; }

    btn.innerHTML = '<span class="spinner"></span> Extraction...'; btn.disabled = true;

    try {
        const resp = await fetch(`${API_BASE}/api/extract`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: user, apiToken: token, projectKey: project, jql: jql, customFields: custom })
        });
        const data = await resp.json();
        if (!resp.ok) throw new Error(data.error || `Erreur ${resp.status}`);

        allTickets = data.tickets;
        filteredTickets = [...allTickets];
        customFieldsMap = parseCustomFields(custom);
        lastUsername = user;
        lastApiToken = token;
        
        renderResults();
        showToast(`${allTickets.length} tickets extraits.`, 'success');
    } catch (err) {
        showToast(err.message, 'error');
    } finally {
        btn.innerHTML = '<i class="fa-solid fa-download"></i> Lancer l\'extraction'; btn.disabled = false;
    }
}

function parseCustomFields(customFields) {
    const map = [];
    if (customFields) {
        customFields.split(',').forEach(cf => {
            const [id, label] = cf.split(':').map(s => s.trim());
            if (id) map.push({ id, label: label || id });
        });
    }
    return map;
}

function sortTable(colKey) {
    // Si on clique sur la même colonne, on inverse l'ordre, sinon on passe en croissant
    if (currentSortCol === colKey) {
        isAsc = !isAsc;
    } else {
        currentSortCol = colKey;
        isAsc = true;
    }

    filteredTickets.sort((a, b) => {
        let valA = a[colKey] || '';
        let valB = b[colKey] || '';

        // Gestion spécifique pour les dates pour un tri chronologique correct
        if (colKey.toLowerCase().includes('date') || colKey === 'created' || colKey === 'dueDate') {
            valA = new Date(valA);
            valB = new Date(valB);
        }

        if (valA < valB) return isAsc ? -1 : 1;
        if (valA > valB) return isAsc ? 1 : -1;
        return 0;
    });

    renderTable();
}

// --- MISE À JOUR TICKET ---
async function updateTicket(ticketKey, dueDate, goLiveDate) {
    if (!lastUsername || !lastApiToken) {
        showToast('Veuillez d\'abord extraire les tickets.', 'error');
        return;
    }

    const btn = document.querySelector(`[data-ticket="${ticketKey}"]`);
    const orig = btn.innerHTML;
    btn.innerHTML = '<span class="spinner"></span>';
    btn.disabled = true;

    const goLiveField = customFieldsMap.find(cf => cf.label.toLowerCase().includes('go live'));
    const updates = {};
    if (dueDate !== undefined) updates.duedate = dueDate;
    if (goLiveDate !== undefined && goLiveField) updates[goLiveField.id] = goLiveDate;

    try {
        const resp = await fetch(`${API_BASE}/api/update`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username: lastUsername, apiToken: lastApiToken, ticketKey, updates })
        });
        if (!resp.ok) {
            const data = await resp.json();
            throw new Error(data.error || `Erreur HTTP ${resp.status}`);
        }

        const ticket = allTickets.find(t => t.key === ticketKey);
        if (ticket) {
            if (updates.duedate !== undefined) ticket.dueDate = updates.duedate;
            if (goLiveField && updates[goLiveField.id] !== undefined) ticket[goLiveField.label] = updates[goLiveField.id];
        }

        renderTable();
        renderRoadmap();
        showToast(`Ticket ${ticketKey} mis à jour !`, 'success');
    } catch (err) {
        showToast(err.message, 'error');
    } finally {
        btn.innerHTML = orig;
        btn.disabled = false;
    }
}

function enableUpdateBtn(ticketKey) {
    const btn = document.getElementById(`update-${ticketKey}`);
    if (btn) btn.disabled = false;
}

function handleUpdateClick(ticketKey, goLiveColName) {
    const dueInput = document.getElementById(`due-${ticketKey}`);
    const dueDate = dueInput && dueInput.value ? dueInput.value : null;

    let goLiveDate = null;
    if (goLiveColName) {
        const goLiveInput = document.getElementById(`gl-${ticketKey}`);
        goLiveDate = goLiveInput && goLiveInput.value ? goLiveInput.value : null;
    }
    updateTicket(ticketKey, dueDate, goLiveDate);
}

// --- RENDU ---
function renderResults() {
    document.getElementById('results-section').classList.add('visible');
    renderStats(); renderTable(); renderJSON(); renderRoadmap();
}

function renderStats() {
    const unassigned = allTickets.filter(t => !t.assignee).length;
    const now = new Date();
    const overdue = allTickets.filter(t => t.dueDate && t.statusCategory !== 'Done' && new Date(t.dueDate) < now).length;
    document.getElementById('statsRow').innerHTML = `
        <div class="stat-card"><div class="stat-value">${allTickets.length}</div><div class="stat-label">Tickets</div></div>
        <div class="stat-card"><div class="stat-value">${new Set(allTickets.map(t=>t.status)).size}</div><div class="stat-label">Statuts</div></div>
        <div class="stat-card"><div class="stat-value">${unassigned}</div><div class="stat-label">Non assignés</div></div>
        <div class="stat-card"><div class="stat-value" style="color:${overdue>0?'var(--danger)':'var(--accent)'}">${overdue}</div><div class="stat-label">En retard</div></div>
    `;
}

function escHtml(s) { if(!s) return ''; const d=document.createElement('div'); d.textContent=String(s); return d.innerHTML; }
function fmtDate(d) { if(!d) return '<span class="empty-cell">-</span>'; try { return new Date(d).toLocaleDateString('fr-FR',{day:'2-digit',month:'short',year:'numeric'}); } catch { return escHtml(d); } }
function getStatusClass(s) { if(!s) return 's-other'; const l=s.toLowerCase(); if(l.includes('done')||l.includes('ferm')||l.includes('résolu')) return 's-done'; if(l.includes('progress')||l.includes('en cours')||l.includes('review')) return 's-progress'; if(l.includes('to do')||l.includes('open')||l.includes('backlog')) return 's-todo'; if(l.includes('block')) return 's-blocked'; return 's-other'; }

function renderTable() {
    let goLiveColName = null;
    if (allTickets.length > 0) {
        goLiveColName = Object.keys(allTickets[0]).find(key => 
            !['key','url','summary','description','status','statusCategory','assignee','reporter','priority','issueType','created','updated','dueDate','resolution','resolutionDate','labels','components','fixVersions','projectName'].includes(key)
        );
    }

    // Mapping pour faire le lien entre le texte de l'en-tête et la propriété de l'objet ticket
    const colMapping = {
        'Ticket': 'key',
        'Summary': 'summary',
        'Statut': 'status',
        'Assigné': 'assignee',
        'Priorité': 'priority',
        'Type': 'issueType',
        'Due Date': 'dueDate'
    };

    const cols = ['Ticket','Summary','Statut','Assigné','Priorité','Type','Due Date'];
    if (goLiveColName) {
        cols.push(goLiveColName);
        colMapping[goLiveColName] = goLiveColName; // Ajout dynamique du champ personnalisé
    }
    cols.push('Actions');

    // Génération des en-têtes avec gestion du clic pour le tri
    document.getElementById('tableHead').innerHTML = '<tr>' + cols.map(c => {
        const key = colMapping[c];
        if (!key) return `<th>${c}</th>`; // Pour la colonne 'Actions'
        
        const icon = currentSortCol === key ? (isAsc ? ' ▴' : ' ▾') : '';
        return `<th onclick="sortTable('${key}')" style="cursor:pointer" class="sortable-th">
                    ${c}${icon}
                </th>`;
    }).join('') + '</tr>';

    let body = '';
    filteredTickets.forEach(t => {
        const dueDateValue = t.dueDate ? t.dueDate.substring(0, 10) : '';
        body += `<tr>
            <td><span class="ticket-key" onclick="window.open('${t.url}', '_blank')">${escHtml(t.key)}</span></td>
            <td title="${escHtml(t.summary)}">${escHtml(t.summary)}</td>
            <td><span class="status-badge ${getStatusClass(t.status)}">${escHtml(t.status)}</span></td>
            <td>${escHtml(t.assignee) || '-'}</td>
            <td>${escHtml(t.priority)}</td>
            <td>${escHtml(t.issueType)}</td>
            <td><input type="date" class="date-input" id="due-${t.key}" value="${dueDateValue}" onchange="enableUpdateBtn('${t.key}')"></td>`;

        if (goLiveColName) {
            const glVal = t[goLiveColName] ? t[goLiveColName].substring(0, 10) : '';
            body += `<td><input type="date" class="date-input" id="gl-${t.key}" value="${glVal}" onchange="enableUpdateBtn('${t.key}')"></td>`;
        }

        body += `<td>
            <button class="btn-update" id="update-${t.key}" data-ticket="${t.key}" onclick="handleUpdateClick('${t.key}', '${goLiveColName || ''}')" disabled>
                <i class="fa-solid fa-rotate"></i> Update
            </button>
        </td></tr>`;
    });
    document.getElementById('tableBody').innerHTML = body || '<tr><td colspan="10">Aucun résultat</td></tr>';
}

function getStatusColor(status) {
    const s = (status || '').toLowerCase();
    if (s.includes('done') || s.includes('ferm') || s.includes('rsolu')) return '#00e68a';
    if (s.includes('progress') || s.includes('en cours') || s.includes('review')) return '#4dc8ff';
    if (s.includes('to do') || s.includes('open') || s.includes('backlog')) return '#ffb84d';
    if (s.includes('block')) return '#ff4d6a';
    return '#7a9488';
}

// --- ROADMAP (GANTT) ---
function setGanttView(view) {
    currentGanttView = view;
    renderRoadmap();
}

// --- FONCTIONS UTILITAIRES POUR LE GANTT ---

/**
 * Extrait le titre court et le type selon le pattern : "Titre - Type - Montant - ID"
 */
function parseTicketSummary(summary) {
    if (!summary) return { shortTitle: 'Sans titre', type: 'OTHER' };
    const parts = summary.split(' - ');
    const shortTitle = parts[0].trim();
    const typePart = parts[1] ? parts[1].trim().toUpperCase() : 'OTHER';
    
    // On valide si c'est un type connu, sinon OTHER
    const type = ['PR', 'CR', 'TR'].includes(typePart) ? typePart : 'OTHER';
    return { shortTitle, type };
}

/**
 * Définit la couleur de la barre selon le type de projet
 */
function getTypeColor(type) {
    switch(type) {
        case 'PR': return '#4dc8ff'; // Bleu info
        case 'CR': return '#ffb84d'; // Orange warning
        case 'TR': return '#a371f7'; // Violet
        default: return '#7a9488';   // Gris par défaut
    }
}

/**
 * FONCTION PRINCIPALE : RENDER ROADMAP
 */
function renderRoadmap() {
    const preview = document.getElementById('roadmapPreview');
    if (!filteredTickets || filteredTickets.length === 0) {
        preview.innerHTML = `<div style="text-align:center; padding:60px; color:var(--fg-dim);">Aucun ticket à afficher.</div>`;
        return;
    }

    // Détection dynamique de la colonne Go Live
    const goLiveColName = Object.keys(filteredTickets[0]).find(k => k.toLowerCase().includes('go live')) || "Go Live Date";
    
    // Configuration des largeurs
    const leftWidth = 280; // Un peu plus large pour les titres split 0
    let colWidth = 140;
    if (currentGanttView === 'quarter') colWidth = 200;
    if (currentGanttView === 'year') colWidth = 250;

    // 1. Filtrer les tickets : on ne garde que ceux qui ont au moins une date
    const ticketsWithDates = filteredTickets.filter(t => {
        const d1 = t.dueDate ? new Date(t.dueDate) : null;
        const d2 = t[goLiveColName] ? new Date(t[goLiveColName]) : null;
        return (d1 && !isNaN(d1.getTime())) || (d2 && !isNaN(d2.getTime()));
    });

    if (ticketsWithDates.length === 0) {
        preview.innerHTML = `<div style="padding:40px; text-align:center; color:var(--fg-dim);">Aucune date de Due Date ou Go Live renseignée pour les tickets filtrés.</div>`;
        return;
    }

    // Calcul des bornes du calendrier
    const allDates = ticketsWithDates.flatMap(t => [
        t.dueDate ? new Date(t.dueDate) : null,
        t[goLiveColName] ? new Date(t[goLiveColName]) : null
    ].filter(d => d !== null));

    let minDate = new Date(Math.min(...allDates));
    let maxDate = new Date(Math.max(...allDates));
    
    minDate.setDate(1);
    if (currentGanttView === 'quarter') minDate.setMonth(Math.floor(minDate.getMonth() / 3) * 3);
    if (currentGanttView === 'year') minDate.setMonth(0);
    
    maxDate.setMonth(maxDate.getMonth() + 2); // Un peu de marge au bout
    maxDate.setDate(0);

    // Construction de l'échelle de temps
    const timeScale = [];
    let tempDate = new Date(minDate);
    while (tempDate <= maxDate) {
        let label = "", key = "";
        if (currentGanttView === 'month') {
            label = tempDate.toLocaleDateString('fr-FR', { month: 'short', year: 'numeric' });
            key = `${tempDate.getFullYear()}-${tempDate.getMonth()}`;
            tempDate.setMonth(tempDate.getMonth() + 1);
        } else if (currentGanttView === 'quarter') {
            const q = Math.floor(tempDate.getMonth() / 3) + 1;
            label = `Q${q} ${tempDate.getFullYear()}`;
            key = `${tempDate.getFullYear()}-Q${q}`;
            tempDate.setMonth(tempDate.getMonth() + 3);
        } else if (currentGanttView === 'year') {
            label = `${tempDate.getFullYear()}`;
            key = `${tempDate.getFullYear()}`;
            tempDate.setFullYear(tempDate.getFullYear() + 1);
        }
        timeScale.push({ key, label });
    }

    const getXPos = (date) => {
        if (!date) return 0;
        const d = new Date(date);
        let index = -1;
        if (currentGanttView === 'month') index = timeScale.findIndex(m => m.key === `${d.getFullYear()}-${d.getMonth()}`);
        else if (currentGanttView === 'quarter') index = timeScale.findIndex(m => m.key === `${d.getFullYear()}-Q${Math.floor(d.getMonth() / 3) + 1}`);
        else if (currentGanttView === 'year') index = timeScale.findIndex(m => m.key === `${d.getFullYear()}`);
        
        if (index === -1) return 0;
        
        let ratio = 0;
        if (currentGanttView === 'month') ratio = (d.getDate() - 1) / 30;
        else if (currentGanttView === 'quarter') ratio = ((d.getMonth() % 3) * 30 + d.getDate()) / 90;
        else if (currentGanttView === 'year') ratio = (d.getMonth() * 30 + d.getDate()) / 365;
        
        return leftWidth + (index * colWidth) + (ratio * colWidth);
    };

    // 2. Groupement par assigné (uniquement ceux qui ont des tickets visibles)
    const grouped = ticketsWithDates.reduce((acc, t) => {
        const name = t.assignee || "Non assigné";
        if (!acc[name]) acc[name] = [];
        acc[name].push(t);
        return acc;
    }, {});

    // Début HTML
    let html = `<div class="gantt-container"><div class="gantt-canvas" style="width: ${leftWidth + (timeScale.length * colWidth)}px;">`;
    
    // Ligne "Aujourd'hui"
    const todayX = getXPos(new Date());
    if (todayX > leftWidth) {
        html += `<div class="gantt-today-line" style="left: ${todayX}px;"></div>`;
        html += `<div class="gantt-today-label" id="todayMarker" style="left: ${todayX}px;">Aujourd'hui</div>`;
    }

    // Header
    html += `<div class="gantt-header"><div class="gantt-sticky-col gantt-group-name" style="width:${leftWidth}px">Assigné / Ticket (Titre)</div>`;
    timeScale.forEach(ts => { html += `<div class="gantt-month-header" style="width:${colWidth}px;">${ts.label}</div>`; });
    html += `</div>`;

    // Corps du Gantt
    Object.keys(grouped).sort().forEach(assignee => {
        // Header de groupe
        html += `<div class="gantt-group-header">
                    <div class="gantt-sticky-col gantt-group-name" style="width:${leftWidth}px">
                        <i class="fa-solid fa-user-circle mr-8"></i>${assignee}
                    </div>
                 </div>`;
        
        const sortedTickets = grouped[assignee].sort((a, b) => (new Date(a.dueDate || 0)) - (new Date(b.dueDate || 0)));

        sortedTickets.forEach(t => {
            const dDue = t.dueDate ? new Date(t.dueDate) : null;
            const dLive = t[goLiveColName] ? new Date(t[goLiveColName]) : null;
            
            const start = dDue || dLive;
            const end = dLive || dDue;
            const x1 = getXPos(start);
            const x2 = getXPos(end);
            
            // Largeur de barre (minimum 150px pour afficher le badge de statut et le titre proprement)
            const barWidth = Math.max(150, (x2 - x1) + 10);
            
            const { shortTitle, type } = parseTicketSummary(t.summary);
            const typeColor = getTypeColor(type);
            const statusColor = getStatusColor(t.status);

            html += `<div class="gantt-row">
                        <div class="gantt-sticky-col gantt-ticket-id" style="width:${leftWidth}px; font-size:11px;" title="${t.key}: ${t.summary}">
                            ${escHtml(shortTitle)}
                        </div>
                        
                        <div class="gantt-bar" 
                             onclick="window.open('${t.url}', '_blank')"
                             style="left:${x1}px; width:${barWidth}px; background:${typeColor}22; border-left:4px solid ${typeColor}; cursor:pointer; display:flex; align-items:center; gap:6px; padding:0 8px;">
                            
                            <div style="background:${statusColor}; color:#fff; font-size:9px; padding:2px 6px; border-radius:4px; font-weight:bold; text-transform:uppercase; white-space:nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
                                ${escHtml(t.status)}
                            </div>

                            <span style="color:${typeColor}; font-weight:bold; flex-shrink:0;">${type}</span>
                            <span style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px;">${escHtml(shortTitle)}</span>
                        </div>
                        ${timeScale.map(() => `<div class="gantt-grid-col" style="width:${colWidth}px;"></div>`).join('')}
                     </div>`;
        });
    });

    html += `</div></div>`;
    preview.innerHTML = html;
    
    // Focus sur la date du jour
    setTimeout(() => {
        const m = document.getElementById('todayMarker');
        if (m) m.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
    }, 150);
}


// --- TAB & FILTER ---
function switchTab(id, btn) {
    document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
    btn.classList.add('active'); document.getElementById(`panel-${id}`).classList.add('active');
    if(id === 'roadmap') renderRoadmap();
}

function filterTable() {
    const q = document.getElementById('searchInput').value.toLowerCase();
    filteredTickets = q ? allTickets.filter(t => Object.values(t).some(v => v && String(v).toLowerCase().includes(q))) : [...allTickets];
    renderTable();
    if(document.getElementById('panel-roadmap').classList.contains('active')) renderRoadmap();
}

function exportDrawIOXML(mode) {
    try {
        // 1. Sécurité : Vérification des données
        if (!filteredTickets || filteredTickets.length === 0) {
            showToast("Aucun ticket à exporter", "error");
            return;
        }

        const goLiveCol = Object.keys(filteredTickets[0]).find(k => k.toLowerCase().includes('go live')) || "dueDate";
        const ticketsWithDates = filteredTickets.filter(t => t.dueDate || t[goLiveCol]);

        if (ticketsWithDates.length === 0) {
            showToast("Aucune date de fin trouvée", "error");
            return;
        }

        // 2. Paramètres de vue (Zoom)
        const leftWidth = 250;
        const rowHeight = 50;
        let pixelPerDay = 12; // Mois
        if (currentGanttView === 'quarter') pixelPerDay = 4;
        if (currentGanttView === 'year') pixelPerDay = 1.2;

        // 3. Calcul des bornes temporelles
        const allDates = ticketsWithDates.map(t => new Date(t.dueDate || t[goLiveCol]));
        let minDate = new Date(Math.min(...allDates));
        minDate.setDate(1);
        let maxDate = new Date(Math.max(...allDates));
        maxDate.setMonth(maxDate.getMonth() + 4);

        const getX = (dateStr) => {
            const d = new Date(dateStr);
            if (isNaN(d.getTime())) return leftWidth;
            return Math.floor(leftWidth + ((d - minDate) / 86400000 * pixelPerDay));
        };

        let xmlNodes = '';

        // 4. TIMELINE & LIGNES VERTICALES
        let curr = new Date(minDate);
        while (curr < maxDate) {
            const xPos = getX(curr);
            let label = "";
            
            if (currentGanttView === 'month') {
                label = curr.toLocaleDateString('fr-FR', { month: 'short', year: 'numeric' }).toUpperCase();
                curr.setMonth(curr.getMonth() + 1);
            } else if (currentGanttView === 'quarter') {
                label = "Q" + (Math.floor(curr.getMonth() / 3) + 1) + " " + curr.getFullYear();
                curr.setMonth(curr.getMonth() + 3);
            } else {
                label = curr.getFullYear();
                curr.setFullYear(curr.getFullYear() + 1);
            }

            // Titres Timeline agrandis (fontSize=14)
            xmlNodes += `<mxCell id="m_${curr.getTime()}" value="${label}" style="text;fontColor=#7a9488;fontSize=14;fontStyle=1;align=left;verticalAlign=middle" vertex="1" parent="1">
                <mxGeometry x="${xPos + 5}" y="5" width="150" height="30" as="geometry"/>
            </mxCell>`;
            
            // Lignes verticales de repère
            xmlNodes += `<mxCell id="l_${curr.getTime()}" value="" style="line;strokeColor=#E0E0E0;direction=south;html=1;opacity=20" vertex="1" parent="1">
                <mxGeometry x="${xPos}" y="0" width="10" height="4000" as="geometry"/>
            </mxCell>`;
        }

        // 5. LIGNE TODAY
        const xToday = getX(new Date());
        xmlNodes += `<mxCell id="today" value="AUJOURD'HUI" style="line;strokeColor=#FF0000;direction=south;html=1;dashed=1;strokeWidth=2;fontColor=#FF0000;fontSize=12;fontStyle=1;verticalAlign=top" vertex="1" parent="1">
            <mxGeometry x="${xToday}" y="0" width="10" height="4000" as="geometry"/>
        </mxCell>`;

        // 6. GÉNÉRATION DES TICKETS
        let currentY = 80;
        const groups = ticketsWithDates.reduce((acc, t) => {
            const a = t.assignee || 'Non assigné';
            if (!acc[a]) acc[a] = [];
            acc[a].push(t);
            return acc;
        }, {});

        Object.keys(groups).sort().forEach(assignee => {
            // Header Assigné
            xmlNodes += `<mxCell id="as_${currentY}" value="${assignee.toUpperCase()}" style="text;fontColor=#00e68a;fontStyle=1;fontSize=14" vertex="1" parent="1">
                <mxGeometry x="10" y="${currentY}" width="200" height="30" as="geometry"/>
            </mxCell>`;
            currentY += 40;

            groups[assignee].forEach(t => {
                const { shortTitle, type } = parseTicketSummary(t.summary);
                const color = getTypeColor(type);
                
                // Durée réelle (Création -> DueDate)
                const startDate = t.created ? new Date(t.created) : minDate;
                const endDate = new Date(t.dueDate || t[goLiveCol]);
                
                const xStart = getX(startDate);
                const xEnd = getX(endDate);
                let barWidth = xEnd - xStart;
                if (barWidth < 50) barWidth = 140; 

                // Label de gauche
                xmlNodes += `<mxCell id="lbl_${currentY}" value="${escHtml(shortTitle)}" style="text;fontColor=#555555;fontSize=10;align=left;whiteSpace=wrap" vertex="1" parent="1">
                    <mxGeometry x="30" y="${currentY}" width="200" height="30" as="geometry"/>
                </mxCell>`;

                // Barre de Gantt
                const label = `[${type}] ${escHtml(shortTitle)}`;
                xmlNodes += `<mxCell id="bar_${currentY}" value="${label}" style="rounded=1;fillColor=${color};strokeColor=#FFFFFF;fontColor=#000000;fontSize=10;fontStyle=1;spacingLeft=8;align=left" vertex="1" parent="1">
                    <mxGeometry x="${xStart}" y="${currentY}" width="${barWidth}" height="28" as="geometry"/>
                </mxCell>`;

                currentY += rowHeight;
            });
            currentY += 20;
        });

        // 7. ASSEMBLAGE FINAL
        const finalXml = `<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net">
  <diagram id="Jira" name="Roadmap">
    <mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" background="none">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        ${xmlNodes}
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>`;

        if (mode === 'download') {
            const blob = new Blob([finalXml], { type: 'text/xml' });
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = "jira_export.drawio";
            a.click();
        } else {
            navigator.clipboard.writeText(finalXml).then(() => showToast("XML Copié !"));
        }

    } catch (error) {
        console.error(error);
        showToast("Erreur lors de l'export XML", "error");
    }
}

function renderJSON() { document.getElementById('jsonViewer').innerHTML = syntaxHL(JSON.stringify(allTickets, null, 2)); }
function syntaxHL(json) {
    json = json.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    return json.replace(/("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, m => {
        let c = 'json-number'; if(/^"/.test(m)) c = /:$/.test(m)?'json-key':'json-string'; else if(/true|false/.test(m)) c='json-bool'; else if(/null/.test(m)) c='json-null';
        return `<span class="${c}">${m}</span>`;
    });
}

function downloadJSON() {
    const blob = new Blob([JSON.stringify(allTickets, null, 2)], {type:'application/json'});
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
    a.download = `export-${Date.now()}.json`; a.click();
}

function copyJSON() { navigator.clipboard.writeText(JSON.stringify(allTickets, null, 2)).then(() => showToast('Copié !')); }

function clearResults() { allTickets=[]; filteredTickets=[]; document.getElementById('results-section').classList.remove('visible'); }

document.addEventListener('keydown', e => { if((e.ctrlKey||e.metaKey)&&e.key==='Enter'){e.preventDefault();startExtraction()} });
// Cet événement se déclenche quand le navigateur a fini de charger le HTML
document.addEventListener('DOMContentLoaded', () => {
    loadSettings();
    console.log("Paramètres chargés depuis le stockage local.");
});