import React, { useEffect } from "react"
import Image from "next/image"
import Link from "next/link"

import {
  Modal,
  Button,
  Typography,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  ActionIconWrapper,
  InfoLinkTag,
} from "@/components/shared/components"
import { CloseIcon, LinkIcon, TooltipIcon } from "@/icons"
import { useThemeContext } from "@/providers/themeProvider"
import { howItWorksImage } from "@/components/shared/assets"

function HowItWorksModal({ closeModal }: { closeModal: () => void }) {
  const { theme } = useThemeContext()

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

  return (
    <Modal overlay isOpen>
      <FlexContainer
        style={{
          width: "72rem",
        }}
        width={100}
        flexDirection="column"
        gap={0.4}
      >
        <FlexContainer
          alignItems="center"
          justifyContent="space-between"
          width={100}
          padding="0.4rem"
        >
          <FlexContainer gap={1.2} alignItems="center">
            <Typography type="TITLE_XL" color={theme.colors.gray100}>
              Brahma Morpho Agent
            </Typography>
            <FlexContainer
              alignItems="center"
              bgColor={theme.colors.gray100}
              padding="0.2rem 0.8rem"
              borderRadius={0.4}
              flex={false}
              style={{ marginTop: "0.4rem" }}
            >
              <Typography type="TITLE_XS" color={theme.colors.black}>
                Early Beta
              </Typography>
            </FlexContainer>
          </FlexContainer>
          <ActionIconWrapper size="L" onClick={closeModal}>
            <CloseIcon width={16} />
          </ActionIconWrapper>
        </FlexContainer>

        <FlexContainer flexDirection="column" gap={1.2}>
          <GrayBoundaryBlackWrapper padding="0.4rem">
            <FlexContainer>
              <Image
                src={howItWorksImage.src}
                width={700}
                height={300}
                alt="nft"
                style={{
                  objectFit: "contain",
                }}
              />
            </FlexContainer>
            <FlexContainer
              justifyContent="center"
              alignItems="center"
              gap={0.4}
              width={100}
              padding="1.2rem"
            >
              <TooltipIcon color={theme.colors.warning} />
              <Typography type="TITLE_S" color={theme.colors.warning}>
                Agent is in Early Beta. Please proceed with appropriate caution
              </Typography>
            </FlexContainer>
            {/* <FlexContainer
              bgColor={theme.colors.gray700}
              width={100}
              padding="1.2rem"
              justifyContent="center"
              flexDirection="column"
              gap={0.8}
            >
              <FlexContainer alignItems="center" gap={0.8}>
                <Typography type="TITLE_M" color="white">
                  v 1.2
                </Typography>
                <InfoLinkTag content="Currently Live " tagColorType="console" />
              </FlexContainer>
              <FlexContainer gap={0.8} flexDirection="column">
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Initial deposit triggers atomic transaction: deploys
                  SAFE wallet, initializes Agent, and positions funds in Morpho
                  Vaults
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Agent receives time-bound permissions to execute
                  transactions within Morpho ecosystem via policy module
                  guardrails
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Position management based on 30-day APY moving average
                  with automated rebalancing at predefined thresholds set by
                  them
                </Typography>
              </FlexContainer>
            </FlexContainer> */}
            {/* <FlexContainer
              bgColor={theme.colors.gray700}
              width={100}
              padding="1.2rem"
              justifyContent="center"
              flexDirection="column"
              gap={0.8}
            >
              <FlexContainer alignItems="center" gap={0.8}>
                <Typography type="TITLE_M" color="white">
                  v 2.0
                </Typography>
                <InfoLinkTag content="Coming Soon" tagColorType="console" />
              </FlexContainer>
              <FlexContainer gap={0.8} flexDirection="column">
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Chat-based agent interface for strategy configuration:
                  minimum TVL thresholds, curator selection, target APY ranges,
                  and permitted token pairs
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Open API endpoints for developers to integrate custom
                  data sources and risk parameters
                </Typography>
              </FlexContainer>
            </FlexContainer> */}
            <FlexContainer
              bgColor={theme.colors.gray700}
              width={100}
              padding="1.2rem"
              justifyContent="center"
              flexDirection="column"
              gap={0.8}
            >
              <FlexContainer alignItems="center" gap={0.8}>
                <Typography type="TITLE_M" color="white">
                  How the Agent Works
                </Typography>
              </FlexContainer>
              <FlexContainer gap={0.8} flexDirection="column">
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Upon deposit, you get your own agent operating through
                  a dedicated Safe wallet.
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Your agent manages supplies in Morpho vaults following
                  strict policies and your set preferences.
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; The agent automatically seeks the best yields(APY)
                  across vaults, rebalancing based on your chosen schedule.
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Customize your strategy through our chat interface.
                </Typography>
              </FlexContainer>

              <FlexContainer alignItems="center" gap={0.8} padding="2rem 0 0 0">
                <Typography type="TITLE_M" color="white">
                  v2 [Coming Soon]
                </Typography>
              </FlexContainer>
              <FlexContainer gap={0.8} flexDirection="column">
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Built-in reward token claiming and management.
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Market preference controls (exclude or prioritize
                  specific Morpho markets).
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Developer APIs for custom integrations and risk models.
                </Typography>
                <Typography type="BODY_S" color={theme.colors.gray200}>
                  &bull; Position insights through agent chat interface.
                </Typography>
              </FlexContainer>
            </FlexContainer>
          </GrayBoundaryBlackWrapper>

          <GrayBoundaryBlackWrapper>
            <FlexContainer
              width={100}
              justifyContent="space-between"
              padding="1rem"
              alignItems="center"
            >
              <Typography type="TITLE_M">
                Create autonomous onchain agents
              </Typography>
              <Link target="_blank" href="https://t.me/+B_NtRNnc0RoyMzU9">
                <Button
                  style={{
                    gap: "0.4rem",
                  }}
                  buttonSize="S"
                  buttonType="primary"
                >
                  Build with ConsoleKit
                  <LinkIcon color={theme.colors.console2} />
                </Button>
              </Link>
            </FlexContainer>
          </GrayBoundaryBlackWrapper>
        </FlexContainer>
      </FlexContainer>
    </Modal>
  )
}

export default HowItWorksModal