// Slate — App Shell (sidebar, topbar, router, entity filter)

const { Icons, fmt, ACCOUNTS } = window.Slate;

const NAV_MEET_WORKSPACE = [
  { id: 'briefing',     label: 'Briefing',           icon: Icons.alert, badge: '2' },
  { id: 'household',    label: 'Household',          icon: Icons.home },
  { id: 'insights',     label: 'AI Insights',        icon: Icons.bulb,  badge: '4' },
];

const NAV_MEET_INVESTMENTS = [
  { id: 'alts',         label: 'Alternatives',       icon: Icons.spark, badge: '6' },
  { id: 'structured',   label: 'Structured Products',icon: Icons.table, badge: 'RFQ' },
  { id: 'fx',           label: 'FX',                 icon: Icons.fx },
];

const NAV_INTAKE = [
  { id: 'upload',       label: 'Upload',            icon: Icons.upload },
  { id: 'parsing',      label: 'Parsing…',          icon: Icons.spark },
  { id: 'review',       label: 'Parse Review',      icon: Icons.inbox },
];

const NAV_PLAN_WORKSPACE = [
  { id: 'overview',    label: 'Overview',           icon: Icons.home },
  { id: 'clients',     label: 'Clients',            icon: Icons.users },
  { id: 'insights',    label: 'AI Insights',        icon: Icons.bulb,  badge: '4' },
];

const NAV_PLAN_INVESTMENTS = [
  { id: 'alts',        label: 'Alternatives',       icon: Icons.spark, badge: '6' },
  { id: 'structured',  label: 'Structured Products',icon: Icons.table, badge: 'RFQ' },
  { id: 'fx',          label: 'FX',                 icon: Icons.fx },
];

const FirmMark = ({ className, width = 15, height = 12 }) => (
  <svg viewBox="0 0 15 12" fill="currentColor" width={width} height={height} aria-hidden="true">
    <rect x="0"    y="7"   width="4" height="5"   rx="0.8"/>
    <rect x="5.5"  y="3.5" width="4" height="8.5" rx="0.8"/>
    <rect x="11"   y="0"   width="4" height="12"  rx="0.8"/>
  </svg>
);

function Brand() {
  return (
    <div className="brand">
      <span className="mark" style={{ display:'inline-flex', alignItems:'center', justifyContent:'center', transform:'translateY(-1px)' }}>
        <FirmMark/>
      </span>
      <div>
        <div className="name">Meridian</div>
        <div className="sub">Private Wealth</div>
      </div>
    </div>
  );
}

