import React, { useState, useRef, useEffect } from "react";
import { Enclave } from "enclavemoney-web-experimental";
import { SwapToken } from "./Swap/SwapToken";
import { Dashboard } from "./Dashboard/Dashboard";
import TransferToken from "./Transfer/TransferToken";
import ActivityDetails from "./Activity/ActivityDetails";
import { WalletProvider, useWallet } from "./WalletProvider";
import { searchToken } from "../services/services";
import { signInWithGoogle, GoogleAuthResult } from "../services/firebase-auth";
import { CircleUserRound } from "lucide-react";
import MessagePopup from "./MessagePopup";
import Spinner from "./ui/Spinner";
import { SwapParams } from "../types/swap";
import { motion, AnimatePresence } from "framer-motion";

interface Token {
  symbol: string;
  name: string;
  icon: string;
  address: string;
  chainId: number;
  decimals: number;
  balance?: string;
  amount?: string;
  chainIds: Array<{
    chainId: number;
    address: string;
    balance?: string;
  }>;
  priceUsd?: number;
}

interface WalletModalProps {
  isOpen: boolean;
  onClose: () => void;
  walletSDKKey: string;
  swapParams?: SwapParams;
  showMessagePopup?: boolean;
  messageType?: "success" | "error";
  transactionId?: string;
}

const enclaveLogo =
  "https://storage.googleapis.com/enclave_assets/enclave_black.png";

const StartStep: React.FC<{ onNext: () => void }> = ({ onNext }) => (
  <>
    <div style={{ fontSize: 36, marginBottom: 10 }}>
      <img
        src="https://storage.googleapis.com/enclave_assets/passKey.png"
        alt="passkey Logo"
        style={{ width: 84 }}
      />
    </div>
    <div
      style={{
        color: "#4B5563",
        fontSize: 17,
        textAlign: "center",
        marginBottom: 10,
      }}
    >
      Authenticate securely using your device's passkey
    </div>
    <button
      style={{
        marginTop: 10,
        width: "100%",
        background: "#3662E3",
        color: "white",
        fontWeight: 600,
        fontSize: 18,
        border: "none",
        borderRadius: 10,
        padding: "14px 0",
        cursor: "pointer",
        boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
        transition: "background 0.2s",
      }}
      onClick={onNext}
    >
      Use my passkey
    </button>
  </>
);

const SignupStep: React.FC<{
  username: string;
  onUsernameChange: (v: string) => void;
  usernameStatus: null | "exists" | "not-exists";
  checking: boolean;
  error: string | null;
  actionLoading: boolean;
  onLogin: () => Promise<void>;
  onSignup: () => Promise<void>;
}> = ({
  username,
  onUsernameChange,
  usernameStatus,
  checking,
  error,
  actionLoading,
  onLogin,
  onSignup,
}) => (
  <div style={{ width: "100%" }}>
    <label
      style={{
        fontWeight: 600,
        fontSize: 14,
        marginBottom: 6,

        display: "block",
      }}
    >
      Choose a username
    </label>
    <input
      type="text"
      value={username}
      onChange={(e) => onUsernameChange(e.target.value)}
      placeholder="Enter username"
      style={{
        width: "100%",
        padding: "10px",
        borderRadius: 8,
        border: "1px solid #ccc",
        color: "#181D27",
        backgroundColor: "white",
        fontSize: 16,
        marginBottom: 8,
      }}
      disabled={actionLoading}
    />
    {checking && (
      <div style={{ color: "#888", fontSize: 14 }}>Searching username...</div>
    )}
    {usernameStatus === "exists" && (
      <div style={{ color: "green", fontSize: 14 }}>
        Username found. You can log in.
      </div>
    )}
    {usernameStatus === "not-exists" && (
      <div style={{ color: "blue", fontSize: 14 }}>
        Username is available. You can sign up.
      </div>
    )}
    {error && <div style={{ color: "red", fontSize: 14 }}>{error}</div>}
    <button
      style={{
        marginTop: 16,
        width: "100%",
        background: usernameStatus && !checking ? "#4664E9" : "#bfc8e6",
        color: "white",
        fontWeight: 600,
        fontSize: 16,
        border: "none",
        borderRadius: 10,
        padding: "14px 0",
        cursor: usernameStatus && !checking ? "pointer" : "not-allowed",
        boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
        transition: "background 0.2s",
      }}
      disabled={!usernameStatus || checking || actionLoading}
      onClick={async () => {
        if (usernameStatus === "exists") {
          await onLogin();
        } else if (usernameStatus === "not-exists") {
          await onSignup();
        }
      }}
    >
      {checking
        ? "Searching username..."
        : actionLoading
        ? usernameStatus === "exists"
          ? "Logging in..."
          : "Signing up..."
        : usernameStatus === "exists"
        ? "Login"
        : usernameStatus === "not-exists"
        ? "Sign Up"
        : "Continue"}
    </button>
  </div>
);

