{% extends "base.html" %}
{% block title %}Visao Geral — PX3 Lab{% 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 PX3 Lab</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="semana_atual" {% if preset=='semana_atual' %}selected{% endif %}>Esta semana</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 (Meta, Google, Conversas, Pipeline)...</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.</p>
    <div class="cards" style="margin-bottom:18px">
      <div class="card">
        <div class="label">Gasto total</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 lead</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>
    <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">Gasto x leads por campanha (top 5)</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>

  <!-- ============================================================
       GOOGLE ADS
  ============================================================ -->
  <section class="panel">
    <h2>Google Ads</h2>
    <p class="desc" id="google-desc">Busca e display.</p>
    <div class="cards" style="margin-bottom:18px">
      <div class="card">
        <div class="label">Gasto total</div>
        <div class="value" id="g-gasto">-</div>
        <div class="sub">no periodo</div>
      </div>
      <div class="card accent-green">
        <div class="label">Conversoes</div>
        <div class="value" id="g-conv">-</div>
        <div class="sub">leads do Google</div>
      </div>
      <div class="card accent-blue">
        <div class="label">CTR medio</div>
        <div class="value" id="g-ctr">-</div>
        <div class="sub">cliques / impressoes</div>
      </div>
      <div class="card accent-pink">
        <div class="label">CPL</div>
        <div class="value" id="g-cpl">-</div>
        <div class="sub">custo por lead</div>
      </div>
    </div>
    <div class="grid-charts">
      <div class="chart-box full">
        <div class="chart-title">Conversoes por dia</div>
        <div class="chart-wrap"><canvas id="chart-google-leads"></canvas></div>
      </div>
    </div>
    <div class="panel-link"><a href="{{ url_for('google_ads') }}">Ver detalhes -&gt;</a></div>
  </section>

  <!-- ============================================================
       CONVERSAS
  ============================================================ -->
  <section class="panel">
    <h2>Conversas</h2>
    <p class="desc">Distribuicao por canal das ultimas conversas ativas.</p>
    <div class="cards" style="margin-bottom:18px">
      <div class="card">
        <div class="label">Total</div>
        <div class="value" id="conv-total">-</div>
        <div class="sub">conversas no GHL</div>
      </div>
      <div class="card accent-red">
        <div class="label">Nao lidas</div>
        <div class="value" id="conv-nlidas">-</div>
        <div class="sub">aguardando atencao</div>
      </div>
      <div class="card accent-green">
        <div class="label">Canal principal</div>
        <div class="value" id="conv-canal" style="font-size:22px">-</div>
        <div class="sub" id="conv-canal-sub">-</div>
      </div>
    </div>
    <div class="grid-charts">
      <div class="chart-box full">
        <div class="chart-title">Distribuicao por canal</div>
        <div class="chart-wrap" style="max-height:260px"><canvas id="chart-conv"></canvas></div>
      </div>
    </div>
    <div class="panel-link"><a href="{{ url_for('conversas') }}">Ver detalhes -&gt;</a></div>
  </section>

  <!-- ============================================================
       PIPELINE
  ============================================================ -->
  <section class="panel">
    <h2>Pipeline <span id="pipe-nome" class="muted" style="font-weight:500;font-size:13px;margin-left:6px"></span></h2>
    <p class="desc">Resumo da pipeline principal.</p>
    <div class="cards" style="margin-bottom:18px">
      <div class="card accent-blue">
        <div class="label">Novos leads</div>
        <div class="value" id="pipe-novos">-</div>
        <div class="sub">no periodo</div>
      </div>
      <div class="card accent-green">
        <div class="label">Fechamentos</div>
        <div class="value" id="pipe-fech">-</div>
        <div class="sub">ganhos</div>
      </div>
      <div class="card accent-purple">
        <div class="label">Taxa qualif.</div>
        <div class="value" id="pipe-taxa">-</div>
        <div class="sub">qualificados / novos</div>
      </div>
      <div class="card accent-red">
        <div class="label">Perdidos</div>
        <div class="value" id="pipe-perd">-</div>
        <div class="sub">no periodo</div>
      </div>
    </div>
    <div class="grid-charts">
      <div class="chart-box full">
        <div class="chart-title">Distribuicao por stage</div>
        <div class="chart-wrap"><canvas id="chart-pipe"></canvas></div>
      </div>
    </div>
    <div class="panel-link"><a href="{{ url_for('pipelines_list') }}">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 }};

  // Cores da paleta
  var COLOR = {
    accent:  '#d6c08a',
    accent2: '#f1e2b5',
    green:   '#4ade80',
    blue:    '#60a5fa',
    purple:  '#a78bfa',
    pink:    '#f472b6',
    orange:  '#fb923c',
    red:     '#f87171',
    grid:    '#2c3441',
    muted:   '#8b95a7',
  };

  // Defaults Chart.js
  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);
      renderGoogle(d.google);
      renderConversas(d.conversas);
      renderPipeline(d.pipeline);

      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. Tente novamente.';
    });

  // ============== META ==============
  function renderMeta(m){
    if(!m || !m.ok){
      setText('meta-gasto', '-');
      setText('meta-leads', '-');
      setText('meta-cpl', '-');
      setText('meta-ctr', '-');
      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 || '-');

    // Grafico leads/dia
    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(),
    });

    // Top 5 campanhas
    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(),
    });
  }

  // ============== GOOGLE ==============
  function renderGoogle(g){
    if(!g || !g.ok){
      setText('g-gasto', '-');
      setText('g-conv', '-');
      setText('g-ctr', '-');
      setText('g-cpl', '-');
      document.getElementById('google-desc').innerHTML =
        '<span class="section-err">Google Ads indisponivel: ' + esc((g && g.erro) || 'sem dados') + '</span>';
      return;
    }
    var r = g.resumo || {};
    setText('g-gasto', r.gasto_total || '-');
    setText('g-conv', r.conversoes || 0);
    setText('g-ctr', r.ctr || '-');
    setText('g-cpl', r.cpl || '-');

    var serie = g.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-google-leads'), {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: 'Conversoes',
          data: leads,
          borderColor: COLOR.blue,
          backgroundColor: 'rgba(96, 165, 250, 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(),
    });
  }

  // ============== CONVERSAS ==============
  function renderConversas(c){
    if(!c || !c.ok){
      setText('conv-total', '-');
      setText('conv-nlidas', '-');
      setText('conv-canal', '-');
      return;
    }
    setText('conv-total', c.total || 0);
    setText('conv-nlidas', c.nao_lidas || 0);
    var canais = c.por_canal || [];
    if (canais.length){
      setText('conv-canal', canais[0].canal);
      setText('conv-canal-sub', canais[0].qtd + ' conversas');
    }

    var palette = [COLOR.green, COLOR.purple, COLOR.blue, COLOR.orange, COLOR.pink, COLOR.accent];
    new Chart(document.getElementById('chart-conv'), {
      type: 'doughnut',
      data: {
        labels: canais.map(function(x){ return x.canal; }),
        datasets: [{
          data: canais.map(function(x){ return x.qtd; }),
          backgroundColor: palette.slice(0, canais.length),
          borderColor: '#161b22',
          borderWidth: 2,
        }],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '60%',
        plugins: {
          legend: { position: 'right', labels: { color: COLOR.muted, font: { size: 12 } } },
        },
      },
    });
  }

  // ============== PIPELINE ==============
  function renderPipeline(p){
    if(!p || !p.ok){
      setText('pipe-novos', '-');
      setText('pipe-fech', '-');
      setText('pipe-taxa', '-');
      setText('pipe-perd', '-');
      return;
    }
    var k = p.kpis || {};
    setText('pipe-nome', p.nome ? '/ ' + p.nome : '');
    setText('pipe-novos', k.novos || 0);
    setText('pipe-fech', k.fechamentos || 0);
    setText('pipe-taxa', (k.taxa_qual || 0) + '%');
    setText('pipe-perd', k.perdidos || 0);

    var stages = p.stages || [];
    new Chart(document.getElementById('chart-pipe'), {
      type: 'bar',
      data: {
        labels: stages.map(function(s){ return truncate(s.stage, 28); }),
        datasets: [{
          label: 'Oportunidades',
          data: stages.map(function(s){ return s.qtd; }),
          backgroundColor: COLOR.accent,
          borderRadius: 4,
        }],
      },
      options: {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
          x: { grid: { color: COLOR.grid }, ticks: { color: COLOR.muted, precision: 0 } },
          y: { grid: { display: false }, ticks: { color: COLOR.muted } },
        },
      },
    });
  }

  // ============== Chart options ==============
  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 } },
      },
    };
  }

  // ============== Helpers ==============
  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 %}