anwar-pi-website/web/src/app/(frontend)/signup/page.tsx

'use client'
import Topnav from '@/components/topnav'
import Footer from '@/components/footer'


import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation'
import Link from 'next/link'
import { safeNext } from '@/lib/next'
import '../styles/signup.css'

/* Signup — markup from signup.html, wired to real Payload registration
   (create + auto-login) instead of the simulated client-only flow. */
export default function SignupPage() {
  const router = useRouter()
  const [showPassword, setShowPassword] = useState(false)
  const [status, setStatus] = useState('')
  const [email, setEmail] = useState('')
  const [emailError, setEmailError] = useState<string | null>(null)
  const [suggestion, setSuggestion] = useState<string | null>(null)
  const [pwOk, setPwOk] = useState(false)
  const [busy, setBusy] = useState(false)
  const [nextPath, setNextPath] = useState<string | null>(null)

  /* Common typos → canonical domain (step 16; on blur of the email input). */
  const EMAIL_TYPOS: Record<string, string> = {
    'gmial.com': 'gmail.com',
    'gmai.com': 'gmail.com',
    'gmail.co': 'gmail.com',
    'hotmial.com': 'hotmail.com',
    'outlook.co': 'outlook.com',
    'yahoo.co': 'yahoo.com',
  }
  function domainSuggestion(raw: string): string | null {
    const at = raw.lastIndexOf('@')
    if (at < 0) return null
    return EMAIL_TYPOS[raw.slice(at + 1).toLowerCase().trim()] ?? null
  }

  useEffect(() => {
    setNextPath(safeNext(new URLSearchParams(window.location.search).get('next')))
  }, [])

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const form = e.currentTarget
    const data = new FormData(form)
    setEmailError(null)
    if (!form.checkValidity()) {
      setStatus('تحقق من جميع الحقول المطلوبة.')
      form.reportValidity()
      return
    }
    setBusy(true)
    setStatus('')
    try {
    const res = await fetch('/api/users', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: data.get('email'), password: data.get('password'), fullName: data.get('name'), termsVersion: '2026-10-03' }),
    })
    if (!res.ok) {
      const err = await res.json().catch(() => null) as { error?: string; errors?: { message?: string; path?: string; field?: string }[] } | null
      // Middleware 429 shape: { error: 'محاولات كثيرة جدًا. حاول بعد قليل.' }
      // + Retry-After seconds → show verbatim, append «حاول بعد X دقيقة.»
      const retryAfterHeader = res.headers.get('Retry-After')
      if (typeof err?.error === 'string') {
        const retryAfterSec = Number(retryAfterHeader)
        setStatus(
          retryAfterHeader && Number.isFinite(retryAfterSec)
            ? `${err.error} حاول بعد ${Math.max(1, Math.ceil(retryAfterSec / 60))} دقيقة.`
            : err.error,
        )
        setBusy(false)
        return
      }
      const first = err?.errors?.[0]
      const failedField = first?.path ?? first?.field
      if (failedField === 'email' && first?.message) {
        // Duplicate email (unique-constraint ValidationError) → inline under
        // the email input, not the global status line.
        setEmailError('هذا البريد مسجَّل لدينا.')
      } else {
        setStatus(first?.message || 'تعذّر إنشاء الحساب — قد يكون البريد مستخدماً بالفعل.')
      }
      setBusy(false)
      return
    }
    const login = await fetch('/api/users/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: data.get('email'), password: data.get('password') }),
    })
    if (login.ok) {
      try { sessionStorage.setItem('anwarpi:signup-email', String(data.get('email'))) } catch { /* private mode */ }
      try { nextPath ? sessionStorage.setItem('anwarpi:signup-next', nextPath) : sessionStorage.removeItem('anwarpi:signup-next') } catch { /* private mode */ }
      router.refresh()
      router.push('/verify-email')
      return
    }
    setStatus('تم إنشاء الحساب — سجّل الدخول للمتابعة.')
    router.push(nextPath ? '/login?next=' + encodeURIComponent(nextPath) : '/login')
    } catch {
      setStatus('تعذّر الاتصال. حاول مرة أخرى بعد التحقق من اتصالك.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <div id="site" className="site-page page-signup">
      <Topnav />
      <main id="content" className="auth">
        <section className="auth-story">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img className="auth-mark" src="/brand/mark-light.svg" alt="" width={436} height={382} />
          <h1>ابدأ بحساب مجاني.</h1>
          <p>الحساب المجاني يفتح كل الأدلة المجانية كاملة والتعليق عليها. يمكنك الاشتراك في العضوية لاحقاً إن احتجتها.</p>
        </section>
        <section className="auth-form-wrap" data-od-id="signup-form-section">
          <form className="auth-form" id="signupForm" method="post" action="/api/users" noValidate onSubmit={onSubmit} data-od-id="signup-form">
            <p className="eyebrow">حساب جديد</p>
            <h2 data-od-id="signup-title">إنشاء حساب</h2>
            <p className="lead">أدخل بياناتك الأساسية للبدء.</p>
            <div className="field"><label htmlFor="name">الاسم</label><input className="input" id="name" name="name" type="text" autoComplete="name" minLength={2} required onInvalid={e => e.currentTarget.setCustomValidity('أدخل اسمك.')} onInput={e => e.currentTarget.setCustomValidity('')} /></div>
            <div className="field"><label htmlFor="email">البريد الإلكتروني</label><input className="input" id="email" name="email" type="email" inputMode="email" autoComplete="email" placeholder="name@example.com" dir="ltr" required value={email} onChange={e => setEmail(e.target.value)} onBlur={e => setSuggestion(domainSuggestion(e.target.value))} onInvalid={e => e.currentTarget.setCustomValidity('أدخل بريداً إلكترونياً صحيحاً.')} onInput={e => e.currentTarget.setCustomValidity('')} />
              {emailError && (
                <p className="field-error" role="alert">هذا البريد مسجَّل لدينا. <Link href="/login?next=/verify-email">تسجيل الدخول</Link></p>
              )}
              {!emailError && suggestion && (
                <button type="button" className="typo-suggest" onClick={() => { const at = email.lastIndexOf('@'); setEmail(`${email.slice(0, at + 1)}${suggestion}`); setSuggestion(null) }}>
                  هل تقصد <bdi dir="ltr">{suggestion}</bdi>؟
                </button>
              )}
            </div>
            <div className="field"><label htmlFor="password">كلمة المرور</label><div className="input-wrap"><input className="input" id="password" name="password" type={showPassword ? 'text' : 'password'} autoComplete="new-password" minLength={8} aria-describedby="passwordHint" required onInvalid={e => e.currentTarget.setCustomValidity('أدخل كلمة مرور من ثمانية أحرف على الأقل.')} onInput={e => { e.currentTarget.setCustomValidity(''); setPwOk(e.currentTarget.value.length >= 8) }} /><button className="password-toggle" type="button" aria-controls="password" onClick={() => setShowPassword(v => !v)}>{showPassword ? 'إخفاء' : 'إظهار'}</button></div><span className={`fine${pwOk ? ' ok' : ''}`} id="passwordHint">ثمانية أحرف على الأقل.</span></div>
            <label className="check"><input id="terms" name="terms" type="checkbox" required /><span>أوافق على <Link href="/privacy">سياسة الخصوصية</Link> و<Link href="/terms">شروط الاستخدام</Link>.</span></label>
            <button className="btn btn-primary" type="submit" disabled={busy} data-od-id="create-account-cta">{busy ? 'جارٍ إنشاء الحساب…' : 'أنشئ حسابي'}</button>
            <p className="fine signup-reassure">مجاناً — بلا بطاقة ائتمانية. لن نشارك بريدك أبداً.</p>
            <div className="status" id="signupStatus" role="status" aria-live="polite">{status}</div>
            <p className="signin">لديك حساب بالفعل؟ <Link href={nextPath ? `/login?next=${encodeURIComponent(nextPath)}` : '/login'}>سجّل الدخول</Link></p>
          </form>
        </section>
      </main>
      <Footer />
    </div>
  )
}