{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block topbar_actions %}
<a href="{{ url_for('preventivi_export') }}{% if stato %}?stato={{ stato }}{% endif %}{% if q %}&q={{ q }}{% endif %}" class="btn btn-secondary" title="Esporta Excel">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
  Excel
</a>
<a href="{{ url_for('preventivo_nuovo') }}" class="btn btn-primary">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
  Nuovo Preventivo
</a>
{% endblock %}

{% block content %}
<!-- Stats -->
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px">
  <div class="stat-card">
    <div style="display:flex;justify-content:space-between;align-items:flex-start">
      <div><div class="val">{{ stats.totali }}</div><div class="lbl">Preventivi totali</div></div>
      <div class="icon" style="background:#EFF6FF"><svg viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg></div>
    </div>
  </div>
  <div class="stat-card">
    <div style="display:flex;justify-content:space-between;align-items:flex-start">
      <div><div class="val">{{ stats.bozze }}</div><div class="lbl">Bozze</div></div>
      <div class="icon" style="background:#F8FAFC"><svg viewBox="0 0 24 24" fill="none" stroke="#64748B" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></div>
    </div>
  </div>
  <div class="stat-card">
    <div style="display:flex;justify-content:space-between;align-items:flex-start">
      <div><div class="val">{{ stats.inviati }}</div><div class="lbl">Inviati</div></div>
      <div class="icon" style="background:#EFF6FF"><svg viewBox="0 0 24 24" fill="none" stroke="#2563EB" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22,2 15,22 11,13 2,9"/></svg></div>
    </div>
  </div>
  <div class="stat-card">
    <div style="display:flex;justify-content:space-between;align-items:flex-start">
      <div><div class="val">{{ stats.firmati }}</div><div class="lbl">Accettati</div></div>
      <div class="icon" style="background:#F0FDF4"><svg viewBox="0 0 24 24" fill="none" stroke="#16A34A" stroke-width="2"><polyline points="20,6 9,17 4,12"/></svg></div>
    </div>
  </div>
</div>

{% if stats.valore > 0 %}
<div style="background:linear-gradient(135deg,#1E40AF,#2563EB);border-radius:10px;padding:16px 20px;margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;color:#fff">
  <div>
    <div style="font-size:11px;opacity:.8;font-weight:600;text-transform:uppercase;letter-spacing:.06em">Valore pipeline (inviati + firmati)</div>
    <div style="font-size:28px;font-weight:700;margin-top:2px">€ {{ "%.2f"|format(stats.valore) }}</div>
  </div>
  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="1.5"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</div>
{% endif %}

<!-- Grafico mensile -->
<div class="card" style="margin-bottom:20px">
  <div class="card-header">
    <h3>📊 Andamento mensile</h3>
    <button class="btn btn-sm btn-secondary" onclick="toggleChart(this)">Mostra</button>
  </div>
  <div id="chart-wrap" style="display:none;padding:16px">
    <canvas id="myChart" height="90"></canvas>
  </div>
</div>

