"use client";

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

interface ReviewModalProps {
  isOpen: boolean;
  onClose: () => void;
  amount: string;
  productName?: string;
}

export default function ReviewModal({
  isOpen,
  onClose,
  amount,
  productName = "High-Yield US Equity",
}: ReviewModalProps) {
  const gyusAmount = amount ? (parseFloat(amount) * 0.9852).toFixed(0) : "0";
  const usdValue = amount ? (parseFloat(amount) * 1.00045).toFixed(2) : "0.00";

  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",
          }}
        >
          {/* 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>

          {/* Product Info */}
          <div
            style={{
              background: "#f9fafb",
              borderRadius: "12px",
              padding: "16px",
              display: "flex",
              flexDirection: "row",
              gap: "12px",
              alignItems: "center",
            }}
          >
            <div
              style={{
                background: "#fff7ed",
                borderRadius: "6px",
                border: "0.75px solid rgba(0, 0, 0, 0.1)",
                width: "40px",
                height: "30px",
                boxShadow: "inset 0px 1.5px 3px 0px rgba(0, 0, 0, 0.05)",
                overflow: "hidden",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Image
                src="/lr0.svg"
                alt="Product"
                width={43}
                height={30}
                style={{ width: "107.69%", height: "100%", objectFit: "cover" }}
              />
            </div>
            <div
              style={{
                color: "#111827",
                fontSize: "18px",
                fontWeight: 700,
                lineHeight: "150%",
                fontFamily: "var(--font-inter)",
              }}
            >
              {productName}
            </div>
          </div>

          {/* Amount Section */}
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "16px",
              width: "446px",
            }}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "8px",
                alignItems: "center",
              }}
            >
              <div
                style={{
                  color: "#4b5563",
                  fontSize: "14px",
                  fontWeight: 700,
                  lineHeight: "150%",
                  fontFamily: "var(--font-inter)",
                }}
              >
                Deposit
              </div>
              <div style={{ textAlign: "center" }}>
                <span
                  style={{
                    color: "#111827",
                    fontSize: "48px",
                    fontWeight: 700,
                    lineHeight: "120%",
                    letterSpacing: "-0.01em",
                    fontFamily: "var(--font-inter)",
                  }}
                >
                  {amount || "0"}
                </span>
                <span
                  style={{
                    color: "#9ca1af",
                    fontSize: "20px",
                    fontWeight: 700,
                    lineHeight: "140%",
                    fontFamily: "var(--font-inter)",
                    marginLeft: "8px",
                  }}
                >
                  USDC
                </span>
              </div>
              <div
                style={{
                  color: "#4b5563",
                  fontSize: "18px",
                  fontWeight: 500,
                  lineHeight: "150%",
                  fontFamily: "var(--font-inter)",
                }}
              >
                ≈ ${usdValue}
              </div>
            </div>
          </div>

          {/* Transaction Details */}
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "16px",
              width: "446px",
            }}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "column",
                gap: "0px",
              }}
            >
              {/* Deposit Row */}
              <div
                style={{
                  borderRadius: "16px",
                  padding: "16px",
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    gap: "12px",
                    alignItems: "center",
                  }}
                >
                  <Image src="/icon0.svg" alt="" width={20} height={20} />
                  <div
                    style={{
                      color: "#4b5563",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    Deposit (USDC)
                  </div>
                </div>
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    gap: "8px",
                    alignItems: "center",
                  }}
                >
                  <div
                    style={{
                      color: "#111827",
                      fontSize: "14px",
                      fontWeight: 500,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    {amount ? parseFloat(amount).toLocaleString() : "0"}
                  </div>
                  <Image src="/icon3.svg" alt="" width={14} height={14} />
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 500,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    0
                  </div>
                </div>
              </div>

              {/* Get GYUS Row */}
              <div
                style={{
                  borderRadius: "16px",
                  padding: "16px",
                  display: "flex",
                  flexDirection: "row",
                  alignItems: "center",
                  justifyContent: "space-between",
                  height: "54px",
                }}
              >
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    gap: "12px",
                    alignItems: "center",
                  }}
                >
                  <Image src="/icon2.svg" alt="" width={20} height={20} />
                  <div
                    style={{
                      color: "#4b5563",
                      fontSize: "14px",
                      fontWeight: 400,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    GET(GYUS)
                  </div>
                </div>
                <div
                  style={{
                    display: "flex",
                    flexDirection: "row",
                    gap: "8px",
                    alignItems: "center",
                  }}
                >
                  <div
                    style={{
                      color: "#9ca1af",
                      fontSize: "14px",
                      fontWeight: 500,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    0.00
                  </div>
                  <Image src="/icon3.svg" alt="" width={14} height={14} />
                  <div
                    style={{
                      color: "#111827",
                      fontSize: "14px",
                      fontWeight: 500,
                      lineHeight: "150%",
                      fontFamily: "var(--font-inter)",
                    }}
                  >
                    {gyusAmount}
                  </div>
                </div>
              </div>
            </div>

            {/* APY Info */}
            <div
              style={{
                background: "#f2fcf7",
                borderRadius: "16px",
                border: "1px solid #cef3e0",
                padding: "16px",
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-between",
                overflow: "hidden",
              }}
            >
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  gap: "8px",
                  alignItems: "center",
                }}
              >
                <Image src="/icon4.svg" alt="" width={20} height={20} />
                <div
                  style={{
                    color: "#10b981",
                    fontSize: "14px",
                    fontWeight: 600,
                    lineHeight: "20px",
                    letterSpacing: "-0.15px",
                    fontFamily: "var(--font-inter)",
                  }}
                >
                  APY
                </div>
              </div>
              <div
                style={{
                  display: "flex",
                  flexDirection: "row",
                  gap: "4px",
                  alignItems: "center",
                }}
              >
                <div
                  style={{
                    color: "#10b981",
                    fontSize: "18px",
                    fontWeight: 700,
                    lineHeight: "28px",
                    letterSpacing: "-0.44px",
                    fontFamily: "var(--font-inter)",
                  }}
                >
                  22.0%
                </div>
                <Image src="/icon5.svg" alt="" width={16} height={16} />
              </div>
            </div>
          </div>

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