leocrm/frontend/src/components/workflows/WorkflowInstanceList.tsx

import React, { useState } from 'react';
import { useWorkflowInstances } from '@/api/workflows';
import type { InstanceStatus, WorkflowInstance } from '@/api/workflows';
import { Badge } from '@/components/ui/Badge';
import { Select } from '@/components/ui/Select';
import { Skeleton } from '@/components/ui/Skeleton';
import { EmptyState } from '@/components/ui/EmptyState';
import { Card } from '@/components/ui/Card';
import { AlertCircle, ChevronRight } from 'lucide-react';

const statusFilterOptions = [
  { value: '', label: 'Alle Status' },
  { value: 'pending', label: 'Wartend' },
  { value: 'in_progress', label: 'In Bearbeitung' },
  { value: 'completed', label: 'Abgeschlossen' },
  { value: 'rejected', label: 'Abgelehnt' },
  { value: 'cancelled', label: 'Abgebrochen' },
];

function statusBadgeVariant(
  status: string
): 'success' | 'warning' | 'danger' | 'info' | 'secondary' {
  switch (status) {
    case 'completed':
      return 'success';
    case 'in_progress':
      return 'info';
    case 'pending':
      return 'warning';
    case 'rejected':
      return 'danger';
    case 'cancelled':
      return 'secondary';
    default:
      return 'secondary';
  }
}

function statusLabel(status: string): string {
  const map: Record<string, string> = {
    pending: 'Wartend',
    in_progress: 'In Bearbeitung',
    completed: 'Abgeschlossen',
    rejected: 'Abgelehnt',
    cancelled: 'Abgebrochen',
  };
  return map[status] ?? status;
}

export interface WorkflowInstanceListProps {
  onSelectInstance: (instance: WorkflowInstance) => void;
}

export function WorkflowInstanceList({
  onSelectInstance,
}: WorkflowInstanceListProps) {
  const [statusFilter, setStatusFilter] = useState<string>('');
  const [page, setPage] = useState(1);
  const pageSize = 20;

  const queryStatus =
    statusFilter !== '' ? (statusFilter as InstanceStatus) : undefined;

  const { data, isLoading, isError, refetch } = useWorkflowInstances(
    page,
    pageSize,
    queryStatus
  );

  const instances = data?.items ?? [];
  const total = data?.total ?? 0;
  const totalPages = Math.ceil(total / pageSize);

  return (
    <div className="space-y-4">
      {/* Filter bar */}
      <div className="flex items-center gap-4">
        <Select
          options={statusFilterOptions}
          value={statusFilter}
          onChange={(e) => {
            setStatusFilter(e.target.value);
            setPage(1);
          }}
          className="max-w-xs"
        />
        <span className="text-sm text-secondary-500">
          {total} Instanz{total !== 1 ? 'en' : ''}
        </span>
      </div>

      {/* Loading */}
      {isLoading && (
        <div className="space-y-2">
          {[1, 2, 3, 4].map((i) => (
            <Skeleton key={i} className="h-16 w-full" />
          ))}
        </div>
      )}

      {/* Error */}
      {isError && (
        <Card className="p-6">
          <div className="flex items-center gap-3 text-danger-600">
            <AlertCircle className="h-5 w-5" />
            <span>Fehler beim Laden der Instanzen</span>
            <button
              onClick={() => refetch()}
              className="text-sm text-primary-600 hover:underline"
            >
              Erneut versuchen
            </button>
          </div>
        </Card>
      )}

      {/* Empty state */}
      {!isLoading && !isError && instances.length === 0 && (
        <EmptyState
          title="Keine Workflow-Instanzen"
          description="Es wurden keine Instanzen gefunden, die dem Filter entsprechen."
        />
      )}

      {/* Instance list */}
      {!isLoading && !isError && instances.length > 0 && (
        <div className="space-y-2">
          {instances.map((instance) => (
            <button
              key={instance.id}
              onClick={() => onSelectInstance(instance)}
              className="w-full text-left bg-white rounded-lg border border-secondary-200 hover:border-primary-300 hover:shadow-sm transition-all px-4 py-3 cursor-pointer"
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3 flex-1 min-w-0">
                  <Badge variant={statusBadgeVariant(instance.status)}>
                    {statusLabel(instance.status)}
                  </Badge>
                  <span className="text-sm font-medium text-secondary-900 truncate">
                    {instance.workflow_id}
                  </span>
                  <span className="text-xs text-secondary-400">
                    Schritt {instance.current_step_index + 1}
                  </span>
                </div>
                <div className="flex items-center gap-3 text-xs text-secondary-400 flex-shrink-0">
                  {instance.initiated_by && (
                    <span>von {instance.initiated_by}</span>
                  )}
                  {instance.created_at && (
                    <span>
                      {new Date(instance.created_at).toLocaleString()}
                    </span>
                  )}
                  {instance.timeout_at && (
                    <span className="text-warning-600">
                      Timeout: {new Date(instance.timeout_at).toLocaleString()}
                    </span>
                  )}
                  <ChevronRight className="h-4 w-4 text-secondary-300" />
                </div>
              </div>
            </button>
          ))}
        </div>
      )}

      {/* Pagination */}
      {!isLoading && !isError && totalPages > 1 && (
        <div className="flex items-center justify-center gap-2 pt-4">
          <button
            onClick={() => setPage((p) => Math.max(1, p - 1))}
            disabled={page <= 1}
            className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50"
          >
            Zurueck
          </button>
          <span className="text-sm text-secondary-600">
            Seite {page} / {totalPages}
          </span>
          <button
            onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
            disabled={page >= totalPages}
            className="px-3 py-1.5 text-sm rounded-md border border-secondary-300 hover:bg-secondary-50 disabled:opacity-50"
          >
            Weiter
          </button>
        </div>
      )}
    </div>
  );
}