import { PHASE_LABELS } from '../constants/operating.js'

export function SteeringSnapshotPanel({ snapshot }) {
  if (!snapshot) return null

  const { operating_phase, phase_signals, counts } = snapshot
  const phaseLabel = PHASE_LABELS[operating_phase] || operating_phase

  return (
    <section className="card steering-snapshot">
      <div className="section-header">
        <h2>Steuerungszustand</h2>
        <span className="badge status-badge status-active">{phaseLabel}</span>
      </div>
      {phase_signals?.length > 0 && (
        <p className="muted snapshot-signals">
          Signale: {phase_signals.join(' · ')}
        </p>
      )}
      <dl className="snapshot-counts">
        <div>
          <dt>Offene Maßnahmen</dt>
          <dd>{counts.actions_open}</dd>
        </div>
        <div>
          <dt>Blockiert</dt>
          <dd>{counts.actions_blocked}</dd>
        </div>
        <div>
          <dt>Review nötig</dt>
          <dd>{counts.actions_review_required}</dd>
        </div>
        <div>
          <dt>Offene Blocker</dt>
          <dd>{counts.blockers_open}</dd>
        </div>
        {(counts.unlinked_blockers > 0 || counts.unlinked_evidence > 0) && (
          <div className="snapshot-warn">
            <dt>Unverknüpft</dt>
            <dd>
              {counts.unlinked_blockers} Blocker, {counts.unlinked_evidence} Evidence
            </dd>
          </div>
        )}
      </dl>
      <p className="muted snapshot-hint">
        Kanonischer Operating Cycle — noch heuristisch, später methodengeführt über Steering Core.
      </p>
    </section>
  )
}