/**
 * ConnectionList Component
 * Displays a list of federation connections grouped by status
 */

import { FederationConnectionStatus, type ConnectionDetails } from "@/lib/api/federation";
import { ConnectionCard } from "./ConnectionCard";

interface ConnectionListProps {
  connections: ConnectionDetails[] | null;
  isLoading: boolean;
  onAccept?: (connectionId: string) => void;
  onReject?: (connectionId: string) => void;
  onDisconnect?: (connectionId: string) => void;
  compact?: boolean;
}

export function ConnectionList({
  connections,
  isLoading,
  onAccept,
  onReject,
  onDisconnect,
  compact = false,
}: ConnectionListProps): React.JSX.Element {
  if (isLoading) {
    return (
      <div className="flex justify-center items-center p-8">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
        <span className="ml-3 text-gray-600">Loading connections...</span>
      </div>
    );
  }

  // Handle null/undefined connections gracefully
  if (!connections || connections.length === 0) {
    return (
      <div className="text-center p-8 text-gray-500">
        <p className="text-lg">No federation connections</p>
        <p className="text-sm mt-2">Ready to connect to remote instances</p>
      </div>
    );
  }

  // Group connections by status
  const groupedConnections: Record<FederationConnectionStatus, ConnectionDetails[]> = {
    [FederationConnectionStatus.PENDING]: [],
    [FederationConnectionStatus.ACTIVE]: [],
    [FederationConnectionStatus.DISCONNECTED]: [],
    [FederationConnectionStatus.REJECTED]: [],
  };

  connections.forEach((connection) => {
    groupedConnections[connection.status].push(connection);
  });

  // Define group order with PDA-friendly labels
  const groups: {
    status: FederationConnectionStatus;
    label: string;
    description: string;
  }[] = [
    {
      status: FederationConnectionStatus.ACTIVE,
      label: "Active",
      description: "Currently connected instances",
    },
    {
      status: FederationConnectionStatus.PENDING,
      label: "Pending",
      description: "Connections awaiting acceptance",
    },
    {
      status: FederationConnectionStatus.DISCONNECTED,
      label: "Disconnected",
      description: "Previously connected instances",
    },
    {
      status: FederationConnectionStatus.REJECTED,
      label: "Rejected",
      description: "Connection requests that were declined",
    },
  ];

  return (
    <div className="space-y-8">
      {groups.map((group) => {
        const groupConnections = groupedConnections[group.status];
        if (groupConnections.length === 0) {
          return null;
        }

        return (
          <section key={group.status}>
            <div className="mb-4">
              <h2 className="text-lg font-semibold text-gray-700">{group.label}</h2>
              <p className="text-sm text-gray-500 mt-1">{group.description}</p>
            </div>
            <div className="space-y-3">
              {groupConnections.map((connection) => (
                <ConnectionCard
                  key={connection.id}
                  connection={connection}
                  {...(onAccept && { onAccept })}
                  {...(onReject && { onReject })}
                  {...(onDisconnect && { onDisconnect })}
                  compact={compact}
                />
              ))}
            </div>
          </section>
        );
      })}
    </div>
  );
}
