import { Badge, Group, Tabs } from '@tidbcloud/uikit'
import { useLocalStorage } from '@tidbcloud/uikit/hooks'
import { useEffect, useMemo } from 'react'
import { useHistory, useLocation } from 'react-router-dom'

import TiDBLoading from 'dbaas/components/Placeholder'
import { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { useGetStatementsDatasource } from 'dbaas/services/useDiagnosisQuery'
import useStores from 'dbaas/stores/useStores'

interface DiagnosisTabsLayoutProps {
  tidb: SharedTiDB
}

const DiagnosisTabsLayout: React.FC<React.PropsWithChildren<DiagnosisTabsLayoutProps>> = ({ tidb, children }) => {
  const {
    store: {
      tenantData: { id: orgId }
    }
  } = useStores()
  const history = useHistory()
  const location = useLocation()
  const {
    data: statementsDatasource,
    isError: isStatementsDatasourceError,
    isLoading: isStatementsDatasourceLoading
  } = useGetStatementsDatasource(orgId, tidb, {
    query: {
      refetchOnWindowFocus: false,
      staleTime: Infinity,
      cacheTime: Infinity
    }
  })
  const isStatementV2Available = statementsDatasource?.v2_available === true
  const isStatementsDatasourceInitialLoading = isStatementsDatasourceLoading && !statementsDatasource
  const diagnosisBasePath = `/tidbs/${tidb.tidbId ?? ''}/diagnosis`
  const [lastTab, setLastTab] = useLocalStorage<{ clusterId: string; tab: string }>({
    key: 'dbaas.diagnosis.last_tab',
    defaultValue: { clusterId: '', tab: '' },
    getInitialValueInEffect: false
  })

  const tabConfigs = useMemo(
    () => [
      {
        path: 'slow-query',
        title: 'Slow Query',
        trackingTitle: 'Slow Query'
      },
      {
        path: 'sql-statement-v2',
        title: (
          <Group gap={8}>
            Statement Insight
            <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
              Preview
            </Badge>
          </Group>
        ),
        trackingTitle: 'Statement Insight',
        hide: !isStatementV2Available
      },
      {
        path: 'sql-statement',
        title: 'SQL Statement',
        trackingTitle: 'SQL Statement',
        hide: isStatementV2Available
      }
    ],
    [isStatementV2Available]
  )
  const visibleTabPaths = useMemo(() => tabConfigs.filter((tab) => !tab.hide).map((tab) => tab.path), [tabConfigs])
  const tabValue = useMemo(
    () =>
      [...tabConfigs]
        .sort((left, right) => right.path.length - left.path.length)
        .find((tab) => location.pathname.includes(tab.path))?.path,
    [location.pathname, tabConfigs]
  )

  function changeTab(path: string) {
    history.push(path)
    setLastTab({ clusterId: tidb.tidbId ?? '', tab: path })
  }

  useEffect(() => {
    if (!statementsDatasource && !isStatementsDatasourceError) {
      return
    }

    if (isStatementV2Available && location.pathname === `${diagnosisBasePath}/sql-statement`) {
      history.replace(`${diagnosisBasePath}/sql-statement-v2`)
      setLastTab({ clusterId: tidb.tidbId ?? '', tab: 'sql-statement-v2' })
    } else if (!isStatementV2Available && location.pathname === `${diagnosisBasePath}/sql-statement-v2`) {
      history.replace(`${diagnosisBasePath}/sql-statement`)
      setLastTab({ clusterId: tidb.tidbId ?? '', tab: 'sql-statement' })
    }
  }, [
    diagnosisBasePath,
    history,
    isStatementV2Available,
    isStatementsDatasourceError,
    location.pathname,
    setLastTab,
    statementsDatasource,
    tidb.tidbId
  ])

  useEffect(() => {
    if (isStatementsDatasourceInitialLoading || !location.pathname.endsWith('/diagnosis/')) {
      return
    }

    const firstValidPath = tabConfigs.find((tab) => !tab.hide)?.path ?? ''
    if (lastTab.clusterId !== tidb.tidbId) {
      history.replace(firstValidPath)
    } else {
      history.replace(visibleTabPaths.includes(lastTab.tab) ? lastTab.tab : firstValidPath)
    }
  }, [
    history,
    isStatementsDatasourceInitialLoading,
    lastTab.clusterId,
    lastTab.tab,
    location.pathname,
    tabConfigs,
    tidb.tidbId,
    visibleTabPaths
  ])

  if (isStatementsDatasourceInitialLoading) {
    return <TiDBLoading />
  }

  return (
    <Tabs
      value={tabValue}
      onChange={changeTab}
      className="wd-h-full"
      keepMounted={false}
      data-testid="premium-diagnosis-tabs"
    >
      <Tabs.List className="wd-border-0 wd-mb-16px wd-relative">
        {tabConfigs
          .filter((tab) => !tab.hide)
          .map((tab) => (
            <Tabs.Tab
              key={tab.path}
              value={tab.path}
              data-mp-event={`${tab.trackingTitle} Tab Clicked`}
              data-mp-source="TiDBMgmt - Diagnosis"
              data-mp-path={tab.path}
            >
              {tab.title}
            </Tabs.Tab>
          ))}
      </Tabs.List>
      {children}
    </Tabs>
  )
}

export default DiagnosisTabsLayout