import { NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext';

const navItems = [
  { to: '/dashboard', label: 'داشبورد', icon: '📊' },
  { to: '/signals/active', label: 'سیگنال‌های فعال', icon: '📡' },
  { to: '/signals/recently-closed', label: 'بسته شده جدید', icon: '🕐' },
  { to: '/signals/history', label: 'تاریخچه سیگنال‌ها', icon: '📋' },
  { to: '/stats', label: 'آمار و عملکرد', icon: '📈' },
  { to: '/account', label: 'حساب کاربری', icon: '👤' },
  { to: '/payments', label: 'پرداخت‌ها', icon: '💳' },
  { to: '/support', label: 'پشتیبانی', icon: '💬' },
];

export default function Sidebar({ mobileOpen, onClose }) {
  const { user, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <>
      {mobileOpen && (
        <div className="fixed inset-0 bg-black/60 z-40 lg:hidden" onClick={onClose} />
      )}
      <aside
        className={`fixed top-0 right-0 h-full w-64 bg-navy-900 border-l border-navy-700 z-50 flex flex-col transition-transform lg:translate-x-0 ${
          mobileOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'
        }`}
      >
        <div className="p-6 border-b border-navy-700">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-accent flex items-center justify-center text-lg font-bold">S</div>
            <div>
              <h1 className="font-bold text-lg">SignalPro</h1>
              <p className="text-xs text-gray-500">پنل کاربری</p>
            </div>
          </div>
        </div>

        {user && (
          <div className="px-4 py-4 border-b border-navy-700">
            <p className="font-medium">{user.fullName}</p>
            <p className="text-xs text-emerald-400 mt-1">اشتراک فعال</p>
          </div>
        )}

        <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
          {navItems.map((item) => (
            <NavLink
              key={item.to}
              to={item.to}
              onClick={onClose}
              className={({ isActive }) => (isActive ? 'nav-item-active' : 'nav-item')}
            >
              <span>{item.icon}</span>
              <span>{item.label}</span>
            </NavLink>
          ))}
        </nav>

        <div className="p-4 border-t border-navy-700">
          <button onClick={handleLogout} className="nav-item w-full text-red-400 hover:text-red-300">
            <span>🚪</span>
            <span>خروج</span>
          </button>
        </div>
      </aside>
    </>
  );
}
