'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'
import { ScannerRepoPicker } from './_components/ScannerRepoPicker'

export default function CRAPage() {
  const params = useParams()
  const projectId = params?.projectId as string | undefined
  const { data, live, weights, setWeights, snapshots, saveSnapshot, viewSnapshot, scannerRepo, setScannerRepo } = useCRA(projectId)
  if (!data) {
    return <p className="text-sm text-gray-500">CRA-Risikobeurteilung wird geladen …</p>
  }
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-3">
        <span className="text-sm text-gray-500">
          Projektgebundene CE × Cyber-Analyse
        </span>
        <a href="/sdk/cra" className="text-sm text-purple-600 hover:underline whitespace-nowrap">
          Allgemeiner CRA-Readiness-Check →
        </a>
      </div>
      {!live && (
        <p className="text-sm text-amber-600 dark:text-amber-400">
          Backend nicht erreichbar — statisches Szenario angezeigt.
        </p>
      )}
      <ScannerRepoPicker value={scannerRepo} onChange={setScannerRepo} />
      <WeightsControl weights={weights} onChange={setWeights} />
      <CRACyberView data={data} scannerRepo={scannerRepo} />
      <SnapshotPanel snapshots={snapshots} onSave={saveSnapshot} onView={viewSnapshot} />
    </div>
  )
}
