import { Icon } from "@iconify/react";
import {
  ChevronRight,
  ExpandLess,
  ExpandMore,
  Menu as MenuIcon,
} from "@mui/icons-material";
import {
  Box,
  Button,
  CircularProgress,
  Collapse,
  Divider,
  Drawer,
  IconButton,
  List,
  ListItemButton,
  ListItemIcon,
  ListItemText,
  Paper,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useEffect, useMemo, useState } from "react";
import { useSearchParams } from "react-router-dom";
import styled from "styled-components";
import { MonedasConfigTab } from "../components/configuracion/MonedasConfigTab";
import { PagosConfigTab } from "../components/configuracion/PagosConfigTab";
import { PlanesCuotasTab } from "../components/configuracion/PlanesCuotasTab";
import PosConfigTab from "../components/configuracion/PosConfigTab";
import ComprasConfigTab from "../components/configuracion/ComprasConfigTab";
import ImportacionesConfigTab from "../components/configuracion/ImportacionesConfigTab";
import { RubrosListConfig } from "../components/organismos/RubrosDesign/RubrosListConfig";
import { EmpresaConfigTab } from "../components/organismos/EmpresaConfigDesign/EmpresaConfigTab";
import { EmpresasListConfig } from "../components/organismos/EmpresaConfigDesign/EmpresasListConfig";
import { OnboardingDashboard } from "../components/organismos/EmpresaConfigDesign/OnboardingDashboard";
import { SuscripcionConfig } from "../components/organismos/EmpresaConfigDesign/SuscripcionConfig";
import SeguridadPerfiles from "./SeguridadPerfiles";
import { UsuariosListConfig } from "../components/organismos/UsuariosDesign/UsuariosListConfig";
// import { VendedoresCobradoresModule } from "../components/organismos/VendedoresCobradoresDesign/VendedoresCobradoresModule"; // Movido a Contactos
import { ConfigMora } from "./ConfigMora";
import { ConfigIntereses } from "./ConfigIntereses";
import { TesCuentasConfigSection } from "../components/tesoreria/config/TesCuentasConfigSection";
import { TesCategoriaConfigSection } from "../components/tesoreria/config/TesCategoriaConfigSection";
import { TesBancosConfigSection } from "../components/tesoreria/config/TesBancosConfigSection";
import { TesParametrosConfigSection } from "../components/tesoreria/config/TesParametrosConfigSection";
import { TesReglasConfigSection } from "../components/tesoreria/config/TesReglasConfigSection";
import { BancardConfigPanel } from "../components/bancard/BancardConfigPanel";
import { OrdenesVentaConfigTab } from "../components/configuracion/OrdenesVentaConfigTab";
import { PresupuestosConfigTab } from "../components/configuracion/PresupuestosConfigTab";
import { SucursalesCajasTemplate } from "../components/templates/SucursalesCajasTemplate";
import { PreciosConfig } from "../index";
import { useAuthStore } from "../store/AuthStore";
import { useMisSubmodulosActivosQuery } from "../hooks/useSubmodulo";

const MENU_WIDTH = 280;

