// App root — routing + building drawer
function Portfolio({ onBuilding, persona }) {
  const pid = persona && persona.id;
  const scopeBldg = pid === 'treasurer' ? 'Harbourview' : pid === 'building' ? 'The Lumen' : null;
  const scopeSp   = pid === 'treasurer' ? 'SP 84021'    : pid === 'building' ? 'SP 67203' : null;
  const isScoped = !!scopeBldg;
  const scopedBuildings = isScoped ? BUILDINGS.filter(b => b.nm === scopeBldg) : BUILDINGS;
  const totalLots = scopedBuildings.reduce((s, b) => s + (b.units || 0), 0);
  const openJobs  = scopedBuildings.reduce((s, b) => s + (b.open || 0), 0);
  const avgComp   = scopedBuildings.length ? Math.round(scopedBuildings.reduce((s,b)=>s+(b.compliance||0),0) / scopedBuildings.length * 10) / 10 : 0;
  const eyebrow = isScoped
    ? `${pid === 'treasurer' ? 'Your scheme' : 'Your building'} · ${scopeBldg} · ${scopeSp} · ${totalLots} lots`
    : 'Portfolio · 127 schemes · 4,180 lots';
  const heading = isScoped ? `${scopeBldg}, <em>in view.</em>` : 'Every scheme, <em>in view.</em>';
  return (
    <div className="view"><div className="wrap">
      <div className="eyebrow">{eyebrow}</div>
      <h1 className="h-serif" style={{ fontSize: 28, margin: '12px 0 18px' }} dangerouslySetInnerHTML={{ __html: heading }} />
      <div className="pf-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 1, background: 'var(--line-1)', border: '1px solid var(--line-1)', borderRadius: 9, overflow: 'hidden', marginBottom: 22 }}>
        <div style={{ background: 'var(--navy-800)', padding: '16px 18px' }}><div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 24, color: 'var(--fg-1)' }}>{isScoped ? '1' : '127'}</div><div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 5, textTransform: 'uppercase', letterSpacing: '.08em' }}>{isScoped ? (pid === 'treasurer' ? 'Scheme' : 'Building') : 'Schemes'}</div></div>
        <div style={{ background: 'var(--navy-800)', padding: '16px 18px' }}><div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 24, color: 'var(--fg-1)' }}>{isScoped ? totalLots : '4,180'}</div><div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 5, textTransform: 'uppercase', letterSpacing: '.08em' }}>Lots</div></div>
        <div style={{ background: 'var(--navy-800)', padding: '16px 18px' }}><div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 24, color: 'var(--fg-1)' }}>{isScoped ? openJobs : '143'}</div><div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 5, textTransform: 'uppercase', letterSpacing: '.08em' }}>Open jobs</div></div>
        <div style={{ background: 'var(--navy-800)', padding: '16px 18px' }}><div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 24, color: 'var(--fg-1)' }}>{isScoped ? (avgComp + '%') : '93.6%'}</div><div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 5, textTransform: 'uppercase', letterSpacing: '.08em' }}>Compliance</div></div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--fg-3)' }}>{isScoped ? (pid === 'treasurer' ? 'Your scheme' : 'Your building') : 'Needs attention · showing 6 of 127'}</span>
        {!isScoped && <div className="search" style={{ maxWidth: 220, margin: 0 }}><Icon name="search" /><input placeholder="Find a scheme..." /></div>}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: isScoped ? '1fr' : 'repeat(3,1fr)', gap: 14 }}>
        {scopedBuildings.map(b => (
          <div className="card" key={b.nm} style={{ padding: 18, cursor: 'pointer' }} onClick={() => onBuilding(b.nm)}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
              <div>
                <div style={{ fontSize: 14.5, color: 'var(--fg-1)', fontWeight: 600 }}>{b.addr.replace(/,?\s+[A-Z]{2,3}$/, '')}</div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 4, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <span style={{ color: 'var(--fg-2)' }}>{b.sp}</span>
                  <span style={{ opacity: .5 }}>·</span>
                  <span>{b.nm}</span>
                </div>
              </div>
              <Tag track={b.health === 'resolved' ? 'on-track' : b.health === 'warning' ? 'at-risk' : 'breached'} sub={b.health === 'resolved' ? 'Healthy' : b.health === 'warning' ? 'Watch' : 'At risk'} />
            </div>
            <div style={{ display: 'flex', gap: 18, marginTop: 16 }}>
              <div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, color: 'var(--fg-1)' }}>{b.units}</div><div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 3, textTransform: 'uppercase', letterSpacing: '.06em' }}>Units</div></div>
              <div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, color: 'var(--fg-1)' }}>{b.open}</div><div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 3, textTransform: 'uppercase', letterSpacing: '.06em' }}>Open</div></div>
              <div><div style={{ fontFamily: 'var(--font-mono)', fontSize: 17, color: 'var(--fg-1)' }}>{b.compliance}%</div><div style={{ fontSize: 10.5, color: 'var(--fg-3)', marginTop: 3, textTransform: 'uppercase', letterSpacing: '.06em' }}>Compliant</div></div>
            </div>
            <div style={{ height: 4, borderRadius: 999, marginTop: 14, background: 'var(--navy-600)', overflow: 'hidden' }}>
              <i style={{ display: 'block', height: '100%', width: b.compliance + '%', background: HEALTH[b.health] }} />
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', marginTop: 12 }}>{b.next}</div>
          </div>
        ))}
      </div>
    </div></div>
  );
}

