import { useState, useRef } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import { Database, Download, Upload, Trash2, RefreshCw, HardDrive, Clock, FileText, FolderOpen, Archive, AlertTriangle, Bomb, CheckCircle2, XCircle, ScrollText, X } from 'lucide-react';
import { backupApi, BackupInfo, backupLogApi, BackupLogEntry, BackupLogDetail, getAccessToken } from '../../services/api';
import { useAuth } from '../../context/AuthContext';
import Button from '../../components/ui/Button';

function extractError(err: any): { headline: string; details?: string; hint?: string } {
  const data = err?.response?.data;
  if (data && typeof data === 'object') {
    return {
      headline: data.error || 'Unbekannter Fehler',
      details: data.details,
      hint: data.hint,
    };
  }
  if (typeof data === 'string') return { headline: data };
  return { headline: err?.message || 'Unbekannter Fehler' };
}

export default function DatabaseBackup() {
  const [showRestoreConfirm, setShowRestoreConfirm] = useState<string | null>(null);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState<string | null>(null);
  const [showFactoryResetConfirm, setShowFactoryResetConfirm] = useState(false);
  const [factoryResetConfirmText, setFactoryResetConfirmText] = useState('');
  const [uploadError, setUploadError] = useState<string | null>(null);
  const [showLogId, setShowLogId] = useState<number | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const queryClient = useQueryClient();
  const { logout } = useAuth();

  // Logs für Backup-Erstellung und -Wiederherstellung
  const { data: createLogsData } = useQuery({
    queryKey: ['backup-logs', 'CREATE'],
    queryFn: () => backupLogApi.list('CREATE'),
    refetchInterval: 5000,
  });
  const { data: restoreLogsData } = useQuery({
    queryKey: ['backup-logs', 'RESTORE'],
    queryFn: () => backupLogApi.list('RESTORE'),
    refetchInterval: 5000,
  });
  const createLogs: BackupLogEntry[] = createLogsData?.data || [];
  const restoreLogs: BackupLogEntry[] = restoreLogsData?.data || [];

  // Detail-Log (für das Modal)
  const { data: logDetailData, isLoading: logDetailLoading } = useQuery({
    queryKey: ['backup-log-detail', showLogId],
    queryFn: () => backupLogApi.get(showLogId!),
    enabled: showLogId !== null,
  });
  const logDetail: BackupLogDetail | undefined = logDetailData?.data;

  // Backups laden
  const { data: backupsData, isLoading } = useQuery({
    queryKey: ['backups'],
    queryFn: () => backupApi.list(),
  });

  const backups = backupsData?.data || [];

  // Backup erstellen
  const createMutation = useMutation({
    mutationFn: () => backupApi.create(),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['backups'] });
      queryClient.invalidateQueries({ queryKey: ['backup-logs', 'CREATE'] });
    },
    onError: () => {
      queryClient.invalidateQueries({ queryKey: ['backup-logs', 'CREATE'] });
    },
  });

  // Backup wiederherstellen
  const restoreMutation = useMutation({
    mutationFn: (name: string) => backupApi.restore(name),
    onSuccess: (response: any) => {
      queryClient.invalidateQueries({ queryKey: ['backups'] });
      queryClient.invalidateQueries({ queryKey: ['backup-logs', 'RESTORE'] });
      setShowRestoreConfirm(null);
      // Backend liefert message: "X Datensätze und Y Dateien wiederhergestellt"
      const msg = response?.message || 'Backup erfolgreich wiederhergestellt.';
      toast.success(msg, { duration: 6000 });
    },
    // Bei Fehler bleibt das Dialog absichtlich offen, damit der User
    // die Detail-Message sehen + ggf. erneut versuchen kann.
    onError: (err: any) => {
      queryClient.invalidateQueries({ queryKey: ['backup-logs', 'RESTORE'] });
      const e = extractError(err);
      const msg = e.details ? `${e.headline}\n${e.details}` : e.headline;
      toast.error(msg, { duration: 10000 });
    },
  });

  // Backup löschen
  const deleteMutation = useMutation({
    mutationFn: (name: string) => backupApi.delete(name),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['backups'] });
      setShowDeleteConfirm(null);
    },
  });

  // Backup hochladen
  const uploadMutation = useMutation({
    mutationFn: (file: File) => backupApi.upload(file),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['backups'] });
      setUploadError(null);
      if (fileInputRef.current) {
        fileInputRef.current.value = '';
      }
    },
    onError: (error: any) => {
      setUploadError(error.message || 'Upload fehlgeschlagen');
    },
  });

  // Werkseinstellungen
  const factoryResetMutation = useMutation({
    mutationFn: () => backupApi.factoryReset(),
    onSuccess: () => {
      setShowFactoryResetConfirm(false);
      setFactoryResetConfirmText('');
      // Nach Factory Reset ausloggen
      logout();
    },
  });

  // Datei-Upload Handler
  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      if (!file.name.endsWith('.zip')) {
        setUploadError('Nur ZIP-Dateien sind erlaubt');
        return;
      }
      setUploadError(null);
      uploadMutation.mutate(file);
    }
  };

  // Download mit Auth-Token
  const handleDownload = async (name: string) => {
    const token = getAccessToken();
    const url = backupApi.getDownloadUrl(name);

    try {
      const response = await fetch(url, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      if (!response.ok) {
        throw new Error('Download fehlgeschlagen');
      }

      // Blob erstellen und herunterladen
      const blob = await response.blob();
      const downloadUrl = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = downloadUrl;
      a.download = `opencrm-backup-${name}.zip`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(downloadUrl);
    } catch (error: any) {
      console.error('Download error:', error);
    }
  };

  // Formatierung
  const formatDate = (timestamp: string) => {
    return new Date(timestamp).toLocaleString('de-DE', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
    });
  };

  const formatSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
            <Database className="w-5 h-5" />
            Datenbank & Zurücksetzen
          </h2>
          <p className="text-sm text-gray-500 mt-1">
            Backups erstellen, wiederherstellen oder auf Werkseinstellungen zurücksetzen.
          </p>
        </div>
        <div className="flex items-center gap-2">
          {/* Upload Button */}
          <input
            type="file"
            ref={fileInputRef}
            accept=".zip"
            onChange={handleFileSelect}
            className="hidden"
          />
          <Button
            variant="secondary"
            onClick={() => fileInputRef.current?.click()}
            disabled={uploadMutation.isPending}
          >
            {uploadMutation.isPending ? (
              <>
                <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                Hochladen...
              </>
            ) : (
              <>
                <Upload className="w-4 h-4 mr-2" />
                Backup hochladen
              </>
            )}
          </Button>
          {/* Create Button */}
          <Button
            onClick={() => createMutation.mutate()}
            disabled={createMutation.isPending}
          >
            {createMutation.isPending ? (
              <>
                <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                Wird erstellt...
              </>
            ) : (
              <>
                <Download className="w-4 h-4 mr-2" />
                Neues Backup
              </>
            )}
          </Button>
        </div>
      </div>

      {/* Upload Error */}
      {uploadError && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
          {uploadError}
        </div>
      )}

      {/* Info-Box */}
      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
        <h4 className="text-sm font-medium text-blue-800 mb-2">Hinweise zur Datensicherung</h4>
        <ul className="text-sm text-blue-700 space-y-1 list-disc list-inside">
          <li>Backups enthalten alle Datenbankdaten und hochgeladene Dokumente</li>
          <li>Erstellen Sie vor Datenbankmigrationen immer ein Backup</li>
          <li>Backups können als ZIP heruntergeladen und auf einem anderen System wiederhergestellt werden</li>
          <li>Bei der Wiederherstellung werden bestehende Daten mit dem Backup-Stand überschrieben</li>
        </ul>
      </div>

      {/* Backup-Liste */}
      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
          <h3 className="text-sm font-medium text-gray-700">Verfügbare Backups</h3>
        </div>

        {isLoading ? (
          <div className="flex items-center justify-center py-12">
            <RefreshCw className="w-6 h-6 animate-spin text-gray-400" />
          </div>
        ) : backups.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-12 text-gray-500">
            <HardDrive className="w-12 h-12 mb-2 opacity-30" />
            <p>Keine Backups vorhanden</p>
            <p className="text-sm mt-1">Erstellen Sie Ihr erstes Backup</p>
          </div>
        ) : (
          <div className="divide-y divide-gray-200">
            {backups.map((backup: BackupInfo) => (
              <div key={backup.name} className="p-4 hover:bg-gray-50">
                <div className="flex items-start justify-between">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-3 mb-2">
                      <span className="font-mono text-sm bg-gray-100 px-2 py-1 rounded">
                        {backup.name}
                      </span>
                      <span className="text-sm text-gray-500 flex items-center gap-1">
                        <Clock className="w-4 h-4" />
                        {formatDate(backup.timestamp)}
                      </span>
                    </div>
                    <div className="flex items-center gap-4 text-sm text-gray-600">
                      <span className="flex items-center gap-1">
                        <FileText className="w-4 h-4" />
                        {backup.totalRecords.toLocaleString('de-DE')} Datensätze
                      </span>
                      <span className="flex items-center gap-1">
                        <HardDrive className="w-4 h-4" />
                        {formatSize(backup.sizeBytes)}
                      </span>
                      {backup.hasUploads && (
                        <span className="flex items-center gap-1 text-green-600">
                          <FolderOpen className="w-4 h-4" />
                          Dokumente ({formatSize(backup.uploadSizeBytes)})
                        </span>
                      )}
                    </div>
                    {/* Tabellen-Details (kollabiert) */}
                    <details className="mt-2">
                      <summary className="text-xs text-gray-500 cursor-pointer hover:text-gray-700">
                        Tabellen anzeigen ({backup.tables.filter(t => t.count > 0).length} mit Daten)
                      </summary>
                      <div className="mt-2 flex flex-wrap gap-1">
                        {backup.tables
                          .filter(t => t.count > 0)
                          .map(t => (
                            <span
                              key={t.table}
                              className="text-xs bg-gray-100 px-2 py-0.5 rounded"
                            >
                              {t.table}: {t.count}
                            </span>
                          ))}
                      </div>
                    </details>
                  </div>

                  {/* Aktionen */}
                  <div className="flex items-center gap-2 ml-4">
                    <Button
                      variant="secondary"
                      size="sm"
                      onClick={() => handleDownload(backup.name)}
                      title="Als ZIP herunterladen"
                    >
                      <Archive className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="secondary"
                      size="sm"
                      onClick={() => setShowRestoreConfirm(backup.name)}
                      disabled={restoreMutation.isPending}
                    >
                      <Upload className="w-4 h-4 mr-1" />
                      Wiederherstellen
                    </Button>
                    <Button
                      variant="danger"
                      size="sm"
                      onClick={() => setShowDeleteConfirm(backup.name)}
                      disabled={deleteMutation.isPending}
                    >
                      <Trash2 className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Wiederherstellungs-Bestätigung */}
      {showRestoreConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 max-w-md mx-4">
            <h3 className="text-lg font-semibold text-gray-900 mb-2">
              Backup wiederherstellen?
            </h3>
            <p className="text-gray-600 mb-4">
              Möchten Sie das Backup <strong>{showRestoreConfirm}</strong> wirklich wiederherstellen?
            </p>
            <p className="text-amber-600 text-sm mb-4 bg-amber-50 p-3 rounded-lg">
              <strong>Achtung:</strong> Bestehende Daten und Dokumente werden mit dem Backup-Stand überschrieben.
              Dies kann nicht rückgängig gemacht werden.
            </p>
            {restoreMutation.isError && (() => {
              const e = extractError(restoreMutation.error);
              return (
                <div className="mb-4 bg-red-50 border border-red-200 text-red-800 text-sm p-3 rounded-lg">
                  <div className="font-semibold mb-1">{e.headline}</div>
                  {e.details && (
                    <div className="whitespace-pre-wrap break-words font-mono text-xs bg-white border border-red-100 rounded p-2 mb-2">
                      {e.details}
                    </div>
                  )}
                  {e.hint && (
                    <div className="text-xs text-red-600 italic">{e.hint}</div>
                  )}
                </div>
              );
            })()}
            <div className="flex justify-end gap-3">
              <Button
                variant="secondary"
                onClick={() => {
                  setShowRestoreConfirm(null);
                  restoreMutation.reset();
                }}
                disabled={restoreMutation.isPending}
              >
                {restoreMutation.isError ? 'Schließen' : 'Abbrechen'}
              </Button>
              <Button
                variant="primary"
                onClick={() => restoreMutation.mutate(showRestoreConfirm)}
                disabled={restoreMutation.isPending}
              >
                {restoreMutation.isPending ? (
                  <>
                    <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                    Wird wiederhergestellt...
                  </>
                ) : restoreMutation.isError ? (
                  'Erneut versuchen'
                ) : (
                  'Ja, wiederherstellen'
                )}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Lösch-Bestätigung */}
      {showDeleteConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 max-w-md mx-4">
            <h3 className="text-lg font-semibold text-gray-900 mb-2">
              Backup löschen?
            </h3>
            <p className="text-gray-600 mb-4">
              Möchten Sie das Backup <strong>{showDeleteConfirm}</strong> wirklich löschen?
              Dies kann nicht rückgängig gemacht werden.
            </p>
            <div className="flex justify-end gap-3">
              <Button
                variant="secondary"
                onClick={() => setShowDeleteConfirm(null)}
                disabled={deleteMutation.isPending}
              >
                Abbrechen
              </Button>
              <Button
                variant="danger"
                onClick={() => deleteMutation.mutate(showDeleteConfirm)}
                disabled={deleteMutation.isPending}
              >
                {deleteMutation.isPending ? 'Wird gelöscht...' : 'Ja, löschen'}
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Operations-Logs: zwei Spalten (CREATE | RESTORE) */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <LogPanel
          title="Backup-Erstellung"
          emptyText="Noch keine Backup-Erstellung protokolliert."
          entries={createLogs}
          onSelect={setShowLogId}
          formatDate={formatDate}
        />
        <LogPanel
          title="Backup-Wiederherstellung"
          emptyText="Noch keine Wiederherstellung protokolliert."
          entries={restoreLogs}
          onSelect={setShowLogId}
          formatDate={formatDate}
        />
      </div>

      {/* Log-Detail-Modal */}
      {showLogId !== null && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-3xl max-h-[85vh] flex flex-col">
            <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
                <ScrollText className="w-5 h-5 text-gray-600" />
                Log-Detail
                {logDetail && (
                  <span className="text-sm font-normal text-gray-500">
                    #{logDetail.id} · {logDetail.operation === 'CREATE' ? 'Backup-Erstellung' : 'Wiederherstellung'}
                  </span>
                )}
              </h3>
              <button
                onClick={() => setShowLogId(null)}
                className="text-gray-400 hover:text-gray-700 p-1"
                aria-label="Schließen"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="px-5 py-4 overflow-auto flex-1">
              {logDetailLoading && (
                <div className="text-gray-500 text-sm flex items-center gap-2">
                  <RefreshCw className="w-4 h-4 animate-spin" />
                  Lade Log-Daten...
                </div>
              )}
              {logDetail && (
                <>
                  <div className="mb-3 grid grid-cols-2 gap-3 text-sm">
                    <div>
                      <div className="text-xs text-gray-500">Zeitpunkt</div>
                      <div>{formatDate(logDetail.createdAt)}</div>
                    </div>
                    <div>
                      <div className="text-xs text-gray-500">Status</div>
                      <div className={logDetail.success ? 'text-green-700' : 'text-red-700'}>
                        {logDetail.success ? 'Erfolgreich' : 'Fehlgeschlagen'}
                        {' · '}
                        {(logDetail.durationMs / 1000).toFixed(1)}s
                      </div>
                    </div>
                    {logDetail.backupName && (
                      <div>
                        <div className="text-xs text-gray-500">Backup</div>
                        <div className="font-mono text-xs">{logDetail.backupName}</div>
                      </div>
                    )}
                    {logDetail.userEmail && (
                      <div>
                        <div className="text-xs text-gray-500">Ausgelöst von</div>
                        <div>{logDetail.userEmail}</div>
                      </div>
                    )}
                  </div>
                  <div className="text-xs text-gray-500 mb-1">Zusammenfassung</div>
                  <div className="text-sm bg-gray-50 border border-gray-200 rounded p-2 mb-4 whitespace-pre-wrap break-words">
                    {logDetail.summary}
                  </div>
                  <div className="text-xs text-gray-500 mb-1">Vollständiges Log</div>
                  <pre className="text-xs bg-gray-900 text-gray-100 rounded p-3 overflow-auto whitespace-pre-wrap break-words font-mono">
                    {logDetail.fullLog || '(leer)'}
                  </pre>
                </>
              )}
            </div>
            <div className="px-5 py-3 border-t border-gray-200 flex justify-end">
              <Button variant="secondary" onClick={() => setShowLogId(null)}>
                Schließen
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* Werkseinstellungen */}
      <div className="bg-red-50 border border-red-200 rounded-lg p-6 mt-8">
        <div className="flex items-start gap-4">
          <div className="p-2 bg-red-100 rounded-lg">
            <AlertTriangle className="w-6 h-6 text-red-600" />
          </div>
          <div className="flex-1">
            <h3 className="text-lg font-semibold text-red-800 mb-2">
              Werkseinstellungen
            </h3>
            <p className="text-sm text-red-700 mb-4">
              Setzt das System auf den Ausgangszustand zurück. <strong>Alle Daten werden unwiderruflich gelöscht</strong> -
              Kunden, Verträge, Benutzer, Dokumente und Einstellungen. Nur die hier gespeicherten Backups bleiben erhalten.
            </p>
            <ul className="text-sm text-red-700 mb-4 list-disc list-inside space-y-1">
              <li>Alle Kunden und Verträge werden gelöscht</li>
              <li>Alle Benutzer werden gelöscht</li>
              <li>Alle hochgeladenen Dokumente werden gelöscht</li>
              <li>Ein neuer Admin-Benutzer wird erstellt (admin@admin.com / admin)</li>
              <li><strong>Backups bleiben erhalten</strong> und können danach wiederhergestellt werden</li>
            </ul>
            <Button
              variant="danger"
              onClick={() => setShowFactoryResetConfirm(true)}
            >
              <Bomb className="w-4 h-4 mr-2" />
              Werkseinstellungen
            </Button>
          </div>
        </div>
      </div>

      {/* Werkseinstellungen-Bestätigung */}
      {showFactoryResetConfirm && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white rounded-lg shadow-xl p-6 max-w-lg mx-4">
            <div className="flex items-center gap-3 mb-4">
              <div className="p-2 bg-red-100 rounded-lg">
                <AlertTriangle className="w-6 h-6 text-red-600" />
              </div>
              <h3 className="text-lg font-semibold text-gray-900">
                Wirklich auf Werkseinstellungen zurücksetzen?
              </h3>
            </div>
            <p className="text-gray-600 mb-4">
              Diese Aktion löscht <strong>alle Daten unwiderruflich</strong>. Es gibt kein Zurück!
            </p>
            <p className="text-sm text-gray-600 mb-4">
              Geben Sie zur Bestätigung <strong className="font-mono bg-gray-100 px-1">LÖSCHEN</strong> ein:
            </p>
            <input
              type="text"
              value={factoryResetConfirmText}
              onChange={(e) => setFactoryResetConfirmText(e.target.value)}
              placeholder="LÖSCHEN"
              className="w-full px-3 py-2 border border-gray-300 rounded-lg mb-4 focus:ring-2 focus:ring-red-500 focus:border-red-500"
            />
            <div className="flex justify-end gap-3">
              <Button
                variant="secondary"
                onClick={() => {
                  setShowFactoryResetConfirm(false);
                  setFactoryResetConfirmText('');
                }}
                disabled={factoryResetMutation.isPending}
              >
                Abbrechen
              </Button>
              <Button
                variant="danger"
                onClick={() => factoryResetMutation.mutate()}
                disabled={factoryResetConfirmText !== 'LÖSCHEN' || factoryResetMutation.isPending}
              >
                {factoryResetMutation.isPending ? (
                  <>
                    <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                    Wird zurückgesetzt...
                  </>
                ) : (
                  'Ja, alles löschen'
                )}
              </Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

interface LogPanelProps {
  title: string;
  emptyText: string;
  entries: BackupLogEntry[];
  onSelect: (id: number) => void;
  formatDate: (iso: string) => string;
}

function LogPanel({ title, emptyText, entries, onSelect, formatDate }: LogPanelProps) {
  return (
    <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
      <div className="px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
        <h3 className="text-sm font-medium text-gray-700 flex items-center gap-2">
          <ScrollText className="w-4 h-4" />
          {title}
        </h3>
        <span className="text-xs text-gray-500">{entries.length} Einträge</span>
      </div>
      {entries.length === 0 ? (
        <div className="p-6 text-center text-sm text-gray-500">{emptyText}</div>
      ) : (
        <ul className="divide-y divide-gray-200 max-h-80 overflow-auto">
          {entries.map((e) => (
            <li
              key={e.id}
              onClick={() => onSelect(e.id)}
              className="px-4 py-2.5 hover:bg-gray-50 cursor-pointer flex items-start gap-3"
            >
              {e.success ? (
                <CheckCircle2 className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
              ) : (
                <XCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
              )}
              <div className="flex-1 min-w-0">
                <div className="text-sm text-gray-900 truncate">{e.summary}</div>
                <div className="text-xs text-gray-500 mt-0.5 flex flex-wrap gap-x-3 gap-y-0.5">
                  <span>{formatDate(e.createdAt)}</span>
                  {e.backupName && <span className="font-mono">{e.backupName}</span>}
                  {e.userEmail && <span>{e.userEmail}</span>}
                </div>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
