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

export function SteeringSnapshotPanel({ snapshot, loading, error }) {
  if (loading) {
    return (
      <section className="card steering-snapshot">
        <p className="muted">Steuerungszustand wird geladen …</p>
      </section>
    )
  }

  if (error || !snapshot) {
    return (
      <section className="card steering-snapshot steering-snapshot--unavailable">
        <div className="section-header">
          <h2>Steuerungszustand</h2>
        </div>
        <p className="muted">
          {error || 'Snapshot nicht verfügbar — bitte Seite neu laden (Strg+F5).'}
        </p>
      </section>
    )
  }

  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>
  )
}