import { useInitiativeOperations } from '../../context/InitiativeOperationsContext.jsx'
import { DecisionsSection } from '../../components/DecisionsSection.jsx'
import { ReviewsSection } from '../../components/ReviewsSection.jsx'
import { RecurringSection } from '../../components/RecurringSection.jsx'
import { EvidenceSection } from '../../components/EvidenceSection.jsx'

export function InitiativeJourneyPage() {
  const ops = useInitiativeOperations()
  const { capabilities, error, formBusy } = ops

  if (!capabilities.has('kairo.initiative.read')) {
    return null
  }

  return (
    <>
      {error && <p className="error">{error}</p>}
      <p className="section-lead muted initiative-journey-lead">
        Entscheidungen, Reviews und Nachweise — die Reise-Timeline folgt in AP1.6.
      </p>
      <div className="initiative-journey-stack">
        <DecisionsSection
          items={ops.decisions}
          canManage={capabilities.has('kairo.decision.manage')}
          onCreate={ops.handleCreateDecision}
          onUpdateStatus={ops.handleDecisionStatus}
          onDelete={ops.handleDeleteDecision}
          busy={formBusy}
        />
        <ReviewsSection
          items={ops.reviews}
          canManage={capabilities.has('kairo.review.manage')}
          onCreate={ops.handleCreateReview}
          onUpdateStatus={ops.handleReviewStatus}
          onDelete={ops.handleDeleteReview}
          busy={formBusy}
        />
        <RecurringSection
          items={ops.recurringItems}
          canManage={capabilities.has('kairo.recurring.manage')}
          onCreate={ops.handleCreateRecurring}
          onUpdateStatus={ops.handleRecurringStatus}
          onDelete={ops.handleDeleteRecurring}
          busy={formBusy}
        />
        <EvidenceSection
          items={ops.evidenceItems}
          canManage={capabilities.has('kairo.evidence.manage')}
          onCreate={ops.handleCreateEvidence}
          onUpdateStatus={ops.handleEvidenceStatus}
          onDelete={ops.handleDeleteEvidence}
          busy={formBusy}
        />
      </div>
    </>
  )
}