const PasskeyUsernameStep: React.FC<{
  username: string;
  actionLoading: boolean;
  error: string | null;
  onLogin: () => Promise<void>;
  onSwitchToManual: () => void;
}> = ({ username, actionLoading, error, onLogin, onSwitchToManual }) => (
  <div style={{ width: "100%" }}>
    <label
      style={{
        fontWeight: 600,
        fontSize: 14,
        marginBottom: 6,
        display: "block",
      }}
    >
      Continue with your passkey
    </label>

    {/* Pre-selected username row */}
    <div
      style={{
        display: "flex",
        alignItems: "center",
        padding: "12px",
        borderRadius: 8,
        border: "1px solid #e5e7eb",
        backgroundColor: "#f9fafb",
        marginBottom: 8,
        gap: 10,
      }}
    >
      <CircleUserRound color="#3662E3" size={24} />
      <span
        style={{
          flex: 1,
          fontSize: 16,
          color: "#374151",
          fontWeight: 500,
        }}
      >
        {username}
      </span>
      <button
        onClick={onSwitchToManual}
        style={{
          background: "none",
          border: "none",
          color: "#6b7280",
          fontSize: 12,
          cursor: "pointer",
          padding: "4px 8px",
          borderRadius: 4,
          textDecoration: "underline",
        }}
        disabled={actionLoading}
      >
        Use different username
      </button>
    </div>

    {error && (
      <div style={{ color: "red", fontSize: 14, marginBottom: 8 }}>{error}</div>
    )}

    <button
      style={{
        marginTop: 8,
        width: "100%",
        background: actionLoading ? "#bfc8e6" : "#4664E9",
        color: "white",
        fontWeight: 600,
        fontSize: 16,
        border: "none",
        borderRadius: 10,
        padding: "14px 0",
        cursor: actionLoading ? "not-allowed" : "pointer",
        boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
        transition: "background 0.2s",
      }}
      disabled={actionLoading}
      onClick={onLogin}
    >
      {actionLoading ? "Logging in..." : "Continue with passkey"}
    </button>
  </div>
);

// Add CSS styles at the top of the file
const styles = `
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    animation: fadeIn 0.3s ease-out;
  }

  .modal-content {
    background-color: white;
    max-height: 95vh;
    overflow-y: auto;
    padding: 32px 24px 24px 24px;
    border-radius: 20px;
    min-width: 480px;
    max-width: 440px;
    color: #222;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    position: relative;
    font-family: Inter, sans-serif;
    animation: slideIn 0.3s ease-out;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  @media (max-width: 768px) {
    .modal-overlay {
      align-items: flex-end;
    }

    .modal-content {
      width: 100%;
      min-width: 100%;
      max-height: 90vh;
      border-radius: 20px 20px 0 0;
      padding: 24px 16px;
      margin: 0;
    }
  }
`;

