@extends('layouts.app')

@section('title', 'Correção de Saldos Iniciais - Admin')

@section('content')
<div class="container-fluid">
    <!-- Header com breadcrumb -->
    <div class="row align-items-center justify-content-between g-3 mb-4">
        <div class="col-auto">
            <h2 class="mb-0">⚙️ Correção de Saldos Iniciais</h2>
            <p class="text-body-tertiary mb-0">Correção e verificação automática de saldos iniciais</p>
        </div>
        <div class="col-auto">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item">Admin</li>
                    <li class="breadcrumb-item active">Correção de Saldos</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Alert de aviso -->
    <div class="alert alert-warning border-0 d-flex align-items-center" role="alert">
        <span class="fas fa-exclamation-triangle text-warning fs-5 me-3"></span>
        <div class="flex-1">
            <h6 class="alert-heading mb-1">⚠️ Área Administrativa Restrita</h6>
            <p class="mb-0">Esta funcionalidade executa comandos de correção de saldos iniciais. Use com cuidado!</p>
        </div>
    </div>

    <!-- Alert de informação sobre timeout -->
    <div class="alert alert-info border-0 d-flex align-items-center mb-4" role="alert">
        <span class="fas fa-info-circle text-info fs-5 me-3"></span>
        <div class="flex-1">
            <h6 class="alert-heading mb-1">💡 Dica sobre Performance</h6>
            <p class="mb-0">
                Se estiver enfrentando problemas de timeout, use os <strong>comandos individuais</strong> 
                que são mais rápidos que o processo completo.
            </p>
        </div>
    </div>

    <!-- Cards de Ações Individuais -->
    <div class="row g-3 mb-4">
        <!-- Card de Correção Individual -->
        <div class="col-lg-4">
            <div class="card h-100 border border-translucent">
                <div class="card-header bg-body-tertiary border-bottom border-translucent">
                    <h6 class="mb-0 text-body-emphasis">
                        <span class="fas fa-tools text-warning me-2"></span>
                        Correção
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-body-secondary mb-3">
                        Executa apenas o comando de correção:
                        <code class="d-block text-warning mt-1">--force</code>
                    </p>
                    
                    <div class="d-grid">
                        <button type="button" class="btn btn-warning" id="btn-corrigir">
                            <span class="fas fa-tools me-2"></span>
                            Corrigir Saldos
                        </button>
                    </div>
                    
                    <div class="mt-3">
                        <small class="text-body-tertiary">
                            <span class="fas fa-clock me-1"></span>
                            Mais rápido (~30-60s)
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card de Verificação Individual -->
        <div class="col-lg-4">
            <div class="card h-100 border border-translucent">
                <div class="card-header bg-body-tertiary border-bottom border-translucent">
                    <h6 class="mb-0 text-body-emphasis">
                        <span class="fas fa-search text-primary me-2"></span>
                        Verificação
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-body-secondary mb-3">
                        Executa apenas o comando de verificação:
                        <code class="d-block text-primary mt-1">verificar-iniciais</code>
                    </p>
                    
                    <div class="d-grid">
                        <button type="button" class="btn btn-primary" id="btn-verificar">
                            <span class="fas fa-search me-2"></span>
                            Verificar Saldos
                        </button>
                    </div>
                    
                    <div class="mt-3">
                        <small class="text-body-tertiary">
                            <span class="fas fa-clock me-1"></span>
                            Mais rápido (~15-30s)
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card de Processo Completo -->
        <div class="col-lg-4">
            <div class="card h-100 border border-translucent">
                <div class="card-header bg-body-tertiary border-bottom border-translucent">
                    <h6 class="mb-0 text-body-emphasis">
                        <span class="fas fa-cogs text-success me-2"></span>
                        Processo Completo
                    </h6>
                </div>
                <div class="card-body">
                    <p class="text-body-secondary mb-3">
                        Executa ambos comandos em sequência:
                        <code class="d-block text-success mt-1">--force + verificação</code>
                    </p>
                    
                    <div class="d-grid">
                        <button type="button" class="btn btn-success" id="btn-processar">
                            <span class="fas fa-cogs me-2"></span>
                            Corrigir + Verificar
                        </button>
                    </div>
                    
                    <div class="mt-3">
                        <small class="text-body-tertiary">
                            <span class="fas fa-clock me-1"></span>
                            Mais demorado (~60-120s)
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Card de Resultados -->
    <div class="card border border-translucent" id="card-resultados" style="display: none;">
        <div class="card-header bg-body-tertiary border-bottom border-translucent">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0 text-body-emphasis">
                    <span class="fas fa-terminal text-info me-2"></span>
                    <span id="titulo-resultado">Resultado da Execução</span>
                </h6>
                <div id="resumo-badges">
                    <!-- Badges de resumo serão inseridos aqui -->
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- Resultado Individual -->
            <div id="resultado-individual" style="display: none;">
                <div class="alert" id="resumo-individual" role="alert">
                    <!-- Resumo individual será inserido aqui -->
                </div>
                
                <div class="mb-2">
                    <strong>Comando:</strong>
                    <code class="d-block bg-body-secondary p-2 rounded" id="comando-executado"></code>
                </div>
                
                <div class="mb-2">
                    <strong>Saída:</strong>
                    <pre class="bg-body-secondary p-3 rounded" style="font-family: 'Courier New', monospace; white-space: pre-wrap; max-height: 400px; overflow-y: auto;" id="output-individual"></pre>
                </div>
                
                <div class="d-flex justify-content-between align-items-center">
                    <span id="status-badge-individual" class="badge"></span>
                    <small class="text-body-tertiary" id="return-code-individual"></small>
                </div>
            </div>
            
            <!-- Resultado Processo Completo -->
            <div id="resultado-processo" style="display: none;">
                <div class="alert" id="resumo-geral" role="alert">
                    <!-- Resumo será inserido aqui -->
                </div>
                
                <!-- Accordion com os resultados de cada etapa -->
                <div class="accordion" id="accordionResultados">
                    <!-- Acordions serão gerados dinamicamente -->
                </div>
            </div>
        </div>
    </div>

    <!-- Loading indicator -->
    <div class="text-center d-none" id="loading-indicator">
        <div class="spinner-border text-success" role="status">
            <span class="visually-hidden">Executando comando...</span>
        </div>
        <p class="mt-2 text-body-secondary">Executando comando de saldos iniciais...</p>
        <small class="text-body-tertiary">Aguarde, o processo está em execução</small>
    </div>
