// Shell — sidebar + topbar
const NAV = [
  { id: 'today', label: 'Today', icon: 'layout-dashboard' },
  { id: 'assistant', label: 'Opsmera AI', icon: 'sparkles', ai: true },
  { id: 'intake', label: 'Intake', icon: 'inbox', count: '34' },
  { id: 'board', label: 'Job board', icon: 'kanban', count: '44' },
  { id: 'compliance', label: 'Compliance', icon: 'shield-check', count: '6', alert: true },
  { id: 'portfolio', label: 'Portfolio', icon: 'building-2' },
];
const NAV2 = [
  { id: 'invoices', label: 'Invoices', icon: 'receipt', count: '18', alert: true },
  { id: 'meetings', label: 'Meetings', icon: 'gavel', count: '9' },
];
const NAV3 = [
  { id: 'comms', label: 'Resident comms', icon: 'megaphone' },
  { id: 'field', label: 'Field app', icon: 'smartphone' },
  { id: 'reports', label: 'Reports', icon: 'chart-no-axes-column' },
];

function Sidebar({ active, onNav, persona, mobileOpen, onClose }) {
  const allow = persona ? persona.sections : null;
  const vis = list => list.filter(n => !allow || allow.includes(n.id) || n.id === 'assistant');
  const Item = n => (
    <div key={n.id} className={`nav-item ${active === n.id ? 'on' : ''} ${n.ai ? 'ai' : ''}`} onClick={() => onNav(n.id)}>
      <Icon name={n.icon} /><span>{n.label}</span>
      {n.count && <span className={`count ${n.alert ? 'alert' : ''}`}>{n.count}</span>}
    </div>
  );
  const Group = (title, list) => {
    const items = vis(list);
    if (!items.length) return null;
    return <div className="side-section"><h6>{title}</h6>{items.map(Item)}</div>;
  };
  const p = persona || PERSONAS.strata;
  return (
    <React.Fragment>
      <div className={`side-scrim ${mobileOpen ? 'open' : ''}`} onClick={onClose} />
      <aside className={`side ${mobileOpen ? 'mobile-open' : ''}`}>
        <div className="side-logo">
          <img src="../assets/mark-white.svg" alt="" /><b>OPSMERA</b>
          <button className="icon-btn side-x" onClick={onClose} aria-label="Close menu"><Icon name="x" /></button>
        </div>
        <div className="side-scroll">
          {Group('Operations', NAV)}
          {Group('Finance & governance', NAV2)}
          {Group('Channels', NAV3)}
        </div>
        <div className="side-foot">
          <button className="side-user" onClick={() => openSwitcher(p.id)} title="Switch persona">
            <div className="av" style={{ background: p.accent, color: '#06251a' }}>{p.initials}</div>
            <div className="su-id"><div className="nm">{p.name}</div><div className="rl">{p.role} · {p.org}</div></div>
            <span className="su-switch"><Icon name="chevrons-up-down" /></span>
          </button>
        </div>
      </aside>
    </React.Fragment>
  );
}

// Mobile top header — hamburger + title + quick actions (replaces .topbar on phones)
function MobileHeader({ section, onMenu, onSearch, onBell }) {
  const titles = { today: 'Today', assistant: 'Opsmera AI', intake: 'Intake', board: 'Job board', compliance: 'Compliance',
    portfolio: 'Portfolio', invoices: 'Invoices', meetings: 'Meetings', comms: 'Resident comms', field: 'Field app', reports: 'Reports' };
  return (
    <div className="m-header">
      <button className="icon-btn" onClick={onMenu} aria-label="Menu"><Icon name="menu" /></button>
      <div className="m-title">{titles[section] || 'Opsmera'}</div>
      <button className="icon-btn" onClick={onSearch} aria-label="Search"><Icon name="search" /></button>
      <button className="icon-btn" onClick={onBell} aria-label="Notifications"><Icon name="bell" /></button>
    </div>
  );
}

// Mobile bottom tab bar — the 5 most-used, plus More (opens full nav)
const BOTTOM = [
  { id: 'today', label: 'Today', icon: 'layout-dashboard' },
  { id: 'assistant', label: 'AI', icon: 'sparkles', ai: true },
  { id: 'intake', label: 'Intake', icon: 'inbox' },
  { id: 'board', label: 'Board', icon: 'kanban' },
];
function BottomNav({ active, onNav, onMore }) {
  return (
    <nav className="bottom-nav">
      {BOTTOM.map(n => (
        <button key={n.id} className={`bn-item ${active === n.id ? 'on' : ''} ${n.ai ? 'ai' : ''}`} onClick={() => onNav(n.id)}>
          <Icon name={n.icon} /><span>{n.label}</span>
        </button>
      ))}
      <button className="bn-item" onClick={onMore}><Icon name="menu" /><span>More</span></button>
    </nav>
  );
}

