breakpilot-lehrer/website/app/admin/compliance/controls/page.tsx

'use client'

/**
 * Control Catalogue Page
 *
 * Features:
 * - List all controls with filters
 * - Control detail view
 * - Status update / Review
 * - Evidence linking
 */

import { useState, useEffect } from 'react'
import Link from 'next/link'
import AdminLayout from '@/components/admin/AdminLayout'

interface Control {
  id: string
  control_id: string
  domain: string
  control_type: string
  title: string
  description: string
  pass_criteria: string
  implementation_guidance: string
  code_reference: string
  is_automated: boolean
  automation_tool: string
  owner: string
  status: string
  status_notes: string
  last_reviewed_at: string | null
  next_review_at: string | null
  evidence_count: 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',
}

const DOMAIN_COLORS: Record<string, string> = {
  gov: 'bg-slate-100 text-slate-700',
  priv: 'bg-blue-100 text-blue-700',
  iam: 'bg-purple-100 text-purple-700',
  crypto: 'bg-yellow-100 text-yellow-700',
  sdlc: 'bg-green-100 text-green-700',
  ops: 'bg-orange-100 text-orange-700',
  ai: 'bg-pink-100 text-pink-700',
  cra: 'bg-cyan-100 text-cyan-700',
  aud: 'bg-indigo-100 text-indigo-700',
}

