import React, { useState } from "react";
import { ArrowLeft, QrCode, Copy, X, Link, Check, Info } from "lucide-react";
import { QRCodeSVG } from "qrcode.react";
import { NETWORK_LOGO_URLS, availableNetworks } from "../utils";

const truncateAddress = (address: string) => {
  if (!address) return "";
  return address.slice(0, 14) + "..." + address.slice(-4);
};

export const QRNetworks: React.FC<{
  walletAddress: string;
  solanaAddress: string;
  bitcoinWalletAddress: string;
  onBack: () => void;
}> = ({ walletAddress, solanaAddress, bitcoinWalletAddress, onBack }) => {
  const networks = [
    {
      name: "EVM",
      symbol: "ETH",
      icon: "https://media.socket.tech/tokens/all/ETH",
      address: walletAddress,
    },
    {
      name: "Solana",
      symbol: "SOL",
      icon: NETWORK_LOGO_URLS["792703809"],
      address: solanaAddress,
    },
    {
      name: "Bitcoin",
      symbol: "BTC",
      icon: "https://assets.coingecko.com/coins/images/1/standard/bitcoin.png?1747033579",
      address: bitcoinWalletAddress,
    },
  ];
  const [qrNetwork, setQrNetwork] = useState<null | (typeof networks)[0]>(null);
  const [copiedAddress, setCopiedAddress] = useState<string | null>(null);
  const [showNetworkTooltip, setShowNetworkTooltip] = useState(false);

  const handleCopy = (address: string) => {
    navigator.clipboard.writeText(address);
    setCopiedAddress(address);
    setTimeout(() => setCopiedAddress(null), 1200);
  };

  if (qrNetwork) {
    return (
      <div
        style={{
          width: "100%",
          fontFamily: "Inter, sans-serif",
        }}
      >
        {/* Header */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
          }}
        >
          <button
            onClick={() => setQrNetwork(null)}
            style={{
              background: "none",
              border: "none",
              cursor: "pointer",
              marginRight: 12,
              padding: 0,
              display: "flex",
              alignItems: "center",
            }}
          >
            <ArrowLeft size={24} color="#222" />
          </button>
          <span
            style={{
              fontWeight: 600,
              fontSize: 20,
              flex: 1,
              textAlign: "center",
            }}
          >
            Deposit {qrNetwork.symbol}
          </span>
          <button
            onClick={onBack}
            style={{
              background: "none",
              border: "none",
              cursor: "pointer",
              marginLeft: 12,
              padding: 0,
              display: "flex",
              alignItems: "center",
            }}
          >
            <X size={22} color="#888" />
          </button>
        </div>
        {/* QR Code */}
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            margin: "24px 0 0 0",
          }}
        >
          <div style={{ background: "#F6F7F9", borderRadius: 16, padding: 16 }}>
            <QRCodeSVG value={qrNetwork.address || ""} size={160} />
          </div>
        </div>
        {/* Divider and Wallet Address */}
        <div style={{ margin: "24px 0 0 0", padding: "0" }}>
          <div
            style={{
              borderTop: "1px solid #E9E9EC",
              marginBottom: 12,
              position: "relative",
              textAlign: "center",
            }}
          >
            <span
              style={{
                position: "relative",
                top: -12,
                background: "#fff",
                padding: "0 12px",
                color: "#B4B4B6",
                fontSize: 14,
              }}
            >
              or
            </span>
          </div>
          <div style={{ fontWeight: 500, fontSize: 15, marginBottom: 6 }}>
            Wallet Address
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              background: "#F6F7F9",
              borderRadius: 10,
              padding: "10px 12px",
              marginBottom: 8,
            }}
          >
            <span
              style={{ fontWeight: 500, fontSize: 15, color: "#222", flex: 1 }}
            >
              {truncateAddress(qrNetwork.address || "")}
            </span>
            <button
              onClick={() => handleCopy(qrNetwork.address || "")}
              style={{
                background:
                  copiedAddress === qrNetwork.address ? "#3662E3" : "#E9EAFD",
                color: copiedAddress === qrNetwork.address ? "#fff" : "#3662E3",
                border: "none",
                borderRadius: 8,
                fontWeight: 600,
                fontSize: 15,
                padding: "6px 18px",
                cursor: "pointer",
                transition: "all 0.2s",
              }}
            >
              {copiedAddress === qrNetwork.address ? "Copied" : "Copy"}
            </button>
          </div>
          <div
            style={{
              color: "#717680",
              fontSize: 13,
              display: "flex",
              alignItems: "center",
              gap: 6,
            }}
          >
            <span style={{ fontSize: 16 }}>ⓘ</span> This address can only be
            used to receive compatible tokens.
          </div>
        </div>
        <button
          onClick={() => setQrNetwork(null)}
          style={{
            margin: "32px 0px 24px 0px",
            width: "100%",
            background: "#fff",
            color: "#4664E9",
            fontWeight: 600,
            fontSize: 16,
            border: "1.5px solid #3662E3",
            borderRadius: 10,
            padding: "12px 0",
            cursor: "pointer",
            boxShadow: "none",
          }}
        >
          Go Back
        </button>
      </div>
    );
  }

  return (
    <div style={{ fontFamily: "Inter, sans-serif", height: "500px" }}>
      {/* Header */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          padding: "0px 0px 16px 0px",
        }}
      >
        <button
          onClick={onBack}
          style={{
            background: "none",
            border: "none",
            cursor: "pointer",
            marginRight: 12,
            padding: 0,
            display: "flex",
            alignItems: "center",
          }}
        >
          <ArrowLeft size={24} color="#222" />
        </button>
        <span
          style={{
            fontWeight: 600,
            fontSize: 20,
            flex: 1,
            textAlign: "center",
          }}
        >
          Networks
        </span>
      </div>

      {/* Token List */}
      <div style={{ padding: "0 0 8px 0" }}>
        {networks.map((network, idx) => (
          <div
            key={network.symbol}
            style={{
              display: "flex",
              alignItems: "center",
              padding: "18px 0px",
              borderBottom:
                idx !== networks.length - 1 ? "1px solid #F1F1F3" : "none",
              gap: 16,
            }}
          >
            <img
              src={network.icon}
              alt={network.name}
              style={{
                width: 40,
                height: 40,
                borderRadius: 12,
                background: "#F6F7F9",
              }}
            />

            <div style={{ flex: 1, color: "#414651" }}>
              <div style={{ fontWeight: 600, fontSize: 16 }}>
                {network.name}
              </div>
              <div style={{ fontSize: 13 }}>
                {truncateAddress(network.address || "")}
              </div>
            </div>
            <div style={{ display: "flex", gap: 12, position: "relative" }}>
              {network.name === "EVM" && (
                <div
                  style={{ position: "relative", display: "inline-block" }}
                  onMouseEnter={() => setShowNetworkTooltip(true)}
                  onMouseLeave={() => setShowNetworkTooltip(false)}
                >
                  <button
                    style={{
                      background: "none",
                      border: "none",
                      cursor: "pointer",
                      padding: 0,
                      display: "flex",
                      alignItems: "center",
                    }}
                    title="Available Networks"
                  >
                    <Info size={20} color="#717680" />
                  </button>
                  {showNetworkTooltip && (
                    <div
                      style={{
                        position: "absolute",
                        top: "100%",
                        right: 0,
                        marginTop: 8,
                        background: "#fff",
                        border: "1px solid #E9E9EC",
                        borderRadius: 12,
                        padding: 16,
                        boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
                        zIndex: 1000,
                        width: 320,
                      }}
                    >
                      <div
                        style={{
                          fontWeight: 600,
                          fontSize: 16,
                          marginBottom: 16,
                          color: "#222",
                        }}
                      >
                        Supported EVM Networks
                      </div>
                      <div
                        style={{
                          display: "grid",
                          gridTemplateColumns: "1fr 1fr",
                          gap: 12,
                          marginBottom: 16,
                        }}
                      >
                        {availableNetworks
                          .filter((network) => network.name !== "Solana")
                          .map((availableNetwork) => (
                            <div
                              key={availableNetwork.name}
                              style={{
                                display: "flex",
                                alignItems: "center",
                                gap: 8,
                                padding: "8px 12px",
                                background: "#F8F9FA",
                                borderRadius: 8,
                              }}
                            >
                              <img
                                src={availableNetwork.icon}
                                alt={availableNetwork.name}
                                style={{
                                  width: 20,
                                  height: 20,
                                  borderRadius: 4,
                                }}
                              />
                              <span
                                style={{
                                  fontSize: 13,
                                  fontWeight: 500,
                                  color: "#414651",
                                }}
                              >
                                {availableNetwork.name}
                              </span>
                            </div>
                          ))}
                      </div>
                      <div
                        style={{
                          fontSize: 12,
                          color: "#717680",
                          textAlign: "center",
                          lineHeight: 1.4,
                        }}
                      >
                        Your Ethereum address works on all these networks
                      </div>
                    </div>
                  )}
                </div>
              )}
              <button
                style={{
                  background: "none",
                  border: "none",
                  cursor: "pointer",
                  padding: 0,
                  display: "flex",
                  alignItems: "center",
                }}
                title="Show QR"
                onClick={() => setQrNetwork(network)}
              >
                <QrCode size={20} color="#717680" />
              </button>
              <button
                style={{
                  background: "none",
                  border: "none",
                  cursor: "pointer",
                  padding: 0,
                  display: "flex",
                  alignItems: "center",
                }}
                title="Copy address"
                onClick={() => handleCopy(network.address || "")}
              >
                {copiedAddress === network.address ? (
                  <Check size={20} color="#4BB543" />
                ) : (
                  <Copy size={20} color="#717680" />
                )}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};