import { ArrowLeft, ArrowRight } from "lucide-react";
import React, { useCallback, useMemo, useState } from "react";

import {
  debounce,
  NETWORK_LOGO_URLS,
  NETWORK_NAME_TO_CHAIN_ID,
} from "../utils";
import { lookupUser } from "../../services/addressValidation";
import Spinner from "../ui/Spinner";
import { useWallet } from "../WalletProvider";
import { Token } from "../TokenSelector";

function RecipientSearch({
  recipient,
  setRecipient,
  handleBackFromRecipient,
  setStep,
  sendToUser,
  setSendToUser,
  setAddressToSend,
  walletSdkKey,
  selectedToken,
}: {
  recipient: string;
  setRecipient: (recipient: string) => void;
  handleBackFromRecipient: () => void;
  setStep: (step: "recipient" | "amount") => void;
  sendToUser: {
    status: boolean;
    username?: string;
    walletAddress?: string;
    solanaWalletAddress?: string;
    ensName?: string;
    sns?: string;
    bitcoinWalletAddress?: string;
  };
  setSendToUser: (user: {
    status: boolean;
    username?: string;
    walletAddress?: string;
    solanaWalletAddress?: string;
    ensName?: string;
    sns?: string;
    bitcoinWalletAddress?: string;
  }) => void;
  setAddressToSend: (address: string) => void;
  walletSdkKey: string;
  selectedToken: Token;
}) {
  const [usernamecheckLoading, setUsernamecheckLoading] = useState(false);

  const isValidUser =
    sendToUser.status &&
    selectedToken.chainIds?.some((chain) => {
      // Check for Solana
      if (
        chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Solana &&
        sendToUser.solanaWalletAddress
      ) {
        return true;
      }
      // Check for Bitcoin
      if (
        chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Bitcoin &&
        sendToUser.bitcoinWalletAddress
      ) {
        return true;
      }
      // Check for Ethereum and other EVM chains
      if (
        chain.chainId !== NETWORK_NAME_TO_CHAIN_ID.Solana &&
        chain.chainId !== NETWORK_NAME_TO_CHAIN_ID.Bitcoin &&
        sendToUser.walletAddress
      ) {
        return true;
      }
      return false;
    });

  const handleUsernameCheck = useCallback(
    async (value: string) => {
      if (value && value.length > 0) {
        setUsernamecheckLoading(true);
        console.log("Validating input:", value);

        const res = await lookupUser(value, walletSdkKey);
        console.log("Lookup result:", res);

        if (res?.status === 1) {
          console.log("Setting valid user data:", res);
          setSendToUser({
            status: true,
            username: res.username,
            walletAddress: res.walletAddress,
            solanaWalletAddress: res.solanaWalletAddress,
            ensName: res.ens,
            sns: res.sns,
            bitcoinWalletAddress: res.bitcoinWalletAddress,
          });
          setAddressToSend(
            selectedToken?.chainIds?.find(
              (chain) => chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Bitcoin
            )
              ? res.bitcoinWalletAddress
              : selectedToken?.chainIds?.find(
                  (chain) => chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Solana
                )
              ? res.solanaWalletAddress
              : res.walletAddress
          );
        } else {
          console.log("No valid user data found");
          setSendToUser({
            status: false,
            username: undefined,
            walletAddress: undefined,
            solanaWalletAddress: undefined,
            ensName: undefined,
            sns: undefined,
            bitcoinWalletAddress: undefined,
          });
          setAddressToSend(value);
        }
        setUsernamecheckLoading(false);
      }
    },
    [walletSdkKey]
  );

  // Create memoized debounced function
  const debouncedUsernameCheck = useMemo(
    () => debounce(handleUsernameCheck, 500),
    [handleUsernameCheck]
  );

  return (
    <div
      style={{
        width: "100%",
        background: "#fff",
        borderRadius: 20,
        fontFamily: "Inter, sans-serif",
        display: "flex",
        flexDirection: "column",
        height: "550px",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          marginBottom: 18,
          position: "relative",
        }}
      >
        <button
          onClick={handleBackFromRecipient}
          style={{
            background: "none",
            border: "none",
            fontSize: 22,
            color: "#222",
            cursor: "pointer",
            position: "absolute",
            left: 0,
            fontFamily: "Inter, sans-serif",
          }}
        >
          <ArrowLeft style={{ width: 24, height: 24, color: "#717680" }} />
        </button>
        <span
          style={{
            fontWeight: 600,
            fontSize: 20,
            width: "100%",
            textAlign: "center",
          }}
        >
          Sending token to
        </span>
      </div>
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 8 }}>
          Enter recipient details
        </div>
        <div
          style={{
            position: "relative",
            display: "flex",
            alignItems: "center",
            gap: 0,
            marginBottom: 8,
          }}
        >
          <input
            type="text"
            placeholder="Enter public address / ENS / username"
            value={recipient}
            onChange={(e) => {
              setRecipient(e.target.value);
              debouncedUsernameCheck(e.target.value);
            }}
            style={{
              flex: 1,
              width: "100%",
              padding: recipient ? "10px 48px 10px 14px" : "10px 14px",
              borderRadius: 10,
              border: "1px solid #E0E0E0",
              backgroundColor: "white",
              fontSize: 16,
              color: "#222",
              outline: "none",
            }}
          />
          {recipient && isValidUser && !usernamecheckLoading && (
            <button
              style={{
                position: "absolute",
                right: 8,
                top: "50%",
                transform: "translateY(-50%)",
                background: "#4F46E5",
                border: "none",
                borderRadius: "50%",
                width: 36,
                height: 36,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                cursor: "pointer",
                padding: 0,
              }}
              onClick={() => setStep("amount")}
            >
              <ArrowRight style={{ width: 18, height: 18, color: "#fff" }} />
            </button>
          )}
          {usernamecheckLoading && (
            <div
              style={{
                position: "absolute",
                right: 8,
                top: "50%",
                transform: "translateY(-50%)",
                width: 36,
                height: 36,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Spinner />
            </div>
          )}
        </div>
      </div>
      {sendToUser.status && (
        <div style={{ marginBottom: 24 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              padding: "14px 0",
              borderBottom: "1px solid #E9EAEB",
              cursor: isValidUser ? "pointer" : "default",
              transition: "background 0.1s",
            }}
            onClick={() => {
              if (isValidUser) {
                setStep("amount");
              }
            }}
          >
            <div
              style={{
                width: 52,
                height: 52,
                borderRadius: 26,
                background: "#E9EAEB",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontWeight: 600,
                fontSize: 22,
                color: "#717680",
                marginRight: 12,
              }}
            >
              {sendToUser.username
                ?.split(" ")
                .map((n) => n[0])
                .join("") ||
                sendToUser.ensName?.split(".")[0].slice(0, 1) ||
                sendToUser.sns?.split(".")[0].slice(0, 1) ||
                "?"}
            </div>
            <div style={{ flexGrow: 1 }}>
              <div style={{ fontWeight: 600 }}>
                {(() => {
                  const displayName =
                    sendToUser.username ||
                    sendToUser.ensName ||
                    sendToUser.sns ||
                    "";
                  return displayName.length > 10
                    ? displayName.slice(0, 10) + "..."
                    : displayName;
                })()}
              </div>
              <div style={{ color: "#535862", fontSize: 14 }}>
                {sendToUser.walletAddress &&
                  selectedToken.chainIds?.find(
                    (chain) =>
                      chain.chainId !== NETWORK_NAME_TO_CHAIN_ID.Solana &&
                      chain.chainId !== NETWORK_NAME_TO_CHAIN_ID.Bitcoin
                  ) && (
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 4,
                        marginTop: 4,
                      }}
                    >
                      <img
                        src={
                          NETWORK_LOGO_URLS[NETWORK_NAME_TO_CHAIN_ID.Ethereum]
                        }
                        alt="logo"
                        style={{ width: 16, height: 16 }}
                      />
                      {sendToUser.walletAddress.slice(0, 18)}...
                      {sendToUser.walletAddress.slice(-4)}
                    </div>
                  )}
                {sendToUser.solanaWalletAddress &&
                  selectedToken.chainIds?.find(
                    (chain) => chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Solana
                  ) && (
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 4,
                        marginTop: 4,
                      }}
                    >
                      <img
                        src={NETWORK_LOGO_URLS[NETWORK_NAME_TO_CHAIN_ID.Solana]}
                        alt="logo"
                        style={{ width: 16, height: 16 }}
                      />
                      {sendToUser.solanaWalletAddress.slice(0, 18)}...
                      {sendToUser.solanaWalletAddress.slice(-4)}
                    </div>
                  )}
                {sendToUser.bitcoinWalletAddress &&
                  selectedToken.chainIds?.find(
                    (chain) =>
                      chain.chainId === NETWORK_NAME_TO_CHAIN_ID.Bitcoin
                  ) && (
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        gap: 4,
                        marginTop: 4,
                      }}
                    >
                      <img
                        src={
                          NETWORK_LOGO_URLS[NETWORK_NAME_TO_CHAIN_ID.Bitcoin]
                        }
                        alt="logo"
                        style={{ width: 16, height: 16 }}
                      />
                      {sendToUser.bitcoinWalletAddress.slice(0, 18)}...
                      {sendToUser.bitcoinWalletAddress.slice(-4)}
                    </div>
                  )}
                {!sendToUser.walletAddress &&
                  !sendToUser.solanaWalletAddress && (
                    <div>
                      {recipient.toLowerCase().endsWith(".eth")
                        ? "ENS Name"
                        : recipient.startsWith("0x")
                        ? "Ethereum Wallet Address"
                        : "Solana Wallet Address"}
                    </div>
                  )}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* <div
            style={{
              fontWeight: 500,
              fontSize: 13,
              color: "#B4B4B6",
              margin: "0 0 8px 0",
            }}
          >
            Recents
          </div> */}
      <div
        style={{
          flex: 1,
          overflowY: "auto",
          maxHeight: "400px",
          paddingRight: 8,
          msOverflowStyle: "none" /* IE and Edge */,
          scrollbarWidth: "none" /* Firefox */,
          WebkitOverflowScrolling: "touch",
        }}
        className="hide-scrollbar"
      >
        {/* TODO: Implement actual recent recipients functionality */}
      </div>
    </div>
  );
}

export default RecipientSearch;