import { EXPLORERS } from '@components/settings/PreferredExplorerSettings'
import { IconButton, LinkButton } from '@components/shared/Button'
import SheenLoader from '@components/shared/SheenLoader'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import Tooltip from '@components/shared/Tooltip'
import { Transition } from '@headlessui/react'
import {
  ChevronDownIcon,
  ChevronRightIcon,
  NoSymbolIcon,
} from '@heroicons/react/20/solid'
import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
import dayjs from 'dayjs'
import useLocalStorageState from 'hooks/useLocalStorageState'
import useMangoAccount from 'hooks/useMangoAccount'
import { useViewport } from 'hooks/useViewport'
import { useTranslation } from 'next-i18next'
import Image from 'next/legacy/image'
import { Fragment, useCallback, useState } from 'react'
import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
import { formatDecimal, formatFixedDecimals } from 'utils/numbers'
import { breakpoints } from 'utils/theme'

const ActivityFeedTable = ({
  activityFeed,
  handleShowActivityDetails,
  params,
}: {
  activityFeed: any
  handleShowActivityDetails: (x: LiquidationFeedItem) => void
  params: string
}) => {
  const { t } = useTranslation(['common', 'activity'])
  const { mangoAccount } = useMangoAccount()
  const actions = mangoStore.getState().actions
  const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
  const [offset, setOffset] = useState(0)
  const [preferredExplorer] = useLocalStorageState(
    PREFERRED_EXPLORER_KEY,
    EXPLORERS[0]
  )
  const { width } = useViewport()
  const showTableView = width ? width > breakpoints.md : false

  const handleShowMore = useCallback(() => {
    const mangoAccount = mangoStore.getState().mangoAccount.current
    const set = mangoStore.getState().set
    set((s) => {
      s.activityFeed.loading = true
    })
    if (!mangoAccount) return
    setOffset(offset + 25)
    actions.fetchActivityFeed(
      mangoAccount.publicKey.toString(),
      offset + 25,
      params
    )
  }, [actions, offset, params])

  const getCreditAndDebit = (activity: any) => {
    const { activity_type } = activity
    let credit = { value: '0', symbol: '' }
    let debit = { value: '0', symbol: '' }
    if (activity_type === 'liquidate_token_with_token') {
      const { side, liab_amount, liab_symbol, asset_amount, asset_symbol } =
        activity.activity_details
      if (side === 'liqee') {
        credit = { value: formatDecimal(liab_amount), symbol: liab_symbol }
        debit = {
          value: formatDecimal(asset_amount),
          symbol: asset_symbol,
        }
      } else {
        credit = { value: formatDecimal(asset_amount), symbol: asset_symbol }
        debit = { value: formatDecimal(liab_amount), symbol: liab_symbol }
      }
    }
    if (activity_type === 'deposit') {
      const { symbol, quantity } = activity.activity_details
      credit = { value: formatDecimal(quantity), symbol }
      debit = { value: '0', symbol: '' }
    }
    if (activity_type === 'withdraw') {
      const { symbol, quantity } = activity.activity_details
      credit = { value: '0', symbol: '' }
      debit = { value: formatDecimal(quantity * -1), symbol }
    }
    if (activity_type === 'swap') {
      const {
        swap_in_amount,
        swap_in_symbol,
        swap_out_amount,
        swap_out_symbol,
      } = activity.activity_details
      credit = {
        value: formatDecimal(swap_out_amount),
        symbol: swap_out_symbol,
      }
      debit = {
        value: formatDecimal(swap_in_amount * -1),
        symbol: swap_in_symbol,
      }
    }
    if (activity_type === 'perp_trade') {
      const { perp_market, price, quantity } = activity.activity_details
      credit = { value: quantity, symbol: perp_market }
      debit = { value: formatDecimal(quantity * price * -1), symbol: 'USDC' }
    }
    if (activity_type === 'openbook_trade') {
      const { side, price, size, base_symbol, quote_symbol } =
        activity.activity_details
      credit =
        side === 'buy'
          ? { value: formatDecimal(size), symbol: base_symbol }
          : { value: formatDecimal(size * price), symbol: quote_symbol }
      debit =
        side === 'buy'
          ? { value: formatDecimal(size * price * -1), symbol: quote_symbol }
          : { value: formatDecimal(size * -1), symbol: base_symbol }
    }
    return { credit, debit }
  }

  const getValue = (activity: any) => {
    const { activity_type } = activity
    let value = 0
    if (activity_type === 'liquidate_token_with_token') {
      const { side, liab_amount, liab_price, asset_amount, asset_price } =
        activity.activity_details
      if (side === 'liqee') {
        value = asset_amount * asset_price
      } else {
        value = liab_amount * liab_price
      }
    }
    if (activity_type === 'deposit' || activity_type === 'withdraw') {
      const { usd_equivalent } = activity.activity_details
      value =
        activity_type === 'withdraw' ? usd_equivalent * -1 : usd_equivalent
    }
    if (activity_type === 'swap') {
      const { swap_out_amount, swap_out_price_usd } = activity.activity_details
      value = swap_out_amount * swap_out_price_usd
    }
    if (activity_type === 'perp_trade') {
      const { maker_fee, price, quantity, taker_fee } =
        activity.activity_details
      value = quantity * price + maker_fee + taker_fee
    }
    if (activity_type === 'openbook_trade') {
      const { price, size } = activity.activity_details
      value = price * size
    }
    return value
  }

  return mangoAccount && (activityFeed.length || loadActivityFeed) ? (
    <>
      {showTableView ? (
        <Table className="min-w-full">
          <thead className="sticky top-0 z-10">
            <TrHead>
              <Th className="bg-th-bkg-1 text-left">{t('date')}</Th>
              <Th className="bg-th-bkg-1 text-right">
                {t('activity:activity')}
              </Th>
              <Th className="bg-th-bkg-1 text-right">{t('activity:credit')}</Th>
              <Th className="bg-th-bkg-1 text-right">{t('activity:debit')}</Th>
              <Th className="bg-th-bkg-1 text-right">
                {t('activity:activity-value')}
              </Th>
              <Th className="bg-th-bkg-1 text-right">{t('explorer')}</Th>
            </TrHead>
          </thead>
          <tbody>
            {activityFeed.map((activity: any) => {
              const { activity_type, block_datetime } = activity
              const { signature } = activity.activity_details
              const isLiquidation =
                activity_type === 'liquidate_token_with_token'
              const isOpenbook = activity_type === 'openbook_trade'
              const activityName = isLiquidation
                ? 'spot-liquidation'
                : isOpenbook
                ? 'spot-trade'
                : activity_type
              const amounts = getCreditAndDebit(activity)
              const value = getValue(activity)
              return (
                <TrBody
                  key={signature}
                  className={`default-transition text-sm hover:bg-th-bkg-2 ${
                    isLiquidation ? 'cursor-pointer' : ''
                  }`}
                  onClick={
                    isLiquidation
                      ? () => handleShowActivityDetails(activity)
                      : undefined
                  }
                >
                  <Td>
                    <p className="font-body tracking-wide">
                      {dayjs(block_datetime).format('ddd D MMM')}
                    </p>
                    <p className="text-xs text-th-fgd-3">
                      {dayjs(block_datetime).format('h:mma')}
                    </p>
                  </Td>
                  <Td className="text-right">
                    {t(`activity:${activityName}`)}
                  </Td>
                  <Td className="text-right font-mono">
                    {amounts.credit.value}{' '}
                    <span className="font-body tracking-wide text-th-fgd-3">
                      {amounts.credit.symbol}
                    </span>
                  </Td>
                  <Td className="text-right font-mono">
                    {amounts.debit.value}{' '}
                    <span className="font-body tracking-wide text-th-fgd-3">
                      {amounts.debit.symbol}
                    </span>
                  </Td>
                  <Td
                    className={`text-right font-mono ${
                      activityName === 'swap' ||
                      activityName === 'perp_trade' ||
                      isOpenbook
                        ? 'text-th-fgd-2'
                        : value >= 0
                        ? 'text-th-up'
                        : 'text-th-down'
                    }`}
                  >
                    {value > 0 &&
                    activityName !== 'swap' &&
                    activityName !== 'perp_trade' &&
                    !isOpenbook
                      ? '+'
                      : ''}
                    {formatFixedDecimals(value, true)}
                  </Td>
                  <Td>
                    {activity_type !== 'liquidate_token_with_token' ? (
                      <div className="flex items-center justify-end">
                        <Tooltip
                          content={`View on ${t(
                            `settings:${preferredExplorer.name}`
                          )}`}
                          placement="top-end"
                        >
                          <a
                            href={`${preferredExplorer.url}${signature}`}
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            <div className="h-6 w-6">
                              <Image
                                alt=""
                                width="24"
                                height="24"
                                src={`/explorer-logos/${preferredExplorer.name}.png`}
                              />
                            </div>
                          </a>
                        </Tooltip>
                      </div>
                    ) : (
                      <div className="flex items-center justify-end">
                        <ChevronRightIcon className="h-6 w-6 text-th-fgd-3" />
                      </div>
                    )}
                  </Td>
                </TrBody>
              )
            })}
          </tbody>
        </Table>
      ) : (
        <div>
          {activityFeed.map((activity: any) => (
            <MobileActivityFeedItem
              activity={activity}
              getValue={getValue}
              key={activity.activity_details.signature}
            />
          ))}
        </div>
      )}
      {loadActivityFeed ? (
        <div className="mt-4 space-y-1.5">
          {[...Array(4)].map((x, i) => (
            <SheenLoader className="mx-4 flex flex-1 md:mx-6" key={i}>
              <div className="h-16 w-full bg-th-bkg-2" />
            </SheenLoader>
          ))}
        </div>
      ) : null}
      {activityFeed.length && activityFeed.length % 25 === 0 ? (
        <div className="flex justify-center pt-6">
          <LinkButton onClick={handleShowMore}>Show More</LinkButton>
        </div>
      ) : null}
    </>
  ) : (
    <div className="flex flex-col items-center p-8">
      <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
      <p>{t('activity:no-activity')}</p>
    </div>
  )
}

