'use client'

import { useState } from 'react'

/* Early-access notification signup (L-01). 200 → success copy;
   503/4xx → the server's Arabic error verbatim; 5xx/network → generic fallback. */
export default function NotifyForm() {
  const [email, setEmail] = useState('')
  const [pending, setPending] = useState(false)
  const [done, setDone] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

  async function submit(e: React.FormEvent) {
    e.preventDefault()
    if (pending) return
    setPending(true)
    setError(null)
    try {
      const res = await fetch('/api/notify', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email }),
      })
      const data = (await res.json().catch(() => null)) as { error?: string; alreadySubscribed?: boolean } | null
      if (res.ok) {
        setDone(data?.alreadySubscribed ? 'بريدك مسجَّل لدينا بالفعل — سنراسلك عند تفعيل العضوية.' : 'تم! سنراسلك عند تفعيل العضوية.')
      } else {
        setError(data?.error ?? 'تعذر الحفظ، حاول مرة أخرى.')
      }
    } catch {
      setError('تعذر الحفظ، حاول مرة أخرى.')
    } finally {
      setPending(false)
    }
  }

  if (done) {
    return <p className="notify-done" role="status">{done}</p>
  }

  return (
    <form className="notify-form" onSubmit={submit}>
      <label className="sr-only" htmlFor="notify-email">البريد الإلكتروني</label>
      <input
        id="notify-email"
        type="email"
        name="email"
        required
        dir="ltr"
        placeholder="you@example.com"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button className="btn btn-primary" type="submit" disabled={pending || email.trim() === ''}>
        {pending ? 'جارٍ الحفظ…' : 'أعلمني عند تفعيل العضوية'}
      </button>
      {error && <p className="notify-error" role="alert">{error}</p>}
    </form>
  )
}