'use client'

import React, { useState, useEffect, useMemo, useCallback } from 'react'
import { useSDK } from '@/lib/sdk'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
import {
  Incident,
  IncidentSeverity,
  IncidentStatus,
  IncidentCategory,
  IncidentStatistics,
  getHoursUntil72hDeadline,
  is72hDeadlineExpired
} from '@/lib/sdk/incidents/types'
import { fetchSDKIncidentList, createMockIncidents, createMockStatistics } from '@/lib/sdk/incidents/api'
import { TabNavigation, type Tab, type TabId } from './_components/TabNavigation'
import { StatCard } from './_components/StatCard'
import { FilterBar } from './_components/FilterBar'
import { IncidentCard } from './_components/IncidentCard'
import { IncidentCreateModal } from './_components/IncidentCreateModal'
import { IncidentDetailDrawer } from './_components/IncidentDetailDrawer'

// =============================================================================
// 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)
  const [showCreateModal, setShowCreateModal] = useState(false)
  const [selectedIncident, setSelectedIncident] = useState<Incident | null>(null)

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

  // Load data (extracted as useCallback so it can be called from modals)
  const loadData = useCallback(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)
    }
  }, [])

  useEffect(() => {
    loadData()
  }, [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}
      >
        <button
          onClick={() => setShowCreateModal(true)}
          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
        </button>
      </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}
                onClick={() => setSelectedIncident(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>
              ) : (
                <button
                  onClick={() => setShowCreateModal(true)}
                  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
                </button>
              )}
            </div>
          )}
        </>
      )}

      {/* Create Modal */}
      {showCreateModal && (
        <IncidentCreateModal
          onClose={() => setShowCreateModal(false)}
          onSuccess={() => { setShowCreateModal(false); loadData() }}
        />
      )}

      {/* Detail Drawer */}
      {selectedIncident && (
        <IncidentDetailDrawer
          incident={selectedIncident}
          onClose={() => setSelectedIncident(null)}
          onStatusChange={() => { setSelectedIncident(null); loadData() }}
          onDeleted={() => { setSelectedIncident(null); loadData() }}
        />
      )}
    </div>
  )
}