'use client'

import React, { useState, useEffect, useMemo } from 'react'
import Link from 'next/link'
import { useSDK } from '@/lib/sdk'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
import {
  Incident,
  IncidentSeverity,
  IncidentStatus,
  IncidentCategory,
  IncidentStatistics,
  INCIDENT_SEVERITY_INFO,
  INCIDENT_STATUS_INFO,
  INCIDENT_CATEGORY_INFO,
  getHoursUntil72hDeadline,
  is72hDeadlineExpired
} from '@/lib/sdk/incidents/types'
import { fetchSDKIncidentList, createMockIncidents, createMockStatistics } from '@/lib/sdk/incidents/api'

// =============================================================================
// TYPES
// =============================================================================

type TabId = 'overview' | 'active' | 'notification' | 'closed' | 'settings'

interface Tab {
  id: TabId
  label: string
  count?: number
  countColor?: string
}

// =============================================================================
// COMPONENTS
// =============================================================================

function TabNavigation({
  tabs,
  activeTab,
  onTabChange
}: {
  tabs: Tab[]
  activeTab: TabId
  onTabChange: (tab: TabId) => void
}) {
  return (
    <div className="border-b border-gray-200">
      <nav className="flex gap-1 -mb-px" aria-label="Tabs">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={`
              px-4 py-3 text-sm font-medium border-b-2 transition-colors
              ${activeTab === tab.id
                ? 'border-purple-600 text-purple-600'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }
            `}
          >
            <span className="flex items-center gap-2">
              {tab.label}
              {tab.count !== undefined && tab.count > 0 && (
                <span className={`
                  px-2 py-0.5 text-xs rounded-full
                  ${tab.countColor || 'bg-gray-100 text-gray-600'}
                `}>
                  {tab.count}
                </span>
              )}
            </span>
          </button>
        ))}
      </nav>
    </div>
  )
}

function StatCard({
  label,
  value,
  color = 'gray',
  icon,
  trend
}: {
  label: string
  value: number | string
  color?: 'gray' | 'blue' | 'yellow' | 'red' | 'green' | 'purple' | 'orange'
  icon?: React.ReactNode
  trend?: { value: number; label: string }
}) {
  const colorClasses: Record<string, string> = {
    gray: 'border-gray-200 text-gray-900',
    blue: 'border-blue-200 text-blue-600',
    yellow: 'border-yellow-200 text-yellow-600',
    red: 'border-red-200 text-red-600',
    green: 'border-green-200 text-green-600',
    purple: 'border-purple-200 text-purple-600',
    orange: 'border-orange-200 text-orange-600'
  }

  return (
    <div className={`bg-white rounded-xl border ${colorClasses[color]} p-6`}>
      <div className="flex items-start justify-between">
        <div>
          <div className={`text-sm ${color === 'gray' ? 'text-gray-500' : ''}`}>
            {label}
          </div>
          <div className={`text-3xl font-bold mt-1 ${colorClasses[color].split(' ')[1]}`}>
            {value}
          </div>
          {trend && (
            <div className={`text-xs mt-1 ${trend.value >= 0 ? 'text-green-600' : 'text-red-600'}`}>
              {trend.value >= 0 ? '+' : ''}{trend.value} {trend.label}
            </div>
          )}
        </div>
        {icon && (
          <div className="w-10 h-10 rounded-lg flex items-center justify-center bg-gray-50">
            {icon}
          </div>
        )}
      </div>
    </div>
  )
}

