@extends('layouts.app', ['activePage' => 'dashboard', 'menuParent' => 'dashboard', 'titlePage' => ''])

@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-2">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="bg-white shadow rounded-lg p-4">
                    <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4 mb-4">
                        <div>
                            <h2 class="text-xl font-semibold text-slate-800">Mi expediente fiscal</h2>
                            <p class="text-sm text-slate-500 mb-0">Directorio tipo explorador de tus documentos fiscales.</p>
                        </div>

                        <div class="flex flex-wrap items-end gap-2">
                            <button type="button" id="dashboardRefreshBtn" class="inline-flex items-center gap-1.5 bg-[#0A415F] hover:bg-[#083549] text-white rounded px-3 py-1 text-sm font-medium mb-0.5">
                                <i class="material-icons text-base leading-none">refresh</i>
                                Actualizar
                            </button>
                        </div>
                    </div>

                    @php
                        $archivosSueltosItems = $archivosSueltosDashboard['items'] ?? collect();
                        $archivosSueltosTotal = (int) ($archivosSueltosDashboard['total'] ?? 0);
                        $declaracionesColumns = collect($declaracionesAnualesDashboard['columns'] ?? collect())
                            ->filter(function (array $column) {
                                return count($column['items'] ?? []) > 0;
                            })
                            ->values();
                        $declaracionesTotal = (int) ($declaracionesAnualesDashboard['total'] ?? 0);
                    @endphp

                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3 mb-3">
                        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
                            <div>
                                <h6 class="text-sm font-semibold text-slate-800 mb-0">Centro de documentos</h6>
                                <p class="text-xs text-slate-500 mb-0">Unifica la vista del directorio y documentos sueltos.</p>
                            </div>

                            <div class="flex flex-wrap items-center gap-2">
                                <span class="inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-700">Directorio visibles: <span id="directoryVisibleCountBadge" class="ml-1">0</span></span>
                                <span class="inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-700">Sueltos: {{ $archivosSueltosTotal }}</span>
                                <span class="inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-semibold text-slate-700">Declaraciones: {{ $declaracionesTotal }}</span>
                            </div>
                        </div>

                        <div class="doc-tab-group mt-3" role="tablist" aria-label="Vista documental">
                            <button type="button" class="doc-tab-btn js-doc-tab active" data-tab="all" role="tab" aria-selected="true">Todos</button>
                            <button type="button" class="doc-tab-btn js-doc-tab" data-tab="directory" role="tab" aria-selected="false">Directorio</button>
                            <button type="button" class="doc-tab-btn js-doc-tab" data-tab="loose" role="tab" aria-selected="false">Sueltos</button>
                            <button type="button" class="doc-tab-btn js-doc-tab" data-tab="declarations" role="tab" aria-selected="false">Declaraciones</button>
                        </div>
                    </div>

                    <div id="directoryExplorerPanel" class="grid grid-cols-1 xl:grid-cols-12 gap-4">
                        <div class="xl:col-span-4 rounded-xl border border-slate-200 bg-white overflow-hidden">
                            <div class="px-3 py-2 border-b border-slate-200 bg-slate-50">
                                <h6 class="text-sm font-semibold text-slate-800 mb-0">Directorio</h6>
                                <p class="text-xs text-slate-500 mb-0">Selecciona ejercicio, periodo y categoria</p>
                            </div>
                            <div id="directoryTree" class="max-h-[64vh] overflow-y-auto p-2 space-y-2"></div>
                        </div>

                        <div class="xl:col-span-8 space-y-3">
                            <div class="rounded-xl border border-slate-200 bg-white p-3">
                                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2">
                                    <div>
                                        <p class="text-xs text-slate-500 mb-1">Ruta actual</p>
                                        <div id="breadcrumbPath" class="flex flex-wrap items-center gap-1 text-xs font-medium text-slate-700"></div>
                                    </div>
                                    <div class="flex flex-wrap items-center gap-2">
                                        <input id="searchInput" type="text" class="border border-slate-300 rounded px-2 py-1 text-sm" placeholder="Buscar documento o archivo...">
                                    </div>
                                </div>
                                <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 mt-3">
                                    <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                                        <p class="mb-0 text-[11px] uppercase tracking-wide text-slate-500">Ejercicios</p>
                                        <p class="mb-0 text-lg font-semibold text-slate-800" id="counterExercises">0</p>
                                    </div>
                                    <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                                        <p class="mb-0 text-[11px] uppercase tracking-wide text-slate-500">Periodos</p>
                                        <p class="mb-0 text-lg font-semibold text-slate-800" id="counterPeriods">0</p>
                                    </div>
                                    <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                                        <p class="mb-0 text-[11px] uppercase tracking-wide text-slate-500">Categorias</p>
                                        <p class="mb-0 text-lg font-semibold text-slate-800" id="counterCategories">0</p>
                                    </div>
                                    <div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
                                        <p class="mb-0 text-[11px] uppercase tracking-wide text-slate-500">Archivos visibles</p>
                                        <p class="mb-0 text-lg font-semibold text-slate-800" id="counterFiles">0</p>
                                    </div>
                                </div>
                            </div>

                            <div class="rounded-xl border border-slate-200 bg-white">
                                <div class="px-3 py-2 border-b border-slate-200 bg-slate-50 flex items-center justify-between">
                                    <h6 class="text-sm font-semibold text-slate-800 mb-0">Contenido de carpeta</h6>
                                    <span id="itemsCount" class="text-xs text-slate-500">0 elementos</span>
                                </div>
                                <div class="directory-list-head px-3 py-2 text-[11px] font-semibold text-slate-500 border-b border-slate-100 hidden lg:grid lg:grid-cols-12 gap-2">
                                    <span class="lg:col-span-4">Nombre</span>
                                    <span class="lg:col-span-3">Categoria</span>
                                    <span class="lg:col-span-3">Fecha</span>
                                    <span class="lg:col-span-2 text-right">Archivo</span>
                                </div>
                                <div id="directoryItems" class="p-2 space-y-1.5"></div>
                            </div>
                        </div>
                    </div>
                    <div class="rounded-xl border border-slate-200 bg-white mt-4" id="clientLooseFilesSection">
                        <div class="px-3 py-2 border-b border-slate-200 bg-slate-50 flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h6 class="text-sm font-semibold text-slate-800 mb-0">Documentos sueltos</h6>
                                <p class="text-xs text-slate-500 mb-0">Seccion separada del directorio principal.</p>
                            </div>
                            <span class="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">Total: {{ $archivosSueltosTotal }}</span>
                        </div>

                        <div class="p-3">
                            @if(count($archivosSueltosItems) > 0)
                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-2.5">
                                @foreach($archivosSueltosItems as $archivoSuelto)
                                @php
                                    $bytes = (int) ($archivoSuelto->tamano_bytes ?? 0);
                                    if ($bytes <= 0) {
                                        $sizeLabel = '-';
                                    } elseif ($bytes < 1024) {
                                        $sizeLabel = $bytes . ' B';
                                    } elseif ($bytes < 1048576) {
                                        $sizeLabel = number_format($bytes / 1024, 2) . ' KB';
                                    } elseif ($bytes < 1073741824) {
                                        $sizeLabel = number_format($bytes / 1048576, 2) . ' MB';
                                    } else {
                                        $sizeLabel = number_format($bytes / 1073741824, 2) . ' GB';
                                    }
                                    $extensionLabel = mb_strtoupper((string) pathinfo((string) $archivoSuelto->nombre_original, PATHINFO_EXTENSION));
                                    if ($extensionLabel === '') {
                                        $extensionLabel = 'FILE';
                                    }
                                @endphp

                                <article class="client-loose-card">
                                    <div class="client-loose-card-head">
                                        <span class="material-icons text-slate-500 text-base leading-none">folder</span>
                                        <span class="client-loose-ext">{{ $extensionLabel }}</span>
                                    </div>
                                    <div class="client-loose-card-body">
                                        <h6 class="text-xs font-semibold text-slate-900 mb-1 truncate" title="{{ $archivoSuelto->nombre }}">{{ $archivoSuelto->nombre }}</h6>
                                        <p class="text-[10px] text-slate-600 mb-1.5 h-7 overflow-hidden">{{ $archivoSuelto->descripcion_corta ?: 'Sin descripcion corta' }}</p>
                                        <p class="text-[10px] text-slate-500 mb-0 truncate"><span class="font-semibold text-slate-700">Tamano:</span> {{ $sizeLabel }}</p>
                                        <p class="text-[10px] text-slate-500 mb-2 truncate"><span class="font-semibold text-slate-700">Fecha:</span> {{ optional($archivoSuelto->created_at)->format('d/m/Y H:i') ?: '-' }}</p>
                                        <div class="flex justify-end">
                                            <a href="{{ route('expediente-fiscal.home.download-loose-file', ['id' => $archivoSuelto->id]) }}" class="directory-download-link" target="_blank" rel="noopener noreferrer">Descargar</a>
                                        </div>
                                    </div>
                                </article>
                                @endforeach
                            </div>
                            @else
                            <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-5 text-center">
                                <span class="material-icons text-slate-400 text-3xl">folder_open</span>
                                <p class="text-sm font-semibold text-slate-700 mt-2 mb-1">Sin documentos sueltos</p>
                                <p class="text-xs text-slate-500 mb-0">No hay documentos sueltos disponibles por ahora.</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    <div class="rounded-xl border border-slate-200 bg-white mt-4" id="clientAnnualDeclarationsSection">
                        <div class="px-3 py-2 border-b border-slate-200 bg-slate-50 flex flex-wrap items-center justify-between gap-2">
                            <div>
                                <h6 class="text-sm font-semibold text-slate-800 mb-0">Declaraciones anuales</h6>
                                <p class="text-xs text-slate-500 mb-0">Documentos organizados por ejercicio anual.</p>
                            </div>
                            <span class="inline-flex items-center rounded-md bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700">Total: {{ $declaracionesTotal }}</span>
                        </div>

                        <div class="p-3">
                            @if($declaracionesColumns->isNotEmpty())
                            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-3">
                                @foreach($declaracionesColumns as $column)
                                <div class="rounded-lg border border-slate-200 bg-slate-50 overflow-hidden">
                                    <div class="px-3 py-2 border-b border-slate-200 bg-white flex items-center justify-between gap-2">
                                        <p class="text-xs font-semibold text-slate-800 mb-0">Ejercicio {{ $column['anio'] ?? '-' }}</p>
                                        <span class="text-[10px] font-semibold text-slate-500">{{ count($column['items'] ?? []) }} docs</span>
                                    </div>
                                    <div class="p-2 space-y-2 max-h-72 overflow-y-auto">
                                        @foreach(($column['items'] ?? collect()) as $declaracion)
                                        @php
                                            $tituloCatalogo = optional($declaracion->archivo)->titulo;
                                            $descripcionCatalogo = optional($declaracion->archivo)->descripcion;
                                        @endphp
                                        <article class="rounded-md border border-slate-200 bg-white p-2.5">
                                            <div class="flex items-start justify-between gap-2">
                                                <h6 class="text-xs font-semibold text-slate-900 mb-1 truncate" title="{{ $tituloCatalogo ?: $declaracion->nombre_original }}">{{ $tituloCatalogo ?: $declaracion->nombre_original }}</h6>
                                                <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[9px] font-semibold text-slate-600">ANUAL</span>
                                            </div>
                                            @if(filled($descripcionCatalogo))
                                            <p class="text-[10px] text-slate-500 mb-1 line-clamp-2" title="{{ $descripcionCatalogo }}">{{ $descripcionCatalogo }}</p>
                                            @endif
                                            <p class="text-[10px] text-slate-500 mb-2 truncate"><span class="font-semibold text-slate-700">Archivo:</span> {{ $declaracion->nombre_original ?: '-' }}</p>
                                            <p class="text-[10px] text-slate-500 mb-2 truncate"><span class="font-semibold text-slate-700">Fecha:</span> {{ optional($declaracion->created_at)->format('d/m/Y H:i') ?: '-' }}</p>
                                            <div class="flex justify-end">
                                                <a href="{{ route('expediente-fiscal.home.download-annual-declaration', ['id' => $declaracion->id]) }}" class="directory-download-link" target="_blank" rel="noopener noreferrer">Descargar</a>
                                            </div>
                                        </article>
                                        @endforeach
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @else
                            <div class="rounded-lg border border-dashed border-slate-300 bg-slate-50 p-5 text-center">
                                <span class="material-icons text-slate-400 text-3xl">description</span>
                                <p class="text-sm font-semibold text-slate-700 mt-2 mb-1">Sin declaraciones anuales</p>
                                <p class="text-xs text-slate-500 mb-0">Aun no se han cargado declaraciones para este expediente.</p>
                            </div>
                            @endif
                        </div>
                    </div>

                    <div class="text-xs text-slate-500 mt-3">Ultima actualizacion: <span id="dashboardLastRefresh">-</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="expf-dashboard-initial-json" type="application/json">
    @json($dashboardData)
