// Scene 1 — Partner Portal home.
// Matt's Acme Identity Partners home. Lists active customers (BMO, RBC, TD).
// Click a customer → SSO handoff to that customer's admin portal.

function GMPartnerPortal({ onLaunch }) {
  const partner = window.GM_PARTNER;
  const customers = window.GM_CUSTOMERS;
  const activity = window.GM_ACTIVITY;

  const totalCardholders = customers.reduce((a, c) => a + c.cardholders, 0);
  const totalAIHandled = customers.reduce((a, c) => a + c.ai_handled_24h, 0);

  return (
    <div className="pp scene">
      <nav className="pp-rail">
        <div className="pp-rail-brand">
          <GMI.shield style={{ color: 'var(--paper)' }}/>
          <span>Guardian Mesh</span>
        </div>
        <div className="pp-rail-user">
          <GMAvatar initials={partner.user.initials} size={30}/>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--paper)' }}>{partner.user.name}</div>
            <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 1 }}>{partner.user.role}</div>
          </div>
        </div>
        <div className="pp-rail-section">
          <div className="pp-rail-label">Partner</div>
          <a className="pp-rail-item is-active"><GMI.radar /> Customers</a>
          <a className="pp-rail-item"><GMI.chart /> Performance</a>
          <a className="pp-rail-item"><GMI.file /> Agreements</a>
          <a className="pp-rail-item"><GMI.users /> Team</a>
        </div>
        <div className="pp-rail-section">
          <div className="pp-rail-label">Sell</div>
          <a className="pp-rail-item"><GMI.bolt /> Quote Builder</a>
          <a className="pp-rail-item"><GMI.list /> Deck Builder</a>
          <a className="pp-rail-item"><GMI.badge /> Pass Artwork</a>
          <a className="pp-rail-item"><GMI.chart /> ROI Calculator</a>
        </div>
        <div style={{ flex: 1 }}/>
        <div className="pp-rail-section" style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 12 }}>
          <a className="pp-rail-item"><GMI.settings /> Settings</a>
        </div>
      </nav>

      <main className="pp-main">
        <div className="pp-topbar">
          <div className="pp-topbar-left">
            <h1>Welcome back, Matt.</h1>
            <p>{partner.name} · {customers.length} active customers · {totalCardholders.toLocaleString()} cardholders under management</p>
          </div>
          <div className="pp-topbar-right">
            <button className="btn btn--ghost btn--tiny">
              <GMI.bell /> Notifications
            </button>
            <button className="btn btn--primary btn--tiny">
              <GMI.plus /> Onboard customer
            </button>
          </div>
        </div>

        <GMAIStripSimple
          icon={<GMI.sparkle />}
          cta="Review"
          onCta={() => onLaunch(customers[0])}
        >
          <div className="pp-ai-strip-title">
            Guardian handled <strong>{totalAIHandled} things</strong> across your customers in the last 24 hours.
          </div>
          <div className="pp-ai-strip-sub">
            3 items need a human decision. BMO has 2, TD has 1. Jump in →
          </div>
        </GMAIStripSimple>

        <div className="pp-customers-head">
          <h2>Your customers</h2>
          <span>Click any customer to enter their Guardian Mesh workspace</span>
        </div>

        <div className="pp-customers">
          {customers.map(c => (
            <GMCustomerCard key={c.id} c={c} onLaunch={() => onLaunch(c)}/>
          ))}
        </div>

        <div className="pp-activity">
          <div className="pp-activity-card card">
            <div className="pp-activity-head">
              <h3>Recent activity across all customers</h3>
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                Last 24 hours
              </span>
            </div>
            {activity.map((a, i) => (
              <div className="pp-activity-row" key={i}>
                <span className="pp-activity-time">{a.t}</span>
                <div>
                  <div className="pp-activity-what">
                    {a.kind === 'ai'
                      ? <><span style={{ color: 'var(--signal-ai)', fontWeight: 600 }}>Guardian AI</span> {a.what}</>
                      : <><strong>{a.who}</strong> {a.what}</>
                    }
                  </div>
                </div>
                <span className="pp-activity-cust">{a.customer}</span>
              </div>
            ))}
          </div>

          <div className="pp-pool card">
            <div className="pp-pool-head">
              <h3>Aggregate credential pool</h3>
              <p className="pp-pool-sub">Across {customers.length} customer workspaces</p>
            </div>
            <div className="pp-pool-bars">
              {(() => {
                const agg = customers.reduce((a, c) => ({
                  capacity: a.capacity + c.pool.capacity,
                  available: a.available + c.pool.available,
                  invited: a.invited + c.pool.invited,
                  assigned: a.assigned + c.pool.assigned,
                  revoked: a.revoked + c.pool.revoked,
                }), { capacity: 0, available: 0, invited: 0, assigned: 0, revoked: 0 });
                const items = [
                  ['Available', agg.available, 'is-available'],
                  ['Invited',   agg.invited,   'is-invited'],
                  ['Assigned',  agg.assigned,  'is-assigned'],
                  ['Revoked',   agg.revoked,   'is-revoked'],
                ];
                return items.map(([lbl, val, cls]) => (
                  <div key={lbl}>
                    <div className="pp-pool-bar-row">
                      <span className="pp-pool-bar-label">{lbl}</span>
                      <span className="pp-pool-bar-val">{val} <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>/ {agg.capacity}</span></span>
                    </div>
                    <div className="pp-pool-bar">
                      <div className={`pp-pool-bar-fill ch-pool-bar-fill ${cls}`} style={{ width: `${(val / agg.capacity) * 100}%` }}/>
                    </div>
                  </div>
                ));
              })()}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function GMCustomerCard({ c, onLaunch }) {
  const logo = window.GM_LOGOS[c.id];
  const decisionsHot = c.decisions > 0;
  return (
    <button className="pp-customer card" onClick={onLaunch}>
      <div className="pp-customer-head">
        <div className="pp-customer-logo" style={{ background: logo?.bg, color: logo?.fg }}>
          {logo?.mark || c.short[0]}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="pp-customer-title">{c.name}</div>
          <div className="pp-customer-sub">
            {c.industry} · {c.region}
          </div>
        </div>
        {c.status === 'provisioning' && <GMPill tone="warm">Provisioning</GMPill>}
        {c.status === 'live' && decisionsHot && <GMPill tone="ai">{c.decisions} decision{c.decisions > 1 ? 's' : ''}</GMPill>}
      </div>
      <div className="pp-customer-stats">
        <div className="pp-customer-stat">
          <div className="pp-customer-stat-val">{c.cardholders.toLocaleString()}</div>
          <div className="pp-customer-stat-lbl">Cardholders</div>
        </div>
        <div className="pp-customer-stat">
          <div className="pp-customer-stat-val">{c.ai_handled_24h}</div>
          <div className="pp-customer-stat-lbl">AI handled · 24h</div>
        </div>
        <div className="pp-customer-stat">
          <div className="pp-customer-stat-val">{c.activity_this_week}</div>
          <div className="pp-customer-stat-lbl">Yours · 7d</div>
        </div>
      </div>
      <div className="pp-customer-cta">
        <span>Deployed {c.deployed}</span>
        <span className="pp-customer-cta-arrow">
          Open workspace <GMI.arrowRight style={{ width: 13, height: 13 }}/>
        </span>
      </div>
    </button>
  );
}

window.GMPartnerPortal = GMPartnerPortal;