import React, { useEffect, useState } from "react";
import {
  ArrowUp,
  ArrowLeftRight,
  ShoppingCart,
  ArrowDownToLine,
} from "lucide-react";

import { getMultiTransactionsList } from "../../services/services";
import Spinner from "../ui/Spinner";
import {
  MultiTransactionType,
  OverallStatus,
  IMultiTransaction,
} from "../../types/activity";
import { formatAmount } from "../utils";
import { useWallet } from "../WalletProvider";

/**
 * Transaction status enum for individual transactions
 */
export enum TransactionStatus {
  PENDING = "PENDING",
  COMPLETED = "COMPLETED",
  FAILED = "FAILED",
}

/**
 * Receiver interface for transaction recipients
 */
export interface User {
  username?: string;
  walletAddress?: string;
  solana_program_wallet?: string;
  ens?: string;
}

/**
 * Token details interface
 */
export interface TokenDetail {
  amount: string;
  amountFormatted: string;
  tokenAddress: string;
  tokenName: string;
  tokenSymbol: string;
  receiver?: User;
}

/**
 * Interface for individual transaction details
 */
export interface TransactionDetail {
  txnURL: string;
  status: TransactionStatus;
}

/**
 * Token Details
 */
export interface TokenURI {
  tokenName: string;
  tokenSymbol: string;
  tokenAddress: string;
  decimals: number;
  logoURI: string;
}

/**
 * Interface for transaction metadata
 */
export interface TransactionMetadata {
  senderDetails: User;
  receiverDetails: User[];
  inputAmounts: Map<string, TokenDetail[]>;
  destinationAmounts: Map<string, TokenDetail[]>;
  status: OverallStatus;
  lastUpdatedTimestamp: number;
  transactions: Map<string, Map<string, TransactionDetail>>;
  tokenDetails: {
    inputToken: TokenURI;
    outputToken: TokenURI;
  };
  metadata: any;
}

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 getTransactionIcon(item: IMultiTransaction) {
  // Get current username
  const currentUsername = (window as any).__walletSDKInstance.getUsername();

  // Check if it's a TRANSFER and current user is receiver
  if (item.transactionType === MultiTransactionType.TRANSFER) {
    const isCurrentUserReceiver = item.receivers?.some(
      (receiver: User) => receiver && receiver.username === currentUsername
    );

    if (isCurrentUserReceiver) {
      return <ArrowDownToLine size={20} />;
    }

    return <ArrowUp size={20} />;
  }

  switch (item.transactionType) {
    case MultiTransactionType.SWAP:
      return <ArrowLeftRight size={20} />;
    case MultiTransactionType.INCOMING:
      return <ArrowDownToLine size={20} />;
    case MultiTransactionType.CUSTOM:
      return <ShoppingCart size={20} />;
    default:
      return <ArrowUp size={20} />;
  }
}

function formatTimeAgo(timestamp: number) {
  const seconds = Math.floor((Date.now() - timestamp) / 1000);
  const minutes = Math.floor(seconds / 60);
  const hours = Math.floor(minutes / 60);
  const days = Math.floor(hours / 24);

  if (days > 0) return `${days}d ago`;
  if (hours > 0) return `${hours}h ago`;
  if (minutes > 0) return `${minutes}m ago`;
  return `${seconds}s ago`;
}

function getTransactionSubtitle(item: IMultiTransaction): string {
  const firstChain = item.sourceChains[0]?.toString();
  const destChain = item.destinationChains[0]?.toString();

  switch (item.transactionType) {
    case MultiTransactionType.TRANSFER:
      const token = item.inputTokens[firstChain]?.[0];

      return `${formatAmount(
        item.metadata.totalInputAmount?.toString() || ""
      )} ${(token as any)?.tokenSymbol || ""}`;
    case MultiTransactionType.SWAP:
      const input = item.inputTokens[firstChain]?.[0];
      const output = item.outputTokens[destChain]?.[0];
      return `${formatAmount(
        item.metadata.totalInputAmount?.toString() || ""
      )}  ${input?.tokenSymbol || ""} → ${formatAmount(
        item.metadata.totalOutputAmount?.toString() || ""
      )} ${output?.tokenSymbol || ""}`;
    case MultiTransactionType.INCOMING:
      const tokenReceive = item.inputTokens[firstChain]?.[0];

      return `${formatAmount(
        item.metadata.totalInputAmount?.toString() || ""
      )} ${(tokenReceive as any)?.tokenSymbol || ""}`;
    default:
      return "";
  }
}

