import { Badge, Box, Button, Card, Group, SimpleGrid, Stack, Typography } from '@tidbcloud/uikit'
import { IconArrowUpRight } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'

import { PageShell } from 'dbaas/layouts/v5/page'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { WAREHOUSE_URL } from './helper'

const featureCards = [
  {
    title: 'One Engine for Analytics, Search, and AI',
    description:
      'Combines ANSI SQL analytics, full-text search, vector search, and geospatial analysis in one cloud-native engine. Analyze structured and semi-structured data, run semantic retrieval, and support AI-oriented workflows without splitting every workload into separate specialized systems.'
  },
  {
    title: 'Elastic Warehouses for Dynamic Workloads',
    description:
      'Create, pause, resize, and scale warehouses based on workload demand. Separate storage and compute so teams can scale analytics performance independently while keeping infrastructure simple - pay as you go.'
  },
  {
    title: 'Built for Modern Data in Object Storage',
    description:
      'Use object storage and semi-structured data processing to support flexible analytics on diverse data types, from operational exports and event data to logs, documents, and Al-ready datasets.'
  }
] as const

export const MyLake = observer(() => {
  const {
    store: {
      lastVisitLocation: { orgId }
    }
  } = useStores()
  return (
    <PageShell
      bodyProps={{ pb: 60, sx: { zIndex: 1 } }}
      title={
        <Group gap={12}>
          My Lake
          <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
            Preview
          </Badge>
        </Group>
      }
      headerProps={{
        sticky: true,
        bg: 'carbon.1',
        rightSection: (
          <Group gap={8}>
            <Button
              size="sm"
              onClick={() => {
                window.open(`${WAREHOUSE_URL}?orgID=${orgId}`, '_blank', 'noopener,noreferrer')
              }}
              data-mp-event={MixpanelEvents.TidbResource.Create.EnterClicked}
              data-testid="my-lake-try-button"
              rightSection={<IconArrowUpRight />}
            >
              Try TiDB Cloud Lake
            </Button>
          </Group>
        )
      }}
    >
      <Box
        data-testid="my-lake-intro-container"
        sx={{
          minHeight: 'calc(100vh - 220px)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '24px 0'
        }}
      >
        <Stack gap={32} maw={1040} w="100%" align="center">
          <Stack gap={12} align="center">
            <Typography variant="headline-md" ta="center" c="carbon.9">
              TiDB Cloud Lake
            </Typography>
            <Typography variant="body-lg" ta="center" c="carbon.7">
              TiDB Cloud Lake is a cloud-native analytics warehouse built for modern analytics and AI-oriented data
              workflows, combining elastic warehouses, ANSI SQL analytics, vector search, full-text search, and object
              storage in one managed service. Learn more about{' '}
              <a
                href="https://docs.tidb.io/tidbcloudlake/lake-overview"
                target="_blank"
                rel="noopener noreferrer"
                data-force-keep-doc-link
              >
                TiDB Cloud Lake Overview
              </a>
              .
            </Typography>
          </Stack>

          <SimpleGrid cols={{ base: 1, md: 3 }} spacing={24} w="100%" data-testid="my-lake-feature-grid">
            {featureCards.map((feature) => (
              <Card
                key={feature.title}
                withBorder
                shadow="none"
                p={24}
                bg="carbon.2"
                radius="md"
                data-testid="my-lake-feature-card"
                data-feature={feature.title}
              >
                <Stack gap={24}>
                  <Typography variant="title-lg" c="carbon.9">
                    {feature.title}
                  </Typography>
                  <Typography variant="body-md" c="carbon.7">
                    {feature.description}
                  </Typography>
                </Stack>
              </Card>
            ))}
          </SimpleGrid>
        </Stack>
      </Box>
    </PageShell>
  )
})

export default MyLake