import Link from "next/link"
import styled from "styled-components"

import {
  Button,
  ContentWrapper,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  LogoViewer,
  Typography,
} from "@/components/shared/components"
import { MORPHO_STRATEGY_TOKENS, PAGES } from "@/components/shared/constants"
import { useThemeContext } from "@/providers/themeProvider"
import { Address } from "@/components/shared/types"
import useMorphoVaults from "../hooks/useMorphoVaults"
import Carousal from "@/components/shared/components/Carousal"
import {
  CarousalItemOneImage,
  carousalItemThreeImage,
  carousalItemTwoImage,
} from "@/components/shared/assets"
import Accordion from "@/components/shared/components/Accordion"

export const NFT_COLLECTION_ADDRESS =
  "0xac3f5cbcc024a03a161390ccefb7ea22c7a4256a" as Address

export default function SelectTokenPage() {
  const { theme } = useThemeContext()
  const { currentVault } = useMorphoVaults()
  const {
    apy: usdcApy,
    liquidity: usdcLiquidity,
    supply: usdcSupply,
    name: usdcVaultName,
  } = currentVault("usdc")
  const {
    apy: ethApy,
    liquidity: ethLiquidity,
    supply: ethSupply,
    name: ethVaultName,
  } = currentVault("weth")

  return (
    <>
      <FlexContainer padding="10rem 0 0 0" width={100} justifyContent="center">
        <FlexContainer
          style={{ maxWidth: "74.8rem" }}
          flexDirection="column"
          gap={3.6}
        >
          <StyledTitle>
            Select a token to deploy an agent and maximize your Morpho yields
          </StyledTitle>
          <FlexContainer gap={2.4} width={100}>
            <TokenCard
              apy={usdcApy}
              logo={MORPHO_STRATEGY_TOKENS.usdc.logo}
              tokenName={MORPHO_STRATEGY_TOKENS.usdc.name}
              totalDeposit={usdcSupply}
              liquidity={usdcLiquidity}
              tvl={usdcSupply}
              vaultName={usdcVaultName}
              link={`${
                PAGES.MORPHO_OPTIMIZER
              }/${MORPHO_STRATEGY_TOKENS.usdc.name.toLowerCase()}`}
            />
            <TokenCard
              apy={ethApy}
              totalDeposit={ethSupply}
              liquidity={ethLiquidity}
              logo={MORPHO_STRATEGY_TOKENS.weth.logo}
              tokenName={MORPHO_STRATEGY_TOKENS.weth.name}
              tvl={ethSupply}
              vaultName={ethVaultName}
              link={`${
                PAGES.MORPHO_OPTIMIZER
              }/${MORPHO_STRATEGY_TOKENS.weth.name.toLowerCase()}`}
            />
          </FlexContainer>
          {/* <Link style={{ width: "100%" }} href={PAGES.SWELL_REWARD}>
            Go to Swell Rewards
          </Link> */}

          <FlexContainer
            gap={0.8}
            flexDirection="column"
            width={100}
            padding="0rem 0 8rem 0"
          >
            <Typography type="TITLE_M" color={theme.colors.white}>
              How the Agent works
            </Typography>
            <Carousal
              autoPlay
              data={[
                {
                  image: CarousalItemOneImage.src,
                  title: "Deposit funds",
                  description:
                    "You can securely deposit USDC or wETH to the Morpho Agent, your funds are held in a secure user-owned Smart Contract Wallet, giving you full control and ownership at all times.",
                },
                {
                  image: carousalItemThreeImage.src,
                  title: "Your Agent's Secure Environment",
                  description:
                    "The agent operates through a dedicated sub-account in your Smart Wallet, optimizing Morpho positions based on your preferences (curator choice, rebalancing frequency). A built-in policy ensures the agent can only perform authorized Morpho actions.",
                },
                {
                  image: carousalItemTwoImage.src,
                  title: "Position Management & Rebalancing",
                  description:
                    "Your agent monitors Morpho's yield opportunities and automatically rebalances your funds according to your set frequency, always aiming for optimal returns while respecting your preferences.",
                },
              ]}
            />
          </FlexContainer>

          <FlexContainer
            width={100}
            gap={2.8}
            flexDirection="column"
            style={{ paddingBottom: "6rem" }}
          >
            <Accordion
              title="What happens to my funds after I deposit?"
              children={
                <FlexContainer>
                  <Typography type="TITLE_M" color={theme.colors.gray300}>
                    Your agent actively manages your funds across Morpho vaults
                    to find the highest yields based on your preferences. Your
                    funds remain in your control through an agent smart account
                    (Safe wallet) owned by your connected wallet.
                  </Typography>
                </FlexContainer>
              }
            />
            <Accordion
              title="How does rebalancing work?"
              children={
                <FlexContainer>
                  <Typography type="TITLE_M" color={theme.colors.gray300}>
                    At your chosen interval (weekly, bi-weekly, or monthly),
                    your agent searches for better yields across vaults while
                    following your preferences. While more frequent rebalancing
                    captures opportunities faster, each rebalancing incurs Base
                    network fees.
                  </Typography>
                </FlexContainer>
              }
            />
            <Accordion
              title="Can I withdraw anytime?"
              children={
                <FlexContainer>
                  <Typography type="TITLE_M" color={theme.colors.gray300}>
                    Yes, your funds are always accessible through your agent
                    account. Simply connect the same wallet you used to start
                    the agent at&nbsp;
                    <Link
                      style={{ color: theme.colors.console2 }}
                      href={"https://console.brahma.fi/account"}
                      target="_blank"
                    >
                      https://console.brahma.fi/account
                    </Link>
                    &nbsp;or through your Brahma account to withdraw.
                  </Typography>
                </FlexContainer>
              }
            />
            <Accordion
              title="Can I modify my agent position once started?"
              children={
                <FlexContainer>
                  <Typography type="TITLE_M" color={theme.colors.gray300}>
                    No, modifications to agent settings or deposit amounts
                    aren't supported in this version. To make changes, withdraw
                    your funds completely and create a new agent with your
                    preferred settings.
                  </Typography>
                </FlexContainer>
              }
            />
            <Accordion
              title="What are the agent's costs?"
              children={
                <FlexContainer>
                  <Typography type="TITLE_M" color={theme.colors.gray300}>
                    Setup fee: ~$0.3-1 (depends on Base network gas prices){" "}
                    <br />
                    Performance fee: 10% of yield earned in your deposit token{" "}
                    <br />
                    Example: For 100 USDC earned on your position, the agent
                    takes 10 USDC.
                  </Typography>
                </FlexContainer>
              }
            />
            <Accordion
              title="How are reward tokens handled?"
              children={
                <FlexContainer>
                  <Typography type="TITLE_M" color={theme.colors.gray300}>
                    The current beta version manages only your base deposits
                    (USDC, WETH). Additional rewards from Morpho (MORPHO, ION,
                    etc.) are distributed bi-weekly but aren't yet managed by
                    the agent. Automatic reward claiming and distribution to
                    your wallet is coming in the next update.
                  </Typography>
                </FlexContainer>
              }
            />
          </FlexContainer>
        </FlexContainer>
      </FlexContainer>
    </>
  )
}

