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

function MyConnectionsList() {
  const fetchConnections = useFetchConnections();

  const loadConnections = async () => {
    try {
      const result = await fetchConnections({ page: 1, limit: 10 });

      console.log(`Found ${result.pagination.totalCount} connections`);
      result.connections.forEach(connection => {
        console.log(`Connected to ${connection.user.username} since ${connection.connectedAt}`);
      });
    } catch (error) {
      console.error("Failed to fetch connections:", error.message);
    }
  };

  return <button onClick={loadConnections}>Load My Connections</button>;
}

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

function ConnectionsManager() {
  const fetchConnections = useFetchConnections();
  const [connectionsData, setConnectionsData] = useState<ConnectionsResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

  const loadConnections = async (page: number) => {
    setLoading(true);
    try {
      const result = await fetchConnections({ page, limit: 15 });
      setConnectionsData(result);
    } catch (error) {
      console.error("Failed to load connections:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadConnections(currentPage);
  }, [currentPage]);

  if (loading && !connectionsData) {
    return <div>Loading connections...</div>;
  }

  return (
    <div className="connections-manager">
      <h2>My Connections ({connectionsData?.pagination.totalCount || 0})</h2>

      <div className="connections-grid">
        {connectionsData?.connections.map(connection => (
          <div key={connection.id} className="connection-card">
            <div className="user-info">
              <h4>{connection.user.displayName || connection.user.username}</h4>
              <p>@{connection.user.username}</p>
            </div>

            <div className="connection-meta">
              <small>
                Connected: {new Date(connection.connectedAt).toLocaleDateString()}
              </small>
            </div>
          </div>
        ))}
      </div>

      {connectionsData && connectionsData.pagination.totalPages > 1 && (
        <div className="pagination">
          <button
            disabled={!connectionsData.pagination.hasPreviousPage || loading}
            onClick={() => setCurrentPage(prev => prev - 1)}
          >
            Previous
          </button>

          <span>
            Page {connectionsData.pagination.currentPage} of {connectionsData.pagination.totalPages}
          </span>

          <button
            disabled={!connectionsData.pagination.hasNextPage || loading}
            onClick={() => setCurrentPage(prev => prev + 1)}
          >
            Next
          </button>
        </div>
      )}
    </div>
  );
}

import { useFetchConnections } from "@replyke/react-js";
import { useState, useMemo } from "react";

function SearchableConnectionsList() {
  const fetchConnections = useFetchConnections();
  const [allConnections, setAllConnections] = useState<any[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [loading, setLoading] = useState(false);

  // Load all connections (you might want to implement server-side search instead)
  const loadAllConnections = async () => {
    setLoading(true);
    try {
      let allConnections: any[] = [];
      let currentPage = 1;
      let hasMore = true;

      while (hasMore) {
        const result = await fetchConnections({ page: currentPage, limit: 50 });
        allConnections = [...allConnections, ...result.connections];
        hasMore = result.pagination.hasNextPage;
        currentPage++;
      }

      setAllConnections(allConnections);
    } catch (error) {
      console.error("Failed to load connections:", error);
    } finally {
      setLoading(false);
    }
  };

  // Filter connections based on search term
  const filteredConnections = useMemo(() => {
    if (!searchTerm.trim()) return allConnections;

    return allConnections.filter(connection =>
      connection.user.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
      connection.user.displayName?.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [allConnections, searchTerm]);

  const handleLoadConnections = async () => {
    await loadAllConnections();
  };

  return (
    <div className="searchable-connections">
      <div className="connections-header">
        <button onClick={handleLoadConnections} disabled={loading}>
          {loading ? "Loading..." : "Load Connections"}
        </button>

        {allConnections.length > 0 && (
          <div className="search-box">
            <input
              type="text"
              placeholder="Search connections..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        )}
      </div>

      <div className="connections-results">
        <p>{filteredConnections.length} connections found</p>

        <div className="connections-list">
          {filteredConnections.map(connection => (
            <div key={connection.id} className="connection-item">
              <div className="user-details">
                <h4>{connection.user.displayName || connection.user.username}</h4>
                <p>@{connection.user.username}</p>
                <small>
                  Connected {new Date(connection.connectedAt).toLocaleDateString()}
                </small>
              </div>
            </div>
          ))}
        </div>

        {filteredConnections.length === 0 && allConnections.length > 0 && (
          <div className="no-results">
            No connections found matching "{searchTerm}"
          </div>
        )}
      </div>
    </div>
  );
}

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

interface NetworkNode {
  id: string;
  username: string;
  displayName?: string;
  connectedAt: string;
}

function ConnectionsNetwork() {
  const fetchConnections = useFetchConnections();
  const [networkNodes, setNetworkNodes] = useState<NetworkNode[]>([]);
  const [loading, setLoading] = useState(false);
  const [stats, setStats] = useState({
    totalConnections: 0,
    recentConnections: 0,
    averageConnectionsPerMonth: 0
  });

  const loadNetworkData = async () => {
    setLoading(true);
    try {
      // Load all connections for network visualization
      let allConnections: any[] = [];
      let currentPage = 1;
      let hasMore = true;

      while (hasMore) {
        const result = await fetchConnections({ page: currentPage, limit: 100 });
        allConnections = [...allConnections, ...result.connections];
        hasMore = result.pagination.hasNextPage;
        currentPage++;
      }

      // Transform to network nodes
      const nodes: NetworkNode[] = allConnections.map(connection => ({
        id: connection.user.id,
        username: connection.user.username,
        displayName: connection.user.displayName,
        connectedAt: connection.connectedAt
      }));

      setNetworkNodes(nodes);

      // Calculate stats
      const now = new Date();
      const thirtyDaysAgo = new Date(now.getTime() - (30 * 24 * 60 * 60 * 1000));
      const recentConnections = nodes.filter(node =>
        new Date(node.connectedAt) >= thirtyDaysAgo
      ).length;

      const oldestConnection = nodes.reduce((oldest, node) =>
        new Date(node.connectedAt) < new Date(oldest.connectedAt) ? node : oldest
      , nodes[0]);

      let averageConnectionsPerMonth = 0;
      if (oldestConnection) {
        const monthsDiff = (now.getTime() - new Date(oldestConnection.connectedAt).getTime())
          / (1000 * 60 * 60 * 24 * 30);
        averageConnectionsPerMonth = nodes.length / monthsDiff;
      }

      setStats({
        totalConnections: nodes.length,
        recentConnections,
        averageConnectionsPerMonth: Math.round(averageConnectionsPerMonth * 100) / 100
      });

    } catch (error) {
      console.error("Failed to load network data:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadNetworkData();
  }, []);

  return (
    <div className="connections-network">
      <div className="network-stats">
        <h3>Your Network Overview</h3>
        <div className="stats-grid">
          <div className="stat-item">
            <span className="stat-number">{stats.totalConnections}</span>
            <span className="stat-label">Total Connections</span>
          </div>
          <div className="stat-item">
            <span className="stat-number">{stats.recentConnections}</span>
            <span className="stat-label">New This Month</span>
          </div>
          <div className="stat-item">
            <span className="stat-number">{stats.averageConnectionsPerMonth}</span>
            <span className="stat-label">Avg/Month</span>
          </div>
        </div>
      </div>

      {loading ? (
        <div>Loading network data...</div>
      ) : (
        <div className="network-visualization">
          <h4>Your Connections</h4>
          <div className="nodes-grid">
            {networkNodes.map(node => (
              <div key={node.id} className="network-node">
                <strong>{node.displayName || node.username}</strong>
                <small>@{node.username}</small>
                <small>{new Date(node.connectedAt).toLocaleDateString()}</small>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}