@extends('tenant.layouts.app')

@php
    // Visual por grupo: icono feather + color de acento + descripción corta.
    $groupVisuals = [
        'Ventas y documentos'         => ['icon' => 'shopping-bag',   'color' => '#16a34a', 'desc' => 'Comprobantes, ventas y documentos emitidos.'],
        'Compras'                     => ['icon' => 'shopping-cart',  'color' => '#0ea5e9', 'desc' => 'Compras registradas y pagos a proveedores.'],
        'Comisiones y rentabilidad'   => ['icon' => 'trending-up',    'color' => '#f59e0b', 'desc' => 'Comisiones, márgenes y rentabilidad.'],
        'Inventario y stock'          => ['icon' => 'package',        'color' => '#6366f1', 'desc' => 'Stock valorizado, kardex y movimientos.'],
        'Inventario y vencimientos'   => ['icon' => 'package',        'color' => '#6366f1', 'desc' => 'Stock, kardex, lotes y vencimientos.'],
        'Lotes, vencimientos y riesgo'=> ['icon' => 'alert-triangle', 'color' => '#e11d48', 'desc' => 'Lotes, vencimientos y productos en riesgo.'],
        'Cobranza y obligaciones'     => ['icon' => 'credit-card',    'color' => '#ef4444', 'desc' => 'Cuentas por cobrar y obligaciones.'],
        'Pedidos y despacho'          => ['icon' => 'truck',          'color' => '#8b5cf6', 'desc' => 'Pedidos, cotizaciones y despachos.'],
        'Despacho'                    => ['icon' => 'truck',          'color' => '#8b5cf6', 'desc' => 'Guías de remisión y despachos.'],
        'Utilidades del sistema'      => ['icon' => 'settings',       'color' => '#64748b', 'desc' => 'Herramientas y exportaciones del sistema.'],
        'Otros giros'                 => ['icon' => 'grid',           'color' => '#06b6d4', 'desc' => 'Reportes para otros giros de negocio.'],
        'Avanzados'                   => ['icon' => 'activity',       'color' => '#7c3aed', 'desc' => 'Analítica avanzada, trazabilidad y auditoría.'],
    ];
    $defaultVisual = ['icon' => 'file-text', 'color' => '#00796b', 'desc' => 'Reportes disponibles.'];

    // Combina catálogo normal + especiales, marcando estos últimos.
    $allGroups = [];
    foreach (($reportGroups ?? []) as $g) {
        $g['special'] = false;
        $allGroups[] = $g;
    }
    foreach (($specialReportGroups ?? []) as $g) {
        $g['special'] = true;
        $allGroups[] = $g;
    }
@endphp

