import React, { useState, useEffect } from "react";
import {
  ArrowLeft,
  ArrowRightLeft,
  ChevronDown,
  Copy,
  Check,
  ExternalLink,
} from "lucide-react";
import { MultiTransactionType, OverallStatus } from "../../types/activity";
import { getNetworkName, NETWORK_LOGO_URLS } from "../utils";
import { getTransactionInfo } from "../../services/services";
import Spinner from "../ui/Spinner";
import { TokenLogo } from "../ui/TokenLogo";

interface TransactionDetail {
  txnURL?: string;
  error?: string;
  status: OverallStatus;
  requestId?: string;
  _id?: string;
}

interface ActivityDetailsProps {
  activity?: any;
  activityId?: string;
  apiKey: string;
  onBack: () => void;
}

function getStatusColor(status: OverallStatus) {
  switch (status) {
    case OverallStatus.COMPLETED:
      return { color: "#027A48", background: "#ECFDF3" };
    case OverallStatus.PENDING:
      return { color: "#B54708", background: "#FFFAEB" };
    case OverallStatus.FAILED:
      return { color: "#B42318", background: "#FEF3F2" };
    default:
      return { color: "#344054", background: "#F2F4F7" };
  }
}

function formatDate(timestamp: number) {
  return new Date(timestamp).toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
    hour: "numeric",
    minute: "2-digit",
    hour12: true,
  });
}

function formatAmount(amount: string) {
  const num = parseFloat(amount);
  const decimalPlaces = amount.split(".")[1]?.length || 0;
  return decimalPlaces > 6 ? num.toFixed(6) : amount;
}

function truncateAddress(address: string) {
  if (!address) return "";
  return address.length > 12
    ? `${address.slice(0, 6)}...${address.slice(-4)}`
    : address;
}

