/* ==========================================================================
   OVERVIEW MODULE (VISÃO GERAL / HOME)
   ========================================================================== */

const OverviewModule = {
  async load() {
    try {
      const filters = window.App.getFilters();
      
      // Carregar KPIs, Gráficos, Breakdown e Conversas em paralelo
      const [kpisRes, chartsRes, intelRes, breakdownRes, convsRes] = await Promise.all([
        API.get('/api/bi/kpis', filters),
        API.get('/api/bi/charts', filters),
        API.get('/api/intelligence/insights'),
        API.get('/api/bi/intentions-origins', filters),
        API.get('/api/conversations', { page: 1, page_size: 6, ...filters })
      ]);

      this.renderKPIs(kpisRes.kpis);
      this.renderCharts(chartsRes.charts);
      this.renderCriticalAlert(intelRes.alerts);
      this.renderIntentionsAndOrigins(breakdownRes);
      this.renderRecentConversations(convsRes.conversations);

    } catch (err) {
      console.error('[OVERVIEW ERROR]', err);
      showToast('Erro ao carregar dados da Visão Geral.', 'error');
    }
  },

  renderIntentionsAndOrigins(res) {
    if (!res) return;
    this.renderBreakdownList('ov-list-atend-intencao', res.atendimentos_por_intencao);
    this.renderBreakdownList('ov-list-atend-origem', res.atendimentos_por_origem);
    this.renderBreakdownList('ov-list-cont-intencao', res.contatos_por_intencao);
    this.renderBreakdownList('ov-list-cont-origem', res.contatos_por_origem);
  },

  renderBreakdownList(containerId, items) {
    const container = document.getElementById(containerId);
    if (!container) return;

    if (!items || items.length === 0) {
      container.innerHTML = `<div style="color: var(--text-dim); font-size: 0.82rem; padding: 0.5rem 0;">Nenhum registro encontrado.</div>`;
      return;
    }

    container.innerHTML = items.map((item) => `
      <div class="breakdown-row">
        <div class="breakdown-info">
          <span class="breakdown-name" title="${item.title}">${item.title}</span>
          <div class="breakdown-val-group">
            <span class="breakdown-count">${item.count.toLocaleString('pt-BR')}</span>
            <span class="pct-pill">${item.percentage.toFixed(2)}%</span>
          </div>
        </div>
        <div class="breakdown-bar-bg">
          <div class="breakdown-bar-fill" style="width: ${Math.min(100, Math.max(2, item.percentage))}%;"></div>
        </div>
      </div>
    `).join('');
  },

  renderKPIs(kpis) {
    if (!kpis) return;
    
    // Atualizar cartões
    const elTotal = document.getElementById('ov-kpi-total');
    const elAbertos = document.getElementById('ov-kpi-abertos');
    const elEncerrados = document.getElementById('ov-kpi-encerrados');
    const elConv = document.getElementById('ov-kpi-conv');
    const elConvDelta = document.getElementById('ov-kpi-conv-delta');
    const elQuentes = document.getElementById('ov-kpi-quentes');
    const elPerda = document.getElementById('ov-kpi-perda');
    const elCsat = document.getElementById('ov-kpi-csat');
    const elSla = document.getElementById('ov-kpi-sla');

    if (elTotal) elTotal.textContent = (kpis.total_atendimentos || 0).toLocaleString('pt-BR');
    if (elAbertos) elAbertos.textContent = (kpis.total_abertos || 0).toLocaleString('pt-BR');
    if (elEncerrados) elEncerrados.textContent = (kpis.total_encerrados || 0).toLocaleString('pt-BR');
    if (elConv) elConv.textContent = `${kpis.taxa_conversao}%`;
    if (elConvDelta) elConvDelta.textContent = `${kpis.total_convertidos} vendas`;
    if (elQuentes) elQuentes.textContent = kpis.total_quentes;
    if (elPerda) elPerda.textContent = kpis.top_motivo_perda || 'N/A';
    if (elCsat) elCsat.textContent = `${kpis.csat_score} / 5.0`;
    if (elSla) elSla.textContent = `${kpis.sla_medio_segundos}s`;

    // Atualizar Ticker do Top Header
    const tickTotal = document.getElementById('ticker-total');
    const tickConv = document.getElementById('ticker-conv');
    const tickSla = document.getElementById('ticker-sla');
    if (tickTotal) tickTotal.textContent = kpis.total_atendimentos;
    if (tickConv) tickConv.textContent = `${kpis.taxa_conversao}%`;
    if (tickSla) tickSla.textContent = `${kpis.sla_medio_segundos}s`;
  },

  renderCharts(charts) {
    if (!charts) return;
    if (charts.timeline) {
      ChartManager.renderTimeline('chart-overview-timeline', charts.timeline);
    }
    if (charts.marcas) {
      ChartManager.renderBrandsPieChart('chart-overview-marcas', charts.marcas);
    }
    if (charts.motivos) {
      ChartManager.renderMotivosChart('chart-overview-motivos', charts.motivos);
    }
    if (charts.canais) {
      ChartManager.renderChannelsDonut('chart-overview-channels', charts.canais);
    }
  },

  renderCriticalAlert(alerts) {
    const container = document.getElementById('ov-critical-alert-box');
    if (!container) return;

    if (!alerts || alerts.length === 0) {
      container.innerHTML = `
        <div class="glass-card" style="padding: 1.25rem; display: flex; align-items: center; gap: 0.85rem; border-color: rgba(16, 185, 129, 0.3);">
          <div class="status-dot"></div>
          <div>
            <h4 style="font-size: 0.92rem; color: var(--success);">Operação Saudável</h4>
            <p style="font-size: 0.8rem; margin-top: 2px;">Nenhum desvio crítico de atendimento identificado no momento.</p>
          </div>
        </div>
      `;
      return;
    }

    const topAlert = alerts[0];
    container.innerHTML = `
      <div class="alert-card ${topAlert.severidade}" style="margin-bottom: 0;">
        <div class="alert-header">
          <div style="display: flex; align-items: center; gap: 0.5rem;">
            <span class="badge badge-danger">Destaque de IA</span>
            <span class="alert-title">${topAlert.titulo}</span>
          </div>
          <button class="btn btn-outline btn-sm" onclick="window.App.navigate('intelligence')">
            Ver Inteligência & Prescrições →
          </button>
        </div>
        <div class="alert-content">
          ${topAlert.mensagem}
        </div>
        <div class="alert-prescricao">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
          <span><strong>Prescrição:</strong> ${topAlert.prescricao}</span>
        </div>
      </div>
    `;
  },

  renderRecentConversations(convs) {
    const tbody = document.getElementById('ov-recent-table-body');
    if (!tbody) return;

    if (!convs || convs.length === 0) {
      tbody.innerHTML = `<tr><td colspan="9" style="text-align:center; padding: 2rem;">Nenhum atendimento registrado.</td></tr>`;
      return;
    }

    tbody.innerHTML = convs.map((c) => {
      const isAberto = c.status_atendimento === 'Aberto';
      const statusBadgeHtml = isAberto 
        ? `<span class="badge badge-info" style="display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.74rem;"><span style="width: 7px; height: 7px; border-radius: 50%; background: #0ea5e9;"></span>Aberto</span>`
        : `<span class="badge" style="display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.74rem; background: rgba(239, 68, 68, 0.18); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.3);"><span style="width: 7px; height: 7px; border-radius: 50%; background: #ef4444;"></span>Encerrado</span>`;

      const rowStyle = isAberto ? '' : 'style="background: rgba(239, 68, 68, 0.05);"';

      const nomeCliente = c.nome_chat || 'Lead Visitante';
      const contatoInfo = c.telefone || c.email || '-';
      const operadorNome = c.operador_nome || '-';
      const dataHora = c.criado_em || '-';
      const motivoFech = c.motivo_fechamento || '-';
      
      const protoFull = String(c.id_duotalk || (c.id ? 'DT-' + c.id : '00000'));
      const protoShort = protoFull.length > 5 ? protoFull.slice(-5) : protoFull;

      return `
        <tr ${rowStyle}>
          <td>
            <span class="font-mono font-bold" style="color: var(--primary); font-size: 0.85rem;" title="Protocolo Duotalk: ${protoFull}">...${protoShort}</span>
          </td>
          <td>
            ${statusBadgeHtml}
          </td>
          <td>
            <div style="display: flex; flex-direction: column;">
              <span class="font-semibold" style="color: var(--text-main);">${nomeCliente}</span>
              <span style="font-size: 0.72rem; color: var(--text-dim);">${contatoInfo}</span>
            </div>
          </td>
          <td>
            <span style="font-size: 0.78rem; color: var(--text-muted);">${c.origem || 'Inbound'}</span>
          </td>
          <td>
            <span class="badge badge-info" style="font-size: 0.75rem;">${c.intencao || 'Geral'}</span>
          </td>
          <td>
            <span style="font-size: 0.82rem; color: var(--text-main);">${operadorNome}</span>
          </td>
          <td>
            <span style="font-size: 0.76rem; color: var(--text-dim); font-family: monospace;">${dataHora}</span>
          </td>
          <td>
            <span style="font-size: 0.78rem; color: ${isAberto ? 'var(--text-muted)' : 'var(--danger)'}; font-weight: 500;">${motivoFech}</span>
          </td>
          <td style="text-align: right;">
            <button class="btn btn-primary btn-sm" onclick="ConversationsModule.openDetail(${c.id})" style="gap: 0.35rem;">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.964 9.964 0 001.333 4.993L2 22l5.233-1.237a9.98 9.98 0 004.779 1.221h.004c5.505 0 9.988-4.478 9.989-9.984 0-2.669-1.038-5.176-2.925-7.062A9.925 9.925 0 0012.012 2z"/></svg>
              Visualizar mensagem
            </button>
          </td>
        </tr>
      `;
    }).join('');
  }
};
