"use client";

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

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) * USDC_TO_ALP_RATE).toFixed(0) : "0";
  const usdValue = amount ? (parseFloat(amount) * USDC_USD_RATE).toFixed(2) : "0.00";
  const fee = amount ? (parseFloat(amount) * WITHDRAW_FEE_RATE).toFixed(2) : "0.00";
  const minReceive = amount ? (parseFloat(amount) * USDC_TO_ALP_RATE * SLIPPAGE_PROTECTION).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="/icons/ui/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="/assets/tokens/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)",
                }}
              >
                <Image
                  src="/components/common/group-9280.svg"
                  alt="Exchange"
                  width={8}
                  height={16}
                  style={{ objectFit: "contain" }}
                />
              </div>

              {/* To ALP */}
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "0px",
                  alignItems: "flex-start",
                  width: "100%",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    width: "100%",
                  }}
                >
                  <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="/components/common/vector0.svg"
                      alt=""
                      width={36}
                      height={36}
                      style={{ position: "absolute" }}
                    />
                    <Image
                      src="/components/common/vector1.svg"
                      alt=""
                      width={36}
                      height={36}
                      style={{ position: "absolute" }}
                    />
                    <Image
                      src="/components/common/vector2.svg"
                      alt=""
                      width={36}
                      height={36}
                      style={{ position: "absolute" }}
                    />
                    <Image
                      src="/components/common/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>

            {/* Show More/Less Button */}
            <button
              onClick={() => setShowDetails(!showDetails)}
              style={{
                background: "#ffffff",
                borderRadius: "999px",
                padding: "0px 16px",
                border: "none",
                cursor: "pointer",
                display: "flex",
                flexDirection: "row",
                gap: "0px",
                alignItems: "center",
                justifyContent: "center",
                width: "120px",
                height: "32px",
                boxShadow:
                  "0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)",
              }}
            >
              <div
                style={{
                  color: "#4b5563",
                  fontSize: "14px",
                  fontWeight: 500,
                  lineHeight: "150%",
                  fontFamily: "var(--font-inter)",
                }}
              >
                {showDetails ? "Show less" : "Show more"}
              </div>
              <Image
                src="/components/common/icon1.svg"
                alt=""
                width={12}
                height={12}
                style={{
                  transform: showDetails ? "rotate(180deg)" : "rotate(0deg)",
                  transition: "transform 0.2s ease-in-out",
                }}
              />
            </button>

            {/* Transaction Details */}
            {showDetails && (
              <div
                style={{
                  background: "#f9fafb",
                  borderRadius: "16px",
                  padding: "16px",
                  display: "flex",
                  flexDirection: "column",
                  gap: "8px",
                  width: "446px",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "flex-start",
                    justifyContent: "space-between",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Fee(0.5%)
                  </div>
                  <div
                    style={{
                      color: "#ff6900",
                      fontSize: "14px",
                      fontWeight: 700,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    -${fee}
                  </div>
                </div>

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

                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "flex-start",
                    justifyContent: "space-between",
                  }}
                >
                  <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: "flex-start",
                    justifyContent: "space-between",
                  }}
                >
                  <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: "flex-start",
                    justifyContent: "space-between",
                  }}
                >
                  <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: "flex-start",
                    justifyContent: "space-between",
                  }}
                >
                  <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: "flex-start",
                    justifyContent: "space-between",
                  }}
                >
                  <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={() => {
              onClose();
            }}
          >
            Confirm
          </Button>
        </div>
      </ModalContent>
    </Modal>
  );
}
