// Inbox — Security Ops persona surface. Left: request queue. Right: detail + AI triage.

function GMPageInbox({ customer, pushToast }) {
  const reqs = window.GM_REQUESTS[customer.id] || [];
  const [selectedId, setSelectedId] = React.useState(reqs[0]?.id || null);
  const [resolvedIds, setResolvedIds] = React.useState(new Set());
  const selected = reqs.find(r => r.id === selectedId) || reqs[0];

  // Empty state — provisioning workspace or zero-traffic tenant
  if (reqs.length === 0) {
    return (
      <>
        <div className="adm-page-header">
          <div>
            <h1 className="adm-page-title">Inbox</h1>
            <p className="adm-page-sub">{customer.name} · no open requests</p>
          </div>
        </div>
        <div className="card" style={{ padding: 48, textAlign: 'center' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 56, height: 56, borderRadius: 14, background: 'var(--good-soft)', color: 'var(--signal-good)', marginBottom: 16 }}>
            <GMI.check style={{ width: 22, height: 22 }}/>
          </div>
          <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: 'var(--ls-title)' }}>All clear at {customer.name}</div>
          <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 8, maxWidth: 440, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.55 }}>
            Guardian AI is monitoring. You'll get a decision prompt here the moment something needs a human call.
          </p>
        </div>
      </>
    );
  }

  const apply = () => {
    setResolvedIds(s => new Set([...s, selected.id]));
    pushToast({
      title: 'Guardian applied the recommendation',
      sub: `${selected.id} · ${selected.ai_rec?.headline?.slice(0, 60) || 'resolved'}…`,
      kind: 'ai',
    });
  };

  const hotCount = reqs.filter(r => r.priority === 'high' && !resolvedIds.has(r.id)).length;

  return (
    <div className="ib">
      <div className="adm-page-header">
        <div>
          <h1 className="adm-page-title">Inbox</h1>
          <p className="adm-page-sub">
            {customer.name} · {reqs.length} open requests · <span style={{ color: 'var(--signal-hot)', fontWeight: 600 }}>{hotCount} high priority</span>
          </p>
        </div>
        <div className="adm-page-actions">
          <button className="btn btn--ghost"><GMI.refresh/> Refresh</button>
          <button className="btn btn--primary"><GMI.sparkle/> Ask Guardian</button>
        </div>
      </div>

      {hotCount > 0 && (
        <div className="ib-alert">
          <div className="ib-alert-dot"/>
          <div style={{ flex: 1 }}>
            <div className="ib-alert-title">{hotCount} incident{hotCount > 1 ? 's' : ''} breaching SLA</div>
            <div className="ib-alert-sub">Guardian has drafted recommendations for each. Review and apply below.</div>
          </div>
        </div>
      )}

      <div className="ib-columns">
        <div>
          <div className="ib-queue-head">
            <h2>Open requests</h2>
            <span className="ib-queue-count">{reqs.length} open · sorted by urgency</span>
          </div>
          <div className="ib-queue">
            {reqs.map(r => {
              const resolved = resolvedIds.has(r.id);
              const tone = r.priority === 'high' ? 'is-hot' : r.priority === 'med' ? 'is-warm' : '';
              return (
                <button
                  key={r.id}
                  className={`ib-item card ${tone} ${selectedId === r.id ? 'is-selected' : ''}`}
                  style={resolved ? { opacity: 0.55 } : {}}
                  onClick={() => setSelectedId(r.id)}
                >
                  <div className="ib-item-head">
                    <span className="ib-item-id">{r.id}</span>
                    {resolved
                      ? <GMPill tone="good"><GMI.check style={{ width: 10, height: 10 }}/> Resolved</GMPill>
                      : (r.priority === 'high'
                          ? <GMPill tone="hot" dotColor="var(--signal-hot)">High · {r.sla}</GMPill>
                          : r.priority === 'med'
                            ? <GMPill tone="warm" dotColor="var(--signal-warm)">Med · {r.sla}</GMPill>
                            : <GMPill tone="ghost">Low · {r.sla}</GMPill>)
                    }
                  </div>
                  <div className="ib-item-title">{r.type}</div>
                  {r.note && <div className="ib-item-note">{r.note}</div>}
                  <div className="ib-item-foot">
                    <div className="ib-item-who">
                      <GMAvatar initials={r.who.initials} size={20}/>
                      <span>{r.who.name}</span>
                    </div>
                    <span>{r.site}</span>
                  </div>
                </button>
              );
            })}
          </div>
        </div>

        <aside className="ib-detail card">
          <div className="ib-detail-eyebrow">Request · {selected.id}</div>
          <div className="ib-detail-title">{selected.type}</div>
          <div className="ib-detail-meta">
            <span>{selected.site}</span>
            <span>·</span>
            <span>Raised {selected.date}</span>
            <span>·</span>
            <span>Risk {selected.risk}/100</span>
          </div>

          {selected.ai_rec && !resolvedIds.has(selected.id) && (
            <GMAITriageCard
              rec={selected.ai_rec}
              onApprove={apply}
              onDismiss={apply}
            />
          )}
          {resolvedIds.has(selected.id) && (
            <div style={{
              padding: 18, borderRadius: 'var(--r-md)',
              background: 'var(--good-soft)', color: 'var(--signal-good)',
              fontSize: 'var(--fs-sm)', fontWeight: 600,
              display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18,
            }}>
              <GMI.check style={{ width: 16, height: 16 }}/>
              Guardian resolved this request · audit log updated
            </div>
          )}

          {selected.timeline && (
            <>
              <div className="ib-detail-eyebrow" style={{ marginTop: 8, marginBottom: 10 }}>Timeline</div>
              <div className="ib-timeline">
                {selected.timeline.map((t, i) => (
                  <div key={i} className="ib-timeline-row">
                    <span className="ib-timeline-time">{t.t}</span>
                    <div className={`ib-timeline-mark ${t.kind === 'ai' ? 'is-ai' : ''} ${t.kind === 'hot' ? 'is-hot' : ''}`}/>
                    <div className="ib-timeline-what">
                      {t.kind === 'ai'
                        ? <><em>Guardian AI</em> {t.what}</>
                        : <><strong>{t.who}</strong> {t.what}</>
                      }
                    </div>
                  </div>
                ))}
              </div>
            </>
          )}
        </aside>
      </div>
    </div>
  );
}

window.GMPageInbox = GMPageInbox;