function Placeholder({ icon, title, note }) {
  return (
    <div className="view"><div style={{ padding: '90px 26px', textAlign: 'center', color: 'var(--fg-3)' }}>
      <div style={{ display: 'inline-flex', marginBottom: 16, opacity: .6 }}><Icon name={icon} /></div>
      <h3 className="h-serif" style={{ fontSize: 22, color: 'var(--fg-2)', margin: '0 0 6px' }}>{title}</h3>
      <p style={{ fontSize: 13, margin: 0 }}>{note}</p>
    </div></div>
  );
}

function App() {
  const [authed, setAuthed] = React.useState(() => {
    try { return localStorage.getItem('ops_authed') === '1'; } catch (e) { return false; }
  });
  const [personaId, setPersonaId] = React.useState(() => {
    try { return localStorage.getItem('ops_persona') || 'strata'; } catch (e) { return 'strata'; }
  });
  const persona = PERSONAS[personaId] || PERSONAS.strata;
  const [section, setSection] = React.useState(persona.home);
  const [bldg, setBldg] = React.useState(null);
  const [navOpen, setNavOpen] = React.useState(false);
  const isMobile = useIsMobile(820);
  const openBuilding = name => setBldg(name);
  const nav = id => { setSection(id); setNavOpen(false); };

  const enter = id => {
    setPersonaId(id); setSection(PERSONAS[id].home); setAuthed(true); setBldg(null);
    try { localStorage.setItem('ops_authed', '1'); localStorage.setItem('ops_persona', id); } catch (e) {}
  };
  const switchPersona = id => {
    setPersonaId(id); setSection(PERSONAS[id].home); setBldg(null);
    try { localStorage.setItem('ops_persona', id); } catch (e) {}
    if (window.opsToast) window.opsToast('Now viewing as ' + PERSONAS[id].name, { kind: 'info', icon: 'user-round', sub: PERSONAS[id].role + ' · ' + PERSONAS[id].org });
  };
  const signOut = () => { setAuthed(false); try { localStorage.removeItem('ops_authed'); } catch (e) {} };

  // Expose globally so wired buttons / switcher can route without prop-drilling
  React.useEffect(() => {
    window.opsNav = nav; window.opsBuilding = openBuilding;
    window.opsSwitchPersona = switchPersona; window.opsSignOut = signOut; window.opsPersonaId = personaId;
  });

  if (!authed) {
    return (
      <React.Fragment>
        <Login onPick={enter} />
        <ToastHost /><ModalHost />
      </React.Fragment>
    );
  }

  // keep the active section valid for this persona (+ allow detail sections)
  const allowed = persona.sections;
  const safeSection = allowed.includes(section) ? section : persona.home;

  let view;
  if (safeSection === 'today') view = <Dashboard onBuilding={openBuilding} onNav={nav} persona={persona} />;
  else if (safeSection === 'assistant') view = <Assistant onNav={nav} onBuilding={openBuilding} persona={persona} />;
  else if (safeSection === 'compliance') view = <Compliance onBuilding={openBuilding} persona={persona} />;
  else if (safeSection === 'intake') view = <Intake persona={persona} />;
  else if (safeSection === 'board') view = <JobBoard onBuilding={openBuilding} persona={persona} />;
  else if (safeSection === 'invoices') view = <InvoiceHub />;
  else if (safeSection === 'meetings') view = <Meetings />;
  else if (safeSection === 'portfolio') view = <Portfolio onBuilding={openBuilding} persona={persona} />;
  else if (safeSection === 'field') view = <FieldApp />;
  else if (safeSection === 'comms') view = <Comms />;
  else if (safeSection === 'reports') view = <Reports persona={persona} />;
  else view = <Dashboard onBuilding={openBuilding} onNav={nav} persona={persona} />;

  return (
    <div className={`app ${isMobile ? 'is-mobile' : ''}`}>
      <Sidebar active={safeSection} onNav={nav} persona={persona} mobileOpen={navOpen} onClose={() => setNavOpen(false)} />
      <div className="main">
        <Topbar section={safeSection} onField={() => nav('field')} onNav={nav} persona={persona} />
        <MobileHeader section={safeSection} persona={persona} onMenu={() => setNavOpen(true)}
          onSearch={() => openPalette(nav)} onBell={openNotifs} />
        <div key={personaId + safeSection} className="view-host">{view}</div>
      </div>
      <BottomNav active={safeSection} onNav={nav} onMore={() => setNavOpen(true)} persona={persona} />
      <BuildingDetail name={bldg} open={!!bldg} onClose={() => setBldg(null)} />
      <ToastHost />
      <ModalHost />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);