import { NavLink, useNavigate } from 'react-router-dom';
import { LayoutDashboard, BarChart2, CheckSquare, Shield, LogOut, Users, Settings, BookUser, X, CalendarDays } from 'lucide-react';
import { useAuth } from '../auth/useAuth';

const NAV_ITEMS = [
  { to: '/admin/kanban', icon: LayoutDashboard, label: 'Канбан' },
  { to: '/admin/analytics', icon: BarChart2, label: 'Аналитика' },
  { to: '/admin/completed', icon: CheckSquare, label: 'Завершённые' },
  { to: '/admin/calendar', icon: CalendarDays, label: 'Календарь' },
  { to: '/admin/users', icon: Users, label: 'Пользователи' },
  { to: '/admin/clients', icon: BookUser, label: 'Клиенты' },
  { to: '/admin/settings', icon: Settings, label: 'Настройки' },
];

const Sidebar = ({ isOpen, onClose, isMobile }) => {
  const { session, logout } = useAuth();
  const navigate = useNavigate();

  const handleLogout = async () => {
    try { await logout(); } catch (err) { console.error('Logout failed:', err); }
    navigate('/admin/login');
  };

  return (
    <aside style={{
      width: '240px', minHeight: '100vh',
      background: '#FFFFFF',
      display: 'flex', flexDirection: 'column',
      position: 'fixed', top: 0, left: 0,
      zIndex: 100,
      borderRight: '1px solid #E9ECEF',
      transform: isMobile && !isOpen ? 'translateX(-100%)' : 'translateX(0)',
      transition: 'transform 0.25s ease',
    }}>
      {/* Logo */}
      <div style={{ padding: '22px 20px', borderBottom: '1px solid #E9ECEF', position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <Shield size={20} color="#4361EE" />
          <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, color: '#1E1E2D', fontSize: '1.05rem' }}>
            Осколкам.<span style={{ color: '#4361EE' }}>Нет</span>
          </span>
        </div>
        <p style={{ fontSize: '0.72rem', color: '#8C9097', marginTop: '3px', marginLeft: '30px' }}>
          Панель управления
        </p>
        {isMobile && (
          <button
            onClick={onClose}
            aria-label="Закрыть меню"
            style={{
              position: 'absolute', top: '50%', right: '14px',
              transform: 'translateY(-50%)',
              background: 'none', border: 'none', cursor: 'pointer',
              color: '#8C9097', display: 'flex', padding: '4px',
              borderRadius: '4px',
            }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#1E1E2D'}
            onMouseLeave={(e) => e.currentTarget.style.color = '#8C9097'}
          >
            <X size={18} />
          </button>
        )}
      </div>

      {/* Navigation */}
      <nav style={{ flex: 1, padding: '14px 10px' }}>
        {NAV_ITEMS.map(({ to, icon: Icon, label }) => (
          <NavLink
            key={to}
            to={to}
            style={({ isActive }) => ({
              display: 'flex', alignItems: 'center', gap: '12px',
              padding: '11px 14px', borderRadius: '8px', marginBottom: '2px',
              color: isActive ? '#4361EE' : '#1E1E2D',
              background: isActive ? '#EEF2FF' : 'transparent',
              textDecoration: 'none',
              fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.88rem',
              transition: 'all 0.15s',
              borderLeft: isActive ? '3px solid #4361EE' : '3px solid transparent',
            })}
          >
            <Icon size={17} />
            {label}
          </NavLink>
        ))}
      </nav>

      {/* User + logout */}
      <div style={{ padding: '14px 18px', borderTop: '1px solid #E9ECEF' }}>
        <p style={{
          fontSize: '0.75rem', color: '#8C9097',
          marginBottom: '10px', overflow: 'hidden',
          textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>
          {session?.user?.email}
        </p>
        <button
          onClick={handleLogout}
          style={{
            display: 'flex', alignItems: 'center', gap: '8px',
            background: 'none', border: 'none', cursor: 'pointer',
            color: '#8C9097',
            fontFamily: 'var(--font-body)', fontSize: '0.82rem', padding: '4px 0',
            transition: 'color 0.15s',
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = '#1E1E2D'}
          onMouseLeave={(e) => e.currentTarget.style.color = '#8C9097'}
        >
          <LogOut size={15} />
          Выйти
        </button>
      </div>
    </aside>
  );
};

export default Sidebar;
