<?php
require_once(dirname(__DIR__) . '/config/db.php');
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);
?>

<h4 class="mb-3"><i class="bi bi-diagram-3"></i> Plano de Contas Financeiro</h4>
<hr>

<div class="d-flex gap-3" style="height: calc(100vh - 160px);">
  <!-- ÁRVORE -->
  <div class="border-end p-3 flex-grow-1" style="min-width:55%;">

    <!-- HEADER FIXO -->
    <div class="tree-header">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="d-flex align-items-center gap-2 flex-grow-1">
          <input type="text" id="busca" class="form-control form-control-sm" placeholder="Pesquisar conta...">
          <small class="text-muted">⏎ Enter ou F3 para Próxima ocorrência</small>
          <button class="btn btn-outline-secondary btn-sm" id="expandAll" title="Expandir tudo">
            <i class="bi bi-arrows-expand"></i>
          </button>
          <button class="btn btn-outline-secondary btn-sm" id="collapseAll" title="Recolher tudo">
            <i class="bi bi-arrows-collapse"></i>
          </button>
        </div>
        <div class="d-flex gap-1">
          <button class="btn btn-sm btn-outline-success" id="btnNovoPai">
            <i class="bi bi-plus-circle"></i> Novo
          </button>
          <button class="btn btn-sm btn-outline-primary" id="btnNovoFilho">
            <i class="bi bi-diagram-2"></i> Novo Filho
          </button>
        </div>
      </div>
    </div>

    <!-- ÁRVORE COM SCROLL -->
    <ul id="tree" class="list-unstyled ps-2 tree-scroll"></ul>
  </div>

  <!-- FORMULÁRIO -->
  <div class="p-3" style="width: 480px;">
    <div class="card shadow-sm border-0" style="min-height: fit-content;">
      <div class="card-body p-3">
        <h6 class="fw-bold mb-3 text-secondary">Detalhes da Conta</h6>

        <div class="row g-3">
          <div class="col-12">
            <label class="small">Código</label>
            <input type="text" class="form-control form-control-sm" id="cdconta" readonly>
          </div>
          <div class="col-12">
            <label class="small">Descrição *</label>
            <input type="text" class="form-control form-control-sm" id="dsconta">
          </div>
          <div class="col-6">
            <label class="small">Natureza Financeira *</label>
            <select class="form-select form-select-sm" id="flnatureza">
              <option value="">Selecione</option>
              <option value="C">Crédito</option>
              <option value="D">Débito</option>
            </select>
          </div>
          <div class="col-6">
            <label class="small">Classificação</label>
            <select class="form-select form-select-sm" id="dsclassificacao">
              <option value="">Selecione</option>
              <optgroup label="Crédito">
                <option>RECEITA FINANCEIRA</option>
                <option>RECEITA OPERACIONAL</option>
                <option>OUTRAS RECEITAS OPERACIONAIS</option>
                <option>RECEITA NÃO OPERACIONAL</option>
                <option>ESTOQUES</option>
                <option>IMOBILIZADO</option>
              </optgroup>
              <optgroup label="Débito">
                <option>DESPESAS FIXAS</option>
                <option>DESPESAS VARIÁVEIS</option>
                <option>DESPESAS OPERACIONAIS</option>
                <option>DESPESAS ADMINISTRATIVAS</option>
                <option>CMV</option>
                <option>CMO</option>
                <option>ESTOQUES</option>
                <option>IMOBILIZADO</option>
              </optgroup>
            </select>
          </div>

          <div class="col-6">
            <label class="small">Tipo</label>
            <select class="form-select form-select-sm" id="fltipo" disabled>
              <option value="S">Sintética</option>
              <option value="A">Analítica</option>
            </select>
          </div>

          <div class="col-12 mt-2">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="flmatriz">
              <label class="form-check-label small" for="flmatriz">
                Conta matriz de Receita ou Despesa
              </label>
            </div>
          </div>

          <div class="col-6" id="campoPcIdeal" style="display:none;">
            <label class="small d-flex align-items-center">
              % Ideal
              <i class="bi bi-question-circle ms-1 text-secondary"
                 title="% ideal da despesa em relação à receita"
                 data-bs-toggle="tooltip"></i>
            </label>
            <input type="number" step="0.01" min="0" class="form-control form-control-sm" id="pcideal" value="0">
          </div>
        </div>

        <div class="mt-3 d-flex justify-content-between">
          <button class="btn btn-warning btn-sm flex-grow-1 me-1" id="btnInativar">
            <i class="bi bi-power"></i> Inativar / Reativar
          </button>
          <button class="btn btn-success btn-sm flex-grow-1" id="btnSalvar">
            <i class="bi bi-save"></i> Salvar
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.tree-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
}

