import React from 'react';
import { Link } from 'react-router-dom';
import { PanelLeft, PanelLeftClose, Package } from 'lucide-react';
import { useActiveSection } from '@/hooks/useActiveSection';
import { __ } from '@/lib/i18n';
import { iconMap } from '@/lib/nav-icons';

interface SidebarProps {
  collapsed: boolean;
  onToggle: () => void;
}

export function Sidebar({ collapsed, onToggle }: SidebarProps) {
  const link = "flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0 transition-all";
  const linkCollapsed = "flex items-center justify-center rounded-md p-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0 transition-all";
  const active = "bg-secondary";
  const { main } = useActiveSection();

  // Get navigation tree from backend
  const navTree = window.WNW_NAV_TREE || [];

  return (
    <aside className={`flex-shrink-0 border-r border-border sticky top-16 h-[calc(100vh-64px)] overflow-y-auto bg-background flex flex-col transition-all duration-200 ${collapsed ? 'w-14' : 'w-56'}`}>
      {/* Toggle button */}
      <div className={`p-2 border-b border-border ${collapsed ? 'flex justify-center' : 'flex justify-end'}`}>
        <button
          onClick={onToggle}
          className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
          title={collapsed ? __('Expand sidebar') : __('Collapse sidebar')}
        >
          {collapsed ? <PanelLeft className="w-4 h-4" /> : <PanelLeftClose className="w-4 h-4" />}
        </button>
      </div>

      <nav className={`flex flex-col gap-1 flex-1 ${collapsed ? 'p-1' : 'p-3'}`}>
        {navTree.map((item: any) => {
          const IconComponent = iconMap[item.icon] || Package;
          const isActive = main.key === item.key;
          return (
            <Link
              key={item.key}
              to={item.path}
              className={`${collapsed ? linkCollapsed : link} ${isActive ? active : ''}`}
              title={collapsed ? item.label : undefined}
            >
              <IconComponent className="w-4 h-4 flex-shrink-0" />
              {!collapsed && <span>{item.label}</span>}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}