import React, { useState } from "react";
import {
  ArrowLeft,
  ChevronDown,
  ChevronUp,
  SendHorizontal,
} from "lucide-react";
import Spinner from "../ui/Spinner";
import { formatAmount, NETWORK_NAME_TO_CHAIN_ID } from "../utils";
import { NETWORK_LOGO_URLS } from "../utils";

interface Token {
  symbol: string;
  name: string;
  icon?: string;
  logoURI?: string;
  address: string;
  chainId: number;
  decimals: number;
  balance?: string;
  amount?: string;
  chainIds?: any[];
  price?: number;
  priceUsd?: number;
}

interface SendToUser {
  status: boolean;
  username?: string;
  walletAddress?: string;
  solanaWalletAddress?: string;
  ensName?: string;
  sns?: string;
  bitcoinWalletAddress?: string;
}

interface NetworkSelection {
  name: string;
  chainId: number;
  amount?: string;
}

interface ReviewTransferProps {
  selectedToken: Token;
  amount: string;
  recipient: string;
  sendToUser: SendToUser;
  addressToSend: string;
  selectedFromNetworksPay: NetworkSelection[];
  selectedToNetworksPay: NetworkSelection[];
  isTransferring: boolean;
  transferError: string | null;
  onBack: () => void;
  onConfirm: () => void;
  proActive: boolean;
}

