veza/apps/web/src/components/layout/Sidebar.tsx

import React, { useMemo, useState, useEffect } from 'react';
import { useLocation, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  Home, Users, Disc, Radio, Settings, LogOut, ShoppingBag, Music2,
  BarChart2, Shield, Box, MessageSquare,
  Layers, Cpu, Heart, ListMusic, CreditCard, DollarSign, Terminal,
  ChevronLeft, ChevronRight,
} from 'lucide-react';
import { NavItem } from '../../types';
import { useUIStore } from '@/stores/ui';
import { useSidebarNavigation } from '@/hooks/useSidebarNavigation';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Tooltip } from '@/components/ui/tooltip';
import { FocusTrap } from '@/components/ui/focus-trap';

interface SidebarProps {
  currentView?: string;
}

// Section key mapping for i18n
const sectionKeys: Record<string, string> = {
  workspace: 'nav.sections.workspace',
  vezaNetwork: 'nav.sections.vezaNetwork',
  commerce: 'nav.sections.commerce',
  library: 'nav.sections.library',
  system: 'nav.sections.system',
};

// Icon map — static, does not need translation
const iconMap: Record<string, React.ReactNode> = {
  dashboard: <Home className="w-4 h-4" />,
  tracks: <Layers className="w-4 h-4" />,
  gear: <Box className="w-4 h-4" />,
  analytics: <BarChart2 className="w-4 h-4" />,
  social: <Users className="w-4 h-4" />,
  feed: <Music2 className="w-4 h-4" />,
  marketplace: <ShoppingBag className="w-4 h-4" />,
  live: <Radio className="w-4 h-4" />,
  chat: <MessageSquare className="w-4 h-4" />,
  sell: <DollarSign className="w-4 h-4" />,
  wishlist: <Heart className="w-4 h-4" />,
  purchases: <CreditCard className="w-4 h-4" />,
  playlists: <ListMusic className="w-4 h-4" />,
  favoris: <Heart className="w-4 h-4" />,
  queue: <Disc className="w-4 h-4" />,
  developer: <Terminal className="w-4 h-4" />,
  admin: <Shield className="w-4 h-4" />,
};

// Badge data — static
const badgeMap: Record<string, number> = { live: 3, chat: 12 };

// Navigation structure definition (ids only, labels resolved via t())
const navStructure: { sectionKey: string; itemIds: string[] }[] = [
  { sectionKey: 'workspace', itemIds: ['dashboard', 'tracks', 'gear', 'analytics'] },
  { sectionKey: 'vezaNetwork', itemIds: ['social', 'feed', 'marketplace', 'live', 'chat'] },
  { sectionKey: 'commerce', itemIds: ['sell', 'wishlist', 'purchases'] },
  { sectionKey: 'library', itemIds: ['playlists', 'favoris', 'queue'] },
  { sectionKey: 'system', itemIds: ['developer', 'admin'] },
];

function buildNavItems(t: (key: string) => string): { section: string; items: NavItem[] }[] {
  return navStructure.map(({ sectionKey, itemIds }) => ({
    section: t(sectionKeys[sectionKey] ?? sectionKey),
    items: itemIds.map((id) => ({
      id,
      label: t(`nav.items.${id}`),
      icon: iconMap[id],
      ...(badgeMap[id] != null ? { badge: badgeMap[id] } : {}),
    })),
  }));
}

const routeMap: Record<string, string> = {
  dashboard: '/dashboard', tracks: '/library', gear: '/gear',
  analytics: '/analytics', social: '/social', feed: '/feed', marketplace: '/marketplace', live: '/live',
  'go-live': '/live/go-live',
  chat: '/chat', sell: '/sell', wishlist: '/wishlist',
  purchases: '/purchases', playlists: '/playlists', favoris: '/playlists/favoris', queue: '/queue', developer: '/developer',
  admin: '/admin', settings: '/settings',
};

const navItemBaseClasses = cn(
  'w-full flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-[var(--duration-fast)] group relative',
  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background'
);

