'use client'

import { useState } from 'react'

/**
 * Desplegable INLINE para cambiar la cuenta de juego activa (WOW1, WOW2…),
 * mostrado en el campo «Nombre de la cuenta» cuando la Battle.net tiene más de
 * una. Al cambiar, fija la cuenta en la sesión (/api/auth/select-account) y
 * hace una RECARGA COMPLETA (no router.refresh) → todo /account (datos,
 * personajes, servicios, compras…) pasa a operar sobre la cuenta elegida y se
 * recargan bien todos los estilos/iconos.
 */
export function GameAccountSwitcher({
  accounts,
  currentId,
}: {
  accounts: { id: number; index: number }[]
  currentId: number
}) {
  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) window.location.reload()
      else setBusy(false)
    } catch {
      setBusy(false)
    }
  }

  return (
    <select value={currentId} onChange={onChange} disabled={busy} className="account-select" aria-label="Cuenta de juego">
      {accounts.map((a) => (
        <option key={a.id} value={a.id}>
          WOW{a.index}
        </option>
      ))}
    </select>
  )
}
