{% extends "base.html" %}

{% block title %}Classificação em Lote de Despesas{% endblock %}

{% block content %}
<div class="mb-4 d-flex justify-content-between align-items-center">
    <div>
        <h1><i class="bi bi-diagram-3-fill"></i> Classificação em Lote</h1>
        <p class="text-muted mb-0">Aplique plano de contas e centro de custo de uma vez para várias despesas pendentes.</p>
    </div>
    <a href="{{ next_url or url_for('contas_pagar', pendencia_classificacao='sem_classificacao') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
</div>

<div class="row">
    <div class="col-lg-5 mb-3">
        <div class="card h-100">
            <div class="card-header bg-light d-flex justify-content-between align-items-center">
                <strong>Contas selecionadas</strong>
                <span class="badge bg-primary">{{ contas|length }}</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0 align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Vencimento</th>
                                <th>Fornecedor</th>
                                <th class="text-end">Valor</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for conta in contas %}
                            <tr>
                                <td>#{{ conta.id }}</td>
                                <td>{{ conta.data_vencimento.strftime('%d/%m/%Y') if conta.data_vencimento else '-' }}</td>
                                <td>
                                    <div class="fw-semibold">{{ conta.get_fornecedor_nome() }}</div>
                                    <small class="text-muted">{{ conta.descricao }}</small>
                                </td>
                                <td class="text-end">R$ {{ '%.2f'|format(conta.valor_titulo or conta.valor or 0) }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-body">
                <form method="POST">
                    <input type="hidden" name="ids" value="{{ ids }}">
                    <input type="hidden" name="next" value="{{ next_url }}">

                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        Esta operação atualiza os títulos selecionados e também sincroniza a classificação da transação financeira quando ela já existir.
                    </div>

                    {% if recomendacao_lote %}
                    {% set origem_recomendacao_lote = 'Histórico do favorecido' if recomendacao_lote.origem_dominante == 'historico_favorecido' else ('Histórico da descrição' if recomendacao_lote.origem_dominante == 'historico_descricao' else ('Sugestão automática' if recomendacao_lote.origem_dominante == 'sugestao_automatica' else 'Recomendação consolidada')) %}
                    <div class="alert alert-success border shadow-sm d-flex flex-column flex-md-row justify-content-between align-items-md-start gap-3">
                        <div>
                            <div class="fw-semibold"><i class="bi bi-stars"></i> Sugestão predominante para este lote</div>
                            <div class="small text-muted mt-1">
                                Cobertura {{ recomendacao_lote.cobertura_texto }} ({{ '%.1f'|format(recomendacao_lote.cobertura_percentual or 0) }}%) • Origem dominante: {{ origem_recomendacao_lote }}
                            </div>
                            <div class="d-flex flex-wrap gap-2 mt-2">
                                {% if recomendacao_lote.categoria_nome %}
                                <span class="badge bg-primary-subtle text-primary border">Categoria: {{ recomendacao_lote.categoria_nome }}</span>
                                {% endif %}
                                {% if recomendacao_lote.plano_contas_label %}
                                <span class="badge bg-secondary-subtle text-secondary border">Plano: {{ recomendacao_lote.plano_contas_label }}</span>
                                {% endif %}
                                {% if recomendacao_lote.centro_custo_label %}
                                <span class="badge bg-info-subtle text-info-emphasis border">Centro: {{ recomendacao_lote.centro_custo_label }}</span>
                                {% endif %}
                            </div>
                            {% if recomendacao_lote.motivos %}
                            <div class="small text-muted mt-2">Base usada: {{ recomendacao_lote.motivos|join(' • ') }}</div>
                            {% endif %}
                        </div>
                        <div class="text-md-end">
                            <button type="button" class="btn btn-outline-success btn-sm" id="btnAplicarRecomendacaoLote">
                                <i class="bi bi-magic"></i> Usar sugestão
                            </button>
                        </div>
                    </div>
                    {% endif %}

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

                    <div class="alert alert-secondary d-none" id="alertaCategoriaSemDreLote">
                        <i class="bi bi-slash-circle"></i>
                        <span id="textoCategoriaSemDreLote"></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="">Manter/sem categoria</option>
                                {% for categoria in categorias %}
                                <option value="{{ categoria.id }}" {% if categoria_id_ui == categoria.id|string %}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_lote" disabled>
                                <label class="form-check-label small text-muted" for="indicador_categoria_vincular_dre_lote" id="label_indicador_categoria_vincular_dre_lote">
                                    Categoria sem seleção
                                </label>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="plano_contas_id" class="form-label" id="label_plano_contas_id_lote">Plano de Contas (DRE) *</label>
                            <select class="form-select" id="plano_contas_id" name="plano_contas_id" required>
                                <option value="">Selecione...</option>
                                {% for plano in planos_contas %}
                                <option value="{{ plano.id }}" {% if plano_contas_id_ui == plano.id|string %}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="btnMostrarTodosPlanosLote">
                                Mostrar todos os planos
                            </button>
                            <div class="small text-muted" id="ajuda_plano_contas_id_lote">Obrigatório para categorias que alimentam o DRE.</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 centro_custo_id_ui == centro.id|string %}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="btnMostrarTodosCentrosLote">
                                Mostrar todos os centros
                            </button>
                        </div>
                    </div>

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

