'use client'

import { CRADemo, Measure } from '../_hooks/useCRADemo'
import { useCRAProgress } from '../_hooks/useCRAProgress'
import { ManagementSummary } from './ManagementSummary'
import { ProgressView } from './ProgressView'
import { CyberSafetyHero } from './CyberSafetyHero'
import { TechFindings } from './TechFindings'

export function CRACyberView({ data, scannerRepo = '' }: { data: CRADemo; scannerRepo?: string }) {
  const measuresById: Record<string, Measure> = Object.fromEntries(
    data.open_measures.map((m) => [m.id, m]),
  )
  const { progress, live: progressLive } = useCRAProgress(scannerRepo, data.findings)

  return (
    <div className="space-y-8">
      {/* Co-Pilot framing — advisory, not alarmist */}
      <header className="rounded-xl border border-purple-200 dark:border-purple-800 bg-purple-50/60 dark:bg-purple-900/20 p-5">
        <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">CRA / Cyber-Risiko</h1>
        <p className="text-base text-gray-700 dark:text-gray-200 mt-1">{data.scenario}</p>
        <p className="text-sm text-gray-500 mt-2">
          Wir verknüpfen die Cyber-Befunde Ihres Repo-Scans mit den CRA-Anforderungen und mit Ihrer
          bestehenden CE-Risikobeurteilung. Die Punkte sind Handlungsfelder zur gemeinsamen Klärung mit
          DSB/Anwalt — keine automatische Verstoßfeststellung.{' '}
          <span className="italic">Demo: erfundene Befunde, echtes CRA-Mapping.</span>
        </p>
      </header>

      {/* Ebene 1 — Management: Risiko & Aufwand auf einen Blick */}
      <ManagementSummary data={data} measuresById={measuresById} />

      {/* Ebene 1 — Projekt-Fortschritt: Ticket-Status zurückgelesen */}
      <ProgressView progress={progress} live={progressLive} />

      {/* Ebene 2 — Safety × Cyber: das Alleinstellungsmerkmal */}
      <CyberSafetyHero data={data} />

      {/* Ebene 3 — Technik: Controls, Standards, Maßnahmen (einklappbar) */}
      <TechFindings data={data} measuresById={measuresById} />
    </div>
  )
}
