{{-- 
  Componente Universal Excel Importer V2 (Poka-Yoke)
  Modo de uso no blade:
  @include('excel-importer::components.excel-transpiler', [
      'title' => 'Importar Planilha',
      'routePreview' => route('v2.modulo.import.preview'),
      'routeProcess' => route('v2.modulo.import.process'),
      'routeTemplate' => route('v2.modulo.import.template'), // opcional
      'uniqueColumns' => ['titulo'] // Campos de chave única para destacar duplicidades
  ])
--}}

{{-- Carregamento de Estilos CSS Ricos --}}
@include('excel-importer::components.styles')

<!-- MODAL 1: UPLOAD COM DRAG & DROP + MODELO -->
<div class="modal fade" id="modalExcelTranspilerUpload" tabindex="-1" aria-labelledby="modalUploadLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <form id="transpiler-upload-form" enctype="multipart/form-data">
            <div class="modal-content importer-upload-content">
                <div class="modal-header bg-light py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                    <h5 class="modal-title fw-bold text-dark mb-0" id="modalUploadLabel">
                        <i class="bi bi-file-earmark-excel-fill text-success me-2"></i> {{ $title ?? 'Importar Planilha' }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                
                <div class="modal-body p-4">
                    <div class="row g-3">
                        {{-- COLUNA ESQUERDA: Dropzone com Drag & Drop --}}
                        <div class="col-md-7 col-12">
                            <div class="v2-excel-dropzone text-center"
                                 id="excel-drop-zone"
                                 role="button"
                                 tabindex="0"
                                 aria-haspopup="false"
                                 aria-expanded="false"
                                 title="Arraste sua planilha ou clique para selecionar">
                                
                                {{-- Input de arquivo oculto (visually-hidden) --}}
                                <input type="file"
                                       name="import_file"
                                       class="visually-hidden"
                                       id="transpiler_file"
                                       accept=".xlsx,.xls,.csv"
                                       required
                                       aria-hidden="true"
                                       tabindex="-1">

                                {{-- Estado inicial: prompt de upload --}}
                                <div class="excel-dropzone-prompt js-excel-zone-content">
                                    <i class="bi bi-cloud-arrow-up display-5 text-primary d-block mb-3" aria-hidden="true"></i>
                                    <h6 class="fw-bold text-dark mb-2">Arraste sua planilha aqui</h6>
                                    <p class="text-muted small mb-0">
                                        ou <span class="text-primary" style="text-decoration: underline;">clique para selecionar</span>
                                    </p>
                                    <p class="text-muted small mt-2 mb-0">
                                        <i class="bi bi-file-earmark-spreadsheet" aria-hidden="true"></i>
                                        Formatos aceitos: XLSX, XLS, CSV
                                    </p>
                                </div>

                                {{-- Estado selecionado: preview do arquivo --}}
                                <div class="excel-dropzone-selected js-excel-selected-content d-none w-100 text-center">
                                    <div class="preview-container position-relative d-inline-block mb-3">
                                        <i class="bi bi-file-earmark-excel text-success display-4 d-block mb-1" aria-hidden="true"></i>
                                        <span class="badge bg-success position-absolute bottom-0 end-0" style="font-size: 9px; transform: translate(30%, 30%);">XLSX</span>
                                    </div>
                                    <p class="js-excel-file-name small text-dark fw-bold mb-3 text-truncate" style="max-width: 180px; margin-left: auto; margin-right: auto;">
                                        Nenhum arquivo selecionado
                                    </p>
                                    <button type="button" class="btn btn-outline-danger btn-sm rounded-circle d-inline-flex align-items-center justify-content-center js-excel-remove-file"
                                            aria-label="Remover arquivo selecionado"
                                            style="width: 32px; height: 32px; padding: 0;">
                                        <i class="bi bi-trash-fill" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- COLUNA DIREITA: Download do Modelo Oficial --}}
                        <div class="col-md-5 col-12">
                            @if(isset($routeTemplate))
                            <div class="card border border-light shadow-none h-100">
                                <div class="card-header bg-light py-2">
                                    <h6 class="card-title mb-0 fw-bold text-uppercase text-secondary" style="font-size: 11px;">
                                        <i class="bi bi-download text-primary me-1" aria-hidden="true"></i> Modelo Oficial
                                    </h6>
                                </div>
                                <div class="card-body text-center p-3 d-flex flex-column justify-content-center">
                                    <i class="bi bi-file-earmark-text text-muted display-6 d-block mb-2" aria-hidden="true"></i>
                                    <p class="small text-secondary mb-3">
                                        Baixe o modelo oficial preenchido para garantir a compatibilidade dos dados.
                                    </p>
                                    <a href="{{ $routeTemplate }}" class="btn btn-primary w-100 fw-bold py-2" style="font-size: 12px; letter-spacing: 0.5px;">
                                        <i class="bi bi-download me-1" aria-hidden="true"></i> Baixar Modelo
                                    </a>
                                </div>
                            </div>
                            @else
                            <div class="bg-light border rounded p-4 text-center h-100 d-flex flex-column align-items-center justify-content-center">
                                <i class="bi bi-info-circle text-muted display-6 mb-2" aria-hidden="true"></i>
                                <p class="small text-secondary mb-0">
                                    Selecione um arquivo XLSX, XLS ou CSV para iniciar a importação.
                                </p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="modal-footer bg-light border-top py-3">
                    {{ csrf_field() }}
                    <button type="button" class="btn btn-outline-secondary fw-bold btn-upload-cancel" data-bs-dismiss="modal">
                        <i class="bi bi-x-lg me-1" aria-hidden="true"></i> Cancelar
                    </button>
                    <button type="button" class="btn btn-primary fw-bold btn-upload-submit d-inline-flex align-items-center gap-1" id="btn-transpiler-preview">
                        <i class="bi bi-check-lg" aria-hidden="true"></i> Enviar para Validação
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- MODAL 2: MESA DE ANÁLISE INTERATIVA (Poka-Yoke) -->
<div class="modal fade" id="modalImportExcelPokaYoke" tabindex="-1" aria-labelledby="importExcelModalTitle" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-import-excel">
        <div class="modal-content import-excel-content">
            
            {{-- Cabeçalho do Modal --}}
            <div class="modal-header bg-primary text-white py-3">
                <h5 class="modal-title fw-bold" id="importExcelModalTitle">
                    <i class="bi bi-table me-2" aria-hidden="true"></i> 
                    Validação de Importação: <span id="importExcelModuleTitle">{{ $title ?? 'Planilha' }}</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            
            <div class="modal-body p-0 import-excel-body-container" id="importExcelModalDescription">
                
                {{-- Painel de Orientações --}}
                <div class="import-excel-guidelines p-3 bg-light border-bottom">
                    <div class="row g-2 align-items-center">
                        <div class="col-md-6 col-12">
                            <span class="fw-bold text-dark d-flex align-items-center gap-1" style="font-size: 13px;">
                                <i class="bi bi-info-circle-fill text-primary" aria-hidden="true"></i>
                                Orientações para Validação:
                            </span>
                            <div class="mt-2 flex-wrap d-flex gap-1">
                                <span class="badge text-dark border" style="background-color: #fffde7;">Campos Obrigatórios</span>
                                <span class="badge text-dark border" style="background-color: #fff9c4;">Registros Duplicados</span>
                                <span class="badge bg-danger text-white">Erros que bloqueiam</span>
                            </div>
                        </div>
                        <div class="col-md-6 col-12 text-md-end">
                            <small class="text-secondary d-block mt-2 mt-md-0">
                                <i class="bi bi-unlock-fill text-success me-1" aria-hidden="true"></i>
                                Clique no cadeado para liberar edição manual da linha.
                            </small>
                        </div>
                    </div>
                </div>

                {{-- Tabela de Preview (Scrollable) --}}
                <div class="import-excel-scroll-container">
                    <table class="table table-bordered import-excel-table mb-0" id="tableImportExcelPreview" role="grid" aria-label="Dados para conferência da planilha">
                        <thead id="importExcelHeader">
                            {{-- Gerado dinamicamente via JS --}}
                        </thead>
                        <tbody id="importExcelBody">
                            {{-- Gerado dinamicamente via JS --}}
                        </tbody>
                    </table>
                </div>
                
                {{-- Toolbar de Navegação Rápida --}}
                <nav class="import-excel-toolbar p-2 border-top bg-light" aria-label="Navegação de erros e duplicatas">
                    <div class="d-flex flex-wrap gap-2 ps-lg-5">
                        <button type="button" id="btnNextError" class="btn btn-danger btn-sm fw-bold" style="display:none;">
                            <i class="bi bi-arrow-down-circle me-1" aria-hidden="true"></i> Ir para próximo erro
                        </button>
                        <button type="button" id="btnNextDuplicate" class="btn btn-warning btn-sm fw-bold text-dark" style="display:none;">
                            <i class="bi bi-files me-1" aria-hidden="true"></i> Ir para próxima duplicata
                        </button>
                        <button type="button" id="btnNextUnlock" class="btn btn-info text-white btn-sm fw-bold" style="display:none;">
                            <i class="bi bi-unlock-fill me-1" aria-hidden="true"></i> Ir para próxima edição aberta
                        </button>
                    </div>
                </nav>
            </div>
            
            {{-- Rodapé com Contadores e Ações Principais --}}
            <div class="modal-footer import-excel-footer d-flex flex-column py-3 bg-light border-top">
                {{-- Painel de Status --}}
                <div class="import-excel-stats-panel w-100 text-center pb-3 mb-2 border-bottom">
                    <div class="d-flex justify-content-center flex-wrap gap-2">
                        <span class="badge bg-secondary text-dark border p-2">Total: <span id="totalRowsCount">0</span></span>
                        <span class="badge bg-success border p-2">Válidas: <span id="validRowsCount">0</span></span>
                        <span class="badge bg-danger border p-2">Erros: <span id="invalidRowsCount">0</span></span>
                        <span class="badge bg-warning text-dark border p-2" id="labelDuplicateCount" style="display:none;">
                            Duplicatas: <span id="duplicateRowsCount">0</span>
                        </span>
                    </div>
                </div>

                {{-- Botões de Ação --}}
                <div class="import-excel-actions w-100 d-flex justify-content-center gap-2">
                    <button type="button" class="btn btn-outline-secondary px-4 fw-bold" data-bs-dismiss="modal">
                        <i class="bi bi-x-lg me-1" aria-hidden="true"></i> Cancelar Importação
                    </button>
                    <button type="button" id="btnProcessImportExcel" class="btn btn-success px-4 fw-bold text-white" disabled>
                        <i class="bi bi-cloud-arrow-up me-1" aria-hidden="true"></i> Processar e Importar
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modais de Suporte (Progresso e Confirmação) --}}
@include('excel-importer::components.modals')

