import { Rule, Pattern, Control } from './types'

export function OverviewTab({ rules, patterns, controls }: {
  rules: Rule[]
  patterns: Pattern[]
  controls: Control[]
}) {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <h3 className="font-semibold text-slate-800 mb-2">Deterministische Regeln</h3>
          <div className="text-3xl font-bold text-purple-600">{rules.length}</div>
          <p className="text-sm text-slate-500 mt-2">
            Alle Entscheidungen basieren auf transparenten, nachvollziehbaren Regeln.
          </p>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <h3 className="font-semibold text-slate-800 mb-2">Architektur-Patterns</h3>
          <div className="text-3xl font-bold text-green-600">{patterns.length}</div>
          <p className="text-sm text-slate-500 mt-2">
            Best-Practice-Loesungen fuer datenschutzkonforme KI-Systeme.
          </p>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <h3 className="font-semibold text-slate-800 mb-2">Compliance-Kontrollen</h3>
          <div className="text-3xl font-bold text-blue-600">{controls.length}</div>
          <p className="text-sm text-slate-500 mt-2">
            Technische und organisatorische Massnahmen.
          </p>
        </div>
      </div>

      <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl border border-purple-200 p-6">
        <h3 className="font-semibold text-purple-800 text-lg mb-4">Was ist UCCA?</h3>
        <div className="prose prose-sm max-w-none text-slate-700">
          <p>
            <strong>UCCA (Use-Case Compliance & Feasibility Advisor)</strong> ist ein deterministisches
            Compliance-Pruefwerkzeug, das Organisationen bei der Bewertung geplanter KI-Anwendungsfaelle
            hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit unterstuetzt.
          </p>
          <h4 className="text-purple-700 mt-4">Kernprinzipien</h4>
          <ul className="space-y-2">
            <li><strong>Determinismus:</strong> Alle Entscheidungen basieren auf transparenten Regeln. Die KI trifft KEINE autonomen Entscheidungen.</li>
            <li><strong>Transparenz:</strong> Alle Regeln, Kontrollen und Patterns sind einsehbar.</li>
            <li><strong>Human-in-the-Loop:</strong> Kritische Entscheidungen erfordern immer menschliche Pruefung durch DSB oder Legal.</li>
            <li><strong>Rechtsgrundlage:</strong> Jede Regel referenziert konkrete DSGVO-Artikel.</li>
          </ul>
        </div>
      </div>

      <div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
        <h3 className="font-semibold text-amber-800 mb-3">Wichtiger Hinweis zur KI-Nutzung</h3>
        <p className="text-amber-700">
          Das System verwendet KI (LLM) <strong>ausschliesslich zur Erklaerung</strong> bereits
          getroffener Regelentscheidungen. Die eigentliche Compliance-Bewertung erfolgt
          <strong> rein deterministisch</strong> durch die Policy Engine. BLOCK-Entscheidungen
          koennen NICHT durch KI ueberschrieben werden.
        </p>
      </div>
    </div>
  )
}
