breakpilot-compliance/admin-compliance/app/sdk/cra/[projectId]/path/page.tsx

'use client'

import React, { useEffect, useState, useCallback, use } from 'react'
import { useRouter } from 'next/navigation'
import { ClassificationBadge } from '../../_components/ClassificationBadge'

interface CRAProject {
  id: string
  name: string
  cra_classification: string | null
  conformity_path: string | null
  status: string
}

type PathId = 'self_assessment' | 'harmonized_standard' | 'eucc' | 'notified_body'

interface PathOption {
  id: PathId
  modul: string
  title: string
  short: string
  details: string[]
  available?: boolean   // false = rechtlich vorgesehen, aber noch nicht nutzbar
  note?: string
  bpRole: string        // was BreakPilot bei diesem Weg leistet (immer sichtbar)
  info?: string[]       // aufklappbarer Erklaer-Text
}

const PATHS: PathOption[] = [
  {
    id: 'self_assessment',
    modul: 'Modul A',
    title: 'Selbstbewertung (interne Kontrolle)',
    short: 'Hersteller erklaert die Konformitaet selbst',
    bpRole: 'Komplett mit BreakPilot durchführbar — keine externe Stelle nötig.',
    details: [
      'Hersteller fuehrt die Konformitaetsbewertung selbst durch',
      'Geringster externer Aufwand, schnelle Umsetzung',
      'Nur fuer Standard- und (mit Norm) wichtige Klasse-I-Produkte',
      'Technische Dokumentation + Konformitaetserklaerung bleiben Pflicht',
    ],
    info: [
      'Bei Modul A erklärst du die CRA-Konformität selbst, ohne externe Prüfstelle.',
      'BreakPilot erzeugt dafür Risikobeurteilung, technische Dokumentation und die Konformitätserklärung direkt im Tool — du gehst end-to-end mit uns durch.',
    ],
  },
  {
    id: 'harmonized_standard',
    modul: 'Konformitaetsvermutung',
    title: 'Harmonisierte Normen',
    short: 'Vermutungswirkung durch eine harmonisierte EU-Norm',
    available: false,
    note: 'Fuer den CRA noch keine harmonisierte Norm veroeffentlicht — Entwuerfe erwartet ~Ende 2026, Listung im Amtsblatt voraussichtlich 2027.',
    bpRole: 'Sobald die Normen gelistet sind, prüfen wir die Vermutungswirkung automatisch mit.',
    details: [
      'Kein eigenes Modul, sondern Grundlage der Konformitaetsvermutung',
      'Wer danach baut, gilt als CRA-konform und darf (Standard/Klasse I) selbst bewerten',
      'Bis dahin ggf. ueber gemeinsame Spezifikationen der Kommission (Art. 27)',
    ],
  },
  {
    id: 'eucc',
    modul: 'EUCC',
    title: 'EU-Cybersicherheitszertifikat',
    short: 'Zertifizierung nach EUCC-Schema (Common-Criteria-basiert)',
    bpRole: 'Wir machen dich audit-fähig — die formale Prüfung macht ein akkreditiertes Labor (ITSEF), nicht BreakPilot.',
    details: [
      'EUCC-Zertifikat (in der Regel Stufe „substanziell")',
      'Eigener Weg unter dem Cybersecurity Act',
      'Hohe Anerkennung in EU + Drittstaaten',
      'Regulaerer Weg fuer wichtige Klasse II und kritische Produkte',
    ],
    info: [
      'EUCC ist das EU-Cybersicherheits-Zertifizierungsschema (VO 2024/482) unter dem Cybersecurity Act, methodisch auf Common Criteria (ISO/IEC 15408) aufgebaut. Zertifiziert wird ein konkretes Produkt/eine Komponente — nicht die ganze Anlage.',
      'Stufen: „substanziell" oder „hoch", Gültigkeit i. d. R. bis 5 Jahre. Die formale Prüfung führt ein akkreditiertes Labor (ITSEF) durch; das Zertifikat stellt eine Zertifizierungsstelle aus (Stufe „hoch": mit dem BSI).',
      'Mit BreakPilot: Prüfobjekt abgrenzen, Nachweise (sichere Entwicklung, Konfiguration, Schwachstellen-Management, Anwender-Doku) strukturieren und Lücken VOR dem Labor schließen. Du gehst vorbereitet ins ITSEF-Audit — das spart Zeit und teure Nachprüf-Schleifen.',
      'Oft sinnvoller: eine bereits EUCC-zertifizierte Komponente zukaufen und die Vermutungswirkung erben.',
    ],
  },
  {
    id: 'notified_body',
    modul: 'Modul B+C',
    title: 'Benannte Stelle (Baumusterpruefung)',
    short: 'Dritte Stelle prueft (EU-Baumusterpruefung + Produktionskontrolle)',
    bpRole: 'Wir bereiten Doku + Nachweise auf — geprüft wird von der benannten Stelle.',
    details: [
      'EU-Baumusterpruefung (Modul B) durch akkreditierte benannte Stelle',
      'gefolgt von Produktionskontrolle (Modul C); alternativ volle QS (Modul H)',
      'Pflichtweg fuer wichtige Klasse II und kritische Produkte (Annex IV)',
      'Hoechste Auditierbarkeit, hoechste Laufzeit + Kosten',
    ],
    info: [
      'Eine akkreditierte benannte Stelle prüft das Baumuster (Modul B) und die Produktionskontrolle (Modul C) — alternativ ein vollständiges Qualitätssicherungssystem (Modul H).',
      'Mit BreakPilot: wir erstellen die technische Dokumentation und das Nachweis-Paket und machen einen Gap-Check, damit das Audit glatt läuft. Die Prüfung selbst macht die benannte Stelle.',
    ],
  },
]

