"use client"

import { useState, useEffect, useCallback } from "react"
import Link from "next/link"
import { Plus, Pencil, Trash2, Users, CheckCircle, XCircle, Search, X, Mail, Phone, GraduationCap, CreditCard } from "lucide-react"

interface MemberRaw {
  id: string
  userId: string
  user: { id: string; name: string; email: string; image?: string | null; role?: string }
  studentId: string | null
  membershipNumber: string | null
  graduationYear: number | null
  faculty: string | null
  department: string | null
  phone: string | null
  address: string | null
  bio: string | null
  linkedin: string | null
  status: "pending" | "approved" | "rejected"
  createdAt: string
}

interface Member {
  id: string
  name: string
  email: string
  role: string
  studentId: string | null
  membershipNumber: string | null
  graduationYear: number | null
  faculty: string | null
  department: string | null
  phone: string | null
  address: string | null
  bio: string | null
  linkedin: string | null
  status: "pending" | "approved" | "rejected"
  createdAt: string
}

function flattenMember(raw: MemberRaw): Member {
  return {
    id: raw.id,
    name: raw.user?.name ?? "",
    email: raw.user?.email ?? "",
    role: raw.user?.role ?? "member",
    studentId: raw.studentId,
    membershipNumber: raw.membershipNumber,
    graduationYear: raw.graduationYear,
    faculty: raw.faculty,
    department: raw.department,
    phone: raw.phone,
    address: raw.address,
    bio: raw.bio,
    linkedin: raw.linkedin,
    status: raw.status,
    createdAt: raw.createdAt,
  }
}

interface MemberFormData {
  name: string
  email: string
  password: string
  studentId: string
  membershipNumber: string
  graduationYear: string
  faculty: string
  department: string
  phone: string
  address: string
  bio: string
  linkedin: string
  status: string
}

const emptyForm: MemberFormData = {
  name: "",
  email: "",
  password: "",
  studentId: "",
  membershipNumber: "",
  graduationYear: "",
  faculty: "",
  department: "",
  phone: "",
  address: "",
  bio: "",
  linkedin: "",
  status: "pending",
}

