breakpilot-compliance/admin-compliance/components/sdk/source-policy/PIIRulesTab.tsx

'use client'

import { useState, useEffect } from 'react'

interface PIIRule {
  id: string
  name: string
  description?: string
  pattern?: string
  category: string
  action: string
  active: boolean
  created_at: string
}

interface PIIMatch {
  rule_id: string
  rule_name: string
  category: string
  action: string
  match: string
  start_index: number
  end_index: number
}

interface PIITestResult {
  has_pii: boolean
  matches: PIIMatch[]
  should_block: boolean
}

interface PIIRulesTabProps {
  apiBase: string
  onUpdate?: () => void
}

const CATEGORIES = [
  { value: 'email', label: 'E-Mail-Adressen' },
  { value: 'phone', label: 'Telefonnummern' },
  { value: 'iban', label: 'IBAN/Bankdaten' },
  { value: 'name', label: 'Personennamen' },
  { value: 'address', label: 'Adressen' },
  { value: 'id_number', label: 'Ausweisnummern' },
  { value: 'health', label: 'Gesundheitsdaten' },
  { value: 'other', label: 'Sonstige' },
]

const ACTIONS = [
  { value: 'warn', label: 'Warnung', color: 'bg-amber-100 text-amber-700' },
  { value: 'mask', label: 'Maskieren', color: 'bg-orange-100 text-orange-700' },
  { value: 'block', label: 'Blockieren', color: 'bg-red-100 text-red-700' },
]

