// nav.jsx — desktop & tablet side navigation for Nurse CNE
// Hidden on mobile via CSS (.sidenav { display: none; }).

function SideNav({ active, onChange, lang, setLang, onLog, profile, session, onOpenSheet, onSignIn, onSignOut, hasReminders }) {
  const initials = (() => {
    if (!profile) return '·';
    const s = (profile.name_en || profile.name_zh || '·').trim().split(/\s+/).map(p => p[0]).join('').slice(0, 2);
    return s.toUpperCase() || '·';
  })();

  // SideNav item — M.button so it gets a subtle whileTap depress and
  // a hairline whileHover translate. Aria attrs are mandatory: this is
  // the primary nav on tablet+/desktop.
  const item = (id, icon, labelKey) => (
    <M.button
      key={id}
      type="button"
      className={'sn-item' + (active === id ? ' on' : '')}
      onClick={() => onChange(id)}
      title={L(STR[labelKey], lang)}
      aria-label={L(STR[labelKey], lang)}
      aria-current={active === id ? 'page' : undefined}
      whileTap={{ scale: 0.96 }}
      whileHover={{ x: 2 }}
      transition={{ duration: 0.14 }}
    >
      <Icon name={icon} size={20} stroke={active === id ? 1.9 : 1.6} />
      <span className="sn-label">{L(STR[labelKey], lang)}</span>
    </M.button>
  );

  return (
    <aside className="sidenav" aria-label="Primary">
      <div className="sn-brand">
        <VitalBrand markSize={38} compact />
        <div className="sn-brand-text">
          <div className="vital-brand-name serif">Vital</div>
          <div className="vital-brand-tag mono">CNE · Hong Kong</div>
        </div>
      </div>

      <div className="sn-items">
        {item('home',      'home',    'home')}
        {item('discover',  'compass', 'discover')}
        {item('record',    'book',    'myRecord')}
        {item('profile',   'user',    'profile')}

        <M.button
          type="button"
          className="sn-item"
          onClick={() => onOpenSheet && onOpenSheet('reminders')}
          title={lang === 'zh' ? '提醒' : 'Reminders'}
          whileTap={{ scale: 0.96 }}
          whileHover={{ x: 2 }}
          transition={{ duration: 0.14 }}
        >
          <Icon name="bell" size={20} stroke={1.6} />
          {hasReminders ? <span className="sn-dot" aria-hidden="true"></span> : null}
          <span className="sn-label">
            {lang === 'zh' ? '提醒' : 'Reminders'}
            {hasReminders ? <span className="sn-count">{hasReminders}</span> : null}
          </span>
        </M.button>

        <div style={{ flex: 1 }} />

        <M.button
          type="button"
          className="sn-log-btn"
          onClick={onLog}
          title={L(STR.logCourse, lang)}
          aria-label={L(STR.logCourse, lang)}
          whileTap={{ scale: 0.95 }}
          whileHover={{ y: -1 }}
          transition={{ duration: 0.16 }}
        >
          <Icon name="plus" size={18} stroke={2.2} />
          <span className="sn-label">{L(STR.logCourse, lang)}</span>
        </M.button>
      </div>

      <div className="sn-footer">
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <LangPill lang={lang} setLang={setLang} />
        </div>
        {session && profile ? (
          <div className="sn-user">
            <div className="avatar">{initials}</div>
            <div className="sn-user-meta">
              <div className="sn-user-name">
                {profile.name_en || profile.name_zh || '—'}
              </div>
              <div className="sn-user-sub">
                {profile.license_no || '—'}
              </div>
            </div>
          </div>
        ) : (
          <M.button
            type="button"
            className="sn-signin-btn"
            onClick={onSignIn}
            title={lang === 'zh' ? '登入' : 'Sign in'}
            aria-label={lang === 'zh' ? '登入' : 'Sign in'}
            whileTap={{ scale: 0.95 }}
            whileHover={{ y: -1 }}
            transition={{ duration: 0.16 }}
          >
            <Icon name="user" size={16} stroke={1.8} />
            <span className="sn-label">{lang === 'zh' ? '登入' : 'Sign in'}</span>
          </M.button>
        )}
      </div>
    </aside>
  );
}

window.SideNav = SideNav;