<h4 class="mb-3"><i class="bi bi-calculator"></i> Variáveis de Cálculo</h4>
<hr>

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <h6 class="text-secondary mb-0">Gerencie as variáveis globais que servirão como base para fórmulas em Planejamento, Dashboard e Relatórios.</h6>

  <button class="btn btn-outline-light btn-sm border-secondary text-dark bg-light"
          data-bs-toggle="modal" data-bs-target="#modalVariavel">
    <i class="bi bi-plus-circle"></i> Nova Variável
  </button>
</div>

<div class="table-responsive">
<table class="table table-striped table-hover align-middle">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Tipo</th>
      <th>Modelo</th>
      <th>Ordem</th>
      <th>Status</th>
      <th>Data Criação</th>
      <th class="text-center">Ações</th>
    </tr>
  </thead>
  <tbody id="tbodyVariaveis">
    <tr><td colspan="8" class="text-center text-muted">Carregando...</td></tr>
  </tbody>
</table>
</div>

<!-- MODAL CADASTRO/EDIÇÃO -->
<div class="modal fade" id="modalVariavel" tabindex="-1">
  <div class="modal-dialog">
    <form class="modal-content" id="formVariavel">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Cadastrar Nova Variável</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="varCdvariavel" value="">
        <div class="mb-3">
          <label>Nome da Variável *</label>
          <input type="text" name="nome" id="varNome" class="form-control" required maxlength="100">
        </div>
        <div class="mb-3">
          <label>Tipo *</label>
          <select name="tipo" id="varTipo" class="form-select" required>
            <option value="">Selecione</option>
            <option value="Planejamento">Planejamento</option>
            <option value="Dashboard">Dashboard</option>
            <option value="Relatorio">Relatório</option>
            <option value="Outro">Outro</option>
          </select>
        </div>
        <div class="mb-3">
          <label>Modelo de Variável *</label>
          <select name="modelo" id="varModelo" class="form-select" required>
            <option value="">Selecione</option>
            <option value="meta">Meta</option>
            <option value="submeta">SubMeta</option>
            <option value="orcamento">Orçamento</option>
            <option value="resultado">Resultado</option>
          </select>
          <small class="text-muted">Define a linguagem usada no dashboard (Meta, Orçamento, Resultado, etc).</small>
        </div>
        <div class="mb-3" id="grupoOrdem" style="display:none;">
          <label>Ordem Prioritária *</label>
          <input type="number" min="1" step="1" id="varOrdem" class="form-control" placeholder="Ex: 1, 2, 3...">
          <small class="text-muted">Obrigatório para variáveis de Dashboard, Relatório ou Outro.</small>
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input type="checkbox" id="varGrafico" class="form-check-input">
            <label class="form-check-label" for="varGrafico">
              Exibir em Gráficos
            </label>
          </div>
          <small class="text-muted">Marque para que esta variável seja disponibilizada para visualização em gráficos.</small>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" name="salvar" class="btn btn-success">Salvar</button>
      </div>
    </form>
  </div>
</div>

