import { useState } from 'react'
import { Link } from 'react-router-dom'
import { api } from '../../api/client.js'
import PlayerShell from './PlayerShell.jsx'

// Public "forgot password" request page. Submitting emails a tokened reset link to
// every active account on the address (see ResetPassword for the other half). The
// server never reveals whether the email exists — it always answers the same way —
// so this page shows an identical confirmation regardless, to avoid enumeration.
export default function ForgotPassword() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')
  const [busy, setBusy] = useState(false)
  const [sent, setSent] = useState(false)

  async function onSubmit(e) {
    e.preventDefault()
    setError('')
    if (!/.+@.+\..+/.test(email.trim())) return setError('Enter a valid email address.')
    setBusy(true)
    try {
      await api.forgotPassword(email.trim())
      setSent(true)
    } catch (err) {
      // Only a rate-limit (429) or a real outage surfaces here — a non-match still
      // returns 200. Keep the message generic either way.
      if (err.status === 429) setError('Too many requests. Please try again in a little while.')
      else setError('Could not send the reset email right now. Please try again later.')
      setBusy(false)
    }
  }

  if (sent) {
    return (
      <PlayerShell subtitle="Reset your password">
        <p className="sans" style={{ margin: 0, color: 'var(--muted)', lineHeight: 1.6, textAlign: 'center' }}>
          If an account exists for <strong style={{ color: 'var(--head)' }}>{email.trim()}</strong>, we’ve sent a link to
          reset its password. Check your inbox (and spam) — the link expires in about an hour.
        </p>
        <p className="sans" style={{ textAlign: 'center', margin: '18px 0 0' }}>
          <Link to="/account/login" style={{ color: 'var(--accent)', textDecoration: 'none' }}>Back to sign in</Link>
        </p>
      </PlayerShell>
    )
  }

  return (
    <PlayerShell
      subtitle="Reset your password"
      footer={
        <p className="sans" style={{ textAlign: 'center', margin: '16px 0 0', color: 'var(--dim)', fontSize: '0.84rem' }}>
          Remembered it?{' '}
          <Link to="/account/login" style={{ color: 'var(--accent)', textDecoration: 'none' }}>Sign in</Link>
        </p>
      }
    >
      <p className="sans" style={{ marginTop: 0, marginBottom: 18, color: 'var(--muted)', fontSize: '0.88rem', lineHeight: 1.6 }}>
        Enter the email on your account and we’ll send you a link to choose a new password.
      </p>
      <form onSubmit={onSubmit}>
        <label style={{ display: 'block', marginBottom: 22 }}>
          <span className="field-label">Email</span>
          <input type="email" autoComplete="email" autoFocus value={email} onChange={(e) => setEmail(e.target.value)} className="input" />
        </label>

        {error && <p className="sans" style={{ margin: '0 0 14px', color: '#d98b84', fontSize: '0.85rem', textAlign: 'center' }}>{error}</p>}

        <button type="submit" disabled={busy} className="btn btn-primary" style={{ display: 'block', width: '100%', borderRadius: 8, padding: 12, textAlign: 'center' }}>
          {busy ? 'Sending…' : 'Send reset link'}
        </button>
      </form>
    </PlayerShell>
  )
}