/* ==========================================================================
   METRICS & OPERATIONS MODULE (MÓDULO A: BI OPERACIONAL)
   ========================================================================== */

const MetricsModule = {
  async load() {
    try {
      const filters = window.App.getFilters();
      
      const [kpisRes, chartsRes, opsRes] = await Promise.all([
        API.get('/api/bi/kpis', filters),
        API.get('/api/bi/charts', filters),
        API.get('/api/bi/operators', filters)
      ]);

      this.renderKPIs(kpisRes.kpis);
      this.renderCharts(chartsRes.charts, opsRes.operators);
      this.renderOperatorsTable(opsRes.operators);

    } catch (err) {
      console.error('[METRICS ERROR]', err);
      showToast('Erro ao carregar métricas operacionais.', 'error');
    }
  },

  renderKPIs(kpis) {
    if (!kpis) return;
    const elTot = document.getElementById('met-kpi-total');
    const elConv = document.getElementById('met-kpi-conv');
    const elQuentes = document.getElementById('met-kpi-quentes');
    const elPerdas = document.getElementById('met-kpi-perdas');

    if (elTot) elTot.textContent = kpis.total_atendimentos;
    if (elConv) elConv.textContent = `${kpis.taxa_conversao}%`;
    if (elQuentes) elQuentes.textContent = `${kpis.total_quentes} (${kpis.taxa_qualificados}%)`;
    if (elPerdas) elPerdas.textContent = kpis.top_motivo_perda;
  },

  renderCharts(charts, operators) {
    if (!charts) return;

    if (operators && operators.length > 0) {
      ChartManager.renderOperatorsBar('chart-metrics-operators', operators);
    }
    if (charts.motivos) {
      ChartManager.renderMotivosBar('chart-metrics-motivos', charts.motivos);
    }
    if (charts.horarios) {
      ChartManager.renderHourlyChart('chart-metrics-hourly', charts.horarios);
    }
    if (charts.canais) {
      ChartManager.renderChannelsDonut('chart-metrics-channels-donut', charts.canais);
    }
  },

  renderOperatorsTable(operators) {
    const tbody = document.getElementById('met-operators-table-body');
    if (!tbody) return;

    if (!operators || operators.length === 0) {
      tbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding: 2rem;">Nenhum operador com atendimentos no período.</td></tr>`;
      return;
    }

    tbody.innerHTML = operators.map((op, idx) => {
      let badgeRank = '';
      if (idx === 0) badgeRank = `<span class="badge badge-success" style="margin-left: 6px;">#1 Top Closer</span>`;
      
      let alertInfoClass = op.taxa_somente_info > 35 ? 'color: var(--danger); font-weight: 700;' : '';
      let alertNoShowClass = op.taxa_no_show > 30 ? 'color: var(--warning); font-weight: 700;' : '';

      return `
        <tr>
          <td>
            <div style="display: flex; align-items: center; gap: 0.75rem;">
              <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--primary-subtle); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem;">
                ${op.nome.substring(0, 2).toUpperCase()}
              </div>
              <div>
                <span class="font-semibold" style="display: flex; align-items: center;">
                  ${op.nome} ${badgeRank}
                </span>
                <span style="font-size: 0.72rem; color: var(--text-dim);">${op.email}</span>
              </div>
            </div>
          </td>
          <td>
            <span class="font-mono font-bold">${op.total_atendimentos}</span>
          </td>
          <td>
            <span class="font-mono font-bold" style="color: var(--success);">${op.convertidos}</span>
          </td>
          <td>
            <div style="display: flex; align-items: center; gap: 0.5rem;">
              <span class="font-bold">${op.taxa_conversao}%</span>
              <div style="width: 60px; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden;">
                <div style="width: ${Math.min(100, op.taxa_conversao * 2.5)}%; height: 100%; background: var(--primary);"></div>
              </div>
            </div>
          </td>
          <td>
            <span style="${alertInfoClass}">${op.taxa_somente_info}%</span>
          </td>
          <td>
            <span style="${alertNoShowClass}">${op.taxa_no_show}%</span>
          </td>
          <td>
            <span class="badge badge-purple">${op.csat} / 5.0</span>
          </td>
        </tr>
      `;
    }).join('');
  }
};
