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

'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { useUIStore } from '@/stores/ui.store';
import {
  LayoutDashboard,
  LineChart,
  Wallet,
  History,
  Settings,
  HelpCircle,
  ChevronLeft,
  ChevronRight,
  TrendingUp,
  Bot,
  Shield,
  Bell,
} from 'lucide-react';

/**
 * Item de navegación
 */
interface NavItem {
  label: string;
  href: string;
  icon: React.ReactNode;
  badge?: string | number;
  children?: NavItem[];
}

/**
 * Grupos de navegación
 */
interface NavGroup {
  label?: string;
  items: NavItem[];
}

/**
 * Navegación principal
 */
const navigation: NavGroup[] = [
  {
    items: [
      {
        label: 'Dashboard',
        href: '/dashboard',
        icon: <LayoutDashboard className="h-5 w-5" />,
      },
    ],
  },
  {
    label: 'Trading',
    items: [
      {
        label: 'Estrategias',
        href: '/strategies',
        icon: <Bot className="h-5 w-5" />,
        badge: 3,
      },
      {
        label: 'Portfolio',
        href: '/portfolio',
        icon: <Wallet className="h-5 w-5" />,
      },
      {
        label: 'Mercados',
        href: '/markets',
        icon: <TrendingUp className="h-5 w-5" />,
      },
      {
        label: 'Historial',
        href: '/history',
        icon: <History className="h-5 w-5" />,
      },
    ],
  },
  {
    label: 'Analisis',
    items: [
      {
        label: 'Performance',
        href: '/analytics',
        icon: <LineChart className="h-5 w-5" />,
      },
      {
        label: 'Riesgo',
        href: '/risk',
        icon: <Shield className="h-5 w-5" />,
      },
    ],
  },
  {
    label: 'Sistema',
    items: [
      {
        label: 'Notificaciones',
        href: '/notifications',
        icon: <Bell className="h-5 w-5" />,
        badge: 5,
      },
      {
        label: 'Configuracion',
        href: '/settings',
        icon: <Settings className="h-5 w-5" />,
      },
      {
        label: 'Ayuda',
        href: '/help',
        icon: <HelpCircle className="h-5 w-5" />,
      },
    ],
  },
];

/**
 * Componente NavLink
 */
interface NavLinkProps {
  item: NavItem;
  collapsed: boolean;
}

const NavLink: React.FC<NavLinkProps> = ({ item, collapsed }) => {
  const pathname = usePathname();
  const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);

  return (
    <Link
      href={item.href}
      className={cn(
        'flex items-center gap-3 px-3 py-2.5 rounded-lg',
        'text-sm font-medium transition-all duration-200',
        'group relative',
        isActive
          ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'
          : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-700/50 dark:hover:text-white',
        collapsed && 'justify-center px-2'
      )}
    >
      {/* Active Indicator */}
      {isActive && (
        <span className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-primary-600 dark:bg-primary-400 rounded-r-full" />
      )}

      {/* Icon */}
      <span
        className={cn(
          'flex-shrink-0 transition-colors',
          isActive
            ? 'text-primary-600 dark:text-primary-400'
            : 'text-slate-400 group-hover:text-slate-600 dark:text-slate-500 dark:group-hover:text-slate-300'
        )}
      >
        {item.icon}
      </span>

      {/* Label */}
      {!collapsed && (
        <span className="flex-1 truncate">{item.label}</span>
      )}

      {/* Badge */}
      {item.badge && !collapsed && (
        <span className="flex-shrink-0 px-2 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300">
          {item.badge}
        </span>
      )}

      {/* Tooltip when collapsed */}
      {collapsed && (
        <span className="absolute left-full ml-2 px-2 py-1 text-sm font-medium text-white bg-slate-900 dark:bg-slate-700 rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
          {item.label}
          {item.badge && (
            <span className="ml-2 px-1.5 py-0.5 text-xs rounded-full bg-primary-500 text-white">
              {item.badge}
            </span>
          )}
        </span>
      )}
    </Link>
  );
};

/**
 * Componente Sidebar
 *
 * Barra lateral de navegación con soporte para colapsado y grupos de navegación.
 */
export const Sidebar: React.FC = () => {
  const { sidebarOpen, sidebarCollapsed, toggleSidebarCollapsed, isMobile, setSidebarOpen } = useUIStore();

  // En mobile, cerrar al hacer click en overlay
  const handleOverlayClick = () => {
    if (isMobile) {
      setSidebarOpen(false);
    }
  };

  return (
    <>
      {/* Overlay mobile */}
      {isMobile && sidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={handleOverlayClick}
          aria-hidden="true"
        />
      )}

      {/* Sidebar */}
      <aside
        className={cn(
          'fixed top-0 left-0 z-50 h-full',
          'bg-white dark:bg-slate-900',
          'border-r border-slate-200 dark:border-slate-700',
          'flex flex-col',
          'transition-all duration-300 ease-in-out',
          // Width
          sidebarCollapsed ? 'w-20' : 'w-64',
          // Mobile
          isMobile && !sidebarOpen && '-translate-x-full',
          isMobile && sidebarOpen && 'translate-x-0',
          // Desktop
          !isMobile && 'translate-x-0'
        )}
      >
        {/* Header */}
        <div className={cn(
          'flex items-center h-16 px-4',
          'border-b border-slate-200 dark:border-slate-700',
          sidebarCollapsed && 'justify-center'
        )}>
          {/* Logo */}
          <Link href="/dashboard" className="flex items-center gap-3">
            <div className="flex-shrink-0 w-10 h-10 rounded-xl bg-horux-gradient flex items-center justify-center">
              <span className="text-white font-bold text-xl">H</span>
            </div>
            {!sidebarCollapsed && (
              <span className="text-xl font-bold text-slate-900 dark:text-white">
                Horux
              </span>
            )}
          </Link>
        </div>

        {/* Navigation */}
        <nav className="flex-1 overflow-y-auto py-4 px-3 space-y-6">
          {navigation.map((group, idx) => (
            <div key={idx}>
              {/* Group Label */}
              {group.label && !sidebarCollapsed && (
                <h3 className="px-3 mb-2 text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider">
                  {group.label}
                </h3>
              )}

              {/* Separator when collapsed */}
              {group.label && sidebarCollapsed && (
                <div className="my-2 border-t border-slate-200 dark:border-slate-700" />
              )}

              {/* Items */}
              <div className="space-y-1">
                {group.items.map((item) => (
                  <NavLink key={item.href} item={item} collapsed={sidebarCollapsed} />
                ))}
              </div>
            </div>
          ))}
        </nav>

        {/* Footer - Collapse Button */}
        {!isMobile && (
          <div className="p-3 border-t border-slate-200 dark:border-slate-700">
            <button
              onClick={toggleSidebarCollapsed}
              className={cn(
                'flex items-center gap-3 w-full px-3 py-2.5 rounded-lg',
                'text-sm font-medium text-slate-600 dark:text-slate-400',
                'hover:bg-slate-100 dark:hover:bg-slate-700/50',
                'transition-all duration-200',
                sidebarCollapsed && 'justify-center'
              )}
              aria-label={sidebarCollapsed ? 'Expandir sidebar' : 'Colapsar sidebar'}
            >
              {sidebarCollapsed ? (
                <ChevronRight className="h-5 w-5" />
              ) : (
                <>
                  <ChevronLeft className="h-5 w-5" />
                  <span>Colapsar</span>
                </>
              )}
            </button>
          </div>
        )}
      </aside>
    </>
  );
};

export default Sidebar;