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

'use client'

import { useState, useEffect } from 'react'
import { NewSourceModal, EditSourceModal } from './SourceModals'

interface AllowedSource {
  id: string
  domain: string
  name: string
  description?: string
  license?: string
  legal_basis?: string
  trust_boost: number
  source_type: string
  active: boolean
  metadata?: Record<string, unknown>
  created_at: string
  updated_at?: string
}

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

const LICENSES = [
  { value: 'DL-DE-BY-2.0', label: 'Datenlizenz Deutschland' },
  { value: 'CC-BY', label: 'Creative Commons BY' },
  { value: 'CC-BY-SA', label: 'Creative Commons BY-SA' },
  { value: 'CC0', label: 'Public Domain' },
  { value: '§5 UrhG', label: 'Amtliche Werke (§5 UrhG)' },
]

export function SourcesTab({ apiBase, onUpdate }: SourcesTabProps) {
  const [sources, setSources] = useState<AllowedSource[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Filters
  const [searchTerm, setSearchTerm] = useState('')
  const [licenseFilter, setLicenseFilter] = useState('')
  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all')
  const [sourceTypeFilter, setSourceTypeFilter] = useState('')

  // Edit modal
  const [editingSource, setEditingSource] = useState<AllowedSource | null>(null)
  const [isNewSource, setIsNewSource] = useState(false)
  const [saving, setSaving] = useState(false)

  // New source form
  const [newSource, setNewSource] = useState({
    domain: '',
    name: '',
    license: 'DL-DE-BY-2.0',
    legal_basis: '',
    trust_boost: 0.5,
    active: true,
  })

  useEffect(() => {
    fetchSources()
  }, [licenseFilter, statusFilter, sourceTypeFilter])

  const fetchSources = async () => {
    try {
      setLoading(true)
      const params = new URLSearchParams()
      if (licenseFilter) params.append('license', licenseFilter)
      if (statusFilter !== 'all') params.append('active_only', statusFilter === 'active' ? 'true' : 'false')
      if (sourceTypeFilter) params.append('source_type', sourceTypeFilter)

      const res = await fetch(`${apiBase}/sources?${params}`)
      if (!res.ok) throw new Error('Fehler beim Laden')

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

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

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

      setNewSource({ domain: '', name: '', license: 'DL-DE-BY-2.0', legal_basis: '', trust_boost: 0.5, active: true })
      setIsNewSource(false)
      fetchSources()
      onUpdate?.()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setSaving(false)
    }
  }

  const updateSource = async () => {
    if (!editingSource) return

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

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

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

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

    try {
      const res = await fetch(`${apiBase}/sources/${id}`, { method: 'DELETE' })
      if (!res.ok) throw new Error('Fehler beim Loeschen')
      fetchSources()
      onUpdate?.()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    }
  }

  const toggleSourceStatus = async (source: AllowedSource) => {
    try {
      const res = await fetch(`${apiBase}/sources/${source.id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ active: !source.active }),
      })

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

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

  const filteredSources = sources.filter((source) => {
    if (searchTerm) {
      const term = searchTerm.toLowerCase()
      if (!source.domain.toLowerCase().includes(term) && !source.name.toLowerCase().includes(term)) {
        return false
      }
    }
    return true
  })

  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>
      )}

      {/* Filters & Actions */}
      <div className="flex flex-col md:flex-row gap-4 mb-6">
        <div className="flex-1">
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            placeholder="Domain oder Name suchen..."
            className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          />
        </div>
        <select
          value={licenseFilter}
          onChange={(e) => setLicenseFilter(e.target.value)}
          className="px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        >
          <option value="">Alle Lizenzen</option>
          {LICENSES.map((l) => <option key={l.value} value={l.value}>{l.label}</option>)}
        </select>
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value as 'all' | 'active' | 'inactive')}
          className="px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        >
          <option value="all">Alle Status</option>
          <option value="active">Aktiv</option>
          <option value="inactive">Inaktiv</option>
        </select>
        <select
          value={sourceTypeFilter}
          onChange={(e) => setSourceTypeFilter(e.target.value)}
          className="px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
        >
          <option value="">Alle Typen</option>
          <option value="legal">Rechtlich</option>
          <option value="guidance">Leitlinien</option>
          <option value="template">Vorlagen</option>
          <option value="technical">Technisch</option>
          <option value="other">Sonstige</option>
        </select>
        <button
          onClick={() => setIsNewSource(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 Quelle
        </button>
      </div>

      {/* Sources Table */}
      {loading ? (
        <div className="text-center py-12 text-slate-500">Lade Quellen...</div>
      ) : filteredSources.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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
          </svg>
          <h3 className="text-lg font-medium text-slate-700 mb-2">Keine Quellen gefunden</h3>
          <p className="text-sm text-slate-500">Fuegen Sie neue Quellen zur Whitelist 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">Domain</th>
                <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">Lizenz</th>
                <th className="text-left px-4 py-3 text-xs font-medium text-slate-500 uppercase">Trust</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">
              {filteredSources.map((source) => (
                <tr key={source.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3">
                    <code className="text-sm bg-slate-100 px-2 py-1 rounded">{source.domain}</code>
                  </td>
                  <td className="px-4 py-3 text-sm text-slate-700">{source.name}</td>
                  <td className="px-4 py-3">
                    <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">{source.license}</span>
                  </td>
                  <td className="px-4 py-3 text-sm text-slate-600">{(source.trust_boost * 100).toFixed(0)}%</td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => toggleSourceStatus(source)}
                      className={`text-xs px-2 py-1 rounded ${source.active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}
                    >
                      {source.active ? 'Aktiv' : 'Inaktiv'}
                    </button>
                  </td>
                  <td className="px-4 py-3 text-right">
                    <button onClick={() => setEditingSource(source)} className="text-purple-600 hover:text-purple-700 mr-3">
                      Bearbeiten
                    </button>
                    <button onClick={() => deleteSource(source.id)} className="text-red-600 hover:text-red-700">
                      Loeschen
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* New Source Modal */}
      {isNewSource && (
        <NewSourceModal
          newSource={newSource}
          saving={saving}
          onClose={() => setIsNewSource(false)}
          onCreate={createSource}
          onChange={(update) => setNewSource(prev => ({ ...prev, ...update }))}
        />
      )}

      {/* Edit Source Modal */}
      {editingSource && (
        <EditSourceModal
          source={editingSource}
          saving={saving}
          onClose={() => setEditingSource(null)}
          onSave={updateSource}
          onChange={(update) => setEditingSource(prev => prev ? { ...prev, ...update } : prev)}
        />
      )}
    </div>
  )
}