website/client/src/routes/player/PlayerAccount.jsx

import { useCallback, useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import MoonDot from '../../components/MoonDot.jsx'
import ProviderIcon from '../../components/ProviderIcon.jsx'
import { Loading, ErrorState } from '../../components/PageState.jsx'
import { useAuth } from '../../contexts/AuthContext.jsx'
import { api } from '../../api/client.js'

// ── Change username ────────────────────────────────────────────────────────
function ChangeUsername({ account, onChanged }) {
  const [username, setUsername] = useState(account.username)
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState('')
  const [error, setError] = useState('')

  async function save(e) {
    e.preventDefault()
    setMsg('')
    setError('')
    if (username.trim().length < 3) return setError('Username must be at least 3 characters.')
    setBusy(true)
    try {
      const { username: next } = await api.player.changeUsername(username.trim())
      setMsg('Username updated.')
      await onChanged(next)
    } catch (err) {
      if (err.status === 409) setError('That username is already taken.')
      else setError(err.message || 'Could not change your username.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <Section title="Username">
      <form onSubmit={save} style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320 }}>
        <label>
          <span className="field-label">Username</span>
          <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} className="input" autoComplete="username" />
        </label>
        <div>
          <button type="submit" disabled={busy || username.trim() === account.username} className="btn btn-primary btn-sq">
            {busy ? 'Saving…' : 'Change username'}
          </button>
        </div>
        <Note msg={msg} error={error} />
      </form>
    </Section>
  )
}

// ── Change / set password ──────────────────────────────────────────────────
function ChangePassword({ account }) {
  const hasPassword = account.has_password
  const [current, setCurrent] = useState('')
  const [next, setNext] = useState('')
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState('')
  const [error, setError] = useState('')

  async function save(e) {
    e.preventDefault()
    setMsg('')
    setError('')
    if (next.length < 8) return setError('New password must be at least 8 characters.')
    if (hasPassword && !current) return setError('Enter your current password.')
    setBusy(true)
    try {
      await api.player.changePassword(next, hasPassword ? current : undefined)
      setMsg(hasPassword ? 'Password changed.' : 'Password set. You can now sign in with it.')
      setCurrent('')
      setNext('')
    } catch (err) {
      setError(err.message || 'Could not change your password.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <Section title={hasPassword ? 'Password' : 'Set a password'}>
      {!hasPassword && (
        <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
          Your account was created through a linked provider and has no password yet. Set one to also be
          able to sign in with a username and password.
        </p>
      )}
      <form onSubmit={save} style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 320 }}>
        {hasPassword && (
          <label>
            <span className="field-label">Current password</span>
            <input type="password" value={current} onChange={(e) => setCurrent(e.target.value)} className="input" autoComplete="current-password" />
          </label>
        )}
        <label>
          <span className="field-label">New password</span>
          <input type="password" value={next} onChange={(e) => setNext(e.target.value)} className="input" autoComplete="new-password" />
        </label>
        <div>
          <button type="submit" disabled={busy} className="btn btn-primary btn-sq">
            {busy ? 'Saving…' : hasPassword ? 'Change password' : 'Set password'}
          </button>
        </div>
        <Note msg={msg} error={error} />
      </form>
    </Section>
  )
}