const navItemInactiveClasses =
  'text-muted-foreground hover:text-foreground hover:bg-sidebar-accent active:bg-sidebar-accent/80';

const navItemActiveClasses = 'bg-primary/10 text-primary sidebar-active-indicator';

const LG_BREAKPOINT = 1024;

export const Sidebar: React.FC<SidebarProps> = ({ currentView }) => {
  const { t } = useTranslation();
  const location = useLocation();
  const { sidebarOpen, setSidebarOpen } = useUIStore();
  const { handleMobileNav, handleLogout } = useSidebarNavigation();
  const navItems = useMemo(() => buildNavItems(t), [t]);
  const [isMobile, setIsMobile] = useState(() =>
    typeof window !== 'undefined' ? window.innerWidth < LG_BREAKPOINT : false,
  );

  useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
    const handler = () => setIsMobile(mq.matches);
    handler();
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  const activeView =
    currentView ||
    Object.keys(routeMap).find((key) => routeMap[key] === location.pathname) ||
    'dashboard';

  return (
    <>
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-background/80 backdrop-blur-sm lg:hidden z-sidebar-overlay"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
          role="presentation"
        />
      )}

      <FocusTrap
        active={sidebarOpen && isMobile}
        onEscape={() => setSidebarOpen(false)}
      >
        <aside
        data-testid="app-sidebar"
        className={cn(
          'fixed left-sidebar bottom-sidebar top-sidebar rounded-xl flex flex-col transition-shell z-sidebar overflow-hidden',
          'bg-[var(--sumi-bg-raised)] backdrop-blur-md border-r border-[var(--sumi-border-faint)]',
          sidebarOpen ? 'w-sidebar-expanded translate-x-0 opacity-100' : '-translate-x-full lg:translate-x-0 lg:opacity-100 lg:w-sidebar-collapsed'
        )}
        aria-label="Main sidebar"
      >
        {/* Header — minimal Spotify-style */}
        <div className="px-4 py-4 flex items-center gap-3 relative">
          <div className="w-8 h-8 rounded-lg bg-sidebar-accent flex items-center justify-center flex-shrink-0">
            <Cpu className="w-4 h-4 text-muted-foreground" />
          </div>

          <div className={cn('transition-shell overflow-hidden min-w-0', sidebarOpen ? 'opacity-100' : 'w-0 opacity-0')}>
            <h2 className="text-sm font-semibold text-foreground truncate">
              System Hub
            </h2>
            <div className="flex items-center gap-1.5 mt-0.5">
              <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0 animate-pulse" aria-hidden="true" />
              <span className="text-xs text-muted-foreground truncate">
                Online
              </span>
            </div>
          </div>

          <Button
            variant="ghost"
            size="icon"
            onClick={() => setSidebarOpen(!sidebarOpen)}
            aria-label={sidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'}
            className={cn(
              'ml-auto text-muted-foreground hover:text-foreground hidden lg:flex hover:bg-sidebar-accent',
              !sidebarOpen && 'absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2'
            )}
          >
            {sidebarOpen ? <ChevronLeft className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
          </Button>
        </div>

        {/* Nav — Discord/Spotify: pill indicator, micro-animations, section dividers */}
        <nav
          className="flex-1 overflow-y-auto custom-scrollbar px-3 py-2"
          role="navigation"
          aria-label="Main navigation"
        >
          {navItems.map((group, idx) => (
            <div key={group.section}>
              {/* Section divider between groups */}
              {idx > 0 && (
                <div
                  className={cn(
                    'h-px bg-border/50 mx-3 my-1.5 transition-opacity duration-[var(--sumi-duration-normal)]',
                    !sidebarOpen && 'mx-1'
                  )}
                  aria-hidden="true"
                />
              )}

              <h3
                className={cn(
                  'text-xs font-medium text-muted-foreground mb-2 px-3 transition-all duration-[var(--sumi-duration-normal)] uppercase tracking-wider',
                  !sidebarOpen && 'opacity-0 h-0 overflow-hidden mb-0 px-0'
                )}
                id={`sidebar-section-${group.section.replace(/\s+/g, '-').toLowerCase()}`}
              >
                {group.section}
              </h3>

              <ul className="space-y-0.5 list-none m-0 p-0" aria-labelledby={`sidebar-section-${group.section.replace(/\s+/g, '-').toLowerCase()}`}>
                {group.items.map((item) => {
                  const route = routeMap[item.id] || '/dashboard';
                  const isActive = activeView === item.id;

                  return (
                    <li key={item.id} className="list-none m-0 p-0">
                      <Tooltip content={item.label} position="right" disabled={sidebarOpen}>
                        <Link
                          to={route}
                          onClick={handleMobileNav}
                          aria-current={isActive ? 'page' : undefined}
                          className={cn(
                            navItemBaseClasses,
                            isActive ? navItemActiveClasses : navItemInactiveClasses,
                            !sidebarOpen && 'justify-center px-0'
                          )}
                        >
                          <div className={cn('flex items-center gap-3 relative z-10 min-w-0', !sidebarOpen && 'justify-center')}>
                            <span
                              className={cn(
                                'shrink-0 transition-all duration-[var(--duration-fast)]',
                                'group-hover:scale-110',
                                isActive ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
                              )}
                            >
                              {item.icon}
                            </span>

                            <span
                              className={cn(
                                'transition-all duration-[var(--sumi-duration-normal)] whitespace-nowrap truncate',
                                sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
                              )}
                            >
                              {item.label}
                            </span>
                          </div>

                          {/* Badge — expanded: colored pill */}
                          {item.badge != null && sidebarOpen && (
                            <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/15 text-primary text-xs font-semibold tabular-nums shrink-0">
                              {item.badge}
                            </span>
                          )}

                          {/* Badge — collapsed: pinging dot */}
                          {item.badge != null && !sidebarOpen && (
                            <span className="absolute top-1.5 right-1.5 flex h-2 w-2" aria-hidden="true">
                              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
                              <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
                            </span>
                          )}
                        </Link>
                      </Tooltip>
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </nav>

        {/* Footer */}
        <div className="p-2 border-t border-[var(--sumi-border-faint)] space-y-0.5">
          <Tooltip content={t('nav.settings')} position="right" disabled={sidebarOpen}>
            <Link
              to="/settings"
              onClick={handleMobileNav}
              aria-current={activeView === 'settings' ? 'page' : undefined}
              className={cn(
                navItemBaseClasses,
                activeView === 'settings' ? navItemActiveClasses : navItemInactiveClasses,
                !sidebarOpen && 'justify-center px-0'
              )}
            >
              <Settings
                className={cn(
                  'w-4 h-4 shrink-0 transition-all duration-[var(--duration-fast)]',
                  'group-hover:scale-110',
                  activeView === 'settings' ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'
                )}
              />
              <span
                className={cn(
                  'truncate transition-all duration-[var(--sumi-duration-normal)]',
                  sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
                )}
              >
                {t('nav.settings')}
              </span>
            </Link>
          </Tooltip>

          <Tooltip content={t('nav.logout')} position="right" disabled={sidebarOpen}>
            <Button
              variant="ghost"
              onClick={handleLogout}
              className={cn(
                'w-full text-muted-foreground hover:text-destructive hover:bg-destructive/10 gap-3 justify-start rounded-lg group',
                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
                !sidebarOpen && 'justify-center px-0'
              )}
              aria-label={t('nav.logout')}
            >
              <LogOut className="w-4 h-4 shrink-0 transition-transform duration-[var(--duration-fast)] group-hover:scale-110" />
              <span
                className={cn(
                  'whitespace-nowrap transition-all duration-[var(--sumi-duration-normal)]',
                  sidebarOpen ? 'opacity-100' : 'w-0 opacity-0 overflow-hidden'
                )}
              >
                {t('nav.logout')}
              </span>
            </Button>
          </Tooltip>
        </div>
      </aside>
      </FocusTrap>
    </>
  );
};