/* ==========================================================================
   INTELLIGENCE & PRESCRIPTIONS MODULE (MÓDULO B: ABA DEDICADA)
   Alertas de Desempenho, Playbooks de Abordagem, Análise de Gargalos
   ========================================================================== */

const IntelligenceModule = {
  data: null,

  async load() {
    try {
      const [res, langRes] = await Promise.all([
        API.get('/api/intelligence/insights'),
        API.get('/api/intelligence/language-analysis')
      ]);
      this.data = res;

      this.renderSummary(res.team_summary);
      this.renderAlerts(res.alerts);
      this.renderLanguageAnalysis(langRes);
      this.renderPlaybooks(res.playbooks);
      this.renderBottlenecks(res.bottlenecks);

    } catch (err) {
      console.error('[INTELLIGENCE ERROR]', err);
      showToast('Erro ao calcular inteligência prescritiva.', 'error');
    }
  },

  renderLanguageAnalysis(langData) {
    const container = document.getElementById('intel-language-container');
    const badgeContainer = document.getElementById('intel-language-summary-badge');
    if (!container) return;

    if (!langData || !langData.expressions || langData.expressions.length === 0) {
      container.innerHTML = `
        <div class="glass-card" style="padding: 2rem; text-align: center;">
          <h4 style="color: var(--success);">Excelente postura nos diálogos da nossa equipe</h4>
          <p style="margin-top: 4px; color: var(--text-muted);">Nenhuma expressão passiva ou negativa identificada na escrita dos nossos atendentes ou bots.</p>
        </div>
      `;
      return;
    }

    if (badgeContainer) {
      badgeContainer.innerHTML = `
        <span class="badge badge-warning" style="font-size: 0.82rem; padding: 0.35rem 0.75rem;">
          ${langData.total_evitaveis || 0} ocorrências detectadas na nossa equipe
        </span>
      `;
    }

    container.innerHTML = langData.expressions.map((exp) => {
      let sevClass = 'badge-warning';
      if (exp.severidade === 'critico') sevClass = 'badge-danger';
      else if (exp.severidade === 'moderado') sevClass = 'badge-info';

      const casosHtml = exp.exemplos_reais && exp.exemplos_reais.length > 0 ? exp.exemplos_reais.map((ex) => {
        const isEncerrado = ex.status_atendimento === 'Encerrado';
        const statusBadge = isEncerrado
          ? `<span class="badge" style="background: rgba(239, 68, 68, 0.18); color: var(--danger); font-size: 0.7rem; font-weight: 700; border: 1px solid rgba(239, 68, 68, 0.3);">Encerrado</span>`
          : `<span class="badge badge-info" style="font-size: 0.7rem; font-weight: 700;">Aberto</span>`;
        const cardBg = isEncerrado ? 'background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.25);' : 'background: var(--bg-card-inner); border-color: var(--border-subtle);';

        return `
          <div style="${cardBg} padding: 0.75rem 0.95rem; border-radius: var(--radius-md); border: 1px solid; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;">
            <div style="display: flex; flex-direction: column; gap: 0.2rem; max-width: 80%;">
              <div style="font-size: 0.8rem; color: var(--text-main); display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;">
                <strong>Cliente: ${ex.cliente_nome || ex.nome_chat}</strong>
                ${statusBadge}
                <span style="color: var(--text-dim); font-size: 0.74rem; font-family: monospace;">(${ex.criado_em || ''})</span>
              </div>
              <div style="font-size: 0.78rem; color: var(--text-muted); font-family: monospace; white-space: pre-wrap; word-break: break-word;">
                "${ex.trecho_real}"
              </div>
            </div>
            <button class="btn btn-primary btn-sm" onclick="ConversationsModule.openDetail(${ex.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>
          </div>
        `;
      }).join('') : '<div style="font-size: 0.78rem; color: var(--text-dim);">Nenhum trecho de amostra.</div>';

      return `
        <div class="glass-card" style="padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; border-left: 4px solid ${exp.severidade === 'critico' ? 'var(--danger)' : 'var(--warning)'};">
          <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;">
            <div style="display: flex; align-items: center; gap: 0.65rem;">
              <span class="badge ${sevClass}">${exp.categoria}</span>
              <h4 style="font-size: 1rem; font-weight: 700; color: var(--text-main); margin: 0;">
                Expressão Detectada (Nossa Parte): <span style="color: var(--danger);">"${exp.label}"</span>
              </h4>
            </div>
            <div class="pct-pill" style="font-size: 0.8rem; padding: 0.25rem 0.65rem; background: rgba(239, 68, 68, 0.15); color: #fca5a5;">
              ${exp.count} ocorrências no banco
            </div>
          </div>

          <div style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.45;">
            <strong>Problema Identificado:</strong> ${exp.impacto}
          </div>

          <div style="background: rgba(0, 245, 155, 0.08); padding: 0.85rem 1.1rem; border-radius: var(--radius-md); border: 1px solid rgba(0, 245, 155, 0.25); display: flex; flex-direction: column; gap: 0.35rem;">
            <div style="font-size: 0.74rem; font-weight: 700; text-transform: uppercase; color: var(--primary); letter-spacing: 0.04em;">
              💡 Prescrição & Frase Sugerida
            </div>
            <div style="font-size: 0.88rem; font-weight: 600; color: var(--text-main);">
              "${exp.frase_sugerida}"
            </div>
            <div style="font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem;">
              ${exp.recomendacao}
            </div>
          </div>

          <div style="display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.25rem;">
            <div style="font-size: 0.76rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase;">
              Casos Reais da Nossa Equipe Identificados no Banco de Dados:
            </div>
            <div style="display: flex; flex-direction: column; gap: 0.45rem;">
              ${casosHtml}
            </div>
          </div>
        </div>
      `;
    }).join('');
  },

  renderSummary(summary) {
    if (!summary) return;
    const elTot = document.getElementById('intel-sum-records');
    const elConv = document.getElementById('intel-sum-conv');
    const elInfo = document.getElementById('intel-sum-info');
    const elNoShow = document.getElementById('intel-sum-noshow');

    if (elTot) elTot.textContent = summary.total_records;
    if (elConv) elConv.textContent = `${summary.avg_conversion_rate}%`;
    if (elInfo) elInfo.textContent = `${summary.avg_somente_info_rate}%`;
    if (elNoShow) elNoShow.textContent = `${summary.avg_no_show_rate}%`;
  },

  renderAlerts(alerts) {
    const container = document.getElementById('intel-alerts-container');
    const badgeCount = document.getElementById('sidebar-intel-badge');
    if (!container) return;

    if (!alerts || alerts.length === 0) {
      container.innerHTML = `
        <div class="glass-card" style="padding: 2rem; text-align: center;">
          <h4 style="color: var(--success);">Todos os operadores operando dentro da média esperada</h4>
          <p style="margin-top: 4px;">Nenhuma anomalia estatística detectada no período.</p>
        </div>
      `;
      if (badgeCount) badgeCount.classList.add('hidden');
      return;
    }

    if (badgeCount) {
      badgeCount.textContent = alerts.length;
      badgeCount.classList.remove('hidden');
    }

    container.innerHTML = alerts.map((al) => {
      let badgeHtml = '';
      if (al.severidade === 'critico') {
        badgeHtml = `<span class="badge badge-danger">Desvio Crítico</span>`;
      } else if (al.severidade === 'alerta') {
        badgeHtml = `<span class="badge badge-warning">Atenção</span>`;
      } else {
        badgeHtml = `<span class="badge badge-success">Destaque Positivo</span>`;
      }

      return `
        <div class="alert-card ${al.severidade}">
          <div class="alert-header">
            <div style="display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;">
              ${badgeHtml}
              <span class="alert-title">${al.titulo}</span>
              <span style="font-size: 0.76rem; color: var(--text-dim);">// Alvo: <strong>${al.operador}</strong></span>
            </div>
            <div style="display: flex; gap: 0.5rem;">
              <button class="btn btn-secondary btn-sm" onclick="IntelligenceModule.filterByOperator('${al.operador}')">
                Filtrar Conversas
              </button>
            </div>
          </div>
          
          <div class="alert-content">
            ${al.mensagem}
          </div>

          <div style="display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;">
            <div class="alert-prescricao" style="flex: 1; min-width: 280px;">
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
              <span><strong>Impacto:</strong> ${al.impacto}</span>
            </div>
            <div style="font-size: 0.8rem; color: var(--primary);">
              <strong>Ação:</strong> ${al.acao_sugerida}
            </div>
          </div>
        </div>
      `;
    }).join('');
  },

  renderPlaybooks(playbooks) {
    const container = document.getElementById('intel-playbooks-container');
    if (!container) return;

    if (!playbooks || playbooks.length === 0) {
      container.innerHTML = `<p>Nenhum playbook disponível.</p>`;
      return;
    }

    container.innerHTML = playbooks.map((pb, idx) => {
      const scriptSafe = pb.script_sugerido.replace(/"/g, '&quot;');
      return `
        <div class="playbook-card glass-card">
          <div style="display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;">
            <div>
              <span class="badge badge-purple" style="margin-bottom: 0.35rem;">${pb.categoria}</span>
              <h4 style="color: var(--text-main); font-size: 1.02rem;">${pb.titulo}</h4>
            </div>
            <button class="btn btn-primary btn-sm" onclick="IntelligenceModule.copyScript(${idx})">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
              Copiar Script
            </button>
          </div>

          <div style="font-size: 0.8rem; color: var(--text-muted);">
            <strong style="color: var(--secondary);">Gatilho de Aplicação:</strong> ${pb.gatilho}
          </div>

          <div class="playbook-script-box" id="pb-script-${idx}">
            ${pb.script_sugerido}
          </div>

          <div style="display: flex; align-items: center; justify-content: space-between; font-size: 0.76rem; color: var(--text-dim);">
            <span><strong>Foco:</strong> ${pb.foco}</span>
            <span style="color: var(--success); font-weight: 600;">${pb.metricas_esperadas}</span>
          </div>
        </div>
      `;
    }).join('');
  },

  renderBottlenecks(bottlenecks) {
    const tbody = document.getElementById('intel-bottlenecks-table-body');
    if (!tbody) return;

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

    tbody.innerHTML = bottlenecks.map((b) => {
      return `
        <tr>
          <td>
            <span class="font-bold" style="color: var(--danger);">${b.motivo}</span>
          </td>
          <td>
            <span class="font-mono font-semibold">${b.quantidade} (${b.percentual_volume}%)</span>
          </td>
          <td>
            <span class="font-mono font-bold" style="color: var(--warning);">
              R$ ${(b.impacto_estimado_brl / 1000000).toFixed(2)}M
            </span>
          </td>
          <td style="max-width: 320px; font-size: 0.8rem; color: var(--text-muted);">
            ${b.diagnostico}
          </td>
          <td style="max-width: 280px; font-size: 0.8rem; color: var(--primary);">
            ${b.acao_corretiva}
          </td>
        </tr>
      `;
    }).join('');
  },

  copyScript(idx) {
    if (!this.data || !this.data.playbooks || !this.data.playbooks[idx]) return;
    const script = this.data.playbooks[idx].script_sugerido;
    navigator.clipboard.writeText(script).then(() => {
      showToast('Script de abordagem copiado com sucesso!', 'success');
    }).catch(() => {
      showToast('Falha ao copiar script.', 'error');
    });
  },

  filterByOperator(operatorName) {
    const sel = document.getElementById('filter-operador');
    if (sel) {
      sel.value = operatorName;
      window.App.applyFilters();
      window.App.navigate('conversations');
      showToast(`Filtro aplicado para o operador: ${operatorName}`, 'info');
    }
  }
};
