import { NavLink, useLocation } from 'react-router-dom'
import { LogOut } from 'lucide-react'
import { Avatar } from '../pages/ProfileSelect'
import { getMainNavItems } from '../config/appNav'
import { isCaptureSectionPath } from '../config/captureNav'

function sidebarLinkActive(pathname, item, routerIsActive) {
  if (item.to.startsWith('/admin')) return pathname.startsWith('/admin')
  if (item.to === '/capture' && isCaptureSectionPath(pathname)) return true
  return routerIsActive
}

/**
 * Desktop-Sidebar (≥1024px) — Sichtbarkeit via CSS (.desktop-sidebar).
 */
export default function DesktopSidebar({
  isAdmin,
  activeProfile,
  sessionProfile,
  onLogout
}) {
  const loc = useLocation()
  const items = getMainNavItems(isAdmin)
  const tier = (activeProfile && activeProfile.tier) || sessionProfile?.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">Mitai Jinkendo</div>
      </div>

      <nav className="desktop-sidebar__nav">
        {items.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            state={item.to === '/history' ? { tab: 'overview' } : undefined}
            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">
        <NavLink to="/settings" className="desktop-sidebar__user">
          {activeProfile ? (
            <Avatar profile={activeProfile} size={32} />
          ) : (
            <div
              style={{
                width: 32,
                height: 32,
                borderRadius: '50%',
                background: 'var(--accent)'
              }}
            />
          )}
          <div className="desktop-sidebar__user-text">
            <span className="desktop-sidebar__user-name">
              {activeProfile?.name || 'Profil'}
            </span>
            {tier ? (
              <span className="desktop-sidebar__user-tier">{tier}</span>
            ) : null}
          </div>
        </NavLink>
        <button
          type="button"
          className="desktop-sidebar__logout"
          onClick={onLogout}
          title="Abmelden"
        >
          <LogOut size={18} />
        </button>
      </div>
    </aside>
  )
}