import { Box, BoxProps, Typography, List, Flex } from '@tidbcloud/uikit'
import React from 'react'

import { MixpanelEvents } from 'dbaas/utils/tracking'
import TiDBSummitLogo from 'media/tidb-summit-2026-logo.png'

import { useStyles } from './Shell.styles'

const SCAILE_2026_URL = 'https://www.pingcap.com/tidb-scaile-summit/?utm_source=tidb_cloud&utm_medium=login_banner'

interface PageShellProps {
  extra?: React.ReactNode
  rightSection?: React.ReactNode
  leftProps?: BoxProps
  slogans?: SlognProps[]
  withAdvertisement?: boolean
}

interface SlognProps {
  title: string
  description: string
}

export const SLOGANS: SlognProps[] = [
  {
    title: 'Get started for free',
    description:
      'Create and connect to a scalable, reliable, MySQL-compatible database in minutes with no software to install, configure, or manage.'
  },
  {
    title: 'Scale elastically at an affordable cost',
    description:
      'Storage, transactional, and analytical workloads elastically scale up or down in seconds to meet your application demands.'
  },
  {
    title: 'Deploy clusters anywhere in the world',
    description:
      'Availability in over 30 regions in Amazon Web Services, Google Cloud, Azure and Alibaba Cloud Platform.'
  },
  {
    title: 'Ensure robust security',
    description:
      'TiDB Cloud meet SOC 1 Type 2, SOC 2 Type 2, SOC 3, ISO 27001, ISO 27701, PCI DSS, GDPR, and HIPAA standards and requirements.'
  }
]

export const PageShell: React.FC<React.PropsWithChildren<PageShellProps>> = ({
  children,
  rightSection,
  leftProps,
  slogans = SLOGANS,
  extra,
  withAdvertisement = false
}) => {
  const { classes } = useStyles({ withAdvertisement })
  return (
    <div
      className={classes.pageShell}
      data-testid="page-shell"
      data-scaile-promotion={withAdvertisement && !rightSection ? 'true' : undefined}
    >
      <Box className={classes.hero}>
        <Box className={classes.logo}>
          <div></div>
        </Box>
        {extra}
      </Box>
      <Box className={classes.left} {...leftProps}>
        {children}
      </Box>
      <div className={classes.right}>
        {!withAdvertisement ? <div className="mask"></div> : null}
        <Box
          w={'100%'}
          h={'100%'}
          sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}
        >
          {!!rightSection ? (
            rightSection
          ) : withAdvertisement ? (
            <Flex
              justify="center"
              align="center"
              h="100%"
              direction="column"
              className={classes.summitContent}
              data-testid="page-shell-scaile-2026"
            >
              <Box component="img" src={TiDBSummitLogo} alt="TiDB SCaiLE 2026" className={classes.summitLogo} />
              <Box className={classes.summitCopy}>
                <Typography className={classes.summitTagline} c="white">
                  Infinite Agents. Infinite Data. One Infrastructure.
                </Typography>
                <Typography className={classes.summitDate} c="white">
                  October 15, 2026
                </Typography>
                <Typography className={classes.summitLocation} c="white">
                  Computer History Museum, Mountain View
                </Typography>
              </Box>
              <Box
                component="a"
                href={SCAILE_2026_URL}
                target="_blank"
                rel="noopener noreferrer"
                className={classes.summitButton}
                data-testid="page-shell-scaile-2026-register"
                data-mp-event={MixpanelEvents.PageShell.View.ButtonClicked}
                data-mp-campaign="scaile-2026"
              >
                Register Now
              </Box>
            </Flex>
          ) : (
            <Box className={classes.slogan}>
              <List c="white" center={true} styles={{ root: { listStyle: 'none' } }}>
                {slogans.map((slogan) => {
                  return (
                    <List.Item key={slogan.title} mt={40}>
                      <Typography variant="headline-lg" c="white" className="title">
                        {slogan.title}
                      </Typography>
                      <Typography variant="action-lg" c="white" mt={12} className="description">
                        {slogan.description}
                      </Typography>
                    </List.Item>
                  )
                })}
              </List>
            </Box>
          )}
        </Box>
      </div>
    </div>
  )
}