import React, { useState, useEffect, useMemo } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { API } from "@/apis/configs/axiosConfigs";
import { useAuth } from "@/hooks/useAuth";
import { createPanelPageUrl } from "@/utils";
import { useCompanyStore } from "@/hooks/store/useCompanyStore";
import { 
    Building2, 
    LayoutDashboard, 
    Receipt, 
    FileText, 
    TrendingUp, 
    Settings,
    ChevronDown,
    ChevronRight,
    Globe,
    PieChart,
    CreditCard,
    Users,
    Menu,
    X,
    Package,
    Warehouse,
    FileCheck,
    RefreshCw,
    ShoppingCart,
    Truck,
    AlertCircle,
    Tag,
    BarChart3,
    History,
    Star,
    Award,
    MapPin,
    Bluetooth,
    Shield,
    Headphones,
    Factory,
    Boxes,
    Network,
    Wrench,
    Hammer,
    FlaskConical,
    ClipboardList,
    ListOrdered,
    PlusCircle,
    Store,
    LogOut,
    Scale,
    Gift,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { hasCapability } from "@/lib/permissions";

// Keep React Router compatibility while declaring App Router canonical URLs.
const createPageUrl = (pageName) => {
    return createPanelPageUrl(pageName);
};

const normalizePath = (value) => (value || "").replace(/\/+$/, "").toLowerCase();

const permissionByTitle = {
    // Módulos top-level
    "Panel de Control":     "dashboard",
    "Punto de Venta (POS)": "pos",
    "Caja":                 "cash_register",
    "Empresas":             "configuration_companies",
    "Usuarios":             "users",
    "Productos":            "products",
    "Inventario":           "inventory",
    "Producción":           "production",
    "Facturas de Venta":    "sales_invoices",
    "Facturas de Compra":   "purchase_invoices",
    "Proveedores":          "suppliers",
    "Clientes":             "customers",
    "Configuración":        "configuration",
    "Vistas por Rol":       "role_views_admin",
    "Call Center":          "call_center",
    "WMS":                  "wms",
    "Módulo OC":            "oc",
    "Red Comercial":        "network",
    "Suscripciones":        "subscriptions",
    "Integraciones":        "integrations",
    // Subvistas comunes
    "POS":                          "pos_main",
    "N° Atención":                  "pos_attention_number",
    "Pre-ventas":                   "pos_presales",
    "Tarjeta de Coordenadas":       "pos_supervisor_card",
    "Vendedores":                   "pos_sellers",
    "Catálogo de Productos":        "products_catalog",
    "Categorías":                   "products_categories",
    "Reglas de Descuentos":         "products_discount_rules",
    "Reglas de Regalos":            "products_gift_tiers",
    "Canje de Puntos":              "products_point_rewards",
    "Más Vendidos del Mes":         "products_top",
    "Inventario Físico":            "inventory_physical",
    "Ingreso de Mercaderías":       "inventory_goods_receipt",
    "Valorización de Inventario":   "inventory_valuation",
    "Stock Reposición":             "inventory_stock_reorder",
    "Proyección de Ventas":         "inventory_sales_projection",
    "Lista de Clientes":            "customers_list",
    "Puntos y Canje":               "customers_points",
    "Segmentación":                 "customers_segmentation",
    "Historial":                    "customers_history",
    "Condiciones Afiliación":       "customers_affiliation",
    "Picking":                      "wms_picking",
    "Despacho de Pedidos":          "wms_dispatch",
    "Seguimiento":                  "wms_tracking",
    "Config. Embalaje":             "wms_packaging",
    "Transbank Cloud to Cloud":     "integrations_transbank_c2c",
    "Transbank POS Integrado":      "integrations_transbank_pos",
    "Transbank POS Bluetooth":      "integrations_transbank_bt",
    "Softnet":                      "integrations_softnet",
    "Transportes":                  "integrations_transport",
    "Planes de Suscripción":        "subscriptions_plans",
    "Facturas Recurrentes":         "subscriptions_recurring",
    "Miembros de la Red":           "network_members",
    "Categorías por Mes":           "network_categories",
    "Plan de Cuentas":              "finance_accounts",
    "Transacciones":                "finance_transactions",
    "Libro Mayor":                  "finance_ledger",
    "Reportes":                     "finance_reports",
    "Sucursales":                   "branches",
    "Bodegas / Inventario":         "warehouses",
};

const permissionByPathChunk = [
    { chunk: "/dashboard",                   key: "dashboard" },
    { chunk: "/pos-attention-number",        key: "pos_attention_number" },
    { chunk: "/pre-sales",                   key: "pos_presales" },
    { chunk: "/supervisor-card",             key: "pos_supervisor_card" },
    { chunk: "/sellers",                     key: "pos_sellers" },
    { chunk: "/cash-register",               key: "cash_register" },
    { chunk: "/pos",                         key: "pos_main" },
    { chunk: "/users",                       key: "users" },
    { chunk: "/role-views-admin",            key: "role_views_admin" },
    { chunk: "/branches",                    key: "branches" },
    { chunk: "/warehouses",                  key: "warehouses" },
    { chunk: "/customers/",                  key: "customers_list" },
    { chunk: "/customers",                   key: "customers_list" },
    { chunk: "/customer-points",             key: "customers_points" },
    { chunk: "/customer-segmentation",       key: "customers_segmentation" },
    { chunk: "/customer-history",            key: "customers_history" },
    { chunk: "/affiliation-conditions",      key: "customers_affiliation" },
    { chunk: "/category-configuration",      key: "customers_cat_config" },
    { chunk: "/category-update-log",         key: "customers_cat_log" },
    { chunk: "/call-center",                 key: "call_center" },
    { chunk: "/customer-service",            key: "call_center" },
    { chunk: "/products",                    key: "products_catalog" },
    { chunk: "/categories",                  key: "products_categories" },
    { chunk: "/discount-rules",              key: "products_discount_rules" },
    { chunk: "/point-rewards",               key: "products_point_rewards" },
    { chunk: "/top-products",                key: "products_top" },
    { chunk: "/sales-invoices",              key: "sales_invoices" },
    { chunk: "/purchase-invoices",           key: "purchase_invoices" },
    { chunk: "/suppliers",                   key: "suppliers" },
    { chunk: "/inventory-valuation",         key: "inventory_valuation" },
    { chunk: "/goods-receipt",               key: "inventory_goods_receipt" },
    { chunk: "/stock-reorder",               key: "inventory_stock_reorder" },
    { chunk: "/sales-projection",            key: "inventory_sales_projection" },
    { chunk: "/inventory",                   key: "inventory_physical" },
    { chunk: "/production/raw-materials",    key: "production_raw_materials" },
    { chunk: "/production/production-lines", key: "production_lines" },
    { chunk: "/production/direct-costs",     key: "production_direct_costs" },
    { chunk: "/production/labor",            key: "production_labor" },
    { chunk: "/production/operators",        key: "production_operators" },
    { chunk: "/production/formulas/create",  key: "production_formula_create" },
    { chunk: "/production/formulas/list",    key: "production_formula_list" },
    { chunk: "/production/orders/list",      key: "production_order_list" },
    { chunk: "/production/orders",           key: "production_order_create" },
    { chunk: "/production/requests",         key: "production_requests" },
    { chunk: "/production",                  key: "production" },
    { chunk: "/oc/configurations",           key: "oc_configurations" },
    { chunk: "/oc/indicators",               key: "oc_indicators" },
    { chunk: "/oc/contracts",                key: "oc_contracts" },
    { chunk: "/oc/book/purchase-order",      key: "oc_book_create" },
    { chunk: "/oc/book/tracking",            key: "oc_book_tracking" },
    { chunk: "/oc/book/validation",          key: "oc_book_validation" },
    { chunk: "/oc/book/pending-orders",      key: "oc_book_pending" },
    { chunk: "/oc/book/commercial-ack",      key: "oc_book_ack" },
    { chunk: "/oc/book/bitacora",            key: "oc_book_bitacora" },
    { chunk: "/oc/panel/control-differences",key: "oc_panel_differences" },
    { chunk: "/oc/sectorized/authorization", key: "oc_sectorized_auth" },
    { chunk: "/oc/sectorized/panel",         key: "oc_sectorized_panel" },
    { chunk: "/oc",                          key: "oc" },
    { chunk: "/picking",                     key: "wms_picking" },
    { chunk: "/order-dispatch",              key: "wms_dispatch" },
    { chunk: "/order-tracking",              key: "wms_tracking" },
    { chunk: "/packaging-config",            key: "wms_packaging" },
    { chunk: "/accounts",                    key: "finance_accounts" },
    { chunk: "/transactions",                key: "finance_transactions" },
    { chunk: "/ledger",                      key: "finance_ledger" },
    { chunk: "/reports",                     key: "finance_reports" },
    { chunk: "/subscription-plans",          key: "subscriptions_plans" },
    { chunk: "/subscriptions",               key: "subscriptions_list" },
    { chunk: "/recurring-invoices",          key: "subscriptions_recurring" },
    { chunk: "/network-members",             key: "network_members" },
    { chunk: "/network-categories",          key: "network_categories" },
    { chunk: "/transbank-cloud-to-cloud",    key: "integrations_transbank_c2c" },
    { chunk: "/transbank-pos-integrado",     key: "integrations_transbank_pos" },
    { chunk: "/transbank-bluetooth",         key: "integrations_transbank_bt" },
    { chunk: "/softnet",                     key: "integrations_softnet" },
    { chunk: "/transport-integrations",      key: "integrations_transport" },
    { chunk: "/shipping-companies",          key: "configuration_shipping" },
    { chunk: "/payment-methods",             key: "configuration_payment_methods" },
    { chunk: "/companies",                   key: "configuration_companies" },
    { chunk: "/settings",                    key: "configuration" },
];

const resolvePermissionKey = (item, inheritedPermissionKey) => {
    if (inheritedPermissionKey) {
        return inheritedPermissionKey;
    }

    const byTitle = permissionByTitle[item?.title];
    if (byTitle) {
        return byTitle;
    }

    const itemUrl = normalizePath(item?.url);
    if (!itemUrl) {
        return null;
    }

    const byChunk = permissionByPathChunk.find((entry) => itemUrl.includes(entry.chunk));
    return byChunk?.key ?? null;
};

const filterNavigationByCapabilities = (
    items,
    capabilities,
    isDynamicEnabled,
    isSuperAdmin,
    inheritedPermissionKey = null,
) => {
    if (!isDynamicEnabled) {
        return items.filter((item) => !item.superadminOnly || isSuperAdmin);
    }

    return items
        .map((item) => {
            if (item.superadminOnly && !isSuperAdmin) {
                return null;
            }

            const permissionKey = resolvePermissionKey(item, inheritedPermissionKey);
            let canRead;
            if (item.superadminOnly && isSuperAdmin) {
                canRead = true;
            } else if (permissionKey) {
                canRead = hasCapability(capabilities, `${permissionKey}.read`, true);
            } else {
                canRead = true;
            }

            if (!canRead) {
                return null;
            }

            if (!Array.isArray(item?.submenu) || item.submenu.length === 0) {
                return item;
            }

            const filteredSubmenu = filterNavigationByCapabilities(
                item.submenu,
                capabilities,
                isDynamicEnabled,
                isSuperAdmin,
                permissionKey,
            );

            if (filteredSubmenu.length === 0) {
                return item.url ? item : null;
            }

            return {
                ...item,
                submenu: filteredSubmenu,
            };
        })
        .filter(Boolean);
};

const navigationItems = [
    {
        title: "Panel de Control",
        url: createPageUrl("Dashboard"),
        icon: LayoutDashboard,
    },
    {
        title: "Punto de Venta (POS)",
        icon: ShoppingCart,
        submenu: [
            {
                title: "POS",
                url: createPageUrl("POS"),
                icon: ShoppingCart,
            },
            {
                title: "N° Atención",
                url: createPageUrl("POSAttentionNumber"),
                icon: Receipt,
            },
            {
                title: "Pre-ventas",
                url: createPageUrl("PreSales"),
                icon: Shield,
            },
            {
                title: "Tarjeta de Coordenadas",
                url: createPageUrl("SupervisorCard"),
                icon: Shield,
            },
            {
                title: "Vendedores",
                url: createPageUrl("Sellers"),
                icon: Users,
            },
            {
                title: "Caja",
                url: createPageUrl("CashRegister"),
                icon: CreditCard,
            },
        ]
    },
    {
        title: "Empresas",
        url: createPageUrl("Companies"),
        icon: Building2,
    },
    {
        title: "Usuarios",
        url: createPageUrl("Users"),
        icon: Users,
    },
    {
        title: "Plan de Cuentas",
        url: createPageUrl("Accounts"),
        icon: PieChart,
    },
    {
        title: "Productos",
        icon: Package,
        submenu: [
            {
                title: "Catálogo de Productos",
                url: createPageUrl("Products"),
                icon: Package,
            },
            {
                title: "Categorías",
                url: createPageUrl("Categories"),
                icon: Tag,
            },
            {
                title: "Reglas de Descuentos",
                url: createPageUrl("DiscountRules"),
                icon: Tag,
            },
            {
                title: "Reglas de Regalos",
                url: createPageUrl("GiftTiers"),
                icon: Gift,
            },
            {
                title: "Canje de Puntos",
                url: createPageUrl("PointRewards"),
                icon: Gift,
            },
            {
                title: "Más Vendidos del Mes",
                url: createPageUrl("TopProducts"),
                icon: BarChart3,
            },
        ]
    },
    {
        title: "Inventario",
        icon: Warehouse,
        submenu: [
            {
                title: "Inventario Físico",
                url: createPageUrl("Inventory"),
                icon: Warehouse,
            },
            {
                title: "Ingreso de Mercaderías",
                url: createPageUrl("GoodsReceipt"),
                icon: Package,
            },
            {
                title: "Valorización de Inventario",
                url: createPageUrl("InventoryValuation"),
                icon: BarChart3,
            },
            {
                title: "Stock Reposición",
                url: createPageUrl("StockReorder"),
                icon: AlertCircle,
            },
            {
                title: "Proyección de Ventas",
                url: createPageUrl("SalesProjection"),
                icon: TrendingUp,
            },
        ]
    },
    {
        title: "Producción",
        icon: Factory,
        submenu: [
            {
                title: "Reportes",
                icon: BarChart3,
                submenu: [
                    {
                        title: "Informe de Órdenes de Producción",
                        url: createPageUrl("Production"),
                        icon: FileText,
                    },
                ],
            },
            {
                title: "Maestros",
                icon: Boxes,
                submenu: [
                    {
                        title: "Materias Primas",
                        url: createPageUrl("production/raw-materials"),
                        icon: Boxes,
                    },
                    {
                        title: "Líneas de Producción",
                        url: createPageUrl("production/production-lines"),
                        icon: Network,
                    },
                    {
                        title: "Costos Directos",
                        url: createPageUrl("production/direct-costs"),
                        icon: Wrench,
                    },
                    {
                        title: "Mano de Obra",
                        url: createPageUrl("production/labor"),
                        icon: Hammer,
                    },
                    {
                        title: "Operarios",
                        url: createPageUrl("production/operators"),
                        icon: Users,
                    },
                ],
            },
            {
                title: "Fórmula",
                icon: FlaskConical,
                submenu: [
                    {
                        title: "Crear Fórmula",
                        url: createPageUrl("production/formulas/create"),
                        icon: FlaskConical,
                    },
                    {
                        title: "Listado Fórmulas",
                        url: createPageUrl("production/formulas/list"),
                        icon: FileText,
                    },
                ],
            },
            {
                title: "Órdenes",
                icon: ClipboardList,
                submenu: [
                    {
                        title: "Orden de Producción",
                        url: createPageUrl("production/orders"),
                        icon: ClipboardList,
                    },
                    {
                        title: "Listado de Órdenes",
                        url: createPageUrl("production/orders/list"),
                        icon: FileText,
                    },
                    {
                        title: "Solicitudes de producción",
                        url: createPageUrl("production/requests"),
                        icon: ListOrdered,
                    },
                ],
            },
        ]
    },

    {
        title: "Facturas de Venta",
        url: createPageUrl("SalesInvoices"),
        icon: FileCheck,
    },
    {
        title: "Facturas de Compra",
        url: createPageUrl("PurchaseInvoices"),
        icon: Receipt,
    },
    {
        title: "Proveedores",
        url: createPageUrl("suppliers"),
        icon: Store,
    },
    {
        title: "Módulo OC",
        icon: ClipboardList,
        submenu: [
            {
                title: "Maestros",
                icon: Settings,
                submenu: [
                    {
                        title: "Configuraciones OC",
                        url: createPageUrl("oc/configurations"),
                        icon: Settings,
                    },
                    {
                        title: "Indicadores Dashboard",
                        url: createPageUrl("oc/indicators"),
                        icon: BarChart3,
                    },
                    {
                        title: "Contratos",
                        url: createPageUrl("oc/contracts"),
                        icon: FileText,
                    },
                ],
            },
            {
                title: "Libro OC",
                icon: FileText,
                submenu: [
                    {
                        title: "Crear orden de compra",
                        url: createPageUrl("oc/book/purchase-order/create"),
                        icon: PlusCircle,
                    },
                    {
                        title: "Seguimiento Estado OC",
                        url: createPageUrl("oc/book/tracking"),
                        icon: FileText,
                    },
                    {
                        title: "Validación OC",
                        url: createPageUrl("oc/book/validation"),
                        icon: FileCheck,
                    },
                    {
                        title: "Ordenes de Compra Pendientes",
                        url: createPageUrl("oc/book/pending-orders"),
                        icon: RefreshCw,
                    },
                    {
                        title: "Respuestas de Acuse",
                        url: createPageUrl("oc/book/commercial-ack"),
                        icon: FileText,
                    },
                    {
                        title: "Bitácora",
                        url: createPageUrl("oc/book/bitacora"),
                        icon: History,
                    },
                ],
            },
            {
                title: "Panel de Control",
                icon: PieChart,
                submenu: [
                    {
                        title: "Control de Diferencias",
                        url: createPageUrl("oc/panel/control-differences"),
                        icon: Scale,
                    },
                ],
            },
            {
                title: "Inventario Sectorizado",
                icon: Boxes,
                submenu: [
                    {
                        title: "Autorización a Inv. Sectorizado",
                        url: createPageUrl("oc/sectorized/authorization"),
                        icon: Settings,
                    },
                    {
                        title: "Inventario Sectorizado",
                        url: createPageUrl("oc/sectorized/panel"),
                        icon: Boxes,
                    },
                ],
            },
        ],
    },
    {
        title: "WMS",
        icon: Package,
        submenu: [
            {
                title: "Picking",
                url: createPageUrl("Picking"),
                icon: Package,
            },
            {
                title: "Despacho de Pedidos",
                url: createPageUrl("OrderDispatch"),
                icon: Truck,
            },
            {
                title: "Seguimiento",
                url: createPageUrl("OrderTracking"),
                icon: MapPin,
            },
            {
                title: "Config. Embalaje",
                url: createPageUrl("PackagingConfig"),
                icon: Settings,
            },
        ]
    },
    {
        title: "Transacciones",
        url: createPageUrl("Transactions"),
        icon: Receipt,
    },
    {
        title: "Libro Mayor",
        url: createPageUrl("Ledger"),
        icon: FileText,
    },
    {
        title: "Reportes",
        url: createPageUrl("Reports"),
        icon: FileText,
    },
    {
        title: "Planes de Suscripción",
        url: createPageUrl("SubscriptionPlans"),
        icon: Package,
    },
    {
        title: "Clientes",
        icon: Users,
        submenu: [
            {
                title: "Lista de Clientes",
                url: createPageUrl("Customers"),
                icon: Users,
            },
            {
                title: "Puntos y Canje",
                url: createPageUrl("CustomerPoints"),
                icon: Star,
            },
            {
                title: "Segmentación",
                url: createPageUrl("CustomerSegmentation"),
                icon: PieChart,
            },
            {
                title: "Historial",
                url: createPageUrl("CustomerHistory"),
                icon: History,
            },
            {
                title: "Condiciones Afiliación",
                url: createPageUrl("AffiliationConditions"),
                icon: Settings,
            },
            {
                title: "Categorías",
                icon: Award,
                submenu: [
                    {
                        title: "Configuración",
                        url: createPageUrl("CategoryConfiguration"),
                        icon: Settings,
                    },
                    {
                        title: "Bitácora de Actualizaciones",
                        url: createPageUrl("CategoryUpdateLog"),
                        icon: History,
                    },
                ]
            },
        ]
    },
    {
        title: "Suscripciones",
        url: createPageUrl("Subscriptions"),
        icon: RefreshCw,
    },
    {
        title: "Facturas Recurrentes",
        url: createPageUrl("RecurringInvoices"),
        icon: FileCheck,
    },
    {
        title: "Métodos de Pago",
        url: createPageUrl("PaymentMethods"),
        icon: CreditCard,
    },
    {
        title: "Transportes",
        url: createPageUrl("ShippingCompanies"),
        icon: Truck,
    },
    {
        title: "Red Comercial",
        icon: Users,
        submenu: [
            {
                title: "Miembros de la Red",
                url: createPageUrl("NetworkMembers"),
                icon: Users,
            },
            {
                title: "Categorías por Mes",
                url: createPageUrl("NetworkCategories"),
                icon: Award,
            },
        ]
    },
    {
        title: "Integraciones",
        icon: Globe,
        submenu: [
            {
                title: "Transbank Cloud to Cloud",
                url: createPageUrl("TransbankCloudToCloud"),
                icon: Globe,
            },
            {
                title: "Transbank POS Integrado",
                url: createPageUrl("transbank-pos-integrado"),
                icon: CreditCard,
            },
            {
                title: "Transbank POS Bluetooth",
                url: createPageUrl("transbank-bluetooth"),
                icon: Bluetooth,
            },
            {
                title: "Softnet",
                url: createPageUrl("Softnet"),
                icon: Settings,
            },
            {
                title: "Transportes",
                url: createPageUrl("TransportIntegrations"),
                icon: Truck,
            },
        ]
    },
    {
        title: "Call Center",
        url: createPanelPageUrl("CallCenter"),
        icon: Headphones,
    },
    {
        title: "Configuración",
        url: createPageUrl("Settings"),
        icon: Settings,
    },
    {
        title: "Vistas por Rol",
        url: createPageUrl("RoleViewsAdmin"),
        icon: Shield,
        superadminOnly: true,
    },
];

const isSuperAdminFromUser = (user) => {
    const iduserType = Number(user?.iduser_type ?? user?.iduserType ?? 0);
    if (iduserType === 1) {
        return true;
    }

    const roleRaw = typeof user?.role === "string" ? user.role : "";
    const typeRaw = typeof user?.type === "string" ? user.type : "";
    const roleValue = `${roleRaw} ${typeRaw}`.toLowerCase();
    return roleValue.includes("super");
};

export default function Layout({ children, currentPageName: _currentPageName }) {
    const pathname = usePathname();
    const { user: authUser, hasDynamicViews, viewsConfig, logout } = useAuth();
    const [user, setUser] = useState(null);
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const [openSubmenus, setOpenSubmenus] = useState([]);
    const { selectedCompany, selectCompany, saveCompanies } = useCompanyStore();

    useEffect(() => {
        loadData();
    }, []);

    useEffect(() => {
        setUser(authUser || null);
    }, [authUser]);

    const isSuperAdmin = isSuperAdminFromUser(authUser);

    const capabilities = viewsConfig?.capabilities || null;
    const dynamicViewsReady =
        Boolean(hasDynamicViews) && Boolean(capabilities) && Object.keys(capabilities).length > 0;
    const visibleNavigationItems = useMemo(
        () =>
            filterNavigationByCapabilities(
                navigationItems,
                capabilities,
                dynamicViewsReady,
                isSuperAdmin,
            ),
        [capabilities, dynamicViewsReady, isSuperAdmin],
    );

    const loadData = async () => {
        try {
            const response = await API.get("/company");
            const companiesData = response?.data?.data?.detail || [];
            saveCompanies(companiesData);
            
            // Set first company as selected if none selected
            if (companiesData.length > 0 && !selectedCompany) {
                selectCompany(companiesData[0]);
            }
        } catch (error) {
            console.error("Error loading data:", error);
        }
    };

    return (
        <div className="h-screen overflow-hidden flex flex-col bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 no-print">
            <style>{`
                :root {
                    --primary-navy: #1e293b;
                    --primary-blue: #3b82f6;
                    --accent-gold: #f59e0b;
                    --glass-bg: rgba(255, 255, 255, 0.85);
                    --glass-border: rgba(255, 255, 255, 0.2);
                }
                .glass-card {
                    background: var(--glass-bg);
                    backdrop-filter: blur(20px);
                    border: 1px solid var(--glass-border);
                    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
                }
                .premium-gradient {
                    background: linear-gradient(135deg, var(--primary-navy) 0%, #334155 50%, var(--primary-blue) 100%);
                }
                .text-gradient {
                    background: linear-gradient(135deg, var(--primary-navy), var(--primary-blue));
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                }
                @media print {
                  .no-print {
                    display: none !important;
                  }
                  .printable-area {
                    display: block !important;
                  }
                  body {
                    background-color: #fff !important;
                  }
                }
            `}</style>

            {/* Mobile Header */}
            <div className="lg:hidden bg-white/90 backdrop-blur-lg border-b border-white/20 px-4 py-3 sticky top-0 z-50">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <Button
                            variant="ghost"
                            size="icon"
                            onClick={() => setSidebarOpen(!sidebarOpen)}
                            className="lg:hidden"
                        >
                            {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
                        </Button>
                        <div className="flex items-center gap-2">
                            <div className="w-8 h-8 premium-gradient rounded-lg flex items-center justify-center">
                                <Globe className="w-4 h-4 text-white" />
                            </div>
                            <span className="font-semibold text-gradient">ContaPro</span>
                        </div>
                    </div>
                    {selectedCompany && (
                        <div className="flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200">
                            <Building2 className="w-4 h-4 text-blue-600" />
                            <span className="text-sm font-medium text-blue-900">{selectedCompany.name}</span>
                        </div>
                    )}
                </div>
            </div>

            <div className="flex flex-1 min-h-0">
                {/* Sidebar */}
                <div className={`${
                    sidebarOpen ? 'translate-x-0' : '-translate-x-full'
                } lg:translate-x-0 fixed lg:static inset-y-0 left-0 w-72 glass-card border-r border-white/20 transition-transform duration-300 ease-in-out z-40 flex flex-col`}>
                    
                    {/* Logo */}
                    <div className="p-6 border-b border-white/10">
                        <div className="flex items-center gap-4">
                            <div className="flex items-center justify-center overflow-hidden"> 
                                <img 
                                    src="/images/logo_perfume.png" 
                                    alt="Logo ContaPro Perfume"
                                    className="w-16 h-auto object-contain"
                                />
                            </div>
                            <div>
                                <h2 className="text-xl font-bold text-gradient">Parfums D' Parfums</h2>
                                <p className="text-xs text-slate-500">La esencia de la elegancia</p>
                            </div>
                        </div>
                    </div>

                    {/* Navigation */}
                    <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
                        {visibleNavigationItems.map((item) => (
                            item.submenu ? (
                                <div key={item.title}>
                                    <button
                                        onClick={() => {
                                            setOpenSubmenus(prev => 
                                                prev.includes(item.title) 
                                                    ? prev.filter(m => m !== item.title)
                                                    : [...prev, item.title]
                                            );
                                        }}
                                        className="w-full flex items-center justify-between gap-3 px-4 py-3 rounded-xl transition-all duration-200 hover:bg-white/30 text-slate-700"
                                    >
                                        <div className="flex items-center gap-3">
                                            <item.icon className="w-5 h-5" />
                                            <span className="font-medium">{item.title}</span>
                                        </div>
                                        {openSubmenus.includes(item.title) ? (
                                            <ChevronDown className="w-4 h-4" />
                                        ) : (
                                            <ChevronRight className="w-4 h-4" />
                                        )}
                                    </button>
                                    {openSubmenus.includes(item.title) && (
                                        <div className="ml-4 mt-1 space-y-1">
                                            {item.submenu.map((subitem) => (
                                                subitem.submenu ? (
                                                    <div key={subitem.title}>
                                                        <button
                                                            onClick={() => {
                                                                const key = `${item.title}-${subitem.title}`;
                                                                setOpenSubmenus(prev => 
                                                                    prev.includes(key) 
                                                                        ? prev.filter(m => m !== key)
                                                                        : [...prev, key]
                                                                );
                                                            }}
                                                            className="w-full flex items-center justify-between gap-3 px-4 py-2 rounded-lg transition-all duration-200 hover:bg-white/20 text-slate-600"
                                                        >
                                                            <div className="flex items-center gap-3">
                                                                <subitem.icon className="w-4 h-4" />
                                                                <span className="text-sm font-medium">{subitem.title}</span>
                                                            </div>
                                                            {openSubmenus.includes(`${item.title}-${subitem.title}`) ? (
                                                                <ChevronDown className="w-3 h-3" />
                                                            ) : (
                                                                <ChevronRight className="w-3 h-3" />
                                                            )}
                                                        </button>
                                                        {openSubmenus.includes(`${item.title}-${subitem.title}`) && (
                                                            <div className="ml-4 mt-1 space-y-1">
                                                                {subitem.submenu.map((nestedItem) => (
                                                                    <Link
                                                                        key={nestedItem.title}
                                                                        href={nestedItem.url}
                                                                        onClick={() => setSidebarOpen(false)}
                                                                        className={`flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all duration-200 ${
                                                                            normalizePath(pathname) === normalizePath(nestedItem.url)
                                                                                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/25'
                                                                                : 'hover:bg-white/20 text-slate-600'
                                                                        }`}
                                                                    >
                                                                        <nestedItem.icon className="w-3 h-3" />
                                                                        <span className="text-xs font-medium">{nestedItem.title}</span>
                                                                    </Link>
                                                                ))}
                                                            </div>
                                                        )}
                                                    </div>
                                                ) : (
                                                    <Link
                                                        key={subitem.title}
                                                        href={subitem.url}
                                                        onClick={() => setSidebarOpen(false)}
                                                        className={`flex items-center gap-3 px-4 py-2 rounded-lg transition-all duration-200 ${
                                                            normalizePath(pathname) === normalizePath(subitem.url)
                                                                ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/25'
                                                                : 'hover:bg-white/20 text-slate-600'
                                                        }`}
                                                    >
                                                        <subitem.icon className="w-4 h-4" />
                                                        <span className="text-sm font-medium">{subitem.title}</span>
                                                    </Link>
                                                )
                                            ))}
                                        </div>
                                    )}
                                </div>
                            ) : (
                                <Link
                                    key={item.title}
                                    href={item.url}
                                    onClick={() => setSidebarOpen(false)}
                                    className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 ${
                                        normalizePath(pathname) === normalizePath(item.url)
                                            ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg shadow-blue-500/25'
                                            : 'hover:bg-white/30 text-slate-700'
                                    }`}
                                >
                                    <item.icon className="w-5 h-5" />
                                    <span className="font-medium">{item.title}</span>
                                </Link>
                            )
                        ))}
                    </nav>

                    {/* User Profile */}
                    <div className="p-4 border-t border-white/10">
                        <div className="flex items-center gap-3 px-4 py-3 rounded-xl bg-white/20">
                            <Avatar className="w-8 h-8">
                                <AvatarFallback className="bg-blue-500 text-white text-sm">
                                    {user?.full_name?.charAt(0) || 'U'}
                                </AvatarFallback>
                            </Avatar>
                            <div className="flex-1 min-w-0">
                                <p className="text-sm font-medium text-slate-800 truncate">
                                    {user?.full_name || 'Usuario'}
                                </p>
                                <p className="text-xs text-slate-500 truncate">{user?.email}</p>
                            </div>
                        </div>
                        <Button
                            variant="outline"
                            className="w-full mt-3 bg-white/40 border-white/40 hover:bg-white/60"
                            onClick={() => logout(true)}
                        >
                            <LogOut className="w-4 h-4 mr-2" />
                            Cerrar sesión
                        </Button>
                    </div>
                </div>

                {/* Overlay */}
                {sidebarOpen && (
                    <div
                        className="fixed inset-0 bg-black/20 lg:hidden z-30"
                        onClick={() => setSidebarOpen(false)}
                    />
                )}

                {/* Main Content */}
                <div className="flex-1 min-w-0">
                    <main className="h-full overflow-auto">
                        {children}
                    </main>
                </div>
            </div>
        </div>
    );
}