'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 BerryDashSubmitIcon () {
  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 Icon Submition'

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

  return (
    <div className='box'>
      <BackButton href='/game/berry-dash/icon-marketplace' />
      <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 icon'
          : 'Berry Dash Icon 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('name') as string
                const price = formData.get('price') as string
                const file = formData.get('bird') as File

                if (!file) {
                  alert('Please select a bird image!')
                  return
                }

                if (file.type !== 'image/png') {
                  alert('Please select a PNG file!')
                  return
                }

                const reader = new FileReader()
                reader.onload = async () => {
                  const base64Data = (reader.result as string).split(',')[1]

                  try {
                    const result = await axios.post(
                      '/api/berrydash/icon-marketplace/upload',
                      {
                        token,
                        fileContent: base64Data,
                        name: text,
                        price: Number(price)
                      },
                      {
                        headers: {
                          authorization: getCookie('accountToken', '-1')
                        }
                      }
                    )

                    if (result.data.success) {
                      setResult(2)
                    } else {
                      alert(
                        'Failed to submit icon, error: ' +
                          (result.data.message || 'n/a')
                      )
                    }
                  } catch (err: any) {
                    if (err.response) {
                      alert(
                        'Failed to submit icon, error: ' +
                          (err.response.data?.message ||
                            JSON.stringify(err.response.data))
                      )
                    } else if (err.request) {
                      alert('Failed to submit icon, no response from server.')
                    } else {
                      alert('Failed to submit icon, error: ' + err.message)
                    }
                  }
                }
                reader.readAsDataURL(file)
              }}
            >
              <input
                id='bird'
                name='bird'
                type='file'
                accept='image/png'
                required
                className='cursor-pointer'
              />
              <input
                id='name'
                name='name'
                placeholder='Bird Name'
                type='text'
                autoComplete='off'
                required
              />
              <input
                id='price'
                name='price'
                placeholder='Bird Price'
                type='number'
                autoComplete='off'
                min={10}
                required
              />
              <button type='submit'>Upload!</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 icon! It will be reviewed soon. Refresh to add more icon, there is no limit after all!'}
              </p>
            )
          )}
        </>
      )}
    </div>
  )
}