syncova-backup/apps/web/src/features/backups/VerificationPage.tsx

/**
 * Prüfungen — Übersicht.
 *
 * Die wichtigste Unterscheidung dieser Seite steht in zwei Spalten
 * nebeneinander und wird gern verwechselt:
 *
 * - **Zustand** (`status`): Ist die Prüfung durchgelaufen?
 * - **Ergebnis** (`result`): Was hat sie gefunden?
 *
 * Eine gescheiterte Prüfung ist **kein Befund am Backup**. Repository nicht
 * erreichbar heißt: Auftrag `failed`, Einstufung unberührt. Wer beides
 * vermengt, baut ein Prüfwerkzeug, das grundlos Alarm schlägt — und das wird
 * bald nicht mehr ernst genommen.
 */

import { Ban, RefreshCw } from 'lucide-react';
import { useCallback } from 'react';
import { useApiResource } from '@/api/useApiResource';
import { describeApiError, useMutation } from '@/api/useMutation';
import { PageHeader } from '@/components/layout/PageHeader';
import {
  Button,
  Callout,
  Card,
  DataTable,
  ErrorState,
  StatusBadge,
  useToast,
  type TableColumn,
} from '@/components/ui';
import { formatBytes, formatDuration, formatRelativeTime } from '@/lib/utils';
import {
  VERIFICATION_TYPES,
  cancelVerification,
  listVerifications,
  type VerificationJob,
} from './backupsApi';

export function VerificationPage({
  grantedPermissions,
  onOpenBackup,
}: {
  readonly grantedPermissions: readonly string[];
  readonly onOpenBackup: (backupIdentifier: string) => void;
}) {
  const toast = useToast();

  const verificationsResource = useApiResource(
    useCallback((abortSignal) => listVerifications(abortSignal), []),
  );

  const mayWrite =
    grantedPermissions.includes('*') || grantedPermissions.includes('verification.write');

  const cancelMutation = useMutation(cancelVerification, {
    onSuccess: () => {
      toast.showSuccess('Prüfung abgebrochen');
      verificationsResource.reload();
    },
    onError: (apiError) =>
      toast.showError('Der Abbruch schlug fehl', describeApiError(apiError), apiError.requestId),
  });

  const jobs = verificationsResource.data ?? [];

  const tableColumns: ReadonlyArray<TableColumn<VerificationJob>> = [
    {
      key: 'type',
      header: 'Prüfart',
      render: (job) => (
        <div className="min-w-0">
          <p className="font-medium text-fg">
            {VERIFICATION_TYPES.find((type) => type.value === job.verification_type)?.label ??
              job.verification_type}
          </p>
          {job.verification_type === 'restore_test' ? (
            <p className="text-xs text-healthy">Der einzige echte Nachweis</p>
          ) : null}
        </div>
      ),
    },
    {
      key: 'status',
      header: 'Zustand',
      render: (job) => <StatusBadge status={job.status} />,
    },
    {
      key: 'result',
      header: 'Ergebnis',
      render: (job) =>
        job.result ? (
          <StatusBadge status={job.result} />
        ) : (
          // Kein Ergebnis heißt: Die Prüfung lief nicht durch. Das ist etwas
          // anderes als "ohne Befund" und darf nicht danach aussehen.
          <span className="text-xs text-fg-muted">—</span>
        ),
    },
    {
      key: 'chunks',
      header: 'Blöcke',
      numeric: true,
      render: (job) => (
        <span>
          {job.chunks_checked.toLocaleString('de-DE')}
          {job.chunks_missing > 0 || job.chunks_corrupted > 0 ? (
            <span className="ml-1 text-critical">
              ({job.chunks_missing} fehlend, {job.chunks_corrupted} beschädigt)
            </span>
          ) : null}
        </span>
      ),
    },
    {
      key: 'bytes_read',
      header: 'Gelesen',
      numeric: true,
      render: (job) => formatBytes(job.bytes_read),
    },
    {
      key: 'duration',
      header: 'Dauer',
      numeric: true,
      render: (job) => formatDuration(job.duration_seconds),
    },
    {
      key: 'started',
      header: 'Begonnen',
      render: (job) => (
        <span className="text-sm text-fg-muted">
          {formatRelativeTime(job.started_at ?? job.created_at)}
        </span>
      ),
    },
    {
      key: 'actions',
      header: '',
      className: 'w-px',
      render: (job) =>
        mayWrite && (job.status === 'running' || job.status === 'queued') ? (
          <Button
            variant="ghost"
            size="sm"
            onClick={(clickEvent) => {
              clickEvent.stopPropagation();
              void cancelMutation.run(job.id);
            }}
          >
            <Ban />
            Abbrechen
          </Button>
        ) : null,
    },
  ];

  if (verificationsResource.loadState === 'failed' && verificationsResource.loadError) {
    return (
      <>
        <PageHeader title="Prüfung" />
        <Card>
          <ErrorState
            message={describeApiError(verificationsResource.loadError)}
            requestId={verificationsResource.loadError.requestId}
            onRetry={verificationsResource.reload}
          />
        </Card>
      </>
    );
  }

  return (
    <>
      <PageHeader
        title="Prüfung"
        description="Nachweise über die Wiederherstellbarkeit."
        actions={
          <Button variant="secondary" onClick={verificationsResource.reload}>
            <RefreshCw />
            Aktualisieren
          </Button>
        }
      />

      <Callout tone="info" className="mb-4" title="Zustand ist nicht Ergebnis">
        Eine gescheiterte Prüfung ist kein Befund am Backup.
      </Callout>

      <Card>
        <DataTable
          columns={tableColumns}
          rows={jobs}
          getRowKey={(job) => job.id}
          onRowClick={(job) => onOpenBackup(job.backup_id)}
          isLoading={verificationsResource.loadState === 'loading'}
          emptyTitle="Noch keine Prüfung"
          emptyDescription="Prüfungen starten Sie bei einem Wiederherstellungspunkt."
        />
      </Card>
    </>
  );
}