// type PermissionModalProps = {}

import { getBaseChainScanLink } from "@/components/morphoStrategy/utils"
import { PermissionModalLottie } from "@/components/shared/assets"
import {
  ContentWrapper,
  FlexContainer,
  GrayBoundaryBlackWrapper,
  InfoLinkTag,
  LogoViewer,
  Modal,
  Typography,
} from "@/components/shared/components"
import CustomActionTagButton from "@/components/shared/components/InfoLinkTag/CustomActionTagButton"
import LottieReader from "@/components/shared/components/LottieReader"
import {
  BrahmaTextLogo,
  CloseIcon,
  SwapAgentIcon,
  TickIcon,
  TooltipIcon,
} from "@/icons"
import CheckCircleIcon from "@/icons/CheckCircleIcon"
import { useThemeContext } from "@/providers/themeProvider"
import { formatAmountWithOptions, truncateString } from "@/utils"
import useAutomationAgentStore from "../../store"

import * as S from "./styles"

const addresses = [
  {
    address: "0x1231DEB6f5749EF6cE6943a275A1D3E7486F4EaE",
    name: "Lifi Router",
    logo: "https://imagedelivery.net/wtv4_V7VzVsxpAFaxzmpbw/522fcaf3-3e38-480f-f227-670d318b2700/public",
  },
  {
    address: "0x6a000f20005980200259b80c5102003040001068",
    name: "Paraswap Router",
    logo: "https://cdn-images-1.medium.com/max/1200/1*htEeOMwRj3Vv3YsYu-Obyg@2x.png",
  },
  {
    address: "0x19cEeAd7105607Cd444F5ad10dd51356436095a1",
    name: "ODOS Router",
    logo: "https://pbs.twimg.com/profile_images/1780691794914684928/p9n8SDuS_400x400.jpg",
  },
  {
    address: "0x111111111117dC0aa78b770fA6A738034120C302",
    name: "1inch Router",
    logo: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x111111111117dC0aa78b770fA6A738034120C302/logo.png",
  },
  {
    address: "0xDef1C0ded9bec7F1a1670819833240f027b25EfF",
    name: "0x Router",
    logo: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xE41d2489571d322189246DaFA5ebDe1F4699F498/logo.png",
  },
  {
    address: "0x000000000022D473030F116dDEE9F6B43aC78BA3",
    name: "Permit2",
    logo: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/logo.png",
  },
  {
    address: "0x6fF5693b99212Da76ad316178A184AB56D299b43",
    name: "Uniswapv4",
    logo: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984/logo.png",
  },
]