@section('content')
    <div class="page-headers pe-0">
        <ol class="breadcrumbs">
            <li class="breadcrumb-item">
                <a><i data-feather="pie-chart" class="stroke-icon"></i></a>
            </li>
            <li class="breadcrumb-item">
                <a><span class="text-primary">Reportes</span></a>
            </li>
        </ol>
    </div>

    @if(empty($allGroups))
        <div class="alert alert-light border">
            No se encontraron reportes disponibles para esta configuración.
        </div>
    @else
        <div id="report-hub" class="report-hub">
            {{-- ░░ MASTER: categorías ░░ --}}
            <aside class="report-master">
                <div class="report-search-wrap">
                    <i data-feather="search" class="report-search-icon"></i>
                    <input id="report-search" type="search" autocomplete="off"
                           class="report-search-input" placeholder="Buscar reporte…"
                           aria-label="Buscar reporte">
                </div>

                <nav class="report-master-list" role="tablist" aria-label="Categorías de reportes">
                    @foreach($allGroups as $i => $group)
                        @php $v = $groupVisuals[$group['title']] ?? $defaultVisual; @endphp
                        <button type="button"
                                class="report-master-item {{ $i === 0 ? 'active' : '' }}"
                                data-target="g{{ $i }}"
                                style="--cat-color: {{ $v['color'] }};"
                                role="tab"
                                aria-selected="{{ $i === 0 ? 'true' : 'false' }}">
                            <span class="report-master-icon">
                                <i data-feather="{{ $v['icon'] }}"></i>
                            </span>
                            <span class="report-master-meta">
                                <span class="report-master-title">
                                    {{ $group['title'] }}
                                    @if(!empty($group['special']))
                                        <span class="report-tag">Especial</span>
                                    @endif
                                </span>
                                <span class="report-master-desc">{{ $v['desc'] }}</span>
                            </span>
                            <span class="report-master-count">{{ count($group['items']) }}</span>
                        </button>
                    @endforeach
                </nav>
            </aside>

            {{-- ░░ DETAIL: reportes de la categoría activa ░░ --}}
            <section class="report-detail">
                @foreach($allGroups as $i => $group)
                    @php $v = $groupVisuals[$group['title']] ?? $defaultVisual; @endphp
                    <div class="report-detail-panel {{ $i === 0 ? 'active' : '' }}"
                         data-panel="g{{ $i }}" role="tabpanel">
                        <header class="report-detail-head" style="--cat-color: {{ $v['color'] }};">
                            <h6 class="report-detail-title">{{ $group['title'] }}</h6>
                            <span class="report-detail-sub">{{ count($group['items']) }} reporte(s)</span>
                        </header>
                        <div class="report-detail-list">
                            @foreach($group['items'] as $report)
                                <a href="{{ $report['url'] }}" class="report-row" title="{{ $report['title'] }}">
                                    <span class="report-row-main">
                                        <span class="report-row-title">
                                            {{ $report['title'] }}
                                            @if(!empty($report['badge']))
                                                <span class="report-badge">{{ $report['badge'] }}</span>
                                            @endif
                                        </span>
                                        @if(!empty($report['compact_description']) || !empty($report['description']))
                                            <span class="report-row-desc">{{ $report['compact_description'] ?? $report['description'] }}</span>
                                        @endif
                                        @if(!empty($report['links']))
                                            <span class="report-row-links">
                                                @foreach($report['links'] as $link)
                                                    <span class="report-row-link">{{ $link['label'] }}</span>
                                                @endforeach
                                            </span>
                                        @endif
                                    </span>
                                    <i data-feather="chevron-right" class="report-row-chev"></i>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endforeach

                {{-- Resultados de búsqueda (lista plana de los 52, filtra en vivo) --}}
                <div class="report-detail-panel" data-panel="search" role="tabpanel">
                    <header class="report-detail-head" style="--cat-color: #00796b;">
                        <h6 class="report-detail-title">Resultados</h6>
                        <span class="report-detail-sub" id="report-search-count"></span>
                    </header>
                    <div class="report-detail-list" id="report-search-results">
                        @foreach($allGroups as $group)
                            @foreach($group['items'] as $report)
                                <a href="{{ $report['url'] }}"
                                   class="report-row"
                                   data-search="{{ \Illuminate\Support\Str::lower($report['title'].' '.($report['description'] ?? '').' '.$group['title']) }}"
                                   title="{{ $report['title'] }}">
                                    <span class="report-row-main">
                                        <span class="report-row-title">{{ $report['title'] }}</span>
                                        <span class="report-row-desc report-row-group">{{ $group['title'] }}</span>
                                    </span>
                                    <i data-feather="chevron-right" class="report-row-chev"></i>
                                </a>
                            @endforeach
                        @endforeach
                        <div class="report-empty" id="report-search-empty" hidden>
                            <i data-feather="search"></i>
                            <span>Sin coincidencias.</span>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    @endif
@endsection

