Kairo-Jinkendo/frontend/src/components/InitiativeLifecycleBar.jsx

import { LIFECYCLE_LABELS } from '../constants/operating.js'
import { Link } from 'react-router-dom'

export function InitiativeLifecycleBar({
  snapshot,
  loading,
  error,
  initiativeId,
  compact = false,
}) {
  if (loading) {
    return (
      <section className="initiative-lifecycle-bar card card--flat">
        <p className="muted">Steuerungszustand wird geladen …</p>
      </section>
    )
  }

  if (error || !snapshot) {
    return (
      <section className="initiative-lifecycle-bar card card--flat initiative-lifecycle-bar--muted">
        <p className="muted">
          Steuerungszustand nicht verfügbar — siehe Tab{' '}
          <Link to={`/initiatives/${initiativeId}`}>Steuerung</Link>.
        </p>
      </section>
    )
  }

  const displayLabel =
    snapshot.lifecycle_label ||
    LIFECYCLE_LABELS[snapshot.lifecycle_state] ||
    snapshot.lifecycle_state

  const stats = [
    { label: 'Offen', value: snapshot.counts?.actions_open ?? 0, warn: false },
    {
      label: 'Blockiert',
      value: snapshot.counts?.actions_blocked ?? 0,
      warn: (snapshot.counts?.actions_blocked ?? 0) > 0,
    },
    {
      label: 'Review',
      value: snapshot.counts?.actions_review_required ?? 0,
      warn: (snapshot.counts?.actions_review_required ?? 0) > 0,
    },
    {
      label: 'Blocker',
      value: snapshot.counts?.blockers_open ?? 0,
      warn: (snapshot.counts?.blockers_open ?? 0) > 0,
    },
  ]

  return (
    <section
      className={`initiative-lifecycle-bar card card--flat${compact ? ' initiative-lifecycle-bar--compact' : ''}`}
    >
      <div className="initiative-lifecycle-bar-main">
        <div>
          <p className="initiative-lifecycle-kicker">Programm-Fortschritt</p>
          <span className="badge status-badge status-active steering-lifecycle-badge">
            {displayLabel}
          </span>
        </div>
        <Link className="btn btn-secondary btn-sm" to={`/initiatives/${initiativeId}`}>
          Steuerung
        </Link>
      </div>
      <div className="initiative-lifecycle-stats">
        {stats.map(({ label, value, warn }) => (
          <span
            key={label}
            className={`initiative-lifecycle-stat${warn ? ' initiative-lifecycle-stat--warn' : ''}`}
          >
            <strong>{value}</strong> {label}
          </span>
        ))}
      </div>
    </section>
  )
}