function getTransactionDisplayName(item: IMultiTransaction): string {
  // Get current username
  const currentUsername = (window as any).__walletSDKInstance.getUsername();

  // Check if it's a TRANSFER and if current user is the receiver
  if (item.transactionType === MultiTransactionType.TRANSFER) {
    // Check if any receiver has the current user's username
    console.log(item.receivers, ">>>>>>>>>>>>> item");
    const isCurrentUserReceiver = item.receivers?.some(
      (receiver: User) => receiver && receiver.username === currentUsername
    );

    if (isCurrentUserReceiver) {
      return "Receive";
    }
  }

  // For INCOMING transactions, always show as "Receive"
  if (item.transactionType === MultiTransactionType.INCOMING) {
    return "Receive";
  }

  // For all other cases, return the transaction type in lowercase
  return item.transactionType.toLowerCase();
}

const scrollbarHideStyles = `
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
  .activity-item {
    display: flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 2px;
    padding-right: 2px;
    gap: 12px;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.2s ease;
  }
  .activity-item:hover {
    background-color: #EFF8FF;
  }
`;

function Activity({ sdkKey }: { sdkKey: string }) {
  const { setActivity, setShowActivity } = useWallet();
  const [activityData, setActivityData] = useState<IMultiTransaction[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchActivity = async () => {
      setIsLoading(true);
      try {
        const username = (window as any).__walletSDKInstance.getUsername();
        const apiKey = sdkKey;
        const response = await getMultiTransactionsList(username, apiKey);
        if (response?.success) {
          setActivityData(response.data);
        }
      } catch (error) {
        console.error("Error fetching activity:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchActivity();
  }, [sdkKey]);

  const handleActivityClick = (item: IMultiTransaction) => {
    setActivity(item);
    setShowActivity(true);
  };

  if (isLoading) {
    return (
      <div
        style={{
          height: 320,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontFamily: "Inter, sans-serif",
        }}
      >
        <Spinner />
      </div>
    );
  }

  if (!activityData.length) {
    return (
      <div
        style={{
          height: 320,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "#667085",
          fontSize: 14,
          fontFamily: "Inter, sans-serif",
        }}
      >
        No activity found
      </div>
    );
  }

  return (
    <>
      <style>{scrollbarHideStyles}</style>
      <div
        className="hide-scrollbar"
        style={{
          fontFamily: "Inter, sans-serif",
          height: 320,
          overflowY: "auto",
          marginBottom: 24,
        }}
      >
        {activityData.map((item: IMultiTransaction) => {
          const statusStyle = getStatusColor(item.overallStatus);
          const timeAgo = formatTimeAgo(item.metadata.lastUpdatedTimestamp);

          return (
            <div
              key={item.multiTransactionId}
              style={{
                borderBottom: "1px solid #EAECF0",
                paddingBottom: 2,
                marginBottom: 2,
              }}
            >
              <div
                className="activity-item"
                onClick={() => handleActivityClick(item)}
              >
                {/* Icon */}
                <div
                  style={{
                    width: "40px",
                    height: "40px",
                    background: "#F9FAFB",
                    borderRadius: "8px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  {getTransactionIcon(item)}
                </div>

                {/* Content */}
                <div style={{ flex: 1 }}>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      marginBottom: "4px",
                    }}
                  >
                    <div
                      style={{
                        color: "#414651",
                        fontSize: 16,
                        fontWeight: 600,
                        textTransform: "capitalize",
                      }}
                    >
                      {getTransactionDisplayName(item)}
                    </div>
                    <div
                      style={{
                        padding: "2px 8px",
                        borderRadius: "16px",
                        fontSize: "12px",
                        fontWeight: 500,
                        ...statusStyle,
                      }}
                    >
                      {item.overallStatus}
                    </div>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      color: "#667085",
                      fontSize: "12px",
                    }}
                  >
                    <div>{getTransactionSubtitle(item)}</div>
                    <div>{timeAgo}</div>
                  </div>
                </div>

                {/* Arrow */}
                <div style={{ color: "#D0D5DD" }}>
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6 12L10 8L6 4"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
}

export default Activity;