{% extends "base.html" %}
{% block title %}Visao Geral | Borrello{% 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">Visao geral</div>
    <h1>Painel Borrello</h1>
    <p class="muted" id="periodo-label">Carregando dados consolidados...</p>
  </div>
  <div class="filter-card">
    <form method="get" class="filter-form" id="filtroForm">
      <label class="field-inline">
        <span>Periodo</span>
        <select name="preset" id="presetSel" onchange="toggleCustom()">
          <option value="hoje" {% if preset=='hoje' %}selected{% endif %}>Hoje</option>
          <option value="ontem" {% if preset=='ontem' %}selected{% endif %}>Ontem</option>
          <option value="ultimos_7" {% if preset=='ultimos_7' %}selected{% endif %}>Ultimos 7 dias</option>
          <option value="ultimos_30" {% if preset=='ultimos_30' %}selected{% endif %}>Ultimos 30 dias</option>
          <option value="este_mes" {% if preset=='este_mes' %}selected{% endif %}>Este mes</option>
          <option value="mes_passado" {% if preset=='mes_passado' %}selected{% endif %}>Mes passado</option>
          <option value="custom" {% if preset=='custom' %}selected{% endif %}>Customizado</option>
        </select>
      </label>
      <div id="customRange" class="custom-range" style="display:{% if preset=='custom' %}flex{% else %}none{% endif %}">
        <label class="field-inline">
          <span>De</span>
          <input type="date" name="inicio" value="{{ custom_inicio }}">
        </label>
        <label class="field-inline">
          <span>Ate</span>
          <input type="date" name="fim" value="{{ custom_fim }}">
        </label>
      </div>
      <button type="submit" class="btn-secondary">Aplicar</button>
    </form>
  </div>
</div>

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

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

  <!-- META ADS -->
  <section class="panel">
    <h2>Meta Ads</h2>
    <p class="desc" id="meta-desc">Trafego pago no Facebook e Instagram - Francisco Borrello.</p>
    <div class="cards" style="margin-bottom:18px">
      <div class="card">
        <div class="label">Investimento</div>
        <div class="value" id="meta-gasto">-</div>
        <div class="sub">no periodo</div>
      </div>
      <div class="card accent-green">
        <div class="label">Leads</div>
        <div class="value" id="meta-leads">-</div>
        <div class="sub">conversoes</div>
      </div>
      <div class="card accent-pink">
        <div class="label">CPL medio</div>
        <div class="value" id="meta-cpl">-</div>
        <div class="sub">custo por lead</div>
      </div>
      <div class="card accent-blue">
        <div class="label">CTR</div>
        <div class="value" id="meta-ctr">-</div>
        <div class="sub">cliques / impressoes</div>
      </div>
      <div class="card accent-purple">
        <div class="label">Alcance</div>
        <div class="value" id="meta-reach">-</div>
        <div class="sub">contas alcancadas</div>
      </div>
    </div>
    <div class="grid-charts">
      <div class="chart-box">
        <div class="chart-title">Leads por dia</div>
        <div class="chart-wrap"><canvas id="chart-meta-leads"></canvas></div>
      </div>
      <div class="chart-box">
        <div class="chart-title">Top 5 campanhas por gasto</div>
        <div class="chart-wrap"><canvas id="chart-meta-camp"></canvas></div>
      </div>
    </div>
    <div class="panel-link"><a href="{{ url_for('meta_ads') }}">Ver detalhes -&gt;</a></div>
  </section>

  <!-- RASTREAMENTO -->
  <section class="panel">
    <h2>Rastreamento</h2>
    <p class="desc">Cliques rastreados e pageviews das landings.</p>
    <div class="cards" style="margin-bottom:8px">
      <div class="card accent-blue">
        <div class="label">Cliques totais</div>
        <div class="value" id="track-clicks">-</div>
        <div class="sub" id="track-clicks-7d">- nos ultimos 7d</div>
      </div>
      <div class="card accent-pink">
        <div class="label">Pageviews</div>
        <div class="value" id="track-pv">-</div>
        <div class="sub" id="track-pv-7d">- nos ultimos 7d</div>
      </div>
    </div>
    <div class="panel-link"><a href="{{ url_for('rastreamento') }}">Ver detalhes -&gt;</a></div>
  </section>

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

<style>
  .grid-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .chart-box {
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px 12px;
  }
  .chart-box.full { grid-column: 1 / -1; }
  .chart-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 10px;
  }
  .chart-wrap { position: relative; height: 220px; }
  .panel-link { margin-top: 14px; text-align: right; }
  .panel-link a { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.4px; }
  .panel-link a:hover { color: var(--accent-2); }
  .section-err { color: var(--muted); font-style: italic; padding: 8px 0; }
  @media (max-width: 880px) { .grid-charts { grid-template-columns: 1fr; } }
</style>

{% endblock %}

{% block scripts %}
<script>
function toggleCustom(){
  var v = document.getElementById('presetSel').value;
  document.getElementById('customRange').style.display = (v === 'custom') ? 'flex' : 'none';
}

