import React from "react"
import styled from "styled-components"

import {
  MorphoCardImage,
  SurgePurgeCardImage,
  SwellCardImage,
} from "@/components/shared/assets"
import { FlexContainer, Typography } from "@/components/shared/components"
import { BASE_CHAIN_ID, SWELL_CHAIN_ID } from "@/constants"
import { useIsMobile } from "@/hooks/use-is-mobile"
import { useThemeContext } from "@/providers/themeProvider"

import EarnCard, { EarnCardProps } from "../EarnCard"
import { PAGES } from "@/components/shared/constants"

interface EarnHeroSectionProps {
  scrollToStartBuilding: () => void
}

const cards: EarnCardProps[] = [
  {
    cardImage: SurgePurgeCardImage.src,
    cardDescription:
      "A trading agent that tracks the market and auto-executes your buy/sell strategy with optimal timing and size, adapting to liquidity and volatility in real time.",
    cardTitle: "Surge & Purge Agent",
    chainId: BASE_CHAIN_ID,
    redirectLink: PAGES.SURGE_PURGE,
  },
  {
    cardImage: MorphoCardImage.src,
    cardDescription:
      "A yield agent that auto-deploys funds to top-performing Morpho vaults and rebalances over time. Set risk preferences once and let the agent handle the rest.",
    cardTitle: "Morpho Agent",
    chainId: BASE_CHAIN_ID,
    redirectLink: PAGES.MORPHO_OPTIMIZER,
  },
  {
    cardImage: SwellCardImage.src,
    cardDescription:
      "Set-and-forget Swell reward manager that handles all claiming cycles. Claims wSWELL every 6 hours and starts vesting immediately for optimal returns with zero effort.",
    cardTitle: "Swell Reward Automation Agent",
    chainId: SWELL_CHAIN_ID,
    redirectLink: PAGES.SWELL_REWARD,
  },
]

function EarnHeroSection({ scrollToStartBuilding }: EarnHeroSectionProps) {
  const { theme } = useThemeContext()
  const isMobile = useIsMobile()

  return (
    <FlexContainer
      width={100}
      justifyContent="center"
      alignItems="center"
      padding={isMobile ? "6rem 2rem 4rem 2rem" : "8rem 12rem"}
      flexDirection="column"
      gap={isMobile ? 4 : 8}
    >
      <FlexContainer
        width={100}
        justifyContent="center"
        alignItems="center"
        flexDirection="column"
        gap={isMobile ? 1.6 : 2.4}
      >
        <FlexContainer
          gap={0.8}
          justifyContent="center"
          alignItems="center"
          flexDirection="column"
        >
          <GradientBorderContainer onClick={scrollToStartBuilding}>
            <Typography type="BODY_MEDIUM_XS" color={theme.colors.gray200}>
              BUILT WITH CONSOLEKIT
            </Typography>
          </GradientBorderContainer>
          <Typography
            style={{
              fontSize: isMobile ? "2.8rem" : "4.4rem",
              fontWeight: "500",
              lineHeight: isMobile ? "3.6rem" : "4.8rem",
            }}
            textAlign="center"
            color={theme.colors.white}
            type="TITLE_XXL"
          >
            Your On-Chain actions,
            <br /> powered by Agents
          </Typography>
        </FlexContainer>

        <Typography
          textAlign="center"
          type={isMobile ? "BODY_S" : "BODY_MEDIUM_L"}
          color={theme.colors.gray200}
        >
          AI agents that suggests, execute, optimize, and protect your assets.
        </Typography>
      </FlexContainer>

      <FlexContainer
        alignItems="center"
        justifyContent="center"
        flexDirection="column"
        width={100}
        gap={8}
      >
        <CardContainer flex={false}>
          {cards.map((card) => (
            <EarnCard key={card.cardTitle} {...card} />
          ))}
        </CardContainer>
      </FlexContainer>
    </FlexContainer>
  )
}

export default EarnHeroSection

const CardContainer = styled(FlexContainer)`
  width: 100%;
  gap: 4.4rem;
  flex-wrap: wrap;
  justify-content: center;

  @media (max-width: 1200px) {
    justify-content: center;
  }
`

const GradientBorderContainer: React.FC<{
  onClick: () => void
  children: React.ReactNode
}> = ({ children, onClick }) => (
  <FlexContainer
    borderRadius={0.8}
    padding="0.6rem 1rem"
    alignItems="center"
    justifyContent="center"
    gap={0.4}
    cursor="pointer"
    onClick={onClick}
    style={{
      background:
        "linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.04) 46.5%, rgba(153, 153, 153, 0.00) 100%)",
      position: "relative",
      overflow: "hidden", // This ensures content doesn't overflow the rounded corners
    }}
  >
    {/* Pseudo-element for the gradient border */}
    <div
      style={{
        position: "absolute",
        inset: 0,
        borderRadius: "0.8rem",
        padding: "1px", // Border width
        background: "linear-gradient(to bottom, white, black)",
        WebkitMask:
          "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
        WebkitMaskComposite: "xor",
        maskComposite: "exclude",
        pointerEvents: "none",
      }}
    />
    {children}
  </FlexContainer>
)