import { CircleCheck, CircleX, X } from "lucide-react";
import React from "react";

function MessagePopup({
  handleDone,
  type,
  onTryAgain,
  onClose,
  customContent,
  transactionClick,
}: {
  handleDone: () => void;
  type: "success" | "error";
  onTryAgain?: () => void;
  onClose?: () => void;
  customContent?: React.ReactNode;
  transactionClick?: () => void;
}) {
  // 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" ? "#ECFDF3" : "#FEF7F7",
          borderRadius: 100,
          padding: 12,
        }}
      >
        <div
          style={{
            background: type === "success" ? "#D1FADF" : "#FBDEDE",
            borderRadius: 100,
            padding: 12,
          }}
        >
          {type === "success" ? (
            <CircleCheck size={36} color="#0BBA68" />
          ) : (
            <CircleX size={36} color="#FF394A" />
          )}
        </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: "#4664E9",
              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: "#4664E9",
              color: "#fff",
              fontWeight: 600,
              fontSize: 16,
              borderRadius: 8,
              padding: "10px 0",
              cursor: "pointer",
              marginBottom: 24,
            }}
          >
            Done
          </button>
        </>
      ) : (
        <>
          <button
            onClick={onTryAgain || handleDone}
            style={{
              width: "100%",
              border: "1.5px solid #4664E9",
              background: "#fff",
              color: "#4664E9",
              fontWeight: 600,
              fontSize: 16,
              borderRadius: 8,
              padding: "10px 0",
              cursor: "pointer",
              marginBottom: 8,
            }}
          >
            Try Again
          </button>
          <a
            href="https://t.me/enclavemoney"
            target="_blank"
            style={{
              color: "#4664E9",
              fontWeight: 600,
              fontSize: 15,
              textAlign: "center",
              marginBottom: 8,
            }}
          >
            Need help?
          </a>
        </>
      )}
    </div>
  );
}

export default MessagePopup;