breakpilot-compliance/admin-compliance/app/sdk/quality/_components/TrainingDataQualityTab.tsx

'use client'

import { useState } from 'react'
import { useQuaidalData, type QuaidalControl } from '../_hooks/useQuaidalData'
import { QuaidalCriterionDetail } from './QuaidalCriterionDetail'

function CriterionCard({ ctrl, onOpen }: { ctrl: QuaidalControl; onOpen: () => void }) {
  return (
    <button
      onClick={onOpen}
      className="text-left bg-white rounded-xl border border-gray-200 p-5 hover:border-purple-400 hover:shadow-sm transition-all"
    >
      <div className="flex items-start justify-between mb-2">
        <h3 className="font-semibold text-gray-900">{ctrl.canonical_name}</h3>
        <span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-700">
          {ctrl.source.section}
        </span>
      </div>
      <p className="text-sm text-gray-600 line-clamp-3">{ctrl.description}</p>
      <div className="mt-3 flex flex-wrap items-center gap-2 text-xs">
        <span className="text-gray-500">Bausteine: <span className="font-medium text-gray-700">{ctrl.related_quaidal_ids.length}</span></span>
        {ctrl.external_refs.slice(0, 2).map((r, i) => (
          <span key={i} className="px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded">
            {r.framework}
          </span>
        ))}
      </div>
    </button>
  )
}

export function TrainingDataQualityTab() {
  const { criteria, stats, loading, error } = useQuaidalData()
  const [openSection, setOpenSection] = useState<string | null>(null)

  if (loading) {
    return <div className="text-center text-gray-400 py-12">Lade QUAIDAL-Katalog...</div>
  }
  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
        QUAIDAL-Daten konnten nicht geladen werden: {error}
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <div className="bg-purple-50 border border-purple-200 rounded-xl p-5">
        <h2 className="text-lg font-semibold text-gray-900">Trainingsdaten-Qualität nach BSI QUAIDAL</h2>
        <p className="text-sm text-gray-600 mt-1">
          Operative Umsetzung von EU AI Act Art. 10 (Datenqualität für Hochrisiko-KI) auf Basis des
          BSI-Katalogs QUAIDAL. Alle Controls sind eigenständig formuliert (Clean-Room) und verweisen
          auf die jeweilige QUAIDAL-Sektion.
        </p>
        {stats && (
          <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
            <div>
              <div className="text-xs text-gray-500">Qualitätskriterien</div>
              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.criterion ?? 0}</div>
            </div>
            <div>
              <div className="text-xs text-gray-500">Bausteine</div>
              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.building_block ?? 0}</div>
            </div>
            <div>
              <div className="text-xs text-gray-500">Maßnahmen</div>
              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.measure ?? 0}</div>
            </div>
            <div>
              <div className="text-xs text-gray-500">Metriken & Methoden</div>
              <div className="text-xl font-semibold text-gray-900">{stats.counts_by_kind.metric ?? 0}</div>
            </div>
          </div>
        )}
      </div>

      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-4">10 Qualitätskriterien</h3>
        {criteria.length === 0 ? (
          <div className="bg-white rounded-xl border border-gray-200 p-8 text-center text-gray-400">
            Keine Kriterien gefunden. Bitte Backend-Ingest prüfen.
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {criteria.map(c => (
              <CriterionCard
                key={c.derived_id}
                ctrl={c}
                onOpen={() => setOpenSection(c.source.section)}
              />
            ))}
          </div>
        )}
      </div>

      {stats?.license_note && (
        <div className="text-xs text-gray-500 italic">{stats.license_note}</div>
      )}

      {openSection && (
        <QuaidalCriterionDetail
          sectionId={openSection}
          onClose={() => setOpenSection(null)}
        />
      )}
    </div>
  )
}