{% extends 'base.html' %}

{% block content %}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  document.getElementById("dashboard").classList.add("is-active")
</script>

<!-- Title Bar - Minimal avec filtres avancés -->
<section class="section is-title-bar">
  <div class="level">
    <div class="level-left">
      <div class="level-item">
        <div>
          <h2 class="title is-4" style="margin-bottom: 4px; color: #1f2937;">Tableau de bord</h2>
          <p class="subtitle is-6" style="color: #6b7280; margin: 0;">Vue d'ensemble de vos activités</p>
        </div>
      </div>
    </div>
    <div class="level-right">
      <div class="level-item">
        <div class="field has-addons" style="margin-bottom: 0;">
          <div class="control">
            <div class="select">
              <select id="yearFilter">
                <option value="2026" {% if filter_year == '2026' %}selected{% endif %}>2026</option>
                <option value="2025" {% if filter_year == '2025' %}selected{% endif %}>2025</option>
                <option value="2024" {% if filter_year == '2024' %}selected{% endif %}>2024</option>
                <option value="2023" {% if filter_year == '2023' %}selected{% endif %}>2023</option>
                <option value="2022" {% if filter_year == '2022' %}selected{% endif %}>2022</option>
                <option value="2021" {% if filter_year == '2021' %}selected{% endif %}>2021</option>
                <option value="all" {% if filter_year == 'all' %}selected{% endif %}>Toutes les années</option>
              </select>
            </div>
          </div>
          <div class="control">
            <div class="select">
              <select id="monthFilter">
                <option value="all" {% if filter_month == 'all' %}selected{% endif %}>Tous les mois</option>
                <option value="1" {% if filter_month == '1' %}selected{% endif %}>Janvier</option>
                <option value="2" {% if filter_month == '2' %}selected{% endif %}>Février</option>
                <option value="3" {% if filter_month == '3' %}selected{% endif %}>Mars</option>
                <option value="4" {% if filter_month == '4' %}selected{% endif %}>Avril</option>
                <option value="5" {% if filter_month == '5' %}selected{% endif %}>Mai</option>
                <option value="6" {% if filter_month == '6' %}selected{% endif %}>Juin</option>
                <option value="7" {% if filter_month == '7' %}selected{% endif %}>Juillet</option>
                <option value="8" {% if filter_month == '8' %}selected{% endif %}>Août</option>
                <option value="9" {% if filter_month == '9' %}selected{% endif %}>Septembre</option>
                <option value="10" {% if filter_month == '10' %}selected{% endif %}>Octobre</option>
                <option value="11" {% if filter_month == '11' %}selected{% endif %}>Novembre</option>
                <option value="12" {% if filter_month == '12' %}selected{% endif %}>Décembre</option>
              </select>
            </div>
          </div>
          <div class="control">
            <button class="button is-primary" id="applyFilter">
              <span class="icon"><i class="mdi mdi-filter"></i></span>
              <span>Appliquer</span>
            </button>
          </div>
          <div class="control">
            <button class="button" id="exportBtn" title="Exporter en CSV">
              <span class="icon"><i class="mdi mdi-download"></i></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Stats Cards - Minimal -->
