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 { Calendar, ChevronRight, FileText, Home, Mail, Monitor, Users } from 'lucide-react';
import { usePluginStore } from '@/store/pluginStore';
import * as LucideIcons from 'lucide-react';

interface NavLeaf {
  to: string;
  labelKey: string;
}

interface NavTreeItem {
  labelKey: string;
  icon: React.ReactNode;
  children: NavLeaf[];
}

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" />;
}

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 treeItems: NavTreeItem[] = [
  {
    labelKey: 'nav.calendar',
    icon: <Calendar className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />,
    children: [
      { to: '/calendar', labelKey: 'nav.calendar' },
      { to: '/calendar/kanban', labelKey: 'nav.calendarKanban' },
    ],
  },
  {
    labelKey: 'nav.files',
    icon: <FileText className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />,
    children: [
      { to: '/dms', labelKey: 'nav.files' },
      { to: '/dms/trash', labelKey: 'nav.filesTrash' },
    ],
  },
  {
    labelKey: 'nav.email',
    icon: <Mail className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />,
    children: [
      { to: '/mail', labelKey: 'nav.email' },
      { to: '/mail/settings', labelKey: 'nav.emailSettings' },
    ],
  },
];

const bottomItems: NavSingleItem[] = [
  { to: '/ai-assistant', labelKey: 'nav.aiAssistant', icon: <Monitor 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 initialExpanded = treeItems
    .filter((item) => item.children.some((child) => location.pathname.startsWith(child.to)))
    .map((item) => item.labelKey);
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(initialExpanded));

  useEffect(() => {
    setExpandedItems((prev) => {
      const next = new Set(prev);
      treeItems.forEach((item) => {
        const isActive = item.children.some((child) => location.pathname.startsWith(child.to));
        if (isActive) next.add(item.labelKey);
      });
      return next;
    });
  }, [location.pathname]);

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

  const isChildActive = (children: NavLeaf[]) =>
    children.some((child) => location.pathname.startsWith(child.to));

  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>
            ))}

            {treeItems.map((item) => {
              const expanded = expandedItems.has(item.labelKey);
              const childActive = isChildActive(item.children);
              return (
                <li key={item.labelKey}>
                  <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',
                      childActive
                        ? 'text-white'
                        : 'text-secondary-300 hover:bg-secondary-800 hover:text-white'
                    )}
                    onClick={() => toggleExpand(item.labelKey)}
                    role="button"
                    tabIndex={0}
                    aria-expanded={expanded}
                    aria-label={t(item.labelKey)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        toggleExpand(item.labelKey);
                      }
                    }}
                  >
                    {item.icon}
                    <span className="flex-1 truncate">{t(item.labelKey)}</span>
                    {chevronIcon(expanded)}
                  </div>
                  {expanded && (
                    <ul className="mt-1 ml-4 space-y-1 border-l border-secondary-700 pl-2" role="group">
                      {item.children.map((child) => (
                        <li key={child.to}>
                          <NavLink
                            to={child.to}
                            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)}
                          >
                            <span className="truncate">{t(child.labelKey)}</span>
                          </NavLink>
                        </li>
                      ))}
                    </ul>
                  )}
                </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>
    </>
  );
}