{% extends "base.html" %}

{% block title %}Classificação Contábil da Despesa{% endblock %}

{% block content %}
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h1><i class="bi bi-diagram-3"></i> Classificação da Despesa</h1>
        <p class="text-muted mb-0">Ajuste plano de contas e centro de custo mesmo após a baixa do título.</p>
    </div>
    <a href="{{ url_for('contas_pagar') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
</div>

<div class="row">
    <div class="col-lg-4 mb-3">
        <div class="card h-100">
            <div class="card-header bg-light">
                <strong>Resumo do título</strong>
            </div>
            <div class="card-body small">
                <p><strong>ID:</strong> #{{ conta.id }}</p>
                <p><strong>Fornecedor:</strong> {{ conta.get_fornecedor_nome() }}</p>
                <p><strong>Descrição:</strong> {{ conta.descricao }}</p>
                <p><strong>Valor título:</strong> R$ {{ '%.2f'|format(conta.valor_titulo or conta.valor or 0) }}</p>
                <p><strong>Status:</strong>
                    {% if conta.pago %}
                        <span class="badge bg-success">Pago</span>
                    {% else %}
                        <span class="badge bg-warning text-dark">Pendente</span>
                    {% endif %}
                </p>
                {% if conta.data_pagamento %}
                <p><strong>Pagamento:</strong> {{ conta.data_pagamento.strftime('%d/%m/%Y') }}</p>
                {% endif %}
                {% if conta.transacao_id %}
                <p><strong>Transação financeira:</strong> #{{ conta.transacao_id }}</p>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                {% set categoria_atual_sem_dre = not categoria_exige_dre_atual %}
                <form method="POST">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        Esta tela atualiza o título e, quando existir, sincroniza também a transação financeira vinculada.
                    </div>

                    <div class="alert alert-primary d-none" id="alertaSugestoesClassificacao">
                        <i class="bi bi-stars"></i>
                        <span id="textoSugestoesClassificacao"></span>
                    </div>

                    <div class="alert alert-secondary {% if not categoria_atual_sem_dre %}d-none{% endif %}" id="alertaCategoriaSemDre">
                        <i class="bi bi-slash-circle"></i>
                        <span id="textoCategoriaSemDre">{% if categoria_atual_sem_dre %}A categoria <strong>{{ conta.categoria.nome if conta.categoria else 'selecionada' }}</strong> foi configurada como operacional, sem vínculo DRE no cadastro. Nesta tela, o plano DRE do título fica opcional e pode ser informado apenas se você quiser refletir esse lançamento no DRE.{% endif %}</span>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="categoria_id" class="form-label">Categoria financeira</label>
                            <select class="form-select" id="categoria_id" name="categoria_id">
                                <option value="">Sem categoria</option>
                                {% for categoria in categorias %}
                                    <option value="{{ categoria.id }}" {% if conta.categoria_id == categoria.id %}selected{% endif %}>
                                        {{ categoria.nome }}
                                    </option>
                                {% endfor %}
                            </select>
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" role="switch" id="indicador_categoria_vincular_dre" disabled {% if conta.categoria_id and not categoria_atual_sem_dre %}checked{% endif %}>
                                <label class="form-check-label small text-muted" for="indicador_categoria_vincular_dre" id="label_indicador_categoria_vincular_dre">
                                    {% if not conta.categoria_id %}
                                        Categoria sem seleção
                                    {% elif categoria_atual_sem_dre %}
                                        Categoria operacional sem vínculo DRE
                                    {% else %}
                                        Categoria configurada para sugerir DRE
                                    {% endif %}
                                </label>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="plano_contas_id" class="form-label" id="label_plano_contas_id">Plano de Contas (DRE){% if not categoria_atual_sem_dre %} *{% endif %}</label>
                            <select class="form-select" id="plano_contas_id" name="plano_contas_id" {% if not categoria_atual_sem_dre %}required{% endif %}>
                                <option value="">Selecione...</option>
                                {% for plano in planos_contas %}
                                    <option value="{{ plano.id }}" {% if conta.plano_contas_id == plano.id %}selected{% endif %}>
                                        {{ plano.codigo }} - {{ plano.nome }}
                                    </option>
                                {% endfor %}
                            </select>
                            <button type="button" class="btn btn-link btn-sm px-0 mt-1 d-none" id="btnMostrarTodosPlanos">
                                Mostrar todos os planos
                            </button>
                            <div class="small text-muted" id="ajuda_plano_contas_id">{% if categoria_atual_sem_dre %}Opcional para categorias operacionais sem vínculo DRE.{% else %}Obrigatório para categorias que alimentam o DRE.{% endif %}</div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label for="centro_custo_id" class="form-label">Centro de Custo *</label>
                            <select class="form-select" id="centro_custo_id" name="centro_custo_id" required>
                                <option value="">Selecione...</option>
                                {% for centro in centros_custo %}
                                    <option value="{{ centro.id }}" {% if conta.centro_custo_id == centro.id %}selected{% endif %}>
                                        {% if centro.codigo %}{{ centro.codigo }} - {% endif %}{{ centro.nome }}
                                    </option>
                                {% endfor %}
                            </select>
                            <button type="button" class="btn btn-link btn-sm px-0 mt-1 d-none" id="btnMostrarTodosCentros">
                                Mostrar todos os centros
                            </button>
                        </div>
                    </div>

                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <a href="{{ url_for('contas_pagar') }}" class="btn btn-secondary">Cancelar</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Salvar classificação
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
(function () {
    const categoriasSugestoes = {{ categorias_sugestoes|tojson|safe if categorias_sugestoes else '{}' }};
    const todosPlanos = {{ planos_contas|map(attribute='id')|list|tojson|safe }}.map((id, index) => ({
        id: String(id),
        label: {{ planos_contas|map(attribute='codigo')|list|tojson|safe }}[index] + ' - ' + {{ planos_contas|map(attribute='nome')|list|tojson|safe }}[index]
    }));
    const todosCentros = {{ centros_custo|map(attribute='id')|list|tojson|safe }}.map((id, index) => ({
        id: String(id),
        label: (({{ centros_custo|map(attribute='codigo')|list|tojson|safe }}[index] || '') ? ({{ centros_custo|map(attribute='codigo')|list|tojson|safe }}[index] + ' - ') : '') + {{ centros_custo|map(attribute='nome')|list|tojson|safe }}[index]
    }));

    const categoriaSelect = document.getElementById('categoria_id');
    const planoSelect = document.getElementById('plano_contas_id');
    const centroSelect = document.getElementById('centro_custo_id');
    const alerta = document.getElementById('alertaSugestoesClassificacao');
    const textoAlerta = document.getElementById('textoSugestoesClassificacao');
    const alertaCategoriaSemDre = document.getElementById('alertaCategoriaSemDre');
    const textoCategoriaSemDre = document.getElementById('textoCategoriaSemDre');
    const indicadorCategoriaVincularDre = document.getElementById('indicador_categoria_vincular_dre');
    const labelIndicadorCategoriaVincularDre = document.getElementById('label_indicador_categoria_vincular_dre');
    const labelPlano = document.getElementById('label_plano_contas_id');
    const ajudaPlano = document.getElementById('ajuda_plano_contas_id');
    const btnMostrarTodosPlanos = document.getElementById('btnMostrarTodosPlanos');
    const btnMostrarTodosCentros = document.getElementById('btnMostrarTodosCentros');

    let mostrarTodosPlanos = false;
    let mostrarTodosCentros = false;

    function montarOpcoes(select, opcoes, placeholder, valorSelecionado) {
        const opcoesUnicas = [];
        const vistos = new Set();
        (opcoes || []).forEach((opcao) => {
            if (!opcao || !opcao.id || vistos.has(String(opcao.id))) {
                return;
            }
            vistos.add(String(opcao.id));
            opcoesUnicas.push({ id: String(opcao.id), label: opcao.label || String(opcao.id) });
        });

        const selecionado = valorSelecionado ? String(valorSelecionado) : '';
        if (selecionado && !vistos.has(selecionado)) {
            const atual = (select.dataset.allOptions ? JSON.parse(select.dataset.allOptions) : []).find((item) => String(item.id) === selecionado);
            if (atual) {
                opcoesUnicas.push({ id: String(atual.id), label: `${atual.label} (atual)` });
            }
        }

        select.innerHTML = '';
        const placeholderOption = document.createElement('option');
        placeholderOption.value = '';
        placeholderOption.textContent = placeholder;
        select.appendChild(placeholderOption);

        opcoesUnicas.forEach((opcao) => {
            const option = document.createElement('option');
            option.value = opcao.id;
            option.textContent = opcao.label;
            if (selecionado && selecionado === String(opcao.id)) {
                option.selected = true;
            }
            select.appendChild(option);
        });
    }

    function aplicarSugestoes(forceFill) {
        const categoriaId = categoriaSelect.value ? String(categoriaSelect.value) : '';
        const sugestao = categoriaId ? categoriasSugestoes[categoriaId] : null;
        const valorPlanoAtual = planoSelect.value;
        const valorCentroAtual = centroSelect.value;
        const todosPlanosOriginais = JSON.parse(planoSelect.dataset.allOptions);
        const todosCentrosOriginais = JSON.parse(centroSelect.dataset.allOptions);

        if (!sugestao) {
            montarOpcoes(planoSelect, todosPlanosOriginais, 'Selecione...', valorPlanoAtual);
            montarOpcoes(centroSelect, todosCentrosOriginais, 'Selecione...', valorCentroAtual);
            alerta.classList.add('d-none');
            alertaCategoriaSemDre.classList.add('d-none');
            btnMostrarTodosPlanos.classList.add('d-none');
            btnMostrarTodosCentros.classList.add('d-none');
            indicadorCategoriaVincularDre.checked = false;
            labelIndicadorCategoriaVincularDre.textContent = 'Categoria sem seleção';
            planoSelect.required = true;
            labelPlano.textContent = 'Plano de Contas (DRE) *';
            ajudaPlano.textContent = 'Obrigatório para categorias que alimentam o DRE.';
            return;
        }

        const mensagens = [];
        const vincularDre = sugestao.vincular_dre !== false;

        indicadorCategoriaVincularDre.checked = vincularDre;
        labelIndicadorCategoriaVincularDre.textContent = vincularDre
            ? 'Categoria configurada para sugerir DRE'
            : 'Categoria operacional sem vínculo DRE';

        if (sugestao.plano_contas_id) {
            const planoSugestao = todosPlanosOriginais.find((item) => String(item.id) === String(sugestao.plano_contas_id));
            const opcoesPlanos = mostrarTodosPlanos ? todosPlanosOriginais : [planoSugestao].filter(Boolean);
            const planoDestino = (forceFill || !valorPlanoAtual) ? String(sugestao.plano_contas_id) : valorPlanoAtual;
            montarOpcoes(planoSelect, opcoesPlanos, 'Selecione...', planoDestino);
            btnMostrarTodosPlanos.classList.toggle('d-none', mostrarTodosPlanos || !planoSugestao);
            mensagens.push(`Plano DRE sugerido: <strong>${sugestao.plano_contas_label}</strong>.`);
        } else {
            montarOpcoes(planoSelect, todosPlanosOriginais, 'Selecione...', valorPlanoAtual);
            btnMostrarTodosPlanos.classList.add('d-none');
        }

        if (sugestao.centro_custo_id) {
            const centroSugestao = todosCentrosOriginais.find((item) => String(item.id) === String(sugestao.centro_custo_id));
            const opcoesCentros = mostrarTodosCentros ? todosCentrosOriginais : [centroSugestao].filter(Boolean);
            const centroDestino = (forceFill || !valorCentroAtual) ? String(sugestao.centro_custo_id) : valorCentroAtual;
            montarOpcoes(centroSelect, opcoesCentros, 'Selecione...', centroDestino);
            btnMostrarTodosCentros.classList.toggle('d-none', mostrarTodosCentros || !centroSugestao);
            const origemCentro = sugestao.origem_centro === 'historico' ? 'aprendido pelo histórico' : 'parametrizado na categoria';
            mensagens.push(`Centro sugerido: <strong>${sugestao.centro_custo_label}</strong> <span class="text-muted">(${origemCentro})</span>.`);
        } else {
            montarOpcoes(centroSelect, todosCentrosOriginais, 'Selecione...', valorCentroAtual);
            btnMostrarTodosCentros.classList.add('d-none');
        }

        if (mensagens.length) {
            textoAlerta.innerHTML = mensagens.join(' ');
            alerta.classList.remove('d-none');
        } else {
            alerta.classList.add('d-none');
        }

        if (!vincularDre) {
            planoSelect.required = false;
            labelPlano.textContent = 'Plano de Contas (DRE)';
            ajudaPlano.textContent = 'Opcional para categorias operacionais sem vínculo DRE.';
            textoCategoriaSemDre.innerHTML = 'A categoria <strong>' + (sugestao.categoria_nome || 'selecionada') + '</strong> foi configurada como operacional, sem vínculo DRE no cadastro. Nesta tela, o plano DRE do título fica opcional e pode ser informado apenas se você quiser refletir esse lançamento no DRE.';
            alertaCategoriaSemDre.classList.remove('d-none');
        } else {
            planoSelect.required = true;
            labelPlano.textContent = 'Plano de Contas (DRE) *';
            ajudaPlano.textContent = 'Obrigatório para categorias que alimentam o DRE.';
            alertaCategoriaSemDre.classList.add('d-none');
        }
    }

    planoSelect.dataset.allOptions = JSON.stringify(todosPlanos);
    centroSelect.dataset.allOptions = JSON.stringify(todosCentros);

    categoriaSelect.addEventListener('change', function () {
        mostrarTodosPlanos = false;
        mostrarTodosCentros = false;
        aplicarSugestoes(true);
    });

    btnMostrarTodosPlanos.addEventListener('click', function () {
        mostrarTodosPlanos = true;
        aplicarSugestoes(false);
    });

    btnMostrarTodosCentros.addEventListener('click', function () {
        mostrarTodosCentros = true;
        aplicarSugestoes(false);
    });

    aplicarSugestoes(false);
})();
</script>
{% endblock %}