'use client'

/**
 * Escalation Queue Page
 *
 * DSB Review & Approval Workflow for UCCA Assessments
 * Implements E0-E3 escalation levels with SLA tracking
 *
 * API: /sdk/v1/ucca/escalations
 */

import { useEffect, useState, useCallback } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'

// Types
interface Escalation {
  id: string
  tenant_id: string
  assessment_id: string
  escalation_level: 'E0' | 'E1' | 'E2' | 'E3'
  escalation_reason: string
  assigned_to?: string
  assigned_role?: string
  assigned_at?: string
  status: 'pending' | 'assigned' | 'in_review' | 'approved' | 'rejected' | 'returned'
  reviewer_id?: string
  reviewer_notes?: string
  reviewed_at?: string
  decision?: 'approve' | 'reject' | 'modify' | 'escalate'
  decision_notes?: string
  decision_at?: string
  conditions?: string[]
  created_at: string
  updated_at: string
  due_date?: string
  notification_sent: boolean
  // Joined fields
  assessment_title?: string
  assessment_feasibility?: string
  assessment_risk_score?: number
  assessment_domain?: string
}

interface EscalationHistory {
  id: string
  escalation_id: string
  action: string
  old_status?: string
  new_status?: string
  old_level?: string
  new_level?: string
  actor_id: string
  actor_role?: string
  notes?: string
  created_at: string
}

interface EscalationStats {
  total_pending: number
  total_in_review: number
  total_approved: number
  total_rejected: number
  by_level: Record<string, number>
  overdue_sla: number
  approaching_sla: number
  avg_resolution_hours: number
}

interface DSBPoolMember {
  id: string
  tenant_id: string
  user_id: string
  user_name: string
  user_email: string
  role: string
  is_active: boolean
  max_concurrent_reviews: number
  current_reviews: number
  created_at: string
  updated_at: string
}

// Constants
const LEVEL_CONFIG = {
  E0: { label: 'Auto-Approve', color: 'bg-green-100 text-green-800', description: 'Automatische Freigabe' },
  E1: { label: 'Team-Lead', color: 'bg-blue-100 text-blue-800', description: 'Team-Lead Review erforderlich' },
  E2: { label: 'DSB', color: 'bg-yellow-100 text-yellow-800', description: 'DSB-Konsultation erforderlich' },
  E3: { label: 'DSB + Legal', color: 'bg-red-100 text-red-800', description: 'DSB + Rechtsabteilung erforderlich' },
}

const STATUS_CONFIG = {
  pending: { label: 'Ausstehend', color: 'bg-gray-100 text-gray-800' },
  assigned: { label: 'Zugewiesen', color: 'bg-blue-100 text-blue-800' },
  in_review: { label: 'In Prüfung', color: 'bg-yellow-100 text-yellow-800' },
  approved: { label: 'Genehmigt', color: 'bg-green-100 text-green-800' },
  rejected: { label: 'Abgelehnt', color: 'bg-red-100 text-red-800' },
  returned: { label: 'Zurückgegeben', color: 'bg-orange-100 text-orange-800' },
}

