const navF = 'var(--font-body)';
function NavIcon({ name, size = 18, color = 'currentColor' }) {
  const url = '../../icons/' + name + '.svg';
  return <span style={{ display: 'inline-block', flex: 'none', width: size, height: size, background: color, WebkitMask: 'url(' + url + ') center/contain no-repeat', mask: 'url(' + url + ') center/contain no-repeat' }}></span>;
}
const NAV_TREE = [
  { title: 'Today', items: [{ id: 'home', icon: 'layout-list', label: 'Home worklist', badge: '3' }] },
  { title: 'Cases', items: [{ id: 'case', icon: 'folder-open', label: 'Eleanor Vance', sub: 'Annual review · 82% ready', children: [
    { id: 'case', label: 'Case workspace' }, { id: 'assembly', label: 'Case assembly' }, { id: 'missing', label: 'Missing info checklist', badge: '1' }, { id: 'copilot', label: 'Copilot' }] }] },
  { title: 'Review & deliver', items: [{ id: 'compliance', icon: 'shield-check', label: 'Compliance review' }, { id: 'proposal', icon: 'file-pen-line', label: 'Proposal builder' }, { id: 'finalize', icon: 'send', label: 'Approval & delivery' }, { id: 'audit', icon: 'history', label: 'Audit trail' }] },
  { title: 'Tools', items: [{ id: 'extract', icon: 'wand-sparkles', label: 'Extract' }, { id: 'policy', icon: 'file-text', label: 'Policy info' }, { id: 'assist', icon: 'sparkles', label: 'Policy assist' }] },
];
function NavBadge({ n, tone }) {
  return <span style={{ minWidth: 20, height: 20, padding: '0 6px', boxSizing: 'border-box', borderRadius: 10, background: tone === 'coral' ? 'var(--ah-coral-100)' : 'var(--ah-teal-100)', color: tone === 'coral' ? 'var(--ah-coral-600)' : 'var(--ah-teal-700)', fontFamily: navF, fontSize: 11, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{n}</span>;
}
function AppNavigation({ go = () => {}, current = 'home' }) {
  const Under = window.HomeAdvisorWorklist;
  const row = (active) => ({ all: 'unset', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', borderRadius: 10, background: active ? 'var(--ah-teal-50)' : 'transparent' });
  const label = (active) => ({ flex: 1, minWidth: 0, fontFamily: navF, fontSize: 15, fontWeight: active ? 700 : 500, color: active ? 'var(--ah-teal-700)' : 'var(--text-heading)' });
  return <div style={{ position: 'relative', width: 430, height: 932, overflow: 'hidden', background: 'var(--surface-page)' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>{Under ? <Under /> : null}</div>
    <div onClick={() => go('home')} style={{ position: 'absolute', inset: 0, background: 'transparent', cursor: 'pointer' }}></div>
    <nav aria-label="App navigation" style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 332, background: 'var(--ah-white)', borderRadius: '0 24px 24px 0', boxShadow: '12px 0 40px rgba(37,56,51,0.18)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '56px 20px 18px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: '1px solid var(--border-subtle)' }}>
        <img src="../../assets/avatar-advisor.png" alt="" style={{ width: 48, height: 48, borderRadius: 24, objectFit: 'cover', flex: 'none' }} />
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{ fontFamily: navF, fontSize: 16, fontWeight: 700, color: 'var(--text-heading)' }}>Maya Reyes</span>
          <span style={{ fontFamily: navF, fontSize: 12, color: 'var(--text-muted)' }}>Senior Financial Advisor</span>
        </div>
        <button aria-label="Close menu" onClick={() => go('home')} style={{ all: 'unset', cursor: 'pointer', width: 36, height: 36, borderRadius: 18, background: 'var(--ah-ink-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-heading)', flex: 'none' }}><NavIcon name="x" size={18} /></button>
      </div>
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', scrollbarWidth: 'none', padding: '12px 12px 8px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {NAV_TREE.map(sec => <div key={sec.title} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <div style={{ padding: '0 12px 6px', fontFamily: navF, fontSize: 11, fontWeight: 600, color: 'var(--ah-ink-500)', letterSpacing: '1px', textTransform: 'uppercase' }}>{sec.title}</div>
          {sec.items.map(it => { const inCase = it.children && it.children.some(c => c.id === current); const active = !it.children && it.id === current; return <div key={it.label} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <button onClick={() => go(it.id)} style={row(active)}>
              <NavIcon name={it.icon} size={19} color={active || inCase ? 'var(--ah-teal-600)' : 'var(--ah-ink-500)'} />
              <span style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 1 }}><span style={label(active)}>{it.label}</span>{it.sub ? <span style={{ fontFamily: navF, fontSize: 12, color: 'var(--text-muted)' }}>{it.sub}</span> : null}</span>
              {it.badge ? <NavBadge n={it.badge} /> : null}{it.children ? <NavIcon name="chevron-down" size={16} color="var(--ah-ink-500)" /> : null}
            </button>
            {it.children ? <div style={{ marginLeft: 21, paddingLeft: 12, borderLeft: '2px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: 2 }}>
              {it.children.map(c => { const a = c.id === current; return <button key={c.label} onClick={() => go(c.id)} style={{ ...row(a), padding: '8px 12px' }}><span style={{ ...label(a), fontSize: 14 }}>{c.label}</span>{c.badge ? <NavBadge n={c.badge} tone="coral" /> : null}</button>; })}
            </div> : null}
          </div>; })}
        </div>)}
      </div>
      <div style={{ padding: '10px 12px 30px', borderTop: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: 2 }}>
        <button onClick={() => go('setup1')} style={row(false)}><NavIcon name="user-round-cog" size={19} color="var(--ah-ink-500)" /><span style={label(false)}>Advisor profile</span></button>
        <button onClick={() => go('loading')} style={row(false)}><NavIcon name="log-out" size={19} color="var(--ah-coral-500)" /><span style={{ ...label(false), color: 'var(--ah-coral-600)' }}>Sign out</span></button>
      </div>
    </nav>
  </div>;
}
Object.assign(window, { AppNavigation });