import {
  Card,
  Box,
  Image,
  Flex,
  Typography,
  Drawer,
  Accordion,
  Button,
  Divider,
  Modal,
  HoverCard,
  useComputedColorScheme
} from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'
import { IconCheck, IconInfoCircle } from '@tidbcloud/uikit/icons'
import dayjs from 'dayjs'
import prettyMilliseconds from 'pretty-ms'
import { useState } from 'react'
import { useQueryClient } from 'react-query'

import TimeComponent from 'dbaas/components/TimeComponent'
import { RBACRoleUINames } from 'dbaas/contexts/access-control'
import {
  getGetOauthApplicationsQueryKey,
  revokeAuthorizedApplicationToken,
  useGetApplicationLatestToken
} from 'dbaas/services/oauth2'
import { Oauth2UserAuthorizedApp } from 'dbaas/services/oauth2/interface'
import { eventTracking } from 'dbaas/utils/tracking'

export const Revoke: React.FC<React.PropsWithChildren<{ id: number; name: string }>> = ({ name, id }) => {
  const [opened, setOpened] = useState(false)
  const queryClient = useQueryClient()

  const onClose = () => {
    setOpened(false)
  }

  const onSubmit = async () => {
    await revokeAuthorizedApplicationToken({ application_id: id })
    eventTracking('Revoked OAuth App')
    await queryClient.invalidateQueries(getGetOauthApplicationsQueryKey())
    onClose()
  }

  return (
    <div onClick={(e) => e.stopPropagation()}>
      <Button
        variant="outline"
        color="red"
        data-mp-event="Revoke OAuth App Modal Button Clicked"
        size="sm"
        px={12}
        sx={(theme) => ({ borderColor: theme.colors.red[4], backgroundColor: theme.colors.red[1] })}
        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
          e.stopPropagation()
          setOpened(true)
        }}
      >
        Revoke
      </Button>
      <Modal title="Revoke" opened={opened} onClose={onClose} centered>
        <Form
          onSubmit={onSubmit}
          onCancel={onClose}
          actionsProps={{
            confirmText: 'I understand, revoke access',
            confirmProps: {
              color: 'red',
              variant: 'light',
              'data-mp-event': 'Confirm Revoke OAuth App Button Clicked'
            }
          }}
        >
          <Typography variant="body-lg">
            <b>{name}</b> will no longer be able to access your TiDB Cloud account. You cannot undo this action.
          </Typography>
          <Typography variant="body-lg" mt={8}>
            Are you sure you want to revoke authorization?
          </Typography>
        </Form>
      </Modal>
    </div>
  )
}