{% block scripts %}
{{ super() }}
<script>
(function () {
    const categoriasSugestoes = {{ categorias_sugestoes|tojson|safe if categorias_sugestoes else '{}' }};
    const recomendacaoLote = {{ recomendacao_lote|tojson|safe if recomendacao_lote else 'null' }};
    const todosPlanos = [
        {% for plano in planos_contas %}
        { id: '{{ plano.id }}', label: '{{ (plano.codigo ~ ' - ' ~ plano.nome)|replace("'", "\\'") }}' },
        {% endfor %}
    ];
    const todosCentros = [
        {% for centro in centros_custo %}
        { id: '{{ centro.id }}', label: '{{ ((centro.codigo ~ ' - ') if centro.codigo else '') ~ centro.nome|replace("'", "\\'") }}' },
        {% endfor %}
    ];

    const categoriaSelect = document.getElementById('categoria_id');
    const planoSelect = document.getElementById('plano_contas_id');
    const centroSelect = document.getElementById('centro_custo_id');
    const alerta = document.getElementById('alertaSugestoesClassificacaoLote');
    const textoAlerta = document.getElementById('textoSugestoesClassificacaoLote');
    const alertaCategoriaSemDre = document.getElementById('alertaCategoriaSemDreLote');
    const textoCategoriaSemDre = document.getElementById('textoCategoriaSemDreLote');
    const indicadorCategoriaVincularDre = document.getElementById('indicador_categoria_vincular_dre_lote');
    const labelIndicadorCategoriaVincularDre = document.getElementById('label_indicador_categoria_vincular_dre_lote');
    const labelPlano = document.getElementById('label_plano_contas_id_lote');
    const ajudaPlano = document.getElementById('ajuda_plano_contas_id_lote');
    const btnMostrarTodosPlanos = document.getElementById('btnMostrarTodosPlanosLote');
    const btnMostrarTodosCentros = document.getElementById('btnMostrarTodosCentrosLote');
    const btnAplicarRecomendacaoLote = document.getElementById('btnAplicarRecomendacaoLote');

    let mostrarTodosPlanos = false;
    let mostrarTodosCentros = false;

    function montarOpcoes(select, opcoes, placeholder, valorSelecionado) {
        const selecionado = valorSelecionado ? String(valorSelecionado) : '';
        select.innerHTML = '';

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

        (opcoes || []).forEach((opcao) => {
            if (!opcao || !opcao.id) {
                return;
            }
            const option = document.createElement('option');
            option.value = String(opcao.id);
            option.textContent = opcao.label || String(opcao.id);
            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;

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

        if (sugestao.centro_custo_id) {
            const centroSugestao = todosCentros.find((item) => String(item.id) === String(sugestao.centro_custo_id));
            const opcoesCentros = mostrarTodosCentros ? todosCentros : [centroSugestao].filter(Boolean);
            montarOpcoes(centroSelect, opcoesCentros, 'Selecione...', (forceFill || !valorCentroAtual) ? sugestao.centro_custo_id : valorCentroAtual);
            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, todosCentros, '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> está marcada como operacional, sem vínculo DRE no cadastro. Para esta classificação em lote, o plano DRE fica opcional e só precisa ser informado se você quiser levar esses títulos ao 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');
        }
    }

    function aplicarRecomendacaoLote() {
        if (!recomendacaoLote) {
            return;
        }

        categoriaSelect.value = recomendacaoLote.categoria_id ? String(recomendacaoLote.categoria_id) : '';
        mostrarTodosPlanos = false;
        mostrarTodosCentros = false;
        aplicarSugestoes(true);

        if (recomendacaoLote.plano_contas_id) {
            planoSelect.value = String(recomendacaoLote.plano_contas_id);
        }
        if (recomendacaoLote.centro_custo_id) {
            centroSelect.value = String(recomendacaoLote.centro_custo_id);
        }
    }

    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);
    });

    if (btnAplicarRecomendacaoLote) {
        btnAplicarRecomendacaoLote.addEventListener('click', function () {
            aplicarRecomendacaoLote();
        });
    }

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