breakpilot-compliance/admin-compliance/app/sdk/control-library/_components/ControlDetailView.tsx

'use client'

import {
  Shield, ArrowLeft, ExternalLink, CheckCircle2, Lock,
  FileText, BookOpen, Scale, Pencil, Trash2, Eye, Clock,
} from 'lucide-react'
import type { CanonicalControl } from '../_types'
import { EFFORT_LABELS } from '../_types'
import { SeverityBadge, StateBadge, LicenseRuleBadge } from './Badges'

export function ControlDetailView({
  ctrl,
  onBack,
  onEdit,
  onDelete,
  onReview,
}: {
  ctrl: CanonicalControl
  onBack: () => void
  onEdit: () => void
  onDelete: (controlId: string) => void
  onReview: (controlId: string, action: string) => void
}) {
  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="flex items-center justify-between mb-6">
        <button onClick={onBack} className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
          <ArrowLeft className="w-4 h-4" /> Zurueck zur Uebersicht
        </button>
        <div className="flex items-center gap-2">
          <button onClick={onEdit} className="flex items-center gap-1 px-3 py-1.5 text-sm text-purple-600 border border-purple-300 rounded-lg hover:bg-purple-50">
            <Pencil className="w-3.5 h-3.5" /> Bearbeiten
          </button>
          <button onClick={() => onDelete(ctrl.control_id)} className="flex items-center gap-1 px-3 py-1.5 text-sm text-red-600 border border-red-300 rounded-lg hover:bg-red-50">
            <Trash2 className="w-3.5 h-3.5" /> Loeschen
          </button>
        </div>
      </div>

      {/* Header */}
      <div className="flex items-start gap-4 mb-6">
        <div className="flex-shrink-0 w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
          <Shield className="w-6 h-6 text-purple-600" />
        </div>
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-sm font-mono text-purple-600">{ctrl.control_id}</span>
            <SeverityBadge severity={ctrl.severity} />
            <StateBadge state={ctrl.release_state} />
          </div>
          <h1 className="text-xl font-bold text-gray-900">{ctrl.title}</h1>
          <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
            {ctrl.risk_score !== null && <span>Risiko-Score: {ctrl.risk_score}/10</span>}
            {ctrl.implementation_effort && <span>Aufwand: {EFFORT_LABELS[ctrl.implementation_effort] || ctrl.implementation_effort}</span>}
          </div>
        </div>
      </div>

      {/* Objective & Rationale */}
      <div className="space-y-6">
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Ziel</h3>
          <p className="text-sm text-gray-700 bg-gray-50 rounded-lg p-4">{ctrl.objective}</p>
        </section>

        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Begruendung</h3>
          <p className="text-sm text-gray-700 bg-gray-50 rounded-lg p-4">{ctrl.rationale}</p>
        </section>

        {/* Scope */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Geltungsbereich</h3>
          <div className="grid grid-cols-3 gap-4">
            {ctrl.scope.platforms && ctrl.scope.platforms.length > 0 && (
              <div>
                <p className="text-xs font-medium text-gray-500 mb-1">Plattformen</p>
                <div className="flex flex-wrap gap-1">
                  {ctrl.scope.platforms.map(p => (
                    <span key={p} className="px-2 py-0.5 bg-blue-50 text-blue-700 rounded text-xs">{p}</span>
                  ))}
                </div>
              </div>
            )}
            {ctrl.scope.components && ctrl.scope.components.length > 0 && (
              <div>
                <p className="text-xs font-medium text-gray-500 mb-1">Komponenten</p>
                <div className="flex flex-wrap gap-1">
                  {ctrl.scope.components.map(c => (
                    <span key={c} className="px-2 py-0.5 bg-purple-50 text-purple-700 rounded text-xs">{c}</span>
                  ))}
                </div>
              </div>
            )}
            {ctrl.scope.data_classes && ctrl.scope.data_classes.length > 0 && (
              <div>
                <p className="text-xs font-medium text-gray-500 mb-1">Datenklassen</p>
                <div className="flex flex-wrap gap-1">
                  {ctrl.scope.data_classes.map(d => (
                    <span key={d} className="px-2 py-0.5 bg-amber-50 text-amber-700 rounded text-xs">{d}</span>
                  ))}
                </div>
              </div>
            )}
          </div>
        </section>

        {/* Requirements */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Anforderungen</h3>
          <ol className="space-y-2">
            {ctrl.requirements.map((req, i) => (
              <li key={i} className="flex items-start gap-2 text-sm text-gray-700">
                <span className="flex-shrink-0 w-5 h-5 bg-purple-100 text-purple-700 rounded-full flex items-center justify-center text-xs font-medium mt-0.5">{i + 1}</span>
                {req}
              </li>
            ))}
          </ol>
        </section>

        {/* Test Procedure */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Pruefverfahren</h3>
          <ol className="space-y-2">
            {ctrl.test_procedure.map((step, i) => (
              <li key={i} className="flex items-start gap-2 text-sm text-gray-700">
                <CheckCircle2 className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
                {step}
              </li>
            ))}
          </ol>
        </section>

        {/* Evidence */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Nachweisanforderungen</h3>
          <div className="space-y-2">
            {ctrl.evidence.map((ev, i) => (
              <div key={i} className="flex items-start gap-2 p-3 bg-gray-50 rounded-lg">
                <FileText className="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" />
                <div>
                  <span className="text-xs font-medium text-gray-500 uppercase">{ev.type}</span>
                  <p className="text-sm text-gray-700">{ev.description}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Open Anchors — THE KEY SECTION */}
        <section className="bg-green-50 border border-green-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-3">
            <BookOpen className="w-4 h-4 text-green-700" />
            <h3 className="text-sm font-semibold text-green-900">Open-Source-Referenzen</h3>
            <span className="text-xs text-green-600">({ctrl.open_anchors.length} Quellen)</span>
          </div>
          <p className="text-xs text-green-700 mb-3">
            Dieses Control basiert auf frei verfuegbarem Wissen. Alle Referenzen sind offen und oeffentlich zugaenglich.
          </p>
          <div className="space-y-2">
            {ctrl.open_anchors.map((anchor, i) => (
              <div key={i} className="flex items-start gap-3 p-2 bg-white rounded border border-green-100">
                <Scale className="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5" />
                <div className="flex-1 min-w-0">
                  <span className="text-xs font-semibold text-green-800">{anchor.framework}</span>
                  <p className="text-sm text-gray-700">{anchor.ref}</p>
                </div>
                <a
                  href={anchor.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 text-xs text-green-600 hover:text-green-800 flex-shrink-0"
                >
                  <ExternalLink className="w-3 h-3" />
                  Quelle
                </a>
              </div>
            ))}
          </div>
        </section>

        {/* Tags */}
        {ctrl.tags.length > 0 && (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Tags</h3>
            <div className="flex flex-wrap gap-1.5">
              {ctrl.tags.map(tag => (
                <span key={tag} className="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">{tag}</span>
              ))}
            </div>
          </section>
        )}

        {/* License & Citation Info */}
        {ctrl.license_rule && (
          <section className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-2">
              <Scale className="w-4 h-4 text-blue-700" />
              <h3 className="text-sm font-semibold text-blue-900">Lizenzinformationen</h3>
              <LicenseRuleBadge rule={ctrl.license_rule} />
            </div>
            {ctrl.source_citation && (
              <div className="text-xs text-blue-800 space-y-1">
                <p><span className="font-medium">Quelle:</span> {ctrl.source_citation.source}</p>
                {ctrl.source_citation.license && <p><span className="font-medium">Lizenz:</span> {ctrl.source_citation.license}</p>}
                {ctrl.source_citation.license_notice && <p><span className="font-medium">Hinweis:</span> {ctrl.source_citation.license_notice}</p>}
                {ctrl.source_citation.url && (
                  <a href={ctrl.source_citation.url} target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 text-blue-600 hover:text-blue-800">
                    <ExternalLink className="w-3 h-3" /> Originalquelle
                  </a>
                )}
              </div>
            )}
            {ctrl.source_original_text && (
              <details className="mt-2">
                <summary className="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Originaltext anzeigen</summary>
                <p className="mt-1 text-xs text-gray-700 bg-white rounded p-2 border border-blue-100 max-h-40 overflow-y-auto">{ctrl.source_original_text}</p>
              </details>
            )}
            {ctrl.license_rule === 3 && (
              <p className="text-xs text-amber-700 mt-2 flex items-center gap-1">
                <Lock className="w-3 h-3" />
                Eigenstaendig formuliert — keine Originalquelle gespeichert
              </p>
            )}
          </section>
        )}

        {/* Generation Metadata (internal) */}
        {ctrl.generation_metadata && (
          <section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-2">
              <Clock className="w-4 h-4 text-gray-500" />
              <h3 className="text-sm font-semibold text-gray-700">Generierungsdetails (intern)</h3>
            </div>
            <div className="text-xs text-gray-600 space-y-1">
              <p>Pfad: {String(ctrl.generation_metadata.processing_path || '-')}</p>
              {ctrl.generation_metadata.similarity_status && (
                <p className="text-red-600">Similarity: {String(ctrl.generation_metadata.similarity_status)}</p>
              )}
              {Array.isArray(ctrl.generation_metadata.similar_controls) && (
                <div>
                  <p className="font-medium">Aehnliche Controls:</p>
                  {(ctrl.generation_metadata.similar_controls as Array<Record<string, unknown>>).map((s, i) => (
                    <p key={i} className="ml-2">{String(s.control_id)} — {String(s.title)} ({String(s.similarity)})</p>
                  ))}
                </div>
              )}
            </div>
          </section>
        )}

        {/* Review Actions */}
        {['needs_review', 'too_close', 'duplicate'].includes(ctrl.release_state) && (
          <section className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <Eye className="w-4 h-4 text-yellow-700" />
              <h3 className="text-sm font-semibold text-yellow-900">Review erforderlich</h3>
            </div>
            <div className="flex items-center gap-2">
              <button
                onClick={() => onReview(ctrl.control_id, 'approve')}
                className="px-3 py-1.5 text-sm text-white bg-green-600 rounded-lg hover:bg-green-700"
              >
                <CheckCircle2 className="w-3.5 h-3.5 inline mr-1" />
                Akzeptieren
              </button>
              <button
                onClick={() => onReview(ctrl.control_id, 'reject')}
                className="px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700"
              >
                <Trash2 className="w-3.5 h-3.5 inline mr-1" />
                Ablehnen
              </button>
              <button
                onClick={onEdit}
                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
              >
                <Pencil className="w-3.5 h-3.5 inline mr-1" />
                Ueberarbeiten
              </button>
            </div>
          </section>
        )}
      </div>
    </div>
  )
}