<?php
require_once(dirname(__DIR__) . '/config/db.php');
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);
$cdvariavel = (int)($_GET['cdvariavel'] ?? 0);
if ($cdvariavel <= 0) {
    echo "<div class='alert alert-danger'>Variável não informada.</div>";
    exit;
}
?>

<h4 class="mb-3"><i class="bi bi-list-nested"></i> Estrutura da Variável</h4>
<hr>

<div class="d-flex gap-3" style="height: calc(100vh - 160px);">
  <!-- SEÇÕES -->
  <div class="border-end p-3 overflow-auto flex-grow-1" style="min-width:45%;">
    <h6 class="fw-bold text-secondary mb-3">Seções da Variável</h6>
    <table class="table table-striped table-sm align-middle">
      <thead class="table-dark">
        <tr>
          <th>Ordem</th>
          <th>Título</th>
          <th>Máscara</th>
          <th>Fórmula</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody id="tabelaSecoes"></tbody>
    </table>
  </div>

  <!-- FORMULÁRIO -->
  <div class="p-3 flex-grow-1" style="min-width:55%;">
    <div id="cardForm" class="card shadow-sm border-0">
      <div class="card-header bg-primary text-white py-2">
        <strong>Nova Seção / Edição</strong>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-3">
            <label class="small">Ordem *</label>
            <input type="number" class="form-control form-control-sm" id="ordem">
          </div>
          <div class="col-md-5">
            <label class="small">Título *</label>
            <input type="text" class="form-control form-control-sm" id="titulo">
          </div>
          <div class="col-md-4">
            <label class="small">Máscara *</label>
            <select class="form-select form-select-sm" id="mascara">
              <option value="">Selecione</option>
              <option value="numero">Número</option>
              <option value="percentual">%</option>
            </select>
          </div>

          <div class="col-12">
            <label class="small">Fórmula *</label>
            <textarea class="form-control form-control-sm" id="formula" rows="2" placeholder="Ex: (15+26) ÷ 2"></textarea>
            <div id="previewFormula" class="small text-secondary mt-2 p-2 rounded" style="background:#fffbea;"></div>
          </div>
        </div>

        <hr>
        <h6 class="fw-bold text-secondary mb-2">Plano de Contas</h6>

        <div class="d-flex align-items-center gap-2 mb-2">
          <div class="input-group input-group-sm" style="max-width: 420px;">
            <span class="input-group-text"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control" id="buscaConta" placeholder="Pesquisar conta (código ou nome)...">
            <button class="btn btn-outline-secondary" type="button" id="btnLimparBuscaConta" title="Limpar">&times;</button>
          </div>
          <small class="text-muted" id="buscaContaInfo"></small>
        </div>
        <div id="arvoreContas" class="border rounded p-2 overflow-auto" style="height:300px;"></div>

        <div class="mt-3 d-flex justify-content-between">
          <button class="btn btn-outline-secondary btn-sm" id="btnCancelar"><i class="bi bi-x-circle"></i> Cancelar</button>
          <div>
            <button class="btn btn-danger btn-sm" id="btnExcluir"><i class="bi bi-trash"></i> Excluir</button>
            <button class="btn btn-success btn-sm" id="btnSalvar"><i class="bi bi-save"></i> Salvar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
