// Radar — admin portal home. Decisions first, AI activity second, stats glanceable.

function GMPageRadar({ customer, persona, onNav, pushToast }) {
  const feed = window.GM_AI_FEED[customer.id] || [];
  const requests = (window.GM_REQUESTS[customer.id] || []).filter(r => r.priority === 'high').slice(0, 2);

  const [approvedIds, setApprovedIds] = React.useState(new Set());

  const approve = (id) => {
    if (approvedIds.has(id)) return;
    setApprovedIds(s => new Set([...s, id]));
    pushToast({
      title: 'Guardian applied recommendation',
      sub: `Request ${id} resolved · audit logged`,
      kind: 'ai',
    });
  };

  return (
    <>
      <div className="adm-page-header">
        <div>
          <h1 className="adm-page-title">Radar</h1>
          <p className="adm-page-sub">
            {customer.name} · Guardian has handled <strong>{customer.ai_handled_24h} things</strong> in the last 24 hours.
            Here's what needs you.
          </p>
        </div>
        <div className="adm-page-actions">
          <button className="btn btn--ghost">
            <GMI.refresh/> Refresh
          </button>
          <button className="btn btn--primary">
            <GMI.plus/> Create
          </button>
        </div>
      </div>

      <div className="radar-hero">
        <div className="radar-decisions">
          <div className="radar-decisions-eyebrow">
            <GMI.sparkle style={{ width: 11, height: 11 }}/>
            Needs your judgment
          </div>
          <div className="radar-decisions-title">
            <em>{requests.length} decisions</em> need you in the next hour.
          </div>
          <div className="radar-decisions-sub">
            Guardian has already drafted a recommended action for each. One click to apply.
          </div>
          <div className="radar-decisions-actions">
            {requests.map(r => (
              <button key={r.id} className="radar-decision-action" onClick={() => approve(r.id)}
                disabled={approvedIds.has(r.id)}
                style={approvedIds.has(r.id) ? { opacity: 0.55 } : {}}>
                <div className="radar-decision-icon">
                  {approvedIds.has(r.id) ? <GMI.check style={{ width: 14, height: 14 }}/> : <GMI.bolt style={{ width: 14, height: 14 }}/>}
                </div>
                <div className="radar-decision-body">
                  <div className="radar-decision-title">{r.type}</div>
                  <div className="radar-decision-sub">
                    {r.ai_rec?.headline?.slice(0, 80) || r.note}
                  </div>
                </div>
                <div className="radar-decision-cta">
                  {approvedIds.has(r.id) ? 'Applied' : 'Apply →'}
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="radar-stats">
          <div className="radar-stat card">
            <div className="radar-stat-eyebrow">Cardholders</div>
            <div className="radar-stat-row">
              <span className="radar-stat-val">{customer.cardholders}</span>
              <span className="radar-stat-change is-pos">+4 this week</span>
            </div>
          </div>
          <div className="radar-stat card">
            <div className="radar-stat-eyebrow">Credential Pool · Used</div>
            <div className="radar-stat-row">
              <span className="radar-stat-val">{Math.round((customer.pool.assigned / customer.pool.capacity) * 100)}%</span>
              <span className="radar-stat-change">{customer.pool.assigned}/{customer.pool.capacity}</span>
            </div>
          </div>
          <div className="radar-stat card">
            <div className="radar-stat-eyebrow">AI · Last 24 hours</div>
            <div className="radar-stat-row">
              <span className="radar-stat-val">{customer.ai_handled_24h}</span>
              <span className="radar-stat-change">actions · 0 errors</span>
            </div>
          </div>
        </div>
      </div>

      <div className="radar-panels">
        <div className="radar-panel card">
          <div className="radar-panel-head">
            <h3>Guardian AI activity</h3>
            <span className="radar-panel-meta">Live · {feed.length} events today</span>
          </div>
          <div className="radar-ai-feed">
            {feed.map((f, i) => (
              <div className="radar-ai-row" key={i}>
                <div className="radar-ai-avatar"><GMI.sparkle/></div>
                <span className="radar-ai-what" dangerouslySetInnerHTML={{ __html: f.what }}/>
                <span className="radar-ai-time">{f.t}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="radar-panel card">
          <div className="radar-panel-head">
            <h3>Credential pool</h3>
            <span className="radar-panel-meta">{customer.pool.capacity} capacity</span>
          </div>
          <div className="radar-pool">
            {[
              ['Available', customer.pool.available, 'is-available'],
              ['Invited',   customer.pool.invited,   'is-invited'],
              ['Assigned',  customer.pool.assigned,  'is-assigned'],
              ['Revoked',   customer.pool.revoked,   'is-revoked'],
            ].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 }}>/ {customer.pool.capacity}</span></span>
                </div>
                <div className="pp-pool-bar" style={{ marginTop: 6 }}>
                  <div className={`ch-pool-bar-fill ${cls}`} style={{ width: `${(val / customer.pool.capacity) * 100}%`, height: '100%', borderRadius: 3 }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

window.GMPageRadar = GMPageRadar;