<script>
async function carregarVariaveis() {
  const tbody = document.getElementById('tbodyVariaveis');
  tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">Carregando...</td></tr>';

  try {
    const resp = await fetch('?m=variaveis_actions&ajax=listar_variaveis');
    const data = await resp.json();
    if (!data.ok) throw new Error(data.msg || 'Erro ao listar variáveis');

    const lista = data.data || [];
    if (!lista.length) {
      tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">Nenhuma variável cadastrada.</td></tr>';
      return;
    }

    tbody.innerHTML = lista.map(v => {
      const statusBadge = v.flativo == 0
        ? '<span class="badge bg-success">Ativa</span>'
        : '<span class="badge bg-secondary">Inativa</span>';
      const tipo = (v.tipo || '').toUpperCase();
      const modelo = (v.modelo || '').toUpperCase();
      let modeloBadge;
      if (modelo === 'META') {
        modeloBadge = '<span class="badge bg-info">Meta</span>';
      } else if (modelo === 'SUBMETA') {
        modeloBadge = '<span class="badge bg-success">SubMeta</span>';
      } else if (modelo === 'RESULTADO') {
        modeloBadge = '<span class="badge bg-secondary">Resultado</span>';
      } else {
        modeloBadge = '<span class="badge bg-warning text-dark">Orçamento</span>';
      }
      const ordem = (v.ordem !== null && v.ordem !== undefined) ? v.ordem : '';
      let dt = v.dthrcriacao || '';
      try {
        if (dt) {
          const d = new Date(dt);
          if (!isNaN(d.getTime())) {
            dt = d.toLocaleString('pt-BR');
          }
        }
      } catch (e) {}

      const btnToggleClass = v.flativo == 0 ? 'danger' : 'success';
      const nomeEsc = String(v.nome || '').replace(/"/g, '&quot;');

      return `
        <tr data-id="${v.cdvariavel}" data-nome="${nomeEsc}">
          <td>${v.cdvariavel}</td>
          <td>${nomeEsc}</td>
          <td><span class="badge bg-primary">${tipo}</span></td>
          <td>${modeloBadge}</td>
          <td>${ordem || '-'}</td>
          <td>${statusBadge}</td>
          <td>${dt || '-'}</td>
          <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-warning btn-edit" title="Editar variável">
              <i class="bi bi-pencil"></i> Editar
            </button>
            <a href="?m=variaveis_detalhe&cdvariavel=${v.cdvariavel}" class="btn btn-sm btn-outline-primary">
              <i class="bi bi-diagram-3"></i> Estrutura
            </a>
            <button type="button" class="btn btn-sm btn-outline-${btnToggleClass} btn-toggle" title="Ativar/Inativar">
              <i class="bi bi-power"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger btn-del" title="Excluir variável">
              <i class="bi bi-trash"></i>
            </button>
          </td>
        </tr>
      `;
    }).join('');

    // Eventos dos botões
    tbody.querySelectorAll('.btn-edit').forEach(btn => {
      btn.addEventListener('click', () => {
        const tr = btn.closest('tr');
        if (!tr) return;
        const id = tr.getAttribute('data-id');
        editarVariavel(id);
      });
    });

    tbody.querySelectorAll('.btn-toggle').forEach(btn => {
      btn.addEventListener('click', () => {
        const tr = btn.closest('tr');
        if (!tr) return;
        const id = tr.getAttribute('data-id');
        toggleVariavel(id);
      });
    });

    tbody.querySelectorAll('.btn-del').forEach(btn => {
      btn.addEventListener('click', () => {
        const tr = btn.closest('tr');
        if (!tr) return;
        const id = tr.getAttribute('data-id');
        const nome = tr.getAttribute('data-nome') || '';
        excluirVariavel(id, nome);
      });
    });

  } catch (err) {
    tbody.innerHTML = `<tr><td colspan="7" class="text-center text-danger">${err.message}</td></tr>`;
  }
}

async function editarVariavel(id) {
  try {
    const resp = await fetch('?m=variaveis_actions&ajax=obter_variavel&cdvariavel=' + encodeURIComponent(id));
    const data = await resp.json();
    if (!data.ok) {
      alert(data.msg || 'Erro ao carregar variável.');
      return;
    }
    const v = data.data;
    
    // Popula os campos do modal
    document.getElementById('varCdvariavel').value = v.cdvariavel;
    document.getElementById('varNome').value = v.nome;
    document.getElementById('varTipo').value = v.tipo;
    document.getElementById('varModelo').value = v.modelo;
    document.getElementById('varOrdem').value = v.ordem || '';
    document.getElementById('varGrafico').checked = v.grafico === true || v.grafico === 1 || v.grafico === '1' || v.grafico === 't';
    
    // Atualiza título do modal
    document.getElementById('modalTitle').textContent = 'Editar Variável: ' + v.nome;
    
    // Mostra/esconde campo de ordem conforme o tipo
    const tipoSelecionado = v.tipo;
    const grupoOrdem = document.getElementById('grupoOrdem');
    if (tipoSelecionado && tipoSelecionado !== 'Planejamento') {
      grupoOrdem.style.display = 'block';
    } else {
      grupoOrdem.style.display = 'none';
    }
    
    // Abre o modal
    const modal = new bootstrap.Modal(document.getElementById('modalVariavel'));
    modal.show();
  } catch (err) {
    alert(err.message);
  }
}

async function toggleVariavel(id) {
  try {
    const resp = await fetch('?m=variaveis_actions&ajax=toggle_variavel', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'cdvariavel=' + encodeURIComponent(id)
    });
    const data = await resp.json();
    if (!data.ok) {
      alert(data.msg || 'Erro ao alterar status.');
      return;
    }
    carregarVariaveis();
  } catch (err) {
    alert(err.message);
  }
}

