import { ArrowLeft } from "lucide-react";
import React from "react";
import { NETWORK_LOGO_URLS, NETWORK_NAME_TO_CHAIN_ID } from "./utils";

interface NetworkInfo {
  name: string;
  icon: string;
}

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

function SelectSingleNetwork({
  availableNetworks,
  selectedToNetworksPay,
  setSelectedToNetworksPay,
  toToken,
  onBack,
  onDone,
}: {
  availableNetworks: NetworkInfo[];
  selectedToNetworksPay: NetworkSelection[];
  setSelectedToNetworksPay: (networks: NetworkSelection[]) => void;
  toToken: any;
  onBack: () => void;
  onDone: () => void;
}) {
  // Filter networks based on toToken's chainIds
  const availableChainIds =
    toToken?.chainIds?.map((chain: any) => chain.chainId) || [];
  const filteredNetworks = availableNetworks.filter((network) => {
    const chainId = NETWORK_NAME_TO_CHAIN_ID[network.name];
    return availableChainIds.includes(chainId);
  });

  const isNetworkSelected = (networkName: string) => {
    return selectedToNetworksPay.some(
      (network) => network.name === networkName
    );
  };

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

        background: "#fff",
        borderRadius: 20,
        fontFamily: "Inter, sans-serif",
        paddingBottom: 24,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          marginBottom: 8,
          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",
          }}
        >
          Select networks
        </span>
      </div>

      <div style={{ marginBottom: 16 }}>
        <p
          style={{
            color: "#717680",
            fontSize: 14,
            margin: "0 0 24px 0",
            textAlign: "center",
          }}
        >
          Select a reciever network
        </p>
      </div>

      <div style={{ marginBottom: 24 }}>
        {filteredNetworks.map((network) => {
          const chainId = NETWORK_NAME_TO_CHAIN_ID[network.name];
          const tokenChainInfo = toToken?.chainIds?.find(
            (chain: any) => chain.chainId === chainId
          );
          const chainBalance = tokenChainInfo?.balance ?? "0";
          const formattedBalance =
            parseFloat(chainBalance) / Math.pow(10, toToken?.decimals || 6);

          const isSelected = isNetworkSelected(network.name);

          return (
            <div
              key={network.name}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "16px",
                border: isSelected ? "1px solid #3662E3" : "1px solid #D5D7DA",
                borderRadius: 12,
                cursor: "pointer",
                marginBottom: 8,
                transition: "all 0.2s ease",
                background: isSelected ? "#F6F8FE" : "#fff",
              }}
              onClick={() => {
                setSelectedToNetworksPay([
                  {
                    name: network.name,
                    chainId: NETWORK_NAME_TO_CHAIN_ID[network.name],
                  },
                ]);
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div
                  style={{
                    width: 20,
                    height: 20,
                    border: "2px solid",
                    borderColor: isSelected ? "#4664E9" : "#E9EAEB",
                    borderRadius: "50%",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    background: isSelected ? "#4664E9" : "transparent",
                  }}
                >
                  {isSelected && (
                    <div
                      style={{
                        width: "8px",
                        height: "8px",
                        backgroundColor: "#fff",
                        borderRadius: "50%",
                      }}
                    ></div>
                  )}
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <img
                    src={NETWORK_LOGO_URLS[chainId]}
                    alt={network.name}
                    style={{ width: 24, height: 24 }}
                  />
                  <span
                    style={{
                      fontWeight: 500,
                      fontSize: 16,
                      color: isSelected ? "#4664E9" : "#181D27",
                    }}
                  >
                    {network.name}
                  </span>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      <div style={{ display: "flex", gap: 12, marginTop: "auto" }}>
        <button
          onClick={onBack}
          style={{
            flex: 1,
            border: "1px solid #D5D7DA",
            background: "#fff",
            color: "#414651",
            fontWeight: 600,
            fontSize: 16,
            borderRadius: 8,
            padding: "12px 0",
            cursor: "pointer",
          }}
        >
          Cancel
        </button>
        <button
          onClick={onDone}
          style={{
            flex: 1,
            border: "none",
            background:
              selectedToNetworksPay.length > 0 ? "#4664E9" : "#D5D7DA",
            color: "#fff",
            fontWeight: 600,
            fontSize: 16,
            borderRadius: 8,
            padding: "12px 0",
            cursor:
              selectedToNetworksPay.length > 0 ? "pointer" : "not-allowed",
          }}
          disabled={selectedToNetworksPay.length === 0}
        >
          Done
        </button>
      </div>
    </div>
  );
}

export default SelectSingleNetwork;