export default function EscalationsPage() {
  const [escalations, setEscalations] = useState<Escalation[]>([])
  const [stats, setStats] = useState<EscalationStats | null>(null)
  const [dsbPool, setDsbPool] = useState<DSBPoolMember[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Filters
  const [statusFilter, setStatusFilter] = useState<string>('pending')
  const [levelFilter, setLevelFilter] = useState<string>('')
  const [myReviewsOnly, setMyReviewsOnly] = useState(false)

  // Selected escalation for detail view
  const [selectedEscalation, setSelectedEscalation] = useState<Escalation | null>(null)
  const [escalationHistory, setEscalationHistory] = useState<EscalationHistory[]>([])

  // Decision modal
  const [showDecisionModal, setShowDecisionModal] = useState(false)
  const [decisionForm, setDecisionForm] = useState({
    decision: 'approve' as 'approve' | 'reject' | 'modify' | 'escalate',
    decision_notes: '',
    conditions: [] as string[],
  })
  const [newCondition, setNewCondition] = useState('')

  // DSB Pool modal
  const [showDSBPoolModal, setShowDSBPoolModal] = useState(false)
  const [newMember, setNewMember] = useState({
    user_id: '',
    user_name: '',
    user_email: '',
    role: 'dsb',
    max_concurrent_reviews: 10,
  })

  // Load data
  useEffect(() => {
    loadEscalations()
    loadStats()
    loadDSBPool()
  }, [statusFilter, levelFilter, myReviewsOnly])

  async function loadEscalations() {
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams()
      if (statusFilter && statusFilter !== 'all') params.append('status', statusFilter)
      if (levelFilter) params.append('level', levelFilter)
      if (myReviewsOnly) params.append('my_reviews', 'true')

      const res = await fetch(`/sdk/v1/ucca/escalations?${params}`, {
        headers: {
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        }
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()
      setEscalations(data.escalations || [])
    } catch (err) {
      console.error('Failed to load escalations:', err)
      setError('Fehler beim Laden der Eskalationen')
    } finally {
      setLoading(false)
    }
  }

  async function loadStats() {
    try {
      const res = await fetch('/sdk/v1/ucca/escalations/stats', {
        headers: {
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        }
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()
      setStats(data)
    } catch (err) {
      console.error('Failed to load stats:', err)
    }
  }

  async function loadDSBPool() {
    try {
      const res = await fetch('/sdk/v1/ucca/dsb-pool', {
        headers: {
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        }
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()
      setDsbPool(data.members || [])
    } catch (err) {
      console.error('Failed to load DSB pool:', err)
    }
  }

  async function loadEscalationDetail(id: string) {
    try {
      const res = await fetch(`/sdk/v1/ucca/escalations/${id}`, {
        headers: {
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        }
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()
      setSelectedEscalation(data.escalation)
      setEscalationHistory(data.history || [])
    } catch (err) {
      console.error('Failed to load escalation detail:', err)
    }
  }

  async function startReview(id: string) {
    try {
      const res = await fetch(`/sdk/v1/ucca/escalations/${id}/review`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        }
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      loadEscalations()
      if (selectedEscalation?.id === id) {
        loadEscalationDetail(id)
      }
    } catch (err) {
      console.error('Failed to start review:', err)
      alert('Fehler beim Starten der Prüfung')
    }
  }

  async function submitDecision() {
    if (!selectedEscalation) return
    try {
      const res = await fetch(`/sdk/v1/ucca/escalations/${selectedEscalation.id}/decide`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        },
        body: JSON.stringify(decisionForm)
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      setShowDecisionModal(false)
      setDecisionForm({ decision: 'approve', decision_notes: '', conditions: [] })
      loadEscalations()
      loadStats()
      setSelectedEscalation(null)
    } catch (err) {
      console.error('Failed to submit decision:', err)
      alert('Fehler beim Speichern der Entscheidung')
    }
  }

  async function assignEscalation(escalationId: string, userId: string) {
    try {
      const res = await fetch(`/sdk/v1/ucca/escalations/${escalationId}/assign`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        },
        body: JSON.stringify({ assigned_to: userId })
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      loadEscalations()
      if (selectedEscalation?.id === escalationId) {
        loadEscalationDetail(escalationId)
      }
    } catch (err) {
      console.error('Failed to assign escalation:', err)
      alert('Fehler bei der Zuweisung')
    }
  }

  async function addDSBPoolMember() {
    try {
      const res = await fetch('/sdk/v1/ucca/dsb-pool', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Tenant-ID': localStorage.getItem('bp_tenant_id') || '',
          'X-User-ID': localStorage.getItem('bp_user_id') || '',
        },
        body: JSON.stringify(newMember)
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      setShowDSBPoolModal(false)
      setNewMember({ user_id: '', user_name: '', user_email: '', role: 'dsb', max_concurrent_reviews: 10 })
      loadDSBPool()
    } catch (err) {
      console.error('Failed to add DSB pool member:', err)
      alert('Fehler beim Hinzufügen')
    }
  }

  function addCondition() {
    if (newCondition.trim()) {
      setDecisionForm(prev => ({
        ...prev,
        conditions: [...prev.conditions, newCondition.trim()]
      }))
      setNewCondition('')
    }
  }

  function removeCondition(index: number) {
    setDecisionForm(prev => ({
      ...prev,
      conditions: prev.conditions.filter((_, i) => i !== index)
    }))
  }

  function formatDate(dateStr: string) {
    return new Date(dateStr).toLocaleDateString('de-DE', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    })
  }

  function isOverdue(dueDate?: string) {
    if (!dueDate) return false
    return new Date(dueDate) < new Date()
  }

  function getTimeRemaining(dueDate?: string) {
    if (!dueDate) return null
    const now = new Date()
    const due = new Date(dueDate)
    const diff = due.getTime() - now.getTime()
    if (diff < 0) return 'Überfällig'
    const hours = Math.floor(diff / (1000 * 60 * 60))
    if (hours < 24) return `${hours}h verbleibend`
    const days = Math.floor(hours / 24)
    return `${days}d verbleibend`
  }

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Eskalations-Queue</h1>
          <p className="text-gray-600 mt-1">DSB Review & Freigabe-Workflow für UCCA Assessments</p>
        </div>
        <button
          onClick={() => setShowDSBPoolModal(true)}
          className="px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors"
        >
          DSB-Pool verwalten
        </button>
      </div>

      <PagePurpose
        title="Eskalations-Queue"
        purpose="Verwaltung von Eskalationen aus dem Advisory Board. DSB und Team-Leads prüfen risikoreiche Use-Cases (E1-E3) und erteilen Freigaben oder Ablehnungen mit Auflagen."
        audience={['DSB', 'Team-Leads', 'Legal']}
        gdprArticles={['Art. 5', 'Art. 22', 'Art. 35', 'Art. 36']}
      />

      {/* Stats Cards */}
      {stats && (
        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
          <div className="bg-white rounded-lg border p-4">
            <div className="text-2xl font-bold text-gray-900">{stats.total_pending}</div>
            <div className="text-sm text-gray-600">Ausstehend</div>
          </div>
          <div className="bg-white rounded-lg border p-4">
            <div className="text-2xl font-bold text-yellow-600">{stats.total_in_review}</div>
            <div className="text-sm text-gray-600">In Prüfung</div>
          </div>
          <div className="bg-white rounded-lg border p-4">
            <div className="text-2xl font-bold text-green-600">{stats.total_approved}</div>
            <div className="text-sm text-gray-600">Genehmigt</div>
          </div>
          <div className="bg-white rounded-lg border p-4">
            <div className="text-2xl font-bold text-red-600">{stats.total_rejected}</div>
            <div className="text-sm text-gray-600">Abgelehnt</div>
          </div>
          <div className="bg-white rounded-lg border p-4">
            <div className="text-2xl font-bold text-red-600">{stats.overdue_sla}</div>
            <div className="text-sm text-gray-600">SLA überschritten</div>
          </div>
          <div className="bg-white rounded-lg border p-4">
            <div className="text-2xl font-bold text-orange-600">{stats.approaching_sla}</div>
            <div className="text-sm text-gray-600">SLA gefährdet</div>
          </div>
        </div>
      )}

      {/* Level Distribution */}
      {stats && stats.by_level && (
        <div className="bg-white rounded-lg border p-4">
          <h3 className="font-medium text-gray-900 mb-3">Verteilung nach Eskalationsstufe</h3>
          <div className="flex gap-4">
            {Object.entries(LEVEL_CONFIG).map(([level, config]) => (
              <div key={level} className="flex items-center gap-2">
                <span className={`px-2 py-1 rounded text-xs font-medium ${config.color}`}>
                  {level}
                </span>
                <span className="text-gray-600">{stats.by_level[level] || 0}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Filters */}
      <div className="bg-white rounded-lg border p-4">
        <div className="flex flex-wrap gap-4 items-center">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
            <select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value)}
              className="border rounded-lg px-3 py-2 text-sm"
            >
              <option value="all">Alle</option>
              <option value="pending">Ausstehend</option>
              <option value="assigned">Zugewiesen</option>
              <option value="in_review">In Prüfung</option>
              <option value="approved">Genehmigt</option>
              <option value="rejected">Abgelehnt</option>
              <option value="returned">Zurückgegeben</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Level</label>
            <select
              value={levelFilter}
              onChange={(e) => setLevelFilter(e.target.value)}
              className="border rounded-lg px-3 py-2 text-sm"
            >
              <option value="">Alle</option>
              <option value="E1">E1 - Team-Lead</option>
              <option value="E2">E2 - DSB</option>
              <option value="E3">E3 - DSB + Legal</option>
            </select>
          </div>
          <div className="flex items-center gap-2 pt-6">
            <input
              type="checkbox"
              id="myReviews"
              checked={myReviewsOnly}
              onChange={(e) => setMyReviewsOnly(e.target.checked)}
              className="rounded border-gray-300"
            />
            <label htmlFor="myReviews" className="text-sm text-gray-700">Nur meine Zuweisungen</label>
          </div>
          <div className="ml-auto pt-6">
            <button
              onClick={loadEscalations}
              className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
            >
              Aktualisieren
            </button>
          </div>
        </div>
      </div>

      {/* Error */}
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
          {error}
        </div>
      )}

      {/* Main Content */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Escalation List */}
        <div className="lg:col-span-2 space-y-4">
          {loading ? (
            <div className="bg-white rounded-lg border p-8 text-center text-gray-500">
              Laden...
            </div>
          ) : escalations.length === 0 ? (
            <div className="bg-white rounded-lg border p-8 text-center text-gray-500">
              Keine Eskalationen gefunden
            </div>
          ) : (
            escalations.map((esc) => (
              <div
                key={esc.id}
                onClick={() => loadEscalationDetail(esc.id)}
                className={`bg-white rounded-lg border p-4 cursor-pointer hover:border-violet-300 transition-colors ${
                  selectedEscalation?.id === esc.id ? 'border-violet-500 ring-2 ring-violet-200' : ''
                } ${isOverdue(esc.due_date) && esc.status !== 'approved' && esc.status !== 'rejected' ? 'border-red-300 bg-red-50' : ''}`}
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-2">
                      <span className={`px-2 py-1 rounded text-xs font-medium ${LEVEL_CONFIG[esc.escalation_level].color}`}>
                        {esc.escalation_level}
                      </span>
                      <span className={`px-2 py-1 rounded text-xs font-medium ${STATUS_CONFIG[esc.status].color}`}>
                        {STATUS_CONFIG[esc.status].label}
                      </span>
                      {esc.due_date && (
                        <span className={`text-xs ${isOverdue(esc.due_date) ? 'text-red-600 font-medium' : 'text-gray-500'}`}>
                          {getTimeRemaining(esc.due_date)}
                        </span>
                      )}
                    </div>
                    <h3 className="font-medium text-gray-900">
                      {esc.assessment_title || `Assessment ${esc.assessment_id.slice(0, 8)}`}
                    </h3>
                    <p className="text-sm text-gray-600 mt-1 line-clamp-2">{esc.escalation_reason}</p>
                    <div className="flex items-center gap-4 mt-2 text-xs text-gray-500">
                      <span>Erstellt: {formatDate(esc.created_at)}</span>
                      {esc.assessment_risk_score !== undefined && (
                        <span>Risk: {esc.assessment_risk_score}/100</span>
                      )}
                      {esc.assessment_domain && (
                        <span>Domain: {esc.assessment_domain}</span>
                      )}
                    </div>
                  </div>
                  {esc.status === 'pending' && (
                    <button
                      onClick={(e) => {
                        e.stopPropagation()
                        startReview(esc.id)
                      }}
                      className="px-3 py-1 text-sm bg-violet-100 text-violet-700 rounded hover:bg-violet-200 transition-colors"
                    >
                      Review starten
                    </button>
                  )}
                </div>
              </div>
            ))
          )}
        </div>

        {/* Detail Panel */}
        <div className="lg:col-span-1">
          {selectedEscalation ? (
            <div className="bg-white rounded-lg border p-4 sticky top-6 space-y-4">
              <h3 className="font-semibold text-gray-900">Detail</h3>

              {/* Status & Level */}
              <div className="flex gap-2">
                <span className={`px-2 py-1 rounded text-xs font-medium ${LEVEL_CONFIG[selectedEscalation.escalation_level].color}`}>
                  {selectedEscalation.escalation_level} - {LEVEL_CONFIG[selectedEscalation.escalation_level].label}
                </span>
                <span className={`px-2 py-1 rounded text-xs font-medium ${STATUS_CONFIG[selectedEscalation.status].color}`}>
                  {STATUS_CONFIG[selectedEscalation.status].label}
                </span>
              </div>

              {/* Reason */}
              <div>
                <div className="text-sm font-medium text-gray-700">Grund</div>
                <div className="text-sm text-gray-600 mt-1">{selectedEscalation.escalation_reason}</div>
              </div>

              {/* SLA */}
              {selectedEscalation.due_date && (
                <div>
                  <div className="text-sm font-medium text-gray-700">SLA Deadline</div>
                  <div className={`text-sm mt-1 ${isOverdue(selectedEscalation.due_date) ? 'text-red-600 font-medium' : 'text-gray-600'}`}>
                    {formatDate(selectedEscalation.due_date)}
                    {isOverdue(selectedEscalation.due_date) && ' (Überfällig!)'}
                  </div>
                </div>
              )}

              {/* Assignment */}
              <div>
                <div className="text-sm font-medium text-gray-700">Zugewiesen an</div>
                {selectedEscalation.assigned_to ? (
                  <div className="text-sm text-gray-600 mt-1">
                    {selectedEscalation.assigned_role || 'Unbekannt'}
                  </div>
                ) : (
                  <div className="mt-2">
                    <select
                      onChange={(e) => {
                        if (e.target.value) {
                          assignEscalation(selectedEscalation.id, e.target.value)
                        }
                      }}
                      className="w-full border rounded px-2 py-1 text-sm"
                      defaultValue=""
                    >
                      <option value="">Reviewer auswählen...</option>
                      {dsbPool.filter(m => m.is_active).map(member => (
                        <option key={member.user_id} value={member.user_id}>
                          {member.user_name} ({member.role}) - {member.current_reviews}/{member.max_concurrent_reviews}
                        </option>
                      ))}
                    </select>
                  </div>
                )}
              </div>

              {/* Decision */}
              {selectedEscalation.decision && (
                <div>
                  <div className="text-sm font-medium text-gray-700">Entscheidung</div>
                  <div className="text-sm text-gray-600 mt-1">
                    {selectedEscalation.decision === 'approve' && '✅ Genehmigt'}
                    {selectedEscalation.decision === 'reject' && '❌ Abgelehnt'}
                    {selectedEscalation.decision === 'modify' && '🔄 Änderungen erforderlich'}
                    {selectedEscalation.decision === 'escalate' && '⬆️ Eskaliert'}
                  </div>
                  {selectedEscalation.decision_notes && (
                    <div className="text-sm text-gray-500 mt-1">{selectedEscalation.decision_notes}</div>
                  )}
                  {selectedEscalation.conditions && selectedEscalation.conditions.length > 0 && (
                    <div className="mt-2">
                      <div className="text-xs font-medium text-gray-700">Auflagen:</div>
                      <ul className="list-disc list-inside text-xs text-gray-600">
                        {selectedEscalation.conditions.map((c, i) => (
                          <li key={i}>{c}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>
              )}

              {/* Actions */}
              {(selectedEscalation.status === 'assigned' || selectedEscalation.status === 'in_review') && (
                <div className="pt-4 border-t">
                  <button
                    onClick={() => setShowDecisionModal(true)}
                    className="w-full px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 transition-colors"
                  >
                    Entscheidung treffen
                  </button>
                </div>
              )}

              {/* History */}
              {escalationHistory.length > 0 && (
                <div className="pt-4 border-t">
                  <div className="text-sm font-medium text-gray-700 mb-2">Verlauf</div>
                  <div className="space-y-2 max-h-48 overflow-y-auto">
                    {escalationHistory.map((h) => (
                      <div key={h.id} className="text-xs border-l-2 border-gray-200 pl-2">
                        <div className="text-gray-900">{h.action}</div>
                        {h.notes && <div className="text-gray-500">{h.notes}</div>}
                        <div className="text-gray-400">{formatDate(h.created_at)}</div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {/* Link to Assessment */}
              <div className="pt-4 border-t">
                <a
                  href={`/dsgvo/advisory-board?assessment=${selectedEscalation.assessment_id}`}
                  className="text-sm text-violet-600 hover:text-violet-800"
                >
                  → Assessment anzeigen
                </a>
              </div>
            </div>
          ) : (
            <div className="bg-gray-50 rounded-lg border border-dashed p-8 text-center text-gray-500">
              Wählen Sie eine Eskalation aus, um Details zu sehen
            </div>
          )}
        </div>
      </div>

      {/* Decision Modal */}
      {showDecisionModal && selectedEscalation && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-lg mx-4">
            <h3 className="text-lg font-semibold mb-4">Entscheidung für {selectedEscalation.escalation_level}</h3>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Entscheidung</label>
                <select
                  value={decisionForm.decision}
                  onChange={(e) => setDecisionForm(prev => ({ ...prev, decision: e.target.value as any }))}
                  className="w-full border rounded-lg px-3 py-2"
                >
                  <option value="approve">✅ Genehmigen</option>
                  <option value="reject">❌ Ablehnen</option>
                  <option value="modify">🔄 Änderungen erforderlich</option>
                  <option value="escalate">⬆️ Weiter eskalieren</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Begründung</label>
                <textarea
                  value={decisionForm.decision_notes}
                  onChange={(e) => setDecisionForm(prev => ({ ...prev, decision_notes: e.target.value }))}
                  rows={3}
                  className="w-full border rounded-lg px-3 py-2"
                  placeholder="Begründung für die Entscheidung..."
                />
              </div>

              {(decisionForm.decision === 'approve' || decisionForm.decision === 'modify') && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Auflagen (optional)</label>
                  <div className="flex gap-2 mb-2">
                    <input
                      type="text"
                      value={newCondition}
                      onChange={(e) => setNewCondition(e.target.value)}
                      placeholder="Neue Auflage eingeben..."
                      className="flex-1 border rounded-lg px-3 py-2 text-sm"
                      onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addCondition())}
                    />
                    <button
                      onClick={addCondition}
                      className="px-3 py-2 bg-gray-100 rounded-lg hover:bg-gray-200"
                    >
                      +
                    </button>
                  </div>
                  {decisionForm.conditions.length > 0 && (
                    <ul className="space-y-1">
                      {decisionForm.conditions.map((c, i) => (
                        <li key={i} className="flex items-center justify-between bg-gray-50 px-2 py-1 rounded text-sm">
                          <span>{c}</span>
                          <button
                            onClick={() => removeCondition(i)}
                            className="text-red-500 hover:text-red-700"
                          >
                            ×
                          </button>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              )}
            </div>

            <div className="flex justify-end gap-2 mt-6">
              <button
                onClick={() => setShowDecisionModal(false)}
                className="px-4 py-2 text-gray-600 hover:text-gray-800"
              >
                Abbrechen
              </button>
              <button
                onClick={submitDecision}
                className="px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700"
              >
                Entscheidung speichern
              </button>
            </div>
          </div>
        </div>
      )}

      {/* DSB Pool Modal */}
      {showDSBPoolModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg p-6 w-full max-w-2xl mx-4">
            <h3 className="text-lg font-semibold mb-4">DSB-Pool verwalten</h3>

            {/* Current Members */}
            <div className="mb-6">
              <h4 className="text-sm font-medium text-gray-700 mb-2">Aktuelle Mitglieder</h4>
              {dsbPool.length === 0 ? (
                <p className="text-sm text-gray-500">Keine Mitglieder im Pool</p>
              ) : (
                <div className="border rounded-lg divide-y">
                  {dsbPool.map(member => (
                    <div key={member.id} className="p-3 flex items-center justify-between">
                      <div>
                        <div className="font-medium">{member.user_name}</div>
                        <div className="text-sm text-gray-500">{member.user_email}</div>
                      </div>
                      <div className="flex items-center gap-4">
                        <span className={`px-2 py-1 rounded text-xs ${
                          member.role === 'dsb' ? 'bg-violet-100 text-violet-800' :
                          member.role === 'team_lead' ? 'bg-blue-100 text-blue-800' :
                          'bg-gray-100 text-gray-800'
                        }`}>
                          {member.role}
                        </span>
                        <span className="text-sm text-gray-600">
                          {member.current_reviews}/{member.max_concurrent_reviews} Reviews
                        </span>
                        <span className={`w-2 h-2 rounded-full ${member.is_active ? 'bg-green-500' : 'bg-gray-300'}`} />
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Add New Member */}
            <div className="border-t pt-4">
              <h4 className="text-sm font-medium text-gray-700 mb-2">Neues Mitglied hinzufügen</h4>
              <div className="grid grid-cols-2 gap-4">
                <input
                  type="text"
                  value={newMember.user_name}
                  onChange={(e) => setNewMember(prev => ({ ...prev, user_name: e.target.value }))}
                  placeholder="Name"
                  className="border rounded-lg px-3 py-2"
                />
                <input
                  type="email"
                  value={newMember.user_email}
                  onChange={(e) => setNewMember(prev => ({ ...prev, user_email: e.target.value }))}
                  placeholder="E-Mail"
                  className="border rounded-lg px-3 py-2"
                />
                <select
                  value={newMember.role}
                  onChange={(e) => setNewMember(prev => ({ ...prev, role: e.target.value }))}
                  className="border rounded-lg px-3 py-2"
                >
                  <option value="dsb">DSB</option>
                  <option value="deputy_dsb">Stellv. DSB</option>
                  <option value="team_lead">Team-Lead</option>
                  <option value="legal">Legal</option>
                </select>
                <input
                  type="number"
                  value={newMember.max_concurrent_reviews}
                  onChange={(e) => setNewMember(prev => ({ ...prev, max_concurrent_reviews: parseInt(e.target.value) || 10 }))}
                  placeholder="Max Reviews"
                  className="border rounded-lg px-3 py-2"
                />
              </div>
              <button
                onClick={addDSBPoolMember}
                disabled={!newMember.user_name || !newMember.user_email}
                className="mt-4 px-4 py-2 bg-violet-600 text-white rounded-lg hover:bg-violet-700 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                Hinzufügen
              </button>
            </div>

            <div className="flex justify-end mt-6">
              <button
                onClick={() => setShowDSBPoolModal(false)}
                className="px-4 py-2 text-gray-600 hover:text-gray-800"
              >
                Schließen
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}