breakpilot-compliance/admin-compliance/app/sdk/incidents/_components/IncidentDetailDrawer.tsx

'use client'

import React, { useState } from 'react'
import {
  Incident,
  INCIDENT_SEVERITY_INFO,
  INCIDENT_STATUS_INFO,
  INCIDENT_CATEGORY_INFO
} from '@/lib/sdk/incidents/types'
import { CountdownTimer } from './CountdownTimer'

const STATUS_TRANSITIONS: Record<string, { label: string; nextStatus: string } | null> = {
  detected: { label: 'Bewertung starten', nextStatus: 'assessment' },
  assessment: { label: 'Eindaemmung starten', nextStatus: 'containment' },
  containment: { label: 'Meldepflicht pruefen', nextStatus: 'notification_required' },
  notification_required: { label: 'Gemeldet', nextStatus: 'notification_sent' },
  notification_sent: { label: 'Behebung starten', nextStatus: 'remediation' },
  remediation: { label: 'Abschliessen', nextStatus: 'closed' },
  closed: null
}

export function IncidentDetailDrawer({
  incident,
  onClose,
  onStatusChange,
  onDeleted,
}: {
  incident: Incident
  onClose: () => void
  onStatusChange: () => void
  onDeleted?: () => void
}) {
  const [isChangingStatus, setIsChangingStatus] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)

  const handleDeleteIncident = async () => {
    if (!window.confirm(`Incident "${incident.title}" wirklich löschen?`)) return
    setIsDeleting(true)
    try {
      const res = await fetch(`/api/sdk/v1/incidents/${incident.id}`, { method: 'DELETE' })
      if (!res.ok) throw new Error(`Fehler: ${res.status}`)
      onDeleted ? onDeleted() : onClose()
    } catch (err) {
      console.error('Löschen fehlgeschlagen:', err)
      alert('Löschen fehlgeschlagen.')
    } finally {
      setIsDeleting(false)
    }
  }
  const severityInfo = INCIDENT_SEVERITY_INFO[incident.severity]
  const statusInfo = INCIDENT_STATUS_INFO[incident.status]
  const categoryInfo = INCIDENT_CATEGORY_INFO[incident.category]
  const transition = STATUS_TRANSITIONS[incident.status]

  const handleStatusChange = async (newStatus: string) => {
    setIsChangingStatus(true)
    try {
      const res = await fetch(`/api/sdk/v1/incidents/${incident.id}/status`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus })
      })
      if (!res.ok) {
        throw new Error(`Fehler: ${res.status}`)
      }
      onStatusChange()
    } catch (err) {
      console.error('Status-Aenderung fehlgeschlagen:', err)
    } finally {
      setIsChangingStatus(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50">
      {/* Backdrop */}
      <div
        className="absolute inset-0 bg-black/30"
        onClick={onClose}
      />
      {/* Drawer */}
      <div className="fixed right-0 top-0 h-full w-[600px] bg-white shadow-2xl z-10 overflow-y-auto">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 sticky top-0 bg-white z-10">
          <div className="flex items-center gap-3">
            <span className={`px-2 py-1 text-xs rounded-full ${severityInfo.bgColor} ${severityInfo.color}`}>
              {severityInfo.label}
            </span>
            <span className={`px-2 py-1 text-xs rounded-full ${statusInfo.bgColor} ${statusInfo.color}`}>
              {statusInfo.label}
            </span>
          </div>
          <button
            onClick={onClose}
            className="p-1 text-gray-400 hover:text-gray-600 rounded 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="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="p-6 space-y-6">
          {/* Title */}
          <div>
            <p className="text-xs text-gray-400 font-mono mb-1">{incident.referenceNumber}</p>
            <h2 className="text-xl font-semibold text-gray-900">{incident.title}</h2>
          </div>

          {/* Status Transition */}
          {transition && (
            <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
              <p className="text-sm text-purple-700 mb-3">Naechster Schritt:</p>
              <button
                onClick={() => handleStatusChange(transition.nextStatus)}
                disabled={isChangingStatus}
                className="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
              >
                {isChangingStatus && (
                  <svg className="animate-spin w-4 h-4" 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>
                )}
                {transition.label}
              </button>
            </div>
          )}

          {/* Details Grid */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <p className="text-xs text-gray-500 mb-1">Kategorie</p>
              <p className="text-sm font-medium text-gray-900">
                {categoryInfo.icon} {categoryInfo.label}
              </p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">Schweregrad</p>
              <p className="text-sm font-medium text-gray-900">{severityInfo.label}</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">Status</p>
              <p className="text-sm font-medium text-gray-900">{statusInfo.label}</p>
            </div>
            <div>
              <p className="text-xs text-gray-500 mb-1">Entdeckt am</p>
              <p className="text-sm font-medium text-gray-900">
                {new Date(incident.detectedAt).toLocaleString('de-DE')}
              </p>
            </div>
            {incident.detectedBy && (
              <div>
                <p className="text-xs text-gray-500 mb-1">Entdeckt von</p>
                <p className="text-sm font-medium text-gray-900">{incident.detectedBy}</p>
              </div>
            )}
            {incident.assignedTo && (
              <div>
                <p className="text-xs text-gray-500 mb-1">Zugewiesen an</p>
                <p className="text-sm font-medium text-gray-900">{incident.assignedTo}</p>
              </div>
            )}
            <div>
              <p className="text-xs text-gray-500 mb-1">Betroffene Personen (geschaetzt)</p>
              <p className="text-sm font-medium text-gray-900">
                {incident.estimatedAffectedPersons.toLocaleString('de-DE')}
              </p>
            </div>
          </div>

          {/* Description */}
          {incident.description && (
            <div>
              <p className="text-xs text-gray-500 mb-2">Beschreibung</p>
              <p className="text-sm text-gray-700 leading-relaxed bg-gray-50 rounded-lg p-3">
                {incident.description}
              </p>
            </div>
          )}

          {/* Affected Systems */}
          {incident.affectedSystems && incident.affectedSystems.length > 0 && (
            <div>
              <p className="text-xs text-gray-500 mb-2">Betroffene Systeme</p>
              <div className="flex flex-wrap gap-2">
                {incident.affectedSystems.map((sys, idx) => (
                  <span key={idx} className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full">
                    {sys}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* 72h Countdown */}
          <div>
            <p className="text-xs text-gray-500 mb-2">72h-Meldefrist</p>
            <CountdownTimer incident={incident} />
          </div>

          {/* Delete */}
          <div className="pt-2 border-t border-gray-100">
            <button
              onClick={handleDeleteIncident}
              disabled={isDeleting}
              className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 text-sm transition-colors disabled:opacity-50"
            >
              {isDeleting ? 'Löschen...' : 'Löschen'}
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}