import { useEffect } from "react"

import {
  Button,
  ContentWrapper,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  LogoViewer,
  Modal,
  TooltipBox,
  Typography,
} from "@/components/shared/components"
import CloseButtonBox from "@/components/shared/components/CloseButtonBox"
import TextWithTooltip from "@/components/shared/components/TextWithTooltip"
import { TickIcon } from "@/icons"
import { useThemeContext } from "@/providers/themeProvider"

import * as S from "./styles"

const PERFORMANCE_FEES_TOOLTIP =
  "This fee is only charged on earned yield and applies only when the agent re-balances your position."

type DepositModalProps = {
  logo: string
  amount: string
  isOpen: boolean
  rebalanceValue: string
  apy: string
  fees: string
  isDepositDone: boolean
  isFeeGreaterThanDeposit: boolean
  isDeploymentInProgress: boolean
  isDepositInProgress: boolean
  isWaitingForFunds: boolean
  onClose: () => void
  onDepositClick: () => void
  onDeployClick: () => void
  currentVaultName: string
  isTokenAlreadyDeposited?: boolean
}

export default function DepositModal({
  isOpen,
  onClose,
  amount,
  logo,
  rebalanceValue,
  fees,
  isDepositDone,
  onDepositClick,
  onDeployClick,
  isFeeGreaterThanDeposit,
  apy,
  isDepositInProgress,
  isDeploymentInProgress,
  isWaitingForFunds,
  currentVaultName,
  isTokenAlreadyDeposited,
}: DepositModalProps) {
  const { theme } = useThemeContext()
  const showFeeWarning = !isTokenAlreadyDeposited && isFeeGreaterThanDeposit

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        onClose()
      }
    }
    window.addEventListener("keydown", handleKeyPress)
    return () => {
      window.removeEventListener("keydown", handleKeyPress)
    }
  }, [onClose])

  return (
    <Modal isOpen={isOpen} onClickOutside={onClose}>
      <S.ModalSection>
        <FlexContainer justifyContent="space-between">
          <Typography type="TITLE_S" color={theme.colors.gray100}>
            Deposit & Setup Your Agent
          </Typography>
          <CloseButtonBox closeButtonClick={onClose} />
        </FlexContainer>
        <GrayBoundaryBlackWrapper padding="0.4rem">
          <ContentWrapper padding="1.2rem">
            <FlexContainer flexDirection="column" gap={0.4}>
              <Typography type="TITLE_XS" color={theme.colors.gray200}>
                Depositing
              </Typography>

              <FlexContainer justifyContent="space-between">
                <FlexContainer gap={0.8} alignItems="center">
                  <LogoViewer size={32} logo={logo} />
                  <Typography type="TITLE_XL" color={theme.colors.white}>
                    {amount}
                  </Typography>
                </FlexContainer>
              </FlexContainer>
            </FlexContainer>
          </ContentWrapper>

          <ContentWrapper padding="1.2rem">
            <FlexContainer gap={1.2} flexDirection="column" width={100}>
              <FlexContainer
                justifyContent="space-between"
                alignItems="center"
                width={100}
              >
                <Typography type="TITLE_XS" color={theme.colors.gray200}>
                  Estimated APY
                </Typography>
                <Typography type="TITLE_S" color={theme.colors.success}>
                  {apy}
                </Typography>
              </FlexContainer>

              <FlexContainer
                justifyContent="space-between"
                alignItems="center"
                width={100}
              >
                <Typography type="TITLE_XS" color={theme.colors.gray200}>
                  Vault Allocated
                </Typography>
                <Typography type="TITLE_XS" color={theme.colors.gray200}>
                  {currentVaultName}
                </Typography>
              </FlexContainer>

              <FlexContainer
                justifyContent="space-between"
                alignItems="center"
                width={100}
              >
                <Typography type="TITLE_XS" color={theme.colors.gray200}>
                  Rebalance frequency
                </Typography>
                <FlexContainer
                  padding="0.4rem 0.8rem"
                  flex={false}
                  borderRadius={0.2}
                  borderColor={theme.colors.gray600}
                >
                  <Typography type="BODY_MEDIUM_S" color={theme.colors.gray200}>
                    {rebalanceValue}
                  </Typography>
                </FlexContainer>
              </FlexContainer>
            </FlexContainer>
          </ContentWrapper>

          <ContentWrapper padding="1.2rem">
            <FlexContainer
              width={100}
              borderRadius={0.4}
              gap={0.8}
              flexDirection="column"
            >
              <FlexContainer justifyContent="space-between" width={100}>
                <Typography color={theme.colors.gray200} type="BODY_S">
                  Gas Fees
                </Typography>
                <Typography color={theme.colors.gray100} type="BODY_MEDIUM_S">
                  {fees}
                </Typography>
              </FlexContainer>

              <FlexContainer justifyContent="space-between" width={100}>
                <TextWithTooltip
                  text="Performance Fees"
                  color={theme.colors.gray200}
                  type="BODY_S"
                  tooltipText={PERFORMANCE_FEES_TOOLTIP}
                />
                <TooltipBox content={PERFORMANCE_FEES_TOOLTIP}>
                  <Typography color={theme.colors.gray100} type="BODY_MEDIUM_S">
                    10%
                  </Typography>
                </TooltipBox>
              </FlexContainer>

              {showFeeWarning && (
                <Typography color={theme.colors.error} type="BODY_MEDIUM_S">
                  Fee is greater than deposited amount
                </Typography>
              )}
            </FlexContainer>
          </ContentWrapper>
        </GrayBoundaryBlackWrapper>

        <GrayBoundaryBlackWrapper padding="0.4rem">
          <ContentWrapper padding="1.6rem">
            <FlexContainer justifyContent="space-between" alignItems="center">
              <FlexContainer gap={0.8} alignItems="center">
                <CheckCircle serialNumber={isDepositDone ? undefined : 1} />
                <Typography color={theme.colors.gray100} type="TITLE_XS">
                  Deposit Funds
                </Typography>
              </FlexContainer>

              <Button
                onClick={onDepositClick}
                disabled={
                  isDepositDone ||
                  isFeeGreaterThanDeposit ||
                  isDepositInProgress ||
                  isWaitingForFunds
                }
                buttonType="white"
              >
                {isDepositInProgress
                  ? "Depositing"
                  : isWaitingForFunds && !isDepositDone
                    ? "Waiting for funds"
                    : "Deposit"}
              </Button>
            </FlexContainer>
          </ContentWrapper>

          <ContentWrapper padding="1.6rem">
            <FlexContainer justifyContent="space-between" alignItems="center">
              <FlexContainer gap={0.8} alignItems="center">
                <CheckCircle serialNumber={2} />
                <Typography color={theme.colors.gray100} type="TITLE_XS">
                  Activate Agent
                </Typography>
              </FlexContainer>

              <Button
                onClick={onDeployClick}
                buttonType="white"
                disabled={!isDepositDone || isDeploymentInProgress}
              >
                {isDeploymentInProgress ? "Activating" : "Activate"}
              </Button>
            </FlexContainer>
          </ContentWrapper>

          <FlexContainer padding="0.8rem" width={100} justifyContent="center">
            <TextWithTooltip
              text="Both steps are required to activate the Morpho agent."
              tooltipText="The steps create your smart account and activate the Morpho agent with your preferences."
              color={theme.colors.gray100}
              type="BODY_MEDIUM_XS"
            />
          </FlexContainer>
        </GrayBoundaryBlackWrapper>
      </S.ModalSection>
    </Modal>
  )
}

export function CheckCircle({ serialNumber }: { serialNumber?: number }) {
  const { theme } = useThemeContext()
  return (
    <FlexContainer
      flex={false}
      borderRadius={2.4}
      bgColor={serialNumber ? theme.colors.black : theme.colors.success}
      borderColor={serialNumber ? theme.colors.gray600 : theme.colors.black}
      style={{ minHeight: "2.4rem", minWidth: "2.4rem" }}
      alignItems="center"
      justifyContent="center"
    >
      {serialNumber ? (
        <Typography type="TITLE_XS" color={theme.colors.gray300}>
          {serialNumber}
        </Typography>
      ) : (
        <TickIcon height={16} width={16} color={theme.colors.black} />
      )}
    </FlexContainer>
  )
}