import { Card } from '@tidbcloud/uikit'
import { lazy, useEffect } from 'react'

import config from 'config'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { IndependentPageShell } from 'dbaas/layouts/v5/page'
import { PausedStatus, isClusterInvalid } from 'dbaas/screens/ClusterV2/components/PausedStatus'

const SQLEditorV2 = lazy(() => import('dbaas/screens/SqlEditorV2'))

const ClusterSQLEditor: React.FC<React.PropsWithChildren<{ cluster: SharedCluster }>> = ({ cluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}SQL Editor`
  }, [])

  const accessCheckProps = cluster.computed.isServerless
    ? {
        id: 'TidbxRead' as const
      }
    : {
        id: 'ClusterSQLEditorGate' as const
      }

  return (
    <IndependentPageShell>
      <PageAccessGuard {...accessCheckProps}>
        {isClusterInvalid(cluster) ? (
          <Card mx={24} shadow="none" h="calc(100vh - 152px)">
            <PausedStatus
              cluster={cluster}
              featureName="SQL Editor"
              featureDesc="Run SQL queries in the AI-assisted SQL Editor to unlock the potential of your data."
            />
          </Card>
        ) : (
          <SQLEditorV2 />
        )}
      </PageAccessGuard>
    </IndependentPageShell>
  )
}

export default ClusterSQLEditor