{% extends "base.html" %}
{% block title %}Dashboard – AAZ Accounting{% endblock %}
{% block page_title %}Dashboard comptable{% endblock %}

{% block topbar_actions %}
<select id="yearPicker" class="btn btn-outline btn-sm" onchange="location='?year='+this.value">
  {% for y in years %}<option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>{{ y }}</option>{% endfor %}
</select>
<a href="{{ url_for('upload.index') }}" class="btn btn-primary btn-sm">⬆ Importer un relevé</a>
{% endblock %}

{% block content %}

<!-- KPIs -->
<div class="kpi-grid">
  <div class="kpi-card success">
    <div class="kpi-label">Recettes HT</div>
    <div class="kpi-value">{{ "%.2f"|format(kpis.recettes) }} €</div>
    <div class="kpi-sub">{{ selected_year }}</div>
  </div>
  <div class="kpi-card danger">
    <div class="kpi-label">Charges HT</div>
    <div class="kpi-value">{{ "%.2f"|format(kpis.charges_ht) }} €</div>
  </div>
  <div class="kpi-card {% if kpis.resultat >= 0 %}primary{% else %}danger{% endif %}">
    <div class="kpi-label">Résultat estimé</div>
    <div class="kpi-value">{{ "%.2f"|format(kpis.resultat) }} €</div>
  </div>
  <div class="kpi-card info">
    <div class="kpi-label">TVA collectée</div>
    <div class="kpi-value">{{ "%.2f"|format(kpis.tva_collectee) }} €</div>
  </div>
  <div class="kpi-card info">
    <div class="kpi-label">TVA déductible</div>
    <div class="kpi-value">{{ "%.2f"|format(kpis.tva_deductible) }} €</div>
  </div>
  <div class="kpi-card {% if kpis.tva_solde >= 0 %}warning{% else %}success{% endif %}">
    <div class="kpi-label">Solde TVA à payer</div>
    <div class="kpi-value">{{ "%.2f"|format(kpis.tva_solde) }} €</div>
    <div class="kpi-sub">Collectée – Déductible</div>
  </div>
  {% if kpis.pending_entries > 0 %}
  <div class="kpi-card warning" style="--kpi-color:#F39C12">
    <div class="kpi-label">En attente validation</div>
    <div class="kpi-value">{{ kpis.pending_entries }}</div>
    <div class="kpi-sub"><a href="{{ url_for('journal.index') }}?status=draft" style="color:inherit">Voir le journal →</a></div>
  </div>
  {% endif %}
</div>

<!-- Graphiques -->
<div class="charts-grid">
  <div class="card">
    <div class="card-header">Dépenses vs Recettes – {{ selected_year }}</div>
    <div class="card-body">
      <div class="chart-container"><canvas id="monthlyChart"></canvas></div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">Répartition TVA</div>
    <div class="card-body">
      <div class="chart-container"><canvas id="tvaChart"></canvas></div>
    </div>
  </div>
</div>

<!-- Top comptes de charge -->
<div class="card mb-2">
  <div class="card-header">
    Top comptes de charge
    <a href="{{ url_for('export.index') }}" class="btn btn-outline btn-sm">Exporter Sage</a>
  </div>
  <div class="card-body" style="padding:0">
    <div class="table-wrapper">
      <table>
        <thead>
          <tr>
            <th>Compte</th><th>Libellé</th><th class="text-right">Montant HT</th>
          </tr>
        </thead>
        <tbody>
          {% for acc in top_accounts %}
          <tr>
            <td class="font-mono">{{ acc.account }}</td>
            <td>{{ acc.label }}</td>
            <td class="text-right font-mono">{{ "%.2f"|format(acc.total) }} €</td>
          </tr>
          {% else %}
          <tr><td colspan="3" class="text-center text-muted">Aucune donnée</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Dernières écritures à valider -->
{% if recent_entries %}
<div class="card">
  <div class="card-header">
    Écritures à valider
    <a href="{{ url_for('journal.index') }}" class="btn btn-outline btn-sm">Voir tout →</a>
  </div>
  <div class="card-body" style="padding:0">
    <div class="table-wrapper">
      <table>
        <thead>
          <tr>
            <th>Date</th><th>Pièce</th><th>Libellé</th>
            <th>Compte</th><th class="text-right">Débit</th>
            <th>Confiance</th><th>Action</th>
          </tr>
        </thead>
        <tbody>
          {% for e in recent_entries %}
          <tr class="{% if e.is_formation %}tr-formation{% elif e.account_number == '512000' %}tr-bank{% endif %}">
            <td>{{ e.entry_date.strftime('%d/%m/%Y') }}</td>
            <td class="font-mono">{{ e.piece_ref or '–' }}</td>
            <td>{{ e.label[:50] }}{% if e.label|length > 50 %}…{% endif %}</td>
            <td class="font-mono">{{ e.account_number }}</td>
            <td class="text-right font-mono">{% if e.debit %}{{ "%.2f"|format(e.debit) }} €{% endif %}</td>
            <td>
              {% set conf = e.classification_confidence %}
              <span class="{% if conf >= 0.9 %}confidence-high{% elif conf >= 0.6 %}confidence-medium{% else %}confidence-low{% endif %}">
                {{ "%.0f"|format(conf * 100) }}%
              </span>
            </td>
            <td>
              <button class="btn btn-success btn-sm" onclick="validateEntry({{ e.id }}, this)">✓</button>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script nonce="{{ csp_nonce() if csp_nonce is defined else '' }}">
const monthlyData = {{ chart_data | tojson }};
const tvaData = {{ tva_data | tojson }};

// Graphique mensuel
new Chart(document.getElementById('monthlyChart'), {
  type: 'bar',
  data: {
    labels: monthlyData.labels,
    datasets: [
      { label: 'Recettes', data: monthlyData.recettes, backgroundColor: '#27AE6033', borderColor: '#27AE60', borderWidth: 2, borderRadius: 4 },
      { label: 'Charges',  data: monthlyData.charges,  backgroundColor: '#E74C3C33', borderColor: '#E74C3C', borderWidth: 2, borderRadius: 4 },
    ]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { position: 'top' } },
    scales: {
      y: { beginAtZero: true, ticks: { callback: v => v.toLocaleString('fr-FR') + ' €' } },
      x: { grid: { display: false } }
    }
  }
});

// Graphique TVA
new Chart(document.getElementById('tvaChart'), {
  type: 'doughnut',
  data: {
    labels: tvaData.labels,
    datasets: [{ data: tvaData.values, backgroundColor: tvaData.colors, borderWidth: 2 }]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: {
      legend: { position: 'bottom' },
      tooltip: { callbacks: { label: ctx => ctx.label + ': ' + ctx.parsed.toFixed(2) + ' €' } }
    }
  }
});

async function validateEntry(id, btn) {
  btn.disabled = true;
  const r = await fetch(`/journal/${id}/validate`, {
    method: 'POST',
    headers: { 'X-CSRFToken': document.cookie.match(/csrf_token=([^;]+)/)?.[1] || '' }
  });
  if (r.ok) {
    btn.closest('tr').style.opacity = '.4';
    btn.textContent = '✓ OK';
  }
}
</script>
{% endblock %}