<section class="section is-main-section">
  <div class="tile is-ancestor">
    <div class="tile is-parent">
      <div class="card tile is-child stat-card" data-stat="transactions">
        <div class="card-content">
          <div class="level is-mobile">
            <div class="level-item">
              <div class="is-widget-label">
                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: var(--primary-red); border-radius: 50%;"></span>
                  <h3 class="subtitle is-6" style="margin: 0; color: #64748b; font-weight: 600;">TRANSACTIONS</h3>
                </div>
                <h1 class="title is-3" style="margin: 0 0 4px 0; font-weight: 700;">
                  <span class="counter" data-target="{{count}}">0</span>
                </h1>
                <p style="font-size: 13px; color: #10b981;">
                </p>
              </div>
            </div>
            <div class="level-item has-widget-icon">
              <div class="is-widget-icon">
                <span class="icon has-text-primary is-large">
                  <i class="mdi mdi-credit-card-multiple mdi-48px"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tile is-parent">
      <div class="card tile is-child stat-card" data-stat="revenus">
        <div class="card-content">
          <div class="level is-mobile">
            <div class="level-item">
              <div class="is-widget-label">
                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: var(--primary-orange); border-radius: 50%;"></span>
                  <h3 class="subtitle is-6" style="margin: 0; color: #64748b; font-weight: 600;">REVENUS</h3>
                </div>
                <h1 class="title is-3" style="margin: 0 0 4px 0; font-weight: 700;">
                  <span class="counter" data-target="{{payment_total_c}}">0</span> <span style="font-size: 16px; font-weight: 500; color: #64748b;">XOF</span>
                </h1>
                <p style="font-size: 13px; color: #10b981;">
                </p>
              </div>
            </div>
            <div class="level-item has-widget-icon">
              <div class="is-widget-icon">
                <span class="icon has-text-info is-large">
                  <i class="mdi mdi-cash-multiple mdi-48px"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="tile is-parent">
      <div class="card tile is-child stat-card" data-stat="retraits">
        <div class="card-content">
          <div class="level is-mobile">
            <div class="level-item">
              <div class="is-widget-label">
                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
                  <span style="display: inline-block; width: 8px; height: 8px; background: #ef4444; border-radius: 50%;"></span>
                  <h3 class="subtitle is-6" style="margin: 0; color: #64748b; font-weight: 600;">RETRAITS</h3>
                </div>
                <h1 class="title is-3" style="margin: 0 0 4px 0; font-weight: 700;">
                  <span class="counter" data-target="{{retrait_total_c}}">0</span> <span style="font-size: 16px; font-weight: 500; color: #64748b;">XOF</span>
                </h1>
                <p style="font-size: 13px; color: #ef4444;"> 
                </p>
              </div>
            </div>
            <div class="level-item has-widget-icon">
              <div class="is-widget-icon">
                <span class="icon is-large" style="color: #ef4444;">
                  <i class="mdi mdi-bank-transfer-out mdi-48px"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Charts Section -->
  <div class="columns">
    <div class="column is-6">
      <div class="card chart-card">
        <header class="card-header">
          <p class="card-header-title" style="font-weight: 600; color: var(--primary-dark);">
            <span class="icon" style="color: var(--primary-red);">
              <i class="mdi mdi-chart-line"></i>
            </span>
            <span>Évolution des Revenus</span>
          </p>
          <a class="card-header-icon refresh-chart" data-chart="revenus">
            <span class="icon" style="color: var(--primary-red);">
              <i class="mdi mdi-refresh"></i>
            </span>
          </a>
        </header>
        <div class="card-content">
          <canvas id="big-line-chart-revenus" height="300"></canvas>
        </div>
      </div>
    </div>

    <div class="column is-6">
      <div class="card chart-card">
        <header class="card-header">
          <p class="card-header-title" style="font-weight: 600; color: var(--primary-dark);">
            <span class="icon" style="color: var(--primary-orange);">
              <i class="mdi mdi-chart-bar"></i>
            </span>
            <span>Évolution des Retraits</span>
          </p>
          <a class="card-header-icon refresh-chart" data-chart="retraits">
            <span class="icon" style="color: var(--primary-orange);">
              <i class="mdi mdi-refresh"></i>
            </span>
          </a>
        </header>
        <div class="card-content">
          <canvas id="big-line-chart-retraits" height="300"></canvas>
        </div>
      </div>
    </div>
  </div>
<br>
<br>
<br>
  
  </div>
</section>

