"use client";

import { useState } from "react";
import Image from "next/image";
import { Modal, ModalContent, Button } from "@heroui/react";
import { buttonStyles } from "@/lib/buttonStyles";

interface WithdrawModalProps {
  isOpen: boolean;
  onClose: () => void;
  amount: string;
}

export default function WithdrawModal({
  isOpen,
  onClose,
  amount,
}: WithdrawModalProps) {
  const [showDetails, setShowDetails] = useState(true);

  const alpAmount = amount ? (parseFloat(amount) * 0.098).toFixed(0) : "0";
  const usdValue = amount ? (parseFloat(amount) * 1.00045).toFixed(2) : "0.00";
  const fee = amount ? (parseFloat(amount) * 0.005).toFixed(2) : "0.00";
  const minReceive = amount ? (parseFloat(amount) * 0.098 * 0.995).toFixed(0) : "0";

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      size="lg"
      classNames={{
        base: "bg-transparent shadow-none",
        backdrop: "bg-black/50",
      }}
    >
      <ModalContent>
        <div
          style={{
            background: "#ffffff",
            borderRadius: "24px",
            padding: "24px",
            display: "flex",
            flexDirection: "column",
            gap: "24px",
            position: "relative",
            overflow: "hidden",
            alignItems: "center",
          }}
        >
          {/* Header */}
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
              width: "446px",
            }}
          >
            <div
              style={{
                color: "#111827",
                fontSize: "20px",
                fontWeight: 700,
                lineHeight: "140%",
                fontFamily: "var(--font-inter)",
              }}
            >
              Review
            </div>
            <button
              onClick={onClose}
              style={{
                width: "24px",
                height: "24px",
                cursor: "pointer",
                background: "none",
                border: "none",
                padding: 0,
              }}
            >
              <Image
                src="/vuesax-linear-close-circle1.svg"
                alt="Close"
                width={24}
                height={24}
              />
            </button>
          </div>

          {/* Exchange Section */}
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "12px",
              alignItems: "center",
            }}
          >
            <div
              style={{
                background: "#f9fafb",
                borderRadius: "16px",
                padding: "24px 16px",
                display: "flex",
                flexDirection: "column",
                gap: "0px",
                alignItems: "center",
                width: "446px",
              }}
            >
              {/* From USDC */}
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                  width: "100%",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "4px",
                    alignItems: "flex-start",
                  }}
                >
                  <div
                    style={{
                      color: "#111827",
                      fontSize: "24px",
                      fontWeight: 700,
                      lineHeight: "130%",
                      letterSpacing: "-0.005em",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    {amount || "0"} USDC
                  </div>
                  <div
                    style={{
                      color: "#4b5563",
                      fontSize: "16px",
                      fontWeight: 500,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    ≈ ${usdValue}
                  </div>
                </div>
                <Image
                  src="/usd-coin-usdc-logo-10.svg"
                  alt="USDC"
                  width={36}
                  height={36}
                />
              </div>

              {/* Exchange Icon */}
              <div
                style={{
                  background: "#ffffff",
                  borderRadius: "999px",
                  width: "40px",
                  height: "40px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  boxShadow:
                    "0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)",
                  overflow: "visible",
                }}
              >
                <div style={{ width: "16px", height: "16px", position: "relative" }}>
                  <Image
                    src="/group-9280.svg"
                    alt="Exchange"
                    width={16}
                    height={16}
                    style={{ width: "100%", height: "100%", objectFit: "contain" }}
                  />
                </div>
              </div>

              {/* To ALP */}
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                  width: "100%",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: "4px",
                    alignItems: "flex-start",
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      gap: "8px",
                      alignItems: "center",
                    }}
                  >
                    <div
                      style={{
                        color: "#111827",
                        fontSize: "24px",
                        fontWeight: 700,
                        lineHeight: "130%",
                        letterSpacing: "-0.005em",
                        fontFamily: "var(--font-inter)",
                      }}
                    >
                      {alpAmount} ALP
                    </div>
                    <div
                      style={{
                        width: "36px",
                        height: "36px",
                        position: "relative",
                      }}
                    >
                      <Image
                        src="/vector0.svg"
                        alt=""
                        width={36}
                        height={36}
                        style={{ position: "absolute" }}
                      />
                      <Image
                        src="/vector1.svg"
                        alt=""
                        width={36}
                        height={36}
                        style={{ position: "absolute" }}
                      />
                      <Image
                        src="/vector2.svg"
                        alt=""
                        width={36}
                        height={36}
                        style={{ position: "absolute" }}
                      />
                      <Image
                        src="/component-10.svg"
                        alt=""
                        width={36}
                        height={36}
                        style={{ position: "absolute" }}
                      />
                    </div>
                  </div>
                  <div
                    style={{
                      color: "#4b5563",
                      fontSize: "16px",
                      fontWeight: 500,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    ≈ ${usdValue}
                  </div>
                </div>
              </div>
            </div>

            {/* Show More/Less Button */}
            <button
              onClick={() => setShowDetails(!showDetails)}
              style={{
                background: "transparent",
                border: "none",
                cursor: "pointer",
                display: "flex",
                flexDirection: "row",
                gap: "8px",
                alignItems: "center",
                padding: "8px",
              }}
            >
              <div
                style={{
                  color: "#111827",
                  fontSize: "14px",
                  fontWeight: 500,
                  lineHeight: "150%",
                  fontFamily: "var(--font-inter)",
                }}
              >
                {showDetails ? "Show less" : "Show more"}
              </div>
              <Image
                src="/icon1.svg"
                alt=""
                width={20}
                height={20}
                style={{
                  transform: showDetails ? "rotate(180deg)" : "rotate(0deg)",
                  transition: "transform 0.2s ease-in-out",
                }}
              />
            </button>

            {/* Transaction Details */}
            {showDetails && (
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "12px",
                  width: "446px",
                  animation: "fadeIn 0.3s ease-in-out",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px 0",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Fee(0.5%)
                  </div>
                  <div
                    style={{
                      color: "#ef4444",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    -${fee}
                  </div>
                </div>

                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px 0",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Network cost
                  </div>
                  <div
                    style={{
                      color: "#ef4444",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    -$0.09
                  </div>
                </div>

                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px 0",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Rate
                  </div>
                  <div
                    style={{
                      color: "#111827",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    1USDC=0.98ALP ($1.02)
                  </div>
                </div>

                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px 0",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Spread
                  </div>
                  <div
                    style={{
                      color: "#111827",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    0
                  </div>
                </div>

                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px 0",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Price Impact
                  </div>
                  <div
                    style={{
                      color: "#10b981",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    +$0.60 (+0.065%)
                  </div>
                </div>

                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px 0",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Max slippage
                  </div>
                  <div
                    style={{
                      color: "#111827",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    0.5%
                  </div>
                </div>

                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    padding: "12px 0",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Min Receive
                  </div>
                  <div
                    style={{
                      color: "#111827",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    {minReceive} ALP
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Confirm Button */}
          <Button
            color="default"
            variant="solid"
            className={buttonStyles({ intent: "theme" })}
            onPress={() => {
              console.log("Withdraw confirmed");
              onClose();
            }}
          >
            Confirm
          </Button>
        </div>
      </ModalContent>
    </Modal>
  );
}
