@extends('layouts.app')

@section('content')

<div class="container">
  <h2 class="mt-3 mb-4">Statistiques</h2>

  {{-- Formulaire période + Utilisateur --}}
  <form id="statsForm" class="mb-4">
    @csrf
    <div class="form-row">
      {{-- Sélection d’utilisateur --}}
      <div class="col-md-3">
        <label for="user_id">Utilisateur</label>
        @php
             $allUsers = $allUsers ?? \App\Models\Account::orderBy('user_name')->get(['id','user_name']);
        @endphp

        <select id="user_id" name="user_id" class="form-control">
          <option value="">Tous les utilisateurs</option>
          @forelse($allUsers as $u)
            <option value="{{ $u->id }}">{{ $u->user_name }}</option>
          @empty
            <option value="" disabled>Aucun utilisateur trouvé</option>
          @endforelse
        </select>
      </div>

      {{-- Dates --}}
      <div class="col-md-3">
        <label for="date_debut">Date de début</label>
        <input type="date" id="date_debut" name="date_debut" class="form-control" value="{{ $oldestDate ?? '' }}">
      </div>
      <div class="col-md-3">
        <label for="date_fin">Date de fin</label>
        <input type="date" id="date_fin" name="date_fin" class="form-control">
      </div>

      {{-- Soumettre --}}
      <div class="col-md-3 d-flex align-items-end">
        <button id="submitBtn" type="submit" class="btn btn-primary btn-block">Soumettre</button>
      </div>
    </div>
  </form>

  {{-- Zone charts (masquée pendant le chargement) --}}
  <div id="chartsWrapper" style="display:none;">
    <div class="row">
      {{-- 1) Produits (camembert) --}}
      <div class="col-lg-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="text-center">Produits les plus vendus</h5>
            <div class="chart-box"><canvas id="chartProducts"></canvas></div>
            <div id="chartProducts-legend" class="chart-widget-list mt-3 legend-scroll"></div>
          </div>
        </div>
      </div>

      {{-- 2) Vendeurs (camembert) --}}
      <div class="col-lg-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="text-center">Numéros de série par vendeur</h5>
            <div class="chart-box"><canvas id="chartVendors"></canvas></div>
            <div id="chartVendors-legend" class="chart-widget-list mt-3 legend-scroll"></div>
          </div>
        </div>
      </div>

      {{-- 3) Courbe + contrôles --}}
      <div class="col-lg-4 mb-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="text-center">Ventes par période</h5>
            <div class="chart-box"><canvas id="chartTimeseries"></canvas></div>

            <div id="granularityControls" class="d-flex justify-content-center mt-2">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="granularity" id="g_day" value="day" checked>
                <label class="form-check-label" for="g_day">Jour</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="granularity" id="g_month" value="month">
                <label class="form-check-label" for="g_month">Mois</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="granularity" id="g_year" value="year">
                <label class="form-check-label" for="g_year">Année</label>
              </div>
            </div>
            <div class="text-center small text-muted mt-1">(Clique pour redessiner uniquement la courbe)</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- Tableau agrégé (visible uniquement si un utilisateur est sélectionné) --}}
  <div id="serialsAggWrapper" class="mt-3" style="display:none;">
    <h5 class="mb-3">Numéros de série par date — <span id="userSerialsTitle"></span></h5>
    <div class="table-responsive" style="max-height:380px; overflow:auto;">
      <table class="table table-sm table-striped mb-0">
        <thead>
          <tr>
            <th style="white-space:nowrap;">Date</th>
            <th>Détails (compte par modèle)</th>
          </tr>
        </thead>
        <tbody id="userSerialsBody"></tbody>
      </table>
    </div>
    <div class="small text-muted mt-2" id="userSerialsNote">Agrégation par date et par modèle (volume décroissant).</div>
  </div>

  {{-- Overlay chargement --}}
  <div id="loadingOverlay" class="loading-overlay" style="display:none;">
    <div class="spinner-border" role="status"><span class="sr-only">Chargement…</span></div>
  </div>
</div>

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