type TokenCardProps = {
  logo: string
  tokenName: string
  apy: string
  totalDeposit: string
  liquidity: string
  link: string
  tvl: string
  vaultName: string
}

function TokenCard({
  logo,
  tokenName,
  apy,
  liquidity,
  link,
  tvl,
  vaultName,
}: TokenCardProps) {
  const { theme } = useThemeContext()
  return (
    <Link style={{ width: "100%" }} href={link}>
      <FlexContainer width={100} flexDirection="column" gap={2}>
        <GrayBoundaryBlackWrapper>
          <ContentWrapper padding="1.6rem 1.2rem">
            <FlexContainer
              justifyContent="space-between"
              width={100}
              alignItems="center"
            >
              <FlexContainer gap={0.8} alignItems="center">
                <LogoViewer size={44} logo={logo} />
                <Typography type="TITLE_M" color={theme.colors.white}>
                  {tokenName}
                </Typography>
              </FlexContainer>
              <FlexContainer
                alignItems="flex-end"
                flex={false}
                gap={0.4}
                flexDirection="column"
              >
                <Typography color={theme.colors.success}>{apy}</Typography>
                <Typography type="TITLE_XS" color={theme.colors.gray400}>
                  Current Max APY
                </Typography>
              </FlexContainer>
            </FlexContainer>
          </ContentWrapper>
          {/* <ContentWrapper padding="1.2rem">
            <FlexContainer gap={1.2} flexDirection="column">
              <InfoRow title="Vault Name" value={vaultName} />
              <InfoRow title="Vault TVL" value={tvl} />
              <InfoRow
                title="Available Liquidity"
                value={`${liquidity} ${tokenName}`}
              />
            </FlexContainer>
          </ContentWrapper> */}
        </GrayBoundaryBlackWrapper>
        <Button buttonType="white" buttonSize="L">
          <Typography type="TITLE_XS" style={{ color: "inherit" }}>
            Morpho {tokenName} Agent
          </Typography>
        </Button>
      </FlexContainer>
    </Link>
  )
}

function InfoRow({ title, value }: { title: string; value: string }) {
  const { theme } = useThemeContext()

  return (
    <FlexContainer
      justifyContent="space-between"
      width={100}
      alignItems="center"
    >
      <Typography type="BODY_S" color={theme.colors.gray200}>
        {title}
      </Typography>
      <Typography type="TITLE_S" color={theme.colors.gray100}>
        {value}
      </Typography>
    </FlexContainer>
  )
}

export const StyledTitle = styled(Typography)`
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  text-align: center;
`