import React, { useEffect, useState, useRef, useCallback } from "react";
import {
  ArrowUp,
  ArrowLeftRight,
  ShoppingCart,
  ArrowDownToLine,
  SquareChartGantt,
  HandCoins,
} 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";
import { ThemeMode, themeStyles } from "../../types/theme";
import { truncateTokenSymbol } from "../utils";

/**
 * 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, theme: ThemeMode) {
  const currentTheme = themeStyles[theme];
  switch (status) {
    case OverallStatus.COMPLETED:
      return {
        color: currentTheme.successText,
        background: currentTheme.successBg,
      };
    case OverallStatus.PENDING:
      return {
        color: currentTheme.warningText,
        background: currentTheme.warningBg,
      };
    case OverallStatus.FAILED:
      return {
        color: currentTheme.errorText,
        background: currentTheme.errorBg,
      };
    default:
      return {
        color: currentTheme.textSecondary,
        background: currentTheme.surfaceActive,
      };
  }
}

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} />;
    case MultiTransactionType.ACTION:
      return <HandCoins 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() || ""
      )} ${truncateTokenSymbol((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() || ""
      )}  ${truncateTokenSymbol(input?.tokenSymbol || "")} → ${formatAmount(
        item.metadata.totalOutputAmount?.toString() || ""
      )} ${truncateTokenSymbol(output?.tokenSymbol || "")}`;
    case MultiTransactionType.INCOMING:
      const tokenReceive = item.inputTokens[firstChain]?.[0];

      return `${formatAmount(
        item.metadata.totalInputAmount?.toString() || ""
      )} ${truncateTokenSymbol((tokenReceive as any)?.tokenSymbol || "")} `;
    case MultiTransactionType.ACTION:
      return `${formatAmount(
        item.metadata.totalInputAmount?.toString() || ""
      )} ${truncateTokenSymbol(
        (item.inputTokens[firstChain]?.[0] 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
    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";
  }

  if (item.transactionType === MultiTransactionType.ACTION) {
    return (
      (item?.actionTitle && item?.actionTitle.length > 20
        ? item?.actionTitle.slice(0, 20) + "..."
        : item?.actionTitle) || "Action"
    );
  }

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

interface ActivityProps {
  sdkKey: string;
  theme?: ThemeMode;
}

function Activity({ sdkKey, theme = "light" }: ActivityProps) {
  const { setActivity, setShowActivity } = useWallet();
  const [activityData, setActivityData] = useState<IMultiTransaction[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [hasNextPage, setHasNextPage] = useState(false);
  const [totalPages, setTotalPages] = useState(0);
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  const currentTheme = themeStyles[theme];

  const scrollbarHideStyles = `
    .hide-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .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: ${currentTheme.surfaceHover};
    }
  `;

  const fetchActivity = useCallback(
    async (page: number, append: boolean = false) => {
      if (append) {
        setIsLoadingMore(true);
      } else {
        setIsLoading(true);
      }

      try {
        const username = (window as any).__walletSDKInstance.getUsername();
        const apiKey = sdkKey;
        const response = await getMultiTransactionsList(username, apiKey, page);

        if (response?.success) {
          if (append) {
            // Append new data to existing data
            setActivityData((prev) => [...prev, ...response.data]);
          } else {
            // Replace data for initial load
            setActivityData(response.data);
          }

          // Update pagination info
          if (response.pagination) {
            setCurrentPage(response.pagination.currentPage);
            setHasNextPage(response.pagination.hasNextPage);
            setTotalPages(response.pagination.totalPages);
          }
        }
      } catch (error) {
        console.error("Error fetching activity:", error);
      } finally {
        if (append) {
          setIsLoadingMore(false);
        } else {
          setIsLoading(false);
        }
      }
    },
    [sdkKey]
  );

  // Handle scroll to load more data
  const handleScroll = useCallback(() => {
    const container = scrollContainerRef.current;
    if (!container || isLoadingMore || !hasNextPage) return;

    const { scrollTop, scrollHeight, clientHeight } = container;
    // Load more when user scrolls to within 100px of bottom
    if (scrollHeight - scrollTop - clientHeight < 100) {
      fetchActivity(currentPage + 1, true);
    }
  }, [currentPage, hasNextPage, isLoadingMore, fetchActivity]);

  useEffect(() => {
    fetchActivity(1);
  }, [fetchActivity]);

  useEffect(() => {
    const container = scrollContainerRef.current;
    if (container) {
      container.addEventListener("scroll", handleScroll);
      return () => container.removeEventListener("scroll", handleScroll);
    }
  }, [handleScroll]);

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

  if (isLoading) {
    return (
      <div
        style={{
          height: 320,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",

          background: currentTheme.surface,
        }}
      >
        <Spinner theme={theme} />
      </div>
    );
  }

  if (!activityData.length) {
    return (
      <div
        style={{
          height: 320,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          color: currentTheme.textSecondary,
          fontSize: 14,
          gap: 8,
          background: currentTheme.surface,
        }}
      >
        <SquareChartGantt size={20} />
        No activity found
      </div>
    );
  }

  return (
    <>
      <style>{scrollbarHideStyles}</style>
      <div
        ref={scrollContainerRef}
        className="hide-scrollbar"
        style={{
          height: 320,
          overflowY: "auto",
          marginBottom: 24,
          background: currentTheme.surface,
        }}
      >
        {activityData.map((item: IMultiTransaction) => {
          const statusStyle = getStatusColor(item.overallStatus, theme);
          const timeAgo = formatTimeAgo(item.metadata.lastUpdatedTimestamp);

          return (
            <div
              key={item.multiTransactionId}
              style={{
                borderBottom: `1px solid ${currentTheme.border}`,
                paddingBottom: 2,
                marginBottom: 2,
              }}
            >
              <div
                className="activity-item"
                onClick={() => handleActivityClick(item)}
              >
                {/* Icon */}
                <div
                  style={{
                    width: "40px",
                    height: "40px",
                    background: currentTheme.surfaceActive,
                    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: currentTheme.text,
                        fontSize: 16,
                        fontWeight: 600,
                        textTransform: "capitalize",
                      }}
                    >
                      {getTransactionDisplayName(item)}
                    </div>
                    <div
                      style={{
                        padding: "2px 8px",
                        borderRadius: "16px",
                        fontSize: "12px",
                        fontWeight: 500,
                        ...statusStyle,
                        textTransform: "capitalize",
                      }}
                    >
                      {item.overallStatus.toLowerCase()}
                    </div>
                  </div>
                  <div
                    style={{
                      display: "flex",
                      justifyContent: "space-between",
                      alignItems: "center",
                      color: currentTheme.textSecondary,
                      fontSize: "12px",
                    }}
                  >
                    <div>{getTransactionSubtitle(item)}</div>
                    <div>{timeAgo}</div>
                  </div>
                </div>

                {/* Arrow */}
                <div style={{ color: currentTheme.textSecondary }}>
                  <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>
          );
        })}

        {/* Loading more indicator */}
        {isLoadingMore && (
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              padding: "16px",
              color: currentTheme.textSecondary,
              fontSize: "14px",
            }}
          >
            <Spinner theme={theme} />
            {/* <span style={{ marginLeft: "8px" }}>Loading more...</span> */}
          </div>
        )}
      </div>
    </>
  );
}

export default Activity;