'use client'

import { useState, FormEvent } from 'react'
import { Mail, Check, Loader2 } from 'lucide-react'

export function NewsletterSignup() {
  const [email, setEmail] = useState('')
  const [name, setName] = useState('')
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
  const [message, setMessage] = useState('')

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault()
    if (!email.trim()) return
    setStatus('loading')
    try {
      const res = await fetch('/api/newsletter/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), name: name.trim() || undefined }),
      })
      const data = await res.json()
      if (res.ok) { setStatus('success'); setMessage(data.message || 'تم الاشتراك بنجاح') }
      else { setStatus('error'); setMessage(data.error || 'حدث خطأ') }
    } catch { setStatus('error'); setMessage('خطأ في الاتصال') }
  }

  if (status === 'success') {
    return (
      <div className="bg-green-50 rounded-2xl p-5 border border-green-200 flex items-center gap-3">
        <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center shrink-0">
          <Check className="w-5 h-5 text-green-600" />
        </div>
        <p className="text-sm text-green-800 font-medium">{message}</p>
      </div>
    )
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-3">
      <div className="flex items-center gap-2 mb-2">
        <Mail className="w-5 h-5 text-blue-600" />
        <h3 className="font-bold text-sm">النشرة البريدية</h3>
      </div>
      <p className="text-xs text-gray-500">اشترك لتصلك أحدث العقارات والعروض الحصرية</p>
      <input
        type="text"
        placeholder="الاسم (اختياري)"
        value={name}
        onChange={e => setName(e.target.value)}
        className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white"
      />
      <input
        type="email"
        required
        placeholder="بريدك الإلكتروني"
        value={email}
        onChange={e => setEmail(e.target.value)}
        className="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dir-ltr"
        dir="ltr"
      />
      <button
        type="submit"
        disabled={status === 'loading'}
        className="w-full bg-blue-600 text-white py-2.5 rounded-xl text-sm font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
      >
        {status === 'loading' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Mail className="w-4 h-4" />}
        اشتراك
      </button>
      {status === 'error' && <p className="text-red-500 text-xs">{message}</p>}
    </form>
  )
}