.tree-scroll {
  overflow-y: auto;
  max-height: calc(100vh - 240px);
}

#tree span.conta-item {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

#tree span.conta-item.selected {
  background-color: #f2f2f2;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<script>
let contaSelecionada = null;
let arvoreCompleta = [];
let iniciouTela = false;

/* ✅ NOVO: controle de busca em tela */
let resultadosBusca = [];
let indiceBuscaAtual = -1;

/* ✅ ALTERADO APENAS AQUI: carregar sempre a árvore completa (sem filtro no backend) */
function carregarArvore(filtro = '') {
  fetch('?m=planocontabil_actions&ajax=tree')
    .then(r => r.json())
    .then(dados => {
      arvoreCompleta = dados;
      montarArvore($('#tree'), dados, !iniciouTela);
      iniciouTela = true;

      /* ✅ opcional e não invasivo: se já tiver termo digitado, reaplica busca após recarregar */
      const termo = ($('#busca').val() || '').trim();
      if (termo) buscarNaTela(termo);
    })
    .catch(err => alert('Erro ao carregar árvore: ' + err.message));
}

function montarArvore($ul, itens, recolhido = true) {
  $ul.empty();
  itens.forEach(item => {
    const temFilhos = item.children && item.children.length > 0;
    const $li = $('<li class="mb-1"></li>');
    const $toggle = $('<span class="me-1 text-secondary" style="cursor:pointer; display:inline-block; width:14px;">' +
                      (temFilhos ? '<i class="bi bi-plus-square toggle-icon"></i>' : '') + '</span>');

    let estilo = 'cursor:pointer; color:#000;';
    if (item.flativo == 1) estilo += 'color:gray; text-decoration: line-through;';
    if (temFilhos) estilo += 'font-weight:bold;';

    const desc = item.dsconta ?? '';
    const codigoContabil = item.cdcontacontabil ? ` (${item.cdcontacontabil})` : '';
    const $span = $(`<span class="conta-item" style="${estilo}">${item.cdconta} - ${desc}${codigoContabil}</span>`);

    $span.on('click', function () {
      $('#tree .conta-item').removeClass('selected');
      $(this).addClass('selected');
      selecionarConta(item);
    });

    $li.append($toggle).append($span);

    if (temFilhos) {
      const $sub = $('<ul class="ps-4 list-unstyled"></ul>');
      montarArvore($sub, item.children, recolhido);
      $li.append($sub);

      if (recolhido) $sub.hide();
      $toggle.on('click', function() {
        const aberto = $sub.is(':visible');
        if (aberto) {
          $sub.slideUp(150);
          $(this).find('i').removeClass('bi-dash-square').addClass('bi-plus-square');
        } else {
          $sub.slideDown(150);
          $(this).find('i').removeClass('bi-plus-square').addClass('bi-dash-square');
        }
      });
    }

    $ul.append($li);
  });
}

function selecionarConta(item) {
  contaSelecionada = item;
  $('#cdconta').val(item.cdconta);
  $('#dsconta').val(item.dsconta);
  $('#flnatureza').val(item.flnatureza);
  $('#dsclassificacao').val(item.dsclassificacao);
  $('#fltipo').val(item.fltipo || 'S');
  $('#flmatriz').prop('checked', item.flmatriz == true || item.flmatriz == 't' || item.flmatriz == 1);
  $('#pcideal').val(item.pcideal ?? 0);

  if ((item.fltipo || 'S') === 'A') $('#campoPcIdeal').show();
  else $('#campoPcIdeal').hide();
}

$('#btnNovoPai').on('click', () => {
  fetch('?m=planocontabil_actions&ajax=nextcode')
    .then(r => r.json())
    .then(resp => {
      if (resp.ok) {
        $('#cdconta').val(resp.codigo);
        $('#dsconta').val('');
        $('#flnatureza').val('');
        $('#dsclassificacao').val('');
        $('#fltipo').val('S');
        $('#flmatriz').prop('checked', false);
        $('#pcideal').val(0);
        $('#campoPcIdeal').hide();
        $('#tree .conta-item').removeClass('selected');
      } else alert(resp.msg);
    });
});

