"use client";

/**
 * Federation Connections Page
 * Manage connections to remote Mosaic Stack instances
 */

import { useState, useEffect } from "react";
import { ConnectionList } from "@/components/federation/ConnectionList";
import { InitiateConnectionDialog } from "@/components/federation/InitiateConnectionDialog";
import { ComingSoon } from "@/components/ui/ComingSoon";
import {
  getMockConnections,
  FederationConnectionStatus,
  type ConnectionDetails,
} from "@/lib/api/federation";

// TODO: Replace with real API calls when backend is integrated
// import {
//   fetchConnections,
//   initiateConnection,
//   acceptConnection,
//   rejectConnection,
//   disconnectConnection,
// } from "@/lib/api/federation";

// Check if we're in development mode
const isDevelopment = process.env.NODE_ENV === "development";

/**
 * Federation Connections Page - Development Only
 * Shows mock data in development, Coming Soon in production
 */
function ConnectionsPageContent(): React.JSX.Element {
  const [connections, setConnections] = useState<ConnectionDetails[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [showDialog, setShowDialog] = useState(false);
  const [dialogLoading, setDialogLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [dialogError, setDialogError] = useState<string | null>(null);

  // Load connections on mount
  useEffect(() => {
    void loadConnections();
  }, []);

  const loadConnections = async (): Promise<void> => {
    setIsLoading(true);
    setError(null);

    try {
      // TODO: Replace with real API call when backend is integrated
      // const data = await fetchConnections();

      // Using mock data for now (development only)
      await new Promise((resolve) => setTimeout(resolve, 500)); // Simulate network delay
      setConnections(getMockConnections());
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "Unable to load connections. Please try again."
      );
    } finally {
      setIsLoading(false);
    }
  };

  const handleInitiate = async (_url: string): Promise<void> => {
    setDialogLoading(true);
    setDialogError(null);

    try {
      // TODO: Replace with real API call
      // const newConnection = await initiateConnection({ remoteUrl: url });

      // Simulate API call for now
      await new Promise((resolve) => setTimeout(resolve, 1000));

      // Close dialog and reload connections
      setShowDialog(false);
      await loadConnections();
    } catch (err) {
      setDialogError(
        err instanceof Error
          ? err.message
          : "Unable to initiate connection. Please check the URL and try again."
      );
    } finally {
      setDialogLoading(false);
    }
  };

  const handleAccept = async (connectionId: string): Promise<void> => {
    setError(null);

    try {
      // TODO: Replace with real API call
      // await acceptConnection(connectionId);

      // Simulate API call and optimistic update
      await new Promise((resolve) => setTimeout(resolve, 500));

      setConnections((prev) =>
        prev.map((conn) =>
          conn.id === connectionId
            ? {
                ...conn,
                status: FederationConnectionStatus.ACTIVE,
                connectedAt: new Date().toISOString(),
              }
            : conn
        )
      );
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "Unable to accept connection. Please try again."
      );
    }
  };

  const handleReject = async (connectionId: string): Promise<void> => {
    setError(null);

    try {
      // TODO: Replace with real API call
      // await rejectConnection(connectionId, { reason: "User declined" });

      // Simulate API call and optimistic update
      await new Promise((resolve) => setTimeout(resolve, 500));

      setConnections((prev) =>
        prev.map((conn) =>
          conn.id === connectionId
            ? {
                ...conn,
                status: FederationConnectionStatus.REJECTED,
              }
            : conn
        )
      );
    } catch (err) {
      setError(
        err instanceof Error ? err.message : "Unable to reject connection. Please try again."
      );
    }
  };

  const handleDisconnect = async (connectionId: string): Promise<void> => {
    setError(null);

    try {
      // TODO: Replace with real API call
      // await disconnectConnection(connectionId);

      // Simulate API call and optimistic update
      await new Promise((resolve) => setTimeout(resolve, 500));

      setConnections((prev) =>
        prev.map((conn) =>
          conn.id === connectionId
            ? {
                ...conn,
                status: FederationConnectionStatus.DISCONNECTED,
                disconnectedAt: new Date().toISOString(),
              }
            : conn
        )
      );
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unable to disconnect. Please try again.");
    }
  };

  return (
    <main className="container mx-auto px-4 py-8">
      {/* Header */}
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Federation Connections</h1>
          <p className="text-gray-600 mt-2">Manage connections to other Mosaic Stack instances</p>
        </div>
        <button
          onClick={() => {
            setShowDialog(true);
          }}
          className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition-colors"
        >
          Connect to Instance
        </button>
      </div>

      {/* Error Banner */}
      {error && (
        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
          <p className="text-sm text-red-600">{error}</p>
          <button
            onClick={() => {
              setError(null);
            }}
            className="text-sm text-red-700 underline mt-2"
          >
            Dismiss
          </button>
        </div>
      )}

      {/* Connection List */}
      <ConnectionList
        connections={connections}
        isLoading={isLoading}
        onAccept={handleAccept}
        onReject={handleReject}
        onDisconnect={handleDisconnect}
      />

      {/* Initiate Connection Dialog */}
      <InitiateConnectionDialog
        open={showDialog}
        onInitiate={handleInitiate}
        onCancel={() => {
          setShowDialog(false);
          setDialogError(null);
        }}
        isLoading={dialogLoading}
        {...(dialogError && { error: dialogError })}
      />
    </main>
  );
}

/**
 * Federation Connections Page Entry Point
 * Shows development content or Coming Soon based on environment
 */
export default function ConnectionsPage(): React.JSX.Element {
  // In production, show Coming Soon placeholder
  if (!isDevelopment) {
    return (
      <ComingSoon
        feature="Federation Connections"
        description="Connect and manage relationships with other Mosaic Stack instances. Federation support is currently under development."
      />
    );
  }

  // In development, show the full page with mock data
  return <ConnectionsPageContent />;
}
