// Shared portal shell — sidebar + topbar — used by all logged-in artboards
// Usage: <PortalShell active="appointments"><PageContent/></PortalShell>

const NAV_ITEMS = [
  { k: 'home',         label: 'Home',           icon: 'pulse',    route: '/dashboard'    },
  { k: 'appointments', label: 'Appointments',   icon: 'calendar', route: '/appointments' },
  { k: 'records',      label: 'Dental Records', icon: 'doc',      route: '/records'       },
  { k: 'payments',     label: 'Payments',       icon: 'card',     route: '/payments'      },
  { k: 'profile',      label: 'Profile',        icon: 'user',     route: '/profile'       },
];

function PortalShell({ active = 'home', children, title, subtitle, action }) {
  const { user } = useAuth();
  const initials = user?.initials || (window.molaraAuth?.initialsFor ? window.molaraAuth.initialsFor(user?.name || 'Patient') : 'PT');
  return (
    <div className="ml-root" style={{ display: 'grid', gridTemplateColumns: '232px 1fr', height: '100%' }}>
      {/* Sidebar */}
      <aside style={{
        background: '#fff',
        borderRight: '1px solid var(--line)',
        padding: '22px 16px',
        display: 'flex', flexDirection: 'column', gap: 4,
      }}>
        <div onClick={() => window.navigate && window.navigate('/dashboard')} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 10px 18px', cursor: 'pointer' }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--blue)', display: 'grid', placeItems: 'center', color: '#fff' }}>
            <I.pulse size={16}/>
          </div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 18, letterSpacing: '-0.02em' }}>molara</div>
        </div>

        {NAV_ITEMS.map(item => {
          const on = item.k === active;
          const Icon = I[item.icon];
          return (
            <button key={item.k}
              onClick={() => window.navigate && window.navigate(item.route)}
              style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '9px 12px',
                borderRadius: 8,
                background: on ? 'var(--blue-soft)' : 'transparent',
                color: on ? 'var(--blue-deep)' : 'var(--ink-2)',
                fontSize: 13.5, fontWeight: on ? 500 : 400,
                cursor: 'pointer',
                border: 'none', textAlign: 'left',
                fontFamily: 'inherit',
              }}>
              <Icon size={16}/>
              <span>{item.label}</span>
            </button>
          );
        })}

        <div style={{ marginTop: 'auto', borderTop: '1px solid var(--line)', paddingTop: 14 }}>
          <div style={{
            background: 'oklch(96% 0.02 240)', borderRadius: 12, padding: 14,
            fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.5,
          }}>
            <div style={{ fontWeight: 500, color: 'var(--ink)', marginBottom: 4 }}>Need urgent help?</div>
            <div className="ml-muted" style={{ fontSize: 11.5, marginBottom: 8 }}>Connect with a dentist in under 5 minutes.</div>
            <button onClick={() => window.navigate && window.navigate('/book')} className="ml-btn ml-btn--primary" style={{ padding: '7px 12px', fontSize: 12, width: '100%', justifyContent: 'center' }}>
              <I.video size={13}/> Consult now
            </button>
          </div>
        </div>
      </aside>

      {/* Main */}
      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {/* Topbar */}
        <div style={{
          height: 64, padding: '0 32px',
          borderBottom: '1px solid var(--line)',
          background: '#fff',
          display: 'flex', alignItems: 'center', gap: 16,
        }}>
          <div style={{ flex: 1 }}>
            {title && <div style={{ fontFamily: 'var(--display)', fontSize: 22, letterSpacing: '-0.025em' }}>{title}</div>}
            {subtitle && <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginTop: 2 }}>{subtitle}</div>}
          </div>
          {action}
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', borderRadius: 999, border: '1px solid var(--line)' }}>
            <I.bell size={15} color="var(--ink-2)"/>
            <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>2</span>
          </div>
          <div className="ml-avatar" style={{ width: 36, height: 36, borderRadius: '50%', fontSize: 13 }}>{initials}</div>
        </div>

        {/* Page body */}
        <div style={{ flex: 1, overflow: 'auto', background: 'var(--paper)' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

window.PortalShell = PortalShell;
window.NAV_ITEMS = NAV_ITEMS;