<!-- Filtri + Ricerca -->
<div class="card">
  <div class="card-header">
    <h3>Preventivi</h3>
    <div style="display:flex;gap:8px;align-items:center">
      <form method="GET" style="display:flex;gap:6px;align-items:center">
        <input type="hidden" name="stato" value="{{ stato }}">
        <input type="text" name="q" value="{{ q }}" class="form-control" placeholder="🔍 Cerca numero, cliente, titolo…" style="width:240px;padding:6px 10px;font-size:12px">
        <button type="submit" class="btn btn-sm btn-secondary">Cerca</button>
        {% if q %}<a href="{{ url_for('dashboard') }}?stato={{ stato }}" class="btn btn-sm btn-ghost">✕</a>{% endif %}
      </form>
      {% for s, lbl in [('','Tutti'),('bozza','Bozze'),('inviato','Inviati'),('firmato','Firmati')] %}
      <a href="?stato={{ s }}{% if q %}&q={{ q }}{% endif %}" class="btn btn-sm {% if stato == s %}btn-primary{% else %}btn-secondary{% endif %}">{{ lbl }}</a>
      {% endfor %}
    </div>
  </div>

  {% if preventivi %}
  <table class="table">
    <thead>
      <tr>
        <th>Numero</th>
        <th>Cliente</th>
        <th>Titolo</th>
        <th>Data</th>
        <th>Stato</th>
        <th style="text-align:right">Azioni</th>
      </tr>
    </thead>
    <tbody>
      {% for p in preventivi %}
      <tr>
        <td><a href="{{ url_for('preventivo_detail', pid=p.id) }}">{{ p.numero }}</a></td>
        <td>{{ p.cliente_nome or '—' }}</td>
        <td style="color:#64748B">{{ p.titolo or '—' }}</td>
        <td style="color:#94A3B8;font-size:12px">{{ p.data_creazione[:10] }}</td>
        <td>
          <span class="badge badge-{{ p.stato }}">{{ p.stato }}</span>
          {% if p.scadenza_status == 'in_scadenza' %}
            <span class="badge badge-in_scadenza" style="margin-left:4px">
              ⏰ scade in {{ p.scadenza_giorni }}g
            </span>
          {% elif p.scadenza_status == 'scaduto' %}
            <span class="badge badge-scaduto" style="margin-left:4px">⚠️ scaduto</span>
          {% endif %}
        </td>
        <td style="text-align:right">
          <a href="{{ url_for('preventivo_detail', pid=p.id) }}" class="btn btn-sm btn-secondary">Apri</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="empty-state">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/></svg>
    <h3>{% if q %}Nessun risultato per "{{ q }}"{% else %}Nessun preventivo{% endif %}</h3>
    <p>{% if q %}<a href="{{ url_for('dashboard') }}">Rimuovi filtro</a>{% else %}Crea il tuo primo preventivo in 1 click!{% endif %}</p>
    {% if not q %}<br><a href="{{ url_for('preventivo_nuovo') }}" class="btn btn-primary">Nuovo Preventivo</a>{% endif %}
  </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
let chartLoaded = false;
let chartInstance = null;

function toggleChart(btn){
  const wrap = document.getElementById('chart-wrap');
  if(wrap.style.display === 'none'){
    wrap.style.display = 'block';
    btn.textContent = 'Nascondi';
    if(!chartLoaded){ loadChart(); chartLoaded=true; }
  } else {
    wrap.style.display = 'none';
    btn.textContent = 'Mostra';
  }
}

function loadChart(){
  fetch('/api/stats/mensili').then(r=>r.json()).then(data=>{
    const labels = data.map(d=>d.mese);
    const valori = data.map(d=>d.valore_totale);
    const firmati = data.map(d=>d.n_firmati);
    const totali = data.map(d=>d.n_preventivi);
    const ctx = document.getElementById('myChart').getContext('2d');
    if(chartInstance) chartInstance.destroy();
    chartInstance = new Chart(ctx, {
      type: 'bar',
      data: {
        labels,
        datasets: [
          { label: 'Valore (€)', data: valori, backgroundColor: 'rgba(37,99,235,0.15)', borderColor: '#2563EB', borderWidth: 2, borderRadius: 6, yAxisID: 'y' },
          { label: 'N° totali', data: totali, type: 'line', borderColor: '#94A3B8', pointBackgroundColor: '#94A3B8', fill: false, tension: 0.3, yAxisID: 'y2' },
          { label: 'N° firmati', data: firmati, type: 'line', borderColor: '#16A34A', pointBackgroundColor: '#16A34A', fill: false, tension: 0.3, yAxisID: 'y2' }
        ]
      },
      options: {
        responsive: true,
        interaction: { mode: 'index', intersect: false },
        plugins: { legend: { position: 'top', labels: { font: { size: 11 } } } },
        scales: {
          y: { position: 'left', ticks: { callback: v=>'€'+v.toLocaleString('it-IT'), font:{size:10} }, grid: { color: '#F1F5F9' } },
          y2: { position: 'right', beginAtZero: true, ticks: { stepSize: 1, font:{size:10} }, grid: { drawOnChartArea: false } }
        }
      }
    });
  });
}
</script>
{% endblock %}