// Sidebar.jsx — nav + wordmark
const { useState } = React;

const Icon = ({ name, size = 16, stroke = 1.5, className = '' }) => {
  const paths = {
    mic: <><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></>,
    file: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></>,
    check: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    copy: <><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>,
    x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    play: <polygon points="5 3 19 12 5 21 5 3"/>,
    download: <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>,
    chevLeft: <polyline points="15 18 9 12 15 6"/>,
    alert: <><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" className={className}>{paths[name]}</svg>;
};

const NAV = [
  { id: 'dictation', label: 'Dictation', icon: 'mic' },
  { id: 'files', label: 'Files', icon: 'file' },
  { id: 'tasks', label: 'Tasks', icon: 'check' },
  { id: 'history', label: 'History', icon: 'clock' },
  { id: 'settings', label: 'Settings', icon: 'settings' },
];

function Sidebar({ current, onNav, taskCount = 0, status = 'Ready', statusColor = '#7ec89a' }) {
  return (
    <aside style={{width:210, minWidth:210, background:'var(--sidebar)', borderRight:'1px solid var(--border-subtle)', display:'flex', flexDirection:'column', height:'100%'}}>
      <div style={{display:'flex', alignItems:'baseline', gap:8, padding:'16px 20px 0'}}>
        <h1 style={{font:'italic 400 26px/1 var(--font-display)', color:'var(--text)', margin:0, letterSpacing:'-.01em'}}>Lumotia</h1>
        <span style={{fontSize:18, color:'var(--accent)'}}>&#3559;</span>
      </div>
      <p style={{font:'500 10px/1.3 var(--font-body)', color:'var(--text-tertiary)', margin:'6px 20px 0', letterSpacing:'.12em', textTransform:'uppercase'}}>Think out loud</p>
      <div style={{margin:'16px 20px', height:1, background:'var(--border-subtle)'}} />

      <nav style={{display:'flex', flexDirection:'column', gap:2, padding:'0 12px'}}>
        {NAV.map(item => {
          const active = current === item.id;
          return (
            <button key={item.id} onClick={() => onNav(item.id)}
              style={{display:'flex', alignItems:'center', gap:10, padding:'8px 12px', borderRadius:8, border:'none', cursor:'pointer', textAlign:'left',
                background: active ? 'var(--nav-active)' : 'transparent',
                color: active ? 'var(--text)' : 'var(--text-secondary)',
                fontWeight: active ? 500 : 400, fontSize:13, fontFamily:'var(--font-body)'}}
              onMouseEnter={e => !active && (e.currentTarget.style.background='var(--hover)')}
              onMouseLeave={e => !active && (e.currentTarget.style.background='transparent')}>
              <span style={{color: active ? 'var(--accent)' : 'var(--text-tertiary)', display:'flex'}}>
                <Icon name={item.icon} stroke={active ? 2 : 1.5}/>
              </span>
              <span>{item.label}</span>
              {item.id === 'tasks' && taskCount > 0 && (
                <span style={{marginLeft:'auto', font:'500 10px var(--font-body)', padding:'1px 7px', borderRadius:999, background:'rgba(232,168,124,.15)', color:'var(--accent)'}}>{taskCount}</span>
              )}
            </button>
          );
        })}
      </nav>

      <div style={{flex:1}} />
      <div style={{margin:'0 20px 12px', height:1, background:'var(--border-subtle)'}} />
      <div style={{padding:'0 20px 20px'}}>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <span style={{width:7, height:7, borderRadius:999, background:statusColor, flexShrink:0}}/>
          <span style={{font:'400 11px var(--font-body)', color:'var(--text-secondary)'}}>{status}</span>
        </div>
        <p style={{font:'400 10px var(--font-body)', color:'var(--text-tertiary)', margin:'6px 0 0'}}>Clean · v0.1</p>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar, Icon });
