anwar-pi-website/web/src/app/(frontend)/verify-email/verify-actions.tsx

'use client'

import Link from 'next/link'
import { useEffect, useState } from 'react'

/* Resend button + status — real /api/auth/resend-verification endpoint.
   Without SMTP configured the API answers 503 with a clear message.
   «البريد غير صحيح؟» — collapsed change-email affordance: PATCH /api/users/:id
   (self-update allowed in Users.ts access) then resend; 400 → duplicate-email
   copy. Hidden without a session (no id → nothing to patch). */
export default function VerifyActions({ verified, email, userId }: { verified: boolean; email: string | null; userId: number | null }) {
  const [status, setStatus] = useState('')
  const [newEmail, setNewEmail] = useState('')
  const [busy, setBusy] = useState(false)

  useEffect(() => {
    if (email) {
      setNewEmail(email)
      return
    }
    try {
      const saved = sessionStorage.getItem('anwarpi:signup-email')
      if (saved) setNewEmail(saved)
    } catch { /* private mode */ }
  }, [email])

  async function changeEmail() {
    if (busy || !userId) return
    setBusy(true)
    setStatus('جارٍ التحديث…')
    try {
      const patchRes = await fetch(`/api/users/${userId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: newEmail.trim() }),
      })
      if (!patchRes.ok) {
        setStatus(patchRes.status === 400 ? 'هذا البريد مسجَّل لدينا.' : 'تعذّر تحديث البريد، حاول مرة أخرى.')
        return
      }
      const resendRes = await fetch('/api/auth/resend-verification', { method: 'POST' })
      const data = await resendRes.json().catch(() => null) as { error?: string; already?: boolean } | null
      setStatus(resendRes.ok || data?.already ? 'أرسلنا رسالة تأكيد جديدة إلى بريدك المحدَّث.' : data?.error || 'تم تحديث البريد لكن تعذّر الإرسال الآن.')
    } catch {
      setStatus('تعذّر الاتصال، حاول مرة أخرى.')
    } finally {
      setBusy(false)
    }
  }

  return (
    <>
      <div className="actions">
        <Link className="btn btn-primary" href="/onboarding" data-od-id="continue-onboarding-cta">متابعة إعداد الحساب</Link>
        {!verified && (
          <button className="btn btn-secondary" id="resendButton" type="button" data-od-id="resend-email-button"
            onClick={async (e) => {
              const button = e.currentTarget
              button.disabled = true
              setStatus('جارٍ الإرسال…')
              const res = await fetch('/api/auth/resend-verification', { method: 'POST' })
              const data = await res.json().catch(() => null) as { error?: string; already?: boolean } | null
              if (res.ok || data?.already) {
                setStatus('أرسلنا الرسالة من جديد — افحص صندوق الوارد.')
              } else {
                setStatus(data?.error || 'تعذّر الإرسال، جرّب بعد قليل.')
              }
              setTimeout(() => { button.disabled = false }, 3000)
            }}
          >
            إعادة إرسال الرسالة
          </button>
        )}
      </div>
      <p className="status" id="resendStatus" role="status" aria-live="polite">{status}</p>
      {userId && !verified && (
        <details className="change-email" data-od-id="change-email">
          <summary>البريد غير صحيح؟</summary>
          <div className="change-email-row">
            <input className="input" type="email" inputMode="email" dir="ltr" value={newEmail} onChange={e => setNewEmail(e.target.value)} aria-label="البريد الإلكتروني الصحيح" />
            <button className="btn btn-secondary" type="button" onClick={changeEmail} disabled={busy || newEmail.trim() === ''}>
              {busy ? 'جارٍ التحديث…' : 'حدّث البريد وأعد الإرسال'}
            </button>
          </div>
        </details>
      )}
    </>
  )
}