function ReviewTransfer({
  selectedToken,
  amount,
  recipient,
  sendToUser,
  addressToSend,
  selectedFromNetworksPay,
  selectedToNetworksPay,
  isTransferring,
  transferError,
  onBack,
  onConfirm,
  proActive,
}: ReviewTransferProps) {
  const [showPreviewNetworks, setShowPreviewNetworks] = useState(false);

  const NetworkAllocationDisplay = ({
    network,
    amount,
    symbol,
  }: {
    network: string;
    amount: string;
    symbol: string;
  }) => (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        width: "100%",
        padding: "8px 0",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: "8px",
        }}
      >
        <img
          src={NETWORK_LOGO_URLS[NETWORK_NAME_TO_CHAIN_ID[network]]}
          alt={network}
          style={{ width: 24, height: 24, borderRadius: "50%" }}
        />
        <span style={{ fontSize: 14, color: "#000000", fontWeight: 500 }}>
          {network}
        </span>
      </div>
      <span style={{ fontSize: 14, color: "#535862" }}>
        {amount} {symbol}
      </span>
    </div>
  );

  return (
    <div
      style={{
        width: "100%",

        background: "#fff",
        borderRadius: 20,
        fontFamily: "Inter, sans-serif",
        paddingBottom: 24,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          marginBottom: 18,
          position: "relative",
        }}
      >
        <button
          onClick={onBack}
          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",
          }}
        >
          Confirm transaction
        </span>
      </div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginBottom: 24,
          border: proActive ? "1px solid #4664E9" : "none",
          borderRadius: 12,
          padding: 16,
          background: proActive ? "#EBF0FF" : "transparent",
        }}
      >
        <div
          style={{
            background: "#F6F8FE",
            borderRadius: 100,
            padding: 16,
            marginBottom: 16,
          }}
        >
          <SendHorizontal size={36} color="#4664E9" />
        </div>
        <div style={{ fontWeight: 700, fontSize: 32, marginBottom: 4 }}>
          {formatAmount(amount)} {selectedToken.symbol}
        </div>
        <div style={{ color: "#717680", fontSize: 18, marginBottom: 16 }}>
          $
          {(parseFloat(amount || "0") * (selectedToken.priceUsd || 0)).toFixed(
            2
          )}
        </div>
        {proActive && (
          <div
            style={{
              borderRadius: 8,
              overflow: "hidden",
              background: "white",
              width: "100%",
            }}
          >
            <button
              onClick={() => setShowPreviewNetworks((v) => !v)}
              style={{
                width: "100%",
                background: "white",
                border: "none",
                padding: "12px 16px",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                cursor: "pointer",
                textAlign: "left",
              }}
            >
              <span
                style={{
                  fontSize: 16,
                  color: "#1E1E1E",
                  fontWeight: 400,
                }}
              >
                {selectedFromNetworksPay.length} Network
              </span>
              {showPreviewNetworks ? (
                <ChevronUp
                  style={{ width: 16, height: 16, color: "#717680" }}
                />
              ) : (
                <ChevronDown
                  style={{ width: 16, height: 16, color: "#717680" }}
                />
              )}
            </button>
            {showPreviewNetworks && (
              <>
                <div style={{ padding: "1px 16px" }}>
                  {selectedFromNetworksPay.map((network, index) => (
                    <div
                      style={{
                        borderTop: index === 0 ? "1px solid #D5D7DA" : "none",
                      }}
                    >
                      <NetworkAllocationDisplay
                        key={network.name}
                        network={network.name}
                        amount={network.amount || "0"}
                        symbol={selectedToken?.symbol || ""}
                      />
                    </div>
                  ))}
                </div>
              </>
            )}
          </div>
        )}
      </div>
      <div
        style={{
          background: "#F4F6FF",
          borderRadius: 12,
          padding: 16,
          marginBottom: 24,
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginBottom: 8,
          }}
        >
          <span style={{ color: "#181D27", fontSize: 16, fontWeight: 500 }}>
            Recipient
          </span>
          <span style={{ color: "#535862", fontSize: 16 }}>
            {(() => {
              const displayName = sendToUser.username || recipient;
              return displayName.length > 8
                ? displayName.slice(0, 8) + "..."
                : displayName;
            })()}{" "}
            <span style={{ color: "#B4B4B6" }}>
              (
              {addressToSend
                ? selectedToNetworksPay[0].chainId ===
                  NETWORK_NAME_TO_CHAIN_ID.Solana
                  ? `${sendToUser.solanaWalletAddress?.slice(
                      0,
                      6
                    )}...${sendToUser.solanaWalletAddress?.slice(-4)}`
                  : selectedToNetworksPay[0].chainId ===
                    NETWORK_NAME_TO_CHAIN_ID.Bitcoin
                  ? `${sendToUser?.bitcoinWalletAddress?.slice(
                      0,
                      6
                    )}...${sendToUser?.bitcoinWalletAddress?.slice(-4)}`
                  : `${sendToUser.walletAddress?.slice(
                      0,
                      6
                    )}...${sendToUser.walletAddress?.slice(-4)}`
                : "Unknown"}
              )
            </span>
          </span>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginBottom: 8,
          }}
        >
          <span style={{ color: "#181D27", fontSize: 16, fontWeight: 500 }}>
            Recipient Network
          </span>
          <span style={{ color: "#535862", fontSize: 16 }}>
            {selectedToNetworksPay[0].name || "None"}
          </span>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          <span style={{ color: "#181D27", fontSize: 16, fontWeight: 500 }}>
            Total
          </span>
          <span style={{ color: "#535862", fontSize: 16 }}>
            {formatAmount(amount)} {selectedToken.symbol}
          </span>
        </div>
      </div>
      <div style={{ display: "flex", gap: 12 }}>
        <button
          onClick={onBack}
          style={{
            flex: 1,
            border: "1px solid #D5D7DA",
            background: "#fff",
            color: "#414651",
            fontWeight: 600,
            fontSize: 16,
            borderRadius: 8,
            padding: "10px 0",
            cursor: "pointer",
          }}
          disabled={isTransferring}
        >
          Cancel
        </button>
        <button
          onClick={onConfirm}
          style={{
            flex: 1,
            border: "none",
            background: "#4664E9",
            color: "#fff",
            fontWeight: 600,
            fontSize: 16,
            borderRadius: 8,
            padding: "10px 0",
            cursor: isTransferring ? "not-allowed" : "pointer",
            opacity: isTransferring ? 0.7 : 1,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: 8,
          }}
          disabled={isTransferring}
        >
          {isTransferring ? (
            <>
              <Spinner />
              Sending...
            </>
          ) : (
            "Confirm"
          )}
        </button>
      </div>
      {transferError && (
        <div
          style={{
            color: "#DC2626",
            fontSize: 14,
            marginTop: 12,
            textAlign: "center",
          }}
        >
          {transferError}
        </div>
      )}
    </div>
  );
}

export default ReviewTransfer;