'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import BrandingLogo from '../ui/BrandingLogo'
import { getApiBase } from '../lib/auth'

export default function ForgotPasswordPage() {
  const router = useRouter()
  const [identifier, setIdentifier] = useState('')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [status, setStatus] = useState<string | null>(null)

  const submit = async (event: React.FormEvent) => {
    event.preventDefault()
    if (!identifier.trim()) {
      setError('Enter your username or email.')
      return
    }
    setLoading(true)
    setError(null)
    setStatus(null)
    try {
      const baseUrl = getApiBase()
      const response = await fetch(`${baseUrl}/auth/password/forgot`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ identifier: identifier.trim() }),
      })
      const data = await response.json().catch(() => null)
      if (!response.ok) {
        throw new Error(typeof data?.detail === 'string' ? data.detail : 'Unable to send reset link.')
      }
      setStatus(
        typeof data?.message === 'string'
          ? data.message
          : 'If an account exists for that username or email, a password reset link has been sent.',
      )
    } catch (err) {
      console.error(err)
      setError(err instanceof Error ? err.message : 'Unable to send reset link.')
    } finally {
      setLoading(false)
    }
  }

  return (
    <main className="card auth-card">
      <BrandingLogo className="brand-logo brand-logo--login" />
      <h1>Forgot password</h1>
      <p className="lede">
        Enter the username or email you use for Jellyfin or Magent. If the account is eligible, a reset link
        will be emailed to you.
      </p>
      <form className="auth-form" onSubmit={submit}>
        <label>
          Username or email
          <input
            value={identifier}
            onChange={(event) => setIdentifier(event.target.value)}
            autoComplete="username"
            placeholder="you@example.com"
          />
        </label>
        {error && <div className="error-banner">{error}</div>}
        {status && <div className="status-banner">{status}</div>}
        <div className="auth-actions">
          <button type="submit" disabled={loading}>
            {loading ? 'Sending reset link…' : 'Send reset link'}
          </button>
        </div>
        <button type="button" className="ghost-button" onClick={() => router.push('/login')} disabled={loading}>
          Back to sign in
        </button>
      </form>
    </main>
  )
}