const WalletModalContent: React.FC<WalletModalProps> = ({
  isOpen,
  onClose,
  walletSDKKey,
  swapParams,
  showMessagePopup,
  messageType = "success",
  transactionId,
}) => {
  // Add style tag to document head
  useEffect(() => {
    const styleElement = document.createElement("style");
    styleElement.textContent = styles;
    document.head.appendChild(styleElement);
    return () => {
      document.head.removeChild(styleElement);
    };
  }, []);

  const [step, setStep] = useState<"start" | "passkey-username" | "signup">(
    "start"
  );
  const [username, setUsername] = useState("");
  const [checking, setChecking] = useState(false);
  const [usernameStatus, setUsernameStatus] = useState<
    null | "exists" | "not-exists"
  >(null);
  const [error, setError] = useState<string | null>(null);
  const [actionLoading, setActionLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [balance, setBalance] = useState<any>(null);
  const [showSwap, setShowSwap] = useState(false);
  const [showTransfer, setShowTransfer] = useState(false);
  const debounceRef = useRef<NodeJS.Timeout | null>(null);
  const {
    tokenOptions,
    tokensLoading,
    cryptoBalance,
    loading,
    refreshBalance,
    showActivity,
    setShowActivity,
    activity,
    setLoading,
  } = useWallet();
  const [combinedBalance, setCombinedBalance] = useState<any>(null);
  const [initialTokensLoading, setInitialTokensLoading] = useState(false);
  const [initialFromToken, setInitialFromToken] = useState<Token | undefined>(
    undefined
  );
  const [initialToToken, setInitialToToken] = useState<Token | undefined>(
    undefined
  );

  // New state for passkey username flow
  const [savedUsername, setSavedUsername] = useState<string | null>(null);
  const [showManualInput, setShowManualInput] = useState(false);

  const [showMessagePopupState, setShowMessagePopupState] = useState(false);
  const [messageTypeState, setMessageTypeState] = useState<"success" | "error">(
    "success"
  );
  const [transactionIdState, setTransactionIdState] = useState<string | null>(
    null
  );
  const [showActivityState, setShowActivityState] = useState(false);

  // Google authentication state
  const [googleAuthLoading, setGoogleAuthLoading] = useState(false);
  const [googleUser, setGoogleUser] = useState<any>(null);

  const enclave = new Enclave(walletSDKKey);

  useEffect(() => {
    if (isOpen) {
      // Check for existing session first
      const saved = localStorage.getItem("enclave_wallet_login");
      if (saved) {
        const parsed = JSON.parse(saved);
        setResult(parsed.result);
        setBalance(parsed.balance);
        if (parsed.googleUser) {
          setGoogleUser(parsed.googleUser);
        }
        // Trigger immediate balance refresh when modal opens with existing session
        refreshBalance();
        return;
      }

      // Check for previously used username
      const lastUsername = localStorage.getItem("enclave_last_username");
      if (lastUsername) {
        setSavedUsername(lastUsername);
        setUsername(lastUsername);
        setStep("passkey-username");
      } else {
        setStep("start");
      }
    }
  }, [isOpen, swapParams]);

  useEffect(() => {
    if (result) {
      localStorage.setItem(
        "enclave_wallet_login",
        JSON.stringify({ result, balance, googleUser })
      );
      setLoading(true);
    }
  }, [result, balance, googleUser]);

  console.log("cryptoBalance in wallet modal", cryptoBalance);

  useEffect(() => {
    if (swapParams) {
      setShowSwap(true);
    }

    if (cryptoBalance) {
      setCombinedBalance(cryptoBalance);
    }
  }, [result, swapParams, cryptoBalance]);

  useEffect(() => {
    const initializeTokens = async () => {
      setInitialTokensLoading(true);
      if (swapParams) {
        const fromToken = await getInitialFromToken();
        const toToken = await getInitialToToken();
        setInitialFromToken(fromToken);
        setInitialToToken(toToken);
        console.log("initialFromToken", fromToken);
        console.log("initialToToken", toToken);
        setInitialTokensLoading(false);
      }
    };
    if (swapParams && tokenOptions.length > 0) {
      initializeTokens();
    }
  }, [swapParams, tokenOptions, walletSDKKey]);

  useEffect(() => {
    if (isOpen) {
      // Check for transaction data in localStorage
      const transactionData = localStorage.getItem("enclave_transaction_data");
      if (transactionData) {
        const data = JSON.parse(transactionData);
        setTransactionIdState(data.transactionId || null);
        // Clear the data after reading
        localStorage.removeItem("enclave_transaction_data");
      }
    }
  }, [isOpen]);

  const handleUsernameChange = (value: string) => {
    setUsername(value);
    setUsernameStatus(null);
    setError(null);
    if (debounceRef.current) clearTimeout(debounceRef.current);
    if (!value) return;
    setChecking(true);
    debounceRef.current = setTimeout(() => {
      checkUserName(value);
    }, 500);
  };

  const checkUserName = async (username: string) => {
    setChecking(true);
    setError(null);
    try {
      const resp = await enclave.checkUserName(username);
      if (resp.value === true) {
        setUsernameStatus("exists");
      } else if (resp.value === false) {
        setUsernameStatus("not-exists");
      } else {
        setUsernameStatus(null);
      }
    } catch (e) {
      setError("Error checking username");
      setUsernameStatus(null);
    } finally {
      setChecking(false);
    }
  };

  const signInAccount = async () => {
    setActionLoading(true);
    setError(null);
    try {
      const resp = await enclave.getPasskeyAccountRegisteredOptions(username);
      let attResp;
      try {
        attResp = await enclave.startPasskeyAccountAuthentication(resp);
      } catch (error) {
        throw error;
      }
      const verificationResp =
        await enclave.submitPasskeyAccountRegisteredResponse({
          username,
          attResp,
        });

      if (verificationResp) {
        if (verificationResp.error) {
          setError(verificationResp.message);
        } else {
          setResult(verificationResp);

          // Save username for future passkey login
          localStorage.setItem("enclave_last_username", username);

          // Fetch balance after successful login
          const sdkInstance = (window as any).__walletSDKInstance;
          if (sdkInstance) {
            const balanceData = await sdkInstance.getUserCryptoBalance();
            setBalance(balanceData);
            sdkInstance.setUserSession({
              result: verificationResp,
              balance: balanceData,
            });
          }
        }
      } else {
        setError("Login failed");
      }
    } catch (e: any) {
      setError(e.message || "Login failed");
    } finally {
      setActionLoading(false);
    }
  };

  const createAccount = async () => {
    setActionLoading(true);
    setError(null);
    try {
      const resp = await enclave.getPasskeyAccountRegistrationOptions(username);
      let attResp;
      try {
        attResp = await enclave.startPasskeyAccountRegistration(resp);
      } catch (error) {
        throw error;
      }
      const verificationResp =
        await enclave.submitPasskeyAccountRegistrationResponse({
          username,
          attResp,
        });
      if (verificationResp) {
        if (verificationResp.error) {
          setError(verificationResp.message);
        } else {
          setResult(verificationResp);

          // Save username for future passkey login
          localStorage.setItem("enclave_last_username", username);

          // Fetch balance after successful signup
          const sdkInstance = (window as any).__walletSDKInstance;
          if (sdkInstance) {
            const balanceData = await sdkInstance.getUserCryptoBalance();
            setBalance(balanceData);
            sdkInstance.setUserSession({
              result: verificationResp,
              balance: balanceData,
            });
          }
        }
      } else {
        setError("Signup failed");
      }
    } catch (e: any) {
      setError(e.message || "Signup failed");
    } finally {
      setActionLoading(false);
    }
  };

  const handleLogout = async () => {
    // Sign out from Google if logged in via Google
    if (googleUser) {
      try {
        const { signOutUser } = await import("../services/firebase-auth");
        await signOutUser();
        setGoogleUser(null);
      } catch (error) {
        console.error("Error signing out from Google:", error);
      }
    }

    setResult(null);
    setUsername("");
    setUsernameStatus(null);
    setError(null);
    setStep("start");
    localStorage.removeItem("enclave_wallet_login");
    localStorage.removeItem("enclave_last_username"); // Clear saved username
  };

  // Handler for passkey username login
  const handlePasskeyLogin = async () => {
    if (savedUsername) {
      await signInAccount();
    }
  };

  // Handler to switch to manual username input
  const handleSwitchToManual = () => {
    setShowManualInput(true);
    setStep("signup");
    setUsername("");
    setUsernameStatus(null);
    setError(null);
  };

  // Handler for Google login
  const handleGoogleLogin = async () => {
    setGoogleAuthLoading(true);
    setError(null);

    try {
      const result: GoogleAuthResult = await signInWithGoogle(walletSDKKey);

      if (result.success && result.user) {
        setGoogleUser(result.user);
        console.log("Social account result:", result.user);

        // Use the social account response directly
        const googleResult = {
          username: result.user.socialLoginDetails.googleUser.email, // Store email as username in localStorage
          email: result.user.socialLoginDetails.googleUser.email,
          displayName: result.user.socialLoginDetails.googleUser.displayName,
          photoURL: result.user.socialLoginDetails.googleUser.photoURL,
          uid: result.user.socialLoginDetails.googleUser.uid,
          authMethod: "google",
          wallet: result.user.wallet,
          verified: result.user.verified,
          socialLoginDetails: result.user.socialLoginDetails,
          _id: result.user._id,
        };

        setResult(googleResult);

        // Fetch balance after successful Google login
        const sdkInstance = (window as any).__walletSDKInstance;
        if (sdkInstance) {
          const balanceData = await sdkInstance.getUserCryptoBalance();
          setBalance(balanceData);
          sdkInstance.setUserSession({
            result: googleResult,
            balance: balanceData,
          });
        }
      } else {
        setError(result.error || "Google login failed");
      }
    } catch (error: any) {
      console.error("Google login error:", error);
      setError(error.message || "Google login failed");
    } finally {
      setGoogleAuthLoading(false);
    }
  };

  const getMatchingTokenFromCryptoBalance = (
    tokenAddress: string,
    chainId: number
  ) => {
    return cryptoBalance?.data.find((token: any) =>
      token.chainIds.some(
        (chain: any) =>
          chain.address.toLowerCase() === tokenAddress.toLowerCase() &&
          chain.chainId === chainId
      )
    );
  };

  const formatTokenForSwap = (
    matchingToken: any,
    chainId: number
  ): Token | undefined => {
    if (!matchingToken) return undefined;

    const matchingChain = matchingToken.chainIds.find(
      (chain: any) => chain.chainId === chainId
    );

    if (!matchingChain) return undefined;

    return {
      symbol: matchingToken.symbol,
      name: matchingToken.name,
      icon: matchingToken.logoURI,
      address: matchingChain.address,
      chainId: matchingChain.chainId,
      chainIds: matchingToken.chainIds,
      decimals: matchingToken.decimals,
      balance: matchingChain.balance,
      amount: matchingToken.amount?.toString(),
    };
  };

  const getInitialFromToken = async (): Promise<any | undefined> => {
    if (!swapParams?.fromToken || !tokenOptions.length) return undefined;

    let matchingToken = tokenOptions.find((token) =>
      token.chainIds?.some(
        (chain) =>
          chain.address.toLowerCase() ===
            swapParams.fromToken.tokenAddress.toLowerCase() &&
          chain.chainId === swapParams.fromToken.chainId
      )
    );

    if (!matchingToken || !matchingToken.chainIds) {
      if (swapParams.fromToken.metadata) {
        matchingToken = {
          address: swapParams.fromToken.tokenAddress,
          symbol: swapParams.fromToken.metadata.tokenSymbol,
          name: swapParams.fromToken.metadata.tokenName,
          logoURI: swapParams.fromToken.metadata.logoURI,
          chainIds: swapParams.fromToken.metadata.chainIds.map((chain) => ({
            chainId: chain.chainId,
            address: chain.address,
          })),
          decimals: swapParams.fromToken.metadata.decimals,
          chainId: swapParams.fromToken.metadata.chainIds[0].chainId,
        };
      } else {
        const searchTokenResponse = await searchToken(
          swapParams.fromToken.tokenAddress,
          swapParams.fromToken.chainId,
          walletSDKKey
        );
        if (searchTokenResponse?.success && searchTokenResponse.data) {
          matchingToken = {
            address: searchTokenResponse.data.chainIds[0].address,
            symbol: searchTokenResponse.data.symbol,
            name: searchTokenResponse.data.name,
            logoURI: searchTokenResponse.data.logoURI,
            chainIds: searchTokenResponse.data.chainIds.map((chain) => ({
              chainId: parseInt(chain.chainId),
              address: chain.address,
            })),
            decimals: searchTokenResponse.data.decimals,
            chainId: parseInt(searchTokenResponse.data.chainIds[0].chainId),
          };
        }
      }

      if (!matchingToken) return undefined;

      return {
        symbol: matchingToken.symbol,
        name: matchingToken.name,
        icon: matchingToken.logoURI || matchingToken.icon || "",
        address: matchingToken.address,
        chainId: matchingToken.chainId,
        chainIds: matchingToken.chainIds,
        decimals: matchingToken.decimals,
        balance: matchingToken.balance || "0",
        amount: matchingToken.amount?.toString() || "0",
        priceUsd: matchingToken.price || 0,
      };
    }

    const matchingChain = matchingToken.chainIds?.find(
      (chain) => chain.chainId === swapParams.fromToken.chainId
    );

    if (!matchingChain) return undefined;

    return {
      symbol: matchingToken.symbol,
      name: matchingToken.name,
      icon: matchingToken.logoURI || matchingToken.icon || "",
      address: matchingChain.address,
      chainId: matchingChain.chainId,
      chainIds: matchingToken.chainIds,
      decimals: matchingToken.decimals,
      balance: matchingToken.balance || "0",
      amount: matchingToken.amount?.toString() || "0",
      priceUsd: matchingToken.price || 0,
    };
  };

  const getInitialToToken = async (): Promise<any | undefined> => {
    if (!swapParams?.toToken || !tokenOptions.length) return undefined;

    let matchingToken = tokenOptions.find((token) =>
      token.chainIds?.some(
        (chain) =>
          chain.address.toLowerCase() ===
            swapParams.toToken.tokenAddress.toLowerCase() &&
          chain.chainId === swapParams.toToken.chainId
      )
    );

    if (!matchingToken || !matchingToken.chainIds) {
      if (swapParams.toToken.metadata) {
        matchingToken = {
          address: swapParams.toToken.tokenAddress,
          symbol: swapParams.toToken.metadata.tokenSymbol,
          name: swapParams.toToken.metadata.tokenName,
          logoURI: swapParams.toToken.metadata.logoURI,
          chainIds: swapParams.toToken.metadata.chainIds.map((chain) => ({
            chainId: chain.chainId,
            address: chain.address,
          })),
          decimals: swapParams.toToken.metadata.decimals,
          chainId: swapParams.toToken.metadata.chainIds[0].chainId,
        };
      } else {
        const searchTokenResponse = await searchToken(
          swapParams.toToken.tokenAddress,
          swapParams.toToken.chainId,
          walletSDKKey
        );
        if (searchTokenResponse?.success && searchTokenResponse.data) {
          matchingToken = {
            address: searchTokenResponse.data.chainIds[0].address,
            symbol: searchTokenResponse.data.symbol,
            name: searchTokenResponse.data.name,
            logoURI: searchTokenResponse.data.logoURI,
            chainIds: searchTokenResponse.data.chainIds.map((chain) => ({
              chainId: parseInt(chain.chainId),
              address: chain.address,
            })),
            decimals: searchTokenResponse.data.decimals,
            chainId: parseInt(searchTokenResponse.data.chainIds[0].chainId),
          };
        }
      }
      if (!matchingToken) return undefined;

      return {
        symbol: matchingToken.symbol,
        name: matchingToken.name,
        icon: matchingToken.logoURI || matchingToken.icon || "",
        address: matchingToken.address,
        chainId: matchingToken.chainId,
        chainIds: matchingToken.chainIds,
        decimals: matchingToken.decimals,
        balance: matchingToken.balance || "0",
        amount: matchingToken.amount?.toString() || "0",
        priceUsd: matchingToken.price || 0,
      };
    }

    const matchingChain = matchingToken.chainIds?.find(
      (chain) => chain.chainId === swapParams.toToken.chainId
    );

    if (!matchingChain) return undefined;

    return {
      symbol: matchingToken.symbol,
      name: matchingToken.name,
      icon: matchingToken.logoURI || matchingToken.icon || "",
      address: matchingChain.address,
      chainId: matchingChain.chainId,
      chainIds: matchingToken.chainIds,
      decimals: matchingToken.decimals,
      balance: matchingToken.balance || "0",
      amount: matchingToken.amount?.toString() || "0",
      priceUsd: matchingToken.price || 0,
    };
  };

  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <motion.div
        className="modal-content hide-scrollbar"
        onClick={(e) => e.stopPropagation()}
        layout
        initial={{ opacity: 0, y: 100 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 100 }}
      >
        <AnimatePresence mode="wait">
          {transactionIdState ? (
            <motion.div
              key="activity-details"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1, height: "auto" }}
              transition={{ duration: 0.3, ease: "easeInOut" }}
            >
              <ActivityDetails
                activityId={transactionIdState}
                apiKey={walletSDKKey}
                onBack={() => {
                  setShowActivityState(false);
                  setTransactionIdState(null);
                }}
              />
            </motion.div>
          ) : (
            <motion.div
              key="main-content"
              initial={{ opacity: 0, height: 550 }}
              animate={{ opacity: 1, height: "auto" }}
              transition={{ duration: 0.2, ease: "easeInOut" }}
            >
              <>
                {!result && (
                  <div>
                    {/* Logo */}
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "center",
                        marginBottom: 16,
                      }}
                    >
                      <img
                        src={enclaveLogo}
                        alt="Enclave Logo"
                        style={{ height: 48, objectFit: "contain" }}
                      />
                    </div>
                    {/* Close button */}
                    <button
                      onClick={onClose}
                      style={{
                        position: "absolute",
                        top: 18,
                        right: 18,
                        background: "none",
                        border: "none",
                        fontSize: 22,
                        cursor: "pointer",
                        color: "#888",
                      }}
                      aria-label="Close"
                    >
                      ×
                    </button>
                  </div>
                )}
                {/* Title */}
                {!result && (
                  <h2
                    style={{
                      fontSize: 26,
                      fontWeight: 700,
                      margin: 0,
                      textAlign: "center",
                    }}
                  >
                    {"Log In or Sign Up"}
                  </h2>
                )}
                {/* Subtitle */}
                {!result && (
                  <p
                    style={{
                      color: "#6B7280",
                      fontSize: 16,
                      margin: "10px 0 24px 0",
                      textAlign: "center",
                    }}
                  >
                    {"Sign into your wallet with one click"}
                  </p>
                )}
                {/* Card */}

                {!result && (
                  <>
                    {step === "start" ||
                    (step === "passkey-username" && savedUsername) ? (
                      <div
                        style={{
                          width: "100%",
                          padding: "0 16px",
                          display: "flex",
                          flexDirection: "column",
                          alignItems: "center",
                          marginBottom: 24,
                        }}
                      >
                        <button
                          style={{
                            marginTop: 0,
                            width: "100%",
                            background: googleAuthLoading ? "#f3f4f6" : "white",
                            color: googleAuthLoading ? "#9ca3af" : "#000",
                            fontWeight: 600,
                            fontSize: 18,
                            borderRadius: 10,
                            padding: "14px 0",
                            cursor: googleAuthLoading
                              ? "not-allowed"
                              : "pointer",
                            boxShadow: "0 2px 8px rgba(70,100,233,0.10)",
                            transition: "background 0.2s",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "center",
                            border: "1px solid #E5E7EB",
                            gap: 10,
                          }}
                          onClick={handleGoogleLogin}
                          disabled={googleAuthLoading}
                        >
                          {googleAuthLoading ? (
                            <Spinner />
                          ) : (
                            <img
                              src="https://storage.googleapis.com/enclave_assets/google.svg"
                              alt="Google Logo"
                              style={{ width: 24 }}
                            />
                          )}
                          {googleAuthLoading
                            ? "Signing in..."
                            : "Continue with Google"}
                        </button>
                      </div>
                    ) : null}
                    <div
                      style={{
                        background: "#F6F8FE",
                        borderRadius: 16,
                        padding: "24px 16px 20px 16px",
                        flexDirection: "column",
                        alignItems: "center",
                        marginBottom: 24,
                        display: showSwap ? "none" : "flex",
                      }}
                    >
                      {step === "start" && !result && (
                        <StartStep
                          onNext={() => {
                            // Check for previously used username first
                            const lastUsername = localStorage.getItem(
                              "enclave_last_username"
                            );
                            if (lastUsername) {
                              setSavedUsername(lastUsername);
                              setUsername(lastUsername);
                              setStep("passkey-username");
                            } else {
                              setStep("signup");
                            }
                          }}
                        />
                      )}
                      {step === "passkey-username" &&
                        !result &&
                        savedUsername && (
                          <PasskeyUsernameStep
                            username={savedUsername}
                            actionLoading={actionLoading}
                            error={error}
                            onLogin={handlePasskeyLogin}
                            onSwitchToManual={handleSwitchToManual}
                          />
                        )}
                      {step === "signup" && !result && (
                        <SignupStep
                          username={username}
                          onUsernameChange={handleUsernameChange}
                          usernameStatus={usernameStatus}
                          checking={checking}
                          error={error}
                          actionLoading={actionLoading}
                          onLogin={signInAccount}
                          onSignup={createAccount}
                        />
                      )}
                    </div>
                  </>
                )}

                <AnimatePresence mode="wait">
                  {showSwap && !showTransfer && (
                    <motion.div
                      key="swap"
                      initial={{ opacity: 0, height: 550 }}
                      exit={{ opacity: 0, height: 550 }}
                      animate={{ opacity: 1, height: "auto" }}
                      transition={{ duration: 0.2, ease: "easeInOut" }}
                    >
                      <SwapToken
                        onBack={() => {
                          setShowSwap(false);
                          if (swapParams) {
                            onClose();
                          }
                        }}
                        walletSDKKey={walletSDKKey}
                        combinedBalance={combinedBalance}
                        initialFromToken={initialFromToken}
                        initialToToken={initialToToken}
                        initialAmount={swapParams?.fromToken?.amount || ""}
                        tokenOptions={tokenOptions}
                        tokensLoading={
                          tokensLoading ||
                          !combinedBalance ||
                          initialTokensLoading
                        }
                      />
                    </motion.div>
                  )}
                  {showTransfer && (
                    <motion.div
                      key="transfer"
                      initial={{ opacity: 0, height: 550 }}
                      animate={{ opacity: 1, height: "auto" }}
                      transition={{ duration: 0.2, ease: "easeInOut" }}
                    >
                      <TransferToken
                        onBack={() => setShowTransfer(false)}
                        onClose={() => setShowTransfer(false)}
                        walletSdkKey={walletSDKKey}
                        username={result?.username || ""}
                      />
                    </motion.div>
                  )}
                  {result &&
                    !showSwap &&
                    !swapParams &&
                    !showTransfer &&
                    !showActivity && (
                      <motion.div
                        key="dashboard"
                        initial={{ opacity: 0, height: 550 }}
                        animate={{ opacity: 1, height: "auto" }}
                        exit={{ opacity: 0, height: 550 }}
                        transition={{ duration: 0.2, ease: "easeInOut" }}
                      >
                        <Dashboard
                          result={result}
                          onLogout={handleLogout}
                          onShowSwap={() => setShowSwap(true)}
                          onShowTransfer={() => setShowTransfer(true)}
                          sdkKey={walletSDKKey}
                        />
                      </motion.div>
                    )}

                  {showActivity && (
                    <motion.div
                      key="activity"
                      initial={{ opacity: 0, height: 550 }}
                      exit={{ opacity: 0, height: 550 }}
                      animate={{ opacity: 1, height: "auto" }}
                      transition={{ duration: 0.2, ease: "easeInOut" }}
                    >
                      <ActivityDetails
                        apiKey={walletSDKKey}
                        onBack={() => setShowActivity(false)}
                        activity={activity}
                      />
                    </motion.div>
                  )}
                </AnimatePresence>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    gap: 8,
                    marginTop: 16,
                  }}
                >
                  <span style={{ fontSize: 12, color: "#B4B4B6" }}>
                    Secured by
                  </span>
                  <img
                    src="https://storage.googleapis.com/enclave_assets/LogoEnclaveGray.png"
                    alt="Enclave text Logo"
                    style={{ width: 84 }}
                  />
                </div>
              </>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
    </div>
  );
};

export const WalletModal: React.FC<WalletModalProps> = (props) => {
  return (
    <WalletProvider sdkKey={props.walletSDKKey}>
      <WalletModalContent {...props} />
    </WalletProvider>
  );
};