#arvoreContas ul { list-style:none; padding-left:15px; }
#arvoreContas li { margin:2px 0; }
.toggle-icon { cursor:pointer; width:14px; display:inline-block; }
.conta-label { cursor:pointer; }
.sintetico { font-weight: bold; color: #000; }
.analitico { font-weight: normal; color: #333; }
.text-op { color:#007bff; font-weight:bold; }
.text-conta { color:#28a745; font-weight:bold; }
.paren-open, .paren-close { color:#c0392b; font-weight:bold; cursor:pointer; }
.paren-highlight { background:#ffe0b3; border-radius:3px; padding:0 3px; }

#buscaContaInfo { white-space: nowrap; }
.conta-match { background: #fff3cd; border-radius: 3px; padding: 0 3px; }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
let contas = {};
let secaoSelecionada = null;
let ultimaPosConta = null;

// =====================
// 🔹 Carregar árvore
// =====================
function carregarArvore() {
  fetch('?m=planocontabil_actions&ajax=tree')
    .then(r => r.json())
    .then(d => montarArvore($('#arvoreContas'), d))
    .catch(err => alert('Erro ao carregar árvore: ' + err.message));
}

function montarArvore($container, itens) {
  const $ul = $('<ul></ul>');
  itens.forEach(item => {
    const temFilhos = item.children && item.children.length > 0;
    contas[item.cdcontacontabil] = item.dsconta;

    const $li = $('<li></li>');
    $li.attr('data-cd', String(item.cdcontacontabil || ''));
    $li.attr('data-search', String((item.dsconta || '') + ' ' + (item.fltipo === 'S' ? 'sintetico' : (item.flnatureza || ''))));
    const $toggle = $('<span class="toggle-icon text-secondary me-1">' +
                      (temFilhos ? '<i class="bi bi-plus-square"></i>' : '') + '</span>');
    const estilo = item.fltipo === 'S' ? 'sintetico' : 'analitico';
    const $chk = $(`<input type="checkbox" class="form-check-input me-1 conta-check" value="${item.cdcontacontabil}">`);
    const descricao = item.fltipo === 'S' ? item.dsconta : `${item.dsconta} (${item.flnatureza})`;
    const $label = $(`<span class="conta-label ${estilo}">${descricao}</span>`);

    const $sub = $('<ul style="display:none;"></ul>');
    if (temFilhos) montarArvore($sub, item.children);

    $toggle.on('click', function() {
      const aberto = $sub.is(':visible');
      $sub.toggle(!aberto);
      $(this).find('i').toggleClass('bi-plus-square bi-dash-square');
    });

    $chk.on('change', function() {
      const cd = $(this).val();
      const input = $('#formula')[0];
      if (this.checked) {
        const cursorPos = input.selectionStart || input.value.length;
        const texto = input.value;
        const antes = texto.substring(0, cursorPos);
        const depois = texto.substring(cursorPos);
        input.value = antes + cd + ' ' + depois;
        ultimaPosConta = cursorPos + cd.length;
        input.selectionStart = input.selectionEnd = ultimaPosConta + 1;
        atualizarPreview();
        abrirSelectorOperador(cd);
      } else {
        let f = $('#formula').val().split(/\s+/).filter(x => x !== cd);
        $('#formula').val(f.join(' '));
        atualizarPreview();
      }
    });

    $li.append($toggle).append($chk).append($label).append($sub);
    $ul.append($li);
  });
  $container.append($ul);
}

// =====================
// 🔎 Busca no plano de contas
// =====================
function normTxt(s) {
  return String(s || '')
    .toLowerCase()
    .normalize('NFD')
    .replace(/[\u0300-\u036f]/g, '');
}

function aplicarBuscaContas() {
  const qRaw = $('#buscaConta').val() || '';
  const q = normTxt(qRaw.trim());
  const $root = $('#arvoreContas > ul').first();
  const $info = $('#buscaContaInfo');

  // remove destaque
  $('#arvoreContas .conta-label').removeClass('conta-match');

  if (!$root.length) {
    $info.text('');
    return;
  }

  if (!q) {
    // Mostra tudo e não força expand/collapse
    $root.find('li').show();
    $info.text('');
    return;
  }

  let matchesDiretos = 0;

  function walk($li) {
    const cd = normTxt($li.attr('data-cd'));
    const txt = normTxt($li.attr('data-search'));
    const selfMatch = (cd.includes(q) || txt.includes(q));

    let childMatch = false;
    const $sub = $li.children('ul');
    if ($sub.length) {
      $sub.children('li').each(function() {
        if (walk($(this))) childMatch = true;
      });
    }

    const match = selfMatch || childMatch;
    $li.toggle(match);

    if (selfMatch) {
      $li.children('.conta-label').addClass('conta-match');
      matchesDiretos++;
      // garante ancestrais abertos
      $li.parentsUntil('#arvoreContas', 'ul').show();
      $li.parentsUntil('#arvoreContas', 'li').each(function() {
        const $p = $(this);
        const $ico = $p.children('.toggle-icon').find('i');
        if ($ico.length) $ico.removeClass('bi-plus-square').addClass('bi-dash-square');
      });
    }

    if (childMatch) {
      $sub.show();
      const $ico = $li.children('.toggle-icon').find('i');
      if ($ico.length) $ico.removeClass('bi-plus-square').addClass('bi-dash-square');
    }

    return match;
  }

  $root.children('li').each(function() {
    walk($(this));
  });

  $info.text(matchesDiretos ? `${matchesDiretos} conta(s) encontrada(s)` : 'Nenhuma conta encontrada');
}

let buscaContaTimer = null;
$('#buscaConta').on('input', function() {
  clearTimeout(buscaContaTimer);
  buscaContaTimer = setTimeout(aplicarBuscaContas, 120);
});

$('#btnLimparBuscaConta').on('click', function() {
  $('#buscaConta').val('').focus();
  aplicarBuscaContas();
});

// =====================
// 🔹 Normalização no input
// =====================
$('#formula').on('input', function() {
  let val = $(this).val();
  val = val.replace(/×/g, '*').replace(/÷/g, '/');
  val = val.replace(/[^0-9+\-*/()\s]/g, '');
  val = val.replace(/\s{2,}/g, ' ');
  $(this).val(val);
  atualizarPreview();
});

// =====================
// 🔹 Preview da fórmula (melhorado com parser de tokens)
// =====================
function atualizarPreview() {
  const formula = $('#formula').val().trim();
  const $preview = $('#previewFormula');
  if (!formula) return $preview.html('');

  const partes = formula.match(/[()+\-*/]|\d+/g) || [];
  let html = '';
  let stack = [];

  partes.forEach((p, i) => {
    if (/^[+\-*/]$/.test(p)) {
      const simb = p === '/' ? '÷' : (p === '*' ? '×' : p);
      html += `<span class="text-op"> ${simb} </span>`;
    } else if (p === '(') {
      const id = 'p' + i + '_' + Date.now();
      stack.push(id);
      html += `<span class="paren-open" data-id="${id}">(</span> `;
    } else if (p === ')') {
      const id = stack.pop();
      html += `<span class="paren-close" data-id="${id}">)</span> `;
    } else if (/^\d+$/.test(p)) {
      html += `<span class="text-conta">(${p})</span> `;
      if (contas[p]) {
        html += `<span class="text-muted">${contas[p]}</span> `;
      } else {
        fetch(`?m=planocontabil_actions&ajax=getConta&cdcontacontabil=${p}`)
          .then(r => r.json())
          .then(d => {
            if (d && d.dsconta) {
              contas[p] = d.dsconta;
              atualizarPreview();
            }
          });
      }
    }
  });

  $preview.html(html.trim());
  $('.paren-open, .paren-close').hover(function() {
    const id = $(this).data('id');
    $(`[data-id="${id}"]`).addClass('paren-highlight');
  }, function() {
    const id = $(this).data('id');
    $(`[data-id="${id}"]`).removeClass('paren-highlight');
  });
}

// =====================
// 🔹 Overlay de operador (corrigido com fechamento automático)
// =====================
function abrirSelectorOperador(cd) {
  $('#popupOperador, #overlayOperador').remove();
  const overlay = $(`<div id="overlayOperador" style="position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,0.6);z-index:9998;display:flex;align-items:center;justify-content:center;"></div>`);
  const popup = $(`
    <div id="popupOperador" style="background:#fff;border-radius:10px;padding:20px 25px;
      box-shadow:0 3px 12px rgba(0,0,0,0.3);text-align:center;min-width:280px;animation:fadeIn .2s ease-in-out;">
      <div class="fw-bold mb-3 text-primary fs-6">Selecione o operador</div>
      <div class="d-flex justify-content-center gap-2 mb-3">
        <button class="btn btn-outline-dark btn-lg op">+</button>
        <button class="btn btn-outline-dark btn-lg op">−</button>
        <button class="btn btn-outline-dark btn-lg op">×</button>
        <button class="btn btn-outline-dark btn-lg op">÷</button>
      </div>
      <button class="btn btn-outline-secondary btn-sm cancelar">❌ Nenhum</button>
    </div>
  `);
  overlay.append(popup);
  $('body').append(overlay);

  popup.find('.op').on('click', function() {
    let op = $(this).text();
    if (op === '÷') op = '/';
    const input = $('#formula')[0];
    const val = input.value;
    const pos = ultimaPosConta ? ultimaPosConta + 1 : input.selectionStart;
    input.value = val.slice(0, pos) + ' ' + op + ' ' + val.slice(pos);
    input.selectionStart = input.selectionEnd = pos + 3;
    atualizarPreview();
    $('#arvoreContas input[type=checkbox]').prop('checked', false);
    ultimaPosConta = null;
    overlay.remove();
  });

  // ✅ Corrigido: fechamento automático de parêntese ao clicar em “Nenhum”
  popup.find('.cancelar').on('click', () => {
    const input = $('#formula')[0];
    let val = input.value.trim();
    const abertos = (val.match(/\(/g) || []).length;
    const fechados = (val.match(/\)/g) || []).length;
    if (abertos > fechados) input.value = val + ' )';
    atualizarPreview();
    $('#arvoreContas input[type=checkbox]').prop('checked', false);
    ultimaPosConta = null;
    overlay.remove();
  });

  $(document).one('keydown', e => { if (e.key === 'Escape') overlay.remove(); });
  overlay.on('click', e => { if (e.target === overlay[0]) overlay.remove(); });
  setTimeout(() => overlay.remove(), 5000);
}

// =====================
// 🔹 CRUD básico
// =====================
function normalizarFormulaParaBanco(formula) {
  return formula.replace(/÷/g, '/').replace(/\s+/g, ' ').trim();
}

$('#btnSalvar').on('click', () => {
  const ordem = $('#ordem').val();
  const titulo = $('#titulo').val().trim();
  const mascara = $('#mascara').val();
  let formula = $('#formula').val().trim();

  if (!ordem || !titulo || !mascara || !formula)
    return alert('Preencha todos os campos obrigatórios.');

  formula = normalizarFormulaParaBanco(formula);

  fetch('?m=variaveis_actions&ajax=salvar_secao', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      cdvariavel: <?= $cdvariavel ?>,
      ordem, titulo, mascara, formula
    })
  })
  .then(r => r.json())
  .then(resp => {
    alert(resp.msg);
    if (resp.ok) {
      carregarSecoes();
      limparFormulario();
    }
  });
});

$('#btnExcluir').on('click', () => {
  if (!secaoSelecionada) return alert('Selecione uma seção primeiro.');
  if (!confirm('Excluir esta seção?')) return;
  fetch(`?m=variaveis_actions&ajax=delete&id=${secaoSelecionada.cdsecao}`)
    .then(r => r.json())
    .then(resp => {
      alert(resp.msg);
      if (resp.ok) { carregarSecoes(); limparFormulario(); }
    });
});

$('#btnCancelar').on('click', limparFormulario);

function limparFormulario() {
  secaoSelecionada = null;
  $('#titulo, #formula, #mascara, #ordem').val('');
  $('#previewFormula').html('');
  $('#cardForm').removeClass('edit-mode');
  $('#arvoreContas input[type=checkbox]').prop('checked', false);
}

function carregarSecoes() {
  fetch(`?m=variaveis_actions&ajax=listar_secoes&cdvariavel=<?= $cdvariavel ?>`)
    .then(r => r.json())
    .then(dados => {
      const $tb = $('#tabelaSecoes');
      $tb.empty();
      dados.forEach(s => {
        const $tr = $('<tr></tr>');
        $tr.append(`<td>${s.ordem}</td><td>${s.titulo}</td><td>${s.mascara}</td><td>${s.formula}</td>
                    <td><button class='btn btn-sm btn-outline-primary editar'><i class='bi bi-pencil'></i></button></td>`);
        $tr.find('.editar').on('click', () => {
          secaoSelecionada = s;
          $('#ordem').val(s.ordem);
          $('#titulo').val(s.titulo);
          $('#mascara').val(s.mascara);
          $('#formula').val(s.formula);
          $('#cardForm').addClass('edit-mode');
          atualizarPreview();
        });
        $tb.append($tr);
      });
    });
}

carregarArvore();
carregarSecoes();
</script>