export const AppCard: React.FC<React.PropsWithChildren<{ data: Oauth2UserAuthorizedApp }>> = ({ data }) => {
  const [opened, setOpened] = useState(false)
  const onClose = () => {
    setOpened(false)
  }
  const colorScheme = useComputedColorScheme()

  const { data: resp } = useGetApplicationLatestToken(
    { application_id: data.id },
    {
      query: {
        enabled: data.authorized
      }
    }
  )

  const scopes = resp?.token?.scopes || { project: '', org: '' }
  const now = dayjs()
  const lastUsedTime = dayjs(data.last_used_at)

  const lastUsed = data.last_used_at
    ? prettyMilliseconds(now.valueOf() - lastUsedTime.valueOf(), {
        compact: true,
        verbose: true,
        millisecondsDecimalDigits: 0,
        secondsDecimalDigits: 0
      })
    : ''

  return (
    <Box>
      <Card
        px={40}
        py={24}
        sx={{
          cursor: !!data.home_page_uri || data.authorized ? 'pointer' : undefined
        }}
        onClick={() => {
          if (data.authorized) {
            eventTracking('Show Authorized App Details')
            setOpened(true)
          } else if (!!data.home_page_uri) {
            window.open(data.home_page_uri)
          }
        }}
      >
        <Flex w="100%" justify="space-between" align="center">
          <Flex>
            <Image
              w={48}
              h={48}
              src={colorScheme === 'dark' ? data.logo_uri_dark : data.logo_uri_light}
              fit="contain"
              sx={{ flex: 'none' }}
            />
            <Flex ml={40} direction="column" justify="space-between">
              <Typography variant="title-lg">{data.name}</Typography>
              {data.authorized ? (
                <Typography
                  variant="body-lg"
                  onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                    e.stopPropagation()
                  }}
                >
                  Last used within the last {lastUsed}. Owned by{' '}
                  <a href={data.company_uri} target="_blank" rel="noreferrer">
                    {data.company}
                  </a>
                  .
                </Typography>
              ) : (
                <Typography variant="body-lg">{data.description}</Typography>
              )}
            </Flex>
          </Flex>
          {data.authorized && <Revoke name={data.name || ''} id={data.id || 0} />}
        </Flex>
      </Card>
      {data.authorized && (
        <Drawer
          opened={opened}
          trapFocus={false}
          size={560}
          position="right"
          onClose={onClose}
          padding={0}
          title={
            <Typography variant="title-lg" c="carbon.9">
              {data.name}
            </Typography>
          }
          styles={() => ({
            drawer: {
              display: 'flex',
              flexDirection: 'column'
            },
            header: {
              padding: '20px 24px',
              marginBottom: 0
            },
            body: {
              flex: 1,
              overflowY: 'auto'
            }
          })}
        >
          <Accordion
            multiple
            defaultValue={['about', 'permission']}
            sx={() => ({ flex: 1, overflowY: 'auto' })}
            styles={(theme) => ({
              control: {
                padding: '10px 24px',
                backgroundColor: theme.colors.carbon[2]
              },
              content: {
                padding: '16px 24px'
              }
            })}
          >
            <Accordion.Item value="about">
              <Accordion.Control>
                <Typography variant="action-md" c="carbon.9">
                  About
                </Typography>
              </Accordion.Control>
              <Accordion.Panel>
                <Flex gap={14}>
                  <Flex align="center" gap={4} w={134}>
                    <Typography variant="label-lg" display="inline-block">
                      Authorized Time
                    </Typography>
                    <HoverCard>
                      <HoverCard.Target>
                        <IconInfoCircle size={16} />
                      </HoverCard.Target>
                      <HoverCard.Dropdown>The time when you authorized the app.</HoverCard.Dropdown>
                    </HoverCard>
                  </Flex>
                  <Typography variant="body-lg">
                    <TimeComponent time={resp?.token?.created_at || ''} format="YYYY-MM-DD HH:mm:ss" />
                  </Typography>
                </Flex>
                <Flex gap={14} mt={10}>
                  <Flex align="center" gap={4} w={134}>
                    <Typography variant="label-lg" display="inline-block">
                      Expired Time
                    </Typography>
                    <HoverCard>
                      <HoverCard.Target>
                        <IconInfoCircle size={16} />
                      </HoverCard.Target>
                      <HoverCard.Dropdown>The time your authorization expires.</HoverCard.Dropdown>
                    </HoverCard>
                  </Flex>
                  <Typography variant="body-lg">
                    <TimeComponent time={resp?.token?.expire_at || ''} format="YYYY-MM-DD HH:mm:ss" />
                  </Typography>
                </Flex>
                <Flex gap={14} mt={10}>
                  <Flex align="center" gap={4} w={134} sx={{ flexShrink: 0 }}>
                    <Typography variant="label-lg" display="inline-block">
                      Website
                    </Typography>
                  </Flex>
                  <a href={data.home_page_uri} target="_blank" rel="noreferrer">
                    {data.home_page_uri}
                  </a>
                </Flex>
                <Flex gap={14} mt={10}>
                  <Flex align="center" gap={4} w={134} sx={{ flexShrink: 0 }}>
                    <Typography variant="label-lg" display="inline-block">
                      Developed By
                    </Typography>
                  </Flex>
                  <a href={data.company_uri} target="_blank" rel="noreferrer">
                    {data.company}
                  </a>
                </Flex>
              </Accordion.Panel>
            </Accordion.Item>
            <Accordion.Item value="permission">
              <Accordion.Control>
                <Typography variant="action-md" c="carbon.9">
                  Permission
                </Typography>
              </Accordion.Control>
              <Accordion.Panel>
                <Typography variant="body-lg">
                  Applications act on your behalf to access your data based on the permissions you grant them.
                </Typography>
                <Box mt={24}>
                  {[scopes.org, scopes.project].map((scope) => {
                    if (!scope) {
                      return null
                    }
                    return (
                      <Flex align="center" gap={8} mt={8} key={scope}>
                        <IconCheck c="peacock.7" size={16} />
                        <Typography variant="label-lg">{RBACRoleUINames[scope || '']}</Typography>
                      </Flex>
                    )
                  })}
                </Box>
              </Accordion.Panel>
            </Accordion.Item>
            <Flex justify="flex-end" p={24}>
              <Revoke name={data.name || ''} id={data.id || 0} />
            </Flex>
            <Divider />
          </Accordion>
        </Drawer>
      )}
    </Box>
  )
}