'use client'

import { useState } from 'react'
import { useRouter } from '@/i18n/navigation'

function transferError(error?: string): string {
  switch (error) {
    case 'missingFields':
      return 'Rellena el personaje de destino, la cantidad y el token de seguridad.'
    case 'invalidAmount':
      return 'La cantidad debe ser un número entero mayor que 0.'
    case 'invalidToken':
      return 'El token de seguridad no es válido.'
    case 'characterNotFound':
      return 'No existe ningún personaje con ese nombre.'
    case 'sameAccount':
      return 'No puedes transferirte PD a tu propia cuenta.'
    case 'insufficientFunds':
      return 'No tienes suficientes PD para realizar esta transferencia.'
    case 'notAuthenticated':
      return 'Tu sesión ha expirado. Inicia sesión de nuevo.'
    default:
      return 'No se pudo completar la transferencia. Inténtalo de nuevo.'
  }
}

export function TransferDPointsForm({ balance }: { balance: number }) {
  const router = useRouter()
  const [character, setCharacter] = useState('')
  const [amount, setAmount] = useState('')
  const [token, setToken] = useState('')
  const [busy, setBusy] = useState(false)
  const [message, setMessage] = useState<{ ok: boolean; text: string } | null>(null)

  if (balance <= 0) {
    return (
      <div className="centered">
        <br />
        <br />
        <span>No tienes PD</span>
        <br />
      </div>
    )
  }

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    if (busy) return
    const n = Number(amount)
    if (!character.trim() || !token.trim()) {
      setMessage({ ok: false, text: transferError('missingFields') })
      return
    }
    if (!Number.isInteger(n) || n <= 0) {
      setMessage({ ok: false, text: transferError('invalidAmount') })
      return
    }
    if (n > balance) {
      setMessage({ ok: false, text: transferError('insufficientFunds') })
      return
    }
    if (!window.confirm(`Vas a transferir ${n} PD al personaje "${character.trim()}".\nEsta acción no es reversible. ¿Deseas continuar?`)) return

    setBusy(true)
    setMessage(null)
    try {
      const res = await fetch('/api/dpoints/transfer', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ character: character.trim(), amount: n, token: token.trim() }),
      })
      const data: { success?: boolean; error?: string } = await res.json()
      if (data.success) {
        setMessage({ ok: true, text: `Has transferido ${n} PD al personaje "${character.trim()}".` })
        setCharacter('')
        setAmount('')
        setToken('')
        router.refresh()
      } else {
        setMessage({ ok: false, text: transferError(data.error) })
      }
    } catch {
      setMessage({ ok: false, text: transferError() })
    } finally {
      setBusy(false)
    }
  }

  return (
    <div className="centered">
      <br />
      <p className="yellow-info centered">Tienes {balance} PD disponibles</p>
      <br />
      <form onSubmit={handleSubmit} acceptCharset="utf-8">
        <input
          type="text"
          placeholder="Nombre del personaje de destino"
          value={character}
          onChange={(e) => setCharacter(e.target.value)}
          required
        />
        <br />
        <input
          type="number"
          placeholder="Cantidad de PD"
          min="1"
          max={balance}
          step="1"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          required
        />
        <br />
        <input
          type="text"
          placeholder="Token de seguridad"
          maxLength={6}
          value={token}
          onChange={(e) => setToken(e.target.value)}
          required
        />
        <br />
        <button type="submit" className="transfer-button" disabled={busy}>
          {busy ? 'Transfiriendo…' : 'TRANSFERIR PD'}
        </button>
      </form>
      <hr />
      <div className="alert-message" style={{ display: message ? 'block' : 'none' }}>
        {message && <span className={message.ok ? 'ok-form-response' : 'red-form-response'}>{message.text}</span>}
      </div>
    </div>
  )
}