$('#btnNovoFilho').on('click', () => {
  if (!contaSelecionada) return alert('Selecione uma conta pai primeiro.');
  const pai = contaSelecionada.cdconta;

  fetch(`?m=planocontabil_actions&ajax=nextcode&pai=${pai}`)
    .then(r => r.json())
    .then(resp => {
      if (resp.ok) {
        $('#cdconta').val(resp.codigo);
        $('#dsconta').val('');
        $('#flnatureza').val(contaSelecionada.flnatureza || '');
        $('#dsclassificacao').val('');
        $('#fltipo').val('A');
        $('#flmatriz').prop('checked', false);
        $('#pcideal').val(0);
        $('#campoPcIdeal').show();
        $('#tree .conta-item').removeClass('selected');
      } else alert(resp.msg);
    });
});

$('#btnSalvar').on('click', () => {
  const dados = {
    cdconta: $('#cdconta').val(),
    dsconta: $('#dsconta').val(),
    cdcontapai: contaSelecionada ? contaSelecionada.cdconta : null,
    flnatureza: $('#flnatureza').val(),
    dsclassificacao: $('#dsclassificacao').val(),
    fltipo: $('#fltipo').val(),
    flmatriz: $('#flmatriz').is(':checked'),
    pcideal: $('#pcideal').val() || 0
  };

  fetch('?m=planocontabil_actions&ajax=salvar', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(dados)
  })
  .then(r => r.json())
  .then(resp => {
    alert(resp.msg || 'Retorno indefinido.');
    if (resp.ok) carregarArvore($('#busca').val());
  });
});

$('#btnInativar').on('click', () => {
  if (!contaSelecionada) return alert('Selecione uma conta primeiro.');
  fetch(`?m=planocontabil_actions&ajax=toggle&codigo=${contaSelecionada.cdconta}`)
    .then(r => r.json())
    .then(resp => {
      alert(resp.msg || 'Retorno indefinido.');
      if (resp.ok) carregarArvore($('#busca').val());
    });
});

$('#expandAll').on('click', () => {
  $('#tree ul').slideDown(150);
  $('#tree .toggle-icon').removeClass('bi-plus-square').addClass('bi-dash-square');
});

$('#collapseAll').on('click', () => {
  $('#tree ul').slideUp(150);
  $('#tree .toggle-icon').removeClass('bi-dash-square').addClass('bi-plus-square');
});

/* ✅ NOVO: busca em tela (não filtra backend, não oculta árvore) */
function buscarNaTela(termo) {
  resultadosBusca = [];
  indiceBuscaAtual = -1;

  if (!termo) {
    $('#tree .conta-item').removeClass('selected');
    return;
  }

  const t = termo.toLowerCase();

  $('#tree .conta-item').each(function() {
    const texto = $(this).text().toLowerCase();
    if (texto.includes(t)) {
      resultadosBusca.push($(this));

      // abrir todos os pais
      $(this).parents('ul').show();

      // ajustar ícones dos toggles dos pais
      $(this).parents('li').children('span')
        .find('i')
        .removeClass('bi-plus-square')
        .addClass('bi-dash-square');
    }
  });

  // vai para a primeira ocorrência automaticamente
  navegarResultado(1);
}

/* ✅ NOVO: navegar ocorrências (F3/Shift+F3) */
function navegarResultado(dir) {
  if (!resultadosBusca.length) return;

  indiceBuscaAtual += dir;
  if (indiceBuscaAtual >= resultadosBusca.length) indiceBuscaAtual = 0;
  if (indiceBuscaAtual < 0) indiceBuscaAtual = resultadosBusca.length - 1;

  $('#tree .conta-item').removeClass('selected');
  const $el = resultadosBusca[indiceBuscaAtual];
  $el.addClass('selected');
  $el[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
}

/* ✅ ALTERADO APENAS AQUI: input chama busca em tela */
$('#busca').on('input', function() {
  const termo = $(this).val().trim();
  buscarNaTela(termo);
});

/* ✅ NOVO: tecla F3 / Shift+F3 */
$(document).on('keydown', function(e) {

  // F3 ou Shift+F3
  if (e.key === 'F3') {
    e.preventDefault();
    navegarResultado(e.shiftKey ? -1 : 1);
    return;
  }

  // ENTER → próxima ocorrência (somente quando foco estiver no campo de busca)
  if (e.key === 'Enter' && document.activeElement.id === 'busca') {
    e.preventDefault();
    navegarResultado(1);
  }

});

// ✅ Seleciona o valor inteiro do campo ao clicar/focar
$(document).on('focus click', '#pcideal', function() {
  $(this).select();
});

// Inicializa tooltips do Bootstrap
document.addEventListener('DOMContentLoaded', function () {
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  tooltipTriggerList.map(el => new bootstrap.Tooltip(el));
});

carregarArvore();
</script>