export default function PermissionModal() {
  const { theme } = useThemeContext()
  const {
    balances,
    permissionModalData,
    updatePermissionModalData,
    selectedAgent,
    automationAgentData,
  } = useAutomationAgentStore()
  const isPendingState = permissionModalData.state === "PENDING"
  const { amount, primaryToken, secondaryToken } =
    automationAgentData[selectedAgent]

  const inputToken = selectedAgent === "SURGE" ? secondaryToken : primaryToken
  const agentName = selectedAgent === "SURGE" ? "Surge" : "Purge"

  return (
    <Modal isOpen isCenterAligned={false} top={10}>
      <FlexContainer
        gap={2}
        width={100}
        alignItems="center"
        flexDirection="column"
        justifyContent="center"
      >
        <S.StyledPermissionModal flex={false} flexDirection="column" gap={1.2}>
          <FlexContainer justifyContent="space-between" width={100}>
            <Typography type="TITLE_S" color={theme.colors.gray100}>
              {isPendingState
                ? "Permission Access Requested"
                : "Agent Activated Successfully"}
            </Typography>
            {!isPendingState && (
              <FlexContainer
                cursor="pointer"
                onClick={() =>
                  updatePermissionModalData({ isShowingModal: false })
                }
                padding="0.4rem"
                flex={false}
              >
                <CloseIcon
                  height={16}
                  width={16}
                  color={theme.colors.gray100}
                />
              </FlexContainer>
            )}
          </FlexContainer>

          <FlexContainer
            borderRadius={0.8}
            borderColor={theme.colors.gray700}
            padding="0.4rem"
            flexDirection="column"
            width={100}
            bgColor={theme.colors.black}
          >
            {isPendingState ? (
              <S.LottieContainer>
                <LottieReader loop animationData={PermissionModalLottie} />
              </S.LottieContainer>
            ) : (
              <S.LottieContainer>
                <SuccessState />
              </S.LottieContainer>
            )}

            <FlexContainer
              width={100}
              padding="0.8rem 0"
              justifyContent="center"
              alignItems="center"
              gap={0.4}
            >
              <SwapAgentIcon
                width={25}
                height={15}
                color={
                  selectedAgent === "SURGE"
                    ? theme.colors.success
                    : theme.colors.error
                }
              />
              <Typography type="TITLE_XS" color={theme.colors.gray200}>
                {agentName} Agent wants to access your deposited tokens
              </Typography>
            </FlexContainer>

            <GrayBoundaryBlackWrapper style={{ padding: "0", border: "none" }}>
              <ContentWrapper padding="0">
                <FlexContainer
                  padding="1.6rem 1.4rem 0.8rem 1.4rem"
                  alignItems="center"
                  gap={0.8}
                >
                  <TooltipIcon color={theme.colors.gray500} />
                  <Typography type="TITLE_XS" color={theme.colors.gray400}>
                    AGENT REQUESTED PERMISSIONS
                  </Typography>
                </FlexContainer>
              </ContentWrapper>

              <ContentWrapper padding="0">
                <FlexContainer
                  padding="1.6rem 1.2rem"
                  gap={1.6}
                  width={100}
                  justifyContent="space-between"
                  flexDirection="column"
                >
                  {inputToken ? (
                    <AllowedTokenRow
                      amount={amount}
                      logo={inputToken?.logo}
                      name={inputToken?.symbol || inputToken?.name || ""}
                    />
                  ) : (
                    balances.data.length > 0 &&
                    balances.data.map((balance) => (
                      <AllowedTokenRow
                        key={balance.address}
                        amount={balance.balanceOf?.formatted || "0"}
                        logo={balance.logo}
                        name={balance.symbol || balance.name || ""}
                      />
                    ))
                  )}
                  <FlexContainer gap={0.8} alignItems="center">
                    <CloseIcon
                      width={20}
                      height={20}
                      color={theme.colors.gray400}
                    />
                    <Typography type="TITLE_XS" color={theme.colors.gray400}>
                      Agent does not has permissions to withdraw your funds
                    </Typography>
                  </FlexContainer>
                </FlexContainer>
              </ContentWrapper>

              <ContentWrapper padding="0">
                <FlexContainer
                  padding="1.6rem 1.2rem"
                  gap={1.6}
                  flexDirection="column"
                  width={100}
                >
                  <FlexContainer gap={0.8}>
                    <CheckCircleIcon />
                    <Typography type="TITLE_XS" color={theme.colors.gray400}>
                      Whitelisted contracts for the Agent
                    </Typography>
                  </FlexContainer>

                  <FlexContainer style={{ flexWrap: "wrap" }} gap={0.8}>
                    {addresses.map((item) => (
                      <InfoLinkTag
                        leftIcon={<LogoViewer logo={item.logo} />}
                        rightSlot={
                          <CustomActionTagButton
                            icon={
                              <Typography type="BODY_MEDIUM_XS">
                                {truncateString(item.address)}
                              </Typography>
                            }
                          />
                        }
                        key={item.address}
                        content={truncateString(item.name)}
                        textToCopy={item.address}
                        link={getBaseChainScanLink(item.address)}
                      />
                    ))}
                  </FlexContainer>
                </FlexContainer>
              </ContentWrapper>
              <FlexContainer
                gap={0.8}
                padding="0.8rem 0"
                justifyContent="center"
                width={100}
              >
                <TooltipIcon color={theme.colors.gray500} />
                <Typography type="TITLE_XS" color={theme.colors.gray100}>
                  Grant Permissions by signing with wallet
                </Typography>
              </FlexContainer>
            </GrayBoundaryBlackWrapper>
          </FlexContainer>
        </S.StyledPermissionModal>
        <FlexContainer gap={1.2} justifyContent="center" alignItems="center">
          <Typography color={theme.colors.gray300} type="BODY_MEDIUM_S">
            Powered by
          </Typography>
          <BrahmaTextLogo />
        </FlexContainer>
      </FlexContainer>
    </Modal>
  )
}

function AllowedTokenRow({
  amount,
  logo,
  name,
}: {
  logo: string
  amount: string
  name: string
}) {
  const { theme } = useThemeContext()
  return (
    <FlexContainer justifyContent="space-between" width={100}>
      <FlexContainer gap={0.8}>
        <CheckCircleIcon />
        <Typography type="TITLE_XS" color={theme.colors.gray400}>
          Allow Token Access Permission
        </Typography>
      </FlexContainer>

      <FlexContainer gap={0.4} flex={false}>
        <LogoViewer size={20} logo={logo} />
        <Typography type="TITLE_XS" color={theme.colors.gray400}>
          {formatAmountWithOptions(amount)} {name}
        </Typography>
      </FlexContainer>
    </FlexContainer>
  )
}

function SuccessState() {
  const { theme } = useThemeContext()
  return (
    <FlexContainer
      style={{ minHeight: "16.4rem" }}
      justifyContent="center"
      alignItems="center"
      flexDirection="column"
      gap={1.2}
      width={100}
    >
      <FlexContainer
        flex={false}
        borderRadius={10}
        bgColor={theme.colors.success}
        borderColor={theme.colors.black}
        style={{ minHeight: "5.6rem", minWidth: "5.6rem" }}
        alignItems="center"
        justifyContent="center"
      >
        <TickIcon height={40} width={40} color={theme.colors.black} />
      </FlexContainer>

      <Typography type="TITLE_L" color={theme.colors.success}>
        Deposit Successful
      </Typography>
    </FlexContainer>
  )
}