@push('styles')
    <style>
        .report-hub {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        /* ░░ MASTER ░░ */
        .report-master {
            flex: 0 0 320px;
            max-width: 320px;
            position: sticky;
            top: 12px;
        }

        .report-search-wrap {
            position: relative;
            margin-bottom: 12px;
        }

        .report-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--mn-text-muted, #94a3b8);
            pointer-events: none;
        }

        .report-search-input {
            width: 100%;
            border: 1px solid var(--mn-border, #e2e8f0);
            border-radius: 10px;
            padding: 0.55rem 0.75rem 0.55rem 2.25rem;
            font-size: 0.9rem;
            color: var(--mn-text, #1e293b);
            background: var(--mn-surface, #fff);
            transition: border-color .2s, box-shadow .2s;
        }

        .report-search-input:focus {
            outline: none;
            border-color: var(--mn-primary, #00796b);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--mn-primary, #00796b) 15%, transparent);
        }

        .report-master-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
            max-height: calc(100vh - 150px);
            overflow-y: auto;
            padding-right: 2px;
        }

        .report-master-item {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            text-align: left;
            background: var(--mn-surface, #fff);
            border: 1px solid var(--mn-border, #e7edf5);
            border-left: 3px solid transparent;
            border-radius: 10px;
            padding: 0.7rem 0.8rem;
            cursor: pointer;
            transition: background .15s, border-color .15s, box-shadow .15s;
        }

        .report-master-item:hover {
            background: var(--mn-surface-2, #f8fafc);
            border-color: var(--mn-border-strong, #d8deeb);
        }

        .report-master-item.active {
            border-left-color: var(--cat-color);
            background: color-mix(in srgb, var(--cat-color) 7%, var(--mn-surface, #fff));
            box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
        }

        .report-master-icon {
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            color: var(--cat-color);
            background: color-mix(in srgb, var(--cat-color) 14%, transparent);
        }

        .report-master-icon i { width: 20px; height: 20px; }

        .report-master-meta {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .report-master-title {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--mn-text, #24324b);
            line-height: 1.2;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .report-master-desc {
            font-size: 0.74rem;
            color: var(--mn-text-muted, #64748b);
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .report-master-count {
            flex: 0 0 auto;
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--mn-text-muted, #94a3b8);
            background: var(--mn-surface-2, #f1f5f9);
            border-radius: 999px;
            padding: 0.05rem 0.45rem;
            min-width: 22px;
            text-align: center;
        }

        .report-master-item.active .report-master-count {
            color: var(--cat-color);
            background: color-mix(in srgb, var(--cat-color) 14%, transparent);
        }

        .report-tag {
            font-size: 0.62rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: var(--mn-text-muted, #94a3b8);
            border: 1px solid var(--mn-border, #e2e8f0);
            border-radius: 999px;
            padding: 0 0.35rem;
        }

        /* ░░ DETAIL ░░ */
        .report-detail {
            flex: 1 1 auto;
            min-width: 0;
            background: var(--mn-surface, #fff);
            border: 1px solid var(--mn-border, #e7edf5);
            border-radius: 12px;
            overflow: hidden;
        }

        .report-detail-panel { display: none; }
        .report-detail-panel.active { display: block; }

        .report-detail-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            padding: 0.85rem 1.1rem;
            border-bottom: 1px solid var(--mn-border, #eef2f7);
            border-top: 3px solid var(--cat-color);
        }

        .report-detail-title {
            margin: 0;
            font-size: 1.02rem;
            font-weight: 700;
            color: var(--mn-text, #24324b);
        }

        .report-detail-sub {
            font-size: 0.78rem;
            color: var(--mn-text-muted, #94a3b8);
            white-space: nowrap;
        }

        .report-detail-list { display: flex; flex-direction: column; }

        .report-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 0.7rem 1.1rem;
            border-bottom: 1px solid var(--mn-border, #f1f5f9);
            color: inherit;
            text-decoration: none;
            transition: background .12s;
        }

        .report-row:last-child { border-bottom: 0; }

        .report-row:hover {
            background: var(--mn-surface-2, #f8fafc);
            text-decoration: none;
        }

        .report-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

        .report-row-title {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--mn-text, #334155);
            line-height: 1.25;
            display: flex;
            align-items: center;
            gap: 7px;
        }

        .report-row:hover .report-row-title { color: var(--mn-primary, #00796b); }

        .report-row-desc {
            font-size: 0.76rem;
            color: var(--mn-text-muted, #64748b);
            line-height: 1.25;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .report-row-group {
            color: var(--mn-text-muted, #94a3b8);
            -webkit-line-clamp: 1;
        }

        .report-row-links { display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; margin-top: 2px; }

        .report-row-link {
            font-size: 0.7rem;
            color: var(--mn-text-muted, #7b8794);
            border: 1px solid var(--mn-border, #e2e8f0);
            border-radius: 6px;
            padding: 0 0.35rem;
        }

        .report-badge {
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #fff;
            background: #ef4444;
            border-radius: 999px;
            padding: 0.05rem 0.4rem;
        }

        .report-row-chev { width: 16px; height: 16px; color: var(--mn-text-muted, #cbd5e1); flex: 0 0 auto; }

        .report-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 2.5rem 1rem;
            color: var(--mn-text-muted, #94a3b8);
            font-size: 0.85rem;
        }
        .report-empty i { width: 26px; height: 26px; }

        /* ░░ Responsive ░░ */
        @media (max-width: 991.98px) {
            .report-hub { flex-direction: column; }
            .report-master { flex-basis: auto; max-width: 100%; width: 100%; position: static; }
            .report-master-list { max-height: none; }
        }
    </style>
@endpush

@push('scripts')
    <script>
        // Delegación en document: inmune al timing de montaje y a re-renders del
        // layout admin (los listeners por-nodo no enganchaban). El estado vive en
        // clases CSS, no en variables, así que sobrevive a cualquier re-pintado.
        (function () {
            window.__reportHubReady = true;

            var STORAGE_KEY = 'reportHub.lastCategory';
            function hub() { return document.getElementById('report-hub'); }
            var lastTarget = 'g0';

            function showPanel(id) {
                var h = hub();
                if (!h) return;
                h.querySelectorAll('[data-panel]').forEach(function (p) {
                    p.classList.toggle('active', p.getAttribute('data-panel') === id);
                });
            }

            function activate(id, persist) {
                var h = hub();
                if (!h) return;
                var activeMaster = null;
                h.querySelectorAll('[data-target]').forEach(function (m) {
                    var on = m.getAttribute('data-target') === id;
                    m.classList.toggle('active', on);
                    m.setAttribute('aria-selected', on ? 'true' : 'false');
                    if (on) activeMaster = m;
                });
                showPanel(id);
                lastTarget = id;
                // Mantiene la categoría activa visible en el rail (scroll bajo).
                if (activeMaster && activeMaster.scrollIntoView) {
                    activeMaster.scrollIntoView({ block: 'nearest' });
                }
                if (persist !== false) {
                    try { localStorage.setItem(STORAGE_KEY, id); } catch (e) {}
                }
            }

            function runSearch(value) {
                var h = hub();
                if (!h) return;
                var q = (value || '').trim().toLowerCase();
                if (!q) {
                    activate(lastTarget);
                    return;
                }
                h.querySelectorAll('[data-target]').forEach(function (m) {
                    m.classList.remove('active');
                    m.setAttribute('aria-selected', 'false');
                });
                showPanel('search');

                var matches = 0;
                h.querySelectorAll('#report-search-results [data-search]').forEach(function (row) {
                    var hit = row.getAttribute('data-search').indexOf(q) !== -1;
                    row.style.display = hit ? '' : 'none';
                    if (hit) matches++;
                });
                var empty = document.getElementById('report-search-empty');
                if (empty) empty.hidden = matches !== 0;
                var countEl = document.getElementById('report-search-count');
                if (countEl) countEl.textContent = matches + ' resultado(s)';
            }

            document.addEventListener('click', function (e) {
                if (!e.target || !e.target.closest) return;
                var m = e.target.closest('.report-master-item');
                if (!m || !hub() || !hub().contains(m)) return;
                e.preventDefault();
                var s = document.getElementById('report-search');
                if (s) s.value = '';
                activate(m.getAttribute('data-target'));
            });

            document.addEventListener('input', function (e) {
                if (e.target && e.target.id === 'report-search') {
                    runSearch(e.target.value);
                }
            });

            document.addEventListener('keydown', function (e) {
                var s = document.getElementById('report-search');
                if (!s || !hub()) return;

                // "/" enfoca el buscador (si no estás escribiendo en otro campo).
                if (e.key === '/' && document.activeElement !== s) {
                    var el = document.activeElement;
                    var tag = el ? (el.tagName || '').toLowerCase() : '';
                    var typing = tag === 'input' || tag === 'textarea' || tag === 'select' ||
                        (el && el.isContentEditable);
                    if (!typing) {
                        e.preventDefault();
                        s.focus();
                        s.select();
                    }
                    return;
                }

                // Enter en el buscador abre el primer resultado visible.
                if (e.key === 'Enter' && e.target === s && s.value.trim()) {
                    var first = hub().querySelector('#report-search-results [data-search]:not([style*="display: none"])');
                    if (first && first.getAttribute('href')) {
                        e.preventDefault();
                        window.location.href = first.getAttribute('href');
                    }
                }
            });

            // Restaura la última categoría abierta (si no hay búsqueda activa).
            (function restoreLast() {
                var h = hub();
                if (!h) return;
                var saved;
                try { saved = localStorage.getItem(STORAGE_KEY); } catch (e) {}
                if (saved && h.querySelector('[data-panel="' + saved + '"]')) {
                    activate(saved, false);
                }
            })();

            if (window.feather && typeof window.feather.replace === 'function') {
                window.feather.replace();
            }
        })();
    </script>
@endpush