{% extends "base.html" %}
{% block title %}Visao Geral | Chacara Sonho Verde{% endblock %}
{% block head_extra %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
{% endblock %}
{% block content %}

<div class="page-head">
  <div>
    <div class="eyebrow">Trafego pago</div>
    <h1>Chacara Sonho Verde</h1>
    <p class="muted" id="periodo-label">Carregando dados...</p>
  </div>
  <div class="refresh-bar">
    <span class="ts" id="atualizado-em"></span>
    <button class="btn-refresh" onclick="CV.reload(true)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
      Atualizar
    </button>
  </div>
</div>

<div id="alerta-saldo-wrap"></div>

<div id="dash-loading" class="loading-banner">
  <div class="spinner"></div>
  <span>Buscando dados do Meta Ads ao vivo...</span>
</div>
<div id="dash-error" class="error-banner" style="display:none"></div>

<div id="dash-content" style="display:none">

  <!-- CARDS PERIODO vs PERIODO ANTERIOR -->
  <div class="cards" id="cards-periodo"></div>

  <!-- GRAFICOS -->
  <section class="panel">
    <h2>Curva diaria</h2>
    <p class="desc" id="curva-desc">Gasto, leads e CPL por dia. Passe o mouse pra ver os valores.</p>
    <div class="grid-charts">
      <div class="chart-box full">
        <div class="chart-title">Gasto e leads por dia</div>
        <div class="chart-wrap tall"><canvas id="chart-daily"></canvas></div>
      </div>
      <div class="chart-box full">
        <div class="chart-title">CPL por dia</div>
        <div class="chart-wrap"><canvas id="chart-cpl"></canvas></div>
      </div>
    </div>
  </section>

  <!-- MES ATUAL -->
  <section class="panel">
    <h2>Mes atual (1&ordm; ao dia de hoje)</h2>
    <p class="desc" id="mes-desc">Agregado do mes corrente (fixo, nao muda com filtro).</p>
    <div class="cards" style="margin-bottom:0">
      <div class="card">
        <div class="label">Investimento</div>
        <div class="value" id="mes-gasto">-</div>
      </div>
      <div class="card">
        <div class="label">Leads</div>
        <div class="value" id="mes-leads">-</div>
      </div>
      <div class="card">
        <div class="label">CPL medio</div>
        <div class="value" id="mes-cpl">-</div>
      </div>
      <div class="card">
        <div class="label">CTR</div>
        <div class="value" id="mes-ctr">-</div>
      </div>
      <div class="card">
        <div class="label">Impressoes</div>
        <div class="value" id="mes-impr">-</div>
      </div>
      <div class="card">
        <div class="label">Alcance</div>
        <div class="value" id="mes-reach">-</div>
      </div>
    </div>
  </section>

  <!-- SPLIT POR CONJUNTO (RESUMIDO) -->
  <section class="panel">
    <h2 id="adsets-titulo">Conjuntos</h2>
    <p class="desc">Comparativo entre A / B / C no periodo selecionado. Conjunto mais caro marcado em vermelho.</p>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Conjunto</th>
            <th class="num">Gasto</th>
            <th class="num">Leads</th>
            <th class="num">CPL</th>
            <th class="num">CTR</th>
            <th class="num">Freq</th>
          </tr>
        </thead>
        <tbody id="adsets-body">
          <tr><td colspan="6" class="muted center">Carregando...</td></tr>
        </tbody>
      </table>
    </div>
    <div style="margin-top:12px; text-align:right">
      <a href="{{ url_for('conjuntos') }}" data-nav style="font-size:12px;font-weight:700;color:var(--accent);">Ver detalhes -&gt;</a>
    </div>
  </section>

</div>{# /dash-content #}

{% endblock %}

{% block scripts %}
<script>
(function(){

  var COLOR = {
    accent:  '#4ade80',
    accent2: '#86efac',
    green:   '#4ade80',
    blue:    '#60a5fa',
    purple:  '#a78bfa',
    pink:    '#f472b6',
    orange:  '#fb923c',
    red:     '#f87171',
    yellow:  '#fbbf24',
    grid:    '#1e3d2c',
    muted:   '#8ea99a',
  };

  if (window.Chart) {
    Chart.defaults.color = COLOR.muted;
    Chart.defaults.font.family = "'Inter', sans-serif";
    Chart.defaults.font.size = 11;
    Chart.defaults.borderColor = COLOR.grid;
  }

  var chartDaily = null;
  var chartCPL = null;

  CV.reload = function(force){
    document.getElementById('dash-error').style.display = 'none';
    // se ja tem dado antigo, mantem visivel (nao trava a pagina)
    if (!CV.state.data) {
      document.getElementById('dash-loading').style.display = '';
      document.getElementById('dash-content').style.display = 'none';
    }
    return CV.fetchOverview(!!force).then(function(d){
      document.getElementById('dash-loading').style.display = 'none';
      if(!d || !d.ok){
        // se ja tinha dado antigo, mostra erro em toast (ja disparado no fetch) mas nao esconde conteudo
        if (!CV.state.data) {
          var eb = document.getElementById('dash-error');
          eb.style.display = '';
          eb.textContent = 'Erro ao carregar dados: ' + ((d && d.erro) || 'sem resposta do servidor');
        }
        return;
      }
      render(d);
      document.getElementById('dash-content').style.display = '';
    });
  };

  function render(d){
    var per = d.periodo || {};
    document.getElementById('periodo-label').innerHTML =
      'Periodo: <strong>' + CV.esc(per.label || per.atual) + '</strong> &middot; comparado com <strong>' + CV.esc(per.label_prev || per.anterior) + '</strong>';
    document.getElementById('atualizado-em').textContent = 'Atualizado ' + (d.gerado_em || '-');

    // titulos dinamicos
    var dias = per.days || 7;
    var curvaDesc = document.getElementById('curva-desc');
    if (curvaDesc) curvaDesc.textContent = 'Gasto, leads e CPL por dia (' + dias + (dias === 1 ? ' dia' : ' dias') + '). Passe o mouse pra ver os valores.';
    var adsetsTit = document.getElementById('adsets-titulo');
    if (adsetsTit) adsetsTit.textContent = 'Conjuntos (' + per.label_short + ')';

    // alerta saldo
    renderAlertaSaldo(d.health);

    // cards
    renderCards(d.cards || []);

    // mes
    renderMes(d.mes_atual || {}, per.mes);

    // grafico diario
    renderCurvaDaily(d.serie || d.serie_30d || []);
    renderCurvaCPL(d.serie || d.serie_30d || []);

    // conjuntos
    renderAdsets(d.adsets || [], d.adsets_erro);
  }

  function renderAlertaSaldo(health){
    var wrap = document.getElementById('alerta-saldo-wrap');
    if(!health || !health.conta) { wrap.innerHTML = ''; return; }
    var c = health.conta;
    if(c.saldo_critico){
      wrap.innerHTML =
        '<div class="alert-banner">' +
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>' +
          '<span><strong>Saldo critico:</strong> ' + CV.esc(c.saldo_fmt) + ' na conta Meta. Campanhas podem parar. Recarregar imediatamente.</span>' +
        '</div>';
    } else if(c.saldo_baixo){
      wrap.innerHTML =
        '<div class="alert-banner" style="background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.35);color:var(--yellow)">' +
          '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4M12 17h.01M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/></svg>' +
          '<span><strong>Saldo baixo:</strong> ' + CV.esc(c.saldo_fmt) + ' na conta Meta. Considerar recarga.</span>' +
        '</div>';
    } else {
      wrap.innerHTML = '';
    }
  }

  function renderCards(cards){
    // labels que começam com "CPL" ou "CPM" tem semantica invertida
    var container = document.getElementById('cards-periodo');
    var html = '';
    cards.forEach(function(c){
      var lbl = c.label || '';
      var inv = (lbl.indexOf('CPL') === 0 || lbl.indexOf('CPM') === 0) ? ' metric-inverse' : '';
      var arrow = c.delta_sign === 'up' ? '&uarr; ' : (c.delta_sign === 'down' ? '&darr; ' : '');
      html += '<div class="card' + inv + '">' +
        '<div class="label">' + CV.esc(lbl) + '</div>' +
        '<div class="value">' + CV.esc(c.valor) + '</div>' +
        '<span class="delta ' + CV.esc(c.delta_sign) + '">' + arrow + CV.esc(c.delta_pct) + '</span>' +
        '<span class="delta-note">vs periodo anterior</span>' +
      '</div>';
    });
    container.innerHTML = html;
  }

  function renderMes(mes, label){
    CV.setText('mes-gasto', mes.gasto || '-');
    CV.setText('mes-leads', mes.leads || 0);
    CV.setText('mes-cpl', mes.cpl || '-');
    CV.setText('mes-ctr', mes.ctr || '-');
    CV.setText('mes-impr', mes.impressoes || '-');
    CV.setText('mes-reach', mes.reach || '-');
    var d = document.getElementById('mes-desc');
    if(label && d) d.textContent = 'Periodo: ' + label + ' (fixo, nao muda com filtro).';
  }

  function renderCurvaDaily(serie){
    var labels = serie.map(function(p){ return p.data; });
    var leads  = serie.map(function(p){ return p.leads; });
    var gastos = serie.map(function(p){ return p.gasto; });

    if(chartDaily){ chartDaily.destroy(); }
    chartDaily = new Chart(document.getElementById('chart-daily'), {
      data: {
        labels: labels,
        datasets: [
          {
            type: 'bar',
            label: 'Gasto (R$)',
            data: gastos,
            backgroundColor: 'rgba(74, 222, 128, 0.35)',
            borderColor: COLOR.accent,
            borderWidth: 1,
            borderRadius: 3,
            yAxisID: 'y',
          },
          {
            type: 'line',
            label: 'Leads',
            data: leads,
            borderColor: COLOR.orange,
            backgroundColor: 'transparent',
            tension: 0.35,
            pointRadius: 2,
            borderWidth: 2,
            yAxisID: 'y1',
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: { legend: { labels: { color: COLOR.muted, boxWidth: 12 } } },
        scales: {
          x: { grid: { color: COLOR.grid }, ticks: { color: COLOR.muted, maxTicksLimit: 12 } },
          y: {
            position: 'left', grid: { color: COLOR.grid },
            ticks: { color: COLOR.muted, callback: function(v){ return 'R$ ' + v; } },
            title: { display: true, text: 'Gasto (R$)', color: COLOR.muted },
          },
          y1: {
            position: 'right', grid: { display: false },
            ticks: { color: COLOR.muted, precision: 0 },
            title: { display: true, text: 'Leads', color: COLOR.muted },
          },
        },
      },
    });
  }

  function renderCurvaCPL(serie){
    var labels = serie.map(function(p){ return p.data; });
    var cpls   = serie.map(function(p){ return p.cpl; });

    if(chartCPL){ chartCPL.destroy(); }
    chartCPL = new Chart(document.getElementById('chart-cpl'), {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: 'CPL (R$)',
          data: cpls,
          borderColor: COLOR.pink,
          backgroundColor: 'rgba(244, 114, 182, 0.12)',
          fill: true,
          tension: 0.35,
          pointRadius: 2,
          borderWidth: 2,
        }],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: { legend: { labels: { color: COLOR.muted, boxWidth: 12 } } },
        scales: {
          x: { grid: { color: COLOR.grid }, ticks: { color: COLOR.muted, maxTicksLimit: 12 } },
          y: {
            grid: { color: COLOR.grid },
            ticks: { color: COLOR.muted, callback: function(v){ return 'R$ ' + v; } },
          },
        },
      },
    });
  }

  function renderAdsets(adsets, erro){
    var body = document.getElementById('adsets-body');
    if(erro){
      body.innerHTML = '<tr><td colspan="6" class="muted center">Erro: ' + CV.esc(erro) + '</td></tr>';
      return;
    }
    if(!adsets.length){
      body.innerHTML = '<tr><td colspan="6" class="muted center">Sem dados no periodo.</td></tr>';
      return;
    }
    var html = '';
    adsets.forEach(function(a){
      var row = a.mais_caro ? 'highlight-danger' : '';
      var tagCaro = a.mais_caro ? ' <span class="tag tag-danger">Mais caro</span>' : '';
      html += '<tr class="' + row + '">' +
        '<td><strong>' + CV.esc(a.nome) + '</strong>' + tagCaro + '</td>' +
        '<td class="num">' + CV.esc(a.gasto) + '</td>' +
        '<td class="num">' + a.leads + '</td>' +
        '<td class="num">' + CV.esc(a.cpl) + '</td>' +
        '<td class="num">' + CV.esc(a.ctr) + '</td>' +
        '<td class="num">' + a.freq.toFixed(2).replace('.', ',') + '</td>' +
      '</tr>';
    });
    body.innerHTML = html;
  }

  // dispara
  CV.reload();

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