// Disengagement page · composite-gated. Five gates must hold to fire.
// Amber accent only. UI wording: "Suggested conversation · see context."

function DisengagementPage({ navigate, openSidePanel }) {
  const [week, setWeek] = React.useState(0);
  const firing = DATA.disengagementForWeek(week);
  const weekLabel = DATA.weeks[week].label;

  return (
    <div className="page page-fade">
      <div style={{ marginBottom: 14, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>Disengagement</h1>
          <div className="mono-caps" style={{ marginTop: 4 }}>Composite-gated · suggested conversations only</div>
          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-3)', maxWidth: 760, lineHeight: 1.55 }}>
            A signal fires only when <strong style={{ color: 'var(--text-2)' }}>all five</strong> conditions hold
            for several consecutive working days. Each condition has an explicit timestamp so a manager
            can reproduce the logic. This is never an HR signal, an evaluation, or a verdict.
          </div>
        </div>
        <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 8 }}>
          <WeekStepper weeks={DATA.weeks} value={week} onChange={setWeek} />
          <button className="btn ghost" style={{ fontSize: 11, display: 'inline-flex', alignItems: 'center', gap: 6 }}
                  onClick={() => openSidePanel({ kind: 'gates-legend', title: 'Legend' })}>
            <Icon name="info" size={12} />
            Legend
          </button>
        </div>
      </div>

      {firing.length === 0 && (
        <div className="gate-banner calm">
          <div className="gb-icon"><Icon name="check-circle" size={14} /></div>
          <div>
            <div className="gb-text">No disengagement signals firing.</div>
            <div className="gb-sub">All engineers below the composite threshold · {weekLabel.toLowerCase()}.</div>
          </div>
        </div>
      )}

      {firing.length > 0 && (
        <>
          <div className="gate-banner">
            <div className="gb-icon"><Icon name="alert-triangle" size={16} /></div>
            <div style={{ flex: 1 }}>
              <div className="gb-text">Suggested conversation · see context.</div>
              <div className="gb-sub">{firing.length} engineer{firing.length === 1 ? '' : 's'} matched all five conditions · {weekLabel.toLowerCase()}.</div>
            </div>
          </div>

          {firing.map(f => {
            const e = DATA.devById(f.devId);
            return (
              <div key={f.devId} style={{ marginBottom: 24 }}>
                <div className="section-head" style={{ margin: '12px 0 10px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar initials={e.initials} size={28} />
                    <div>
                      <div className="section-title" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <a href={'#/dev/' + e.id} style={{ color: 'inherit' }}>{e.name}</a>
                        <span className="tag tone-warn">signal active</span>
                      </div>
                      <div className="section-eyebrow">{e.role} · {e.team}</div>
                    </div>
                  </div>
                  <a className="btn ghost" href={'#/dev/' + e.id} style={{ fontSize: 11 }}>
                    Open profile <Icon name="external" size={11} />
                  </a>
                </div>
                <GatePanel devId={f.devId} gates={f.gates} gateTimestamps={f.gateTimestamps} />
              </div>
            );
          })}
        </>
      )}
    </div>
  );
}

window.DisengagementPage = DisengagementPage;