import styled, { css } from "styled-components"

import {
  FlexContainer,
  LogoViewer,
  Typography,
} from "@/components/shared/components"
import TextWithTooltip from "@/components/shared/components/TextWithTooltip"
import { useThemeContext } from "@/providers/themeProvider"
import { formatHours } from "@/utils"
import { customMedia, defaultTheme } from "@/lib"
import { AutomationAgentData } from "@/components/swap-agent/types"
import { useIsMobile } from "@/hooks/use-is-mobile"

type ReviewStepProps = {
  primaryTokenLogo?: string
  primaryTokenDetail: string
  primaryTitle: string

  secondaryTokenLogo?: string
  secondaryTokenDetail: string
  secondaryTitle: string

  duration: number

  maxTradeSize: string
  slippage: string
  selectedSlippage: AutomationAgentData["selectedSlippage"]
}

export default function ReviewStep({
  primaryTokenLogo,
  duration,
  maxTradeSize,
  primaryTitle,
  secondaryTitle,
  slippage,
  primaryTokenDetail,
  secondaryTokenDetail,
  secondaryTokenLogo,
  selectedSlippage,
}: ReviewStepProps) {
  const { theme } = useThemeContext()
  const isMobile = useIsMobile()
  const formattedDuration = formatHours(duration)

  const primaryTitleColor = primaryTitle.toLowerCase().includes("surge")
    ? theme.colors.success
    : primaryTitle.toLowerCase().includes("purge")
      ? theme.colors.error
      : undefined

  const DurationItem = () => (
    <DataItem
      title="Duration"
      bottomSlot={
        <FlexContainer alignItems="center" gap={isMobile ? 0.8 : 1.6}>
          <FlexContainer alignItems="center" gap={0.2}>
            <Text>{formattedDuration.day || "0"}</Text>
            <Text color={theme.colors.gray500}>D</Text>
          </FlexContainer>
          <FlexContainer alignItems="center" gap={0.2}>
            <Text>{formattedDuration.hour || "0"}</Text>
            <Text color={theme.colors.gray500}>H</Text>
          </FlexContainer>
        </FlexContainer>
      }
    />
  )

  return (
    <FlexContainer
      width={100}
      flexDirection="column"
      padding="1.6rem 2.4rem"
      borderColor={theme.colors.gray700}
      borderRadius={0.8}
      gap={2.4}
    >
      <FlexContainer justifyContent="space-between" width={100}>
        <DataItem
          title={primaryTitle}
          titleColor={primaryTitleColor}
          bottomSlot={
            <FlexContainer alignItems="center" gap={isMobile ? 0.4 : 0.8}>
              <LogoViewer size={isMobile ? 24 : 36} logo={primaryTokenLogo} />
              <Text>{primaryTokenDetail}</Text>
            </FlexContainer>
          }
        />
        <DataItem
          title={secondaryTitle}
          bottomSlot={
            <FlexContainer alignItems="center" gap={isMobile ? 0.4 : 0.8}>
              <LogoViewer size={isMobile ? 24 : 36} logo={secondaryTokenLogo} />
              <Text>{secondaryTokenDetail}</Text>
            </FlexContainer>
          }
        />
        {!isMobile && <DurationItem />}
      </FlexContainer>

      <FlexContainer justifyContent="space-between" width={100}>
        <DataItem
          title="Max Trade Size"
          bottomSlot={<Text>{maxTradeSize}</Text>}
        />
        {isMobile && <DurationItem />}
        {!isMobile && (
          <DataItem
            title="Slippage"
            bottomSlot={
              <Text>{selectedSlippage === "CUSTOM" ? slippage : "Auto"}</Text>
            }
          />
        )}
      </FlexContainer>

      {isMobile && (
        <FlexContainer justifyContent="space-between" width={100}>
          <DataItem
            title="Slippage"
            bottomSlot={
              <Text>{selectedSlippage === "CUSTOM" ? slippage : "Auto"}</Text>
            }
          />
        </FlexContainer>
      )}
    </FlexContainer>
  )
}

function DataItem({
  title,
  bottomSlot,
  tooltipText,
  isLastItem = false,
  titleColor = defaultTheme.colors.gray400,
}: {
  title: string
  titleColor?: string
  tooltipText?: string
  isLastItem?: boolean
  bottomSlot: React.ReactNode
}) {
  return (
    <FlexContainer
      gap={0.8}
      flexDirection="column"
      flex={false}
      alignItems={isLastItem ? "flex-end" : "flex-start"}
    >
      <TextWithTooltip
        text={title}
        type="TITLE_XS"
        color={titleColor}
        tooltipText={tooltipText}
      />

      {bottomSlot}
    </FlexContainer>
  )
}

const Text = styled(Typography)`
  ${({ color = defaultTheme.colors.gray100 }) => css`
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    color: ${color};

    ${customMedia.lessThan("small")`
      font-size: 1.8rem;
      line-height: 2.2rem;
    `}
  `}
`