import { Badge } from 'modern-sk';
import { NavLink, useNavigate } from 'react-router';
import { ConnectionStatus } from '../common/ConnectionStatus';
import { useAppSelector, useAppDispatch } from '../../hooks/useAppDispatch';
import { usePermissions } from '../../hooks/usePermissions';
import { logout } from '../../store/slices/auth';

const NAV_ITEMS = [
  { to: '/', label: 'Home', icon: '⌂' },
  { to: '/library', label: 'Library', icon: '♫' },
  { to: '/search', label: 'Search & Download', icon: '⊕' },
  { to: '/downloads', label: 'Downloads', icon: '↓' },
  { to: '/storage', label: 'Storage', icon: '⊞' },
  { to: '/settings', label: 'Settings', icon: '⚙' },
] as const;

const ADMIN_ITEMS = [
  { to: '/admin', label: 'Admin', icon: '🔑' },
] as const;

export function Sidebar() {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { user, isAdmin } = usePermissions();
  const collapsed = useAppSelector((s) => s.ui.sidebarCollapsed);

  const handleLogout = () => {
    dispatch(logout());
    void navigate('/connect');
  };

  return (
    <nav style={{ width: collapsed ? '3.5rem' : '14rem', flexShrink: 0, borderRight: '1px solid var(--color-border)', display: 'flex', flexDirection: 'column', padding: '0.75rem 0', background: 'var(--color-surface-1)', transition: 'width 0.2s', overflow: 'hidden' }}>
      <div style={{ padding: collapsed ? '0 0.5rem' : '0 0.75rem', marginBottom: '1.5rem' }}>
        <span style={{ fontWeight: 700, fontSize: '1.125rem', color: 'var(--color-accent)', whiteSpace: 'nowrap' }}>
          {collapsed ? '♫' : '♫ MCMA'}
        </span>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '2px' }}>
        {NAV_ITEMS.map(({ to, label, icon }) => (
          <NavLink
            key={to}
            to={to}
            end={to === '/'}
            style={({ isActive }) => ({
              display: 'flex',
              alignItems: 'center',
              gap: '0.75rem',
              padding: collapsed ? '0.625rem 0.75rem' : '0.625rem 1rem',
              borderRadius: 6,
              margin: '0 0.375rem',
              color: isActive ? 'var(--color-accent)' : 'var(--color-text-2)',
              background: isActive ? 'var(--color-surface-2)' : undefined,
              fontWeight: isActive ? 600 : 400,
              textDecoration: 'none',
              fontSize: '0.875rem',
              whiteSpace: 'nowrap',
              transition: 'background 0.1s, color 0.1s',
            })}
          >
            <span style={{ flexShrink: 0, fontSize: '1rem' }}>{icon}</span>
            {!collapsed && label}
          </NavLink>
        ))}

        {isAdmin && (
          <>
            <div style={{ height: 1, background: 'var(--color-border)', margin: '0.5rem 0.75rem' }} />
            {ADMIN_ITEMS.map(({ to, label, icon }) => (
              <NavLink
                key={to}
                to={to}
                style={({ isActive }) => ({
                  display: 'flex',
                  alignItems: 'center',
                  gap: '0.75rem',
                  padding: collapsed ? '0.625rem 0.75rem' : '0.625rem 1rem',
                  borderRadius: 6,
                  margin: '0 0.375rem',
                  color: isActive ? 'var(--color-accent)' : 'var(--color-text-2)',
                  background: isActive ? 'var(--color-surface-2)' : undefined,
                  fontWeight: isActive ? 600 : 400,
                  textDecoration: 'none',
                  fontSize: '0.875rem',
                  whiteSpace: 'nowrap',
                })}
              >
                <span style={{ flexShrink: 0 }}>{icon}</span>
                {!collapsed && label}
              </NavLink>
            ))}
          </>
        )}
      </div>

      <div style={{ padding: collapsed ? '0 0.5rem' : '0 0.75rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
        {!collapsed && <ConnectionStatus />}
        {!collapsed && user && (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0.5rem 0.25rem' }}>
            <div>
              <div style={{ fontSize: '0.8125rem', fontWeight: 600, color: 'var(--color-text-1)' }}>{user.username}</div>
              <Badge variant={user.role === 'admin' ? 'lime' : 'neutral'} style={{ marginTop: 2 }}>{user.role}</Badge>
            </div>
            <button onClick={handleLogout} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-text-3)', fontSize: '0.75rem', padding: '0.25rem' }}>
              Sign out
            </button>
          </div>
        )}
      </div>
    </nav>
  );
}