<style>
  .chart-widget-list p{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .legend-dot{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;}
  #granularityControls .form-check{margin:0 6px;}

  .chart-box{height:295px; position:relative;}
  .chart-box canvas{max-height:100% !important;}

  .legend-scroll{max-height:120px; overflow:auto;}

  .loading-overlay{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.6); z-index:2000;
  }
</style>

<script>
(function(){
  var startEl   = document.getElementById('date_debut');
  var endEl     = document.getElementById('date_fin');
  var userEl    = document.getElementById('user_id');
  var submitBtn = document.getElementById('submitBtn');
  var chartsEl  = document.getElementById('chartsWrapper');
  var overlay   = document.getElementById('loadingOverlay');

  function showLoading(on){
    overlay.style.display = on ? 'flex' : 'none';
    if (submitBtn) submitBtn.disabled = !!on;
  }

  function getGranularity(){
    var checked = document.querySelector('input[name="granularity"]:checked');
    return checked ? checked.value : 'day';
  }

  function buildParams(granularity){
    var p = [];
    if (userEl && userEl.value) p.push('user_id='+encodeURIComponent(userEl.value));
    if (startEl.value)          p.push('date_debut='+encodeURIComponent(startEl.value));
    if (endEl.value)            p.push('date_fin='+encodeURIComponent(endEl.value));
    if (granularity)            p.push('granularity='+encodeURIComponent(granularity));
    return p.length ? ('?'+p.join('&')) : '';
  }

  function safeSetDate(el, val){
    if (/^\d{4}-\d{2}-\d{2}$/.test(val)) el.value = val;
  }

  async function fetchStats(granularity){
    var url = '{{ route('pages.dashboard.stats') }}' + buildParams(granularity);
    const res = await fetch(url, { headers:{ 'Accept':'application/json' }});
    // Pas de popup : on journalise et on tente d'avancer
    if(!res.ok){
      let msg = 'HTTP ' + res.status;
      try { const j = await res.json(); if (j && j.message) msg += ' — ' + j.message; } catch(_){}
      console.warn('stats error:', msg);
      throw new Error(msg);
    }
    const ct = (res.headers.get('content-type')||'').toLowerCase();
    if(!ct.includes('application/json')){
      console.warn('Réponse non JSON');
      throw new Error('Réponse non JSON');
    }
    return res.json();
  }

  function destroyChartByCanvasId(id){
    var el = document.getElementById(id);
    if (!el) return;
    var prev = Chart.getChart(el);
    if (prev) prev.destroy();
  }

  function renderPie(canvasId, labels, data){
    destroyChartByCanvasId(canvasId);
    var el = document.getElementById(canvasId);
    if (!el) return null;
    return new Chart(el.getContext('2d'), {
      type:'pie',
      data:{ labels:labels, datasets:[{ data:data, borderWidth:1 }] },
      options:{ responsive:true, maintainAspectRatio:false }
    });
  }

  function renderLine(canvasId, labels, data){
    destroyChartByCanvasId(canvasId);
    var el = document.getElementById(canvasId);
    if (!el) return null;
    return new Chart(el.getContext('2d'), {
      type:'line',
      data:{ labels:labels, datasets:[{ label:'Ventes', data:data, tension:0.25, fill:false, pointRadius:2, borderWidth:2 }] },
      options:{
        responsive:true, maintainAspectRatio:false,
        scales:{ x:{ ticks:{ autoSkip:true, maxTicksLimit:8 }}, y:{ beginAtZero:true, precision:0 }},
        plugins:{ legend:{ display:false } }
      }
    });
  }

  function renderLegend(containerId, chart, labels, data){
    var el = document.getElementById(containerId);
    if (!el || !chart) return;
    el.innerHTML = '';
    var colors = chart.data.datasets[0].backgroundColor || [];
    for (var i=0;i<labels.length;i++){
      var lbl = labels[i], val = data[i] ?? 0;
      var color = colors[i] || '#888';
      var p = document.createElement('p');
      p.innerHTML = '<span class="legend-dot" style="background:'+color+'"></span><span>'+lbl+'</span><span>'+val+'</span>';
      el.appendChild(p);
    }
  }

  // ---- TABLEAU AGRÉGÉ PAR DATE/MODÈLE ----
  function renderUserSerials(json){
    var wrap  = document.getElementById('serialsAggWrapper');
    var tbody = document.getElementById('userSerialsBody');
    var title = document.getElementById('userSerialsTitle');

    var hasUser = userEl && userEl.value;
    if (!hasUser) {
      // Pas d’utilisateur => table masquée et vidée
      if (tbody) tbody.innerHTML = '';
      if (wrap)  wrap.style.display = 'none';
      return;
    }

    var rows = Array.isArray(json.serials_agg) ? json.serials_agg : [];

    if (tbody) {
      tbody.innerHTML = '';
      if (rows.length === 0) {
        // Pas de popup : message inline
        var tr = document.createElement('tr');
        tr.innerHTML = '<td colspan="2" class="text-center text-muted">Aucune donnée pour cet utilisateur dans la période.</td>';
        tbody.appendChild(tr);
      } else {
        rows.forEach(function(r){
          var tr = document.createElement('tr');
          tr.innerHTML =
            '<td style="white-space:nowrap;">' + (r.date || '') + '</td>' +
            '<td>' + (r.line || '') + '</td>';
          tbody.appendChild(tr);
        });
      }
    }

    // Libellé utilisateur + période
    var selectedText = (userEl && userEl.options[userEl.selectedIndex])
        ? userEl.options[userEl.selectedIndex].text
        : ('ID ' + userEl.value);
    if (title) title.textContent = selectedText + ' — ' + (json.period?.start || '') + ' → ' + (json.period?.end || '');

    if (wrap) wrap.style.display = 'block';
  }

  async function initialLoad(){
    showLoading(true);
    try{
      const json = await fetchStats(getGranularity());
      if(!startEl.value && json.period?.start) safeSetDate(startEl, json.period.start);
      if(!endEl.value   && json.period?.end)   safeSetDate(endEl,   json.period.end);

      var cp = renderPie('chartProducts', json.products.labels, json.products.data);
      renderLegend('chartProducts-legend', cp, json.products.labels, json.products.data);

      var cv = renderPie('chartVendors', json.vendors.labels, json.vendors.data);
      renderLegend('chartVendors-legend', cv, json.vendors.labels, json.vendors.data);

      renderLine('chartTimeseries', json.timeseries.labels, json.timeseries.data);

      renderUserSerials(json);

      chartsEl.style.display = 'block';
    } catch(err){
      console.warn('Chargement stats (initial):', err);
      // On n’affiche pas de popup. On laisse l’UI telle quelle.
    } finally {
      showLoading(false);
    }
  }

  async function refreshAll(){
    showLoading(true);
    try{
      const json = await fetchStats(getGranularity());

      var cp = renderPie('chartProducts', json.products.labels, json.products.data);
      renderLegend('chartProducts-legend', cp, json.products.labels, json.products.data);

      var cv = renderPie('chartVendors', json.vendors.labels, json.vendors.data);
      renderLegend('chartVendors-legend', cv, json.vendors.labels, json.vendors.data);

      renderLine('chartTimeseries', json.timeseries.labels, json.timeseries.data);

      renderUserSerials(json);

      chartsEl.style.display = 'block';
    } catch(err){
      console.warn('Chargement stats (refreshAll):', err);
    } finally {
      showLoading(false);
    }
  }

  async function refreshTimeseriesOnly(){
    showLoading(true);
    try{
      const json = await fetchStats(getGranularity());
      renderLine('chartTimeseries', json.timeseries.labels, json.timeseries.data);
      // Le tableau ne dépend pas de la granularité -> pas de rerender ici
    } catch(err){
      console.warn('Série temporelle:', err);
    } finally {
      showLoading(false);
    }
  }

  document.getElementById('statsForm').addEventListener('submit', function(e){ e.preventDefault(); refreshAll(); });
  document.getElementById('granularityControls').addEventListener('change', function(e){
    if(e.target && e.target.name === 'granularity'){ refreshTimeseriesOnly(); }
  });

  if (userEl) {
    userEl.addEventListener('change', function(){
      // Quand on (dé)sélectionne un user, on recharge tout (charts + tableau)
      refreshAll();
    });
  }

  initialLoad();
})();
</script>
@endsection