/**
 * [INPUT]: 依赖 ./icons 的 ZzmLogo/CollapseIcon/ChevronIcon/LogoutIcon；base.css 的 .zzm-navbtn/.zzm-userfoot 悬停类；controls.css 的 .zzm-btn
 * [OUTPUT]: 对外提供 SidebarNav 组件——综合页侧栏的展示版：收起键 + 星座标 + 扁平导航行 + 分组标签 + 名片 + 退出键
 * [POS]: src/extracted 的导航模式，复刻自 edu app-shell/Sidebars.jsx 的 HubSidebar/CourseSidebar。
 *   剥离了 V4Nav 路由状态与促销倒计时，只留「长什么样」：宽 266（edu 历史值）、行 9px 10px/圆角 8、当前行 .07 灰底 + 600。
 *   法则：导航行是扁平的（不是键）；真操作（收起/退出）才用 .zzm-btn 微拟物键
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */
import { ChevronIcon, CollapseIcon, LogoutIcon, ZzmLogo } from './icons'

const MONO = "ui-monospace,'SF Mono',Menlo,monospace"

const navBtn = (active) => ({
  display: 'flex', alignItems: 'center', gap: 10, padding: '9px 10px', border: 0, borderRadius: 8,
  cursor: 'pointer', textAlign: 'left', fontSize: 13.5, fontWeight: active ? 600 : 450, width: '100%',
  color: '#26261F', background: active ? 'rgba(0,0,0,.07)' : 'transparent', fontFamily: 'inherit',
})

export function SidebarNav({ brand = '赵子民', groups = [], active, user, onSelect, height = 560 }) {
  return (
    <aside style={{
      width: 266, height, display: 'flex', flexDirection: 'column', background: '#F6F6F4',
      borderRight: '1px solid rgba(0,0,0,.07)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px' }}>
        <button type="button" title="收起侧边栏" className="zzm-btn zzm-btn--ghost zzm-btn--sm zzm-btn--icon" style={{ flex: 'none' }}>
          <CollapseIcon />
        </button>
        <ZzmLogo />
        <div style={{ flex: 1, fontSize: 15, fontWeight: 650, letterSpacing: '.3px' }}>{brand}</div>
      </div>
      {groups.map((g, gi) => (
        <nav key={gi} style={{ padding: '2px 12px', display: 'flex', flexDirection: 'column', gap: 2 }}>
          {g.label ? (
            <div style={{ padding: '12px 10px 4px', fontFamily: MONO, fontSize: 10, letterSpacing: '1.5px', color: '#A2A29C' }}>{g.label}</div>
          ) : null}
          {g.items.map((it) => (
            <button key={it.id} type="button" onClick={() => onSelect?.(it.id)} className="zzm-navbtn" style={navBtn(active === it.id)}
              aria-current={active === it.id ? 'page' : undefined}>
              {it.icon ?? null}
              {it.label}
              {it.count != null ? (
                <>
                  <span style={{ flex: 1 }} />
                  <span style={{ fontFamily: MONO, fontSize: 9.5, color: '#B0B0AA' }}>{String(it.count).padStart(2, '0')}</span>
                </>
              ) : null}
            </button>
          ))}
        </nav>
      ))}
      <div style={{ flex: 1 }} />
      {user ? (
        <div style={{ padding: '10px 12px 14px', borderTop: '1px solid rgba(0,0,0,.07)' }}>
          <div className="zzm-userfoot" style={{ padding: '10px 10px 11px', borderRadius: 12, cursor: 'pointer', border: '1px solid transparent', transition: 'background .15s ease' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 36, height: 36, borderRadius: '50%', background: '#1D1D1B', color: '#FFFFFF', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, fontWeight: 650, flex: 'none' }}>
                {(user.name || 'U')[0]}
              </span>
              <span style={{ flex: 1, minWidth: 0 }}>
                <span style={{ display: 'block', fontSize: 13, fontWeight: 600, color: '#26261F' }}>{user.name}</span>
                <span style={{ display: 'block', marginTop: 1, fontSize: 10.5, color: '#A2A29C', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{user.email}</span>
              </span>
              <ChevronIcon />
            </div>
          </div>
          <button type="button" className="zzm-btn zzm-btn--block" style={{ marginTop: 6 }}>
            <LogoutIcon />
            退出登录
          </button>
        </div>
      ) : null}
    </aside>
  )
}