AdminMenu

() => {
  const { useState } = React;

  const initialItems = [
    {
      id: 'client-list',
      label: 'Client List',
      icon: <DotPoints />,
      path: '/client-list',
      description: 'View and manage all client accounts',
    },
    {
      id: 'client-management',
      label: 'Client Management',
      icon: <Settings3 />,
      path: '/client-management',
      description: 'Configure client settings and preferences',
    },
    {
      id: 'finance-international',
      label: 'Finance & International',
      icon: <PiggyBank2 />,
      path: '/finance-international',
      description: 'Manage budgets and finances',
    },
    {
      id: 'admin-management',
      label: 'Admin Management',
      icon: <UserCircle />,
      path: '/admin-management',
      description: 'Manage users and permissions',
    },
    {
      id: 'redemption',
      label: 'Redemption & Catalog',
      icon: <ShoppingCart />,
      path: '/redemption',
      description: 'Redeem and browse catalog',
    },
    {
      id: 'program',
      label: 'Recognition Programs',
      icon: <Tools />,
      path: '/programs',
      description: 'Configure programs',
    },
    {
      id: 'reporting-analytics',
      label: 'Reporting & Analytics',
      icon: <BarChart2 />,
      description: 'Access reports, dashboards, and analytics',
      children: [
        { 
          id: 'dashboards', 
          label: 'Dashboards', 
          path: '/reporting-analytics/dashboards',
          description: 'View interactive dashboards',
        },
        { 
          id: 'reporting', 
          label: 'Reporting', 
          path: '/reporting-analytics/reporting',
          description: 'Generate and customize reports',
          children: [
            {
              id: 'bank-accounts',
              label: 'Bank Accounts',
              path: '/reporting-analytics/reporting/accounts',
              description: 'Manage bank accounts',
            },
            {
              id: 'payment-methods',
              label: 'Payment Methods',
              path: '/reporting-analytics/reporting/payment-methods',
              description: 'Set up payment methods',
            },
            {
              id: 'transaction-history',
              label: 'Transaction History',
              path: '/reporting-analytics/reporting/transactions',
              description: 'View transaction history',
            }
          ]
        },
        { 
          id: 'account-details', 
          label: 'Account Details', 
          path: '/reporting-analytics/account-details',
          description: 'Monitor account information',
        },
      ],
    },
    {
      id: 'integrations',
      label: 'App Integrations',
      icon: <GitBranch />,
      path: '/integrations',
      description: 'Connect integrations',
    },
    {
      id: 'security',
      label: 'Security & Compliance',
      icon: <Shield />,
      path: '/security',
      description: 'Security settings',
    },
    {
      id: 'system-settings',
      label: 'System Settings',
      icon: <Settings1 />,
      path: '/system-settings',
      description: 'System configuration',
    },
  ];

  const [activeId, setActiveId] = useState('client-list');
  const [favoriteIds, setFavoriteIds] = useState(['dashboards', 'transaction-history']);

  const handleNavigate = (path, id) => {
    setActiveId(id);
  };

  const handleToggleFavorite = (id, isFavorite) => {
    if (!isFavorite) {
      setFavoriteIds(prev => [...prev, id]);
      console.log('added to favorites');
    } else {
      setFavoriteIds(prev => prev.filter(favId => favId !== id));
      console.log('removed from favorites');
    }
  };

  return (
    <Box sx={{ width: 256, outline: '1px solid #E1E1EB', outlineOffset: '2px' }}>
      <AdminMenu
        items={initialItems}
        activeId={activeId}
        onNavigate={handleNavigate}
        favoriteIds={favoriteIds}
        onToggleFavorite={handleToggleFavorite}
        maxDepth={2}
      />
    </Box>
  );
}

() => {
  const { useState } = React;

  // Simple icons for demo
  const Folder = () => <span style={{fontWeight: 700, fontSize: 18}}>📁</span>;
  const File = () => <span style={{fontWeight: 700, fontSize: 18}}>📄</span>;

  const items = [
    {
      id: 'root',
      label: 'Root',
      icon: <Folder />,
      description: 'Root folder',
      children: [
        {
          id: 'level-1a',
          label: 'Level 1A',
          icon: <Folder />,
          description: 'First child',
          children: [
            {
              id: 'level-2a',
              label: 'Level 2A',
              icon: <Folder />,
              description: 'Second level',
              children: [
                {
                  id: 'level-3a',
                  label: 'Level 3A',
                  icon: <File />,
                  description: 'Third level file',
                },
                {
                  id: 'level-3b',
                  label: 'Level 3B',
                  icon: <File />,
                  description: 'Another file',
                }
              ]
            },
            {
              id: 'level-2b',
              label: 'Level 2B',
              icon: <File />,
              description: 'Second level file',
            }
          ]
        },
        {
          id: 'level-1b',
          label: 'Level 1B',
          icon: <Folder />,
          description: 'Another first child',
          children: [
            {
              id: 'level-2c',
              label: 'Level 2C',
              icon: <File />,
              description: 'Second level file',
            }
          ]
        }
      ]
    },
    {
      id: 'standalone',
      label: 'Standalone',
      icon: <File />,
      description: 'No children',
    }
  ];

  const [activeId, setActiveId] = useState('level-3a');
  const [favoriteIds, setFavoriteIds] = useState(['standalone']);

  return (
    <div style={{ width: 320, border: '1px solid #E1E1EB', borderRadius: 8 }}>
      <AdminMenu
        items={items}
        activeId={activeId}
        onNavigate={(_, id) => setActiveId(id)}
        favoriteIds={favoriteIds}
        onToggleFavorite={(id, isFav) =>
          setFavoriteIds(favs =>
            isFav ? favs.filter(f => f !== id) : [...favs, id]
          )
        }
        maxDepth={2}
        itemsExpanded={['root', 'level-1a', 'level-2a']}
      />
    </div>
  );
}