"use client"

import { useState, useEffect, useCallback } from "react"
import { Coins, DollarSign, User, Calendar, CheckCircle, X } from "lucide-react"

interface Donation {
  id: number
  donorName: string
  email: string | null
  amount: number
  currency: string
  method: string
  status: "completed" | "pending" | "failed"
  message: string | null
  createdAt: string
  updatedAt: string
}

export default function DonationsManagement() {
  const [donations, setDonations] = useState<Donation[]>([])
  const [loading, setLoading] = useState(true)
  const [filter, setFilter] = useState<"all" | "completed" | "pending" | "failed">("all")
  const [selectedDonation, setSelectedDonation] = useState<Donation | null>(null)

  const fetchDonations = useCallback(async () => {
    setLoading(true)
    try {
      const res = await fetch("/api/admin/donations")
      if (res.ok) {
        const data = await res.json()
        setDonations(data.donations ?? data.data ?? data)
      }
    } catch {
      // silent
    } finally {
      setLoading(false)
    }
  }, [])

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

  const filteredDonations = donations.filter((d) => filter === "all" || d.status === filter)

  const totalAmount = donations
    .filter((d) => d.status === "completed")
    .reduce((sum, d) => sum + d.amount, 0)

  const completedCount = donations.filter((d) => d.status === "completed").length
  const pendingCount = donations.filter((d) => d.status === "pending").length

  const getStatusBadge = (status: string) => {
    const styles: Record<string, string> = {
      completed: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-[#34d399]",
      pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-[#fbbf24]",
      failed: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-[#f87171]",
    }
    return styles[status] || "bg-gray-100 text-gray-800 dark:bg-[#2a3d56] dark:text-[#cbd5e1]"
  }

  const getStatusLabel = (status: string) => {
    const labels: Record<string, string> = {
      completed: "مكتمل",
      pending: "قيد الانتظار",
      failed: "فشل",
    }
    return labels[status] || status
  }

  const formatCurrency = (amount: number, currency: string) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: currency || "USD",
      minimumFractionDigits: 2,
    }).format(amount)
  }

  const formatDate = (date: string) => {
    return new Date(date).toLocaleDateString("en-US", {
      year: "numeric",
      month: "short",
      day: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div className="flex items-center gap-3">
          <Coins 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>
      </div>

      {/* Summary Stats */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div className="bg-white dark:bg-[#1a2332] dark:border-[#2a3d56] rounded-lg shadow dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] p-5 border-l-4 border-blue-500">
          <div className="flex items-center gap-3">
            <DollarSign className="w-8 h-8 text-blue-500 dark:text-[#60a5fa]" />
            <div>
              <p className="text-sm text-gray-500 dark:text-[#94a3b8]">إجمالي التبرعات</p>
              <p className="text-2xl font-bold text-gray-800 dark:text-[#f1f5f9]">{formatCurrency(totalAmount, "USD")}</p>
            </div>
          </div>
        </div>
        <div className="bg-white dark:bg-[#1a2332] dark:border-[#2a3d56] rounded-lg shadow dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] p-5 border-l-4 border-green-500">
          <div className="flex items-center gap-3">
            <CheckCircle className="w-8 h-8 text-green-500 dark:text-[#34d399]" />
            <div>
              <p className="text-sm text-gray-500 dark:text-[#94a3b8]">مكتمل</p>
              <p className="text-2xl font-bold text-gray-800 dark:text-[#f1f5f9]">{completedCount}</p>
            </div>
          </div>
        </div>
        <div className="bg-white dark:bg-[#1a2332] dark:border-[#2a3d56] rounded-lg shadow dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] p-5 border-l-4 border-yellow-500">
          <div className="flex items-center gap-3">
            <Coins className="w-8 h-8 text-yellow-500 dark:text-[#fbbf24]" />
            <div>
              <p className="text-sm text-gray-500 dark:text-[#94a3b8]">قيد الانتظار</p>
              <p className="text-2xl font-bold text-gray-800 dark:text-[#f1f5f9]">{pendingCount}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Filters */}
      <div className="flex gap-2 flex-wrap">
        {(["all", "completed", "pending", "failed"] as const).map((status) => (
          <button
            key={status}
            onClick={() => setFilter(status)}
            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
              filter === status
                ? "bg-blue-600 text-white"
                : "bg-gray-100 dark:bg-[#2a3d56] text-gray-700 dark:text-[#cbd5e1] hover:bg-gray-200 dark:hover:bg-[#3b4f6b]"
            }`}
          >
            {status === "all" ? "الكل" : getStatusLabel(status)}
          </button>
        ))}
      </div>

      {/* Table */}
      <div className="bg-white dark:bg-[#1a2332] dark:border-[#2a3d56] dark:border rounded-lg shadow dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] overflow-hidden">
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50 dark:bg-[#111927]">
              <tr>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-[#94a3b8] uppercase">
                  <span className="flex items-center gap-1.5">
                    <User className="w-3.5 h-3.5" />
                    اسم المتبرع
                  </span>
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-[#94a3b8] uppercase">
                  <span className="flex items-center gap-1.5">
                    <DollarSign className="w-3.5 h-3.5" />
                    المبلغ
                  </span>
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-[#94a3b8] uppercase">
                  الطريقة
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-[#94a3b8] uppercase">
                  الحالة
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-[#94a3b8] uppercase">
                  <span className="flex items-center gap-1.5">
                    <Calendar className="w-3.5 h-3.5" />
                    التاريخ
                  </span>
                </th>
                <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-[#94a3b8] uppercase">
                  الإجراءات
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-[#253347]">
              {loading ? (
                <tr>
                  <td colSpan={6} className="px-6 py-12 text-center text-gray-500 dark:text-[#3b4f6b]">
                    جاري تحميل التبرعات...
                  </td>
                </tr>
              ) : filteredDonations.length === 0 ? (
                <tr>
                  <td colSpan={6} className="px-6 py-12 text-center text-gray-500 dark:text-[#3b4f6b]">
                    لا توجد تبرعات
                  </td>
                </tr>
              ) : (
                filteredDonations.map((donation) => (
                  <tr key={donation.id} className="hover:bg-gray-50 dark:hover:bg-[#1e2d42] transition-colors">
                    <td className="px-6 py-4">
                      <div className="font-medium text-gray-800 dark:text-[#f1f5f9] text-sm">{donation.donorName}</div>
                      {donation.email && (
                        <div className="text-xs text-gray-400 dark:text-[#94a3b8] mt-0.5">{donation.email}</div>
                      )}
                    </td>
                    <td className="px-6 py-4">
                      <span className="text-sm font-semibold text-gray-800 dark:text-[#f1f5f9]">
                        {formatCurrency(donation.amount, donation.currency)}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-[#cbd5e1] capitalize">{donation.method}</td>
                    <td className="px-6 py-4">
                      <span
                        className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusBadge(donation.status)}`}
                      >
                        {getStatusLabel(donation.status)}
                      </span>
                    </td>
                    <td className="px-6 py-4 text-sm text-gray-600 dark:text-[#cbd5e1]">
                      {formatDate(donation.createdAt)}
                    </td>
                    <td className="px-6 py-4">
                      <button
                        onClick={() => setSelectedDonation(donation)}
                        className="p-2 text-blue-600 dark:text-[#60a5fa] hover:bg-blue-50 dark:hover:bg-[#1e2d42] rounded-lg transition-colors"
                        title="عرض التفاصيل"
                      >
                        <CheckCircle className="w-4 h-4" />
                      </button>
                    </td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Donation Detail Modal */}
      {selectedDonation && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 dark:bg-black/70">
          <div className="bg-white dark:bg-[#1a2332] rounded-xl shadow-xl dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] w-full max-w-lg max-h-[90vh] overflow-y-auto mx-4">
            <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-[#253347]">
              <div className="flex items-center gap-3">
                <Coins className="w-5 h-5 text-blue-600 dark:text-[#60a5fa]" />
                <h2 className="text-xl font-bold text-gray-800 dark:text-[#f1f5f9]">تفاصيل التبرعة</h2>
              </div>
              <button
                onClick={() => setSelectedDonation(null)}
                className="p-2 hover:bg-gray-100 dark:hover:bg-[#1e2d42] rounded-lg transition-colors"
              >
                <X className="w-5 h-5 text-gray-500 dark:text-[#94a3b8]" />
              </button>
            </div>

            <div className="p-6 space-y-5">
              {/* Amount Display */}
              <div className="text-center py-4 bg-gray-50 dark:bg-[#111927] rounded-lg">
                <p className="text-xs text-gray-500 dark:text-[#94a3b8] uppercase tracking-wide mb-1">المبلغ</p>
                <p className="text-3xl font-bold text-gray-800 dark:text-[#f1f5f9]">
                  {formatCurrency(selectedDonation.amount, selectedDonation.currency)}
                </p>
                <span
                  className={`inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium mt-2 ${getStatusBadge(selectedDonation.status)}`}
                >
                  {getStatusLabel(selectedDonation.status)}
                </span>
              </div>

              {/* Info Grid */}
              <div className="grid grid-cols-2 gap-4">
                <div className="flex items-start gap-3">
                  <User className="w-5 h-5 text-gray-400 dark:text-[#94a3b8] mt-0.5" />
                  <div>
                    <p className="text-xs text-gray-500 dark:text-[#94a3b8] uppercase tracking-wide">اسم المتبرع</p>
                    <p className="text-sm font-medium text-gray-800 dark:text-[#f1f5f9]">{selectedDonation.donorName}</p>
                  </div>
                </div>
                {selectedDonation.email && (
                  <div className="flex items-start gap-3">
                    <DollarSign className="w-5 h-5 text-gray-400 dark:text-[#94a3b8] mt-0.5" />
                    <div>
                      <p className="text-xs text-gray-500 dark:text-[#94a3b8] uppercase tracking-wide">البريد</p>
                      <p className="text-sm font-medium text-gray-800 dark:text-[#f1f5f9]">{selectedDonation.email}</p>
                    </div>
                  </div>
                )}
                <div className="flex items-start gap-3">
                  <DollarSign className="w-5 h-5 text-gray-400 dark:text-[#94a3b8] mt-0.5" />
                  <div>
                    <p className="text-xs text-gray-500 dark:text-[#94a3b8] uppercase tracking-wide">طريقة الدفع</p>
                    <p className="text-sm font-medium text-gray-800 dark:text-[#f1f5f9] capitalize">
                      {selectedDonation.method}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Calendar className="w-5 h-5 text-gray-400 dark:text-[#94a3b8] mt-0.5" />
                  <div>
                    <p className="text-xs text-gray-500 dark:text-[#94a3b8] uppercase tracking-wide">التاريخ</p>
                    <p className="text-sm font-medium text-gray-800 dark:text-[#f1f5f9]">
                      {formatDate(selectedDonation.createdAt)}
                    </p>
                  </div>
                </div>
              </div>

              {/* Message */}
              {selectedDonation.message && (
                <div>
                  <p className="text-xs text-gray-500 dark:text-[#94a3b8] uppercase tracking-wide mb-1">رسالة المتبرع</p>
                  <div className="bg-gray-50 dark:bg-[#111927] rounded-lg p-4">
                    <p className="text-sm text-gray-700 dark:text-[#cbd5e1] whitespace-pre-wrap">
                      {selectedDonation.message}
                    </p>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}