import { Box, Flex, Typography } from '@tidbcloud/uikit'
import { sha256 } from 'js-sha256'
import { Suspense, useEffect, useState } from 'react'
import { useHistory } from 'react-router'

import config from 'config'
import Link from 'dbaas/components/Link'
import { HeroComponent } from 'dbaas/components/Measurement'
import PageLoader from 'dbaas/components/Placeholder'
import { RegistrationReqConnectionType } from 'dbaas/services'
import { registration } from 'dbaas/services/account'
import { CentralRegistrationReq } from 'dbaas/services/account/interface'
import auth from 'dbaas/services/auth'
import {
  eventTracking,
  getUTMSource,
  PRODUCT_TYPES,
  REGISTER_TYPES,
  reportGA,
  reportSignup
} from 'dbaas/utils/tracking'

import { AcceptServices } from '../Common/AcceptServices'
import { useChat2QueryParams } from '../Common/Chat2Query'
import { SigninField, SignupForm } from '../Common/FormFields'
import { PageShell } from '../Common/Shell'
import type { UserInfoFormValues } from '../SignUp'

export const FreeTrial = () => {
  const history = useHistory()
  const { forChat2Query } = useChat2QueryParams()
  const params = new URLSearchParams(window.location.search)
  const providerSource = params.get('provider_source')

  const [loading, setLoading] = useState(false)

  const utm = getUTMSource()

  const onSubmit = async (data: UserInfoFormValues) => {
    const { first_name, last_name, company, ...payload } = data
    if (loading) {
      return
    }

    setLoading(true)

    const submitData: CentralRegistrationReq = {
      ...payload,
      first_name: first_name.trim(),
      last_name: last_name.trim(),
      company: (company || '').trim(),
      connection_type: RegistrationReqConnectionType.EMAIL,
      source: utm,
      channel: forChat2Query
    }
    try {
      await registration(submitData, {
        timeout: config.SIGNUP_TIMEOUT,
        isHandleErr: true,
        _warningStatus: [400]
      })
      eventTracking('Try Free Form Submission', {
        'Company Name': (company || '').trim(),
        channel: utm.utm_source || utm.utm_campaign,
        utm
      })
      reportSignup({ ...submitData, signupSource: 'try-free', productType: PRODUCT_TYPES.SERVERLESS })
      setLoading(false)

      // GA password signup event
      reportGA({
        event: 'registrationComplete'
      })
      reportGA({
        event: 'sign_up_complete',
        user_id: sha256(payload.email),
        sign_up_method: 'form',
        register_type: REGISTER_TYPES.FREE_TRIAL,
        most_recent_referral_url: utm.most_recent_referral_url,
        website_referrer_url: utm.website_referrer_url,
        product_type: PRODUCT_TYPES.SERVERLESS
      })
      history.push(`/signup?status=verifying&email=${encodeURIComponent(data.email || '')}&from=signup`)
    } catch (e) {
      setLoading(false)
      throw e
    }
  }

  // useGAPageView(true)

  useEffect(() => {
    if (auth.isAuthenticated()) {
      return history.push('/')
    }
  }, [history])

  if (auth.isAuthenticated()) {
    return null
  }

  return (
    <Suspense fallback={<PageLoader />}>
      <PageShell withAdvertisement>
        <HeroComponent />
        <Box
          sx={(theme) => ({
            width: 360,
            backgroundColor: '#FFFFFF',
            borderRadius: theme.defaultRadius,
            '@media screen and (max-width: 1024px)': {
              width: '100%',
              padding: '1.75rem 1.5rem'
            }
          })}
        >
          <Flex align="baseline" justify="space-between">
            <Typography variant="headline-lg" c="carbon.8">
              Sign Up
            </Typography>
            <SigninField />
          </Flex>
          <SignupForm
            onSubmit={onSubmit}
            formMode="onSubmit"
            layoutProps={{ gap: 0 }}
            withVendor={!providerSource}
            actionsProps={{
              mt: 16,
              cancelProps: { display: 'none' },
              confirmText: 'Get Started Free',
              confirmProps: {
                loading,
                w: '100%',
                h: 40,
                'data-mp-event': 'mp-getstartedfree-1691461013760'
              }
            }}
            errorMessageProps={{ mt: 16 }}
            ssoProps={{
              source: 'try-free',
              productType: PRODUCT_TYPES.SERVERLESS,
              mt: 0
            }}
          >
            <AcceptServices
              label={
                forChat2Query ? (
                  <label>
                    I agree to the{' '}
                    <Link
                      className="link"
                      href="https://www.pingcap.com/legal/privacy-policy-include-ai-powered-functions"
                      target="_blank"
                      rel="noopener noreferrer"
                      eventName="Privacy Policy Link Clicked"
                      eventParams={{ source: 'Sign Up' }}
                    >
                      Privacy Policy
                    </Link>{' '}
                    and{' '}
                    <Link
                      className="link"
                      href="https://www.pingcap.com/legal/tidb-cloud-services-agreement"
                      target="_blank"
                      rel="noopener noreferrer"
                      eventName="Services Agreement Link Clicked"
                      eventParams={{ source: 'Sign Up' }}
                    >
                      Services Agreement
                    </Link>{' '}
                    .
                  </label>
                ) : null
              }
            ></AcceptServices>
          </SignupForm>
        </Box>
      </PageShell>
    </Suspense>
  )
}

export default FreeTrial