'use client'

import { useParams } from 'next/navigation'
import { useCRA } from './_hooks/useCRA'
import { CRACyberView } from './_components/CRACyberView'
import { CyberMeetsSafety } from './_components/CyberMeetsSafety'
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} />

      {/* Ebene 2 — Cyber trifft Safety (Redesign, neue Design-Sprache) */}
      <div>
        <h2 className="font-publicSans" style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.01em', color: '#1A1D29', marginBottom: 12 }}>
          Cyber trifft Safety
        </h2>
        <CyberMeetsSafety data={data} />
      </div>

      {/* Bisherige Detailansicht (bleibt erhalten, bis das Redesign 100% abdeckt) */}
      <details className="rounded-lg border border-gray-200 dark:border-gray-700">
        <summary className="cursor-pointer px-4 py-2 text-sm text-gray-500">Bisherige Detailansicht (CRACyberView)</summary>
        <div className="p-1">
          <CRACyberView data={data} scannerRepo={scannerRepo} />
        </div>
      </details>
      <SnapshotPanel snapshots={snapshots} onSave={saveSnapshot} onView={viewSnapshot} />
    </div>
  )
}