export function PIIRulesTab({ apiBase, onUpdate }: PIIRulesTabProps) {
  const [rules, setRules] = useState<PIIRule[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Category filter
  const [categoryFilter, setCategoryFilter] = useState('')

  // Test panel
  const [testText, setTestText] = useState('')
  const [testResult, setTestResult] = useState<PIITestResult | null>(null)
  const [testing, setTesting] = useState(false)

  // Edit modal
  const [editingRule, setEditingRule] = useState<PIIRule | null>(null)
  const [isNewRule, setIsNewRule] = useState(false)
  const [saving, setSaving] = useState(false)

  // New rule form
  const [newRule, setNewRule] = useState({
    name: '',
    pattern: '',
    category: 'email',
    action: 'block',
    active: true,
  })

  useEffect(() => {
    fetchRules()
  }, [categoryFilter])

  const fetchRules = async () => {
    try {
      setLoading(true)
      const params = new URLSearchParams()
      if (categoryFilter) params.append('category', categoryFilter)
      const res = await fetch(`${apiBase}/pii-rules?${params}`)
      if (!res.ok) throw new Error('Fehler beim Laden')

      const data = await res.json()
      setRules(data.rules || [])
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setLoading(false)
    }
  }

  const createRule = async () => {
    try {
      setSaving(true)
      const res = await fetch(`${apiBase}/pii-rules`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newRule),
      })

      if (!res.ok) throw new Error('Fehler beim Erstellen')

      setNewRule({
        name: '',
        pattern: '',
        category: 'email',
        action: 'block',
        active: true,
      })
      setIsNewRule(false)
      fetchRules()
      onUpdate?.()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setSaving(false)
    }
  }

  const updateRule = async () => {
    if (!editingRule) return

    try {
      setSaving(true)
      const res = await fetch(`${apiBase}/pii-rules/${editingRule.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(editingRule),
      })

      if (!res.ok) throw new Error('Fehler beim Aktualisieren')

      setEditingRule(null)
      fetchRules()
      onUpdate?.()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setSaving(false)
    }
  }

  const deleteRule = async (id: string) => {
    if (!confirm('Regel wirklich loeschen? Diese Aktion wird im Audit-Log protokolliert.')) return

    try {
      const res = await fetch(`${apiBase}/pii-rules/${id}`, {
        method: 'DELETE',
      })

      if (!res.ok) throw new Error('Fehler beim Loeschen')

      fetchRules()
      onUpdate?.()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    }
  }

  const toggleRuleStatus = async (rule: PIIRule) => {
    try {
      const res = await fetch(`${apiBase}/pii-rules/${rule.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ active: !rule.active }),
      })

      if (!res.ok) throw new Error('Fehler beim Aendern des Status')

      fetchRules()
      onUpdate?.()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    }
  }

  const runTest = () => {
    if (!testText) return

    setTesting(true)
    const matches: PIIMatch[] = []
    const activeRules = rules.filter((r) => r.active && r.pattern)

    for (const rule of activeRules) {
      try {
        const regex = new RegExp(rule.pattern!, 'gi')
        let m: RegExpExecArray | null
        while ((m = regex.exec(testText)) !== null) {
          matches.push({
            rule_id: rule.id,
            rule_name: rule.name,
            category: rule.category,
            action: rule.action,
            match: m[0],
            start_index: m.index,
            end_index: m.index + m[0].length,
          })
        }
      } catch {
        // Invalid regex — skip
      }
    }

    const shouldBlock = matches.some((m) => m.action === 'block')
    setTestResult({
      has_pii: matches.length > 0,
      matches,
      should_block: shouldBlock,
    })
    setTesting(false)
  }

  const getActionBadge = (action: string) => {
    const config = ACTIONS.find((a) => a.value === action)
    return (
      <span className={`px-2 py-1 rounded text-xs font-medium ${config?.color || 'bg-slate-100 text-slate-700'}`}>
        {config?.label || action}
      </span>
    )
  }

  return (
    <div>
      {/* Error Display */}
      {error && (
        <div className="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
          <span>{error}</span>
          <button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">
            &times;
          </button>
        </div>
      )}

      {/* Test Panel */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 mb-6">
        <h3 className="font-semibold text-slate-900 mb-4">PII-Test</h3>
        <p className="text-sm text-slate-600 mb-4">
          Testen Sie, ob ein Text personenbezogene Daten (PII) enthaelt.
        </p>

        <textarea
          value={testText}
          onChange={(e) => setTestText(e.target.value)}
          placeholder="Geben Sie hier einen Text zum Testen ein...

Beispiel:
Kontaktieren Sie mich unter max.mustermann@example.com oder
rufen Sie mich an unter +49 170 1234567.
Meine IBAN ist DE89 3704 0044 0532 0130 00."
          rows={6}
          className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm"
        />

        <div className="flex justify-between items-center mt-4">
          <button
            onClick={() => {
              setTestText('')
              setTestResult(null)
            }}
            className="text-sm text-slate-500 hover:text-slate-700"
          >
            Zuruecksetzen
          </button>
          <button
            onClick={runTest}
            disabled={testing || !testText}
            className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
          >
            {testing ? 'Teste...' : 'Testen'}
          </button>
        </div>

        {/* Test Results */}
        {testResult && (
          <div className={`mt-4 p-4 rounded-lg ${testResult.should_block ? 'bg-red-50 border border-red-200' : testResult.has_pii ? 'bg-amber-50 border border-amber-200' : 'bg-green-50 border border-green-200'}`}>
            <div className="flex items-center gap-2 mb-3">
              {testResult.should_block ? (
                <>
                  <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>
                  <span className="font-medium text-red-800">Blockiert - Kritische PII gefunden</span>
                </>
              ) : testResult.has_pii ? (
                <>
                  <svg className="w-5 h-5 text-amber-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>
                  <span className="font-medium text-amber-800">Warnung - PII gefunden ({testResult.matches.length} Treffer)</span>
                </>
              ) : (
                <>
                  <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="M5 13l4 4L19 7" />
                  </svg>
                  <span className="font-medium text-green-800">Keine PII gefunden</span>
                </>
              )}
            </div>

            {testResult.matches.length > 0 && (
              <div className="space-y-2">
                {testResult.matches.map((match, idx) => (
                  <div key={idx} className="flex items-center gap-3 text-sm bg-white bg-opacity-50 rounded px-3 py-2">
                    {getActionBadge(match.action)}
                    <span className="text-slate-700 font-medium">{match.rule_name}</span>
                    <code className="text-xs bg-slate-100 px-2 py-1 rounded">
                      {match.match.length > 30 ? match.match.substring(0, 30) + '...' : match.match}
                    </code>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </div>

      {/* Rules List Header */}
      <div className="flex flex-wrap justify-between items-center gap-3 mb-4">
        <h3 className="font-semibold text-slate-900">PII-Erkennungsregeln</h3>
        <div className="flex gap-3 items-center">
          <select
            value={categoryFilter}
            onChange={(e) => setCategoryFilter(e.target.value)}
            className="px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          >
            <option value="">Alle Kategorien</option>
            {CATEGORIES.map((c) => (
              <option key={c.value} value={c.value}>{c.label}</option>
            ))}
          </select>
          <button
            onClick={() => setIsNewRule(true)}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center gap-2"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            Neue Regel
          </button>
        </div>
      </div>

      {/* Rules Table */}
      {loading ? (
        <div className="text-center py-12 text-slate-500">Lade Regeln...</div>
      ) : rules.length === 0 ? (
        <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
          <svg className="w-12 h-12 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
          </svg>
          <h3 className="text-lg font-medium text-slate-700 mb-2">Keine Regeln vorhanden</h3>
          <p className="text-sm text-slate-500">
            Fuegen Sie PII-Erkennungsregeln hinzu.
          </p>
        </div>
      ) : (
        <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
          <table className="w-full">
            <thead className="bg-slate-50 border-b border-slate-200">
              <tr>
                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Name</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Kategorie</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Muster</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Aktion</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Status</th>
                <th className="text-right px-4 py-3 text-xs font-medium text-slate-500 uppercase">Aktionen</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {rules.map((rule) => (
                <tr key={rule.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3 text-sm font-medium text-slate-800">{rule.name}</td>
                  <td className="px-4 py-3">
                    <span className="text-xs bg-slate-100 text-slate-700 px-2 py-1 rounded">
                      {CATEGORIES.find((c) => c.value === rule.category)?.label || rule.category}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <code className="text-xs bg-slate-100 px-2 py-1 rounded max-w-xs truncate block">
                      {rule.pattern && rule.pattern.length > 40 ? rule.pattern.substring(0, 40) + '...' : rule.pattern || '-'}
                    </code>
                  </td>
                  <td className="px-4 py-3">{getActionBadge(rule.action)}</td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => toggleRuleStatus(rule)}
                      className={`text-xs px-2 py-1 rounded ${
                        rule.active
                          ? 'bg-green-100 text-green-700'
                          : 'bg-red-100 text-red-700'
                      }`}
                    >
                      {rule.active ? 'Aktiv' : 'Inaktiv'}
                    </button>
                  </td>
                  <td className="px-4 py-3 text-right">
                    <button
                      onClick={() => setEditingRule(rule)}
                      className="text-purple-600 hover:text-purple-700 mr-3"
                    >
                      Bearbeiten
                    </button>
                    <button
                      onClick={() => deleteRule(rule.id)}
                      className="text-red-600 hover:text-red-700"
                    >
                      Loeschen
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* New Rule Modal */}
      {isNewRule && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4">
            <h3 className="text-lg font-semibold text-slate-900 mb-4">Neue PII-Regel</h3>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Name *</label>
                <input
                  type="text"
                  value={newRule.name}
                  onChange={(e) => setNewRule({ ...newRule, name: e.target.value })}
                  placeholder="z.B. Deutsche Telefonnummern"
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Kategorie *</label>
                <select
                  value={newRule.category}
                  onChange={(e) => setNewRule({ ...newRule, category: e.target.value })}
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                >
                  {CATEGORIES.map((c) => (
                    <option key={c.value} value={c.value}>
                      {c.label}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Muster (Regex)</label>
                <textarea
                  value={newRule.pattern}
                  onChange={(e) => setNewRule({ ...newRule, pattern: e.target.value })}
                  placeholder={'Regex-Muster, z.B. (?:\\+49|0)[\\s.-]?\\d{2,4}...'}
                  rows={3}
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Aktion *</label>
                <select
                  value={newRule.action}
                  onChange={(e) => setNewRule({ ...newRule, action: e.target.value })}
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                >
                  {ACTIONS.map((a) => (
                    <option key={a.value} value={a.value}>
                      {a.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-100">
              <button
                onClick={() => setIsNewRule(false)}
                className="px-4 py-2 text-slate-600 hover:text-slate-700"
              >
                Abbrechen
              </button>
              <button
                onClick={createRule}
                disabled={saving || !newRule.name || !newRule.pattern}
                className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
              >
                {saving ? 'Speichere...' : 'Erstellen'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Edit Rule Modal */}
      {editingRule && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl p-6 w-full max-w-lg mx-4">
            <h3 className="text-lg font-semibold text-slate-900 mb-4">PII-Regel bearbeiten</h3>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Name *</label>
                <input
                  type="text"
                  value={editingRule.name}
                  onChange={(e) => setEditingRule({ ...editingRule, name: e.target.value })}
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Kategorie</label>
                <select
                  value={editingRule.category}
                  onChange={(e) => setEditingRule({ ...editingRule, category: e.target.value })}
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                >
                  {CATEGORIES.map((c) => (
                    <option key={c.value} value={c.value}>
                      {c.label}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Muster (Regex)</label>
                <textarea
                  value={editingRule.pattern || ''}
                  onChange={(e) => setEditingRule({ ...editingRule, pattern: e.target.value })}
                  rows={3}
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent font-mono text-sm"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Aktion</label>
                <select
                  value={editingRule.action}
                  onChange={(e) => setEditingRule({ ...editingRule, action: e.target.value })}
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                >
                  {ACTIONS.map((a) => (
                    <option key={a.value} value={a.value}>
                      {a.label}
                    </option>
                  ))}
                </select>
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="edit_active"
                  checked={editingRule.active}
                  onChange={(e) => setEditingRule({ ...editingRule, active: e.target.checked })}
                  className="w-4 h-4 text-purple-600"
                />
                <label htmlFor="edit_active" className="text-sm text-slate-700">
                  Aktiv
                </label>
              </div>
            </div>

            <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-100">
              <button
                onClick={() => setEditingRule(null)}
                className="px-4 py-2 text-slate-600 hover:text-slate-700"
              >
                Abbrechen
              </button>
              <button
                onClick={updateRule}
                disabled={saving}
                className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
              >
                {saving ? 'Speichere...' : 'Speichern'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}