'use client'

/**
 * Control Catalogue Page
 *
 * Features:
 * - List all 44+ controls with filters
 * - Domain-based organization (9 domains)
 * - Status update / Review workflow
 * - Evidence linking
 */

import { useState, useEffect } from 'react'
import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'

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

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 [saving, setSaving] = useState(false)

  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(`/api/admin/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

    setSaving(true)
    try {
      const res = await fetch(`/api/admin/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')
    } finally {
      setSaving(false)
    }
  }

  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
  }

  // Statistics
  const stats = {
    total: controls.length,
    pass: controls.filter(c => c.status === 'pass').length,
    partial: controls.filter(c => c.status === 'partial').length,
    fail: controls.filter(c => c.status === 'fail').length,
    planned: controls.filter(c => c.status === 'planned').length,
    automated: controls.filter(c => c.is_automated).length,
    overdue: controls.filter(c => {
      if (!c.next_review_at) return false
      return new Date(c.next_review_at) < new Date()
    }).length,
  }

  return (
    <div className="min-h-screen bg-slate-50 p-6">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-2xl font-bold text-slate-900">Control Catalogue</h1>
          <p className="text-slate-600">Technische & organisatorische Massnahmen</p>
        </div>
        <Link
          href="/compliance/hub"
          className="flex items-center gap-2 text-slate-600 hover:text-slate-800"
        >
          <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>
          Compliance Hub
        </Link>
      </div>

      {/* Page Purpose */}
      <PagePurpose
        title="Control Catalogue"
        purpose="Der Control-Katalog dokumentiert alle technischen und organisatorischen Massnahmen (TOMs) zur Einhaltung von ISO 27001, DSGVO, AI Act und BSI TR-03161. Jede Massnahme wird regelmaessig reviewed und mit Nachweisen verknuepft."
        audience={['CISO', 'DSB', 'Compliance Officer', 'Entwickler']}
        gdprArticles={['Art. 32 (Sicherheit)', 'Art. 25 (Privacy by Design)']}
        architecture={{
          services: ['Python Backend (FastAPI)', 'compliance_controls Modul'],
          databases: ['PostgreSQL (compliance_controls Table)'],
        }}
        relatedPages={[
          { name: 'Evidence', href: '/compliance/evidence', description: 'Nachweise zu Controls verwalten' },
          { name: 'Audit Checklist', href: '/compliance/audit-checklist', description: 'Anforderungen pruefen' },
          { name: 'Risks', href: '/compliance/risks', description: 'Risiko-Matrix verwalten' },
        ]}
      />

      {/* Statistics Cards */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4 mb-6">
        <div className="bg-white rounded-xl p-4 border border-slate-200">
          <p className="text-sm text-slate-500">Gesamt</p>
          <p className="text-2xl font-bold text-slate-900">{stats.total}</p>
        </div>
        <div className="bg-white rounded-xl p-4 border border-green-200">
          <p className="text-sm text-green-600">Bestanden</p>
          <p className="text-2xl font-bold text-green-700">{stats.pass}</p>
        </div>
        <div className="bg-white rounded-xl p-4 border border-yellow-200">
          <p className="text-sm text-yellow-600">Teilweise</p>
          <p className="text-2xl font-bold text-yellow-700">{stats.partial}</p>
        </div>
        <div className="bg-white rounded-xl p-4 border border-red-200">
          <p className="text-sm text-red-600">Nicht bestanden</p>
          <p className="text-2xl font-bold text-red-700">{stats.fail}</p>
        </div>
        <div className="bg-white rounded-xl p-4 border border-slate-200">
          <p className="text-sm text-slate-500">Geplant</p>
          <p className="text-2xl font-bold text-slate-700">{stats.planned}</p>
        </div>
        <div className="bg-white rounded-xl p-4 border border-blue-200">
          <p className="text-sm text-blue-600">Automatisiert</p>
          <p className="text-2xl font-bold text-blue-700">{stats.automated}</p>
        </div>
        <div className={`bg-white rounded-xl p-4 border ${stats.overdue > 0 ? 'border-red-300 bg-red-50' : 'border-slate-200'}`}>
          <p className="text-sm text-slate-500">Review faellig</p>
          <p className={`text-2xl font-bold ${stats.overdue > 0 ? 'text-red-600' : 'text-slate-700'}`}>
            {stats.overdue}
          </p>
        </div>
      </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 (ID, Titel, Beschreibung)..."
              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>
            {Object.entries(STATUS_STYLES).map(([key, style]) => (
              <option key={key} value={key}>{style.label}</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>
      ) : filteredControls.length === 0 ? (
        <div className="bg-white rounded-xl shadow-sm border p-12 text-center">
          <svg className="w-16 h-16 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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 2" />
          </svg>
          <p className="text-slate-500">Keine Controls gefunden</p>
          <p className="text-sm text-slate-400 mt-1">
            Versuchen Sie andere Filter oder laden Sie die Compliance-Daten im Hub
          </p>
        </div>
      ) : (
        <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
          <div className="px-4 py-3 border-b bg-slate-50 flex justify-between items-center">
            <span className="text-sm text-slate-500">{filteredControls.length} Controls</span>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-slate-50 border-b">
                <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>
                          {statusStyle.label}
                        </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={`/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 p-4">
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
            <div className="p-6 border-b">
              <h3 className="text-lg font-semibold text-slate-900">
                Control Review
              </h3>
              <p className="text-sm text-slate-500 font-mono">{selectedControl.control_id}</p>
            </div>

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

              <div>
                <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-xs font-medium transition-colors ${
                        reviewStatus === key
                          ? `${style.bg} ${style.text} border-current`
                          : 'border-slate-200 hover:border-slate-300'
                      }`}
                    >
                      {style.label}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <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>

            <div className="p-6 border-t bg-slate-50 flex justify-end gap-3">
              <button
                onClick={() => setReviewModalOpen(false)}
                className="px-4 py-2 text-slate-600 hover:text-slate-800"
                disabled={saving}
              >
                Abbrechen
              </button>
              <button
                onClick={submitReview}
                disabled={saving}
                className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
              >
                {saving ? 'Speichern...' : 'Speichern'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}
