leocrm/frontend/src/components/layout/Sidebar.tsx

import React, { useState, useEffect, useMemo } from 'react';
import clsx from 'clsx';
import { NavLink, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useUIStore } from '@/store/uiStore';
import { ChevronRight, FileText, Home, Settings, Users } from 'lucide-react';
import { usePluginStore } from '@/store/pluginStore';
import * as LucideIcons from 'lucide-react';
import { useMenuOrder } from '@/api/users';

interface NavSingleItem {
  to: string;
  labelKey: string;
  icon: React.ReactNode;
  order: number;
}

const chevronIcon = (expanded: boolean) => (
  <ChevronRight className={clsx('w-4 h-4 flex-shrink-0 transition-transform duration-200', expanded ? 'rotate-90' : '')} aria-hidden="true" strokeWidth={2} />
);

function getIcon(name: string): React.ReactNode {
  const Icon = (LucideIcons as any)[name];
  return Icon ? <Icon className="h-4 w-4" /> : <LucideIcons.FileText className="h-4 w-4" />;
}

// Only non-plugin items: dashboard, contacts, settings.
// All other menu entries (calendar, dms, mail, ai-assistant, automation, reports, tasks, communication)
// are provided by plugin manifests via usePluginStore(s => s.getAllMenuItems()).
const singleItems: NavSingleItem[] = [
  { to: '/dashboard', labelKey: 'nav.dashboard', icon: <Home className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 0 },
  { to: '/contacts', labelKey: 'nav.contacts', icon: <Users className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 10 },
];

const bottomItems: NavSingleItem[] = [
  { to: '/settings', labelKey: 'nav.settings', icon: <Settings className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 999 },
];

