/* Org Admin Dashboard — wired to /api/today/:siteId/brief +
   /api/zones, /api/screens, /api/species, /api/auth/users. */

function OrgAdminScreen() {
  const me = Auth.getUser() || {};
  const firstSite = (me.sites || [])[0];
  const [brief, setBrief] = useState(null);
  const [data, setData] = useState({});

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      apiFetch('/api/species?limit=1').catch(() => null),
      apiFetch('/api/zones').catch(() => null),
      apiFetch('/api/screens').catch(() => null),
      Auth.canManageUsers() ? apiFetch('/api/auth/users').catch(() => null) : Promise.resolve(null),
      firstSite ? apiFetch(`/api/today/${firstSite.id}/brief`).catch(() => null) : Promise.resolve(null),
    ]).then(([sp, zn, sc, us, br]) => {
      if (cancelled) return;
      setData({
        species: sp ? sp.total : null,
        zones: zn ? (zn.zones || []).length : null,
        screens: sc ? (sc.screens || []).length : null,
        users: us ? (us.users || []).length : null,
      });
      setBrief(br);
    });
    return () => { cancelled = true; };
  }, []);

  return (
    <div className="aq-content">
      <div className="aq-content-inner" style={{ maxWidth: 1100 }}>
        <header style={{ marginBottom: 16 }}>
          <div className="aq-eyebrow">
            <span>{(me.organisations || [])[0]?.name || 'Slate'}</span>
            <span className="aq-sep">·</span>
            <span>Operations</span>
          </div>
          <h1 style={{
            fontFamily: 'var(--aq-ff-display)', fontSize: 26, fontWeight: 500,
            letterSpacing: '-0.012em', color: 'var(--aq-text)', margin: '4px 0 4px',
          }}>Operations</h1>
          <p style={{ fontSize: 13, color: 'var(--aq-text-faint)', margin: 0 }}>
            What's happening across your sites today.
            {brief && brief.summary && <> Brief: {brief.summary}</>}
          </p>
        </header>

        <div className="aq-pa-kpis">
          <div className="aq-pa-kpi">
            <div className="aq-pa-kpi-label">Sites</div>
            <div className="aq-pa-kpi-value-row"><div className="aq-pa-kpi-value">{(me.sites || []).length || 1}</div></div>
            <div className="aq-pa-kpi-sub">{firstSite ? firstSite.name : ''}</div>
          </div>
          <div className="aq-pa-kpi">
            <div className="aq-pa-kpi-label">Zones</div>
            <div className="aq-pa-kpi-value-row"><div className="aq-pa-kpi-value">{data.zones ?? '—'}</div></div>
            <div className="aq-pa-kpi-sub">configured</div>
          </div>
          <div className="aq-pa-kpi">
            <div className="aq-pa-kpi-label">Screens</div>
            <div className="aq-pa-kpi-value-row"><div className="aq-pa-kpi-value">{data.screens ?? '—'}</div></div>
            <div className="aq-pa-kpi-sub">provisioned</div>
          </div>
          <div className="aq-pa-kpi">
            <div className="aq-pa-kpi-label">Species</div>
            <div className="aq-pa-kpi-value-row"><div className="aq-pa-kpi-value">{data.species ?? '—'}</div></div>
            <div className="aq-pa-kpi-sub">in library</div>
          </div>
          <div className="aq-pa-kpi">
            <div className="aq-pa-kpi-label">Users</div>
            <div className="aq-pa-kpi-value-row"><div className="aq-pa-kpi-value">{data.users ?? '—'}</div></div>
            <div className="aq-pa-kpi-sub">{Auth.canManageUsers() ? 'team members' : 'admin only'}</div>
          </div>
        </div>

        <div className="aq-pa-cards" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 18 }}>
          <section className="aq-pa-card" style={{ padding: 18 }}>
            <h2 style={{
              margin: '0 0 12px', fontFamily: 'var(--aq-ff-display)',
              fontSize: 14, fontWeight: 500, color: 'var(--aq-text)',
            }}>Today's brief</h2>
            {brief ? (
              <div style={{ fontSize: 12.5, color: 'var(--aq-text-dim)', lineHeight: 1.55 }}>
                {brief.summary || brief.text || JSON.stringify(brief).slice(0, 400)}
              </div>
            ) : (
              <div style={{ color: 'var(--aq-text-faint)', fontSize: 12.5 }}>
                No brief available for {firstSite ? firstSite.name : 'this site'} today.
              </div>
            )}
          </section>

          <section className="aq-pa-card" style={{ padding: 18 }}>
            <h2 style={{
              margin: '0 0 12px', fontFamily: 'var(--aq-ff-display)',
              fontSize: 14, fontWeight: 500, color: 'var(--aq-text)',
            }}>Quick actions</h2>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <button className="x-btn ghost" onClick={() => { window.location.hash = '#library'; }}><Icon name="library" size={12} />Edit species</button>
              <button className="x-btn ghost" onClick={() => { window.location.hash = '#displays'; }}><Icon name="monitor" size={12} />Manage screens</button>
              <button className="x-btn ghost" onClick={() => { window.location.hash = '#campaigns'; }}><Icon name="spark" size={12} />Schedule campaign</button>
              <button className="x-btn ghost" onClick={() => { window.location.hash = '#zones'; }}><Icon name="building" size={12} />Reorder zones</button>
            </div>
          </section>

          <section className="aq-pa-card" style={{ padding: 18 }}>
            <h2 style={{
              margin: '0 0 12px', fontFamily: 'var(--aq-ff-display)',
              fontSize: 14, fontWeight: 500, color: 'var(--aq-text)',
            }}>Sites</h2>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
              {(me.sites || []).map((s) => (
                <li key={s.id} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '8px 0', borderBottom: '1px solid var(--aq-line)', fontSize: 13,
                }}>
                  <div>
                    <div style={{ color: 'var(--aq-text)', fontWeight: 500 }}>{s.name}</div>
                    <div style={{ color: 'var(--aq-text-faint)', fontSize: 11.5 }}>{s.org_name}</div>
                  </div>
                  <button className="x-btn ghost sm">Open</button>
                </li>
              ))}
              {(me.sites || []).length === 0 && (
                <li style={{ color: 'var(--aq-text-faint)', fontSize: 12.5, padding: '8px 0' }}>
                  No sites linked to this account.
                </li>
              )}
            </ul>
          </section>

          <section className="aq-pa-card" style={{ padding: 18 }}>
            <h2 style={{
              margin: '0 0 12px', fontFamily: 'var(--aq-ff-display)',
              fontSize: 14, fontWeight: 500, color: 'var(--aq-text)',
            }}>Recent activity</h2>
            <div style={{ color: 'var(--aq-text-faint)', fontSize: 12.5 }}>
              See <a style={{ color: 'var(--aq-accent)', cursor: 'pointer' }}
                onClick={() => { window.location.hash = '#audit'; }}>Audit log</a> for the full event stream.
            </div>
          </section>
        </div>
      </div>
    </div>
  );
}

window.OrgAdminScreen = OrgAdminScreen;