import { NavLink, useLocation } from 'react-router-dom'
import { LogOut } from 'lucide-react'
import { getMainNavItems } from '../config/appNav'
import ActiveClubSwitcher from './ActiveClubSwitcher'

function sidebarLinkActive(pathname, item, routerIsActive) {
  if (item.to.startsWith('/admin')) return pathname.startsWith('/admin')
  return routerIsActive
}

/**
 * Desktop-Sidebar (≥1024px) — Sichtbarkeit via CSS (.desktop-sidebar).
 */
export default function DesktopSidebar({
  isAdmin,
  user,
  onLogout
}) {
  const loc = useLocation()
  const items = getMainNavItems(isAdmin)
  const tier = user?.tier || ''

  return (
    <aside className="desktop-sidebar" aria-label="Hauptnavigation">
      <div className="desktop-sidebar__brand">
        <div className="desktop-sidebar__logo" aria-hidden />
        <div className="desktop-sidebar__title">Shinkan Jinkendo</div>
      </div>

      <nav className="desktop-sidebar__nav">
        {items.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            end={!!item.end}
            className={({ isActive }) =>
              'desktop-sidebar__link' +
              (sidebarLinkActive(loc.pathname, item, isActive)
                ? ' desktop-sidebar__link--active'
                : '')
            }
          >
            <item.Icon size={20} strokeWidth={2} />
            <span>{item.label}</span>
          </NavLink>
        ))}
      </nav>

      <div className="desktop-sidebar__footer">
        <ActiveClubSwitcher variant="sidebar" />
        <div className="desktop-sidebar__footer-row">
          <div className="desktop-sidebar__user">
            <div
              style={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                background: 'var(--accent)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontWeight: 600,
                fontSize: '14px'
              }}
            >
              {(user?.name || user?.email || '?').trim().slice(0, 1).toUpperCase()}
            </div>
            <div className="desktop-sidebar__user-text">
              <span className="desktop-sidebar__user-name">
                {user?.name || user?.email || 'User'}
              </span>
              {tier ? (
                <span className="desktop-sidebar__user-tier">{tier}</span>
              ) : null}
            </div>
          </div>
          <button
            type="button"
            className="desktop-sidebar__logout"
            onClick={onLogout}
            title="Abmelden"
          >
            <LogOut size={18} />
          </button>
        </div>
      </div>
    </aside>
  )
}