{% extends 'layout.html' %}
{% from 'macros.html' import common_styles, badge_urgence, badge_etat, badge_panne, action_btns %}
{% block title %}Interventions{% endblock %}
{% block page_title %}Interventions{% endblock %}

{% block styles %}
{{ common_styles() }}
<style>
/* ── Badges animés urgence ── */
.badge-tres-urgent {
    background: linear-gradient(135deg,#fee2e2,#fecaca) !important;
    color: #b91c1c !important;
    animation: urgBadgePulse 2s infinite;
    position: relative;
}
.badge-tres-urgent::before {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 20px;
    background: rgba(239,68,68,.15);
    animation: urgBadgeRing 2s infinite;
}
@keyframes urgBadgePulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); }
    50%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
@keyframes urgBadgeRing {
    0%,100% { opacity: 0; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.1); }
}
.badge-urgent    { background: linear-gradient(135deg,#fef3c7,#fde68a)!important; color:#92400e!important; }
.badge-normal    { background: linear-gradient(135deg,#dbeafe,#bfdbfe)!important; color:#1d4ed8!important; }
.badge-traite    { background: linear-gradient(135deg,#d1fae5,#a7f3d0)!important; color:#065f46!important; }
.badge-encours   { background: linear-gradient(135deg,#fef3c7,#fde68a)!important; color:#92400e!important; }
.badge-annule    { background: linear-gradient(135deg,#f1f5f9,#e2e8f0)!important; color:#475569!important; }

/* ── Filtres ── */
.filter-card { border-radius: 14px !important; }
.filter-card .card-body { padding: 14px 20px !important; }

/* ── Stats bar ── */
.stats-bar {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    padding: 10px 16px; background: linear-gradient(135deg,#f8fafc,#f1f5f9);
    border-radius: 10px; border: 1px solid var(--c-border);
    margin-bottom: 16px;
}
.stats-bar .stat-item {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; font-weight: 600; color: var(--c-text-2);
}
.stats-bar .stat-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* ── Table améliorée ── */
#mainTable { border-radius: 14px; overflow: hidden; }
#mainTable th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 22px !important;
    white-space: nowrap;
}
#mainTable th::after {
    content: '\f0dc';
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    color: #cbd5e1; font-size: .62rem;
}
#mainTable th.sort-asc::after  { content: '\f0de'; color: var(--c-primary); }
#mainTable th.sort-desc::after { content: '\f0dd'; color: var(--c-primary); }
#mainTable th:last-child::after { display: none; }
#mainTable th:last-child { cursor: default; }

#mainTable tbody tr { cursor: pointer; }
#mainTable tbody tr:hover td { background: #eff6ff; }

/* ── Empty state ── */
.empty-state {
    padding: 60px 20px; text-align: center;
}
.empty-state .empty-icon {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}

/* ── Pagination ── */
.pagination-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-top: 1px solid var(--c-border);
    background: #f8fafc; border-radius: 0 0 14px 14px;
    flex-wrap: wrap; gap: 8px;
}
.pagination-info { font-size: .8rem; color: var(--c-text-3); }
.pagination-controls { display: flex; gap: 4px; }
.page-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--c-border); background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .8rem; font-weight: 600;
    color: var(--c-text-2); transition: all .15s;
}
.page-btn:hover { background: var(--c-primary-l); color: var(--c-primary); border-color: var(--c-primary); }
.page-btn.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.page-btn:disabled { opacity: .4; cursor: default; }

/* ── Toolbar ── */
.list-toolbar {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin-bottom: 12px;
}
.search-input-wrap { position: relative; flex: 1; min-width: 200px; }
.search-input-wrap input { padding-left: 36px !important; }
.search-input-wrap .si-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--c-text-3); font-size: .82rem; pointer-events: none;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">

  <!-- En-tête -->
  <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div class="d-flex align-items-center gap-3">
      <div class="rounded-3 d-flex align-items-center justify-content-center"
           style="width:48px;height:48px;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb;font-size:1.2rem;border:1px solid #bfdbfe">
        <i class="fas fa-clipboard-list"></i>
      </div>
      <div>
        <h5 class="fw-bold mb-0">Liste des interventions</h5>
        <div class="text-muted small" id="resultCount">{{ interventions|length }} résultat(s)</div>
      </div>
    </div>
    <div class="d-flex gap-2">
      <button id="btnExportCSV" class="btn btn-outline-secondary btn-sm" title="Exporter CSV">
        <i class="fas fa-file-csv me-1"></i>Export CSV
      </button>
      {% if permissions.can_add %}
      <a href="{{ url_for('ajouter_intervention') }}" class="btn btn-primary btn-sm px-3">
        <i class="fas fa-plus me-2"></i>Nouvelle intervention
      </a>
      {% endif %}
    </div>
  </div>

  <!-- Alert d'information sur la période -->
  {% if filtres.periode == '7jours' %}
  <div class="alert alert-info py-2 px-3 small d-flex align-items-center justify-content-between mb-3 border-0 shadow-sm" style="border-radius: 10px; background: rgba(37, 99, 235, 0.08); color: var(--c-primary);">
    <div>
      <i class="fas fa-bolt me-2"></i>
      <strong>Chargement rapide activé :</strong> Affichage des interventions de la <strong>dernière semaine</strong>.
    </div>
    <a href="{{ url_for('liste_interventions', periode='tout') }}" class="fw-bold text-decoration-none small" style="color: var(--c-primary);">
      Voir tout l'historique <i class="fas fa-arrow-right ms-1"></i>
    </a>
  </div>
  {% endif %}

  <!-- Filtres -->
  <div class="card filter-card border-0 shadow-sm mb-3">
    <div class="card-body">
      <form method="GET" action="{{ url_for('liste_interventions') }}" class="row g-2 align-items-end">
        <div class="col-md-2 col-sm-6">
          <label class="form-label">Période</label>
          <select class="form-select form-select-sm" name="periode">
            <option value="7jours" {% if filtres.periode=='7jours' %}selected{% endif %}>⚡ Dernière semaine</option>
            <option value="30jours" {% if filtres.periode=='30jours' %}selected{% endif %}>📅 Derniers 30 jours</option>
            <option value="mois" {% if filtres.periode=='mois' %}selected{% endif %}>🗓️ Ce mois-ci</option>
            <option value="tout" {% if filtres.periode=='tout' %}selected{% endif %}>🌐 Toutes (Historique)</option>
          </select>
        </div>
        <div class="col-md-2 col-sm-6">
          <label class="form-label">État</label>
          <select class="form-select form-select-sm" name="status">
            <option value="">Tous</option>
            <option value="en_cours" {% if filtres.status=='en_cours' %}selected{% endif %}>En cours</option>
            <option value="traite"   {% if filtres.status=='traite'   %}selected{% endif %}>Traités</option>
            <option value="annule"   {% if filtres.status=='annule'   %}selected{% endif %}>Annulés</option>
          </select>
        </div>
        <div class="col-md-2 col-sm-6">
          <label class="form-label">Urgence</label>
          <select class="form-select form-select-sm" name="urgence">
            <option value="">Toutes</option>
            <option value="Trés urgent" {% if filtres.urgence=='Trés urgent' %}selected{% endif %}>🔴 Très urgent</option>
            <option value="Urgent"      {% if filtres.urgence=='Urgent'      %}selected{% endif %}>🟡 Urgent</option>
            <option value="Normal"      {% if filtres.urgence=='Normal'      %}selected{% endif %}>🔵 Normal</option>
          </select>
        </div>
        <div class="col-md-2 col-sm-6">
          <label class="form-label">Date début</label>
          <input type="date" class="form-control form-control-sm" name="date_debut" value="{{ filtres.date_debut }}">
        </div>
        <div class="col-md-2 col-sm-6">
          <label class="form-label">Date fin</label>
          <input type="date" class="form-control form-control-sm" name="date_fin" value="{{ filtres.date_fin }}">
        </div>
        <div class="col-md-2 col-sm-12 d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm flex-fill">
            <i class="fas fa-search me-1"></i>Filtrer
          </button>
          <a href="{{ url_for('liste_interventions') }}" class="btn btn-outline-secondary btn-sm" title="Réinitialiser">
            <i class="fas fa-undo"></i>
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Barre de stats rapides -->
  <div class="stats-bar">
    {% set total_all = interventions|length %}
    {% set en_cours = interventions|selectattr('est_traiter','eq','non')|selectattr('annuler','eq','non')|list|length %}
    {% set terminees = interventions|selectattr('est_traiter','eq','oui')|list|length %}
    {% set urgentes = interventions|selectattr('degre','eq','Trés urgent')|list|length %}
    <div class="stat-item">
      <div class="stat-dot" style="background:#2563eb"></div>
      <span>Total : <strong>{{ total_all }}</strong></span>
    </div>
    <div class="stat-item">
      <div class="stat-dot" style="background:#f59e0b"></div>
      <span>En cours : <strong>{{ en_cours }}</strong></span>
    </div>
    <div class="stat-item">
      <div class="stat-dot" style="background:#10b981"></div>
      <span>Traitées : <strong>{{ terminees }}</strong></span>
    </div>
    {% if urgentes > 0 %}
    <div class="stat-item">
      <div class="stat-dot" style="background:#ef4444;animation:urgBadgePulse 2s infinite"></div>
      <span style="color:#b91c1c">Urgentes : <strong>{{ urgentes }}</strong></span>
    </div>
    {% endif %}
    <!-- Recherche rapide -->
    <div class="ms-auto search-input-wrap" style="max-width:260px">
      <i class="fas fa-search si-icon"></i>
      <input type="text" class="form-control form-control-sm" id="quickSearch"
             placeholder="Recherche rapide…">
    </div>
  </div>

  <!-- Tableau -->
  <div class="card border-0 shadow-sm" style="border-radius:16px">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table gtable mb-0" id="mainTable">
          <thead>
            <tr>
              <th data-col="0">N°</th>
              <th data-col="1">Date</th>
              <th data-col="2">Équipement</th>
              <th data-col="3">Description</th>
              <th data-col="4">Panne</th>
              <th data-col="5">Urgence</th>
              <th data-col="6">État</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="tableBody">
            {% for i in interventions %}
            <tr onclick="window.location='{{ url_for('voir_intervention', id=i.id) }}'"
                data-numero="{{ i.numero }}"
                data-date="{{ i.date }}"
                data-designation="{{ i.designation }}"
                data-description="{{ i.description }}"
                data-urgence="{{ i.degre }}"
                data-etat="{{ i.est_traiter }}">
              <td class="fw-semibold text-primary">{{ i.numero }}</td>
              <td class="text-muted" style="white-space:nowrap">{{ i.date }}</td>
              <td class="fw-semibold">{{ i.designation }}</td>
              <td class="text-muted" style="max-width:200px">
                <span title="{{ i.description }}">{{ i.description[:50] }}{% if i.description|length>50 %}…{% endif %}</span>
              </td>
              <td>{{ badge_panne(i.panne) }}</td>
              <td>
                {% if i.degre == 'Trés urgent' %}
                  <span class="badge badge-tres-urgent">🔴 Très urgent</span>
                {% elif i.degre == 'Urgent' %}
                  <span class="badge badge-urgent">🟡 Urgent</span>
                {% else %}
                  <span class="badge badge-normal">🔵 Normal</span>
                {% endif %}
              </td>
              <td>
                {% if i.annuler == 'oui' %}
                  <span class="badge badge-annule">✕ Annulée</span>
                {% elif i.est_traiter == 'oui' %}
                  <span class="badge badge-traite">✓ Traitée</span>
                {% else %}
                  <span class="badge badge-encours">⏳ En cours</span>
                {% endif %}
              </td>
              <td onclick="event.stopPropagation()">
                <div class="d-flex gap-1">
                  <a href="{{ url_for('voir_intervention', id=i.id) }}"
                     style="background:#eff6ff;color:#2563eb;border:none;border-radius:6px;padding:5px 9px;font-size:.75rem" class="btn btn-xs" title="Voir">
                    <i class="fas fa-eye"></i>
                  </a>
                  {% if i.est_traiter=='non' and i.annuler=='non' and permissions.can_edit %}
                  <a href="{{ url_for('traiter_intervention', id=i.id) }}"
                     style="background:#d1fae5;color:#065f46;border:none;border-radius:6px;padding:5px 9px;font-size:.75rem" class="btn btn-xs" title="Traiter"
                     onclick="event.stopPropagation();return confirm('Marquer comme traitée ?')">
                    <i class="fas fa-check"></i>
                  </a>
                  <a href="{{ url_for('annuler_intervention', id=i.id) }}"
                     style="background:#fef3c7;color:#92400e;border:none;border-radius:6px;padding:5px 9px;font-size:.75rem" class="btn btn-xs" title="Annuler"
                     onclick="event.stopPropagation();return confirm('Annuler cette intervention ?')">
                    <i class="fas fa-ban"></i>
                  </a>
                  {% endif %}
                  {% if permissions.can_delete %}
                  <a href="{{ url_for('supprimer_intervention', id=i.id) }}"
                     style="background:#fde8e6;color:#b91c1c;border:none;border-radius:6px;padding:5px 9px;font-size:.75rem" class="btn btn-xs" title="Supprimer"
                     onclick="event.stopPropagation();return confirm('Supprimer cette intervention ?')">
                    <i class="fas fa-trash"></i>
                  </a>
                  {% endif %}
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <!-- Pagination -->
      <div class="pagination-bar" id="paginationBar">
        <div class="pagination-info" id="paginationInfo"></div>
        <div class="pagination-controls" id="paginationControls"></div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    const PER_PAGE = 15;
    let currentPage = 1;
    let sortCol = -1;
    let sortAsc = true;
    let allRows = [];
    let filteredRows = [];

    const tbody = document.getElementById('tableBody');
    const quickSearch = document.getElementById('quickSearch');
    const countEl = document.getElementById('resultCount');
    const infoEl = document.getElementById('paginationInfo');
    const ctrlEl = document.getElementById('paginationControls');

    function getRows() {
        return Array.from(tbody.querySelectorAll('tr'));
    }

    function applyFilter() {
        const q = quickSearch.value.toLowerCase().trim();
        allRows = getRows();
        filteredRows = allRows.filter(tr => {
            if (!q) return true;
            return tr.textContent.toLowerCase().includes(q);
        });
        currentPage = 1;
        render();
    }

    function render() {
        const total = filteredRows.length;
        const pages = Math.max(1, Math.ceil(total / PER_PAGE));
        currentPage = Math.min(currentPage, pages);
        const start = (currentPage - 1) * PER_PAGE;
        const end   = start + PER_PAGE;

        allRows.forEach(tr => { tr.style.display = 'none'; });
        filteredRows.slice(start, end).forEach(tr => { tr.style.display = ''; });

        if (countEl) countEl.textContent = total + ' résultat(s)';

        // Pagination info
        if (infoEl) {
            const from = total === 0 ? 0 : start + 1;
            const to   = Math.min(end, total);
            infoEl.textContent = `Affichage ${from}–${to} sur ${total}`;
        }

        // Pagination controls
        if (ctrlEl) {
            let html = `<button class="page-btn" id="prevBtn" ${currentPage===1?'disabled':''} title="Précédent">
                <i class="fas fa-chevron-left" style="font-size:.65rem"></i></button>`;
            const maxBtns = 5;
            let from2 = Math.max(1, currentPage - Math.floor(maxBtns/2));
            let to2   = Math.min(pages, from2 + maxBtns - 1);
            if (to2 - from2 < maxBtns - 1) from2 = Math.max(1, to2 - maxBtns + 1);
            if (from2 > 1) html += `<button class="page-btn" data-p="1">1</button>${from2>2?'<span class="page-btn" style="cursor:default;border:none">…</span>':''}`;
            for (let p = from2; p <= to2; p++) {
                html += `<button class="page-btn ${p===currentPage?'active':''}" data-p="${p}">${p}</button>`;
            }
            if (to2 < pages) html += `${to2<pages-1?'<span class="page-btn" style="cursor:default;border:none">…</span>':''}<button class="page-btn" data-p="${pages}">${pages}</button>`;
            html += `<button class="page-btn" id="nextBtn" ${currentPage===pages||pages===0?'disabled':''} title="Suivant">
                <i class="fas fa-chevron-right" style="font-size:.65rem"></i></button>`;
            ctrlEl.innerHTML = html;

            ctrlEl.querySelectorAll('[data-p]').forEach(btn => {
                btn.addEventListener('click', () => { currentPage = parseInt(btn.dataset.p); render(); });
            });
            const prev = ctrlEl.querySelector('#prevBtn');
            const next = ctrlEl.querySelector('#nextBtn');
            if (prev && !prev.disabled) prev.addEventListener('click', () => { currentPage--; render(); });
            if (next && !next.disabled) next.addEventListener('click', () => { currentPage++; render(); });
        }
    }

    /* ── Tri par colonne ── */
    document.querySelectorAll('#mainTable th[data-col]').forEach(th => {
        th.addEventListener('click', function() {
            const col = parseInt(this.dataset.col);
            if (sortCol === col) { sortAsc = !sortAsc; }
            else { sortCol = col; sortAsc = true; }
            document.querySelectorAll('#mainTable th').forEach(t => t.classList.remove('sort-asc','sort-desc'));
            this.classList.add(sortAsc ? 'sort-asc' : 'sort-desc');
            filteredRows.sort((a, b) => {
                const aVal = a.cells[col]?.textContent.trim() ?? '';
                const bVal = b.cells[col]?.textContent.trim() ?? '';
                return sortAsc ? aVal.localeCompare(bVal,'fr') : bVal.localeCompare(aVal,'fr');
            });
            // Réordonne dans le DOM
            filteredRows.forEach(tr => tbody.appendChild(tr));
            allRows = getRows();
            render();
        });
    });

    /* ── Recherche rapide ── */
    quickSearch.addEventListener('input', applyFilter);

    /* ── Export CSV ── */
    document.getElementById('btnExportCSV').addEventListener('click', function() {
        const rows = getRows();
        const headers = ['N°','Date','Équipement','Description','Panne','Urgence','État'];
        const csvData = [headers.join(';')];
        rows.forEach(tr => {
            const cols = Array.from(tr.cells).slice(0, 7).map(td => {
                return '"' + td.textContent.trim().replace(/\s+/g,' ').replace(/"/g,'""') + '"';
            });
            csvData.push(cols.join(';'));
        });
        const blob = new Blob(['\uFEFF' + csvData.join('\n')], { type: 'text/csv;charset=utf-8;' });
        const url  = URL.createObjectURL(blob);
        const a    = document.createElement('a');
        a.href = url;
        a.download = 'interventions_' + new Date().toISOString().slice(0,10) + '.csv';
        document.body.appendChild(a); a.click();
        document.body.removeChild(a); URL.revokeObjectURL(url);
    });

    /* ── Init ── */
    allRows = getRows();
    filteredRows = [...allRows];
    render();

})();
</script>
{% endblock %}