</script>

<style>
    .tree-period-btn {
        width: 100%;
        text-align: left;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        border-radius: 0.75rem;
        padding: 0.55rem 0.65rem;
        transition: all 0.2s ease;
    }

    .tree-period-btn:hover {
        border-color: #94a3b8;
        background: #f8fafc;
    }

    .tree-period-btn.active {
        border-color: #0f172a;
        background: #f1f5f9;
        box-shadow: inset 0 0 0 1px #0f172a;
    }

    .tree-exercise-btn {
        width: 100%;
        text-align: left;
        border: 1px solid #c7d2fe;
        background: #eef2ff;
        border-radius: 0.75rem;
        padding: 0.6rem 0.7rem;
        transition: all 0.2s ease;
    }

    .tree-exercise-btn:hover {
        border-color: #a5b4fc;
        background: #e0e7ff;
    }

    .tree-exercise-btn.active {
        border-color: #3730a3;
        box-shadow: inset 0 0 0 1px #3730a3;
    }

    .tree-category-btn {
        width: 100%;
        text-align: left;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        border-radius: 0.6rem;
        padding: 0.45rem 0.55rem;
        font-size: 12px;
    }

    .tree-category-btn:hover {
        border-color: #94a3b8;
        background: #f8fafc;
    }

    .tree-category-btn.active {
        border-color: #0a415f;
        background: #ecfeff;
        color: #0c4a6e;
    }

    .directory-row {
        border: 1px solid #e2e8f0;
        border-radius: 0.65rem;
        padding: 0.55rem 0.65rem;
        transition: all 0.2s ease;
    }

    .directory-row:hover {
        border-color: #94a3b8;
        background: #f8fafc;
    }

    .directory-row.active {
        border-color: #0a415f;
        background: #eff6ff;
        box-shadow: inset 0 0 0 1px #0a415f;
    }

    .directory-download-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        border: 1px solid #bfdbfe;
        background: #dbeafe;
        color: #1d4ed8;
        padding: 0.2rem 0.65rem;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
    }

    .directory-download-link:hover {
        text-decoration: none;
        filter: brightness(0.96);
    }

    .doc-tab-group {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        border: 1px solid #cbd5e1;
        border-radius: 9999px;
        padding: 0.2rem;
        background: #ffffff;
    }

    .doc-tab-btn {
        border: 0;
        border-radius: 9999px;
        padding: 0.3rem 0.7rem;
        font-size: 12px;
        font-weight: 700;
        color: #475569;
        background: transparent;
        transition: all 0.18s ease;
    }

    .doc-tab-btn:hover {
        background: #f1f5f9;
        color: #0f172a;
    }

    .doc-tab-btn.active {
        color: #0c4a6e;
        background: #e0f2fe;
        box-shadow: inset 0 0 0 1px #7dd3fc;
    }

    .client-loose-card {
        border: 1px solid #e2e8f0;
        border-radius: 0.7rem;
        background: #ffffff;
        box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .client-loose-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 7px 16px rgba(15, 23, 42, 0.1);
    }

    .client-loose-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.35rem;
        padding: 0.4rem 0.55rem;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
    }

    .client-loose-ext {
        font-size: 9px;
        font-weight: 700;
        color: #334155;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 9999px;
        padding: 0.05rem 0.4rem;
    }

    .client-loose-card-body {
        padding: 0.55rem;
    }

    .skeleton-block {
        position: relative;
        overflow: hidden;
        background: #e2e8f0;
        border-radius: 0.45rem;
    }

    .skeleton-block::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
        animation: skeleton-shimmer 1.2s infinite;
    }

    @keyframes skeleton-shimmer {
        100% {
            transform: translateX(100%);
        }
    }
