import { useEffect, useState } from 'react'
import { useParams, useSearchParams } from 'react-router-dom'
import { getProject } from '../../api/projects.js'
import { LoadingState } from '../../components/LoadingState.jsx'
import { ErrorState } from '../../components/ErrorState.jsx'
import { useProgramScope } from '../../context/ProgramScopeContext.jsx'
import { ScopedInitiativeProvider } from '../../layout/ScopedInitiativeProvider.jsx'
import { ProjectDetailPage } from '../initiative/ProjectDetailPage.jsx'
import { recordRecentObject } from '../../utils/recentObjects.js'
import { projectPath } from '../../utils/routes.js'

export function ProjectObjectPage() {
  const { projectId } = useParams()
  const [searchParams] = useSearchParams()
  const { initiativeId: scopeInitiativeId, applyFromInitiative, applyFromProject } =
    useProgramScope()
  const initiativeFromQuery = searchParams.get('initiative') || scopeInitiativeId
  const [project, setProject] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    if (projectId === 'new') {
      if (initiativeFromQuery) applyFromInitiative(initiativeFromQuery)
      setProject(null)
      setLoading(false)
      return
    }
    let cancelled = false
    setLoading(true)
    setError(null)
    getProject(projectId)
      .then((data) => {
        if (cancelled) return
        setProject(data)
        applyFromProject(data)
        recordRecentObject({
          type: 'project',
          id: data.id,
          title: data.title,
          href: projectPath(data.id),
          initiativeId: data.initiative_id,
        })
      })
      .catch((err) => {
        if (!cancelled) setError(err.message)
      })
      .finally(() => {
        if (!cancelled) setLoading(false)
      })
    return () => {
      cancelled = true
    }
  }, [projectId, initiativeFromQuery, applyFromInitiative, applyFromProject])

  if (loading) {
    return (
      <div className="app-page">
        <LoadingState message="Lade Projekt …" />
      </div>
    )
  }

  if (error) {
    return (
      <div className="app-page">
        <ErrorState message={error} />
      </div>
    )
  }

  const initiativeId = project?.initiative_id || initiativeFromQuery

  if (projectId === 'new' && !initiativeId) {
    return (
      <div className="app-page">
        <ErrorState message="Für ein neues Projekt braucht es ein Vorhaben im Scope (?initiative=)." />
      </div>
    )
  }

  return (
    <div className="app-page">
      <ScopedInitiativeProvider initiativeId={initiativeId}>
        <ProjectDetailPage />
      </ScopedInitiativeProvider>
    </div>
  )
}