'use client'

import { useState, useEffect } from 'react'
import { Mail, Loader2, Check, X, Search } from 'lucide-react'

type Subscriber = {
  id: string
  email: string
  name: string | null
  active: boolean
  createdAt: string
}

export default function NewsletterPage() {
  const [subs, setSubs] = useState<Subscriber[]>([])
  const [loading, setLoading] = useState(true)
  const [search, setSearch] = useState('')

  useEffect(() => {
    fetch('/api/newsletter')
      .then(r => r.json())
      .then(d => setSubs(d || []))
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  const toggleActive = async (id: string, active: boolean) => {
    await fetch('/api/newsletter', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id, active }),
    })
    setSubs(prev => prev.map(s => s.id === id ? { ...s, active } : s))
  }

  const filtered = subs.filter(s =>
    s.email.includes(search) || (s.name && s.name.includes(search))
  )

  const activeCount = subs.filter(s => s.active).length

  return (
    <div className="min-h-screen bg-gray-50" dir="rtl">
      <div className="container mx-auto px-4 py-6">
        <div className="flex items-center justify-between mb-6">
          <h1 className="text-2xl font-bold flex items-center gap-2">
            <Mail className="w-6 h-6 text-blue-600" /> المشتركون في النشرة البريدية
          </h1>
          <div className="text-sm text-gray-500">
            الإجمالي: <span className="font-bold">{subs.length}</span> | النشطون: <span className="font-bold text-green-600">{activeCount}</span>
          </div>
        </div>

        <div className="bg-white rounded-2xl border shadow-sm overflow-hidden">
          <div className="p-4 border-b">
            <div className="relative max-w-xs">
              <Search className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input
                value={search}
                onChange={e => setSearch(e.target.value)}
                placeholder="بحث في المشتركين..."
                className="w-full pr-10 pl-4 py-2 border rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
              />
            </div>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="bg-gray-50 text-right">
                  <th className="px-4 py-3 font-medium text-gray-500">البريد الإلكتروني</th>
                  <th className="px-4 py-3 font-medium text-gray-500">الاسم</th>
                  <th className="px-4 py-3 font-medium text-gray-500">تاريخ الاشتراك</th>
                  <th className="px-4 py-3 font-medium text-gray-500">الحالة</th>
                  <th className="px-4 py-3 font-medium text-gray-500">إجراء</th>
                </tr>
              </thead>
              <tbody>
                {loading ? (
                  <tr><td colSpan={5} className="text-center py-10"><Loader2 className="w-6 h-6 animate-spin mx-auto text-blue-600" /></td></tr>
                ) : filtered.length === 0 ? (
                  <tr><td colSpan={5} className="text-center py-10 text-gray-400">لا يوجد مشتركون</td></tr>
                ) : filtered.map(sub => (
                  <tr key={sub.id} className="border-t hover:bg-gray-50 transition-colors">
                    <td className="px-4 py-3 font-medium" dir="ltr">{sub.email}</td>
                    <td className="px-4 py-3 text-gray-500">{sub.name || '—'}</td>
                    <td className="px-4 py-3 text-gray-500">{new Date(sub.createdAt).toLocaleDateString('ar-MA')}</td>
                    <td className="px-4 py-3">
                      <span className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${
                        sub.active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
                      }`}>
                        {sub.active ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
                        {sub.active ? 'نشط' : 'غير نشط'}
                      </span>
                    </td>
                    <td className="px-4 py-3">
                      <button
                        onClick={() => toggleActive(sub.id, !sub.active)}
                        className={`text-xs px-3 py-1.5 rounded-lg font-medium transition-colors ${
                          sub.active ? 'bg-red-50 text-red-600 hover:bg-red-100' : 'bg-green-50 text-green-600 hover:bg-green-100'
                        }`}
                      >
                        {sub.active ? 'إلغاء الاشتراك' : 'إعادة تفعيل'}
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  )
}