import { CircleCheck, CircleX, X } from "lucide-react";
import React from "react";
import { useWallet } from "./WalletProvider";
import { ThemeMode, themeStyles, borderRadiusStyles } from "../types/theme";
import { getContrastingTextColor } from "./utils";

function MessagePopup({
  handleDone,
  type,
  onTryAgain,
  onClose,
  customContent,
  transactionClick,
  theme,
}: {
  handleDone: () => void;
  type: "success" | "error";
  onTryAgain?: () => void;
  onClose?: () => void;
  customContent?: React.ReactNode;
  transactionClick?: () => void;
  theme: ThemeMode;
}) {
  const { walletCornerRadius, currentTheme } = useWallet();

  const currentRadius = borderRadiusStyles[walletCornerRadius];

  // Placeholder values for demo
  const recipient = "Akshay";
  const address = "0xAb...eC9B";

  const handleClose = () => {
    if (onClose) {
      onClose();
    } else {
      handleDone();
    }
  };

  return (
    <div
      style={{
        position: "relative",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 24,
        width: "100%",
      }}
    >
      {/* Close icon for error */}
      {type === "error" && (
        <button
          onClick={handleClose}
          style={{
            position: "absolute",
            top: 18,
            right: 18,
            background: "none",
            border: "none",
            fontSize: 22,
            cursor: "pointer",
            color: "#888",
          }}
          aria-label="Close"
        >
          <X size={24} />
        </button>
      )}
      <div
        style={{
          background:
            type === "success" ? currentTheme.successBg : currentTheme.errorBg,
          borderRadius: 100,
          padding: 12,
        }}
      >
        <div
          style={{
            background:
              type === "success"
                ? currentTheme.successBg
                : currentTheme.errorBg,
            borderRadius: 100,
            height: 36,
            width: 36,
          }}
        >
          {type === "success" ? (
            <CircleCheck size={36} color={currentTheme.successText} />
          ) : (
            <CircleX size={36} color={currentTheme.errorText} />
          )}
        </div>
      </div>
      {customContent ? (
        customContent
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <h1 style={{ fontSize: 22, fontWeight: 700, textAlign: "center" }}>
            {type === "success" ? "Sent!" : "Something went wrong"}
          </h1>
          {type === "success" ? (
            <p style={{ textAlign: "center", color: "#535862", fontSize: 15 }}>
              Your tokens were successfully sent to {recipient}
              <br />(<span style={{ fontFamily: "monospace" }}>{address}</span>)
            </p>
          ) : (
            <p style={{ textAlign: "center", color: "#535862", fontSize: 15 }}>
              We couldn't complete your transaction at the moment.
              <br />
              This might be due to network issues, insufficient liquidity, or a
              failed quote. Please try again shortly.
            </p>
          )}
        </div>
      )}

      {/* Action buttons/links */}
      {type === "success" ? (
        <>
          <button
            onClick={transactionClick}
            style={{
              color: currentTheme.primary,
              fontWeight: 600,
              fontSize: 15,
              textAlign: "center",
              marginBottom: 8,
              cursor: "pointer",
              textDecoration: "underline",
              background: "none",
              border: "none",
              padding: 0,
              margin: 0,
            }}
          >
            View Transaction
          </button>
          <button
            onClick={handleDone}
            style={{
              width: "100%",
              border: "none",
              background: currentTheme.primary,
              color: getContrastingTextColor(currentTheme.primary),
              fontWeight: 600,
              fontSize: 16,
              borderRadius: currentRadius.innerRadius,
              padding: "16px 0",
              cursor: "pointer",
              marginBottom: 24,
            }}
          >
            Done
          </button>
        </>
      ) : (
        <>
          <button
            onClick={onTryAgain || handleDone}
            style={{
              width: "100%",
              border: `1.5px solid ${currentTheme.primary}`,
              background: "transparent",
              color: currentTheme.primary,
              fontWeight: 600,
              fontSize: 16,
              borderRadius: currentRadius.innerRadius,
              padding: "16px 0",
              cursor: "pointer",
              marginBottom: 8,
            }}
          >
            Try Again
          </button>
          <a
            href="https://t.me/enclavemoney"
            target="_blank"
            style={{
              color: currentTheme.primary,
              fontWeight: 600,
              fontSize: 15,
              textAlign: "center",
              marginBottom: 8,
            }}
          >
            Need help?
          </a>
        </>
      )}
    </div>
  );
}

export default MessagePopup;