// Notifications + command palette popups (shared by desktop topbar & mobile header)
const NOTIFS = [
  ['urgent', 'shield-alert', 'Adelaide Central lighting breach', '3 days overdue · $4,000/wk exposure', '2m'],
  ['warning', 'receipt', 'INV-20418 needs your approval', 'ASE Fire · $2,200 · matches quote', '18m'],
  ['auto', 'activity', 'Cove HVAC predicted to fail', '87% confidence · within 30 days', '1h'],
  ['info', 'gavel', 'Harbourview AGM in 10 days', '41 lots have not voted yet', '3h'],
  ['resolved', 'check-circle-2', 'Stirling AFSS lodged with council', 'Auto-filed to the audit trail', '5h'],
];
function openNotifs() {
  window.opsModal({
    title: 'Notifications', sub: '5 new · across 127 schemes',
    body: (
      <div className="notif-list">
        {NOTIFS.map(([kind, icon, t, s, tm], i) => (
          <div className="notif" key={i} onClick={() => { window.opsCloseModal(); window.opsToast('Opening ' + t, { kind: 'info' }); }}>
            <span className={`notif-ic ${kind}`}><Icon name={icon} /></span>
            <div className="notif-tx"><div className="t">{t}</div><div className="s">{s}</div></div>
            <span className="notif-tm">{tm}</span>
          </div>
        ))}
      </div>
    )
  });
}
function openPalette(onNav) {
  const cmds = [
    ['layout-dashboard', 'Go to Today', () => onNav('today')],
    ['sparkles', 'Ask Opsmera AI', () => onNav('assistant')],
    ['inbox', 'Open Intake', () => onNav('intake')],
    ['shield-check', 'Open Compliance', () => onNav('compliance')],
    ['receipt', 'Open Invoices', () => onNav('invoices')],
    ['building-2', 'Find a building', () => onNav('portfolio')],
    ['plus', 'Log a work order', () => onNav('field')],
  ];
  window.opsModal({
    title: 'Search & commands', sub: 'Type to filter · jump anywhere',
    body: (
      <div className="palette">
        <div className="palette-search"><Icon name="search" /><input autoFocus placeholder="Search buildings, jobs, owners, or run a command..." /></div>
        <div className="palette-list">
          {cmds.map(([icon, label, fn], i) => (
            <button className="palette-cmd" key={i} onClick={() => { window.opsCloseModal(); fn(); }}>
              <Icon name={icon} /><span>{label}</span><span className="k">↵</span>
            </button>
          ))}
        </div>
      </div>
    )
  });
}

function Topbar({ section, onField, onNav, persona }) {
  const titles = { today: 'Today', assistant: 'Opsmera AI', intake: 'Intake', board: 'Job board', compliance: 'Compliance',
    portfolio: 'Portfolio', invoices: 'Invoices', meetings: 'Meetings', comms: 'Resident comms', field: 'Field app', reports: 'Reports' };
  const p = persona || PERSONAS.strata;
  return (
    <div className="topbar">
      <div className="crumb">Opsmera <span>/</span> <b>{titles[section] || 'Operations'}</b></div>
      <button className="search" onClick={() => openPalette(onNav)}>
        <Icon name="search" /><span className="search-ph">Search buildings, jobs, assets, owners...</span><kbd>⌘K</kbd>
      </button>
      <div className="top-right">
        <button className="persona-pill" onClick={() => openSwitcher(p.id)} title="Switch persona — demo">
          <span className="pp-badge">DEMO</span>
          <span className="pp-av" style={{ background: p.accent }}>{p.initials}</span>
          <span className="pp-tx"><span className="pp-name">{p.name}</span><span className="pp-role">{p.role}</span></span>
          <Icon name="chevrons-up-down" />
        </button>
        <button className="icon-btn" onClick={onField} title="Field app"><Icon name="smartphone" /></button>
        <Appearance />
        <button className="icon-btn" onClick={openNotifs} title="Notifications"><span className="bell-dot" /><Icon name="bell" /></button>
      </div>
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, MobileHeader, BottomNav, openNotifs, openPalette });