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

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

const NAV = [
  { id: 'briefing',     label: 'Briefing',           icon: Icons.alert, badge: '2' },
  { id: 'household',    label: 'Household',          icon: Icons.home },
  { id: 'alts',         label: 'Alternatives',       icon: Icons.spark, badge: '6' },
  { id: 'structured',   label: 'Structured Products',icon: Icons.table, badge: 'RFQ' },
  { id: 'insights',     label: 'AI Insights',        icon: Icons.bulb,  badge: '4' },
];

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 },
];

function Brand() {
  return (
    <div className="brand">
      <span className="mark">S</span>
      <div>
        <div className="name">Slate</div>
        <div className="sub">Private Wealth</div>
      </div>
    </div>
  );
}

function Sidebar({ route, navigate, hasPortfolio, mobileOpen, onMobileClose }) {
  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>
        <div className="nav-section">
          <div className="h label">Workspace</div>
          {NAV.map(n => (
            <div key={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`}
              onClick={() => handleNav(n.id, true)}
              style={!hasPortfolio ? { opacity: 0.45, cursor: 'not-allowed' } : null}>
              <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', gap:10, padding:'4px 6px' }}>
            <span className="avatar">CH</span>
            <div style={{ minWidth:0, flex:1 }}>
              <div style={{ fontSize:13, fontWeight:500, lineHeight:1.1, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>Christine Holloway</div>
              <div style={{ fontSize:11, color:'var(--ink-3)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>Relationship Manager</div>
            </div>
          </div>
        </div>
      </aside>
    </React.Fragment>
  );
}

function Topbar({ crumbs, onTheme, theme, onMobileMenu, navigate }) {
  return (
    <div className="topbar">
      <button className="btn ghost icon mobile-menu-btn" onClick={onMobileMenu} title="Menu" aria-label="Open menu">
        <span dangerouslySetInnerHTML={{ __html: Icons.menu }} />
      </button>
      <a className="topbar-brand" onClick={() => navigate && navigate('briefing')} role="link" tabIndex={0}>
        <span className="topbar-brand-mark">S</span>
        <span className="topbar-brand-name">Slate</span>
      </a>
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            <span className={i === crumbs.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="spacer"/>
      <button className="btn ghost icon" onClick={onTheme} title="Toggle theme">
        <span dangerouslySetInnerHTML={{ __html: theme === 'dark' ? Icons.sun : Icons.moon }} />
      </button>
      <button className="btn ghost icon topbar-download-btn" title="Download report">
        <span dangerouslySetInnerHTML={{ __html: Icons.download }} />
      </button>
      <span className="avatar topbar-avatar">CH</span>
    </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 };