'use client'

import { useState } from 'react'
import { useTranslations } from 'next-intl'
import { useRouter } from '@/i18n/navigation'

/**
 * Desplegable para cambiar la cuenta de juego activa (WOW1, WOW2…) cuando la
 * Battle.net tiene más de una. Al cambiar, fija la cuenta en la sesión
 * (/api/auth/select-account) y refresca → todo /account (datos, personajes,
 * servicios, compras…) pasa a operar sobre la cuenta seleccionada.
 */
export function GameAccountSwitcher({
  accounts,
  currentId,
}: {
  accounts: { id: number; index: number }[]
  currentId: number
}) {
  const t = useTranslations('Account')
  const router = useRouter()
  const [busy, setBusy] = useState(false)

  async function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
    const id = Number(e.target.value)
    if (id === currentId || busy) return
    setBusy(true)
    try {
      const res = await fetch('/api/auth/select-account', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ accountId: id }),
      })
      const d = await res.json()
      if (d.success) router.refresh()
      else setBusy(false)
    } catch {
      setBusy(false)
    }
  }

  return (
    <div className="box-content">
      <div className="body-box-content centered">
        <p>
          {t('switchAccountLabel')}{' '}
          <select value={currentId} onChange={onChange} disabled={busy} aria-label={t('switchAccountLabel')}>
            {accounts.map((a) => (
              <option key={a.id} value={a.id}>
                WOW{a.index}
              </option>
            ))}
          </select>
        </p>
      </div>
    </div>
  )
}