const menuCategories = [
  {
    id: "inicio",
    label: "Inicio",
    icon: "lucide:layout-dashboard",
    items: null,
  },
  {
    id: "empresa",
    label: "Empresa",
    icon: "lucide:building-2",
    items: [
      {
        id: "datos-empresa",
        label: "Datos de la Empresa",
        icon: "lucide:building-2",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_EMPRESAS",
        permission: "ADM_EMP_EMPRESA_VER",
      },
      {
        id: "empresas-asociadas",
        label: "Empresas Asociadas",
        icon: "lucide:store",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_EMPRESA_ASOCIADA",
      },

      {
        id: "rubros",
        label: "Rubros",
        icon: "lucide:layers",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_RUBROS",
        permission: "ADM_RUB_RUBRO_VER",
      },
      {
        id: "suscripcion",
        label: "Suscripción",
        icon: "lucide:credit-card",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_MI_SUSCRIPCION",
      } /*
      {
        id: "configuracion-precios",
        label: "Configuración de Precios",
        icon: "lucide:tag",
        modulo: "LISTA_PRECIOS",
      }*/,
    ],
  },
  {
    id: "puntos-venta",
    label: "Puntos de Venta",
    icon: "lucide:monitor",
    items: [
      {
        id: "sucursales-cajas",
        label: "Sucursales y Cajas",
        icon: "lucide:warehouse",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_SUCURSALES",
      },
      {
        id: "pos-config",
        label: "Configuración POS",
        icon: "lucide:settings-2",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_CONFIG_POS",
      } /*
      {
        id: "impresoras",
        label: "Impresoras",
        icon: "lucide:printer",
        modulo: "CONFIG_IMPRESORAS",
        disabled: true,
      },
      {
        id: "ticket",
        label: "Diseño de Ticket",
        icon: "lucide:receipt",
        disabled: true,
      },*/,
    ],
  },
  {
    id: "usuarios-permisos",
    label: "Usuarios y Permisos",
    icon: "lucide:users",
    items: [
      {
        id: "usuarios",
        label: "Usuarios",
        icon: "lucide:user",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_USUARIOS",
        permission: "ADM_USR_USUARIO_VER",
      },
      {
        id: "perfiles",
        label: "Perfiles y Roles",
        icon: "lucide:shield",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_PERFILES",
        permission: "ADM_PER_PERFIL_VER",
      },
      // Movido al módulo Contactos → pestaña "Vendedores y Cobradores"
      // {
      //   id: "vendedores",
      //   label: "Vendedores y Cobradores",
      //   icon: "lucide:user-check",
      //   modulo: "VENDEDORES",
      // },
    ],
  },
  {
    id: "facturacion",
    label: "Facturación",
    icon: "lucide:file-text",
    items: [
      {
        id: "monedas",
        label: "Monedas",
        icon: "lucide:coins",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_MONEDA_COTIZACION",
      },
      {
        id: "metodos-pago",
        label: "Métodos de Pago",
        icon: "lucide:wallet",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_MEDIOS_PAGO",
      },
      {
        id: "config-compras",
        label: "Configuración de Compras",
        icon: "lucide:shopping-cart",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_COMPRAS_CFG",
      },
      {
        id: "planes-cuotas",
        label: "Planes de Cuotas Automáticos",
        icon: "lucide:calculator",
        modulo: "VENTAS",
        submodulo: "VENTA_PLANES_CUOTAS",
      },
    ],
  },
  {
    id: "cobranzas",
    label: "Cobranzas",
    icon: "lucide:landmark",
    items: [
      {
        id: "config-mora",
        label: "Configuración de Mora",
        icon: "lucide:percent-circle",
        // Requiere tanto el submodulo de Administración (acceso a la pantalla)
        // como el submodulo operativo de Cobranzas (Mora Avanzada). Si no tiene
        // el operativo, no tiene sentido configurar la mora.
        modulo: "ADMINISTRACION",
        submodulo: "ADM_INTERES_MORA",
        submoduloOperativo: "COB_GMR",
        moduloOperativo: "COBRANZAS",
      },
      {
        id: "config-intereses",
        label: "Intereses moratorios (fiscal)",
        icon: "lucide:receipt",
        modulo: "COBRANZAS",
        submodulo: "COB_INTERESES_MORATORIOS",
        permission: "COB_INT_CONFIG_VER",
      },
    ],
  },
  {
    id: "ordenes-venta",
    label: "Órdenes de Venta",
    icon: "lucide:clipboard-check",
    items: [
      {
        id: "ordenes-venta-config",
        label: "Configuración Global",
        icon: "lucide:settings-2",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_ORDEN_VENTA_CFG",
      },
    ],
  },
  {
    id: "presupuestos",
    label: "Presupuestos",
    icon: "lucide:scroll-text",
    items: [
      {
        id: "presupuestos-config",
        label: "Configuración Global",
        icon: "lucide:settings-2",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_PRESUPUESTOS_CFG",
      },
    ],
  },
  {
    id: "importaciones",
    label: "Importaciones",
    icon: "lucide:ship",
    items: [
      {
        id: "imp-config",
        label: "Configuración del módulo",
        icon: "lucide:settings-2",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_IMPORTACIONES_CFG",
      },
    ],
  },
  {
    id: "tesoreria",
    label: "Tesorería y Bancos",
    icon: "lucide:vault",
    items: [
      {
        id: "tes-cuentas-config",
        label: "Cuentas de Tesorería",
        icon: "lucide:wallet",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_TESORERIA_CFG",
      },
      {
        id: "tes-categorias-config",
        label: "Categorías de Movimiento",
        icon: "lucide:tag",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_TESORERIA_CFG",
      },
      {
        id: "tes-bancos-config",
        label: "Bancos",
        icon: "lucide:building-2",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_BANCOS",
      },
      {
        id: "tes-parametros-config",
        label: "Parámetros de Tesorería",
        icon: "lucide:settings-2",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_TESORERIA_CFG",
      },
      {
        id: "tes-reglas-config",
        label: "Reglas Automáticas",
        icon: "lucide:zap",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_REGLAS_AUTO",
      },
      {
        id: "bancard-config",
        label: "Bancard VPOS",
        icon: "mdi:credit-card-settings-outline",
        modulo: "ADMINISTRACION",
        submodulo: "ADM_BANCARD_VPOS",
      },
    ],
  },
  // NovaIA (Ayuda IA) se administra ahora desde Suscripciones → Consumo IA (holding).
];

