website/src/app/game/berry-dash/icon-marketplace/upload/page.tsx

'use client'

import { BackButton } from '@/components/BackButton'
import { ReloadButton } from '@/components/ReloadButton'
import { getCookie } from '@/util/cookie'
import { Turnstile } from '@marsidev/react-turnstile'
import axios from 'axios'
import { useRouter } from 'next/navigation'
import { useEffect, useRef, 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()
  const backButtonRef = useRef<HTMLAnchorElement>(null)

  const [name, setName] = useState<string>('')
  const [price, setPrice] = useState<number>(10)
  const [file, setFile] = useState<File | undefined>(undefined)
  const [preview, setPreview] = useState<string | null>(null)

  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 setTimeout(() => setLoading(false), 0)

    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        backButtonRef.current?.click()
      }
    }

    window.addEventListener('keydown', handleKeyDown)
    return () => window.removeEventListener('keydown', handleKeyDown)
  }, [router])

  return (
    <div className='box'>
      <BackButton
        href='/game/berry-dash/icon-marketplace'
        refLink={backButtonRef}
      />
      <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()

                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,
                        price: price.toString()
                      },
                      {
                        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'
                className='cursor-pointer'
                onChange={e => {
                  const f = e.target.files?.[0]
                  if (!f) return
                  if (f.type !== 'image/png') {
                    alert('Please select a PNG file!')
                    return
                  }
                  setFile(f)

                  const reader = new FileReader()
                  reader.onload = () => setPreview(reader.result as string)
                  reader.readAsDataURL(f)
                }}
                required
              />
              <input
                id='name'
                name='name'
                placeholder='Bird Name'
                type='text'
                autoComplete='off'
                maxLength={16}
                value={name}
                onChange={e => setName(e.target.value)}
                required
              />
              <input
                id='price'
                name='price'
                placeholder='Bird Price'
                type='number'
                autoComplete='off'
                min={10}
                value={price}
                onChange={e => setPrice(Number(e.target.value))}
                required
              />
              <button type='submit'>Upload!</button>
              <div className='mt-4'>
                <p className='text-center mb-1 text-xl'>Preview:</p>
                <div className='sub-box2 text-center'>
                  <div className='bg-(--col8) rounded-md w-fit h-fit p-2 mx-auto'>
                    <img
                      src={preview ?? undefined}
                      width={96}
                      height={96}
                      draggable={false}
                      className='pointer-events-none'
                    />
                  </div>
                  <p>
                    Bird Name:{' '}
                    {!/^[a-zA-Z0-9 ]+$/.test(name) || name.length > 16
                      ? 'N/A'
                      : name}
                  </p>
                  <p>Price: {price.toLocaleString('en-US')}</p>
                  <p>Designer Name: {getCookie('accountUsername', '-1')}</p>
                </div>
              </div>
            </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>
  )
}