<style>
  /* Filter Buttons - Minimal */
  .filter-btn {
    border-radius: 8px !important;
    font-weight: 500;
    font-size: 13px;
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    background: white;
    color: #6b7280;
    transition: all 0.15s ease;
  }

  .filter-btn:hover {
    border-color: var(--primary-red);
    color: var(--primary-red);
    background: #fef2f2;
  }

  .filter-btn.is-active {
    background: var(--primary-red) !important;
    color: white !important;
    border-color: var(--primary-red) !important;
  }

  /* Stat Cards - Minimal */
  .stat-card {
    cursor: pointer;
    transition: border-color 0.2s ease;
  }

  .stat-card:hover {
    border-color: #e5e7eb;
  }

  /* Chart Cards */
  .chart-card {
    height: 450px;
  }

  .chart-card .card-content {
    height: calc(100% - 52px);
    padding: 24px;
  }

  .refresh-chart {
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .refresh-chart:hover {
    transform: rotate(180deg);
  }

  .refresh-chart.spinning {
    animation: spin 1s linear infinite;
  }

  /* Card Header - Minimal */
  .card-header {
    border-bottom: 1px solid #f3f4f6;
    padding: 16px 24px;
    background: #fafafa;
  }

  /* Table Enhancements */
  .table-container {
    max-height: 400px;
    overflow-y: auto;
  }

  /* Search Input */
  #searchTransactions {
    width: 250px;
  }

  /* Responsive */
  @media screen and (max-width: 768px) {
    /* Header responsive */
    .section.is-title-bar .level {
      display: block;
    }
    
    .section.is-title-bar .level-left,
    .section.is-title-bar .level-right {
      margin-bottom: 1rem;
    }
    
    .section.is-title-bar .level-item {
      justify-content: flex-start;
    }
    
    /* Filtres responsive */
    .field.has-addons {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .field.has-addons .control {
      width: 100%;
    }
    
    .field.has-addons .select,
    .field.has-addons .select select,
    .field.has-addons .button {
      width: 100%;
    }
    
    .buttons.has-addons {
      flex-wrap: wrap;
    }
    
    .filter-btn {
      font-size: 12px;
      padding: 6px 10px;
    }
    
    .chart-card {
      height: auto;
    }
  }
</style>

<script>
  // ========== Utility Functions ==========
  function formatCurrency(amount) {
    // Arrondir le montant
    const rounded = Math.round(amount);
    // Formater avec séparateurs de milliers
    return rounded.toLocaleString('fr-FR');
  }

  function formatLargeNumber(num) {
    // Arrondir et formater les grands nombres (ex: 1.2M, 500K)
    num = Math.round(num);
    if (num >= 1000000) {
      return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'K';
    }
    return num.toLocaleString('fr-FR');
  }

  // ========== Counter Animation ==========
  function animateCounter(element) {
    const target = parseInt(element.getAttribute('data-target'));
    const duration = 2000;
    const step = target / (duration / 16);
    let current = 0;

    const updateCounter = () => {
      current += step;
      if (current < target) {
        element.textContent = formatCurrency(Math.floor(current));
        requestAnimationFrame(updateCounter);
      } else {
        element.textContent = formatCurrency(target);
      }
    };

    updateCounter();
  }

  // Animate counters on page load
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.counter').forEach(counter => {
      animateCounter(counter);
    });
  });

  // ========== Filtres Année/Mois ==========
  const yearFilter = document.getElementById('yearFilter');
  const monthFilter = document.getElementById('monthFilter');
  const applyFilterBtn = document.getElementById('applyFilter');
  const exportBtn = document.getElementById('exportBtn');

  // Gestion du filtre  
  applyFilterBtn.addEventListener('click', function() {
    const year = yearFilter.value;
    const month = monthFilter.value;
    
    // Add loading state
    this.classList.add('is-loading');
    
    // Construire l'URL avec les paramètres de filtre
    let filterUrl = window.location.pathname + '?';
    if (year !== 'all') filterUrl += `year=${year}&`;
    if (month !== 'all') filterUrl += `month=${month}&`;
    
    // Recharger la page avec les nouveaux paramètres
    window.location.href = filterUrl;
  });

  // Export en CSV
  exportBtn.addEventListener('click', function() {
    const year = yearFilter.value;
    const month = monthFilter.value;
    
    let exportUrl = '/export-dashboard?';
    if (year !== 'all') exportUrl += `year=${year}&`;
    if (month !== 'all') exportUrl += `month=${month}`;
    
    showNotification('Export des données en cours...', 'info');
    
    // Télécharger le fichier CSV
    setTimeout(() => {
      window.location.href = exportUrl;
      showNotification('Export terminé!', 'success');
    }, 1000);
  });

  // ========== Charts Configuration ==========
  const chartColors = {
    primary: '#C62828',
    primaryLight: 'rgba(198, 40, 40, 0.2)',
    secondary: '#D84315',
    secondaryLight: 'rgba(216, 67, 21, 0.2)',
    success: '#10b981',
    danger: '#ef4444',
  };

  // Revenus Chart - Minimal
  const ctxRevenus = document.getElementById('big-line-chart-revenus').getContext('2d');

  const revenusChart = new Chart(ctxRevenus, {
    type: 'line',
    data: {
      labels: [{% for item in p_labels %}"{{ item }}",{% endfor %}],
      datasets: [{
        label: "Revenus (XOF)",
        data: [{% for item in p_values %}{{ item }},{% endfor %}],
        backgroundColor: 'rgba(198, 40, 40, 0.08)',
        borderColor: chartColors.primary,
        borderWidth: 2,
        fill: true,
        tension: 0.3,
        pointRadius: 4,
        pointHoverRadius: 6,
        pointBackgroundColor: '#fff',
        pointBorderColor: chartColors.primary,
        pointBorderWidth: 2,
        pointHoverBackgroundColor: chartColors.primary,
        pointHoverBorderColor: '#fff',
        pointHoverBorderWidth: 2,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
        mode: 'index',
      },
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          padding: 12,
          cornerRadius: 8,
          titleFont: {
            size: 14,
            weight: 'bold'
          },
          bodyFont: {
            size: 13
          },
          callbacks: {
            label: function(context) {
              return ' ' + context.parsed.y.toLocaleString('fr-FR') + ' XOF';
            }
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: 'rgba(0, 0, 0, 0.05)',
            drawBorder: false,
          },
          ticks: {
            font: {
              size: 12,
              weight: '500'
            },
            color: '#64748b',
            callback: function(value) {
              return value.toLocaleString('fr-FR') + ' XOF';
            }
          }
        },
        x: {
          grid: {
            display: false,
            drawBorder: false,
          },
          ticks: {
            font: {
              size: 12,
              weight: '500'
            },
            color: '#64748b'
          }
        }
      },
      animation: {
        duration: 1500,
        easing: 'easeInOutQuart'
      }
    }
  });

  // Retraits Chart - Minimal
  const ctxRetraits = document.getElementById('big-line-chart-retraits').getContext('2d');

  const retraitsChart = new Chart(ctxRetraits, {
    type: 'bar',
    data: {
      labels: [{% for item in r_labels %}"{{ item }}",{% endfor %}],
      datasets: [{
        label: "Retraits (XOF)",
        data: [{% for item in r_values %}{{ item }},{% endfor %}],
        backgroundColor: chartColors.secondary,
        borderColor: chartColors.secondary,
        borderWidth: 0,
        borderRadius: 8,
        borderSkipped: false,
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        intersect: false,
        mode: 'index',
      },
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          padding: 12,
          cornerRadius: 8,
          titleFont: {
            size: 14,
            weight: 'bold'
          },
          bodyFont: {
            size: 13
          },
          callbacks: {
            label: function(context) {
              return ' ' + context.parsed.y.toLocaleString('fr-FR') + ' XOF';
            }
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            color: 'rgba(0, 0, 0, 0.05)',
            drawBorder: false,
          },
          ticks: {
            font: {
              size: 12,
              weight: '500'
            },
            color: '#64748b',
            callback: function(value) {
              return value.toLocaleString('fr-FR') + ' XOF';
            }
          }
        },
        x: {
          grid: {
            display: false,
            drawBorder: false,
          },
          ticks: {
            font: {
              size: 12,
              weight: '500'
            },
            color: '#64748b'
          }
        }
      },
      animation: {
        duration: 1500,
        easing: 'easeInOutQuart'
      }
    }
  });

  // ========== Refresh Charts ==========
  document.querySelectorAll('.refresh-chart').forEach(btn => {
    btn.addEventListener('click', function(e) {
      e.preventDefault();
      const icon = this.querySelector('i');
      icon.classList.add('spinning');

      const chartType = this.getAttribute('data-chart');
      const chart = chartType === 'revenus' ? revenusChart : retraitsChart;

      setTimeout(() => {
        chart.update('none');
        chart.update();
        icon.classList.remove('spinning');
        showNotification('Graphique actualisé avec succès', 'success');
      }, 1000);
    });
  });

  // ========== Search Transactions ==========
  const searchInput = document.getElementById('searchTransactions');
  if (searchInput) {
    searchInput.addEventListener('input', function(e) {
      const searchTerm = e.target.value.toLowerCase();
      const rows = document.querySelectorAll('#transactionsTableBody tr');

      rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(searchTerm) ? '' : 'none';
      });
    });
  }

  // ========== Stat Card Click Animation ==========
  document.querySelectorAll('.stat-card').forEach(card => {
    card.addEventListener('click', function() {
      const stat = this.getAttribute('data-stat');
      console.log('Stat card clicked:', stat);
      
      // Minimal feedback - no animation
    });
  });

  // ========== Notification System ==========
  function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification is-${type}`;
    notification.style.cssText = `
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      min-width: 300px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
      animation: slideIn 0.3s ease;
    `;
    notification.innerHTML = `
      <button class="delete"></button>
      ${message}
    `;

    document.body.appendChild(notification);

    notification.querySelector('.delete').addEventListener('click', () => {
      notification.style.animation = 'slideOut 0.3s ease';
      setTimeout(() => notification.remove(), 300);
    });

    setTimeout(() => {
      notification.style.animation = 'slideOut 0.3s ease';
      setTimeout(() => notification.remove(), 300);
    }, 3000);
  }

  // ========== Additional Animations ==========
  const style = document.createElement('style');
  style.textContent = `
    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateX(100px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes slideOut {
      from {
        opacity: 1;
        transform: translateX(0);
      }
      to {
        opacity: 0;
        transform: translateX(100px);
      }
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .spinning {
      animation: spin 1s linear infinite;
    }
  `;
  document.head.appendChild(style);
</script>

{% endblock %}