(function(){
  var preset = {{ preset | tojson }};
  var inicio = {{ custom_inicio | tojson }};
  var fim    = {{ custom_fim | tojson }};

  var COLOR = {
    accent:  '#7c88ff',
    accent2: '#a2acff',
    green:   '#4ade80',
    blue:    '#60a5fa',
    purple:  '#a78bfa',
    pink:    '#f472b6',
    orange:  '#fb923c',
    red:     '#f87171',
    grid:    '#2f3a60',
    muted:   '#8a95b8',
  };

  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 url = '/api/overview'
    + '?preset=' + encodeURIComponent(preset)
    + '&inicio=' + encodeURIComponent(inicio)
    + '&fim='    + encodeURIComponent(fim);

  fetch(url)
    .then(function(r){ return r.json(); })
    .then(function(d){
      document.getElementById('dash-loading').style.display = 'none';
      if(!d.ok){
        document.getElementById('dash-error').style.display = '';
        document.getElementById('dash-error').textContent = 'Erro ao carregar dados.';
        return;
      }

      document.getElementById('periodo-label').innerHTML =
        'Periodo: <strong>' + esc(d.periodo_label || '-') + '</strong>';

      renderMeta(d.meta);
      renderRastreamento(d.rastreamento);

      document.getElementById('dash-content').style.display = '';
    })
    .catch(function(e){
      document.getElementById('dash-loading').style.display = 'none';
      document.getElementById('dash-error').style.display = '';
      document.getElementById('dash-error').textContent = 'Falha ao conectar com o servidor.';
    });

  function renderMeta(m){
    if(!m || !m.ok){
      setText('meta-gasto', '-');
      setText('meta-leads', '-');
      setText('meta-cpl', '-');
      setText('meta-ctr', '-');
      setText('meta-reach', '-');
      document.getElementById('meta-desc').innerHTML =
        '<span class="section-err">Meta Ads indisponivel: ' + esc((m && m.erro) || 'sem dados') + '</span>';
      return;
    }
    var r = m.resumo || {};
    setText('meta-gasto', r.gasto_total || '-');
    setText('meta-leads', r.leads || 0);
    setText('meta-cpl', r.cpl || '-');
    setText('meta-ctr', r.ctr || '-');
    setText('meta-reach', r.alcance || '-');

    var serie = m.serie_diaria || [];
    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; });

    new Chart(document.getElementById('chart-meta-leads'), {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: 'Leads',
          data: leads,
          borderColor: COLOR.green,
          backgroundColor: 'rgba(74, 222, 128, 0.15)',
          fill: true,
          tension: 0.35,
          pointRadius: 2,
          borderWidth: 2,
        }, {
          label: 'Gasto (R$)',
          data: gastos,
          borderColor: COLOR.accent,
          backgroundColor: 'transparent',
          tension: 0.35,
          pointRadius: 2,
          borderWidth: 2,
          yAxisID: 'y1',
        }],
      },
      options: chartOptsDual(),
    });

    var top = m.top_campanhas || [];
    new Chart(document.getElementById('chart-meta-camp'), {
      type: 'bar',
      data: {
        labels: top.map(function(c){ return truncate(c.nome, 22); }),
        datasets: [{
          label: 'Leads',
          data: top.map(function(c){ return c.leads; }),
          backgroundColor: COLOR.green,
          borderRadius: 4,
        }, {
          label: 'Gasto (R$)',
          data: top.map(function(c){ return c.gasto; }),
          backgroundColor: COLOR.accent,
          borderRadius: 4,
        }],
      },
      options: chartOptsBars(),
    });
  }

  function renderRastreamento(t){
    if(!t || !t.ok){
      setText('track-clicks', '-');
      setText('track-pv', '-');
      return;
    }
    setText('track-clicks', t.clicks_total || 0);
    setText('track-clicks-7d', (t.clicks_7d || 0) + ' nos ultimos 7d');
    setText('track-pv', t.pageviews_total || 0);
    setText('track-pv-7d', (t.pageviews_7d || 0) + ' nos ultimos 7d');
  }

  function chartOptsDual(){
    return {
      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: 8 } },
        y: { grid: { color: COLOR.grid }, ticks: { color: COLOR.muted, precision: 0 } },
        y1: { position: 'right', grid: { display: false }, ticks: { color: COLOR.muted } },
      },
    };
  }
  function chartOptsBars(){
    return {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { legend: { labels: { color: COLOR.muted, boxWidth: 12 } } },
      scales: {
        x: { grid: { display: false }, ticks: { color: COLOR.muted, maxRotation: 0, autoSkip: false } },
        y: { grid: { color: COLOR.grid }, ticks: { color: COLOR.muted, precision: 0 } },
      },
    };
  }

  function setText(id, val){
    var el = document.getElementById(id);
    if(el) el.textContent = (val === null || val === undefined) ? '-' : val;
  }
  function esc(s){
    return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }
  function truncate(s, n){
    s = String(s||'');
    return s.length > n ? s.slice(0, n-1) + '...' : s;
  }
})();
</script>
{% endblock %}