breakpilot-compliance/admin-compliance/app/sdk/compliance-hub/_components/StatsRow.tsx

'use client'

import { DashboardData } from '../_hooks/useComplianceHub'

const DOMAIN_LABELS: Record<string, string> = {
  gov: 'Governance',
  priv: 'Datenschutz',
  iam: 'Identity & Access',
  crypto: 'Kryptografie',
  sdlc: 'Secure Dev',
  ops: 'Operations',
  ai: 'KI-spezifisch',
  cra: 'Supply Chain',
  aud: 'Audit',
}

export function StatsRow({
  dashboard,
  scoreColor,
  scoreBgColor,
  score,
}: {
  dashboard: DashboardData | null
  scoreColor: string
  scoreBgColor: string
  score: number
}) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-sm font-medium text-slate-500 mb-4">Compliance Score</h3>
        <div className={`text-5xl font-bold ${scoreColor}`}>
          {score.toFixed(0)}%
        </div>
        <div className="mt-4 h-2 bg-slate-200 rounded-full overflow-hidden">
          <div
            className={`h-full transition-all duration-500 ${scoreBgColor}`}
            style={{ width: `${score}%` }}
          />
        </div>
        <p className="mt-2 text-sm text-slate-500">
          {dashboard?.controls_by_status?.pass || 0} von {dashboard?.total_controls || 0} Controls bestanden
        </p>
      </div>

      <div className="bg-white rounded-xl shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-slate-500">Verordnungen</p>
            <p className="text-2xl font-bold text-slate-900">{dashboard?.total_regulations || 0}</p>
          </div>
          <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
            <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
          </div>
        </div>
        <p className="mt-2 text-sm text-slate-500">{dashboard?.total_requirements || 0} Anforderungen</p>
      </div>

      <div className="bg-white rounded-xl shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-slate-500">Controls</p>
            <p className="text-2xl font-bold text-slate-900">{dashboard?.total_controls || 0}</p>
          </div>
          <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
            <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
        </div>
        <p className="mt-2 text-sm text-slate-500">{dashboard?.controls_by_status?.pass || 0} bestanden</p>
      </div>

      <div className="bg-white rounded-xl shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-slate-500">Nachweise</p>
            <p className="text-2xl font-bold text-slate-900">{dashboard?.total_evidence || 0}</p>
          </div>
          <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
            <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
          </div>
        </div>
        <p className="mt-2 text-sm text-slate-500">{dashboard?.evidence_by_status?.valid || 0} aktiv</p>
      </div>

      <div className="bg-white rounded-xl shadow-sm border p-6">
        <div className="flex items-center justify-between">
          <div>
            <p className="text-sm text-slate-500">Risiken</p>
            <p className="text-2xl font-bold text-slate-900">{dashboard?.total_risks || 0}</p>
          </div>
          <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
            <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
        </div>
        <p className="mt-2 text-sm text-slate-500">
          {(dashboard?.risks_by_level?.high || 0) + (dashboard?.risks_by_level?.critical || 0)} kritisch
        </p>
      </div>
    </div>
  )
}

export function DomainChart({ dashboard }: { dashboard: DashboardData | null }) {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <h3 className="text-lg font-semibold text-slate-900 mb-4">Controls nach Domain</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {Object.entries(dashboard?.controls_by_domain || {}).map(([domain, stats]) => {
          const total = stats.total || 0
          const pass = stats.pass || 0
          const partial = stats.partial || 0
          const passPercent = total > 0 ? ((pass + partial * 0.5) / total) * 100 : 0

          return (
            <div key={domain} className="p-3 rounded-lg bg-slate-50">
              <div className="flex justify-between text-sm mb-1">
                <span className="font-medium text-slate-700">
                  {DOMAIN_LABELS[domain] || domain.toUpperCase()}
                </span>
                <span className="text-slate-500">
                  {pass}/{total} ({passPercent.toFixed(0)}%)
                </span>
              </div>
              <div className="h-2 bg-slate-200 rounded-full overflow-hidden flex">
                <div className="bg-green-500 h-full" style={{ width: `${(pass / total) * 100}%` }} />
                <div className="bg-yellow-500 h-full" style={{ width: `${(partial / total) * 100}%` }} />
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}