export default ActivityFeedTable

const MobileActivityFeedItem = ({
  activity,
  getValue,
}: {
  activity: any
  getValue: (x: any) => number
}) => {
  const { t } = useTranslation(['common', 'activity'])
  const [expandActivityDetails, setExpandActivityDetails] = useState(false)
  const [preferredExplorer] = useLocalStorageState(
    PREFERRED_EXPLORER_KEY,
    EXPLORERS[0]
  )
  const { activity_type, block_datetime } = activity
  const { signature } = activity.activity_details
  const isLiquidation = activity_type === 'liquidate_token_with_token'
  const isSwap = activity_type === 'swap'
  const isPerp = activity_type === 'perp_trade'
  const activityName = isLiquidation ? 'spot-liquidation' : activity_type
  const value = getValue(activity)
  return (
    <div key={signature} className="border-b border-th-bkg-3 p-4">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm text-th-fgd-1">
            {dayjs(block_datetime).format('ddd D MMM')}
          </p>
          <p className="text-xs text-th-fgd-3">
            {dayjs(block_datetime).format('h:mma')}
          </p>
        </div>
        <div className="flex items-center space-x-4">
          <div>
            <p className="text-right text-xs">
              {t(`activity:${activityName}`)}
            </p>
            <p className="text-right font-mono text-sm text-th-fgd-1">
              {isLiquidation ? (
                formatFixedDecimals(value, true)
              ) : isSwap ? (
                <>
                  <span className="mr-1">
                    {activity.activity_details.swap_in_amount.toLocaleString(
                      undefined,
                      { maximumFractionDigits: 6 }
                    )}
                  </span>
                  <span className="font-body tracking-wide text-th-fgd-3">
                    {activity.activity_details.swap_in_symbol}
                  </span>
                  <span className="mx-1 font-body text-th-fgd-3">for</span>
                  <span className="mr-1">
                    {activity.activity_details.swap_out_amount.toLocaleString(
                      undefined,
                      { maximumFractionDigits: 6 }
                    )}
                  </span>
                  <span className="font-body tracking-wide text-th-fgd-3">
                    {activity.activity_details.swap_out_symbol}
                  </span>
                </>
              ) : isPerp ? (
                <>
                  <span
                    className={`mr-1 font-body ${
                      activity.activity_details.taker_side === 'bid'
                        ? 'text-th-up'
                        : 'text-th-down'
                    }`}
                  >
                    {activity.activity_details.taker_side === 'bid'
                      ? 'BUY'
                      : 'SELL'}
                  </span>
                  <span className="mr-1">
                    {activity.activity_details.quantity}
                  </span>
                  <span className="font-body text-th-fgd-3">
                    {activity.activity_details.perp_market}
                  </span>
                </>
              ) : (
                <>
                  <span className="mr-1">
                    {activity.activity_details.quantity}
                  </span>
                  <span className="font-body tracking-wide text-th-fgd-3">
                    {activity.activity_details.symbol}
                  </span>
                </>
              )}
            </p>
          </div>
          {isLiquidation ? (
            <IconButton
              onClick={() => setExpandActivityDetails((prev) => !prev)}
            >
              <ChevronDownIcon
                className={`${
                  expandActivityDetails ? 'rotate-180' : 'rotate-360'
                } h-6 w-6 flex-shrink-0 text-th-fgd-1`}
              />
            </IconButton>
          ) : (
            <a
              href={`${preferredExplorer.url}${signature}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              <div className="flex h-10 w-10 items-center justify-center">
                <Image
                  alt=""
                  width="24"
                  height="24"
                  src={`/explorer-logos/${preferredExplorer.name}.png`}
                />
              </div>
            </a>
          )}
        </div>
      </div>
      <Transition
        appear={true}
        show={expandActivityDetails}
        as={Fragment}
        enter="transition ease-in duration-200"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition ease-out"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        <div className="mt-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4">
          <div className="col-span-1">
            <p className="mb-0.5 text-sm">{t('activity:asset-liquidated')}</p>
            <p className="font-mono text-sm text-th-fgd-1">
              {formatDecimal(activity.activity_details.asset_amount)}{' '}
              <span className="font-body tracking-wide">
                {activity.activity_details.asset_symbol}
              </span>
              <span className="ml-2 font-body tracking-wide text-th-fgd-3">
                at
              </span>{' '}
              {formatFixedDecimals(activity.activity_details.asset_price, true)}
            </p>
            <p className="font-mono text-xs text-th-fgd-3">
              {formatFixedDecimals(
                activity.activity_details.asset_price *
                  activity.activity_details.asset_amount,
                true
              )}
            </p>
          </div>
          <div className="col-span-1">
            <p className="mb-0.5 text-sm">{t('activity:asset-returned')}</p>
            <p className="font-mono text-sm text-th-fgd-1">
              {formatDecimal(activity.activity_details.liab_amount)}{' '}
              <span className="font-body tracking-wide">
                {activity.activity_details.liab_symbol}
              </span>
              <span className="ml-2 font-body tracking-wide text-th-fgd-3">
                at
              </span>{' '}
              {formatFixedDecimals(activity.activity_details.liab_price, true)}
            </p>
            <p className="font-mono text-xs text-th-fgd-3">
              {formatFixedDecimals(
                activity.activity_details.liab_price *
                  activity.activity_details.liab_amount,
                true
              )}
            </p>
          </div>
          <div className="col-span-2 flex justify-center pt-3">
            <a
              className="default-transition flex items-center text-sm text-th-fgd-1 hover:text-th-fgd-3"
              href={`${preferredExplorer.url}${signature}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              <Image
                alt=""
                width="20"
                height="20"
                src={`/explorer-logos/${preferredExplorer.name}.png`}
              />
              <span className="ml-2 text-base">{t('view-transaction')}</span>
            </a>
          </div>
        </div>
      </Transition>
    </div>
  )
}