export default function MembersManagement() {
  const [members, setMembers] = useState<Member[]>([])
  const [loading, setLoading] = useState(true)
  const [filter, setFilter] = useState<"all" | "pending" | "approved" | "rejected">("all")
  const [search, setSearch] = useState("")
  const [showModal, setShowModal] = useState(false)
  const [editingMember, setEditingMember] = useState<Member | null>(null)
  const [form, setForm] = useState<MemberFormData>(emptyForm)
  const [submitting, setSubmitting] = useState(false)
  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)

  const fetchMembers = useCallback(async () => {
    try {
      setLoading(true)
      const res = await fetch("/api/admin/members")
      const json = await res.json()
      const raw: MemberRaw[] = json.data ?? json.members ?? []
      setMembers(raw.map(flattenMember))
    } catch {
      setMembers([])
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchMembers()
  }, [fetchMembers])

  const filteredMembers = members
    .filter((m) => filter === "all" || m.status === filter)
    .filter(
      (m) =>
        m.name.toLowerCase().includes(search.toLowerCase()) ||
        m.email.toLowerCase().includes(search.toLowerCase()) ||
        (m.faculty ?? "").toLowerCase().includes(search.toLowerCase()) ||
        (m.membershipNumber ?? "").toLowerCase().includes(search.toLowerCase())
    )

  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      approved: "bg-green-100 text-green-800 border border-green-200",
      pending: "bg-yellow-100 text-yellow-800 border border-yellow-200",
      rejected: "bg-red-100 text-red-800 border border-red-200",
    }
    return styles[status] || "bg-gray-100 text-gray-600 border border-gray-200"
  }

  const openAddModal = () => {
    setEditingMember(null)
    setForm(emptyForm)
    setShowModal(true)
  }

  const openEditModal = (member: Member) => {
    setEditingMember(member)
    setForm({
      name: member.name,
      email: member.email,
      password: "",
      studentId: member.studentId ?? "",
      membershipNumber: member.membershipNumber ?? "",
      graduationYear: member.graduationYear ? String(member.graduationYear) : "",
      faculty: member.faculty ?? "",
      department: member.department ?? "",
      phone: member.phone ?? "",
      address: member.address ?? "",
      bio: member.bio ?? "",
      linkedin: member.linkedin ?? "",
      status: member.status,
    })
    setShowModal(true)
  }

  const closeModal = () => {
    setShowModal(false)
    setEditingMember(null)
    setForm(emptyForm)
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitting(true)

    try {
      const payload: Record<string, unknown> = {
        name: form.name,
        email: form.email,
        studentId: form.studentId || null,
        membershipNumber: form.membershipNumber || null,
        graduationYear: form.graduationYear ? Number(form.graduationYear) : null,
        faculty: form.faculty || null,
        department: form.department || null,
        phone: form.phone || null,
        address: form.address || null,
        bio: form.bio || null,
        linkedin: form.linkedin || null,
        status: form.status,
      }

      if (!editingMember && form.password) {
        payload.password = form.password
      }

      if (editingMember) {
        await fetch(`/api/admin/members/${editingMember.id}`, {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        })
      } else {
        await fetch("/api/admin/members", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        })
      }

      await fetchMembers()
      closeModal()
    } catch {
      // silently fail
    } finally {
      setSubmitting(false)
    }
  }

  const handleStatusChange = async (id: string, status: "approved" | "rejected") => {
    try {
      await fetch(`/api/admin/members/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status }),
      })
      await fetchMembers()
    } catch {
      // silently fail
    }
  }

  const handleRoleChange = async (memberId: string, userId: string, newRole: string) => {
    try {
      await fetch(`/api/admin/users/${userId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ role: newRole }),
      })
      await fetchMembers()
    } catch {
      // silently fail
    }
  }

  const handleDelete = async (id: string) => {
    try {
      await fetch(`/api/admin/members/${id}`, { method: "DELETE" })
      setDeleteConfirmId(null)
      await fetchMembers()
    } catch {
      // silently fail
    }
  }

  const handleFieldChange = (field: keyof MemberFormData, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }))
  }

  return (
    <div className="space-y-6 dark:bg-[#0b1120]">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div className="flex items-center gap-3">
          <Users className="w-8 h-8 text-blue-600 dark:text-[#60a5fa]" />
          <div>
            <h1 className="text-2xl font-bold text-gray-800 dark:text-[#f1f5f9]">إدارة الأعضاء</h1>
            <p className="text-sm text-gray-500 dark:text-[#94a3b8]">إدارة أعضاء الرابطة وطلبات العضوية</p>
          </div>
        </div>
        <button
          onClick={openAddModal}
          className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
        >
          <Plus className="w-4 h-4" />
          إضافة عضو
        </button>
      </div>

      <div className="flex flex-col sm:flex-row gap-4">
        <div className="flex gap-2 flex-wrap">
          {([
            { value: "all", label: "الكل" },
            { value: "pending", label: "قيد المراجعة" },
            { value: "approved", label: "مقبول" },
            { value: "rejected", label: "مرفوض" },
          ] as const).map((item) => (
            <button
              key={item.value}
              onClick={() => setFilter(item.value)}
              className={`px-4 py-2 rounded-lg text-sm font-medium capitalize transition-colors ${
                filter === item.value
                  ? "bg-blue-600 text-white"
                  : "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-[#1e2d42] dark:text-[#cbd5e1] dark:hover:bg-[#2a3d56]"
              }`}
            >
              {item.label}
            </button>
          ))}
        </div>
        <div className="relative flex-1 max-w-sm">
          <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-[#7a8ba3]" />
          <input
            type="text"
            placeholder="بحث في الأعضاء..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-[#111927] dark:border-[#3b4f6b] dark:text-[#f1f5f9] dark:placeholder-[#7a8ba3]"
          />
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden dark:bg-[#1a2332] dark:border-[#2a3d56]">
        {loading ? (
          <div className="flex items-center justify-center py-20 text-gray-400">
            <Users className="h-5 w-5 animate-spin mr-2" />
            جاري تحميل الأعضاء...
          </div>
        ) : filteredMembers.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-20 text-gray-400">
            <Users className="h-12 w-12 mb-3 opacity-40" />
            <p className="text-sm">لا يوجد أعضاء</p>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-100 bg-gray-50/60 dark:bg-[#111927] dark:border-[#2a3d56]">
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 dark:text-[#94a3b8] uppercase tracking-wider">
                    الاسم
                  </th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 dark:text-[#94a3b8] uppercase tracking-wider">
                    <span className="flex items-center gap-1.5">
                      <Mail className="h-3.5 w-3.5" />
                      البريد الإلكتروني
                    </span>
                  </th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 dark:text-[#94a3b8] uppercase tracking-wider">
                    الصلاحية
                  </th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 dark:text-[#94a3b8] uppercase tracking-wider">
                    الكلية
                  </th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 dark:text-[#94a3b8] uppercase tracking-wider">
                    <span className="flex items-center gap-1.5">
                      <GraduationCap className="h-3.5 w-3.5" />
                      سنة التخرج
                    </span>
                  </th>
                  <th className="px-6 py-3.5 text-left text-xs font-semibold text-gray-500 dark:text-[#94a3b8] uppercase tracking-wider">
                    الحالة
                  </th>
                  <th className="px-6 py-3.5 text-right text-xs font-semibold text-gray-500 dark:text-[#94a3b8] uppercase tracking-wider">
                    الإجراءات
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100 dark:divide-[#253347]">
                {filteredMembers.map((member) => (
                  <tr
                    key={member.id}
                    className="hover:bg-gray-50/50 transition-colors dark:hover:bg-[#1e2d42]"
                  >
                    <td className="px-6 py-4">
                      <div className="font-medium text-gray-900 text-sm dark:text-[#f1f5f9]">{member.name}</div>
                      {member.membershipNumber && (
                        <div className="text-xs text-gray-400 mt-0.5 dark:text-[#7a8ba3]">{member.membershipNumber}</div>
                      )}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-[#cbd5e1]">
                      {member.email}
                    </td>
                    <td className="px-6 py-4">
                      <select
                        value={member.role}
                        onChange={(e) => {
                          const raw = rawMembers.find((r) => r.id === member.id)
                          if (raw) handleRoleChange(member.id, raw.userId, e.target.value)
                        }}
                        className={`text-xs font-medium px-2 py-1 rounded-lg border cursor-pointer transition-colors ${
                          member.role === "admin"
                            ? "bg-purple-100 text-purple-700 border-purple-200 hover:bg-purple-200"
                            : member.role === "moderator"
                            ? "bg-blue-100 text-blue-700 border-blue-200 hover:bg-blue-200"
                            : "bg-gray-100 text-gray-700 border-gray-200 hover:bg-gray-200"
                        }`}
                      >
                        <option value="member">عضو</option>
                        <option value="moderator">مشرف</option>
                        <option value="admin">مدير</option>
                      </select>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-[#cbd5e1]">
                      {member.faculty ?? "-"}
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-[#cbd5e1]">
                      {member.graduationYear ?? "-"}
                    </td>
                    <td className="px-6 py-4">
                      <span
                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusBadge(member.status)}`}
                      >
                        {member.status === "pending" ? "قيد المراجعة" : member.status === "approved" ? "مقبول" : "مرفوض"}
                      </span>
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex items-center justify-end gap-1">
                        {member.status === "pending" && (
                          <>
                            <button
                              onClick={() => handleStatusChange(member.id, "approved")}
                              className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors"
                              title="قبول"
                            >
                              <CheckCircle className="h-4 w-4" />
                            </button>
                            <button
                              onClick={() => handleStatusChange(member.id, "rejected")}
                              className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                              title="رفض"
                            >
                              <XCircle className="h-4 w-4" />
                            </button>
                          </>
                        )}
                        <button
                          onClick={() => openEditModal(member)}
                          className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                          title="تعديل"
                        >
                          <Pencil className="h-4 w-4" />
                        </button>
                        <Link
                          href={`/ai.admin/membership-card?id=${member.id}`}
                          className="p-2 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
                          title="بطاقة العضوية"
                        >
                          <CreditCard className="h-4 w-4" />
                        </Link>
                        {deleteConfirmId === member.id ? (
                          <div className="flex items-center gap-1">
                            <button
                              onClick={() => handleDelete(member.id)}
                              className="px-2.5 py-1 bg-red-600 text-white text-xs rounded-md hover:bg-red-700 transition-colors"
                            >
                              تأكيد
                            </button>
                            <button
                              onClick={() => setDeleteConfirmId(null)}
                              className="px-2.5 py-1 bg-gray-200 text-gray-600 text-xs rounded-md hover:bg-gray-300 transition-colors"
                            >
                              إلغاء
                            </button>
                          </div>
                        ) : (
                          <button
                            onClick={() => setDeleteConfirmId(member.id)}
                            className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                              title="حذف"
                          >
                            <Trash2 className="h-4 w-4" />
                          </button>
                        )}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {showModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center">
          <div
            className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm"
            onClick={closeModal}
          />
          <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto dark:bg-[#1a2332] dark:border dark:border-[#2a3d56]">
            <div className="flex items-center justify-between px-6 py-4 border-b border-gray-100 dark:border-[#2a3d56]">
              <h2 className="text-lg font-semibold text-gray-900 dark:text-[#f1f5f9]">
                {editingMember ? "تعديل عضو" : "إضافة عضو جديد"}
              </h2>
              <button
                onClick={closeModal}
                className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors dark:text-[#7a8ba3] dark:hover:text-[#cbd5e1] dark:hover:bg-[#2a3d56]"
              >
                <X className="h-5 w-5" />
              </button>
            </div>

            <form onSubmit={handleSubmit} className="px-6 py-5 space-y-5">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1 dark:text-[#cbd5e1]">
                    الاسم *
                  </label>
                  <input
                    type="text"
                    required
                    value={form.name}
                    onChange={(e) => handleFieldChange("name", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all dark:bg-[#111927] dark:border-[#3b4f6b] dark:text-[#f1f5f9] dark:placeholder-[#7a8ba3]"
                    placeholder="الاسم الكامل"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1 dark:text-[#cbd5e1]">
                    <span className="flex items-center gap-1.5">
                      <Mail className="h-3.5 w-3.5" />
                      البريد الإلكتروني *
                    </span>
                  </label>
                  <input
                    type="email"
                    required
                    value={form.email}
                    onChange={(e) => handleFieldChange("email", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all dark:bg-[#111927] dark:border-[#3b4f6b] dark:text-[#f1f5f9] dark:placeholder-[#7a8ba3]"
                    placeholder="email@example.com"
                  />
                </div>
              </div>

              {!editingMember && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    كلمة المرور *
                  </label>
                  <input
                    type="password"
                    required
                    value={form.password}
                    onChange={(e) => handleFieldChange("password", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    placeholder="كلمة مرور الحساب"
                  />
                </div>
              )}

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    رقم الطالب
                  </label>
                  <input
                    type="text"
                    value={form.studentId}
                    onChange={(e) => handleFieldChange("studentId", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    placeholder="رقم الطالب"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    رقم العضوية
                  </label>
                  <input
                    type="text"
                    value={form.membershipNumber}
                    onChange={(e) => handleFieldChange("membershipNumber", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    placeholder="AIUAG-XXX"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    <span className="flex items-center gap-1.5">
                      <GraduationCap className="h-3.5 w-3.5" />
                      سنة التخرج
                    </span>
                  </label>
                  <input
                    type="number"
                    min="2000"
                    max="2030"
                    value={form.graduationYear}
                    onChange={(e) => handleFieldChange("graduationYear", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    placeholder="مثال: 2025"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    الكلية
                  </label>
                  <input
                    type="text"
                    value={form.faculty}
                    onChange={(e) => handleFieldChange("faculty", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    placeholder="مثال: الهندسة"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    القسم
                  </label>
                  <input
                    type="text"
                    value={form.department}
                    onChange={(e) => handleFieldChange("department", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    placeholder="مثال: علوم الحاسب"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">
                    <span className="flex items-center gap-1.5">
                      <Phone className="h-3.5 w-3.5" />
                      الهاتف
                    </span>
                  </label>
                  <input
                    type="tel"
                    value={form.phone}
                    onChange={(e) => handleFieldChange("phone", e.target.value)}
                    className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                    placeholder="+1 234 567 890"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  العنوان
                </label>
                <input
                  type="text"
                  value={form.address}
                  onChange={(e) => handleFieldChange("address", e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
                  placeholder="العنوان الكامل"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  نبذة تعريفية
                </label>
                <textarea
                  rows={3}
                  value={form.bio}
                  onChange={(e) => handleFieldChange("bio", e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all resize-none"
                  placeholder="نبذة تعريفية قصيرة أو وصف"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  الحالة
                </label>
                <select
                  value={form.status}
                  onChange={(e) => handleFieldChange("status", e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all bg-white"
                >
                  <option value="pending">قيد المراجعة</option>
                  <option value="approved">مقبول</option>
                  <option value="rejected">مرفوض</option>
                </select>
              </div>

              <div className="flex items-center justify-end gap-3 pt-3 border-t border-gray-100 dark:border-[#2a3d56]">
                <button
                  type="button"
                  onClick={closeModal}
                  className="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors dark:text-[#cbd5e1] dark:bg-[#1e2d42] dark:hover:bg-[#2a3d56]"
                >
                  إلغاء
                </button>
                <button
                  type="submit"
                  disabled={submitting}
                  className="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {submitting
                    ? "جاري الحفظ..."
                    : editingMember
                      ? "تحديث العضو"
                      : "إنشاء عضو"}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  )
}