async function excluirVariavel(id, nome) {
  const msg = `Deseja excluir definitivamente a variável "${nome}" (ID ${id})?\nSuas seções e fórmulas também serão removidas.`;
  if (!confirm(msg)) return;

  try {
    const resp = await fetch('?m=variaveis_actions&ajax=excluir_variavel', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'cdvariavel=' + encodeURIComponent(id)
    });
    const data = await resp.json();
    alert(data.msg || (data.ok ? 'Operação concluída.' : 'Erro ao excluir.'));
    if (data.ok) {
      carregarVariaveis();
    }
  } catch (err) {
    alert(err.message);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('formVariavel');
  if (form) {
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const cdvariavel = document.getElementById('varCdvariavel').value.trim();
      const nome = document.getElementById('varNome').value.trim();
      const tipo = document.getElementById('varTipo').value.trim();
      const modelo = document.getElementById('varModelo').value.trim();
      const ordemStr = document.getElementById('varOrdem').value.trim();
      const grafico = document.getElementById('varGrafico').checked;
      const precisaOrdem = (tipo && tipo !== 'Planejamento');

      if (!nome || !tipo || !modelo) {
        alert('Informe nome, tipo e modelo da variável.');
        return;
      }

      let ordem = null;
      if (precisaOrdem) {
        if (!ordemStr) {
          alert('Informe a ordem prioritária para este tipo de variável.');
          return;
        }
        ordem = parseInt(ordemStr, 10);
        if (!ordem || ordem <= 0) {
          alert('A ordem prioritária deve ser um número inteiro maior que zero.');
          return;
        }
      }

      try {
        // Determina se é inserção ou atualização
        const ajax = cdvariavel ? 'atualizar_variavel' : 'salvar_variavel';
        const payload = { nome, tipo, modelo, ordem, grafico: !!grafico };
        if (cdvariavel) payload.cdvariavel = parseInt(cdvariavel);
        
        const resp = await fetch('?m=variaveis_actions&ajax=' + ajax, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        const data = await resp.json();
        alert(data.msg || (data.ok ? 'Variável salva.' : 'Erro ao salvar.'));
        if (data.ok) {
          // Limpa campos
          document.getElementById('varCdvariavel').value = '';
          document.getElementById('varNome').value = '';
          document.getElementById('varTipo').value = '';
          document.getElementById('varModelo').value = '';
          document.getElementById('varOrdem').value = '';
          document.getElementById('varGrafico').checked = false;
          document.getElementById('modalTitle').textContent = 'Cadastrar Nova Variável';

          // Fecha o modal
          const modalEl = document.getElementById('modalVariavel');
          if (window.bootstrap && bootstrap.Modal && modalEl) {
            const instance = bootstrap.Modal.getInstance(modalEl);
            if (instance) {
              instance.hide();
            }
          }
          
          // Remove backdrop se ainda estiver visível
          setTimeout(() => {
            const backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) {
              backdrop.remove();
            }
            document.body.classList.remove('modal-open');
          }, 300);

          carregarVariaveis();
        }
      } catch (err) {
        alert(err.message);
      }
    });
  }

  const tipoSel = document.getElementById('varTipo');
  const grupoOrdem = document.getElementById('grupoOrdem');
  if (tipoSel && grupoOrdem) {
    tipoSel.addEventListener('change', () => {
      const val = tipoSel.value;
      if (val && val !== 'Planejamento') {
        grupoOrdem.style.display = '';
      } else {
        grupoOrdem.style.display = 'none';
        document.getElementById('varOrdem').value = '';
      }
    });
  }

  carregarVariaveis();
});
</script>
