/**
 * AggregatedDataGrid Component
 * Displays aggregated tasks and events from multiple federated instances
 */

import type { FederatedTask, FederatedEvent } from "./types";
import { FederatedTaskCard } from "./FederatedTaskCard";
import { FederatedEventCard } from "./FederatedEventCard";

interface AggregatedDataGridProps {
  tasks: FederatedTask[];
  events: FederatedEvent[];
  isLoading?: boolean;
  error?: string;
  compact?: boolean;
  className?: string;
}

export function AggregatedDataGrid({
  tasks,
  events,
  isLoading = false,
  error,
  compact = false,
  className = "",
}: AggregatedDataGridProps): React.JSX.Element {
  // Loading state
  if (isLoading) {
    return (
      <div className={`flex items-center justify-center p-8 ${className}`}>
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Loading data from instances...</p>
        </div>
      </div>
    );
  }

  // Error state
  if (error) {
    return (
      <div className={`flex items-center justify-center p-8 ${className}`}>
        <div className="text-center">
          <span className="text-4xl mb-4 block">⚠️</span>
          <p className="text-gray-900 font-medium mb-2">Unable to load data</p>
          <p className="text-gray-600 text-sm">{error}</p>
        </div>
      </div>
    );
  }

  // Empty state
  if (tasks.length === 0 && events.length === 0) {
    return (
      <div className={`flex items-center justify-center p-8 ${className}`}>
        <div className="text-center">
          <span className="text-4xl mb-4 block">📋</span>
          <p className="text-gray-900 font-medium mb-2">No data available</p>
          <p className="text-gray-600 text-sm">No data available from connected instances</p>
        </div>
      </div>
    );
  }

  return (
    <div className={`space-y-4 ${className}`}>
      {/* Tasks section */}
      {tasks.length > 0 && (
        <div>
          <h3 className="text-lg font-medium text-gray-900 mb-3">Tasks ({tasks.length})</h3>
          <div className="space-y-2">
            {tasks.map((federatedTask) => (
              <FederatedTaskCard
                key={`task-${federatedTask.task.id}-${federatedTask.provenance.instanceId}`}
                federatedTask={federatedTask}
                compact={compact}
              />
            ))}
          </div>
        </div>
      )}

      {/* Events section */}
      {events.length > 0 && (
        <div>
          <h3 className="text-lg font-medium text-gray-900 mb-3">Events ({events.length})</h3>
          <div className="space-y-2">
            {events.map((federatedEvent) => (
              <FederatedEventCard
                key={`event-${federatedEvent.event.id}-${federatedEvent.provenance.instanceId}`}
                federatedEvent={federatedEvent}
                compact={compact}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
