import { useFetchConnectionStatus } from "@replyke/react-js";

function ConnectionStatusChecker({ targetUserId }: { targetUserId: string }) {
  const fetchConnectionStatus = useFetchConnectionStatus();

  const checkStatus = async () => {
    try {
      const status = await fetchConnectionStatus({ userId: targetUserId });
      
      switch (status.status) {
        case 'none':
          console.log("No connection exists");
          break;
        case 'connected':
          console.log(`Connected since ${status.connectedAt}`);
          break;
        case 'pending':
          console.log(`${status.type} request pending since ${status.createdAt}`);
          break;
        case 'declined':
          console.log(`Connection was declined`);
          break;
      }
    } catch (error) {
      console.error("Failed to fetch connection status:", error.message);
    }
  };

  return <button onClick={checkStatus}>Check Connection Status</button>;
}

import { useFetchConnectionStatus } from "@replyke/react-js";
import { useState, useEffect } from "react";

function ConnectionStatusIndicator({
  userId,
  username
}: {
  userId: string;
  username: string;
}) {
  const fetchConnectionStatus = useFetchConnectionStatus();
  const [status, setStatus] = useState<any>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const loadStatus = async () => {
      setLoading(true);
      try {
        const result = await fetchConnectionStatus({ userId });
        setStatus(result);
      } catch (error) {
        console.error("Failed to load connection status:", error);
      } finally {
        setLoading(false);
      }
    };

    loadStatus();
  }, [userId, fetchConnectionStatus]);

  const getStatusDisplay = () => {
    if (loading) return { text: "Loading...", className: "loading" };
    if (!status) return { text: "Unknown", className: "unknown" };

    switch (status.status) {
      case 'none':
        return { text: "Not Connected", className: "none" };
      case 'connected':
        return {
          text: `Connected ${new Date(status.connectedAt).toLocaleDateString()}`,
          className: "connected"
        };
      case 'pending':
        if (status.type === 'sent') {
          return { text: "Request Sent", className: "pending-sent" };
        } else {
          return { text: "Pending Request", className: "pending-received" };
        }
      case 'declined':
        if (status.type === 'sent') {
          return { text: "Request Declined", className: "declined-sent" };
        } else {
          return { text: "Request Declined", className: "declined-received" };
        }
      default:
        return { text: "Unknown", className: "unknown" };
    }
  };

  const display = getStatusDisplay();

  return (
    <div className={`connection-status ${display.className}`}>
      <span className="username">{username}</span>
      <span className="status">{display.text}</span>
    </div>
  );
}

import { useFetchConnectionStatus } from "@replyke/react-js";
import { useState, useEffect } from "react";

function ConnectionActions({
  userId,
  username,
  onActionComplete
}: {
  userId: string;
  username: string;
  onActionComplete?: () => void;
}) {
  const fetchConnectionStatus = useFetchConnectionStatus();
  const [connectionStatus, setConnectionStatus] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  const refreshStatus = async () => {
    try {
      const result = await fetchConnectionStatus({ userId });
      setConnectionStatus(result);
    } catch (error) {
      console.error("Failed to refresh connection status:", error);
    }
  };

  useEffect(() => {
    const loadStatus = async () => {
      setLoading(true);
      await refreshStatus();
      setLoading(false);
    };

    loadStatus();
  }, [userId]);

  const renderActionButton = () => {
    if (loading) {
      return <button disabled>Loading...</button>;
    }

    if (!connectionStatus) {
      return <button disabled>Unable to load status</button>;
    }

    switch (connectionStatus.status) {
      case 'none':
        return (
          <button 
            onClick={() => {
              // Call useRequestConnection hook here
              console.log("Send connection request");
              onActionComplete?.();
            }}
            className="connect-btn"
          >
            Connect
          </button>
        );

      case 'connected':
        return (
          <button 
            onClick={() => {
              // Call useRemoveConnection hook here
              console.log("Remove connection");
              onActionComplete?.();
            }}
            className="disconnect-btn"
          >
            Disconnect
          </button>
        );

      case 'pending':
        if (connectionStatus.type === 'sent') {
          return (
            <button 
              onClick={() => {
                // Call useRemoveConnection to withdraw request
                console.log("Withdraw request");
                onActionComplete?.();
              }}
              className="withdraw-btn"
            >
              Withdraw Request
            </button>
          );
        } else {
          return (
            <div className="pending-actions">
              <button 
                onClick={() => {
                  // Call useAcceptConnection hook
                  console.log("Accept request");
                  onActionComplete?.();
                }}
                className="accept-btn"
              >
                Accept
              </button>
              <button 
                onClick={() => {
                  // Call useDeclineConnection hook
                  console.log("Decline request");
                  onActionComplete?.();
                }}
                className="decline-btn"
              >
                Decline
              </button>
            </div>
          );
        }

      case 'declined':
        if (connectionStatus.type === 'received') {
          // You declined their request - show option to send new request
          return (
            <button 
              onClick={() => {
                // Call useRequestConnection hook
                console.log("Send connection request");
                onActionComplete?.();
              }}
              className="connect-btn"
            >
              Send Request
            </button>
          );
        } else {
          // They declined your request
          return (
            <button disabled className="declined-btn">
              Request Declined
            </button>
          );
        }

      default:
        return <button disabled>Unknown Status</button>;
    }
  };

  return (
    <div className="connection-actions">
      <div className="user-info">
        <h4>{username}</h4>
      </div>
      <div className="actions">
        {renderActionButton()}
      </div>
    </div>
  );
}