// GatePanel · six-gate evidence with timestamps for one developer.
// Reused on the Disengagement page + Developer Profile section.

function GatePanel({ devId, gates: gatesProp, gateTimestamps: tsProp, compact = false }) {
  const e = DATA.devById(devId);
  const gates = gatesProp || (e && e.gates);
  const gateTimestamps = tsProp || (e && e.gateTimestamps);
  if (!e || !gateTimestamps) {
    // Healthy engineer · show as calm panel
    return (
      <div className="card">
        <div className="card-head">
          <div className="ch-title"><Icon name="check-circle" size={13} style={{ color: 'var(--good)' }} /> Composite gates · calm</div>
          <span className="mono" style={{ fontSize: 10, color: 'var(--text-3)' }}>0 of 5 active</span>
        </div>
        <div className="gate-grid">
          {DATA.disengagement.gateKeys.map(k => (
            <div key={k} className="gate-cell">
              <div className="gc-head">
                <span className="gc-label">{DATA.disengagement.gateLabel[k]}</span>
                <span className="gc-status tone-good"><span className="gc-dot" />ok</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
  const open = DATA.disengagement.gateKeys.filter(k => gates[k]).length;
  const firing = open === 5;
  return (
    <div className="card">
      <div className="card-head">
        <div className="ch-title">
          <Icon name="alert-triangle" size={13} style={{ color: firing ? 'var(--warn)' : 'var(--text-3)' }} />
          <span>Composite gates · {firing ? 'all five open' : `${open} of 5 open`}</span>
        </div>
        {firing && <span className="tag tone-warn">signal active</span>}
        {!firing && open >= 3 && <span className="tag mono">near-miss</span>}
      </div>
      <div className="gate-grid">
        {DATA.disengagement.gateKeys.map(k => {
          const isOpen = gates[k];
          // We show all five as "open" when disengagement criteria are present.
          const ts = gateTimestamps[k];
          return (
            <div key={k} className="gate-cell">
              <div className="gc-head">
                <span className="gc-label">{DATA.disengagement.gateLabel[k]}</span>
                <span className={`gc-status ${isOpen ? 'tone-warn' : 'tone-good'}`}>
                  <span className="gc-dot" />{isOpen ? 'open' : 'ok'}
                </span>
              </div>
              <div className="gc-detail">{ts.detail}</div>
              <div className="gc-time">{fmtTimestamp(ts.lastEvent)}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.GatePanel = GatePanel;