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

import React, { useState, useEffect } 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';

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

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} /> },
  { to: '/contacts', labelKey: 'nav.contacts', icon: <Users className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} /> },
];

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

export function Sidebar() {
  const { t } = useTranslation();
  const { sidebarOpen, setSidebarOpen } = useUIStore();
  const location = useLocation();
  const pluginMenuItems = usePluginStore(s => s.getAllMenuItems());

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

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

  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">
            {singleItems.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>
            ))}

            {pluginMenuItems.length > 0 && (
              <>
                <li className="px-3 pt-4 pb-1">
                  <span className="text-xs font-semibold uppercase tracking-wider text-secondary-500">
                    {t('nav.plugins', 'Plugins')}
                  </span>
                </li>
                {(() => {
                  const groups = new Map<string, typeof pluginMenuItems>();
                  const singles: typeof pluginMenuItems = [];
                  for (const item of pluginMenuItems) {
                    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.label_key, item.label)}
                        >
                          {getIcon(item.icon)}
                          <span className="truncate">{t(item.label_key, 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)}
                          <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.label_key, child.label)}
                                >
                                  <span className="truncate">{t(child.label_key, 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>
    </>
  );
}