<template>
    <!--  BEGIN SIDEBAR  -->
    <div class="sidebar-wrapper sidebar-theme">
        <nav ref="menu" id="sidebar">
            <div class="shadow-bottom"></div>

            <perfect-scrollbar class="list-unstyled menu-categories" tag="ul" :options="{ wheelSpeed: 0.5, swipeEasing: !0, minScrollbarLength: 40, maxScrollbarLength: 300, suppressScrollX: true }">
                <!-- 1. INICIO: dashboard semáforo -->
                <li class="menu" v-if="can('dashboard.ver') || can('lavanderia.dashboard')">
                    <a class="dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#inicio" aria-controls="inicio" aria-expanded="false">
                        <div class="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-home">
                                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                <polyline points="9 22 9 12 15 12 15 22"></polyline>
                            </svg>
                            <span>{{ $t('layout.sidebar.home') }}</span>
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </div>
                    </a>
                    <ul id="inicio" class="collapse submenu list-unstyled" data-bs-parent="#sidebar">
                        <li>
                            <router-link to="/lavanderia/dashboard" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-activity me-2">
                                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                                </svg>
                                {{ $t('layout.sidebar.dashboard_semaforo') }}
                            </router-link>
                        </li>
                    </ul>
                </li>

                <!-- 2. PUNTO DE VENTA -->
                <li class="menu" v-if="can('pos.vender') || can('caja.administrar')">
                    <a class="dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#ventas" aria-controls="ventas" aria-expanded="false">
                        <div class="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-shopping-cart">
                                <circle cx="9" cy="21" r="1"></circle>
                                <circle cx="20" cy="21" r="1"></circle>
                                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                            </svg>
                            <span>{{ $t('layout.sidebar.sales_pos') }}</span>
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </div>
                    </a>
                    <ul id="ventas" class="collapse submenu list-unstyled" data-bs-parent="#sidebar">
                        <li v-if="can('pos.vender')">
                            <router-link to="/ventas/pos" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-plus-circle me-2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
                                {{ $t('layout.sidebar.new_sale') }}
                            </router-link>
                        </li>
                        <li v-if="can('caja.administrar')">
                            <router-link to="/ventas/caja" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-briefcase me-2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
                                {{ $t('layout.sidebar.cash_register') }}
                            </router-link>
                        </li>
                        <li v-if="can('pos.vender') || can('lavanderia.recepcion') || can('lavanderia.consultar')">
                            <router-link to="/ventas/tickets" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-file-text me-2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                {{ $t('layout.sidebar.ticket_history') }}
                            </router-link>
                        </li>
                    </ul>
                </li>

                <!-- 2b. CATÁLOGO (POS lavandería + servicios + TIBU) -->
                <li class="menu" v-if="can('administracion.areas') || can('pos.vender') || can('caja.administrar')">
                    <a class="dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#menuCatalogo" aria-controls="menuCatalogo" aria-expanded="false">
                        <div class="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-layers">
                                <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
                                <polyline points="2 17 12 22 22 17"></polyline>
                                <polyline points="2 12 12 17 22 12"></polyline>
                            </svg>
                            <span>{{ $t('layout.sidebar.catalog') }}</span>
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </div>
                    </a>
                    <ul id="menuCatalogo" class="collapse submenu list-unstyled" data-bs-parent="#sidebar">
                        <li v-if="can('administracion.areas')">
                            <router-link to="/admin/catalogo-categorias" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-grid me-2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
                                {{ $t('layout.sidebar.catalog_categories') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.areas')">
                            <router-link to="/admin/catalogo-servicios" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-package me-2"><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                                {{ $t('layout.sidebar.catalog_sale_services') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.areas')">
                            <router-link to="/admin/catalogo-productos" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-shopping-bag me-2"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
                                {{ $t('layout.sidebar.catalog_sale_products') }}
                            </router-link>
                        </li>
                        <li v-if="canAny(CATALOG_AUX_PERMISSIONS)">
                            <router-link to="/catalogos/etapas" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-sliders me-2"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
                                {{ $t('layout.sidebar.catalog_etapas') }}
                            </router-link>
                        </li>
                        <li v-if="canAny(CATALOG_AUX_PERMISSIONS)">
                            <router-link to="/catalogos/tipos-servicio" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-clock me-2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                                {{ $t('layout.sidebar.catalog_tipos_servicio') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.areas')">
                            <router-link to="/admin/garment-types" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-tag me-2"><path d="M20.59 13.41L11 3H4v7l9.59 9.59a2 2 0 0 0 2.82 0l4.18-4.18a2 2 0 0 0 0-2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
                                {{ $t('layout.sidebar.catalog_garment_types') }}
                            </router-link>
                        </li>
                        <li v-if="canAny(CATALOG_CLIENTES_PERMISSIONS)">
                            <router-link to="/catalogos/cliente-categorias" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-layers me-2"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
                                {{ $t('layout.sidebar.catalog_client_categories') }}
                            </router-link>
                        </li>
                        <li v-if="canAny(CATALOG_CLIENTES_PERMISSIONS)">
                            <router-link to="/catalogos/clientes" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-users me-2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                                {{ $t('layout.sidebar.catalog_clients') }}
                            </router-link>
                        </li>
                    </ul>
                </li>

                <!-- 3. LAVANDERÍA: operaciones (lista y escaneo unificado) -->
                <li class="menu" v-if="can('lavanderia.recepcion') || can('lavanderia.operador') || can('lavanderia.consultar')">
                    <a class="dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#lavanderia" aria-controls="lavanderia" aria-expanded="false">
                        <div class="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-wind">
                                <path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
                                <path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
                                <path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
                            </svg>
                            <span>{{ $t('layout.sidebar.laundry_ops') }}</span>
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </div>
                    </a>
                    <ul id="lavanderia" class="collapse submenu list-unstyled" data-bs-parent="#sidebar">
                        <li v-if="can('lavanderia.consultar') || can('lavanderia.recepcion')">
                            <router-link to="/lavanderia/lista" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-list me-2">
                                    <line x1="8" y1="6" x2="21" y2="6"></line>
                                    <line x1="8" y1="12" x2="21" y2="12"></line>
                                    <line x1="8" y1="18" x2="21" y2="18"></line>
                                    <line x1="3" y1="6" x2="3.01" y2="6"></line>
                                    <line x1="3" y1="12" x2="3.01" y2="12"></line>
                                    <line x1="3" y1="18" x2="3.01" y2="18"></line>
                                </svg>
                                {{ $t('layout.sidebar.order_list') }}
                            </router-link>
                        </li>
                        <li v-if="can('lavanderia.operador')">
                            <router-link to="/lavanderia/escanear" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-maximize-2 me-2">
                                    <polyline points="15 3 21 3 21 9"></polyline>
                                    <polyline points="9 21 3 21 3 15"></polyline>
                                    <line x1="21" y1="3" x2="14" y2="10"></line>
                                    <line x1="3" y1="21" x2="10" y2="14"></line>
                                </svg>
                                {{ $t('layout.sidebar.scan_qr') }}
                            </router-link>
                        </li>
                    </ul>
                </li>

                <!-- 4. INVENTARIO (almacén; distinto de catálogo POS) -->
                <li class="menu" v-if="canAny(['inventory.view', 'inventory.manage'])">
                    <a class="dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#inventario" aria-controls="inventario" aria-expanded="false">
                        <div class="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-archive">
                                <polyline points="21 8 21 21 3 21 3 8"></polyline>
                                <rect x="1" y="3" width="22" height="5"></rect>
                                <line x1="10" y1="12" x2="14" y2="12"></line>
                            </svg>
                            <span>{{ $t('layout.sidebar.inventory') }}</span>
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </div>
                    </a>
                    <ul id="inventario" class="collapse submenu list-unstyled" data-bs-parent="#sidebar">
                        <li v-if="can('inventory.manage')">
                            <router-link :to="{ name: 'inventory-quick-movements-router' }" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-zap me-2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
                                {{ $t('inventory.quick_movements.menu') }}
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/inventario/productos" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-box me-2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
                                {{ $t('layout.sidebar.warehouse_products') }}
                            </router-link>
                        </li>
                        <li>
                            <router-link :to="{ name: 'inventory-transfer-documents-router' }" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-file-text me-2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                {{ $t('inventory.transfer_documents.menu') }}
                            </router-link>
                        </li>
                    </ul>
                </li>

                <!-- 5. REPORTES -->
                <li class="menu" v-if="can('reportes.ver')">
                    <a class="dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#reportes" aria-controls="reportes" aria-expanded="false">
                        <div class="">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-bar-chart-2">
                                <line x1="18" y1="20" x2="18" y2="10"></line>
                                <line x1="12" y1="20" x2="12" y2="4"></line>
                                <line x1="6" y1="20" x2="6" y2="14"></line>
                            </svg>
                            <span>{{ $t('layout.sidebar.reports') }}</span>
                        </div>
                        <div>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-chevron-right">
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </div>
                    </a>
                    <ul id="reportes" class="collapse submenu list-unstyled" data-bs-parent="#sidebar">
                        <li>
                            <router-link to="/reportes/cierre-dia" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-calendar me-2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                {{ $t('layout.sidebar.day_close') }}
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/reportes/ventas-producto" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-trending-up me-2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                                {{ $t('layout.sidebar.sales_by_product') }}
                            </router-link>
                        </li>
                        <li>
                            <router-link to="/ventas/mensual" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-trending-up me-2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                                {{ $t('layout.sidebar.monthly_sales') }}
                            </router-link>
                        </li>
                    </ul>
                </li>

                <!-- 6. ADMINISTRACIÓN (sin duplicar Inicio/Dashboard: solo existe Inicio → Dashboard Semáforo) -->
                <li class="menu" v-if="can('administracion.usuarios') || can('administracion.roles') || can('administracion.areas') || can('caja.administrar')">
                    <a class="dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#administracion" aria-controls="administracion" aria-expanded="false">
                        <div class="">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-settings"
                            >
                                <circle cx="12" cy="12" r="3"></circle>
                                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
                            </svg>
                            <span>{{ $t('layout.sidebar.system_admin') }}</span>
                        </div>
                        <div>
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-chevron-right"
                            >
                                <polyline points="9 18 15 12 9 6"></polyline>
                            </svg>
                        </div>
                    </a>

                    <ul id="administracion" class="collapse submenu list-unstyled" data-bs-parent="#sidebar">
                        <li v-if="canAny(CONFIG_EMPRESA_PERMISSIONS)">
                            <router-link to="/admin/configuracion-empresa" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-printer me-2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
                                {{ $t('admin.config_empresa.nav') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.usuarios')">
                            <router-link to="/users/lista" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users me-2">
                                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="9" cy="7" r="4"></circle>
                                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                </svg>
                                {{ $t('layout.sidebar.users') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.roles')">
                            <router-link to="/roles/lista" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield me-2">
                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
                                </svg>
                                {{ $t('layout.sidebar.roles') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.areas')">
                            <router-link to="/admin/impresoras" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-printer me-2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
                                {{ $t('admin.impresoras.nav') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.areas')">
                            <router-link to="/admin/areas" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map me-2">
                                    <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
                                    <line x1="8" y1="2" x2="8" y2="18"></line>
                                    <line x1="16" y1="6" x2="16" y2="22"></line>
                                </svg>
                                {{ $t('layout.sidebar.tibu_areas') }}
                            </router-link>
                        </li>
                        <li v-if="can('administracion.areas')">
                            <router-link to="/catalogos/productos" @click="toggleMobileMenu">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="feather feather-archive me-2"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
                                {{ $t('layout.sidebar.legacy_products_archive') }}
                            </router-link>
                        </li>
                    </ul>
                </li>

                <!-- 7. MI PERFIL -->
                <li class="menu">
                    <router-link to="/users/profile" class="dropdown-toggle" @click="toggleMobileMenu">
                        <div class="">
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                class="feather feather-user"
                            >
                                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                <circle cx="12" cy="7" r="4"></circle>
                            </svg>
                            <span>{{ $t('layout.sidebar.profile') }}</span>
                        </div>
                    </router-link>
                </li>
            </perfect-scrollbar>
        </nav>
    </div>
    <!--  END SIDEBAR  -->
</template>

<script setup>
    import { onMounted, ref } from 'vue';
    import { useStore } from 'vuex';
    import { usePermissions } from '@/composables/use-permissions';
    import { TIBU_AREA_CODES } from '@/constants/tibuAreas';
    import { CONFIG_EMPRESA_PERMISSIONS, CATALOG_AUX_PERMISSIONS, CATALOG_CLIENTES_PERMISSIONS } from '@/constants/routePermissions';
    
    const store = useStore();
    const { loadPermissions, hasPermission, hasAnyPermission } = usePermissions();
    
    const menu_collapse = ref('dashboard');
    const permissionsLoaded = ref(false);

    // Funciones helper para verificar permisos
    const can = (permission) => {
        if (!permissionsLoaded.value) return false;
        return hasPermission(permission);
    };
    
    const canAny = (permissions) => {
        if (!permissionsLoaded.value) return false;
        return hasAnyPermission(permissions);
    };

    const canAnyAreaOperate = () => {
        if (!permissionsLoaded.value) return false;
        return TIBU_AREA_CODES.some((code) => hasPermission(`area.${code}.operate`));
    };

    onMounted(async () => {
        await loadPermissions();
        permissionsLoaded.value = true;
        
        const selector = document.querySelector('#sidebar a[href="' + window.location.pathname + '"]');
        if (selector) {
            const ul = selector.closest('ul.collapse');
            if (ul) {
                let ele = ul.closest('li.menu').querySelectorAll('.dropdown-toggle');
                if (ele) {
                    ele = ele[0];
                    setTimeout(() => {
                        ele.click();
                    });
                }
                const selector2 = document.querySelector('#sidebar a[href="#' + ul.id + '"]');
                if (selector2) {
                    selector2.click();
                }

            } else {
                selector.click();
            }
        }
    });

    const toggleMobileMenu = () => {
        if (window.innerWidth < 991) {
            store.commit('toggleSideBar', !store.state.is_show_sidebar);
        }
    };
</script>
