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

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

export const QRNetworks: React.FC<{
  walletAddress: string;
  solanaAddress: string;
  onBack: () => void;
}> = ({ walletAddress, solanaAddress, onBack }) => {
  const networks = [
    {
      name: "Ethereum",
      symbol: "ETH",
      icon: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
      address: walletAddress,
      username: "Akshay",
    },
    {
      name: "Solana",
      symbol: "SOL",
      icon: "https://cryptologos.cc/logos/solana-sol-logo.png",
      address: solanaAddress,
      username: "Akshay",
    },
  ];
  const [qrNetwork, setQrNetwork] = useState<null | (typeof networks)[0]>(null);
  const [copiedAddress, setCopiedAddress] = useState<string | null>(null);

  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",
              }}
            /> */}

            <Link size={32} color="#414651" />
            <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 }}>
              <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>
  );
};