// FRAZIER Finance OS — app shell: 6-item nav (Home · Invoices · Payroll ·
// Forecast · Jarvis · Files), Settings hidden behind the profile button.
// Pattern modeled on the ops app's sidebar shell, own code (no import).

const FIN_NAV = [
  { id: 'home',     label: 'Home',     icon: 'home' },
  { id: 'invoices', label: 'Invoices', icon: 'invoice' },
  { id: 'payroll',  label: 'Payroll',  icon: 'payroll' },
  { id: 'forecast', label: 'Forecast', icon: 'forecast' },
  { id: 'jarvis',   label: 'Jarvis',   icon: 'jarvis' },
  { id: 'files',    label: 'Files',    icon: 'files' },
];

function finInitials(name) {
  const s = String(name || '').trim();
  if (!s) return '—';
  const parts = s.split(/\s+/);
  return ((parts[0][0] || '') + (parts[1] ? parts[1][0] : '')).toUpperCase();
}

function FinShell({ page, onNavigate, user, onLogout, children }) {
  const [profileOpen, setProfileOpen] = React.useState(false);
  return (
    <div className="fin-shell">
      <aside className="fin-side">
        <div className="fin-side-brand">
          <span className="fin-side-mark" aria-hidden="true">F</span>
          <span className="fin-side-name">Finance OS</span>
        </div>
        <nav className="fin-side-nav" aria-label="Main">
          {FIN_NAV.map((n) => (
            <button key={n.id} type="button" className={finCls('fin-side-item', page === n.id ? 'is-on' : '')}
              aria-current={page === n.id ? 'page' : undefined} onClick={() => onNavigate(n.id)}>
              <FinIcon name={n.icon} size={18} />
              <span>{n.label}</span>
            </button>
          ))}
        </nav>
        <div className="fin-side-profile">
          <button type="button" className="fin-side-me" onClick={() => setProfileOpen((v) => !v)}
            aria-haspopup="menu" aria-expanded={profileOpen ? 'true' : 'false'}>
            <span className="fin-side-av" aria-hidden="true">{finInitials(user && user.name)}</span>
            <span className="fin-side-me-t">
              <b>{(user && user.name) || 'Account'}</b>
              <span>{(user && user.role) || ''}</span>
            </span>
          </button>
          {profileOpen ? (
            <div className="fin-side-menu" role="menu">
              <button type="button" role="menuitem" onClick={() => { setProfileOpen(false); onLogout(); }}>
                <FinIcon name="logout" size={15} /> Log out
              </button>
            </div>
          ) : null}
        </div>
      </aside>
      <main className="fin-main">{children}</main>
    </div>
  );
}

Object.assign(window, { FIN_NAV, FinShell, finInitials });