</style>
@endsection

@push('js')
<script>
    const routeConfig = {
        getData: "{{ $getDataRoute ?? route('expediente-fiscal.home.getData') }}",
        downloadDocumentTemplate: "{{ $downloadDocumentRouteTemplate ?? '' }}"
    };

    const explorerState = {
        data: null,
        exercises: [],
        selectedExerciseId: null,
        selectedPeriodId: null,
        selectedCategory: 'all',
        search: '',
        isLoading: false
    };

    const skeletonConfig = {
        minimumVisibleMs: 420,
        initialVisibleMs: 280
    };

    const docsUiState = {
        activeTab: 'all'
    };

    function setLoadingState(isLoading) {
        explorerState.isLoading = !!isLoading;

        $('#dashboardRefreshBtn')
            .prop('disabled', explorerState.isLoading)
            .toggleClass('opacity-70 cursor-not-allowed', explorerState.isLoading);

        $('#searchInput')
            .prop('disabled', explorerState.isLoading)
            .toggleClass('opacity-70 cursor-not-allowed', explorerState.isLoading);
    }

    function applyDocumentTabState() {
        const activeTab = docsUiState.activeTab;
        const showDirectory = activeTab === 'all' || activeTab === 'directory';
        const showLoose = activeTab === 'all' || activeTab === 'loose';
        const showDeclarations = activeTab === 'all' || activeTab === 'declarations';

        $('#directoryExplorerPanel').toggleClass('hidden', !showDirectory);
        $('#clientLooseFilesSection').toggleClass('hidden', !showLoose);
        $('#clientAnnualDeclarationsSection').toggleClass('hidden', !showDeclarations);

        $('.js-doc-tab').removeClass('active').attr('aria-selected', 'false');
        $('.js-doc-tab[data-tab="' + activeTab + '"]').addClass('active').attr('aria-selected', 'true');
    }

    function renderDirectoryTreeSkeleton() {
        const html = [
            '<div class="space-y-2">',
            '<div class="rounded-xl border border-slate-200 p-3 space-y-2">',
            '<div class="skeleton-block h-4 w-40"></div>',
            '<div class="skeleton-block h-3 w-28"></div>',
            '</div>',
            '<div class="rounded-xl border border-slate-200 p-3 space-y-2">',
            '<div class="skeleton-block h-4 w-32"></div>',
            '<div class="skeleton-block h-3 w-24"></div>',
            '</div>',
            '<div class="rounded-xl border border-slate-200 p-3 space-y-2">',
            '<div class="skeleton-block h-4 w-36"></div>',
            '<div class="skeleton-block h-3 w-20"></div>',
            '</div>',
            '</div>'
        ].join('');

        $('#directoryTree').html(html);
    }

    function renderBreadcrumbSkeleton() {
        $('#breadcrumbPath').html('<span class="skeleton-block h-3 w-56 inline-block"></span>');
    }

    function renderCountersSkeleton() {
        $('#counterExercises').html('<span class="skeleton-block h-6 w-8 inline-block"></span>');
        $('#counterPeriods').html('<span class="skeleton-block h-6 w-8 inline-block"></span>');
        $('#counterCategories').html('<span class="skeleton-block h-6 w-8 inline-block"></span>');
        $('#counterFiles').html('<span class="skeleton-block h-6 w-8 inline-block"></span>');
    }

    function renderItemsSkeleton() {
        $('#itemsCount').text('Cargando...');

        const rows = new Array(5).fill(null).map(function() {
            return [
                '<div class="directory-row lg:grid lg:grid-cols-12 lg:items-center gap-2">',
                '<div class="lg:col-span-4 space-y-2">',
                '<div class="skeleton-block h-4 w-44"></div>',
                '<div class="skeleton-block h-3 w-56"></div>',
                '<div class="skeleton-block h-3 w-40"></div>',
                '</div>',
                '<div class="hidden lg:block lg:col-span-3"><div class="skeleton-block h-3 w-32"></div></div>',
                '<div class="hidden lg:block lg:col-span-3"><div class="skeleton-block h-3 w-36"></div></div>',
                '<div class="lg:col-span-2 flex items-center justify-end gap-2">',
                '<div class="skeleton-block h-3 w-8"></div>',
                '<div class="skeleton-block h-6 w-20 rounded-full"></div>',
                '</div>',
                '</div>'
            ].join('');
        }).join('');

        $('#directoryItems').html(rows);
    }

    function renderLoadingSkeleton() {
        renderDirectoryTreeSkeleton();
        renderBreadcrumbSkeleton();
        renderCountersSkeleton();
        renderItemsSkeleton();
    }

    function parseJsonScript(scriptId) {
        const element = document.getElementById(scriptId);
        if (!element) {
            return null;
        }

        try {
            return JSON.parse(element.textContent || '{}');
        } catch (error) {
            return null;
        }
    }

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function resolveRouteTemplate(template, replacement) {
        return String(template || '').replace('__DOC_ID__', String(replacement || ''));
    }

    function formatDateTime(value) {
        if (!value) {
            return '-';
        }

        const date = new Date(value);
        if (Number.isNaN(date.getTime())) {
            return '-';
        }

        return date.toLocaleString('es-MX');
    }

    function buildExplorerData(data) {
        const exerciseMap = {};
        const exercisesSource = (data && Array.isArray(data.ejercicios)) ? data.ejercicios : [];
        const periodsSource = (data && Array.isArray(data.periodos)) ? data.periodos : [];
        const rows = (data && Array.isArray(data.rows)) ? data.rows : [];

        exercisesSource.forEach(function(exercise, index) {
            const exerciseId = String(exercise.id || '');
            if (exerciseId === '') {
                return;
            }

            const year = Number(exercise.anio || 0);
            exerciseMap[exerciseId] = {
                id: Number(exercise.id || 0),
                anio: year,
                label: String(exercise.label || ('Ejercicio ' + String(year || '-'))),
                index: index,
                periodsMap: {}
            };
        });

        const periodLookup = {};

        periodsSource.forEach(function(periodo, index) {
            const periodId = String(periodo.id || '');
            const exerciseId = String(periodo.ejercicio_id || '');

            if (periodId === '' || exerciseId === '') {
                return;
            }

            if (!exerciseMap[exerciseId]) {
                const fallbackYear = Number(periodo.ejercicio_anio || 0);
                exerciseMap[exerciseId] = {
                    id: Number(periodo.ejercicio_id || 0),
                    anio: fallbackYear,
                    label: 'Ejercicio ' + String(fallbackYear || '-'),
                    index: 9999,
                    periodsMap: {}
                };
            }

            exerciseMap[exerciseId].periodsMap[periodId] = {
                id: Number(periodo.id || 0),
                periodo: Number(periodo.periodo || 0),
                label: String(periodo.label || '-'),
                ejercicio_id: Number(periodo.ejercicio_id || 0),
                ejercicio_anio: Number(periodo.ejercicio_anio || exerciseMap[exerciseId].anio || 0),
                index: index,
                categories: {}
            };

            periodLookup[periodId] = {
                ejercicio_id: Number(periodo.ejercicio_id || 0),
                ejercicio_anio: Number(periodo.ejercicio_anio || exerciseMap[exerciseId].anio || 0),
                periodo: Number(periodo.periodo || 0),
                label: String(periodo.label || '-')
            };
        });

        rows.forEach(function(row) {
            const cells = Array.isArray(row.cells) ? row.cells : [];

            cells.forEach(function(cell) {
                if (!cell || !cell.has_document) {
                    return;
                }

                const periodKey = String(cell.periodo_id || '');
                const periodInfo = periodLookup[periodKey] || null;
                const exerciseKey = String(cell.ejercicio_id || (periodInfo ? periodInfo.ejercicio_id : ''));

                if (exerciseKey === '') {
                    return;
                }

                if (!exerciseMap[exerciseKey]) {
                    const fallbackYear = Number(cell.ejercicio_anio || (periodInfo ? periodInfo.ejercicio_anio : 0));
                    exerciseMap[exerciseKey] = {
                        id: Number(cell.ejercicio_id || 0),
                        anio: fallbackYear,
                        label: 'Ejercicio ' + String(fallbackYear || '-'),
                        index: 9999,
                        periodsMap: {}
                    };
                }

                if (!exerciseMap[exerciseKey].periodsMap[periodKey]) {
                    exerciseMap[exerciseKey].periodsMap[periodKey] = {
                        id: Number(cell.periodo_id || 0),
                        periodo: Number(periodInfo ? periodInfo.periodo : 0),
                        label: String(cell.periodo_label || (periodInfo ? periodInfo.label : '-')),
                        ejercicio_id: Number(cell.ejercicio_id || (periodInfo ? periodInfo.ejercicio_id : 0)),
                        ejercicio_anio: Number(cell.ejercicio_anio || (periodInfo ? periodInfo.ejercicio_anio : 0)),
                        index: 9999,
                        categories: {}
                    };
                }

                const periodNode = exerciseMap[exerciseKey].periodsMap[periodKey];
                const categoryName = String(row.archivo_categoria_nombre || 'Sin categoria').trim() || 'Sin categoria';
                if (!periodNode.categories[categoryName]) {
                    periodNode.categories[categoryName] = {
                        name: categoryName,
                        items: [],
                        total: 0
                    };
                }

                const documentId = Number(cell.documento_id || 0);
                const item = {
                    key: String(row.archivo_id || 0) + '-' + String(cell.periodo_id || 0),
                    archivo_id: Number(row.archivo_id || 0),
                    documento_id: documentId,
                    ejercicio_id: Number(periodNode.ejercicio_id || 0),
                    ejercicio_anio: Number(periodNode.ejercicio_anio || 0),
                    ejercicio_label: 'Ejercicio ' + String(periodNode.ejercicio_anio || '-'),
                    titulo: String(row.archivo_titulo || '-'),
                    categoria: categoryName,
                    destacado: Number(row.archivo_destacado || 0) === 1,
                    similitud: Number(cell.similitud || 0),
                    fecha_importacion: String(cell.fecha_importacion || '-'),
                    fecha_importacion_iso: cell.fecha_importacion_iso || null,
                    usuario: String(cell.usuario || '-'),
                    nombre_original: String(cell.nombre_original || '-'),
                    versiones: Number(cell.versiones || 0),
                    periodo_label: String(cell.periodo_label || periodNode.label),
                    dias_sin_carga: row.dias_sin_carga,
                    download_url: documentId > 0 ? resolveRouteTemplate(routeConfig.downloadDocumentTemplate, documentId) : '#'
                };

                periodNode.categories[categoryName].items.push(item);
                periodNode.categories[categoryName].total++;
            });
        });

        return Object.values(exerciseMap)
            .map(function(exerciseNode) {
                const periods = Object.values(exerciseNode.periodsMap)
                    .map(function(periodNode) {
                        const categories = Object.values(periodNode.categories)
                            .sort(function(a, b) {
                                return a.name.localeCompare(b.name, 'es', { sensitivity: 'base' });
                            });

                        const totals = categories.reduce(function(acc, category) {
                            acc.total += category.total;
                            return acc;
                        }, { total: 0 });

                        return {
                            id: periodNode.id,
                            periodo: periodNode.periodo,
                            label: periodNode.label,
                            ejercicio_id: periodNode.ejercicio_id,
                            ejercicio_anio: periodNode.ejercicio_anio,
                            categories: categories,
                            totals: totals,
                            index: periodNode.index
                        };
                    })
                    .sort(function(a, b) {
                        if (a.index !== b.index) {
                            return a.index - b.index;
                        }

                        return a.periodo - b.periodo;
                    });

                const filesCount = periods.reduce(function(acc, period) {
                    return acc + Number(period.totals.total || 0);
                }, 0);

                const categoryNames = new Set(periods.flatMap(function(period) {
                    return period.categories.map(function(category) {
                        return category.name;
                    });
                }));

                return {
                    id: exerciseNode.id,
                    anio: exerciseNode.anio,
                    label: exerciseNode.label,
                    periods: periods,
                    totals: {
                        files: filesCount,
                        categories: categoryNames.size
                    },
                    index: exerciseNode.index
                };
            })
            .sort(function(a, b) {
                if (b.anio !== a.anio) {
                    return b.anio - a.anio;
                }

                return a.index - b.index;
            });
    }

    function getScopedExercises() {
        if (explorerState.selectedExerciseId === null) {
            return explorerState.exercises;
        }

        return explorerState.exercises.filter(function(exercise) {
            return String(exercise.id) === String(explorerState.selectedExerciseId);
        });
    }

    function getSelectedExercise() {
        if (explorerState.selectedExerciseId === null) {
            return null;
        }

        const scoped = getScopedExercises();
        return scoped.length ? scoped[0] : null;
    }

    function getScopedPeriods() {
        let periods = getScopedExercises().flatMap(function(exercise) {
            return exercise.periods;
        });

        if (explorerState.selectedPeriodId !== null) {
            periods = periods.filter(function(period) {
                return String(period.id) === String(explorerState.selectedPeriodId);
            });
        }

        return periods;
    }

    function getSelectedPeriod() {
        if (explorerState.selectedPeriodId === null) {
            return null;
        }

        const periods = getScopedPeriods();
        return periods.length ? periods[0] : null;
    }

    function getVisibleItems() {
        let categories = getScopedPeriods().flatMap(function(period) {
            return period.categories;
        });

        if (explorerState.selectedCategory !== 'all') {
            categories = categories.filter(function(category) {
                return category.name === explorerState.selectedCategory;
            });
        }

        let items = categories.flatMap(function(category) {
            return category.items;
        });

        const search = String(explorerState.search || '').trim().toLowerCase();
        if (search !== '') {
            items = items.filter(function(item) {
                const bucket = [
                    String(item.titulo || ''),
                    String(item.nombre_original || ''),
                    String(item.usuario || ''),
                    String(item.periodo_label || ''),
                    String(item.categoria || '')
                ].join(' ').toLowerCase();

                return bucket.indexOf(search) !== -1;
            });
        }

        return items.sort(function(a, b) {
            return String(a.titulo || '').localeCompare(String(b.titulo || ''), 'es', { sensitivity: 'base' });
        });
    }

    function getScopeStats() {
        const scopedExercises = getScopedExercises();
        const scopedPeriods = getScopedPeriods();

        let scopedCategories = scopedPeriods.flatMap(function(period) {
            return period.categories.map(function(category) {
                return category.name;
            });
        });

        if (explorerState.selectedCategory !== 'all') {
            scopedCategories = scopedCategories.filter(function(categoryName) {
                return categoryName === explorerState.selectedCategory;
            });
        }

        return {
            exercises: scopedExercises.length,
            periods: scopedPeriods.length,
            categories: new Set(scopedCategories).size,
            files: getVisibleItems().length
        };
    }

    function renderScopeCounters() {
        const stats = getScopeStats();
        $('#counterExercises').text(String(stats.exercises));
        $('#counterPeriods').text(String(stats.periods));
        $('#counterCategories').text(String(stats.categories));
        $('#counterFiles').text(String(stats.files));
        $('#directoryVisibleCountBadge').text(String(stats.files));
    }

    function renderSummary(data) {
        const totals = (data && data.totals) ? data.totals : {};
        $('#dashboardLastRefresh').text(formatDateTime(totals.generated_at || null));
    }

    function renderDirectoryTree() {
        if (!explorerState.exercises.length) {
            $('#directoryTree').html('<p class="text-xs text-slate-500 p-2">Sin ejercicios disponibles.</p>');
            return;
        }

        const allPeriods = explorerState.exercises.flatMap(function(exercise) {
            return exercise.periods;
        });

        const allFiles = allPeriods.flatMap(function(period) {
            return period.categories.flatMap(function(category) {
                return category.items;
            });
        }).length;

        const allCategories = new Set(allPeriods.flatMap(function(period) {
            return period.categories.map(function(category) {
                return category.name;
            });
        })).size;

        const exercisesHtml = explorerState.exercises.map(function(exercise) {
            const isActiveExercise = String(explorerState.selectedExerciseId) === String(exercise.id);

            const periodsHtml = isActiveExercise
                ? exercise.periods.map(function(period) {
                    const isActivePeriod = isActiveExercise && String(explorerState.selectedPeriodId) === String(period.id);
                    const categoriesHtml = isActivePeriod
                        ? period.categories.map(function(category) {
                            const isActiveCategory = explorerState.selectedCategory === category.name;

                            return [
                                '<button type="button" class="tree-category-btn js-category-btn ' + (isActiveCategory ? 'active' : '') + '" data-category="' + escapeHtml(category.name) + '">',
                                '<div class="flex items-center justify-between gap-2">',
                                '<span class="truncate">' + escapeHtml(category.name) + '</span>',
                                '<span class="text-[10px] text-slate-500">' + category.total + '</span>',
                                '</div>',
                                '</button>'
                            ].join('');
                        }).join('')
                        : '';

                    return [
                        '<div>',
                        '<button type="button" class="tree-period-btn js-period-btn ' + (isActivePeriod ? 'active' : '') + '" data-exercise-id="' + escapeHtml(String(exercise.id)) + '" data-period-id="' + escapeHtml(String(period.id)) + '">',
                        '<div class="flex items-center justify-between gap-2">',
                        '<div class="min-w-0">',
                        '<p class="mb-0 text-sm font-semibold text-slate-800 truncate"><i class="material-icons text-sm align-middle mr-1">folder</i>' + escapeHtml(period.label) + '</p>',
                        '<p class="mb-0 text-[11px] text-slate-500">Documentos cargados: ' + period.totals.total + '</p>',
                        '</div>',
                        '<span class="text-xs font-semibold text-slate-600">' + period.totals.total + '</span>',
                        '</div>',
                        '</button>',
                        isActivePeriod ? '<div class="pl-3 pt-2 space-y-1.5">' + categoriesHtml + '</div>' : '',
                        '</div>'
                    ].join('');
                }).join('')
                : '';

            return [
                '<div>',
                '<button type="button" class="tree-exercise-btn js-exercise-btn ' + (isActiveExercise && explorerState.selectedPeriodId === null ? 'active' : '') + '" data-exercise-id="' + escapeHtml(String(exercise.id)) + '">',
                '<div class="flex items-center justify-between gap-2">',
                '<div class="min-w-0">',
                '<p class="mb-0 text-sm font-semibold text-indigo-900 truncate"><i class="material-icons text-sm align-middle mr-1">inventory_2</i>' + escapeHtml(exercise.label) + '</p>',
                '<p class="mb-0 text-[11px] text-indigo-700">Periodos: ' + exercise.periods.length + ' | Categorias: ' + exercise.totals.categories + '</p>',
                '</div>',
                '<span class="text-xs font-semibold text-indigo-700">' + exercise.totals.files + '</span>',
                '</div>',
                '</button>',
                isActiveExercise ? '<div class="pl-2 pt-2 space-y-2">' + periodsHtml + '</div>' : '',
                '</div>'
            ].join('');
        }).join('');

        const html = [
            '<div>',
            '<button type="button" class="tree-exercise-btn js-all-exercises-btn ' + (explorerState.selectedExerciseId === null ? 'active' : '') + '">',
            '<div class="flex items-center justify-between gap-2">',
            '<div class="min-w-0">',
            '<p class="mb-0 text-sm font-semibold text-indigo-900 truncate"><i class="material-icons text-sm align-middle mr-1">inventory_2</i>Todos los ejercicios</p>',
            '<p class="mb-0 text-[11px] text-indigo-700">Periodos: ' + allPeriods.length + ' | Categorias: ' + allCategories + '</p>',
            '</div>',
            '<span class="text-xs font-semibold text-indigo-700">' + allFiles + '</span>',
            '</div>',
            '</button>',
            '<div class="pt-2 space-y-2">' + exercisesHtml + '</div>',
            '</div>'
        ].join('');

        $('#directoryTree').html(html);
    }

    function renderBreadcrumb() {
        const selectedExercise = getSelectedExercise();
        const parts = [selectedExercise ? selectedExercise.label : 'Todos los ejercicios'];
        const period = getSelectedPeriod();

        if (period) {
            parts.push(period.label);
        }

        if (explorerState.selectedCategory !== 'all') {
            parts.push(explorerState.selectedCategory);
        } else {
            parts.push('Todas las categorias');
        }

        const html = parts.map(function(part, index) {
            return [
                '<span class="text-slate-500">' + escapeHtml(part) + '</span>',
                index < (parts.length - 1) ? '<i class="material-icons text-[14px] text-slate-400">chevron_right</i>' : ''
            ].join('');
        }).join('');

        $('#breadcrumbPath').html(html);
    }

    function renderItems() {
        const items = getVisibleItems();
        $('#itemsCount').text(items.length + ' archivos');
        renderScopeCounters();

        if (!items.length) {
            $('#directoryItems').html('<div class="rounded-lg border border-slate-200 bg-slate-50 text-slate-500 text-sm px-3 py-6 text-center">No hay archivos cargados para los filtros seleccionados.</div>');
            return;
        }

        const html = items.map(function(item) {
            const scopeLabel = String(item.ejercicio_label || '-') + ' / ' + String(item.periodo_label || '-');

            return [
                '<div class="directory-row lg:grid lg:grid-cols-12 lg:items-center gap-2">',
                '<div class="lg:col-span-4 min-w-0">',
                '<p class="mb-0 text-sm font-semibold text-slate-800 truncate"><i class="material-icons text-sm align-middle mr-1">description</i>' + escapeHtml(item.titulo) + '</p>',
                '<p class="mb-0 text-xs text-slate-500 truncate">' + escapeHtml(item.nombre_original) + '</p>',
                '<p class="mb-0 text-[11px] text-slate-400 truncate">' + escapeHtml(scopeLabel) + '</p>',
                '</div>',
                '<p class="hidden lg:block lg:col-span-3 text-xs text-slate-600 truncate">' + escapeHtml(item.categoria) + '</p>',
                '<p class="hidden lg:block lg:col-span-3 text-xs text-slate-600 truncate">' + escapeHtml(item.fecha_importacion) + '</p>',
                '<div class="lg:col-span-2 flex items-center justify-between lg:justify-end gap-2 mt-1 lg:mt-0">',
                '<span class="text-[11px] text-slate-500">V' + String(item.versiones || 0) + '</span>',
                (item.download_url && item.download_url !== '#')
                    ? '<a href="' + escapeHtml(item.download_url) + '" target="_blank" rel="noopener noreferrer" class="directory-download-link js-download-link">Descargar</a>'
                    : '',
                '</div>',
                '</div>'
            ].join('');
        }).join('');

        $('#directoryItems').html(html);
    }

    function renderExplorer(data) {
        explorerState.data = data || {};
        explorerState.exercises = buildExplorerData(explorerState.data);

        if (explorerState.selectedExerciseId !== null && !getSelectedExercise()) {
            explorerState.selectedExerciseId = null;
        }

        if (explorerState.selectedExerciseId === null) {
            explorerState.selectedPeriodId = null;
        }

        if (explorerState.selectedPeriodId !== null && !getSelectedPeriod()) {
            explorerState.selectedPeriodId = null;
        }

        renderSummary(explorerState.data);
        renderDirectoryTree();
        renderBreadcrumb();
        renderItems();
    }

    function loadDashboardData() {
        const loadingStartedAt = Date.now();

        setLoadingState(true);
        renderLoadingSkeleton();

        const finalizeLoad = function(renderCallback) {
            const elapsed = Date.now() - loadingStartedAt;
            const delay = Math.max(skeletonConfig.minimumVisibleMs - elapsed, 0);

            window.setTimeout(function() {
                renderCallback();
                setLoadingState(false);
            }, delay);
        };

        $.ajax({
            url: routeConfig.getData,
            method: 'POST',
            data: {},
            success: function(response) {
                if (!response || !response.success) {
                    finalizeLoad(function() {
                        renderExplorer(explorerState.data || {});
                    });
                    return;
                }

                finalizeLoad(function() {
                    renderExplorer(response.data || {});
                });
            },
            error: function() {
                finalizeLoad(function() {
                    renderExplorer(explorerState.data || {});
                });
            }
        });
    }

    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        const initial = parseJsonScript('expf-dashboard-initial-json') || {};
        setLoadingState(true);
        renderLoadingSkeleton();
        window.setTimeout(function() {
            renderExplorer(initial);
            setLoadingState(false);
        }, skeletonConfig.initialVisibleMs);

        $('#dashboardRefreshBtn').on('click', function() {
            loadDashboardData();
        });

        $('#searchInput').on('input', function() {
            explorerState.search = String($(this).val() || '');
            renderItems();
        });

        $(document).on('click', '.js-all-exercises-btn', function() {
            explorerState.selectedExerciseId = null;
            explorerState.selectedPeriodId = null;
            explorerState.selectedCategory = 'all';
            renderDirectoryTree();
            renderBreadcrumb();
            renderItems();
        });

        $(document).on('click', '.js-exercise-btn', function() {
            explorerState.selectedExerciseId = Number($(this).attr('data-exercise-id') || 0);
            explorerState.selectedPeriodId = null;
            explorerState.selectedCategory = 'all';
            renderDirectoryTree();
            renderBreadcrumb();
            renderItems();
        });

        $(document).on('click', '.js-period-btn', function() {
            explorerState.selectedExerciseId = Number($(this).attr('data-exercise-id') || 0);
            explorerState.selectedPeriodId = Number($(this).attr('data-period-id') || 0);
            explorerState.selectedCategory = 'all';
            renderDirectoryTree();
            renderBreadcrumb();
            renderItems();
        });

        $(document).on('click', '.js-category-btn', function() {
            explorerState.selectedCategory = String($(this).attr('data-category') || 'all');
            renderDirectoryTree();
            renderBreadcrumb();
            renderItems();
        });

        $(document).on('click', '.js-download-link', function(event) {
            event.stopPropagation();
        });

        $(document).on('click', '.js-doc-tab', function() {
            docsUiState.activeTab = String($(this).attr('data-tab') || 'all');
            applyDocumentTabState();
        });

        applyDocumentTabState();
    });
</script>
@endpush