import React, { useState } from "react";
import SuscessPopup from "../MessagePopup";
import Spinner from "../ui/Spinner";
import { Token } from "../Swap/SwapToken";
import { NETWORK_LOGO_URLS, NETWORK_NAME_TO_CHAIN_ID } from "../utils";
import { ChevronDown } from "lucide-react";
import { ChevronUp } from "lucide-react";

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

interface ReviewOrderProps {
  fromToken: Token | null;
  toToken: Token | null;
  rate: string | number;
  slippage: string;
  fromAmount: string;
  toAmount: string;
  onBack?: () => void;
  onConfirm?: () => void;
  selectedNetworksPay: NetworkSelection[];
  selectedNetworksReceive: NetworkSelection[];
  proActive: boolean;
  isLoading: boolean;
}

function ReviewOrder({
  fromToken,
  toToken,
  rate,
  slippage,
  fromAmount,
  toAmount,
  onBack,
  onConfirm,
  selectedNetworksPay,
  selectedNetworksReceive,
  proActive,
  isLoading,
}: ReviewOrderProps) {
  if (!fromToken || !toToken) {
    return null;
  }

  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%",
        fontFamily: "Inter, sans-serif",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          marginBottom: 8,
          padding: 16,
          border: proActive ? "1px solid #4664E9" : "1px solid #D5D7DA",
          borderRadius: 12,
          flexDirection: "column",
          background: proActive ? "#EBF0FF" : "transparent",
          gap: 20,
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <span style={{ color: "#535862", fontSize: 14, fontWeight: 500 }}>
            You pay
          </span>
          <div>
            <span style={{ fontSize: 24, fontWeight: 600 }}>
              {fromAmount} {fromToken.symbol}
            </span>
            {/* Show networks for pay if proActive is true */}
            {proActive &&
              selectedNetworksPay &&
              selectedNetworksPay.length > 0 && (
                <div
                  style={{
                    borderRadius: 8,
                    overflow: "hidden",
                    background: "white",
                    marginTop: 8,
                  }}
                >
                  <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,
                      }}
                    >
                      {selectedNetworksPay.length} Networks
                    </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" }}>
                        {selectedNetworksPay.map((network, index) => (
                          <div
                            style={{
                              borderTop:
                                index === 0 ? "1px solid #D5D7DA" : "none",
                            }}
                          >
                            <NetworkAllocationDisplay
                              key={network.name}
                              network={network.name}
                              amount={network.amount || ""}
                              symbol={fromToken?.symbol || ""}
                            />
                          </div>
                        ))}
                      </div>
                    </>
                  )}
                </div>
              )}
          </div>
        </div>
        <div style={{ width: "100%", height: 1, background: "#D5D7DA" }}></div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <span style={{ color: "#535862", fontSize: 14, fontWeight: 500 }}>
            You receive
          </span>
          <div>
            <span style={{ fontSize: 24, fontWeight: 600 }}>
              {toAmount} {toToken.symbol}
            </span>
            {/* Show networks for receive if proActive is true */}
            {proActive &&
              selectedNetworksReceive &&
              selectedNetworksReceive.length > 0 && (
                <div
                  style={{
                    marginTop: 8,
                    display: "flex",
                    gap: 8,
                    justifyContent: "space-between",
                    background: "white",
                    padding: "8px 10px",
                    borderRadius: 8,
                  }}
                >
                  <div style={{ display: "flex", gap: 8 }}>
                    {selectedNetworksReceive.map((network) => (
                      <div
                        key={network.chainId}
                        style={{
                          display: "flex",
                          alignItems: "center",
                          gap: 6,

                          borderRadius: 8,
                          padding: "4px 10px",
                          fontSize: 14,
                          fontWeight: 500,
                        }}
                      >
                        <img
                          src={NETWORK_LOGO_URLS[network.chainId]}
                          alt={network.name}
                          style={{ width: 16, height: 16 }}
                        />
                        <span>{network.name}</span>
                      </div>
                    ))}
                  </div>
                </div>
              )}
          </div>
        </div>
      </div>

      {/* Summary Box */}
      <div
        style={{
          background: "#f6f8fc",
          borderRadius: 14,
          padding: "18px 18px 10px 18px",
          marginTop: 24,
          marginBottom: 8,
          fontSize: 16,
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginBottom: 8,
          }}
        >
          <span style={{ fontSize: 16, fontWeight: 500 }}>Rate</span>
          <span style={{ fontSize: 16, fontWeight: 500, color: "#535862" }}>
            1 {toToken.symbol} ≈ {rate} {fromToken.symbol}
          </span>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            marginBottom: 8,
          }}
        >
          <span style={{ fontSize: 16, fontWeight: 500 }}>Slippage</span>
          <span style={{ fontSize: 16, fontWeight: 500, color: "#535862" }}>
            {slippage}
          </span>
        </div>
      </div>
      {/* Bottom Buttons */}
      <div
        style={{ display: "flex", gap: 12, marginTop: 32, marginBottom: 24 }}
      >
        <button
          onClick={onBack}
          style={{
            flex: 1,
            border: "1px solid #4664E9",
            background: "#fff",
            color: "#4664E9",
            fontWeight: 600,
            fontSize: 16,
            borderRadius: 8,
            padding: "10px 0",
            cursor: "pointer",
          }}
        >
          Back
        </button>
        <button
          onClick={onConfirm}
          style={{
            flex: 1,
            border: "none",
            background: "#4664E9",
            color: "#fff",
            fontWeight: 600,
            fontSize: 16,
            borderRadius: 8,
            padding: "10px 0",
            cursor: "pointer",
            opacity: isLoading ? 0.5 : 1,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            gap: "8px",
          }}
          disabled={isLoading}
        >
          {isLoading ? (
            <>
              <Spinner />
              <span>Confirming...</span>
            </>
          ) : (
            "Confirm Swap"
          )}
        </button>
      </div>
    </div>
  );
}

export default ReviewOrder;