breakpilot-compliance/admin-compliance/app/sdk/compliance-hub/page.tsx

'use client'

/**
 * Compliance Hub Page (SDK Version - Zusatzmodul)
 *
 * Central compliance management dashboard with:
 * - Compliance Score Overview
 * - Quick Access to all compliance modules (SDK paths)
 * - Control-Mappings with statistics
 * - Audit Findings
 * - Regulations overview
 */

import { useState, useEffect } from 'react'
import Link from 'next/link'

// Types
interface DashboardData {
  compliance_score: number
  total_regulations: number
  total_requirements: number
  total_controls: number
  controls_by_status: Record<string, number>
  controls_by_domain: Record<string, Record<string, number>>
  total_evidence: number
  evidence_by_status: Record<string, number>
  total_risks: number
  risks_by_level: Record<string, number>
}

interface Regulation {
  id: string
  code: string
  name: string
  full_name: string
  regulation_type: string
  effective_date: string | null
  description: string
  requirement_count: number
}

interface MappingsData {
  total: number
  by_regulation: Record<string, number>
}

interface FindingsData {
  major_count: number
  minor_count: number
  ofi_count: number
  total: number
  open_majors: number
  open_minors: number
}

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 default function ComplianceHubPage() {
  const [dashboard, setDashboard] = useState<DashboardData | null>(null)
  const [regulations, setRegulations] = useState<Regulation[]>([])
  const [mappings, setMappings] = useState<MappingsData | null>(null)
  const [findings, setFindings] = useState<FindingsData | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [seeding, setSeeding] = useState(false)

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

  const loadData = async () => {
    setLoading(true)
    setError(null)
    try {
      const [dashboardRes, regulationsRes, mappingsRes, findingsRes] = await Promise.all([
        fetch('/api/sdk/v1/compliance/dashboard'),
        fetch('/api/sdk/v1/compliance/regulations'),
        fetch('/api/sdk/v1/compliance/mappings'),
        fetch('/api/sdk/v1/isms/findings?status=open'),
      ])

      if (dashboardRes.ok) {
        setDashboard(await dashboardRes.json())
      }
      if (regulationsRes.ok) {
        const data = await regulationsRes.json()
        setRegulations(data.regulations || [])
      }
      if (mappingsRes.ok) {
        const data = await mappingsRes.json()
        setMappings(data)
      }
      if (findingsRes.ok) {
        const data = await findingsRes.json()
        setFindings(data)
      }
    } catch (err) {
      console.error('Failed to load compliance data:', err)
      setError('Verbindung zum Backend fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }

  const seedDatabase = async () => {
    setSeeding(true)
    try {
      const res = await fetch('/api/sdk/v1/compliance/seed', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ force: false }),
      })

      if (res.ok) {
        const result = await res.json()
        alert(`Datenbank erfolgreich initialisiert!\n\nRegulations: ${result.counts?.regulations || 0}\nControls: ${result.counts?.controls || 0}\nRequirements: ${result.counts?.requirements || 0}`)
        loadData()
      } else {
        const error = await res.text()
        alert(`Fehler beim Seeding: ${error}`)
      }
    } catch (err) {
      console.error('Seeding failed:', err)
      alert('Fehler beim Initialisieren der Datenbank')
    } finally {
      setSeeding(false)
    }
  }

  const score = dashboard?.compliance_score || 0
  const scoreColor = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-yellow-600' : 'text-red-600'
  const scoreBgColor = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-yellow-500' : 'bg-red-500'

  return (
    <div className="space-y-6">
      {/* Title Card (Zusatzmodul - no StepHeader) */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h1 className="text-2xl font-bold text-slate-900">Compliance Hub</h1>
        <p className="text-slate-500 mt-1">
          Zentrale Verwaltung aller Compliance-Anforderungen nach DSGVO, AI Act, BSI TR-03161 und weiteren Regulierungen.
        </p>
      </div>

      {/* Error Banner */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-3">
          <svg className="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span className="text-red-700">{error}</span>
          <button onClick={loadData} className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium">
            Erneut versuchen
          </button>
        </div>
      )}

      {/* Seed Button if no data */}
      {!loading && (dashboard?.total_controls || 0) === 0 && (
        <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="font-medium text-yellow-800">Keine Compliance-Daten vorhanden</p>
              <p className="text-sm text-yellow-700">Initialisieren Sie die Datenbank mit den Seed-Daten.</p>
            </div>
            <button
              onClick={seedDatabase}
              disabled={seeding}
              className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:opacity-50"
            >
              {seeding ? 'Initialisiere...' : 'Datenbank initialisieren'}
            </button>
          </div>
        </div>
      )}

      {/* Quick Actions */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schnellzugriff</h3>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
          <Link
            href="/sdk/audit-checklist"
            className="p-4 rounded-lg border border-slate-200 hover:border-purple-500 hover:bg-purple-50 transition-colors text-center"
          >
            <div className="text-purple-600 mb-2 flex justify-center">
              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
              </svg>
            </div>
            <p className="font-medium text-slate-900 text-sm">Audit Checkliste</p>
            <p className="text-xs text-slate-500 mt-1">{dashboard?.total_requirements || '...'} Anforderungen</p>
          </Link>

          <Link
            href="/sdk/controls"
            className="p-4 rounded-lg border border-slate-200 hover:border-green-500 hover:bg-green-50 transition-colors text-center"
          >
            <div className="text-green-600 mb-2 flex justify-center">
              <svg className="w-8 h-8" 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>
            <p className="font-medium text-slate-900 text-sm">Controls</p>
            <p className="text-xs text-slate-500 mt-1">{dashboard?.total_controls || '...'} Massnahmen</p>
          </Link>

          <Link
            href="/sdk/evidence"
            className="p-4 rounded-lg border border-slate-200 hover:border-blue-500 hover:bg-blue-50 transition-colors text-center"
          >
            <div className="text-blue-600 mb-2 flex justify-center">
              <svg className="w-8 h-8" 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>
            <p className="font-medium text-slate-900 text-sm">Evidence</p>
            <p className="text-xs text-slate-500 mt-1">Nachweise</p>
          </Link>

          <Link
            href="/sdk/risks"
            className="p-4 rounded-lg border border-slate-200 hover:border-red-500 hover:bg-red-50 transition-colors text-center"
          >
            <div className="text-red-600 mb-2 flex justify-center">
              <svg className="w-8 h-8" 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>
            <p className="font-medium text-slate-900 text-sm">Risk Matrix</p>
            <p className="text-xs text-slate-500 mt-1">5x5 Risiken</p>
          </Link>

          <Link
            href="/sdk/modules"
            className="p-4 rounded-lg border border-slate-200 hover:border-pink-500 hover:bg-pink-50 transition-colors text-center"
          >
            <div className="text-pink-600 mb-2 flex justify-center">
              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
              </svg>
            </div>
            <p className="font-medium text-slate-900 text-sm">Service Registry</p>
            <p className="text-xs text-slate-500 mt-1">Module</p>
          </Link>

          <Link
            href="/sdk/audit-report"
            className="p-4 rounded-lg border border-slate-200 hover:border-orange-500 hover:bg-orange-50 transition-colors text-center"
          >
            <div className="text-orange-600 mb-2 flex justify-center">
              <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
            <p className="font-medium text-slate-900 text-sm">Audit Report</p>
            <p className="text-xs text-slate-500 mt-1">PDF Export</p>
          </Link>
        </div>
      </div>

      {loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600" />
        </div>
      ) : (
        <>
          {/* Score and Stats Row */}
          <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>

          {/* Control-Mappings & Findings Row */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div className="bg-white rounded-xl shadow-sm border p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-slate-900">Control-Mappings</h3>
                <Link href="/sdk/controls" className="text-sm text-purple-600 hover:text-purple-700">
                  Alle anzeigen →
                </Link>
              </div>
              <div className="flex items-center gap-6 mb-4">
                <div>
                  <p className="text-4xl font-bold text-purple-600">{mappings?.total || 0}</p>
                  <p className="text-sm text-slate-500">Mappings gesamt</p>
                </div>
                <div className="flex-1 h-16 bg-slate-50 rounded-lg p-3">
                  <p className="text-xs text-slate-500 mb-1">Nach Verordnung</p>
                  <div className="flex gap-1 flex-wrap">
                    {mappings?.by_regulation && Object.entries(mappings.by_regulation).slice(0, 5).map(([reg, count]) => (
                      <span key={reg} className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">
                        {reg}: {count}
                      </span>
                    ))}
                    {!mappings?.by_regulation && (
                      <span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded text-xs">Keine Mappings vorhanden</span>
                    )}
                  </div>
                </div>
              </div>
              <p className="text-sm text-slate-600">
                Automatisch generierte Verknuepfungen zwischen {dashboard?.total_controls || 0} Controls
                und {dashboard?.total_requirements || 0} Anforderungen aus {dashboard?.total_regulations || 0} Verordnungen.
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-sm border p-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-slate-900">Audit Findings</h3>
                <Link href="/sdk/audit-checklist" className="text-sm text-purple-600 hover:text-purple-700">
                  Audit Checkliste →
                </Link>
              </div>
              <div className="grid grid-cols-2 gap-4 mb-4">
                <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
                  <div className="flex items-center gap-2 mb-1">
                    <div className="w-3 h-3 bg-red-500 rounded-full" />
                    <span className="text-sm font-medium text-red-800">Hauptabweichungen</span>
                  </div>
                  <p className="text-3xl font-bold text-red-600">{findings?.open_majors || 0}</p>
                  <p className="text-xs text-red-600">offen (blockiert Zertifizierung)</p>
                </div>
                <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                  <div className="flex items-center gap-2 mb-1">
                    <div className="w-3 h-3 bg-yellow-500 rounded-full" />
                    <span className="text-sm font-medium text-yellow-800">Nebenabweichungen</span>
                  </div>
                  <p className="text-3xl font-bold text-yellow-600">{findings?.open_minors || 0}</p>
                  <p className="text-xs text-yellow-600">offen (erfordert CAPA)</p>
                </div>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-slate-500">
                  Gesamt: {findings?.total || 0} Findings ({findings?.major_count || 0} Major, {findings?.minor_count || 0} Minor, {findings?.ofi_count || 0} OFI)
                </span>
                {(findings?.open_majors || 0) === 0 ? (
                  <span className="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
                    Zertifizierung moeglich
                  </span>
                ) : (
                  <span className="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs font-medium">
                    Zertifizierung blockiert
                  </span>
                )}
              </div>
            </div>
          </div>

          {/* Domain Chart */}
          <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>

          {/* Regulations Table */}
          <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
            <div className="p-4 border-b flex items-center justify-between">
              <h3 className="text-lg font-semibold text-slate-900">Verordnungen & Standards ({regulations.length})</h3>
              <button onClick={loadData} className="text-sm text-purple-600 hover:text-purple-700">
                Aktualisieren
              </button>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-slate-50">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Code</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Typ</th>
                    <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Anforderungen</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200">
                  {regulations.slice(0, 15).map((reg) => (
                    <tr key={reg.id} className="hover:bg-slate-50">
                      <td className="px-4 py-3">
                        <span className="font-mono font-medium text-purple-600">{reg.code}</span>
                      </td>
                      <td className="px-4 py-3">
                        <p className="font-medium text-slate-900">{reg.name}</p>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`px-2 py-1 text-xs rounded-full ${
                          reg.regulation_type === 'eu_regulation' ? 'bg-blue-100 text-blue-700' :
                          reg.regulation_type === 'eu_directive' ? 'bg-purple-100 text-purple-700' :
                          reg.regulation_type === 'bsi_standard' ? 'bg-green-100 text-green-700' :
                          'bg-slate-100 text-slate-700'
                        }`}>
                          {reg.regulation_type === 'eu_regulation' ? 'EU-VO' :
                           reg.regulation_type === 'eu_directive' ? 'EU-RL' :
                           reg.regulation_type === 'bsi_standard' ? 'BSI' :
                           reg.regulation_type === 'de_law' ? 'DE' : reg.regulation_type}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-center">
                        <span className="font-medium">{reg.requirement_count}</span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}
    </div>
  )
}