NightSpire/web-next/app/[locale]/security-token/SecurityTokenForm.tsx

'use client'

import { useState } from 'react'
import { useTranslations, useLocale } from 'next-intl'

const ERROR_KEYS = ['cooldown', 'noEmail'] as const

export function SecurityTokenForm({ initialDate }: { initialDate: string | null }) {
  const t = useTranslations('SecurityToken')
  const locale = useLocale()
  const [date, setDate] = useState(initialDate)
  const [busy, setBusy] = useState(false)
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)

  async function request() {
    if (busy) return
    setBusy(true)
    setMessage(null)
    try {
      const res = await fetch('/api/account/security-token', { method: 'POST', credentials: 'same-origin' })
      const data: { success?: boolean; error?: string; tokenDate?: string } = await res.json()
      if (data.success) {
        setMessage({ ok: true, text: t('success') })
        if (data.tokenDate) setDate(data.tokenDate)
      } else {
        const key = (ERROR_KEYS as readonly string[]).includes(data.error ?? '') ? data.error! : 'genericError'
        setMessage({ ok: false, text: t(key) })
      }
    } catch {
      setMessage({ ok: false, text: t('genericError') })
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="mx-auto max-w-md text-center">
      <p className="mb-4 text-sm text-amber-200/70">{t('info')}</p>
      <p className="mb-4">
        {t('lastRequest')}:{' '}
        <span className="text-amber-400">{date ? new Date(date).toLocaleString(locale) : t('never')}</span>
      </p>
      <button
        onClick={request}
        disabled={busy}
        className="nw-btn disabled:opacity-60"
      >
        {busy ? t('requesting') : t('request')}
      </button>
      {message && <p className={`mt-3 ${message.ok ? 'text-green-400' : 'text-red-400'}`}>{message.text}</p>}
    </div>
  )
}