'use client'

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

const ERROR_KEYS = ['invalidLink', 'expiredLink', 'emailExists'] as const

export function ActivateClient({ hash, realm }: { hash: string; realm: string }) {
  const t = useTranslations('Activate')
  // Sin hash el error se sabe YA, al renderizar (y 'invalidLink' es justo el
  // errorKey por defecto): se deriva del prop en vez de ponerlo con setState
  // dentro del efecto, que encadena un render de más.
  const [state, setState] = useState<'loading' | 'ok' | 'error'>(hash ? 'loading' : 'error')
  const [errorKey, setErrorKey] = useState<string>('invalidLink')
  const [email, setEmail] = useState('')
  const ran = useRef(false)

  useEffect(() => {
    if (!hash || ran.current) return // evita doble POST en StrictMode
    ran.current = true
    fetch('/api/auth/activate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ hash }),
    })
      .then((r) => r.json())
      .then((d: { success?: boolean; error?: string; email?: string }) => {
        if (d.success) {
          setEmail(d.email ?? '')
          setState('ok')
        } else {
          setErrorKey((ERROR_KEYS as readonly string[]).includes(d.error ?? '') ? d.error! : 'invalidLink')
          setState('error')
        }
      })
      .catch(() => setState('error'))
  }, [hash])

  // El envoltorio ya lo pone la página (`body-box-content centered`), así que aquí
  // van los <p> sueltos: es la estructura que tenían las plantillas del tema.
  return (
    <>
      {state === 'loading' && <p>{t('activating')}</p>}
      {state === 'ok' && (
        <>
          <br />
          <p>{t('welcome', { realm })}</p>
          <p>{t.rich('activated', { email, account: (c) => <span className="yellow-info">{c}</span> })}</p>
          <br />
          <p>{t('canPlay')}</p>
          <br />
        </>
      )}
      {state === 'error' && (
        <>
          <p className="red-info2">{t(errorKey)}</p>
          <br />
          <p>{t('needHelp', { realm })}</p>
        </>
      )}
    </>
  )
}