import { useState } from 'react';
import { NavLink } from 'react-router-dom';
import { 
  Users, 
  LayoutDashboard, 
  PanelLeftClose, 
  PanelLeftOpen, 
  PanelRightClose, 
  PanelRightOpen 
} from 'lucide-react';
import { useTranslation } from '../hooks/useTranslation';

export const Sidebar = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);
  
  const { t, lang } = useTranslation();
  const isRtl = lang === 'fa';

  const ToggleIcon = isRtl
    ? (isCollapsed ? PanelRightOpen : PanelRightClose)
    : (isCollapsed ? PanelLeftOpen : PanelLeftClose);

  const navItems = [
    { 
      path: '/workspaces', 
      icon: LayoutDashboard, 
      label: t.sidebar?.workspaces || 'Workspaces' 
    },
    { 
      path: '/clients', 
      icon: Users, 
      label: t.sidebar?.clients || 'Clients' 
    },
  ];

  return (
    <aside 
      className={`border-e border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 hidden md:flex flex-col h-screen sticky top-0 shrink-0 transition-all duration-300 ease-in-out ${
        isCollapsed ? 'w-20' : 'w-64'
      }`}
    >
      <div className={`h-18.25 flex items-center border-b border-slate-200 dark:border-slate-800 shrink-0 transition-all ${
        isCollapsed ? 'justify-center px-0' : 'justify-between px-6'
      }`}>
        {!isCollapsed && (
          <h2 className="text-xl font-bold text-slate-800 dark:text-white truncate">
            {t.title || "Qlockify"}
          </h2>
        )}
        <button
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="p-2 rounded-lg text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
          title={isCollapsed ? (t.sidebar?.expand || 'Expand') : (t.sidebar?.collapse || 'Collapse')}
        >
          <ToggleIcon size={20} />
        </button>
      </div>
      
      <nav className="flex-1 p-4 space-y-1 overflow-y-auto overflow-x-hidden">
        {navItems.map((item) => {
          const Icon = item.icon;
          return (
            <NavLink
              key={item.path}
              to={item.path}
              title={isCollapsed ? item.label : undefined}
              className={({ isActive }) =>
                `flex items-center py-2.5 rounded-lg text-sm font-medium transition-colors ${
                  isCollapsed ? 'justify-center px-0' : 'gap-3 px-3'
                } ${
                  isActive
                    ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400'
                    : 'text-slate-600 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-900/50'
                }`
              }
            >
              <Icon size={isCollapsed ? 22 : 18} className="shrink-0" />
              {!isCollapsed && (
                <span className="truncate whitespace-nowrap">{item.label}</span>
              )}
            </NavLink>
          );
        })}
      </nav>
    </aside>
  );
};