'use client'

import { useEffect, useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'
import {
  STEP_KEYS,
  STEP_LABEL_DE,
  type OeeAnalysisHeader,
  type OeeStation,
  type StepKey,
} from '@/lib/oee/analysis'
import StepperNav from './stepper-nav'
import AnalysisHeaderForm from './analysis-header-form'
import AnalysisStationsManager from './analysis-stations-manager'
import AnalysisMeasurementsManager from './analysis-measurements-manager'
import AnalysisSummary from './analysis-summary'
import {
  loadAnalysisHeader,
  loadStations,
} from '@/app/oee/analyse/actions'

type Props = {
  analysisId: string
  initialHeader: {
    id: string
    name: string
    project_id: string | null
    supplier_id: string | null
    analysis_date: string
    period_start: string | null
    period_end: string | null
    is_orphan: boolean
    status: string
  }
  initialStep?: string
}

function resolveStep(input: string | undefined): StepKey {
  if (input && (STEP_KEYS as readonly string[]).includes(input)) {
    return input as StepKey
  }
  return 'grunddaten'
}

export default function AnalysisStepperClient({ analysisId, initialHeader, initialStep }: Props) {
  const router = useRouter()
  const [step, setStep] = useState<StepKey>(resolveStep(initialStep))
  const [header, setHeader] = useState<OeeAnalysisHeader>({
    id: initialHeader.id,
    name: initialHeader.name,
    project_id: initialHeader.project_id,
    supplier_id: initialHeader.supplier_id,
    analysis_date: initialHeader.analysis_date,
    period_start: initialHeader.period_start,
    period_end: initialHeader.period_end,
    is_orphan: initialHeader.is_orphan,
    status: initialHeader.status,
  })
  const [stations, setStations] = useState<OeeStation[]>([])
  const [refreshCounter, setRefreshCounter] = useState(0)
  const [, startTransition] = useTransition()

  useEffect(() => {
    let cancelled = false
    startTransition(async () => {
      const [hdrRes, stRes] = await Promise.all([
        loadAnalysisHeader(analysisId),
        loadStations(analysisId),
      ])
      if (cancelled) return
      if (hdrRes.ok && hdrRes.data) setHeader(hdrRes.data)
      if (stRes.ok && stRes.data) setStations(stRes.data)
    })
    return () => {
      cancelled = true
    }
  }, [analysisId, refreshCounter])

  function selectStep(next: StepKey) {
    setStep(next)
    router.replace(`/oee/analyse/${analysisId}?step=${next}`)
  }

  const stationsCount = stations.length
  const lastUnlockedStep: StepKey =
    stationsCount > 0 ? 'auswertung' : 'grunddaten'

  return (
    <main className="max-w-4xl mx-auto px-4 py-6 pb-24 md:pb-8 space-y-6">
      <header className="flex flex-wrap items-start justify-between gap-3">
        <div>
          <div className="text-xs font-condensed text-muted-foreground uppercase tracking-wide">
            OEE-Analyse {header.is_orphan && '· Sandbox'}
          </div>
          <h1 className="text-lg font-bold text-foreground">{header.name || 'Unbenannte Analyse'}</h1>
          <p className="text-xs text-muted-foreground mt-1">
            Schritt {STEP_KEYS.indexOf(step) + 1} von 4 — {STEP_LABEL_DE[step]} · {stationsCount} Stationen
          </p>
        </div>
        <StepperNav current={step} onSelect={selectStep} disabledAfter={lastUnlockedStep} />
      </header>

      {step === 'grunddaten' && (
        <AnalysisHeaderForm
          analysisId={analysisId}
          header={header}
          onSaved={() => {
            setRefreshCounter((c) => c + 1)
            selectStep('stationen')
          }}
        />
      )}

      {step === 'stationen' && (
        <AnalysisStationsManager
          analysisId={analysisId}
          projectId={header.project_id}
          stations={stations}
          onMutated={() => setRefreshCounter((c) => c + 1)}
          onNext={() => selectStep('messungen')}
          onPrev={() => selectStep('grunddaten')}
        />
      )}

      {step === 'messungen' && (
        stations.length === 0 ? (
          <section className="bg-card border border-border rounded-md p-6 space-y-2">
            <p className="text-sm text-muted-foreground">
              Erst Stationen in Schritt 2 anlegen, bevor du Messungen erfassen kannst.
            </p>
          </section>
        ) : (
          <AnalysisMeasurementsManager
            analysisId={analysisId}
            stations={stations}
            onPrev={() => selectStep('stationen')}
            onNext={() => selectStep('auswertung')}
          />
        )
      )}

      {step === 'auswertung' && (
        <AnalysisSummary
          analysisId={analysisId}
          stations={stations}
          status={header.status ?? 'draft'}
          onPrev={() => selectStep('messungen')}
          onFinalized={() => setRefreshCounter((c) => c + 1)}
        />
      )}
    </main>
  )
}