export const ConfiguracionNew = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
  const { hasModule, hasPermission, empresa } = useAuthStore();
  const esHolding = empresa?.type === "holding";
  const { data: submodulosActivos, isLoading: cargandoSubmodulos } = useMisSubmodulosActivosQuery();
  const submodulosSet = useMemo(
    () => new Set((submodulosActivos ?? []).map((s) => s.codigo)),
    [submodulosActivos],
  );
  const [mobileOpen, setMobileOpen] = useState(false);
  const [searchParams, setSearchParams] = useSearchParams();
  const selectedItem = searchParams.get("seccion") ?? "inicio";
  const setSelectedItem = (id) => setSearchParams({ seccion: id }, { replace: true });
  const [previousItem, setPreviousItem] = useState(null);

  const canShowItem = (item) => {
    if (item.holdingOnly && !esHolding) return false;
    if (!item.modulo) return true;
    if (!hasModule(item.modulo)) return false;
    if (item.submodulo && !submodulosSet.has(item.submodulo)) return false;
    if (item.permission && !hasPermission(item.modulo, item.permission)) return false;
    // Verificación operativa: si la pantalla configura un módulo de otra área
    // (ej. config de mora gatillado por COBRANZAS), exigir que la empresa tenga
    // ese módulo/submódulo activo. Sin él, configurar es inútil.
    if (item.moduloOperativo && !hasModule(item.moduloOperativo)) return false;
    if (item.submoduloOperativo && !submodulosSet.has(item.submoduloOperativo)) return false;
    return true;
  };

  const canShowCategory = (category) => {
    if (!category.items) return true;
    return category.items.some(canShowItem);
  };
  const [expandedCategories, setExpandedCategories] = useState([
    "empresa",
    "puntos-venta",
    "usuarios-permisos",
    "facturacion",
    "cobranzas",
    "ordenes-venta",
    "presupuestos",
    "importaciones",
    "tesoreria",
    "asistente-ia",
  ]);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  const handleCategoryToggle = (categoryId) => {
    setExpandedCategories((prev) => (prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId]));
  };

  const handleItemSelect = (itemId) => {
    setPreviousItem(null);
    setSelectedItem(itemId);
    if (isMobile) {
      setMobileOpen(false);
    }
  };

  const navigateToSection = (sectionId, options = {}) => {
    const category = menuCategories.find((cat) =>
      cat.items?.some((item) => item.id === sectionId),
    );
    const item = category?.items?.find((i) => i.id === sectionId);
    if (item && !canShowItem(item)) return;
    if (options.remember) {
      setPreviousItem(selectedItem);
    } else {
      setPreviousItem(null);
    }
    setSelectedItem(sectionId);
    if (category && !expandedCategories.includes(category.id)) {
      setExpandedCategories((prev) => [...prev, category.id]);
    }
  };

  const handleVolver = () => {
    if (!previousItem) return;
    setSelectedItem(previousItem);
    setPreviousItem(null);
  };

  useEffect(() => {
    const handler = (event) => {
      const sectionId = event?.detail?.sectionId;
      if (sectionId) navigateToSection(sectionId, { remember: true });
    };
    window.addEventListener("configuracion:navigate", handler);
    return () => window.removeEventListener("configuracion:navigate", handler);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedItem]);

  const allItems = menuCategories.flatMap((c) => c.items ?? [{ id: c.id }]);
  const currentItem = allItems.find((i) => i.id === selectedItem);

  const previousLabel = useMemo(() => {
    if (!previousItem) return "";
    if (previousItem === "inicio") return "Inicio";
    for (const category of menuCategories) {
      const item = category.items?.find((i) => i.id === previousItem);
      if (item) return item.label;
    }
    return "";
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [previousItem]);

  const renderBackButton = () =>
    previousItem ? (
      <Box sx={{ mb: 1.5 }}>
        <Button
          variant="outlined"
          size="small"
          startIcon={<Icon icon="mdi:arrow-left" />}
          onClick={handleVolver}
        >
          Volver{previousLabel ? ` a ${previousLabel}` : ""}
        </Button>
      </Box>
    ) : null;

  const renderContent = () => {
    // Mientras llegan los submódulos activos, una sección que depende de uno
    // no se puede evaluar todavía: se espera en lugar de mostrar "Acceso restringido".
    if (currentItem?.submodulo && cargandoSubmodulos) {
      return (
        <Box sx={{ display: "flex", justifyContent: "center", py: 6 }}>
          <CircularProgress size={28} />
        </Box>
      );
    }
    if (currentItem && !canShowItem(currentItem)) {
      return (
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            height: "100%",
            gap: 2,
            color: "text.secondary",
          }}
        >
          <Icon icon="lucide:lock" style={{ fontSize: 48, opacity: 0.4 }} />
          <Typography variant="h6">Acceso restringido</Typography>
          <Typography variant="body2">No tienes permisos para acceder a esta sección.</Typography>
        </Box>
      );
    }
    switch (selectedItem) {
      case "inicio":
        return <OnboardingDashboard onNavigateToTab={navigateToSection} canShowSection={canShowItem} />;
      case "datos-empresa":
        return <EmpresaConfigTab />;
      case "empresas-asociadas":
        return <EmpresasListConfig />;
      case "rubros":
        return <RubrosListConfig />;
      case "suscripcion":
        return <SuscripcionConfig />;
      case "configuracion-precios":
        return <PreciosConfig />;
      case "sucursales-cajas":
        return <SucursalesCajasTemplate />;
      case "pos-config":
        return <PosConfigTab />;
      case "impresoras":
        return <ComingSoon icon={<Icon icon="lucide:printer" style={{ fontSize: 64 }} />} text="Módulo de Impresoras próximamente" />;
      case "ticket":
        return <ComingSoon icon={<Icon icon="lucide:receipt" style={{ fontSize: 64 }} />} text="Módulo de Ticket próximamente" />;
      case "usuarios":
        return <UsuariosListConfig />;
      case "perfiles":
        return <SeguridadPerfiles />;
      // case "vendedores": return <VendedoresCobradoresModule />; // Movido a Contactos
      case "monedas":
        return <MonedasConfigTab />;
      case "metodos-pago":
        return <PagosConfigTab />;
      case "config-compras":
        return <ComprasConfigTab />;
      case "planes-cuotas":
        return <PlanesCuotasTab />;
      case "config-mora":
        return <ConfigMora />;
      case "config-intereses":
        return <ConfigIntereses />;
      case "imp-config":
        return <ImportacionesConfigTab />;
      case "tes-cuentas-config":
        return <TesCuentasConfigSection />;
      case "tes-categorias-config":
        return <TesCategoriaConfigSection />;
      case "tes-bancos-config":
        return <TesBancosConfigSection />;
      case "tes-parametros-config":
        return <TesParametrosConfigSection />;
      case "tes-reglas-config":
        return <TesReglasConfigSection />;
      case "bancard-config":
        return <BancardConfigPanel />;
      case "ordenes-venta-config":
        return <OrdenesVentaConfigTab />;
      case "presupuestos-config":
        return <PresupuestosConfigTab />;
      default:
        return <OnboardingDashboard onNavigateToTab={navigateToSection} />;
    }
  };

  const getSelectedLabel = () => {
    if (selectedItem === "inicio") return "Inicio";
    for (const category of menuCategories) {
      if (category.items) {
        const item = category.items.find((i) => i.id === selectedItem);
        if (item) return item.label;
      }
    }
    return "Configuración";
  };

  const getSelectedCategory = () => {
    for (const category of menuCategories) {
      if (category.items?.some((i) => i.id === selectedItem)) {
        return category.label;
      }
    }
    return null;
  };

  const menuContent = (
    <MenuContainer>
      <MenuHeader>
        <Icon
          icon="lucide:settings"
          style={{
            marginRight: 8,
            color: theme.palette.primary.main,
            fontSize: 24,
          }}
        />
        <Typography variant="h6" sx={{ fontWeight: 600 }}>
          Configuración
        </Typography>
      </MenuHeader>

      <List component="nav" sx={{ px: 1 }}>
        {menuCategories.filter(canShowCategory).map((category, index) => (
          <Box key={category.id}>
            {index > 0 && category.items && <Divider sx={{ my: 1.5, mx: 1, borderColor: theme.palette.divider }} />}
            {category.items ? (
              <>
                <CategoryButton onClick={() => handleCategoryToggle(category.id)}>
                  <ListItemIcon sx={{ minWidth: 40, color: "inherit" }}>
                    <Icon icon={category.icon} style={{ fontSize: 20 }} />
                  </ListItemIcon>
                  <ListItemText primary={category.label} primaryTypographyProps={{ fontWeight: 500 }} />
                  {expandedCategories.includes(category.id) ? <ExpandLess /> : <ExpandMore />}
                </CategoryButton>
                <Collapse in={expandedCategories.includes(category.id)} timeout="auto" unmountOnExit>
                  <List component="div" disablePadding>
                    {category.items.filter(canShowItem).map((item) => (
                      <SubItemButton key={item.id} selected={selectedItem === item.id} onClick={() => !item.disabled && handleItemSelect(item.id)} disabled={item.disabled}>
                        <ListItemIcon sx={{ minWidth: 36, color: "inherit" }}>
                          <Icon icon={item.icon} style={{ fontSize: 18 }} />
                        </ListItemIcon>
                        <ListItemText
                          primary={item.label}
                          primaryTypographyProps={{
                            fontSize: "0.875rem",
                            color: item.disabled ? "text.disabled" : "inherit",
                          }}
                        />
                        {selectedItem === item.id && <ChevronRight sx={{ fontSize: 18, opacity: 0.7 }} />}
                      </SubItemButton>
                    ))}
                  </List>
                </Collapse>
              </>
            ) : (
              <CategoryButton selected={selectedItem === category.id} onClick={() => handleItemSelect(category.id)}>
                <ListItemIcon sx={{ minWidth: 40, color: "inherit" }}>
                  <Icon icon={category.icon} style={{ fontSize: 20 }} />
                </ListItemIcon>
                <ListItemText primary={category.label} primaryTypographyProps={{ fontWeight: 500 }} />
                {selectedItem === category.id && <ChevronRight sx={{ fontSize: 18, opacity: 0.7 }} />}
              </CategoryButton>
            )}
          </Box>
        ))}
      </List>
    </MenuContainer>
  );

  return (
    <Container>

      {isMobile ? (
        <>
          <MobileHeader elevation={1}>
            <IconButton color="inherit" aria-label="abrir menú" edge="start" onClick={handleDrawerToggle} size="medium" title="Abrir menú de configuración">
              <MenuIcon />
            </IconButton>
            <Box sx={{ flex: 1, minWidth: 0 }}>
              {getSelectedCategory() && (
                <Typography
                  variant="caption"
                  sx={{
                    color: "text.secondary",
                    display: "block",
                    lineHeight: 1.2,
                  }}
                >
                  {getSelectedCategory()}
                </Typography>
              )}
              <Typography variant="subtitle1" noWrap sx={{ fontWeight: 600, lineHeight: 1.3 }}>
                {getSelectedLabel()}
              </Typography>
            </Box>
            <Icon icon="lucide:settings" style={{ fontSize: 18, opacity: 0.4, flexShrink: 0 }} />
          </MobileHeader>

          <Drawer
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            ModalProps={{ keepMounted: true }}
            sx={{
              "& .MuiDrawer-paper": {
                boxSizing: "border-box",
                width: MENU_WIDTH,
                backgroundColor: "background.paper",
              },
            }}
          >
            {menuContent}
          </Drawer>

          <MobileContent>
            {renderBackButton()}
            {renderContent()}
          </MobileContent>
        </>
      ) : (
        <DesktopLayout>
          <SideMenu>{menuContent}</SideMenu>
          <MainContent>
            <ContentBody>
              {renderBackButton()}
              {renderContent()}
            </ContentBody>
          </MainContent>
        </DesktopLayout>
      )}
    </Container>
  );
};