function FilterBar({
  selectedSeverity,
  selectedStatus,
  selectedCategory,
  onSeverityChange,
  onStatusChange,
  onCategoryChange,
  onClear
}: {
  selectedSeverity: IncidentSeverity | 'all'
  selectedStatus: IncidentStatus | 'all'
  selectedCategory: IncidentCategory | 'all'
  onSeverityChange: (severity: IncidentSeverity | 'all') => void
  onStatusChange: (status: IncidentStatus | 'all') => void
  onCategoryChange: (category: IncidentCategory | 'all') => void
  onClear: () => void
}) {
  const hasFilters = selectedSeverity !== 'all' || selectedStatus !== 'all' || selectedCategory !== 'all'

  return (
    <div className="flex items-center gap-4 flex-wrap">
      <span className="text-sm text-gray-500">Filter:</span>

      {/* Severity Filter */}
      <select
        value={selectedSeverity}
        onChange={(e) => onSeverityChange(e.target.value as IncidentSeverity | 'all')}
        className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
      >
        <option value="all">Alle Schweregrade</option>
        {Object.entries(INCIDENT_SEVERITY_INFO).map(([severity, info]) => (
          <option key={severity} value={severity}>{info.label}</option>
        ))}
      </select>

      {/* Status Filter */}
      <select
        value={selectedStatus}
        onChange={(e) => onStatusChange(e.target.value as IncidentStatus | 'all')}
        className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
      >
        <option value="all">Alle Status</option>
        {Object.entries(INCIDENT_STATUS_INFO).map(([status, info]) => (
          <option key={status} value={status}>{info.label}</option>
        ))}
      </select>

      {/* Category Filter */}
      <select
        value={selectedCategory}
        onChange={(e) => onCategoryChange(e.target.value as IncidentCategory | 'all')}
        className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
      >
        <option value="all">Alle Kategorien</option>
        {Object.entries(INCIDENT_CATEGORY_INFO).map(([cat, info]) => (
          <option key={cat} value={cat}>{info.label}</option>
        ))}
      </select>

      {/* Clear Filters */}
      {hasFilters && (
        <button
          onClick={onClear}
          className="px-3 py-1.5 text-sm text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
        >
          Filter zuruecksetzen
        </button>
      )}
    </div>
  )
}

/**
 * 72h-Countdown-Anzeige mit visueller Farbkodierung
 * Gruen > 48h, Gelb > 24h, Orange > 12h, Rot < 12h oder abgelaufen
 */
