import { Flex, Tabs, Typography } from '@tidbcloud/uikit'
import { useMount } from 'ahooks'
import { observer } from 'mobx-react'
import { useEffect } from 'react'

import { heroTracing } from 'dbaas/components/Measurement'
import { useHelpCenterContext } from 'dbaas/screens/HelpCenter/context'
import { SAMPLE_DATA_SUCCESS_PATH } from 'dbaas/screens/HelpCenter/DataService'
import { useGetSampleDataAppStatus } from 'dbaas/services/dataservice'
import { EntityStampleDataTaskRecord } from 'dbaas/services/dataservice/interface'
import useStores from 'dbaas/stores/useStores'

import { useDataApiContext } from '../context'
import Postman from '../Postman'
import { DataApp } from '../types'

import AppLogs from './AppLogs'
import Chat2QueryLogs from './Chat2QueryLogs'
import Deployment from './Deployment'
import Integrations from './Integrations'
import MessageBar from './MessageBar'
import Overview from './Overview'
import SampleData from './SampleData'
import Settings from './Settings'
import SwaggerDocs from './SwaggerDocs'
import Usage from './Usage'

const BasicSetting = () => {
  const {
    orgId,
    projectId,
    editApp,
    setEditApp,
    getAppList,
    setEditEndpoint,
    setOpenedEndpList,
    openedEndpList,
    editEndpointRef,
    dataappOpenedTab,
    setDataappOpenedTab,
    setScrollEle
  } = useDataApiContext()
  const {
    store: { config }
  } = useStores()
  const { currentPath, setCurrentPath, dialogOpened, openDialog, setEditAppInHelpCenter } = useHelpCenterContext()
  const { data } = useGetSampleDataAppStatus(orgId, projectId, `${editApp?.id}`, {
    query: {
      enabled: !!orgId && !!projectId && !!editApp?.id && editApp.status !== 'normal',
      refetchInterval: 1000,
      refetchIntervalInBackground: false,
      refetchOnWindowFocus: false,
      useErrorBoundary: true,
      onSuccess: async (res) => {
        const status = res.data?.app_status || ''
        if (status === 'normal') {
          const list = (await getAppList()) as DataApp[]
          const app = list.find((item) => item.id === editApp?.id)
          if (app && app.endpoints?.length) {
            const endpoint = app.endpoints[0]

            setOpenedEndpList(openedEndpList.filter((item) => item.id !== endpoint.id).concat(endpoint))
            setEditApp(null)
            setEditEndpoint(endpoint)
            editEndpointRef.current = endpoint
            setScrollEle(endpoint)
            setEditAppInHelpCenter(app)
            openDialog()
            setCurrentPath(SAMPLE_DATA_SUCCESS_PATH)
          }
        }
      }
    }
  })

  useEffect(() => {
    const isGithubAuthing = JSON.parse(localStorage.getItem('github_connecting') || '{}') === 'true'
    if (editApp?.app_type === 'chat2query') {
      localStorage.removeItem('github_connecting')
    }
    if (
      (editApp?.app_type !== 'chat2query' && isGithubAuthing) ||
      (editApp?.app_type === 'chat2query' && ['Logs', 'Overview', 'Deployments'].includes(dataappOpenedTab))
    ) {
      setDataappOpenedTab('Settings')
    }
  }, [editApp?.id])

  useMount(() => {
    heroTracing.finish('c_/data-service')
  })

  const statusList = (data?.data?.task_records || []) as EntityStampleDataTaskRecord[]

  if (
    editApp?.status === 'initializing' &&
    !(currentPath.includes('/help/DataService/SampleDataApp') && dialogOpened)
  ) {
    return <SampleData statusList={statusList} />
  }

  return (
    <Flex h="100%" direction="column" pb={32}>
      <Flex mt={16} align="center" justify="space-between" pb={8}>
        <Typography variant="title-lg" ml={14}>
          {editApp?.app_name}
        </Typography>

        <Flex mr={24} align="center" gap={16}>
          <SwaggerDocs />
          <Postman />
        </Flex>
      </Flex>
      {editApp?.app_type !== 'chat2query' && <MessageBar />}
      <Tabs
        px={16}
        keepMounted={false}
        sx={() => ({ flex: 1, overflowY: 'auto' })}
        styles={() => ({
          list: {
            '&::before': {
              'border-style': 'none'
            }
          }
        })}
        value={dataappOpenedTab}
        onChange={(tabname) => {
          setDataappOpenedTab(tabname || 'Overview')
        }}
      >
        <Tabs.List>
          {editApp?.app_type !== 'chat2query' && <Tabs.Tab value="Overview">Overview</Tabs.Tab>}

          <Tabs.Tab value="Settings">Settings</Tabs.Tab>
          <Tabs.Tab value="Logs">Logs</Tabs.Tab>
          {editApp?.app_type !== 'chat2query' && <Tabs.Tab value="Deployments">Deployments</Tabs.Tab>}
          {config.enableDataServiceUsage && <Tabs.Tab value="Usage">Usage</Tabs.Tab>}
          <Tabs.Tab value="Integrations">Integrations</Tabs.Tab>
        </Tabs.List>

        <Tabs.Panel value="Overview">
          <Overview />
        </Tabs.Panel>
        <Tabs.Panel value="Settings">
          <Settings type={editApp?.app_type} />
        </Tabs.Panel>
        <Tabs.Panel value="Logs">
          <Tabs.Panel value="Logs">{editApp?.app_type === 'chat2query' ? <Chat2QueryLogs /> : <AppLogs />}</Tabs.Panel>
        </Tabs.Panel>
        <Tabs.Panel value="Deployments">
          <Deployment />
        </Tabs.Panel>
        {config.enableDataServiceUsage && (
          <Tabs.Panel value="Usage">
            <Usage key={editApp?.id} />
          </Tabs.Panel>
        )}
        <Tabs.Panel value="Integrations">
          <Integrations />
        </Tabs.Panel>
      </Tabs>
    </Flex>
  )
}

export default observer(BasicSetting)