export function Sidebar() {
  const { t } = useTranslation();
  const { sidebarOpen, setSidebarOpen } = useUIStore();
  const location = useLocation();
  const manifests = usePluginStore(s => s.manifests);
  const { data: menuOrderData } = useMenuOrder();

  const allMenuItems = useMemo(() => {
    const staticItems = singleItems.map(item => ({
      path: item.to,
      labelKey: item.labelKey,
      label: item.labelKey,
      icon: item.icon,
      order: item.order,
      group: undefined as string | undefined,
      isStatic: true as const,
    }));

    const pluginItems = manifests
      .flatMap((m) => m.menu_items)
      .map(item => ({
        path: item.path,
        labelKey: item.label_key,
        label: item.label,
        icon: item.icon,
        order: item.order,
        group: item.group,
        isStatic: false as const,
      }));

    const allItems = [...staticItems, ...pluginItems];

    // Apply saved menu order if available
    const savedOrder = menuOrderData?.menu_order;
    if (savedOrder && savedOrder.length > 0) {
      const orderMap = new Map(savedOrder.map((id, idx) => [id, idx]));
      return allItems.sort((a, b) => {
        // Map path to menu ID: static items use their path without leading /
        const aId = a.path.startsWith('/') ? a.path.slice(1) : a.path;
        const bId = b.path.startsWith('/') ? b.path.slice(1) : b.path;
        const aIdx = orderMap.get(aId);
        const bIdx = orderMap.get(bId);
        if (aIdx !== undefined && bIdx !== undefined) return aIdx - bIdx;
        if (aIdx !== undefined) return -1;
        if (bIdx !== undefined) return 1;
        // Fall back to order field for unknown items
        if (a.order !== b.order) return a.order - b.order;
        return a.label.localeCompare(b.label);
      });
    }

    return allItems.sort((a, b) => {
      if (a.order !== b.order) return a.order - b.order;
      return a.label.localeCompare(b.label);
    });
  }, [manifests, menuOrderData]);

  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());

  useEffect(() => {
    setExpandedItems((prev) => {
      const next = new Set(prev);
      // Auto-expand groups whose child route is active
      for (const item of allMenuItems) {
        if (item.group && location.pathname.startsWith(item.path)) {
          next.add(`plugin-group-${item.group}`);
        }
      }
      return next;
    });
  }, [location.pathname, allMenuItems]);

  const toggleExpand = (labelKey: string) => {
    setExpandedItems((prev) => {
      const next = new Set(prev);
      if (next.has(labelKey)) next.delete(labelKey);
      else next.add(labelKey);
      return next;
    });
  };

  return (
    <>
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-secondary-900/50 z-30 md:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
          data-testid="sidebar-overlay"
        />
      )}
      <aside
        className={clsx(
          'fixed md:static inset-y-0 left-0 z-40 w-56 bg-secondary-900 text-secondary-300',
          'flex flex-col transition-transform motion-safe:duration-300',
          sidebarOpen ? 'translate-x-0' : '-translate-x-full md:hidden'
        )}
        aria-label="Seitenleiste Navigation"
        data-testid="sidebar"
      >
        <div className="h-[58px] flex items-center px-4 border-b border-secondary-700">
          <span className="text-xl font-bold text-white">leocrm</span>
        </div>
        <nav className="flex-1 overflow-y-auto py-4" aria-label="Hauptnavigation">
          <ul className="space-y-1 px-2">
            {(() => {
              const groups = new Map<string, typeof allMenuItems>();
              const singles: typeof allMenuItems = [];
              for (const item of allMenuItems) {
                if (item.group) {
                  if (!groups.has(item.group)) groups.set(item.group, []);
                  groups.get(item.group)!.push(item);
                } else {
                  singles.push(item);
                }
              }
              const elements: React.ReactNode[] = [];
              for (const item of singles) {
                elements.push(
                  <li key={item.path}>
                    <NavLink
                      to={item.path}
                      className={({ isActive }) =>
                        clsx(
                          'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                          'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                          isActive
                            ? 'bg-primary-600 text-white'
                            : 'hover:bg-secondary-800 hover:text-white'
                        )
                      }
                      aria-label={t(item.labelKey)}
                    >
                      {item.isStatic ? item.icon : getIcon(item.icon as string)}
                      <span className="truncate">{t(item.labelKey, item.label)}</span>
                    </NavLink>
                  </li>
                );
              }
              for (const [group, items] of groups) {
                const groupKey = `plugin-group-${group}`;
                const expanded = expandedItems.has(groupKey);
                elements.push(
                  <li key={groupKey}>
                    <div
                      className={clsx(
                        'flex items-center gap-2 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                        'motion-safe:transition-colors cursor-pointer select-none',
                        'text-secondary-300 hover:bg-secondary-800 hover:text-white'
                      )}
                      onClick={() => toggleExpand(groupKey)}
                      role="button"
                      tabIndex={0}
                      aria-expanded={expanded}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter' || e.key === ' ') {
                          e.preventDefault();
                          toggleExpand(groupKey);
                        }
                      }}
                    >
                      {getIcon(items[0].icon as string)}
                      <span className="flex-1 truncate">{group}</span>
                      {chevronIcon(expanded)}
                    </div>
                    {expanded && (
                      <ul className="mt-1 ml-4 space-y-1 border-l border-secondary-700 pl-2" role="group">
                        {items.map((child) => (
                          <li key={child.path}>
                            <NavLink
                              to={child.path}
                              className={({ isActive }) =>
                                clsx(
                                  'flex items-center gap-2 px-3 py-2 rounded-md text-sm min-h-touch',
                                  'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                                  isActive
                                    ? 'bg-primary-600 text-white font-medium'
                                    : 'text-secondary-400 hover:bg-secondary-800 hover:text-white'
                                )
                              }
                              aria-label={t(child.labelKey, child.label)}
                            >
                              <span className="truncate">{t(child.labelKey, child.label)}</span>
                            </NavLink>
                          </li>
                        ))}
                      </ul>
                    )}
                  </li>
                );
              }
              return elements;
            })()}

            {bottomItems.map((item) => (
              <li key={item.to}>
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
                    clsx(
                      'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                      'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                      isActive
                        ? 'bg-primary-600 text-white'
                        : 'hover:bg-secondary-800 hover:text-white'
                    )
                  }
                  aria-label={t(item.labelKey)}
                >
                  {item.icon}
                  <span className="truncate">{t(item.labelKey)}</span>
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>
      </aside>
    </>
  );
}