'use client'

import { BackButton } from '@/app/components/BackButton'
import { ReloadButton } from '@/app/components/ReloadButton'
import { getCookie } from '@/util/cookie'
import { Turnstile } from '@marsidev/react-turnstile'
import axios from 'axios'
import { useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'

export default function BerryDashSubmitSplash () {
  const [token, setToken] = useState<string | null>(null)
  const [result, setResult] = useState<number>(-1)
  const [loading, setLoading] = useState<boolean>(true)
  const router = useRouter()

  useEffect(() => {
    document.title = 'Lncvrt Games - Berry Dash Splash Text Submition'

    const token = getCookie('accountToken', '-1')
    if (token === '-1') {
      router.push('/account/login?redirect=/game/berry-dash/splash/submit')
    } else setLoading(false)
  }, [])

  return (
    <div className='box'>
      <BackButton href='/game/berry-dash/splash' />
      <ReloadButton action={() => window.location.reload()} />
      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
        {loading
          ? 'Loading...'
          : result == -1
          ? 'Verify you are human to submit a splash text'
          : 'Berry Dash Splash Text Submission'}
      </p>
      {!loading && (
        <>
          {result == -1 ? (
            <Turnstile
              siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
              onSuccess={async token => {
                setToken(token)
                setResult(0)
              }}
              onError={() => setResult(1)}
              className='flex justify-center'
            />
          ) : result == 0 ? (
            <form
              className='flex flex-col gap-2'
              onSubmit={async e => {
                e.preventDefault()

                const form = e.currentTarget
                const formData = new FormData(form)
                const text = formData.get('text') as string

                try {
                  const result = await axios.post(
                    '/api/berrydash/splash-text',
                    {
                      token,
                      content: text
                    },
                    {
                      headers: {
                        authorization: getCookie('accountToken', '-1')
                      }
                    }
                  )
                  if (result.data.success) {
                    setResult(2)
                  } else {
                    alert(
                      'Failed to submit splash text, error: ' +
                        (result.data.message || 'n/a')
                    )
                  }
                } catch (e: any) {
                  if (e.response) {
                    alert(
                      'Failed to submit splash text, error: ' +
                        (e.response.data?.message ||
                          JSON.stringify(e.response.data))
                    )
                  } else if (e.request) {
                    alert(
                      'Failed to submit splash text, no response from server.'
                    )
                  } else {
                    alert('Failed to submit splash text, error: ' + e.message)
                  }
                }
              }}
            >
              <input
                id='text'
                name='text'
                placeholder='Text'
                type='text'
                className='text-center w-120'
                required
                autoComplete='off'
              />
              <button type='submit'>Submit</button>
            </form>
          ) : (
            (result == 1 || result == 2) && (
              <p className='mt-2 -mb-2 text-center text-sm'>
                {result == 1
                  ? 'Unable to verify captcha, please reload page.'
                  : 'Successfully submitted splash text! It will be reviewed soon. Refresh to add more splash texts, there is no limit after all!'}
              </p>
            )
          )}
        </>
      )}
    </div>
  )
}