function CountdownTimer({ incident }: { incident: Incident }) {
  const hoursRemaining = getHoursUntil72hDeadline(incident.detectedAt)
  const expired = is72hDeadlineExpired(incident.detectedAt)

  // Nicht relevant fuer abgeschlossene Vorfaelle
  if (incident.status === 'closed') return null

  // Bereits gemeldet
  if (incident.authorityNotification && (incident.authorityNotification.status === 'submitted' || incident.authorityNotification.status === 'acknowledged')) {
    return (
      <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">
        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
        </svg>
        Gemeldet
      </span>
    )
  }

  // Keine Meldepflicht festgestellt
  if (incident.riskAssessment && !incident.riskAssessment.notificationRequired) {
    return (
      <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full">
        Keine Meldepflicht
      </span>
    )
  }

  // Abgelaufen
  if (expired) {
    const overdueHours = Math.abs(hoursRemaining)
    return (
      <span className="inline-flex items-center gap-1 px-2 py-1 text-xs font-bold bg-red-100 text-red-700 rounded-full animate-pulse">
        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        {overdueHours.toFixed(0)}h ueberfaellig
      </span>
    )
  }

  // Farbkodierung: gruen > 48h, gelb > 24h, orange > 12h, rot < 12h
  let colorClass: string
  if (hoursRemaining > 48) {
    colorClass = 'bg-green-100 text-green-700'
  } else if (hoursRemaining > 24) {
    colorClass = 'bg-yellow-100 text-yellow-700'
  } else if (hoursRemaining > 12) {
    colorClass = 'bg-orange-100 text-orange-700'
  } else {
    colorClass = 'bg-red-100 text-red-700'
  }

  return (
    <span className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-bold rounded-full ${colorClass}`}>
      <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      {hoursRemaining.toFixed(0)}h verbleibend
    </span>
  )
}

function Badge({ bgColor, color, label }: { bgColor: string; color: string; label: string }) {
  return <span className={`px-2 py-1 text-xs rounded-full ${bgColor} ${color}`}>{label}</span>
}

function IncidentCard({ incident }: { incident: Incident }) {
  const severityInfo = INCIDENT_SEVERITY_INFO[incident.severity]
  const statusInfo = INCIDENT_STATUS_INFO[incident.status]
  const categoryInfo = INCIDENT_CATEGORY_INFO[incident.category]

  const expired = is72hDeadlineExpired(incident.detectedAt)
  const isNotified = incident.authorityNotification && (incident.authorityNotification.status === 'submitted' || incident.authorityNotification.status === 'acknowledged')

  const severityBorderColors: Record<IncidentSeverity, string> = {
    critical: 'border-red-300 hover:border-red-400',
    high: 'border-orange-300 hover:border-orange-400',
    medium: 'border-yellow-300 hover:border-yellow-400',
    low: 'border-green-200 hover:border-green-300'
  }

  const borderColor = incident.status === 'closed'
    ? 'border-green-200 hover:border-green-300'
    : expired && !isNotified
      ? 'border-red-400 hover:border-red-500'
      : severityBorderColors[incident.severity]

  const measuresCount = incident.measures.length
  const completedMeasures = incident.measures.filter(m => m.status === 'completed').length

  return (
    <Link href={`/sdk/incidents/${incident.id}`}>
      <div className={`
        bg-white rounded-xl border-2 p-6 hover:shadow-md transition-all cursor-pointer
        ${borderColor}
      `}>
        <div className="flex items-start justify-between">
          <div className="flex-1 min-w-0">
            {/* Header Badges */}
            <div className="flex items-center gap-2 mb-2 flex-wrap">
              <span className="text-xs text-gray-500 font-mono">
                {incident.referenceNumber}
              </span>
              <Badge bgColor={severityInfo.bgColor} color={severityInfo.color} label={severityInfo.label} />
              <Badge bgColor={categoryInfo.bgColor} color={categoryInfo.color} label={`${categoryInfo.icon} ${categoryInfo.label}`} />
              <Badge bgColor={statusInfo.bgColor} color={statusInfo.color} label={statusInfo.label} />
            </div>

            {/* Title */}
            <h3 className="text-lg font-semibold text-gray-900 truncate">
              {incident.title}
            </h3>
            <p className="text-sm text-gray-500 mt-1 line-clamp-2">
              {incident.description}
            </p>

            {/* 72h Countdown - prominent */}
            <div className="mt-3">
              <CountdownTimer incident={incident} />
            </div>
          </div>

          {/* Right Side - Key Numbers */}
          <div className="text-right ml-4 flex-shrink-0">
            <div className="text-sm text-gray-500">
              Betroffene
            </div>
            <div className="text-xl font-bold text-gray-900">
              {incident.estimatedAffectedPersons.toLocaleString('de-DE')}
            </div>
            <div className="text-xs text-gray-400 mt-1">
              {new Date(incident.detectedAt).toLocaleDateString('de-DE')}
            </div>
          </div>
        </div>

        {/* Footer */}
        <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
          <div className="flex items-center gap-4 text-sm text-gray-500">
            <span className="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="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 2m-6 9l2 2 4-4" />
              </svg>
              {completedMeasures}/{measuresCount} Massnahmen
            </span>
            <span className="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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              {incident.timeline.length} Eintraege
            </span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-sm text-gray-500">
              {incident.assignedTo
                ? `Zugewiesen: ${incident.assignedTo}`
                : 'Nicht zugewiesen'
              }
            </span>
            {incident.status !== 'closed' ? (
              <span className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
                Bearbeiten
              </span>
            ) : (
              <span className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
                Details
              </span>
            )}
          </div>
        </div>
      </div>
    </Link>
  )
}

// =============================================================================
// MAIN PAGE
// =============================================================================

export default function IncidentsPage() {
  const { state } = useSDK()
  const [activeTab, setActiveTab] = useState<TabId>('overview')
  const [incidents, setIncidents] = useState<Incident[]>([])
  const [statistics, setStatistics] = useState<IncidentStatistics | null>(null)
  const [isLoading, setIsLoading] = useState(true)

  // Filters
  const [selectedSeverity, setSelectedSeverity] = useState<IncidentSeverity | 'all'>('all')
  const [selectedStatus, setSelectedStatus] = useState<IncidentStatus | 'all'>('all')
  const [selectedCategory, setSelectedCategory] = useState<IncidentCategory | 'all'>('all')

  // Load data
  useEffect(() => {
    const loadData = async () => {
      setIsLoading(true)
      try {
        const { incidents: loadedIncidents, statistics: loadedStats } = await fetchSDKIncidentList()
        setIncidents(loadedIncidents)
        setStatistics(loadedStats)
      } catch (error) {
        console.error('Fehler beim Laden der Incident-Daten:', error)
        // Fallback auf Mock-Daten
        setIncidents(createMockIncidents())
        setStatistics(createMockStatistics())
      } finally {
        setIsLoading(false)
      }
    }
    loadData()
  }, [])

  // Calculate tab counts
  const tabCounts = useMemo(() => {
    return {
      active: incidents.filter(i =>
        i.status === 'detected' || i.status === 'assessment' ||
        i.status === 'containment' || i.status === 'remediation'
      ).length,
      notification: incidents.filter(i =>
        i.status === 'notification_required' || i.status === 'notification_sent' ||
        (i.authorityNotification !== null && i.authorityNotification.status === 'pending')
      ).length,
      closed: incidents.filter(i => i.status === 'closed').length,
      deadlineExpired: incidents.filter(i => {
        if (i.status === 'closed') return false
        if (i.authorityNotification && (i.authorityNotification.status === 'submitted' || i.authorityNotification.status === 'acknowledged')) return false
        if (i.riskAssessment && !i.riskAssessment.notificationRequired) return false
        return is72hDeadlineExpired(i.detectedAt)
      }).length,
      deadlineApproaching: incidents.filter(i => {
        if (i.status === 'closed') return false
        if (i.authorityNotification && (i.authorityNotification.status === 'submitted' || i.authorityNotification.status === 'acknowledged')) return false
        const hours = getHoursUntil72hDeadline(i.detectedAt)
        return hours > 0 && hours <= 24
      }).length
    }
  }, [incidents])

  // Filter incidents based on active tab and filters
  const filteredIncidents = useMemo(() => {
    let filtered = [...incidents]

    // Tab-based filtering
    if (activeTab === 'active') {
      filtered = filtered.filter(i =>
        i.status === 'detected' || i.status === 'assessment' ||
        i.status === 'containment' || i.status === 'remediation'
      )
    } else if (activeTab === 'notification') {
      filtered = filtered.filter(i =>
        i.status === 'notification_required' || i.status === 'notification_sent' ||
        (i.authorityNotification !== null && i.authorityNotification.status === 'pending')
      )
    } else if (activeTab === 'closed') {
      filtered = filtered.filter(i => i.status === 'closed')
    }

    // Severity filter
    if (selectedSeverity !== 'all') {
      filtered = filtered.filter(i => i.severity === selectedSeverity)
    }

    // Status filter
    if (selectedStatus !== 'all') {
      filtered = filtered.filter(i => i.status === selectedStatus)
    }

    // Category filter
    if (selectedCategory !== 'all') {
      filtered = filtered.filter(i => i.category === selectedCategory)
    }

    // Sort: most urgent first (overdue > deadline approaching > severity > detected time)
    const severityOrder: Record<IncidentSeverity, number> = { critical: 0, high: 1, medium: 2, low: 3 }
    return filtered.sort((a, b) => {
      // Closed always at the end
      if (a.status === 'closed' !== (b.status === 'closed')) return a.status === 'closed' ? 1 : -1

      // Overdue first
      const aExpired = is72hDeadlineExpired(a.detectedAt)
      const bExpired = is72hDeadlineExpired(b.detectedAt)
      if (aExpired !== bExpired) return aExpired ? -1 : 1

      // Then by severity
      if (severityOrder[a.severity] !== severityOrder[b.severity]) {
        return severityOrder[a.severity] - severityOrder[b.severity]
      }

      // Then by deadline urgency
      return getHoursUntil72hDeadline(a.detectedAt) - getHoursUntil72hDeadline(b.detectedAt)
    })
  }, [incidents, activeTab, selectedSeverity, selectedStatus, selectedCategory])

  const tabs: Tab[] = [
    { id: 'overview', label: 'Uebersicht' },
    { id: 'active', label: 'Aktiv', count: tabCounts.active, countColor: 'bg-orange-100 text-orange-600' },
    { id: 'notification', label: 'Meldepflichtig', count: tabCounts.notification, countColor: 'bg-red-100 text-red-600' },
    { id: 'closed', label: 'Abgeschlossen', count: tabCounts.closed, countColor: 'bg-green-100 text-green-600' },
    { id: 'settings', label: 'Einstellungen' }
  ]

  const stepInfo = STEP_EXPLANATIONS['incidents']

  const clearFilters = () => {
    setSelectedSeverity('all')
    setSelectedStatus('all')
    setSelectedCategory('all')
  }

  return (
    <div className="space-y-6">
      {/* Step Header */}
      <StepHeader
        stepId="incidents"
        title={stepInfo.title}
        description={stepInfo.description}
        explanation={stepInfo.explanation}
        tips={stepInfo.tips}
      >
        <Link
          href="/sdk/incidents/new"
          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Vorfall melden
        </Link>
      </StepHeader>

      {/* Tab Navigation */}
      <TabNavigation
        tabs={tabs}
        activeTab={activeTab}
        onTabChange={setActiveTab}
      />

      {/* Loading State */}
      {isLoading ? (
        <div className="flex items-center justify-center py-12">
          <svg className="animate-spin w-8 h-8 text-purple-600" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
          </svg>
        </div>
      ) : activeTab === 'settings' ? (
        /* Settings Tab */
        <div className="bg-white rounded-xl border border-gray-200 p-8 text-center">
          <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Einstellungen</h3>
          <p className="mt-2 text-gray-500">
            Incident-Management-Einstellungen, Eskalationswege und Meldevorlagen
            werden in einer spaeteren Version verfuegbar sein.
          </p>
        </div>
      ) : (
        <>
          {/* Statistics (Overview Tab) */}
          {activeTab === 'overview' && statistics && (
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <StatCard
                label="Gesamt Vorfaelle"
                value={statistics.totalIncidents}
                color="gray"
              />
              <StatCard
                label="Offene Vorfaelle"
                value={statistics.openIncidents}
                color="orange"
              />
              <StatCard
                label="Meldungen ausstehend"
                value={statistics.notificationsPending}
                color={statistics.notificationsPending > 0 ? 'red' : 'green'}
              />
              <StatCard
                label="Durchschn. Reaktionszeit"
                value={`${statistics.averageResponseTimeHours}h`}
                color="purple"
              />
            </div>
          )}

          {/* Critical Alert: 72h deadline approaching or expired */}
          {(tabCounts.deadlineExpired > 0 || tabCounts.deadlineApproaching > 0) && (
            <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-4">
              <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
                <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>
              </div>
              <div className="flex-1">
                <h4 className="font-medium text-red-800">
                  {tabCounts.deadlineExpired > 0
                    ? `Achtung: ${tabCounts.deadlineExpired} ueberfaellige Meldung(en) - 72-Stunden-Frist ueberschritten!`
                    : `Warnung: ${tabCounts.deadlineApproaching} Meldung(en) mit ablaufender 72-Stunden-Frist`
                  }
                </h4>
                <p className="text-sm text-red-600">
                  {tabCounts.deadlineExpired > 0
                    ? 'Die gesetzliche Meldefrist nach Art. 33 DSGVO ist abgelaufen. Handeln Sie umgehend, um Bussgelder zu vermeiden. Verspaetete Meldungen muessen begruendet werden.'
                    : 'Die 72-Stunden-Meldefrist nach Art. 33 DSGVO laeuft in Kuerze ab. Fuehren Sie eine Risikobewertung durch und entscheiden Sie ueber die Meldepflicht.'
                  }
                </p>
              </div>
              <button
                onClick={() => {
                  setActiveTab('active')
                  setSelectedStatus('all')
                }}
                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium"
              >
                Anzeigen
              </button>
            </div>
          )}

          {/* Info Box (Overview Tab) */}
          {activeTab === 'overview' && (
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
              <div className="flex items-start gap-3">
                <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                  <h4 className="font-medium text-blue-800">Art. 33/34 DSGVO - 72-Stunden-Meldepflicht</h4>
                  <p className="text-sm text-blue-600 mt-1">
                    Nach Art. 33 DSGVO muessen Datenschutzverletzungen innerhalb von 72 Stunden
                    an die zustaendige Aufsichtsbehoerde gemeldet werden, sofern ein Risiko fuer
                    die Rechte und Freiheiten der betroffenen Personen besteht. Bei hohem Risiko
                    muessen gemaess Art. 34 DSGVO auch die betroffenen Personen benachrichtigt werden.
                    Alle Vorfaelle sind unabhaengig von der Meldepflicht zu dokumentieren (Art. 33 Abs. 5).
                  </p>
                </div>
              </div>
            </div>
          )}

          {/* Filters */}
          <FilterBar
            selectedSeverity={selectedSeverity}
            selectedStatus={selectedStatus}
            selectedCategory={selectedCategory}
            onSeverityChange={setSelectedSeverity}
            onStatusChange={setSelectedStatus}
            onCategoryChange={setSelectedCategory}
            onClear={clearFilters}
          />

          {/* Incidents List */}
          <div className="space-y-4">
            {filteredIncidents.map(incident => (
              <IncidentCard key={incident.id} incident={incident} />
            ))}
          </div>

          {/* Empty State */}
          {filteredIncidents.length === 0 && (
            <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
              <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
                <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <h3 className="text-lg font-semibold text-gray-900">Keine Vorfaelle gefunden</h3>
              <p className="mt-2 text-gray-500">
                {selectedSeverity !== 'all' || selectedStatus !== 'all' || selectedCategory !== 'all'
                  ? 'Passen Sie die Filter an oder'
                  : 'Es sind noch keine Vorfaelle erfasst worden.'
                }
              </p>
              {(selectedSeverity !== 'all' || selectedStatus !== 'all' || selectedCategory !== 'all') ? (
                <button
                  onClick={clearFilters}
                  className="mt-4 px-4 py-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
                >
                  Filter zuruecksetzen
                </button>
              ) : (
                <Link
                  href="/sdk/incidents/new"
                  className="mt-4 inline-flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                  </svg>
                  Ersten Vorfall erfassen
                </Link>
              )}
            </div>
          )}
        </>
      )}
    </div>
  )
}