{{-- Lógica JavaScript do Universal Importer --}}
@include('excel-importer::components.scripts')

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Instanciação da classe instanciável ES6
    window.lotepImporterInstance = new LotepImporter({
        previewUrl: '{{ $routePreview }}',
        processUrl: '{{ $routeProcess }}',
        csrfToken: '{{ csrf_token() }}',
        uniqueColumns: {!! json_encode($uniqueColumns ?? []) !!}
    });

    $('#btn-transpiler-preview').on('click', function(e) {
        e.preventDefault();
        window.lotepImporterInstance.upload();
    });

    $('#btnProcessImportExcel').on('click', function(e) {
        e.preventDefault();
        window.lotepImporterInstance.process();
    });

    // =========================================================================
    // Drag & Drop para Upload de Planilha (inspirado em media-input.blade.php)
    // =========================================================================
    (function initExcelDropzone() {
        var $dropZone = $('#excel-drop-zone');
        if (!$dropZone.length) return;

        var $input = $('#transpiler_file');
        var $zoneContent = $dropZone.find('.js-excel-zone-content');
        var $selectedContent = $dropZone.find('.js-excel-selected-content');
        var $fileNameLabel = $dropZone.find('.js-excel-file-name');

        /* Acessibilidade por Teclado */
        $dropZone.on('keydown', function(e) {
            if (e.which === 13 || e.which === 32) {
                e.preventDefault();
                $input.trigger('click');
            }
        });

        /* Drag & Drop Handlers */
        $dropZone.on('dragover dragenter', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css({
                'border-color': '#3c8dbc',
                'background-color': '#f0f7fb',
                'box-shadow': 'inset 0 0 20px rgba(60, 141, 188, 0.1)'
            });
        });

        $dropZone.on('dragleave dragend drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $(this).css({
                'border-color': '#d1d9e6',
                'background-color': '#f8fafc',
                'box-shadow': 'none'
            });
        });

        $dropZone.on('drop', function(e) {
            var files = e.originalEvent.dataTransfer.files;
            if (files.length) {
                $input[0].files = files;
                $input.trigger('change');
            }
        });

        /* Clique na zona para abrir seletor */
        $dropZone.on('click', function(e) {
            if (!$(e.target).closest('.js-excel-remove-file').length) {
                $input.trigger('click');
            }
        });

        $input.on('click', function(e) {
            e.stopPropagation();
        });

        /* Change Event - Arquivo Selecionado */
        $input.on('change', function(e) {
            var file = e.target.files[0];
            if (file) {
                $fileNameLabel.text(file.name);
                $zoneContent.addClass('d-none');
                $selectedContent.removeClass('d-none');
                $dropZone.attr('aria-expanded', 'true');

                // Atualizar badge de formato
                var ext = file.name.split('.').pop().toUpperCase();
                var $badge = $dropZone.find('.preview-excel-icon .badge');
                if ($badge.length) {
                    var badgeClass = 'bg-success';
                    if (ext === 'CSV') badgeClass = 'bg-info';
                    else if (ext === 'XLS') badgeClass = 'bg-warning text-dark';
                    $badge.removeClass('bg-success bg-info bg-warning text-dark').addClass(badgeClass).text(ext);
                }
            }
        });

        /* Reset Event - Remover Arquivo */
        $dropZone.find('.js-excel-remove-file').on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            $input.val('');
            $zoneContent.removeClass('d-none');
            $selectedContent.addClass('d-none');
            $dropZone.attr('aria-expanded', 'false').focus();
        });
    })();
});
</script>
@endpush