const STATUS_STYLES: Record<string, { bg: string; text: string; icon: string }> = {
  pass: { bg: 'bg-green-100', text: 'text-green-700', icon: 'M5 13l4 4L19 7' },
  partial: { bg: 'bg-yellow-100', text: 'text-yellow-700', icon: 'M12 8v4m0 4h.01' },
  fail: { bg: 'bg-red-100', text: 'text-red-700', icon: 'M6 18L18 6M6 6l12 12' },
  planned: { bg: 'bg-slate-100', text: 'text-slate-700', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' },
  'n/a': { bg: 'bg-slate-100', text: 'text-slate-500', icon: 'M20 12H4' },
}

export default function ControlsPage() {
  const [controls, setControls] = useState<Control[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedControl, setSelectedControl] = useState<Control | null>(null)
  const [filterDomain, setFilterDomain] = useState<string>('')
  const [filterStatus, setFilterStatus] = useState<string>('')
  const [searchTerm, setSearchTerm] = useState('')
  const [reviewModalOpen, setReviewModalOpen] = useState(false)
  const [reviewStatus, setReviewStatus] = useState('pass')
  const [reviewNotes, setReviewNotes] = useState('')

  const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'

  useEffect(() => {
    loadControls()
  }, [filterDomain, filterStatus])

  const loadControls = async () => {
    setLoading(true)
    try {
      const params = new URLSearchParams()
      if (filterDomain) params.append('domain', filterDomain)
      if (filterStatus) params.append('status', filterStatus)
      if (searchTerm) params.append('search', searchTerm)

      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/controls?${params}`)
      if (res.ok) {
        const data = await res.json()
        setControls(data.controls || [])
      }
    } catch (error) {
      console.error('Failed to load controls:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleSearch = () => {
    loadControls()
  }

  const openReviewModal = (control: Control) => {
    setSelectedControl(control)
    setReviewStatus(control.status || 'planned')
    setReviewNotes(control.status_notes || '')
    setReviewModalOpen(true)
  }

  const submitReview = async () => {
    if (!selectedControl) return

    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/controls/${selectedControl.control_id}/review`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          status: reviewStatus,
          status_notes: reviewNotes,
        }),
      })

      if (res.ok) {
        setReviewModalOpen(false)
        loadControls()
      } else {
        alert('Fehler beim Speichern')
      }
    } catch (error) {
      console.error('Review failed:', error)
      alert('Fehler beim Speichern')
    }
  }

  const filteredControls = controls.filter((c) => {
    if (searchTerm) {
      const term = searchTerm.toLowerCase()
      return (
        c.control_id.toLowerCase().includes(term) ||
        c.title.toLowerCase().includes(term) ||
        (c.description && c.description.toLowerCase().includes(term))
      )
    }
    return true
  })

  const getDaysUntilReview = (nextReview: string | null) => {
    if (!nextReview) return null
    const days = Math.ceil((new Date(nextReview).getTime() - Date.now()) / (1000 * 60 * 60 * 24))
    return days
  }

  return (
    <AdminLayout title="Control Catalogue" description="Technische & organisatorische Controls">
      {/* Header Actions */}
      <div className="flex flex-wrap items-center gap-4 mb-6">
        <Link
          href="/admin/compliance"
          className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Zurueck zum Dashboard
        </Link>
        <div className="flex-1" />
        <span className="text-sm text-slate-500">{filteredControls.length} Controls</span>
      </div>

      {/* Filters */}
      <div className="bg-white rounded-xl shadow-sm border p-4 mb-6">
        <div className="flex flex-wrap items-center gap-4">
          <div className="flex-1 min-w-[200px]">
            <input
              type="text"
              placeholder="Control suchen..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
              className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
            />
          </div>

          <select
            value={filterDomain}
            onChange={(e) => setFilterDomain(e.target.value)}
            className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            <option value="">Alle Domains</option>
            {Object.entries(DOMAIN_LABELS).map(([key, label]) => (
              <option key={key} value={key}>{label}</option>
            ))}
          </select>

          <select
            value={filterStatus}
            onChange={(e) => setFilterStatus(e.target.value)}
            className="px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            <option value="">Alle Status</option>
            <option value="pass">Bestanden</option>
            <option value="partial">Teilweise</option>
            <option value="fail">Nicht bestanden</option>
            <option value="planned">Geplant</option>
            <option value="n/a">Nicht anwendbar</option>
          </select>

          <button
            onClick={handleSearch}
            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
          >
            Filtern
          </button>
        </div>
      </div>

      {/* Controls Table */}
      {loading ? (
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600" />
        </div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
          <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">ID</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Domain</th>
                  <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Titel</th>
                  <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Status</th>
                  <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Automatisiert</th>
                  <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Nachweise</th>
                  <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Review</th>
                  <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Aktionen</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200">
                {filteredControls.map((control) => {
                  const statusStyle = STATUS_STYLES[control.status] || STATUS_STYLES.planned
                  const daysUntilReview = getDaysUntilReview(control.next_review_at)

                  return (
                    <tr key={control.id} className="hover:bg-slate-50">
                      <td className="px-4 py-3">
                        <span className="font-mono font-medium text-primary-600">{control.control_id}</span>
                      </td>
                      <td className="px-4 py-3">
                        <span className={`px-2 py-1 text-xs rounded-full ${DOMAIN_COLORS[control.domain] || 'bg-slate-100 text-slate-700'}`}>
                          {DOMAIN_LABELS[control.domain] || control.domain}
                        </span>
                      </td>
                      <td className="px-4 py-3">
                        <div>
                          <p className="font-medium text-slate-900">{control.title}</p>
                          {control.description && (
                            <p className="text-sm text-slate-500 truncate max-w-md">{control.description}</p>
                          )}
                        </div>
                      </td>
                      <td className="px-4 py-3 text-center">
                        <span className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full ${statusStyle.bg} ${statusStyle.text}`}>
                          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={statusStyle.icon} />
                          </svg>
                          {control.status}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-center">
                        {control.is_automated ? (
                          <span className="inline-flex items-center gap-1 text-green-600">
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                            </svg>
                            <span className="text-xs">{control.automation_tool}</span>
                          </span>
                        ) : (
                          <span className="text-slate-400 text-xs">Manuell</span>
                        )}
                      </td>
                      <td className="px-4 py-3 text-center">
                        <Link
                          href={`/admin/compliance/evidence?control=${control.control_id}`}
                          className="text-primary-600 hover:text-primary-700 font-medium"
                        >
                          {control.evidence_count || 0}
                        </Link>
                      </td>
                      <td className="px-4 py-3 text-center">
                        {daysUntilReview !== null ? (
                          <span className={`text-sm ${daysUntilReview < 0 ? 'text-red-600 font-medium' : daysUntilReview < 14 ? 'text-yellow-600' : 'text-slate-500'}`}>
                            {daysUntilReview < 0 ? `${Math.abs(daysUntilReview)}d ueberfaellig` : `${daysUntilReview}d`}
                          </span>
                        ) : (
                          <span className="text-slate-400 text-sm">-</span>
                        )}
                      </td>
                      <td className="px-4 py-3 text-right">
                        <button
                          onClick={() => openReviewModal(control)}
                          className="text-sm text-primary-600 hover:text-primary-700 font-medium"
                        >
                          Review
                        </button>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      {/* Review Modal */}
      {reviewModalOpen && selectedControl && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6">
            <h3 className="text-lg font-semibold text-slate-900 mb-4">
              Control Review: {selectedControl.control_id}
            </h3>

            <div className="mb-4">
              <p className="text-sm text-slate-500 mb-2">{selectedControl.title}</p>
              <div className="p-3 bg-slate-50 rounded-lg text-sm">
                <p className="font-medium text-slate-700 mb-1">Pass-Kriterium:</p>
                <p className="text-slate-600">{selectedControl.pass_criteria}</p>
              </div>
            </div>

            <div className="mb-4">
              <label className="block text-sm font-medium text-slate-700 mb-2">Status</label>
              <div className="grid grid-cols-5 gap-2">
                {Object.entries(STATUS_STYLES).map(([key, style]) => (
                  <button
                    key={key}
                    onClick={() => setReviewStatus(key)}
                    className={`p-2 rounded-lg border-2 text-sm font-medium transition-colors ${
                      reviewStatus === key
                        ? `${style.bg} ${style.text} border-current`
                        : 'border-slate-200 hover:border-slate-300'
                    }`}
                  >
                    {key}
                  </button>
                ))}
              </div>
            </div>

            <div className="mb-6">
              <label className="block text-sm font-medium text-slate-700 mb-2">Notizen</label>
              <textarea
                value={reviewNotes}
                onChange={(e) => setReviewNotes(e.target.value)}
                placeholder="Begruendung, Nachweise, naechste Schritte..."
                rows={3}
                className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
              />
            </div>

            <div className="flex justify-end gap-3">
              <button
                onClick={() => setReviewModalOpen(false)}
                className="px-4 py-2 text-slate-600 hover:text-slate-800"
              >
                Abbrechen
              </button>
              <button
                onClick={submitReview}
                className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
              >
                Speichern
              </button>
            </div>
          </div>
        </div>
      )}
    </AdminLayout>
  )
}