// ── Two-factor (TOTP) ──────────────────────────────────────────────────────
function TwoFactor({ account, reload }) {
  const enabled = account.totp_enabled
  const [setup, setSetup] = useState(null)
  const [code, setCode] = useState('')
  const [busy, setBusy] = useState(false)
  const [msg, setMsg] = useState('')
  const [error, setError] = useState('')

  async function begin() {
    setBusy(true); setMsg(''); setError('')
    try {
      setSetup(await api.player.totpSetup())
      setCode('')
    } catch (err) {
      setError(err.message || 'Could not start setup.')
    } finally {
      setBusy(false)
    }
  }
  async function confirm() {
    setBusy(true); setMsg(''); setError('')
    try {
      await api.player.totpEnable(code.trim())
      setSetup(null); setCode(''); setMsg('Two-factor is now enabled.')
      await reload()
    } catch (err) {
      setError(err.message || 'Could not enable two-factor.')
    } finally {
      setBusy(false)
    }
  }
  async function disable() {
    setBusy(true); setMsg(''); setError('')
    try {
      await api.player.totpDisable(code.trim())
      setCode(''); setMsg('Two-factor has been disabled.')
      await reload()
    } catch (err) {
      setError(err.message || 'Could not disable two-factor.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <Section title="Two-factor authentication">
      <div className="sans" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, border: '1px solid var(--line)', fontSize: '0.82rem', color: enabled ? '#7fd0a4' : 'var(--muted)', marginBottom: 18 }}>
        <span style={{ width: 9, height: 9, borderRadius: '50%', background: enabled ? '#7fd0a4' : 'var(--dim)' }} />
        {enabled ? 'Enabled' : 'Not enabled'}
      </div>

      {!enabled && !setup && (
        <div>
          <button onClick={begin} disabled={busy} className="btn btn-primary btn-sq">
            {busy ? 'Preparing…' : 'Set up two-factor'}
          </button>
        </div>
      )}

      {!enabled && setup && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.88rem' }}>
            Scan this QR code with your authenticator app, then enter the current 6-digit code.
          </p>
          <img src={setup.qr} alt="TOTP QR code" width={180} height={180} style={{ borderRadius: 8, background: '#fff', padding: 8, alignSelf: 'flex-start' }} />
          <label style={{ display: 'block', maxWidth: 220 }}>
            <span className="field-label">Verification code</span>
            <input type="text" inputMode="numeric" autoComplete="one-time-code" placeholder="6-digit code" value={code} onChange={(e) => setCode(e.target.value)} className="input" />
          </label>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <button onClick={confirm} disabled={busy || !code.trim()} className="btn btn-primary btn-sq">
              {busy ? 'Enabling…' : 'Confirm & enable'}
            </button>
            <button onClick={() => setSetup(null)} disabled={busy} className="pill">Cancel</button>
          </div>
        </div>
      )}

      {enabled && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.88rem' }}>
            Enter a current code from your authenticator to turn two-factor off.
          </p>
          <label style={{ display: 'block', maxWidth: 220 }}>
            <span className="field-label">Verification code</span>
            <input type="text" inputMode="numeric" autoComplete="one-time-code" placeholder="6-digit code" value={code} onChange={(e) => setCode(e.target.value)} className="input" />
          </label>
          <div>
            <button onClick={disable} disabled={busy || !code.trim()} className="btn btn-sq" style={{ borderColor: '#d98b84', color: '#d98b84' }}>
              {busy ? 'Disabling…' : 'Disable two-factor'}
            </button>
          </div>
        </div>
      )}
      <Note msg={msg} error={error} />
    </Section>
  )
}

// ── Linked SSO identities ──────────────────────────────────────────────────
function LinkedAccounts() {
  const [linked, setLinked] = useState(null)
  const [available, setAvailable] = useState([])
  const [error, setError] = useState('')

  const banner = (() => {
    const q = new URLSearchParams(window.location.search)
    if (q.get('linked')) return { ok: true, text: 'Account linked.' }
    if (q.get('link_error') === 'in_use') return { ok: false, text: 'That external account is already linked to another user.' }
    if (q.get('link_error')) return { ok: false, text: 'Could not link that account. Please try again.' }
    return null
  })()

  const load = useCallback(async () => {
    try {
      const [ids, avail] = await Promise.all([
        api.player.linkedIdentities(),
        api.authProviders().catch(() => []),
      ])
      setLinked(ids)
      setAvailable(Array.isArray(avail) ? avail : [])
    } catch {
      setError('Could not load linked accounts.')
    }
  }, [])
  useEffect(() => { load() }, [load])

  const nameFor = (id) => available.find((p) => p.id === id)?.name || id.charAt(0).toUpperCase() + id.slice(1)
  const iconFor = (id) => (id === 'google' || id === 'discord' ? id : 'oidc')

  async function unlink(provider) {
    if (!window.confirm(`Unlink ${nameFor(provider)} from your account?`)) return
    try {
      await api.player.unlinkIdentity(provider)
      await load()
    } catch (err) {
      setError(err.message || 'Could not unlink.')
    }
  }

  if (error) return <ErrorState message={error} />
  if (!linked) return null

  const linkedIds = new Set(linked.map((i) => i.provider))
  const linkable = available.filter((p) => !linkedIds.has(p.id))

  return (
    <Section title="Linked accounts">
      <p className="sans" style={{ marginTop: 0, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
        Link a Google, Discord, or other provider so you can sign in with it.
      </p>
      {banner && (
        <p className="sans" style={{ color: banner.ok ? '#7fd0a4' : '#d98b84', fontSize: '0.86rem' }}>{banner.text}</p>
      )}
      {linked.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, margin: '14px 0' }}>
          {linked.map((i) => (
            <div key={i.provider} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--line)', borderRadius: 8 }}>
              <span style={{ display: 'inline-flex', width: 20, height: 20 }}>
                <ProviderIcon icon={iconFor(i.provider)} size={20} />
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="sans" style={{ color: 'var(--head)', fontSize: '0.9rem' }}>{nameFor(i.provider)}</div>
                {i.email && <div className="sans dim" style={{ fontSize: '0.78rem' }}>{i.email}</div>}
              </div>
              <button onClick={() => unlink(i.provider)} className="pill" style={{ color: '#d98b84', borderColor: '#d98b84' }}>Unlink</button>
            </div>
          ))}
        </div>
      )}
      {linkable.length > 0 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 6 }}>
          {linkable.map((p) => (
            <button key={p.id} onClick={() => window.location.assign(`/api/v1/auth/sso/${p.id}/link?returnTo=${encodeURIComponent('/account')}`)} className="btn" style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center', width: '100%', maxWidth: 320, borderRadius: 8, padding: 10, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.04)', color: 'var(--ink)' }}>
              <span style={{ display: 'inline-flex', width: 18, height: 18 }}>
                <ProviderIcon icon={p.icon} size={18} />
              </span>
              Link {p.name}
            </button>
          ))}
        </div>
      )}
      {linked.length === 0 && linkable.length === 0 && (
        <p className="sans dim" style={{ fontSize: '0.86rem' }}>No SSO providers are enabled.</p>
      )}
    </Section>
  )
}

