import { useCallback, useEffect, useState } from 'react'
import { useInitiativeOperations } from '../../context/InitiativeOperationsContext.jsx'
import { listInitiativeJourney } from '../../api/journey.js'
import { DecisionsSection } from '../../components/DecisionsSection.jsx'
import { ReviewsSection } from '../../components/ReviewsSection.jsx'
import { RecurringSection } from '../../components/RecurringSection.jsx'
import { EvidenceSection } from '../../components/EvidenceSection.jsx'
import { JourneyTimeline } from '../../components/JourneyTimeline.jsx'

export function InitiativeJourneyPage() {
  const ops = useInitiativeOperations()
  const { id, capabilities, error, formBusy, roadmapItems } = ops
  const [journeyEvents, setJourneyEvents] = useState([])
  const [journeyLoading, setJourneyLoading] = useState(true)
  const [journeyError, setJourneyError] = useState(null)

  const loadJourney = useCallback(async () => {
    if (!id) return
    setJourneyLoading(true)
    setJourneyError(null)
    try {
      const data = await listInitiativeJourney(id)
      setJourneyEvents(data.events || [])
    } catch (err) {
      setJourneyError(err.message)
    } finally {
      setJourneyLoading(false)
    }
  }, [id])

  useEffect(() => {
    loadJourney()
  }, [loadJourney, ops.decisions, ops.reviews, ops.evidenceItems, ops.actions])

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

  return (
    <>
      {error && <p className="error">{error}</p>}

      <section className="card journey-timeline-section">
        <h2>Journey</h2>
        <p className="section-lead muted">
          Chronologie aus Entscheidungen, Nachweisen, committeter Arbeit und Zielzuständen — Plan/Ist
          nachvollziehbar.
        </p>
        {journeyError && <p className="error">{journeyError}</p>}
        {journeyLoading ? (
          <p className="muted">Timeline wird geladen…</p>
        ) : (
          <JourneyTimeline
            events={journeyEvents}
            initiativeId={id}
            roadmapItems={roadmapItems}
          />
        )}
      </section>

      <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}
          roadmapItems={ops.roadmapItems}
          canManage={capabilities.has('kairo.evidence.manage')}
          onCreate={ops.handleCreateEvidence}
          onUpdateStatus={ops.handleEvidenceStatus}
          onDelete={ops.handleDeleteEvidence}
          busy={formBusy}
        />
      </div>
    </>
  )
}