function Sidebar({ route, navigate, hasPortfolio, mobileOpen, onMobileClose, viewMode }) {
  const close = () => onMobileClose && onMobileClose();
  const handleNav = (id, gated) => {
    if (gated && !hasPortfolio) return;
    navigate(id);
    close();
  };
  return (
    <React.Fragment>
      <div className={`sidebar-backdrop ${mobileOpen ? 'show' : ''}`} onClick={close}/>
      <aside className={`sidebar ${mobileOpen ? 'open' : ''}`}>
        <div className="sidebar-top-row">
          <Brand/>
          <button className="btn ghost icon sidebar-close-btn" onClick={close} title="Close menu" aria-label="Close menu">
            <span dangerouslySetInnerHTML={{ __html: Icons.close }} />
          </button>
        </div>
        {viewMode === 'plan' ? (
          <>
            <div className="nav-section">
              <div className="h label">Workspace</div>
              {NAV_PLAN_WORKSPACE.map(n => (
                <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`} onClick={() => handleNav(n.id, false)}>
                  <span dangerouslySetInnerHTML={{ __html: n.icon }} />
                  <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{n.label}</span>
                  {n.badge && <span className="badge">{n.badge}</span>}
                </div>
              ))}
            </div>
            <div className="nav-section">
              <div className="h label">Investments</div>
              {NAV_PLAN_INVESTMENTS.map(n => (
                <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`} onClick={() => handleNav(n.id, false)}>
                  <span dangerouslySetInnerHTML={{ __html: n.icon }} />
                  <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{n.label}</span>
                  {n.badge && <span className="badge">{n.badge}</span>}
                </div>
              ))}
            </div>
          </>
        ) : (
          <>
            <div className="nav-section">
              <div className="h label">Workspace</div>
              {NAV_MEET_WORKSPACE.map(n => (
                <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`}
                  onClick={() => handleNav(n.id, false)}>
                  <span dangerouslySetInnerHTML={{ __html: n.icon }} />
                  <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{n.label}</span>
                  {n.badge && <span className="badge">{n.badge}</span>}
                </div>
              ))}
            </div>
            <div className="nav-section">
              <div className="h label">Investments</div>
              {NAV_MEET_INVESTMENTS.map(n => (
                <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`}
                  onClick={() => handleNav(n.id, false)}>
                  <span dangerouslySetInnerHTML={{ __html: n.icon }} />
                  <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{n.label}</span>
                  {n.badge && <span className="badge">{n.badge}</span>}
                </div>
              ))}
            </div>
            <div className="nav-section">
              <div className="h label">Intake</div>
              {NAV_INTAKE.map(n => (
                <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`} onClick={() => handleNav(n.id, false)}>
                  <span dangerouslySetInnerHTML={{ __html: n.icon }} />
                  <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{n.label}</span>
                </div>
              ))}
            </div>
          </>
        )}
        <div style={{ marginTop: 'auto', display:'flex', flexDirection:'column', gap:8 }}>
          <hr className="divider"/>
          <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:6, padding:'6px 6px 2px', opacity:0.45 }}>
            <FirmMark width={11} height={9}/>
            <span style={{ fontSize:11, fontWeight:500, letterSpacing:'0.04em', color:'var(--ink-1)' }}>Powered by <a href="https://viaslate.com" target="_blank" rel="noopener noreferrer" style={{ color:'inherit', textDecoration:'none' }}>Slate</a></span>
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
}

function Topbar({ crumbs, onTheme, theme, onMobileMenu, navigate, viewMode, onViewMode }) {
  return (
    <div className={`topbar${viewMode === 'meet' ? ' meet-mode' : ''}`}>
      <button className="btn ghost icon mobile-menu-btn" onClick={onMobileMenu} title="Menu" aria-label="Open menu">
        <span dangerouslySetInnerHTML={{ __html: Icons.menu }} />
      </button>
      <button className="topbar-brand" onClick={() => navigate && navigate('briefing')}>
        <span className="topbar-brand-mark" style={{ display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
          <FirmMark/>
        </span>
        <span className="topbar-brand-name">Meridian</span>
      </button>
      <div className="crumbs topbar-crumbs">
        {(crumbs.length > 3 ? [crumbs[0], '…', crumbs[crumbs.length - 1]] : crumbs).map((c, i, arr) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={i === arr.length - 1 ? 'last' : ''}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div className="search topbar-search">
        <span dangerouslySetInnerHTML={{ __html: Icons.search }} />
        <input placeholder="Search holdings, accounts, insights…"/>
        <span className="kbd">⌘K</span>
      </div>
      <div className="topbar-right">
        <div style={{ display:'flex', alignItems:'center', gap:0 }}>
          <span className="mode-tip-wrap" data-tip={theme === 'dark' ? 'Switch to Dawn Mode' : 'Switch to Dusk Mode'}>
            <button className="btn ghost icon" onClick={onTheme}>
              <span dangerouslySetInnerHTML={{ __html: theme === 'dark' ? Icons.sun : Icons.moon }} />
            </button>
          </span>
          <span className="mode-tip-wrap" data-tip="Download Report">
            <button className="btn ghost icon topbar-download-btn">
              <span dangerouslySetInnerHTML={{ __html: Icons.download }} />
            </button>
          </span>
        </div>
        <div className="view-toggle" style={{ marginLeft: -7 }}>
          <button className={`view-toggle-btn${viewMode === 'plan' ? ' active' : ''}`} onClick={() => onViewMode('plan')}>Plan</button>
          <button className={`view-toggle-btn meet-btn${viewMode === 'meet' ? ' active' : ''}`} onClick={() => onViewMode('meet')}>Meet</button>
        </div>
        <div className="avatar-menu">
        <span className="avatar avatar-trigger">CH</span>
        <div className="avatar-dropdown">
          <div className="avatar-dropdown-inner">
          <div className="avatar-dropdown-header">
            <div style={{ fontWeight:600, fontSize:13 }}>Christine Holloway</div>
            <div style={{ fontSize:11, color:'var(--ink-3)', marginTop:2 }}>Wealth Manager</div>
          </div>
          <hr className="avatar-dropdown-divider"/>
          <button className="avatar-dropdown-item">
            <span dangerouslySetInnerHTML={{ __html: Icons.users }}/> Profile
          </button>
          <button className="avatar-dropdown-item">
            <span dangerouslySetInnerHTML={{ __html: Icons.inbox }}/> Notifications
          </button>
          <button className="avatar-dropdown-item">
            <span dangerouslySetInnerHTML={{ __html: Icons.table }}/> Preferences
          </button>
          <hr className="avatar-dropdown-divider"/>
          <button className="avatar-dropdown-item avatar-dropdown-signout">
            <span dangerouslySetInnerHTML={{ __html: Icons.arrow }}/> Sign out
          </button>
          </div>
        </div>
        </div>
      </div>
    </div>
  );
}

function FilterBar({ selected, setSelected }) {
  const all = selected.length === 0;
  const toggle = id => {
    if (selected.includes(id)) setSelected(selected.filter(x => x !== id));
    else setSelected([...selected, id]);
  };
  return (
    <div className="filter-bar">
      <span className="label">Filter</span>
      <span className={`chip ${all ? 'on' : ''}`} onClick={() => setSelected([])}>All entities</span>
      {ACCOUNTS.map(a => {
        const on = selected.includes(a.id);
        return (
          <span key={a.id} className={`chip ${on ? 'on' : ''}`} onClick={() => toggle(a.id)}>
            {on ? '✓ ' : ''}{a.entity} · {a.name}
          </span>
        );
      })}
      <span style={{ flex:1 }}/>
      <span className="text-3" style={{ fontSize: 11.5 }}>{all ? `${ACCOUNTS.length} entities · all positions` : `${selected.length} of ${ACCOUNTS.length} entities`}</span>
    </div>
  );
}

window.Slate.Shell = { Sidebar, Topbar, Brand, FilterBar };