// ── Shared bits ────────────────────────────────────────────────────────────
function Section({ title, children }) {
  return (
    <section style={{ borderTop: '1px solid var(--line-soft)', paddingTop: 26, marginTop: 26 }}>
      <h2 className="display" style={{ marginTop: 0, fontSize: '1.15rem', color: 'var(--head)' }}>{title}</h2>
      {children}
    </section>
  )
}
function Note({ msg, error }) {
  if (!msg && !error) return null
  return <p className="sans" style={{ margin: '4px 0 0', color: error ? '#d98b84' : '#7fd0a4', fontSize: '0.85rem' }}>{error || msg}</p>
}

// ── Page ───────────────────────────────────────────────────────────────────
export default function PlayerAccount() {
  const { logout, refresh } = useAuth()
  const [account, setAccount] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  const load = useCallback(async () => {
    try {
      setAccount(await api.player.getAccount())
    } catch {
      setError('Could not load your account.')
    } finally {
      setLoading(false)
    }
  }, [])
  useEffect(() => { load() }, [load])

  // After a username change: reload local account + refresh the auth context so
  // the header reflects the new name.
  const onUsernameChanged = useCallback(async () => {
    await Promise.all([load(), refresh()])
  }, [load, refresh])

  return (
    <main style={{ minHeight: '100vh', background: 'var(--bg-deep)', color: 'var(--ink)' }}>
      <header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '18px 20px', borderBottom: '1px solid var(--line)', flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <MoonDot size={12} glow={0.5} />
          <span className="display" style={{ color: 'var(--head)', fontSize: '1.1rem', letterSpacing: '0.04em' }}>
            My Account
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Link to="/" className="sans" style={{ color: 'var(--accent)', fontSize: '0.84rem', textDecoration: 'none' }}>
            ← Site
          </Link>
          <button onClick={logout} className="pill">Sign out</button>
        </div>
      </header>

      <div style={{ maxWidth: 620, margin: '0 auto', padding: '10px 20px 60px' }}>
        {loading && <Loading />}
        {error && <ErrorState message={error} />}
        {!loading && !error && account && (
          <>
            <div style={{ paddingTop: 24 }}>
              <p className="sans" style={{ margin: 0, color: 'var(--muted)', fontSize: '0.9rem' }}>
                Signed in as <strong style={{ color: 'var(--head)' }}>{account.username}</strong>
                {account.email ? ` · ${account.email}` : ''}
              </p>
            </div>
            <ChangeUsername account={account} onChanged={onUsernameChanged} />
            <ChangePassword account={account} />
            <TwoFactor account={account} reload={load} />
            <LinkedAccounts />
          </>
        )}
      </div>
    </main>
  )
}