function ComingSoon({ icon, text }) {
  return (
    <Box
      sx={{
        p: 4,
        textAlign: "center",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
      }}
    >
      <Box sx={{ color: "text.disabled", mb: 2 }}>{icon}</Box>
      <Typography color="text.secondary">{text}</Typography>
    </Box>
  );
}

const Container = styled.div`
  height: calc(100vh - 80px);
  padding: 15px;

  @media (max-width: 900px) {
    height: calc(100vh - 0px);
    padding: 0;
    display: flex;
    flex-direction: column;
  }
`;

const DesktopLayout = styled.div`
  display: flex;
  height: 100%;
  gap: 16px;

  @media (max-width: 1024px) {
    gap: 10px;
  }
`;

const SideMenu = styled(Paper)`
  width: ${MENU_WIDTH}px;
  min-width: ${MENU_WIDTH}px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: ${({ theme }) => theme.bg2} !important;
  border: 1px solid ${({ theme }) => theme.bg4};
  color: ${({ theme }) => theme.text};
`;

const MenuContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
`;

const MenuHeader = styled.div`
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid ${({ theme }) => theme.bg4};
`;

const CategoryButton = styled(ListItemButton)`
  border-radius: 8px !important;
  margin: 4px 0 !important;

  &.Mui-selected {
    background-color: ${({ theme }) => theme.bg6} !important;
    color: ${({ theme }) => theme.primary};

    &:hover {
      background-color: ${({ theme }) => theme.bg6} !important;
    }
  }

  &:hover {
    background-color: ${({ theme }) => theme.bg3} !important;
  }
`;

const SubItemButton = styled(ListItemButton)`
  padding-left: 24px !important;
  border-radius: 8px !important;
  margin: 2px 0 !important;
  margin-left: 16px !important;

  &.Mui-selected {
    background-color: ${({ theme }) => theme.bg6} !important;
    color: ${({ theme }) => theme.primary};

    &:hover {
      background-color: ${({ theme }) => theme.bg6} !important;
    }
  }

  &:hover {
    background-color: ${({ theme }) => theme.bg3} !important;
  }

  &.Mui-disabled {
    opacity: 0.5;
  }
`;

const MainContent = styled(Paper)`
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
`;

const ContentBody = styled.div`
  flex: 1;
  padding: 16px;
  overflow-y: auto;
`;

const MobileHeader = styled(Paper)`
  display: flex;
  align-items: center;
  padding: 10px 12px 10px 52px;
  gap: 8px;
  border-radius: 0 !important;
  border-bottom: 1px solid ${({ theme }) => theme.bg4};
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 102;
`;

const MobileContent = styled(Paper)`
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  border-radius: 0 !important;
  min-height: 0;
`;