import { useState } from 'react'

// Reusable "create a game account" form (its own username + password — the game
// client credentials, distinct from the website login). Calls `submit(account,
// password)` which should POST /player/shard/account; on success calls onCreated.
// Used by the player portal (self-serve) and the invite-accept page alike.
export default function CreateGameAccountForm({ submit, onCreated, compact = false }) {
  const [account, setAccount] = useState('')
  const [password, setPassword] = useState('')
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState('')
  const [error, setError] = useState('')

  async function onSubmit(e) {
    e.preventDefault()
    setMsg(''); setError('')
    if (!/^[A-Za-z0-9][A-Za-z0-9_.-]{2,29}$/.test(account)) {
      return setError('Account name must be 3–30 letters, numbers, . _ or -.')
    }
    if (password.length < 8) return setError('Password must be at least 8 characters.')
    setBusy(true)
    try {
      await submit(account, password)
      setMsg(`Game account “${account}” created and linked.`)
      setAccount(''); setPassword('')
      if (onCreated) await onCreated()
    } catch (err) {
      if (err.status === 409) setError('That account name is already taken.')
      else if (err.status === 429) setError('The account limit for your network has been reached.')
      else if (err.status === 403) setError('Game-account signup is not available right now.')
      else if (err.status === 503) setError('The game server is unavailable — try again shortly.')
      else setError(err.message || 'Could not create the account right now.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <form onSubmit={onSubmit}>
      {!compact && (
        <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
          Choose the username and password you’ll type into the game client. These are your
          <strong style={{ color: 'var(--head)' }}> game</strong> credentials — separate from your website login.
        </p>
      )}
      <label style={{ display: 'block', marginBottom: 14 }}>
        <span className="field-label">Game account name</span>
        <input
          type="text" autoComplete="off" value={account}
          onChange={(e) => setAccount(e.target.value)} className="input" placeholder="e.g. darrow"
        />
      </label>
      <label style={{ display: 'block', marginBottom: 16 }}>
        <span className="field-label">Game password</span>
        <input
          type="password" autoComplete="new-password" value={password}
          onChange={(e) => setPassword(e.target.value)} className="input"
        />
      </label>

      {error && <p className="sans" style={{ margin: '0 0 12px', color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
      {msg && <p className="sans" style={{ margin: '0 0 12px', color: '#7fd0a4', fontSize: '0.85rem' }}>{msg}</p>}

      <button type="submit" disabled={busy} className="btn btn-primary btn-sq">
        {busy ? 'Creating…' : 'Create game account'}
      </button>
    </form>
  )
}