// Signals page · attention flags surfaced with evidence + identification legend.

function SignalsPage({ navigate, openSidePanel }) {
  const [week, setWeek] = React.useState(0);
  const weekSignals = DATA.signalsForWeek(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' }}>Signals</h1>
          <div className="mono-caps" style={{ marginTop: 4 }}>
            {weekSignals.length} signals firing · {new Set(weekSignals.map(s => s.devId)).size} engineers
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
          <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: 'signals-legend', title: 'Legend' })}>
            <Icon name="info" size={12} />
            Legend
          </button>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="ch-eyebrow">{week === 0 ? 'Firing this week' : 'Firing · ' + weekLabel}</div>
          <div className="ch-title">Needs attention</div>
        </div>
        {weekSignals.length === 0 ? (
          <div style={{ padding: '22px 14px', fontSize: 12.5, color: 'var(--text-3)' }}>
            No signals fired in {weekLabel.toLowerCase()}.
          </div>
        ) : (
          <div className="coach-list">
            {weekSignals.map(s => {
              const d = DATA.devById(s.devId);
              return (
                <div key={s.id} className="coach-row" onClick={() => openSidePanel({ kind: 'signal-evidence', signal: s, title: `${s.name} · ${d?.name}` })}>
                  <Avatar initials={d?.initials || '??'} size={32} />
                  <div className="cr-body">
                    <div className="cr-signal">
                      <span style={{ fontSize: 13 }}>{s.name}</span>
                    </div>
                    <div className="cr-dev">{d?.name} · {d?.role} · {d?.team}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 4, lineHeight: 1.5 }}>{s.description}</div>
                  </div>
                  <div className="cr-meta">
                    <span className="cr-count">{s.evidence.length} evidence</span>
                    <Icon name="chevron-right" size={13} />
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}

window.SignalsPage = SignalsPage;