function extractAndTruncateTxHash(txnURL: string) {
  if (!txnURL) return "";
  // Extract hash from URL (after /tx/)
  const hashMatch = txnURL.match(/\/tx\/([^\/\?#]+)/);
  if (hashMatch && hashMatch[1]) {
    const hash = hashMatch[1];
    // Truncate hash: first 6 chars + ... + last 4 chars
    return `${hash.slice(0, 6)}...${hash.slice(-4)}`;
  }
  return "";
}

export default function ActivityDetails({
  activity: initialActivity,
  activityId,
  apiKey,
  onBack,
}: ActivityDetailsProps) {
  const [activity, setActivity] = useState<any | undefined>(initialActivity);
  const [loading, setLoading] = useState(!initialActivity);
  const [error, setError] = useState<string | null>(null);
  const [expandedTxIds, setExpandedTxIds] = useState<string[]>([]);
  const [copiedFrom, setCopiedFrom] = useState(false);
  const [copiedTo, setCopiedTo] = useState(false);
  const [timeLeft, setTimeLeft] = useState<number | null>(null);
  const POLLING_INTERVAL = 5000; // 5 seconds polling interval

  const fetchActivityDetails = async (isPolling = false) => {
    if (!activityId) return;

    try {
      // Only show loading on initial fetch, not during polling
      if (!isPolling) {
        setLoading(true);
      }

      const response = await getTransactionInfo(activityId, apiKey);
      console.log("Response: ", { response });

      if (!response) {
        throw new Error("Failed to fetch activity details");
      }

      const activityResponse = response as unknown as any;
      setActivity(activityResponse);

      // Calculate time left if estimatedTime exists and status is pending
      if (
        activityResponse.estimatedTime &&
        activityResponse.overallStatus === "PENDING"
      ) {
        const currentTime = Math.floor(Date.now() / 1000);
        const timeLeftSeconds = activityResponse.estimatedTime - currentTime;
        setTimeLeft(timeLeftSeconds > 0 ? timeLeftSeconds : null);
      } else {
        setTimeLeft(null);
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "An error occurred");
    } finally {
      if (!isPolling) {
        setLoading(false);
      }
    }
  };

  useEffect(() => {
    fetchActivityDetails(false); // Initial fetch
  }, [activityId, apiKey]);

  // Effect for handling initial countdown based on estimatedTime
  useEffect(() => {
    if (
      !timeLeft ||
      !activity?.multiTransactionId ||
      activity.overallStatus !== "PENDING"
    ) {
      return;
    }

    console.log("Setting up initial countdown timer for:", {
      timeLeft: timeLeft,
      formattedTimeLeft: `${Math.floor(timeLeft / 60)}m ${timeLeft % 60}s`,
      multiTransactionId: activity.multiTransactionId,
      status: activity.overallStatus,
    });

    const timer = setTimeout(() => {
      fetchActivityDetails(true); // Polling fetch
    }, timeLeft * 1000);

    return () => {
      clearTimeout(timer);
    };
  }, [timeLeft, activity?.multiTransactionId, activity?.overallStatus]);

  // Effect for continuous polling after estimated time until completion
  useEffect(() => {
    // Only start polling if we have an activity and it's not completed
    if (
      !activity?.multiTransactionId ||
      activity.overallStatus === "COMPLETED"
    ) {
      return;
    }

    const pollingInterval = setInterval(() => {
      fetchActivityDetails(true); // Polling fetch
    }, POLLING_INTERVAL);

    return () => {
      console.log("Cleaning up polling interval");
      clearInterval(pollingInterval);
    };
  }, [activity?.multiTransactionId, activity?.overallStatus]);

  if (loading) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "400px",
          padding: "24px",
          fontFamily: "Inter, sans-serif",
          flexDirection: "column",
        }}
      >
        <Spinner />
        <div style={{ marginTop: "16px" }}>Loading transaction details...</div>
      </div>
    );
  }

  if (error) {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          gap: "16px",
          padding: "24px",
          fontFamily: "Inter, sans-serif",
        }}
      >
        <div style={{ color: "#B42318" }}>{error}</div>
        <button
          onClick={onBack}
          style={{
            background: "none",
            border: "1px solid #D0D5DD",
            borderRadius: "8px",
            padding: "8px 16px",
            cursor: "pointer",
          }}
        >
          Go Back
        </button>
      </div>
    );
  }

  if (!activity) {
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          padding: "24px",
          fontFamily: "Inter, sans-serif",
        }}
      >
        No activity details found
      </div>
    );
  }

  const toggleTxDetails = (txId: string) => {
    setExpandedTxIds((prev) =>
      prev.includes(txId) ? prev.filter((id) => id !== txId) : [...prev, txId]
    );
  };

  const handleCopy = async (text: string, isSender: boolean) => {
    await navigator.clipboard.writeText(text);
    if (isSender) {
      setCopiedFrom(true);
      setTimeout(() => setCopiedFrom(false), 2000);
    } else {
      setCopiedTo(true);
      setTimeout(() => setCopiedTo(false), 2000);
    }
  };

  const firstSourceChain = activity.sourceChains[0]?.toString();
  const firstDestChain = activity.destinationChains[0]?.toString();
  const inputToken =
    activity.transactionType === MultiTransactionType.SWAP
      ? activity.metadata.tokenDetails.inputToken
      : activity.metadata.tokenDetails.token;
  const outputToken = activity.metadata.tokenDetails.outputToken;
  const statusStyle = getStatusColor(activity.overallStatus);

  console.log("Activity: ", activity);

  return (
    <div
      className="activity-details"
      style={{
        fontFamily: "Inter, sans-serif",
        width: "100%",
        height: "100%",
      }}
    >
      {/* Header */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          marginBottom: "24px",
          justifyContent: "space-between",
        }}
      >
        <button
          onClick={onBack}
          style={{
            background: "none",
            border: "none",
            cursor: "pointer",
            padding: "8px",
            marginRight: "8px",
            outline: "none",
          }}
        >
          <ArrowLeft size={24} color="#717680" />
        </button>
        <h1 style={{ margin: 0, fontSize: "20px", fontWeight: 600 }}>
          {activity.transactionType === MultiTransactionType.SWAP
            ? "Swap details"
            : "Transfer details"}
        </h1>
        <div style={{ width: "24px" }}></div>
      </div>

      {/* Swap Information */}
      <div
        style={{
          background: "#F4F6FF",
          borderRadius: "16px",
          padding: "24px",
          marginBottom: "12px",
        }}
      >
        {activity.transactionType === MultiTransactionType.SWAP ? (
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              gap: "12px",
            }}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                width: "90%",
              }}
            >
              <div
                style={{ marginBottom: "8px", width: "35px", height: "35px" }}
              >
                <TokenLogo
                  logoURI={inputToken?.logoURI}
                  symbol={inputToken?.tokenSymbol}
                  name={inputToken?.tokenName}
                  size={35}
                />
              </div>
              <div
                style={{
                  color: "#535862",
                  marginBottom: "8px",
                  fontSize: "12px",
                }}
              >
                You Pay
              </div>
              <div
                style={{
                  fontSize: "20px",
                  fontWeight: 600,
                  textAlign: "center",
                }}
              >
                {formatAmount(activity.metadata?.totalInputAmount?.toString())}{" "}
                {inputToken?.tokenSymbol}
              </div>
            </div>
            <div
              style={{
                width: "58px",
                height: "28px",
                background: "white",
                borderRadius: "6px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                border: "1px solid #D5D7DA",
              }}
            >
              <ArrowRightLeft size={16} />
            </div>
            <div
              style={{
                textAlign: "center",
                width: "90%",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
              }}
            >
              <div
                style={{ marginBottom: "8px", width: "35px", height: "35px" }}
              >
                <TokenLogo
                  logoURI={outputToken?.logoURI}
                  symbol={outputToken?.tokenSymbol}
                  name={outputToken?.tokenName}
                  size={35}
                />
              </div>
              <div
                style={{
                  color: "#535862",
                  marginBottom: "8px",
                  fontSize: "12px",
                }}
              >
                You Receive
              </div>
              <div style={{ fontSize: "20px", fontWeight: 600 }}>
                {formatAmount(activity.metadata?.totalOutputAmount?.toString())}{" "}
                {outputToken?.tokenSymbol}
              </div>
            </div>
          </div>
        ) : (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "12px",
              alignItems: "center",
            }}
          >
            <TokenLogo
              logoURI={activity.metadata.tokenDetails.token?.logoURI}
              symbol={activity.metadata.tokenDetails.token?.tokenSymbol}
              name={activity.metadata.tokenDetails.token?.tokenName}
              size={35}
            />
            <div style={{ fontSize: "32px", fontWeight: 600 }}>
              {formatAmount(activity.metadata?.totalInputAmount?.toString())}{" "}
              {activity.metadata?.tokenDetails?.token?.tokenSymbol}
            </div>
          </div>
        )}
        <div
          style={{
            textAlign: "center",
            marginTop: "16px",
          }}
        >
          <span
            style={{
              padding: "2px 8px",
              borderRadius: "16px",
              fontSize: "12px",
              ...statusStyle,
              fontWeight: 500,
              textTransform: "capitalize",
            }}
          >
            {activity.overallStatus.toLowerCase()}
          </span>
        </div>
      </div>

      {activity.transactionType === MultiTransactionType.TRANSFER && (
        <div style={{ margin: "24px 0" }}>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              background: "#F9FAFB",
              padding: "24px",
              borderRadius: "12px",
            }}
          >
            <div style={{ flex: 1, textAlign: "center" }}>
              <div
                style={{
                  color: "#667085",
                  fontSize: "16px",
                  marginBottom: "8px",
                }}
              >
                From
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "8px",
                  color: "#414651",
                  fontSize: "16px",
                  fontWeight: 500,
                  justifyContent: "center",
                }}
              >
                {truncateAddress(
                  activity.sender.username ||
                    activity.sender.ensName ||
                    activity.sender.sns ||
                    activity.sender.walletAddress ||
                    activity.sender.solanaWalletAddress
                )}
                <button
                  onClick={() =>
                    handleCopy(
                      activity.sender.username ||
                        activity.sender.ensName ||
                        activity.sender.sns ||
                        activity.sender.walletAddress ||
                        activity.sender.solanaWalletAddress,
                      true
                    )
                  }
                  style={{
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  {copiedFrom ? (
                    <Check size={16} color="#027A48" />
                  ) : (
                    <Copy size={16} color="#667085" />
                  )}
                </button>
              </div>
            </div>

            <div
              style={{ width: "1px", background: "#EAECF0", margin: "0 24px" }}
            />

            <div style={{ flex: 1, textAlign: "center" }}>
              <div
                style={{
                  color: "#667085",
                  fontSize: "16px",
                  marginBottom: "8px",
                }}
              >
                Recipient
              </div>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "8px",
                  color: "#414651",
                  fontSize: "16px",
                  fontWeight: 500,
                  justifyContent: "center",
                }}
              >
                {truncateAddress(
                  activity.receivers[0].username ||
                    activity.receivers[0].ensName ||
                    activity.receivers[0].sns ||
                    activity.receivers[0].walletAddress ||
                    activity.receivers[0].solanaWalletAddress
                )}
                <button
                  onClick={() =>
                    handleCopy(
                      activity.receivers[0].username ||
                        activity.receivers[0].ensName ||
                        activity.receivers[0].sns ||
                        activity.receivers[0].walletAddress ||
                        activity.receivers[0].solanaWalletAddress,
                      false
                    )
                  }
                  style={{
                    background: "none",
                    border: "none",
                    padding: 0,
                    cursor: "pointer",
                    display: "flex",
                    alignItems: "center",
                  }}
                >
                  {copiedTo ? (
                    <Check size={16} color="#027A48" />
                  ) : (
                    <Copy size={16} color="#667085" />
                  )}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <div
        style={{
          margin: "24px 0px",
          msOverflowStyle: "none",
          scrollbarWidth: "none",
        }}
      >
        <span style={{ fontSize: "14px", fontWeight: 600 }}>
          Payment source networks
        </span>

        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "12px",
            border: "1px solid #3662E3",
            borderRadius: "12px",
            padding: "12px",
            background: "#EBF0FF",
            margin: "12px 0",
          }}
        >
          {/* Transaction Links */}
          {Object.entries(
            (activity.inputTransactions || activity.transactions) as Record<
              string,
              TransactionDetail
            >
          ).map(([chainId, txDetails]) => (
            <div
              key={chainId}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                flexDirection: "column",
                background: "white",
                borderRadius: "12px",
                border: "1px solid #D5D7DA",
                width: "100%",
              }}
            >
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  width: "100%",
                  padding: "12px",
                  cursor:
                    txDetails.status === "COMPLETED" ? "pointer" : "default",
                }}
                onClick={() => {
                  if (txDetails.status === "COMPLETED") {
                    toggleTxDetails(chainId);
                  }
                }}
              >
                <div
                  style={{
                    display: "flex",
                    gap: "12px",
                    alignItems: "center",
                  }}
                >
                  <div style={{ width: "44px", height: "44px" }}>
                    <img
                      src={NETWORK_LOGO_URLS[chainId]}
                      alt={
                        activity.metadata.tokenDetails.inputToken?.tokenSymbol
                      }
                      style={{
                        width: "100%",
                        height: "100%",
                        borderRadius: "10%",
                      }}
                    />
                  </div>
                  <div>
                    <div
                      style={{
                        fontWeight: 500,
                        fontSize: "16px",
                        color: "#414651",
                        marginBottom: "6px",
                      }}
                    >
                      {getNetworkName(chainId)}
                    </div>
                    <div style={{ color: "#535862", fontSize: "12px" }}>
                      {
                        activity.metadata.inputAmounts[chainId][0]
                          ?.amountFormatted
                      }{" "}
                      {activity.metadata.inputAmounts[chainId][0]?.tokenSymbol}
                    </div>
                  </div>
                </div>
                <div
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "4px",
                  }}
                >
                  <span
                    style={{
                      ...getStatusColor(txDetails?.status as OverallStatus),
                      fontSize: "12px",
                      fontWeight: 500,
                      padding: "2px 8px",
                      borderRadius: "16px",
                      display: "flex",
                      alignItems: "center",
                      gap: "4px",
                      textTransform: "capitalize",
                    }}
                  >
                    {txDetails?.status?.toLowerCase()}
                  </span>
                  {txDetails.status === "COMPLETED" && (
                    <ChevronDown
                      size={16}
                      color="#667085"
                      style={{
                        transform: expandedTxIds.includes(chainId)
                          ? "rotate(180deg)"
                          : "rotate(0deg)",
                        transition: "transform 0.2s ease-in-out",
                      }}
                    />
                  )}
                </div>
              </div>

              {/* Transaction Details Section - Only shown for COMPLETED transactions */}
              {txDetails.status === "COMPLETED" &&
                expandedTxIds.includes(chainId) &&
                txDetails.txnURL && (
                  <div
                    style={{
                      width: "100%",
                      padding: "12px",
                      borderTop: "1px solid #EAECF0",
                      display: "flex",
                      flexDirection: "column",
                      gap: "8px",
                    }}
                  >
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                      }}
                    >
                      <span style={{ color: "#667085", fontSize: "14px" }}>
                        {extractAndTruncateTxHash(txDetails.txnURL) ||
                          `Transaction `}
                      </span>
                      <a
                        href={txDetails.txnURL}
                        target="_blank"
                        rel="noopener noreferrer"
                        style={{
                          color: "#3662E3",
                          textDecoration: "none",
                          display: "flex",
                          alignItems: "center",
                          gap: "4px",
                          fontSize: "14px",
                        }}
                      >
                        View on {getNetworkName(chainId)}
                        <ExternalLink size={14} />
                      </a>
                    </div>
                  </div>
                )}
            </div>
          ))}
        </div>
        <div style={{ marginTop: "24px" }}>
          <span
            style={{ fontSize: "14px", fontWeight: 600, marginTop: "12px" }}
          >
            Payment destination networks
          </span>
        </div>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "12px",
            border: "1px solid #3662E3",
            borderRadius: "12px",
            padding: "12px",
            background: "#EBF0FF",
            margin: "12px 0",
          }}
        >
          {Object.entries(
            activity.outputTokens as Record<
              string,
              Array<{
                amount: string;
                amountFormatted: string;
                tokenAddress: string;
                tokenName: string;
                tokenSymbol: string;
                receiver: {
                  username: string;
                  walletAddress: string;
                  solana_program_wallet: string;
                  ens: string;
                };
              }>
            >
          ).map(([chainId, tokens]) => {
            const token = tokens[0]; // Since we know there's only one token per chain in destination
            // Handle both array (new) and object (old) structures
            const txData = activity.outputTransactions?.[chainId];
            const txDetailsList = Array.isArray(txData)
              ? txData
              : txData
              ? [txData]
              : [];
            return (
              <div
                key={chainId}
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  flexDirection: "column",
                  background: "white",
                  borderRadius: "12px",
                  border: "1px solid #D5D7DA",
                  width: "100%",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    width: "100%",
                    padding: "12px",
                    cursor:
                      activity.overallStatus === "COMPLETED"
                        ? "pointer"
                        : "default",
                  }}
                  onClick={() => {
                    if (activity.overallStatus === "COMPLETED") {
                      toggleTxDetails(chainId);
                    }
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      gap: "12px",
                      alignItems: "center",
                    }}
                  >
                    <div style={{ width: "44px", height: "44px" }}>
                      <img
                        src={NETWORK_LOGO_URLS[chainId]}
                        alt={
                          activity.metadata.tokenDetails.outputToken
                            ?.tokenSymbol
                        }
                        style={{
                          width: "100%",
                          height: "100%",
                          borderRadius: "10%",
                        }}
                      />
                    </div>
                    <div>
                      <div
                        style={{
                          fontWeight: 500,
                          fontSize: "16px",
                          color: "#414651",
                          marginBottom: "6px",
                        }}
                      >
                        {getNetworkName(chainId)}
                      </div>
                      <div style={{ color: "#535862", fontSize: "12px" }}>
                        {formatAmount(token.amountFormatted)}{" "}
                        {token?.tokenSymbol}
                      </div>
                    </div>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "4px",
                    }}
                  >
                    <span
                      style={{
                        ...getStatusColor(activity.overallStatus),
                        fontSize: "12px",
                        fontWeight: 500,
                        padding: "2px 8px",
                        borderRadius: "16px",
                        display: "flex",
                        alignItems: "center",
                        gap: "4px",
                        textTransform: "capitalize",
                      }}
                    >
                      {activity.overallStatus.toLowerCase()}
                    </span>
                    {activity.overallStatus === "COMPLETED" && (
                      <ChevronDown
                        size={16}
                        color="#667085"
                        style={{
                          transform: expandedTxIds.includes(chainId)
                            ? "rotate(180deg)"
                            : "rotate(0deg)",
                          transition: "transform 0.2s ease-in-out",
                        }}
                      />
                    )}
                  </div>
                </div>

                {/* Transaction Details Section - Only shown for COMPLETED transactions */}
                {activity.overallStatus === "COMPLETED" &&
                  expandedTxIds.includes(chainId) &&
                  txDetailsList.length > 0 && (
                    <div
                      style={{
                        width: "100%",
                        padding: "12px",
                        borderTop: "1px solid #EAECF0",
                        display: "flex",
                        flexDirection: "column",
                        gap: "8px",
                      }}
                    >
                      {txDetailsList.map((txDetail: any, index: number) => (
                        <div
                          key={txDetail._id || index}
                          style={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            padding: index > 0 ? "8px 0 0 0" : "0",
                            borderTop: index > 0 ? "1px solid #F2F4F7" : "none",
                          }}
                        >
                          <span style={{ color: "#667085", fontSize: "14px" }}>
                            {extractAndTruncateTxHash(txDetail.txnURL) ||
                              `Transaction ${index + 1}`}
                          </span>
                          <a
                            href={txDetail.txnURL}
                            target="_blank"
                            rel="noopener noreferrer"
                            style={{
                              color: "#3662E3",
                              textDecoration: "none",
                              display: "flex",
                              alignItems: "center",
                              gap: "4px",
                              fontSize: "14px",
                            }}
                          >
                            View on {getNetworkName(chainId)}
                            <ExternalLink size={14} />
                          </a>
                        </div>
                      ))}
                    </div>
                  )}
              </div>
            );
          })}
        </div>
        <div
          style={{
            background: "#F9F9F9",
            padding: "12px",
            borderRadius: "8px",
            display: "flex",
            flexDirection: "column",
            gap: "12px",
            marginBottom: "24px",
          }}
        >
          <div
            style={{
              display: "flex",
              gap: "12px",
              justifyContent: "space-between",
            }}
          >
            <div style={{ fontSize: "16px" }}>Date and Time</div>
            <div style={{ color: "#535862", fontSize: "16px" }}>
              {formatDate(activity.metadata.lastUpdatedTimestamp)}
            </div>
          </div>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "16px 0",
              borderTop: "1px solid #EAECF0",
            }}
          >
            <span style={{ fontSize: "16px", fontWeight: 600 }}>Total</span>
            <span
              style={{ fontSize: "16px", fontWeight: 400, color: "#535862" }}
            >
              {formatAmount(activity.metadata.totalInputAmount.toString())}{" "}
              {inputToken?.tokenSymbol}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}