const ALLOWED: Record<string, PathId[]> = {
  STANDARD: ['self_assessment', 'harmonized_standard', 'eucc', 'notified_body'],
  IMPORTANT_I: ['self_assessment', 'harmonized_standard', 'eucc', 'notified_body'],
  // Klasse II darf nicht selbst bewerten; harmonisierte Norm allein genuegt nicht.
  IMPORTANT_II: ['eucc', 'notified_body'],
  CRITICAL: ['eucc', 'notified_body'],
}

const DEFAULT_FOR: Record<string, PathId> = {
  STANDARD: 'self_assessment',
  IMPORTANT_I: 'self_assessment',
  IMPORTANT_II: 'notified_body',
  CRITICAL: 'notified_body',
}

export default function PathSelectPage({
  params,
}: {
  params: Promise<{ projectId: string }>
}) {
  const { projectId } = use(params)
  const router = useRouter()
  const [project, setProject] = useState<CRAProject | null>(null)
  const [selected, setSelected] = useState<PathId | null>(null)
  const [infoOpen, setInfoOpen] = useState<Record<string, boolean>>({})
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')

  const tenant = '9282a473-5c95-4b3a-bf78-0ecc0ec71d3e'

  const load = useCallback(async () => {
    try {
      const res = await fetch(`/api/sdk/v1/cra/projects/${projectId}`, {
        headers: { 'X-Tenant-ID': tenant },
      })
      if (!res.ok) throw new Error(await res.text())
      const p: CRAProject = await res.json()
      setProject(p)
      if (p.conformity_path) {
        setSelected(p.conformity_path as PathId)
      } else if (p.cra_classification && DEFAULT_FOR[p.cra_classification]) {
        setSelected(DEFAULT_FOR[p.cra_classification])
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
    } finally {
      setLoading(false)
    }
  }, [projectId])

  useEffect(() => { load() }, [load])

  const submit = async () => {
    if (!selected) return
    setSaving(true)
    setError('')
    try {
      const res = await fetch(`/api/sdk/v1/cra/projects/${projectId}/path-select`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenant },
        body: JSON.stringify({ conformity_path: selected }),
      })
      if (!res.ok) throw new Error(await res.text())
      router.push(`/sdk/cra/${projectId}`)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Speichern fehlgeschlagen')
    } finally {
      setSaving(false)
    }
  }

  if (loading) return <div className="min-h-screen bg-gray-50 p-8"><p className="text-gray-500">Laedt...</p></div>
  if (!project) return null

  if (!project.cra_classification) {
    return (
      <div className="min-h-screen bg-gray-50 p-8">
        <div className="max-w-2xl mx-auto bg-yellow-50 border border-yellow-200 rounded-lg p-6">
          <p className="text-yellow-800">
            Bitte erst den Scope-Check ausfuehren.
            <a href={`/sdk/cra/${projectId}/scope`} className="ml-2 underline">→ Zum Scope-Check</a>
          </p>
        </div>
      </div>
    )
  }

  const allowedPaths = ALLOWED[project.cra_classification] || []

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-4xl mx-auto px-4">
        <div className="mb-6">
          <a href={`/sdk/cra/${projectId}`} className="text-sm text-blue-600 hover:underline">
            &larr; Zurueck zum Projekt
          </a>
          <h1 className="text-2xl font-bold text-gray-900 mt-2">Konformitaetspfad waehlen</h1>
          <p className="text-sm text-gray-600 mt-1">
            Schritt 3 von 3 — basierend auf der Klassifikation siehst du die zulaessigen Pfade.
          </p>
          <div className="mt-3 flex items-center gap-2">
            <span className="text-sm text-gray-600">Klassifikation:</span>
            <ClassificationBadge value={project.cra_classification} size="md" />
          </div>
        </div>

        {error && (
          <div className="mb-4 bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">{error}</div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
          {PATHS.map(path => {
            const allowed = allowedPaths.includes(path.id)
            const available = path.available !== false
            const selectable = allowed && available
            const isSelected = selected === path.id
            return (
              <div
                key={path.id}
                className={`text-left p-5 rounded-xl border-2 transition-all ${
                  isSelected ? 'border-red-500 bg-red-50' :
                  selectable ? 'border-gray-200 bg-white' :
                  'border-gray-200 bg-gray-50'
                }`}
              >
                <div className="flex items-start justify-between mb-2 gap-2">
                  <div>
                    <span className="text-xs font-semibold text-gray-500 uppercase tracking-wide">{path.modul}</span>
                    <h3 className="text-lg font-semibold text-gray-900">{path.title}</h3>
                  </div>
                  {isSelected ? (
                    <span className="px-2 py-0.5 text-xs bg-red-600 text-white rounded whitespace-nowrap">Gewaehlt</span>
                  ) : !available ? (
                    <span className="px-2 py-0.5 text-xs bg-amber-100 text-amber-700 rounded whitespace-nowrap">Noch nicht verfügbar</span>
                  ) : !allowed ? (
                    <span className="px-2 py-0.5 text-xs bg-gray-200 text-gray-600 rounded whitespace-nowrap">Nicht zulaessig</span>
                  ) : null}
                </div>
                <p className="text-sm text-gray-600 mb-2">{path.short}</p>
                {path.note && (
                  <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded px-2 py-1.5 mb-2">{path.note}</p>
                )}
                <p className="text-sm text-purple-800 bg-purple-50 border border-purple-200 rounded px-2 py-1.5 mb-2">
                  <span className="font-semibold">Mit BreakPilot:</span> {path.bpRole}
                </p>
                <ul className="text-sm text-gray-600 space-y-1">
                  {path.details.map((d, i) => (
                    <li key={i} className="flex items-start gap-1.5">
                      <span className="text-gray-400 mt-0.5">•</span>
                      <span>{d}</span>
                    </li>
                  ))}
                </ul>
                {path.info && (
                  <>
                    <button
                      type="button"
                      onClick={() => setInfoOpen(o => ({ ...o, [path.id]: !o[path.id] }))}
                      className="mt-3 text-sm text-purple-600 hover:underline"
                    >
                      {infoOpen[path.id] ? 'Weniger anzeigen ▲' : 'Mehr erfahren ▼'}
                    </button>
                    {infoOpen[path.id] && (
                      <div className="mt-2 space-y-2 text-sm text-gray-600 border-t border-gray-100 pt-3">
                        {path.info.map((p, i) => (<p key={i}>{p}</p>))}
                      </div>
                    )}
                  </>
                )}
                <div className="mt-4">
                  <button
                    type="button"
                    onClick={() => selectable && setSelected(path.id)}
                    disabled={!selectable}
                    className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                      isSelected ? 'bg-red-600 text-white' :
                      selectable ? 'border border-red-300 text-red-700 hover:bg-red-50' :
                      'border border-gray-200 text-gray-400 cursor-not-allowed'
                    }`}
                  >
                    {isSelected ? 'Ausgewählt ✓'
                      : selectable ? 'Diesen Weg wählen'
                      : !available ? 'Noch nicht verfügbar'
                      : 'Nicht zulässig'}
                  </button>
                </div>
              </div>
            )
          })}
        </div>

        <div className="bg-white rounded-xl border border-gray-200 p-4 flex items-center justify-between">
          <div className="text-sm text-gray-600">
            {selected ? (
              <>Ausgewaehlt: <span className="font-medium text-gray-900">
                {PATHS.find(p => p.id === selected)?.title}
              </span></>
            ) : (
              'Keine Auswahl getroffen'
            )}
          </div>
          <div className="flex gap-3">
            <button
              onClick={() => router.push(`/sdk/cra/${projectId}/scope`)}
              disabled={saving}
              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"
            >
              ← Zurueck
            </button>
            <button
              onClick={submit}
              disabled={saving || !selected}
              className="px-6 py-2 bg-red-600 text-white font-medium rounded-lg hover:bg-red-700 disabled:bg-gray-300"
            >
              {saving ? 'Speichert...' : 'Pfad festlegen'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}