</div>

<!-- Modal de Confirmação para Correção Individual -->
<div class="modal fade" id="confirmCorrecaoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning bg-opacity-10">
                <h5 class="modal-title">
                    <span class="fas fa-tools text-warning me-2"></span>
                    Confirmar Correção
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning border-0">
                    <h6 class="alert-heading">⚠️ Atenção!</h6>
                    <p class="mb-0">
                        Esta operação fará alterações reais no banco de dados.
                    </p>
                </div>
                <p class="mb-0">
                    <strong>Comando a ser executado:</strong><br>
                    <code>php artisan saldos:corrigir-iniciais --force</code>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <span class="fas fa-times me-2"></span>Cancelar
                </button>
                <button type="button" class="btn btn-warning" id="btn-confirm-corrigir">
                    <span class="fas fa-tools me-2"></span>Executar Correção
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação para Verificação Individual -->
<div class="modal fade" id="confirmVerificacaoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary bg-opacity-10">
                <h5 class="modal-title">
                    <span class="fas fa-search text-primary me-2"></span>
                    Confirmar Verificação
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info border-0">
                    <h6 class="alert-heading">ℹ️ Informação</h6>
                    <p class="mb-0">
                        Esta operação apenas verifica os saldos, sem fazer alterações.
                    </p>
                </div>
                <p class="mb-0">
                    <strong>Comando a ser executado:</strong><br>
                    <code>php artisan saldos:verificar-iniciais</code>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <span class="fas fa-times me-2"></span>Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="btn-confirm-verificar">
                    <span class="fas fa-search me-2"></span>Executar Verificação
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmação para Processo Completo -->
<div class="modal fade" id="confirmProcessoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success bg-opacity-10">
                <h5 class="modal-title">
                    <span class="fas fa-cogs text-success me-2"></span>
                    Confirmar Processo Completo
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info border-0">
                    <h6 class="alert-heading">🔄 Processo em 2 Etapas</h6>
                    <p class="mb-0">
                        O sistema executará automaticamente os 2 comandos na ordem correta:
                    </p>
                </div>
                
                <div class="row g-2 mb-3">
                    <div class="col-12">
                        <div class="card border border-warning border-opacity-25">
                            <div class="card-body p-2">
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-warning rounded-pill me-2">1</span>
                                    <div class="flex-1">
                                        <strong>Correção:</strong>
                                        <code class="text-warning">php artisan saldos:corrigir-iniciais --force</code>
                                        <small class="d-block text-body-tertiary">Aplica as correções no banco de dados</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card border border-success border-opacity-25">
                            <div class="card-body p-2">
                                <div class="d-flex align-items-center">
                                    <span class="badge bg-success rounded-pill me-2">2</span>
                                    <div class="flex-1">
                                        <strong>Verificação:</strong>
                                        <code class="text-success">php artisan saldos:verificar-iniciais</code>
                                        <small class="d-block text-body-tertiary">Verifica se as correções foram aplicadas</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-warning border-0">
                    <h6 class="alert-heading">⚠️ Importante:</h6>
                    <ul class="mb-0">
                        <li>A primeira etapa fará alterações reais no banco de dados</li>
                        <li>Se a correção falhar, a verificação não será executada</li>
                        <li>Este processo pode demorar mais que os comandos individuais</li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <span class="fas fa-times me-2"></span>Cancelar
                </button>
                <button type="button" class="btn btn-success" id="btn-confirm-processar">
                    <span class="fas fa-cogs me-2"></span>Executar Processo
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts-custom')
<script>
$(document).ready(function() {
    // Token CSRF
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Botão Corrigir Individual
    $('#btn-corrigir').click(function() {
        $('#confirmCorrecaoModal').modal('show');
    });

    // Botão Verificar Individual
    $('#btn-verificar').click(function() {
        $('#confirmVerificacaoModal').modal('show');
    });

    // Botão Processo Completo
    $('#btn-processar').click(function() {
        $('#confirmProcessoModal').modal('show');
    });

    // Confirmações dos modais
    $('#btn-confirm-corrigir').click(function() {
        $('#confirmCorrecaoModal').modal('hide');
        executarComandoIndividual('corrigir', '{{ route("admin.corrigir-saldos-iniciais") }}');
    });

    $('#btn-confirm-verificar').click(function() {
        $('#confirmVerificacaoModal').modal('hide');
        executarComandoIndividual('verificar', '{{ route("admin.verificar-saldos-iniciais") }}');
    });

    $('#btn-confirm-processar').click(function() {
        $('#confirmProcessoModal').modal('hide');
        executarProcessoCompleto();
    });

    function executarComandoIndividual(tipo, url) {
        // Mostrar loading
        $('#loading-indicator').removeClass('d-none');
        $('#card-resultados').hide();
        
        // Desabilitar botões
        $('#btn-corrigir, #btn-verificar, #btn-processar').prop('disabled', true);

        const config = {
            'corrigir': {
                text: 'Corrigindo',
                success: 'Correção executada com sucesso!',
                error: 'Erro durante a correção',
                timeout: 300000 // 5 minutos
            },
            'verificar': {
                text: 'Verificando',
                success: 'Verificação executada com sucesso!',
                error: 'Erro durante a verificação',
                timeout: 60000 // 1 minuto
            }
        };

        const cfg = config[tipo];

        // Toast de início
        showToast('info', `${cfg.text} saldos iniciais...`);

        $.ajax({
            url: url,
            method: 'POST',
            timeout: cfg.timeout,
            success: function(response) {
                mostrarResultadoIndividual(response, tipo, cfg);
            },
            error: function(xhr, status, error) {
                let errorMessage = 'Erro desconhecido';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (status === 'timeout') {
                    errorMessage = 'Timeout: O comando demorou muito para executar';
                } else {
                    errorMessage = `Erro ${xhr.status}: ${error}`;
                }

                mostrarResultadoIndividual({
                    success: false,
                    message: errorMessage,
                    output: xhr.responseJSON?.output || 'Nenhuma saída disponível',
                    return_code: xhr.status,
                    comando: xhr.responseJSON?.comando || 'Comando não identificado'
                }, tipo, cfg);
            },
            complete: function() {
                // Esconder loading e reabilitar botões
                $('#loading-indicator').addClass('d-none');
                $('#btn-corrigir, #btn-verificar, #btn-processar').prop('disabled', false);
            }
        });
    }

    function executarProcessoCompleto() {
        // Mostrar loading
        $('#loading-indicator').removeClass('d-none');
        $('#card-resultados').hide();
        
        // Desabilitar botões
        $('#btn-corrigir, #btn-verificar, #btn-processar').prop('disabled', true);

        // Toast de início
        showToast('info', 'Iniciando processo completo de correção...');

        $.ajax({
            url: '{{ route("admin.processar-saldos-iniciais") }}',
            method: 'POST',
            timeout: 180000, // 3 minutos
            success: function(response) {
                mostrarResultadosCompleto(response);
            },
            error: function(xhr, status, error) {
                let errorMessage = 'Erro desconhecido';
                
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                } else if (status === 'timeout') {
                    errorMessage = 'Timeout: O processo demorou muito para executar';
                } else {
                    errorMessage = `Erro ${xhr.status}: ${error}`;
                }

                mostrarResultadosCompleto({
                    success: false,
                    message: errorMessage,
                    resultados: [],
                    resumo: {
                        total_etapas: 2,
                        etapas_sucesso: 0,
                        etapas_erro: 1,
                        etapas_executadas: 0
                    }
                });
            },
            complete: function() {
                // Esconder loading e reabilitar botões
                $('#loading-indicator').addClass('d-none');
                $('#btn-corrigir, #btn-verificar, #btn-processar').prop('disabled', false);
            }
        });
    }

    function mostrarResultadoIndividual(response, tipo, config) {
        // Configurar título
        $('#titulo-resultado').text(`Resultado da ${tipo === 'corrigir' ? 'Correção' : 'Verificação'}`);
        
        // Mostrar card de resultados
        $('#card-resultados').show();
        $('#resultado-individual').show();
        $('#resultado-processo').hide();
        
        // Configurar resumo
        const alertClass = response.success ? 'alert-success' : 'alert-danger';
        const icon = response.success ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
        
        $('#resumo-individual').removeClass().addClass(`alert ${alertClass} border-0`)
            .html(`
                <div class="d-flex align-items-center">
                    <span class="${icon} fs-4 me-3"></span>
                    <div class="flex-1">
                        <h6 class="alert-heading mb-1">${response.success ? '✅ Sucesso!' : '❌ Erro'}</h6>
                        <p class="mb-0">${response.message}</p>
                    </div>
                </div>
            `);
        
        // Inserir detalhes
        $('#comando-executado').text(response.comando || 'Comando não disponível');
        $('#output-individual').text(response.output || 'Nenhuma saída disponível');
        
        // Configurar badge de status
        const badge = $('#status-badge-individual');
        if (response.success) {
            badge.removeClass().addClass('badge bg-success')
                .html('<span class="fas fa-check me-1"></span>Sucesso');
        } else {
            badge.removeClass().addClass('badge bg-danger')
                .html('<span class="fas fa-times me-1"></span>Erro');
        }
        
        $('#return-code-individual').text(`Código de retorno: ${response.return_code || 'N/A'}`);
        
        // Toast de conclusão
        if (response.success) {
            showToast('success', config.success);
        } else {
            showToast('error', `${config.error}: ${response.message}`);
        }
        
        // Scroll para o resultado
        $('html, body').animate({
            scrollTop: $('#card-resultados').offset().top - 100
        }, 500);
    }

    function mostrarResultadosCompleto(response) {
        // Configurar título
        $('#titulo-resultado').text('Resultados do Processo Completo');
        
        // Mostrar card de resultados
        $('#card-resultados').show();
        $('#resultado-individual').hide();
        $('#resultado-processo').show();
        
        // Configurar resumo geral
        const resumo = response.resumo || {};
        const alertClass = response.success ? 'alert-success' : 'alert-danger';
        const icon = response.success ? 'fas fa-check-circle' : 'fas fa-exclamation-circle';
        
        $('#resumo-geral').removeClass().addClass(`alert ${alertClass} border-0`)
            .html(`
                <div class="d-flex align-items-center">
                    <span class="${icon} fs-4 me-3"></span>
                    <div class="flex-1">
                        <h6 class="alert-heading mb-1">${response.success ? '✅ Processo Concluído com Sucesso!' : '❌ Processo Concluído com Erros'}</h6>
                        <p class="mb-0">${response.message}</p>
                    </div>
                </div>
            `);
        
        // Configurar badges de resumo
        $('#resumo-badges').html(`
            <div class="d-flex gap-2">
                <span class="badge bg-primary">Total: ${resumo.total_etapas || 0}</span>
                <span class="badge bg-success">Sucesso: ${resumo.etapas_sucesso || 0}</span>
                <span class="badge bg-danger">Erro: ${resumo.etapas_erro || 0}</span>
                <span class="badge bg-info">Executadas: ${resumo.etapas_executadas || 0}</span>
            </div>
        `);
        
        // Gerar accordion com os resultados
        const accordionHtml = gerarAccordionResultados(response.resultados || []);
        $('#accordionResultados').html(accordionHtml);
        
        // Toast de conclusão
        if (response.success) {
            showToast('success', 'Processo completo executado com sucesso!');
        } else {
            showToast('error', 'Processo concluído com erros. Verifique os detalhes.');
        }
        
        // Scroll para o resultado
        $('html, body').animate({
            scrollTop: $('#card-resultados').offset().top - 100
        }, 500);
    }

    function gerarAccordionResultados(resultados) {
        if (!resultados || resultados.length === 0) {
            return '<p class="text-center text-body-tertiary">Nenhum resultado disponível</p>';
        }

        let html = '';
        
        resultados.forEach((resultado, index) => {
            const badgeClass = resultado.success ? 'bg-success' : 'bg-danger';
            const badgeIcon = resultado.success ? 'fas fa-check' : 'fas fa-times';
            const cardClass = resultado.success ? 'border-success border-opacity-25' : 'border-danger border-opacity-25';
            const isSkipped = resultado.return_code === -1;
            const skipBadge = isSkipped ? '<span class="badge bg-secondary ms-2">Pulada</span>' : '';
            
            html += `
                <div class="accordion-item border ${cardClass}">
                    <h2 class="accordion-header" id="heading${index}">
                        <button class="accordion-button ${index === 0 ? '' : 'collapsed'}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse${index}" aria-expanded="${index === 0 ? 'true' : 'false'}" aria-controls="collapse${index}">
                            <div class="d-flex align-items-center w-100">
                                <span class="badge ${badgeClass} me-3">
                                    <span class="${badgeIcon}"></span>
                                </span>
                                <div class="flex-1">
                                    <strong>${resultado.etapa}</strong>
                                    ${skipBadge}
                                    <small class="d-block text-body-tertiary">${resultado.descricao}</small>
                                </div>
                                <code class="text-body-secondary ms-2">${resultado.return_code}</code>
                            </div>
                        </button>
                    </h2>
                    <div id="collapse${index}" class="accordion-collapse collapse ${index === 0 ? 'show' : ''}" aria-labelledby="heading${index}" data-bs-parent="#accordionResultados">
                        <div class="accordion-body">
                            <div class="mb-2">
                                <strong>Comando:</strong>
                                <code class="d-block bg-body-secondary p-2 rounded">${resultado.comando}</code>
                            </div>
                            <div class="mb-2">
                                <strong>Saída:</strong>
                                <pre class="bg-body-secondary p-3 rounded" style="font-family: 'Courier New', monospace; white-space: pre-wrap; max-height: 300px; overflow-y: auto;">${resultado.output}</pre>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge ${badgeClass}">
                                    ${resultado.success ? 'Sucesso' : 'Erro'}
                                </span>
                                <small class="text-body-tertiary">Código de retorno: ${resultado.return_code}</small>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
        return html;
    }

    function showToast(type, message) {
        const toastTypes = {
            'success': 'alert-success',
            'error': 'alert-danger', 
            'warning': 'alert-warning',
            'info': 'alert-info'
        };

        const icons = {
            'success': 'fas fa-check-circle',
            'error': 'fas fa-exclamation-circle',
            'warning': 'fas fa-exclamation-triangle',
            'info': 'fas fa-info-circle'
        };

        const alertClass = toastTypes[type] || 'alert-info';
        const iconClass = icons[type] || 'fas fa-info-circle';

        const toast = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <span class="${iconClass} me-2"></span>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;

        $('#alert-container').prepend(toast);

        // Auto remove após 5 segundos
        setTimeout(function() {
            $('#alert-container .alert:last').fadeOut(function() {
                $(this).remove();
            });
        }, 5000);
    }
});
</script>
@endpush