import { RequireInitiativeScope } from '../../components/RequireInitiativeScope.jsx'
import { ScopedInitiativeProvider } from '../../layout/ScopedInitiativeProvider.jsx'
import { StatusBadge } from '../../components/StatusBadge.jsx'
import { LoadingState } from '../../components/LoadingState.jsx'
import { useInitiativeOperations } from '../../context/InitiativeOperationsContext.jsx'

function PlanProfileInner() {
  const ops = useInitiativeOperations()
  const { initiative, loading, error } = ops

  if (loading) {
    return <LoadingState message="Lade Profil …" />
  }

  if (!initiative) {
    return <p className="muted">Vorhaben nicht gefunden.</p>
  }

  return (
    <section className="card plan-profile">
      <header className="plan-profile__header">
        <h2 className="card-title">{initiative.title}</h2>
        <StatusBadge kind="initiative" status={initiative.status} />
      </header>
      {error && <p className="error">{error}</p>}
      {initiative.goal ? (
        <div className="plan-profile__field">
          <h3 className="plan-profile__label">Ziel</h3>
          <p>{initiative.goal}</p>
        </div>
      ) : (
        <p className="muted">
          Noch kein Ziel hinterlegt — vollständiges Profil folgt mit Archetypen (AP1.10).
        </p>
      )}
      <p className="muted plan-profile__note">
        Bearbeitung per Modal kommt in AP1.10 (Entity Field System).
      </p>
    </section>
  )
}

export function PlanProfilePage() {
  return (
    <RequireInitiativeScope lead="Das Vorhabens-Profil gehört zu einem gewählten Scope.">
      <ScopedInitiativeProvider>
        <PlanProfileInner />
      </ScopedInitiativeProvider>
    </RequireInitiativeScope>
  )
}