'use client'

import { useParams } from 'next/navigation'
import { useCRA } from './_hooks/useCRA'
import { CRACyberView } from './_components/CRACyberView'
import { WeightsControl } from './_components/WeightsControl'
import { SnapshotPanel } from './_components/SnapshotPanel'

export default function CRAPage() {
  const params = useParams()
  const projectId = params?.projectId as string | undefined
  const { data, live, weights, setWeights, snapshots, saveSnapshot, viewSnapshot } = useCRA(projectId)
  if (!data) {
    return <p className="text-sm text-gray-500">CRA-Risikobeurteilung wird geladen …</p>
  }
  return (
    <div className="space-y-6">
      {!live && (
        <p className="text-[11px] text-amber-600 dark:text-amber-400">
          Backend nicht erreichbar — statisches Szenario angezeigt.
        </p>
      )}
      <WeightsControl weights={weights} onChange={setWeights} />
      <CRACyberView data={data} />
      <SnapshotPanel snapshots={snapshots} onSave={saveSnapshot} onView={viewSnapshot} />
    </div>
  )
}