/* Sidebar.jsx — Ordentus left rail.
   Mini-calendar + nav rows. Active row promoted to white. */

const ICONS = {
  home:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12l9-8 9 8"/><path d="M5 10v10h14V10"/></svg>,
  calendar: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2.5"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
  sleep:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>,
  brain:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4.5a3 3 0 0 0-3 3v.2A3 3 0 0 0 7 13a3 3 0 0 0 2 2.8V18a2 2 0 1 0 3 0v-2.2A3 3 0 0 0 14 13a3 3 0 0 0-2-5.3v-.2a3 3 0 0 0 0-3z"/></svg>,
  heart:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>,
  bolt:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>,
  sun:      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></svg>,
};

function SidebarItem({ icon, color, label, count, active, onClick }) {
  return (
    <div className={`sb-item ${active ? 'active' : ''}`} onClick={onClick}>
      <span className="sb-icon" style={{ background: color }}>{icon}</span>
      <span>{label}</span>
      {count != null ? <span className="sb-count">{count}</span> : null}
    </div>
  );
}

function MiniCalendar() {
  // Simple May 2026 strip — Today = 13.
  const days = [
    [26,27,28,29,30, 1, 2],
    [ 3, 4, 5, 6, 7, 8, 9],
    [10,11,12,13,14,15,16],
    [17,18,19,20,21,22,23],
    [24,25,26,27,28,29,30],
  ];
  const isPrev = (n, ri) => ri === 0 && n > 7;
  const isToday = n => n === 13;
  return (
    <div style={{ background:'var(--bg-primary)', borderRadius:'10px', padding:'10px', boxShadow:'var(--shadow-sm)' }}>
      <div style={{ display:'flex', justifyContent:'space-between', fontSize:11, fontWeight:600, marginBottom:6 }}>
        <b>May 2026</b><span style={{ color:'var(--text-tertiary)' }}>‹  ›</span>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:0 }}>
        {['S','M','T','W','T','F','S'].map((d,i) => (
          <div key={i} style={{ fontSize:9, color:'var(--text-tertiary)', textAlign:'center', fontWeight:500, padding:'2px 0' }}>{d}</div>
        ))}
        {days.flat().map((n,i) => {
          const muted = isPrev(n, Math.floor(i/7));
          const today = isToday(n) && !muted;
          return (
            <div key={i} style={{
              fontSize:10, textAlign:'center', padding:'3px 0',
              color: muted ? 'var(--text-quaternary)' : (today ? '#fff' : 'var(--text-secondary)'),
              background: today ? 'var(--red)' : 'transparent',
              borderRadius: today ? '50%' : 0,
              fontWeight: today ? 600 : 400,
              fontVariantNumeric:'tabular-nums',
            }}>{n}</div>
          );
        })}
      </div>
    </div>
  );
}

function Sidebar({ activeView, onNav }) {
  return (
    <aside className="sidebar" data-screen-label="00 Sidebar">
      <div className="sb-date">
        <div className="dow">Wed</div>
        <div className="num">13</div>
        <div className="mon">May 2026</div>
        <div className="next">Next event<strong>CS 240 lecture · 9:00 AM</strong></div>
      </div>
      <MiniCalendar />

      <div className="sb-section">
        <div className="sb-label">Workspace</div>
        <SidebarItem icon={ICONS.home}     color="var(--accent)"  label="Home"     count="" active={activeView==='home'}     onClick={() => onNav('home')} />
        <SidebarItem icon={ICONS.calendar} color="var(--purple)"  label="Calendar"          active={activeView==='calendar'} onClick={() => onNav('calendar')} />
      </div>

      <div className="sb-section">
        <div className="sb-label">Health</div>
        <SidebarItem icon={ICONS.sleep} color="var(--purple)" label="Sleep"      count="14" active={activeView==='sleep'} onClick={() => onNav('sleep')} />
        <SidebarItem icon={ICONS.brain} color="var(--indigo)" label="Cognition"             active={activeView==='cog'}   onClick={() => onNav('cog')} />
        <SidebarItem icon={ICONS.heart} color="var(--red)"    label="Heart"                 active={activeView==='heart'} onClick={() => onNav('heart')} />
        <SidebarItem icon={ICONS.bolt}  color="var(--green)"  label="Activity"   count="9k" active={activeView==='act'}   onClick={() => onNav('act')} />
        <SidebarItem icon={ICONS.sun}   color="var(--teal)"   label="Mindfulness"           active={activeView==='mind'}  onClick={() => onNav('mind')} />
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;