import { DataService } from './api.js';

document.addEventListener('DOMContentLoaded', () => {
    // --- 1. SELEÇÃO DE ELEMENTOS DA PÁGINA ---
    const pendingList = document.getElementById('pending-list');
    const calculatorView = document.getElementById('calculator-view');
    const welcomeView = document.getElementById('welcome-view');
    const clientNameEl = document.getElementById('calc-client-name');
    const serviceDetailsEl = document.getElementById('calc-service-details');
    const calculatorEl = document.getElementById('charge-calculator');
    const totalServicoEl = document.getElementById('calc-total-servico');
    const totalMesEl = document.getElementById('calc-total-mes');
    const finalizeBtn = document.getElementById('btn-finalize');

    // --- 2. VARIÁVEIS DE ESTADO ---
    let currentActivity = null;
    let pendingActivities = [];

    // --- 3. FUNÇÕES PRINCIPAIS ---

    /**
     * Calcula o valor total do serviço e o valor da cobrança deste mês.
     */
    // SUBSTITUA A FUNÇÃO calculateTotal() ANTIGA POR ESTAS DUAS NOVAS FUNÇÕES

/**
 * Renderiza a projeção de faturas na tela.
 * @param {number[]} futureInstallments - Um array com o valor total de cada fatura futura.
 * @param {number} monthlyFee - O valor da mensalidade fixa.
 */
function renderProjection(futureInstallments, monthlyFee) {
    const projectionContainer = document.getElementById('billing-projection');
    const projectionWrapper = document.getElementById('billing-projection-container');

    if (futureInstallments.length === 0) {
        projectionWrapper.classList.add('hidden');
        return;
    }

    projectionWrapper.classList.remove('hidden');
    
    let html = '<ul class="divide-y divide-slate-200">';
    futureInstallments.forEach((total, index) => {
        html += `<li class="py-2 flex justify-between items-center">
                    <span class="font-semibold text-slate-700">${index + 1}ª Parcela:</span>
                    <span class="font-bold text-slate-900">R$ ${total.toFixed(2).replace('.', ',')}</span>
                 </li>`;
    });
    
    // Adiciona a visualização da mensalidade recorrente
    if (monthlyFee > 0) {
        html += `<li class="py-2 flex justify-between items-center text-indigo-700 bg-indigo-50 px-2 rounded-md mt-2">
                    <span class="font-semibold">${futureInstallments.length + 1}ª Parcela em diante:</span>
                    <span class="font-bold">R$ ${monthlyFee.toFixed(2).replace('.', ',')}</span>
                 </li>`;
    }
    html += '</ul>';

    projectionContainer.innerHTML = html;
}

/**
 * Função principal que lê os inputs, calcula tudo e chama a renderização.
 */
function calculateTotalAndProjection() {
    let totalServico = 0; // Valor total de todos os serviços/produtos
    const charges = []; // Array para guardar os itens parceláveis
    
    const monthlyFeeInput = document.getElementById('calc-mensalidade-valor');
    const monthlyFee = parseFloat(monthlyFeeInput.value) || 0;
    
    totalServico += monthlyFee;

    // Coleta os dados de todos os outros campos que podem ser parcelados
    calculatorEl.querySelectorAll('input[type="number"]').forEach(inputValor => {
        if (inputValor.id === 'calc-mensalidade-valor') return; // Pula a mensalidade

        const valor = parseFloat(inputValor.value) || 0;
        if (valor > 0) {
            totalServico += valor;
            const chargeItemName = inputValor.dataset.chargeItem;
            const selectParcelas = document.getElementById(`calc-${chargeItemName}-parcelas`);
            const numParcelas = parseInt(selectParcelas.value) || 1;
            charges.push({ valor: valor, parcelas: numParcelas });
        }
    });

    // Calcula a projeção
    const maxInstallments = charges.length > 0 ? Math.max(...charges.map(c => c.parcelas)) : 0;
    const futureInstallments = [];

    for (let i = 1; i <= maxInstallments; i++) {
        let monthTotal = monthlyFee; // Começa com a mensalidade
        charges.forEach(charge => {
            if (i <= charge.parcelas) {
                monthTotal += (charge.valor / charge.parcelas);
            }
        });
        futureInstallments.push(monthTotal);
    }
    
    // Atualiza os totais principais na tela
    totalServicoEl.textContent = `R$ ${totalServico.toFixed(2).replace('.', ',')}`;
    totalMesEl.textContent = `R$ ${(futureInstallments[0] || monthlyFee).toFixed(2).replace('.', ',')}`;

    // Renderiza a projeção detalhada
    renderProjection(futureInstallments, monthlyFee);
}

    // --- NOVO BLOCO PARA CONTROLE DE ABAS E HISTÓRICO ---

    const tabs = document.querySelectorAll('.financial-tab');
    const tabContents = {
        pendentes: document.getElementById('content-pendentes'),
        historico: document.getElementById('content-historico')
    };
    const historyList = document.getElementById('history-list');

    // Função para trocar de aba
    function switchFinancialTab(activeTabId) {
        tabs.forEach(tab => {
            const isTabActive = tab.id === `tab-${activeTabId}`;
            tab.className = `financial-tab whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm ${isTabActive ? 'text-indigo-600 border-indigo-500' : 'text-gray-500 border-transparent hover:text-gray-700'}`;
        });

        Object.keys(tabContents).forEach(key => {
            tabContents[key].classList.toggle('hidden', key !== activeTabId);
        });

        if (activeTabId === 'historico') {
            loadBillingHistory();
        }
    }
    
    // Função para carregar e mostrar o histórico
    async function loadBillingHistory() {
        historyList.innerHTML = '<p class="p-4 text-center text-slate-500">Carregando histórico...</p>';
        try {
            const result = await DataService.getBilledActivities();
            if(result.data.length === 0) {
                historyList.innerHTML = '<p class="p-4 text-center text-slate-500">Nenhuma fatura no histórico.</p>';
                return;
            }

            historyList.innerHTML = result.data.map(item => {
                const details = JSON.parse(item.detalhes_faturamento);
                // Formata os itens da fatura para exibição
                const itemsHtml = details.itens.map(d => `<li>${d.descricao}: R$ ${d.valorTotal.toFixed(2)} (${d.parcelas})</li>`).join('');

                return `
                    <details class="bg-slate-50 border rounded-md mb-2">
                        <summary class="p-3 cursor-pointer font-semibold flex justify-between">
                            <span>${item.clientName}</span>
                            <span class="text-sm text-slate-500">${new Date(item.date).toLocaleDateString()}</span>
                        </summary>
                        <div class="p-4 border-t bg-white text-sm space-y-2">
                            <p><strong>Total do Serviço:</strong> R$ ${details.totalServico.toFixed(2)}</p>
                            <p><strong>Cobrança do Mês:</strong> R$ ${details.totalEsteMes.toFixed(2)}</p>
                            <p class="font-semibold mt-2">Itens Faturados:</p>
                            <ul class="list-disc list-inside pl-2">${itemsHtml}</ul>
                        </div>
                    </details>
                `;
            }).join('');

        } catch (error) {
            historyList.innerHTML = `<p class="p-4 text-center text-red-500">${error.message}</p>`;
        }
    }

    // Adiciona o evento de clique nas abas
    tabs.forEach(tab => {
        tab.addEventListener('click', () => switchFinancialTab(tab.id.replace('tab-', '')));
    });

    // Inicia na aba de pendentes
    switchFinancialTab('pendentes');

    /**
     * Carrega as fichas financeiras pendentes da API e as exibe na lista.
     */
    async function loadPendingActivities() {
        try {
            const result = await DataService.getPendingFinancial(); 
            pendingActivities = result.data;

            if (pendingActivities.length === 0) {
                pendingList.innerHTML = '<p class="p-4 text-center text-slate-500">Nenhuma ficha pendente.</p>';
                return;
            }

            pendingList.innerHTML = pendingActivities.map(act => `
                <div class="notification-item p-4 border-b cursor-pointer hover:bg-slate-50" data-id="${act.id}">
                    <p class="font-bold text-slate-800">${act.clientName}</p>
                    <p class="text-sm text-slate-600">${act.reason}</p>
                    <p class="text-xs text-slate-400 text-right">${new Date(act.date).toLocaleDateString()}</p>
                </div>
            `).join('');

            document.querySelectorAll('.notification-item').forEach(item => {
                item.addEventListener('click', () => displayActivityDetails(item.dataset.id));
            });

        } catch (error) {
            pendingList.innerHTML = `<p class="p-4 text-center text-red-500">${error.message}</p>`;
        }
    }

    // --- 4. LISTENERS DE EVENTOS ---

    // Listener único para toda a calculadora, para recalcular em qualquer mudança.
    calculatorEl.addEventListener('input', (event) => {
    if (event.target.tagName === 'INPUT' || event.target.tagName === 'SELECT') {
        calculateTotalAndProjection();
    }
});

    /**
 * Pega os dados de uma atividade clicada, exibe os detalhes e reseta a calculadora.
 * @param {string} activityId - O ID da atividade que foi clicada.
 */
function displayActivityDetails(activityId) {
    // Encontra a atividade completa na nossa lista de dados
    currentActivity = pendingActivities.find(act => act.id == activityId);
    if (!currentActivity) return;
    
    // Destaca o item selecionado na lista da esquerda
    document.querySelectorAll('.notification-item').forEach(item => item.classList.remove('active'));
    document.querySelector(`.notification-item[data-id="${activityId}"]`).classList.add('active');

    // Preenche a área de detalhes do serviço
    clientNameEl.textContent = currentActivity.clientName;
    let detailsHtml = `<p><strong>Motivo:</strong> ${currentActivity.reason}</p>`;
    if(currentActivity.patrimonio) {
        detailsHtml += `<p><strong>Patrimônios:</strong> ${currentActivity.patrimonio}</p>`;
    }
    if(currentActivity.metragem_cabo) {
        detailsHtml += `<p><strong>Cabo:</strong> ${currentActivity.metragem_cabo}m</p>`;
    }
    serviceDetailsEl.innerHTML = detailsHtml;

    // Mostra a calculadora e esconde a tela de boas-vindas
    calculatorView.classList.remove('hidden');
    welcomeView.classList.add('hidden');
    
    // Limpa a calculadora para a nova entrada de dados
    calculatorEl.querySelectorAll('input[type="number"]').forEach(input => {
        input.value = '';
    });
    calculatorEl.querySelectorAll('select').forEach(select => {
        select.value = '1';
    });
    
    // Chama a função de cálculo para zerar os totais e a projeção
    calculateTotalAndProjection();
}
// Listener para o botão de finalizar
// Versão CORRIGIDA
// Versão CORRIGIDA
finalizeBtn.addEventListener('click', async () => {
    // 1. Validação
    if (!currentActivity) {
        alert('Por favor, selecione uma ficha pendente antes de faturar.');
        return;
    }

    // 2. Coleta de Dados
    const billingData = {
        itens: [],
        totalServico: parseFloat(totalServicoEl.textContent.replace('R$', '').replace(',', '.')) || 0,
        totalEsteMes: parseFloat(totalMesEl.textContent.replace('R$', '').replace(',', '.')) || 0,
        dataFaturamento: new Date().toISOString()
    };

    // --- LÓGICA CORRIGIDA AQUI ---
    calculatorEl.querySelectorAll('input[type="number"]').forEach(inputValor => {
        const valor = parseFloat(inputValor.value) || 0;
        if (valor > 0) {
            const chargeItemName = inputValor.dataset.chargeItem;
            const label = document.querySelector(`label[for="calc-${chargeItemName}-valor"]`)?.textContent || chargeItemName;
            
            let numParcelas;

            // Trata a mensalidade como um caso especial
            if (chargeItemName === 'mensalidade') {
                numParcelas = 1;
            } else {
                // Para todos os outros itens, lê o seletor de parcelas normalmente
                const selectParcelas = document.getElementById(`calc-${chargeItemName}-parcelas`);
                numParcelas = parseInt(selectParcelas.value) || 1;
            }
            
            billingData.itens.push({
                descricao: label,
                valorTotal: valor,
                parcelas: `${numParcelas}x`
            });
        }
    });
    // --- FIM DA LÓGICA CORRIGIDA ---

    // 3. Monta o Payload para a API
    const payload = {
        activityId: currentActivity.id,
        billingDetails: JSON.stringify(billingData)
    };

    // 4. Executa a Ação com confirmação
    const confirmation = confirm(`Você está prestes a faturar a cobrança para ${currentActivity.clientName}. Deseja continuar?`);
    if (confirmation) {
        alert('Processando faturamento... Por favor, aguarde.'); 
        
        try {
            const result = await DataService.finalizeBilling(payload);
            alert(result.message);
            
            document.querySelector(`.notification-item[data-id="${currentActivity.id}"]`).remove();
            calculatorView.classList.add('hidden');
            welcomeView.classList.remove('hidden');

        } catch (error) {
            alert(`Erro ao faturar: ${error.message}`);
        }
    }
});

    // --- 5. CARGA INICIAL ---
    loadPendingActivities();
});