// Dashboard — page shell (Sidebar + Header). Lifted from the Investment
// Insights shell so all pages read as one product; only the active nav item
// and the page title change. The dashboard greets by name rather than naming
// the page, per the Figma header.
function DBSidebar({ expanded, overlay, onToggle, mobileOpen, onMobileClose, onStartTour }) {
  const primary = [
    ['home', 'Dashboard', true, 'Dashboard.html'],
    ['wallet', 'Financial Profile', false, 'Financial%20Profile.html'],
    ['settings-2', 'Plan Settings', false, 'Plan%20Settings.html'],
    ['calculator', 'Plan Confidence', false, 'Plan%20Confidence.html'],
    ['line-chart', 'Cash Flows', false, 'Cash%20Flows.html'],
    ['sliders-horizontal', 'Investment Insights', false, 'Investment%20Insights.html'],
    ['waypoints', 'Scenarios', false, 'Scenarios.html'],
    ['file-text', 'Report', false, 'Report.html'],
    ['layers', 'My Plans', false, 'My%20Plans.html', true, true],
    ['globe', 'Global Settings', false, 'Global%20Settings.html']];

  const secondary = [
    ['Book Consultation', true, 'calendar-plus'],
    ['Support', false, 'life-buoy'],
    ['Knowledge Base', false, 'book-open']];

  const primaryDefs = primary.map(([icon, label, on, href, sep, plans]) => ({ icon, label, on, href, sep, plans }));
  const secondaryDefs = secondary.map(([label, accent, icon]) => ({ label, accent, icon, iconColor: accent ? '#1A4BEB' : undefined }));

  return (
    <>
      {mobileOpen && <div className="sb-scrim" onClick={onMobileClose}></div>}
      <aside className={`sb ${expanded ? 'is-expanded' : ''} ${overlay ? 'is-hover-expand' : ''} ${mobileOpen ? 'is-mobile-open' : ''}`}>
        <button className="sb__rail-toggle" onClick={onToggle}
          aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'} title={expanded ? 'Collapse sidebar' : 'Expand sidebar'}>
          <span style={{ display: 'inline-flex' }}>
            <Icon name={expanded ? 'chevron-left' : 'chevron-right'} style={{ width: 14, height: 14 }} />
          </span>
        </button>
        <div className="sb__top">
          <button className="sb__logo" onClick={onToggle} aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'} title={expanded ? 'Collapse sidebar' : 'Expand sidebar'}>
            <span className="sb__logo-mark">
              <svg width="22" height="24" viewBox="0 0 22 24" fill="none">
                <path d="M22.4371 0V10.4493L19.4258 13.4606H17.0469V3.01131L20.0582 0H22.4371Z" fill="#2E5FFF" opacity=".55" />
                <path d="M17.0455 13.4607V15.7192L14.0341 18.7305H8.52344V6.02273L11.5348 3.01141H13.9137V13.4607H17.0455Z" fill="#2E5FFF" opacity=".8" />
                <path d="M8.52202 18.7302V20.9887L5.5107 24H0V9.03378L3.01131 6.02246H5.39025V18.7302H8.52202Z" fill="#2E5FFF" />
              </svg>
              <span className="sb__logo-toggle" aria-hidden="true">
                <span style={{ display: 'inline-flex' }}>
                  <Icon name={expanded ? 'panel-left-close' : 'panel-left-open'} style={{ width: 14, height: 14 }} />
                </span>
              </span>
            </span>
            {expanded && <span className="sb__brand">Wealthtrace</span>}
          </button>
        </div>

        <window.SbOverflowNav expanded={expanded} primary={primaryDefs} secondary={secondaryDefs} />

        {onStartTour &&
          (expanded ?
            <button className="sb__tour" onClick={onStartTour}>
              <span className="sb__tour-ic"><Icon name="compass" style={{ width: 17, height: 17 }} /></span>
              <span className="sb__tour-txt">
                <span className="sb__tour-t">Guided Tour</span>
                <span className="sb__tour-d">Learn about Dashboard</span>
              </span>
            </button> :
            <button className="sb__btn sb__btn--tour" title="Guided Tour" onClick={onStartTour}>
              <span className="sb__btn-ic"><Icon name="compass" style={{ width: 18, height: 18 }} /></span>
            </button>)}
      </aside>
    </>);
}

function DBHeader({ onMobileMenu }) {
  return (
    <div className="head">
      <button className="head__menu" onClick={onMobileMenu} aria-label="Open menu" title="Menu">
        <Icon name="menu" style={{ width: 18, height: 18 }} />
      </button>
      <div className="head__l">
        <div className="head__title-row">
          <h1>Welcome, Allison</h1>
          <span className="deluxe">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="#fff"><path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm0 3h14v2H5z" /></svg>
            DELUXE
          </span>
        </div>
      </div>
      <div className="head__r">
        <button className="pill acct-pill">
          <Icon name="user" style={{ width: 14, height: 14 }} />
          oleg.st@halo-lab.team
          <Icon name="chevron-down" style={{ width: 13, height: 13, opacity: .5 }} />
        </button>
        <button className="icb">
          <Icon name="bell" style={{ width: 16, height: 16 }} />
        </button>
      </div>
    </div>);
}

Object.assign(window, { DBSidebar, DBHeader });