// 'use client';

// import { useEffect, useState, useCallback } from 'react';
// import { useRouter } from 'next/navigation';
// import { motion } from 'framer-motion';
// import { CreditCard, Loader2, Home, Calendar, Check, X, Clock } from 'lucide-react';
// import toast, { Toaster } from 'react-hot-toast';
// import AuthService from '@/app/services/AuthService';
// import { getUserReservations, payDeposit } from '@/app/utils/api';

// const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];

// const STATUS_CONFIG = {
//   pending:          { label: 'قيد الانتظار',      color: 'bg-yellow-100 text-yellow-800 border-yellow-300', depositPaid: false },
//   ownerConfirmed:   { label: 'مؤكد من المالك',    color: 'bg-blue-100 text-blue-800 border-blue-300',       depositPaid: false },
//   depositPaid:      { label: 'تم دفع السلفة',     color: 'bg-orange-100 text-orange-800 border-orange-300', depositPaid: true },
//   depositConfirmed: { label: 'تم تأكيد الدفع',    color: 'bg-green-100 text-green-800 border-green-300',    depositPaid: true },
//   completed:        { label: 'منتهي',             color: 'bg-teal-100 text-teal-800 border-teal-300',       depositPaid: true },
//   cancelled:        { label: 'ملغي',              color: 'bg-red-100 text-red-800 border-red-300',          depositPaid: false },
// };

// export default function PaymentsPage() {
//   const router = useRouter();
//   const [reservations, setReservations] = useState([]);
//   const [loading, setLoading] = useState(true);
//   const [payingId, setPayingId] = useState(null);

//   useEffect(() => {
//     // Admin check removed
//     // if (AuthService.isAdmin()) {
//     //   router.push('/');
//     //   return;
//     // }
//     loadReservations();
//   }, [router]);

//   const loadReservations = useCallback(async () => {
//     try {
//       const data = await getUserReservations();
//       setReservations(Array.isArray(data) ? data : []);
//     } catch (err) {
//       console.error(err);
//       toast.error('فشل تحميل المدفوعات');
//     } finally {
//       setLoading(false);
//     }
//   }, []);

//   const handlePayDeposit = async (reservation) => {
//     setPayingId(reservation.id);
//     try {
//       await payDeposit({ reservationId: reservation.id });
//       toast.success('تم دفع السلفة بنجاح!');
//       loadReservations();
//     } catch (err) {
//       toast.error(err?.message || 'فشل عملية الدفع');
//     } finally {
//       setPayingId(null);
//     }
//   };

//   const formatCurrency = (v) => (v ?? 0).toLocaleString() + ' ل.س';

//   if (loading) {
//     return (
//       <div className="min-h-screen bg-gray-50 flex items-center justify-center" dir="rtl">
//         <Loader2 className="w-12 h-12 text-amber-500 animate-spin" />
//       </div>
//     );
//   }

//   const canPay = (status) => STATUS_MAP[status] === 'pending' || STATUS_MAP[status] === 'ownerConfirmed';

//   return (
//     <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
//       <Toaster position="top-center" reverseOrder={false} />
//       <div className="container mx-auto px-4 max-w-4xl">
//         <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
//           <h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
//           <p className="text-gray-600">إدارة مدفوعات الحجوزات والدفعات المقدمة</p>
//         </motion.div>

//         {reservations.length === 0 ? (
//           <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
//             className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
//             <CreditCard className="w-16 h-16 text-gray-300 mx-auto mb-4" />
//             <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
//             <p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
//           </motion.div>
//         ) : (
//           <div className="space-y-4">
//             {reservations.map((r, i) => {
//               const statusKey = STATUS_MAP[r.status] || 'pending';
//               const cfg = STATUS_CONFIG[statusKey];
//               const amount = r.depositAmount || r.totalPrice || 0;

//               return (
//                 <motion.div key={r.id || i} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
//                   className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-all">
//                   <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
//                     <div className="flex items-start gap-3">
//                       <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
//                         <Home className="w-5 h-5 text-amber-600" />
//                       </div>
//                       <div>
//                         <h3 className="font-bold text-gray-900">
//                           {r.propertyAddress || r._prop?.address || `عقار #${r.propertyId || r.id}`}
//                         </h3>
//                         <p className="text-sm text-gray-500 mt-1">حجز #{r.id}</p>
//                         <div className="flex items-center gap-3 mt-1 text-xs text-gray-400">
//                           <span className="flex items-center gap-1"><Calendar className="w-3 h-3" /> {new Date(r.startDate).toLocaleDateString('ar')}</span>
//                           <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {new Date(r.endDate).toLocaleDateString('ar')}</span>
//                         </div>
//                       </div>
//                     </div>
//                     <div className="text-right w-full md:w-auto">
//                       <div className="text-xl font-bold text-amber-600">{formatCurrency(amount)}</div>
//                       <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border ${cfg.color}`}>
//                         {cfg.depositPaid ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
//                         {cfg.label}
//                       </span>
//                     </div>
//                   </div>

//                   {canPay(r.status) && (
//                     <div className="mt-4 pt-4 border-t border-gray-100 flex justify-end">
//                       <button onClick={() => handlePayDeposit(r)} disabled={payingId === r.id}
//                         className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white px-6 py-2.5 rounded-xl text-sm font-medium transition">
//                         {payingId === r.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CreditCard className="w-4 h-4" />}
//                         {payingId === r.id ? 'جاري الدفع...' : 'دفع السلفة'}
//                       </button>
//                     </div>
//                   )}
//                 </motion.div>
//               );
//             })}
//           </div>
//         )}
//       </div>
//     </div>
//   );
// }










'use client';

import { useEffect, useState, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { CreditCard, Loader2, Home, Calendar, Check, X, Clock } from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '@/app/services/AuthService';
import { payDeposit } from '@/app/utils/api';

const STATUS_MAP = ['pending', 'ownerConfirmed', 'depositPaid', 'depositConfirmed', 'completed', 'cancelled'];

const STATUS_CONFIG = {
  pending:          { label: 'قيد الانتظار',      color: 'bg-yellow-100 text-yellow-800 border-yellow-300', depositPaid: false },
  ownerConfirmed:   { label: 'مؤكد من المالك',    color: 'bg-blue-100 text-blue-800 border-blue-300',       depositPaid: false },
  depositPaid:      { label: 'تم دفع السلفة',     color: 'bg-orange-100 text-orange-800 border-orange-300', depositPaid: true },
  depositConfirmed: { label: 'تم تأكيد الدفع',    color: 'bg-green-100 text-green-800 border-green-300',    depositPaid: true },
  completed:        { label: 'منتهي',             color: 'bg-teal-100 text-teal-800 border-teal-300',       depositPaid: true },
  cancelled:        { label: 'ملغي',              color: 'bg-red-100 text-red-800 border-red-300',          depositPaid: false },
};

export default function PaymentsPage() {
  const router = useRouter();
  const [reservations, setReservations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [payingId, setPayingId] = useState(null);

  const getAuthToken = () => {
    if (typeof window === 'undefined') return '';
    return (
      AuthService?.getToken?.() ||
      AuthService?.getAccessToken?.() ||
      localStorage.getItem('token') ||
      localStorage.getItem('accessToken') ||
      localStorage.getItem('authToken') ||
      ''
    );
  };

  const loadReservations = useCallback(async () => {
    try {
      const token = getAuthToken();

      const res = await fetch('http://45.93.137.91/api/Customer/GetMyTransaction', {
        method: 'GET',
        headers: {
          ...(token ? { Authorization: `Bearer ${token}` } : {}),
        },
      });

      if (!res.ok) {
        throw new Error('فشل تحميل المدفوعات');
      }

      const json = await res.json();
      const items = Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : [];

      const mapped = items.map((item) => {
        const deposit = item?.diposit || item?.deposit || {};
        const reservation = deposit?.reservation || {};
        const transaction = deposit?.transaction || {};
        const currency = item?.currency || {};

        return {
          id: reservation.id ?? deposit.reservationId ?? deposit?.reservation?.id ?? item?.reservationId ?? deposit?.id,
          reservationId: reservation.id ?? deposit.reservationId ?? item?.reservationId ?? deposit?.id,
          status: reservation.status ?? 0,
          startDate: reservation.startDate,
          endDate: reservation.endDate,
          totalPrice: reservation.totalPrice ?? transaction.amount ?? 0,
          depositAmount: transaction.amount ?? reservation.totalPrice ?? 0,
          currencySign: currency.sign || 'ل.س',
          currencyName: currency.name || '',
          currencyRate: currency.rate,
          _deposit: deposit,
        };
      });

      setReservations(mapped);
    } catch (err) {
      console.error(err);
      toast.error('فشل تحميل المدفوعات');
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    // Admin check removed
    // if (AuthService.isAdmin()) {
    //   router.push('/');
    //   return;
    // }
    loadReservations();
  }, [router, loadReservations]);

  const handlePayDeposit = async (reservation) => {
    setPayingId(reservation.id);
    try {
      await payDeposit({ reservationId: reservation.id });
      toast.success('تم دفع السلفة بنجاح!');
      loadReservations();
    } catch (err) {
      toast.error(err?.message || 'فشل عملية الدفع');
    } finally {
      setPayingId(null);
    }
  };

  const formatCurrency = (v, sign = 'ل.س') => `${sign} ${Number(v ?? 0).toLocaleString()}`;

  const formatDate = (date) => {
    if (!date) return '';
    const d = new Date(date);
    if (Number.isNaN(d.getTime())) return '';
    return d.toLocaleDateString('en-GB');
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center" dir="rtl">
        <Loader2 className="w-12 h-12 text-amber-500 animate-spin" />
      </div>
    );
  }

  const canPay = (status) => STATUS_MAP[status] === 'pending' || STATUS_MAP[status] === 'ownerConfirmed';

  return (
    <div className="min-h-screen bg-gray-50 py-8" dir="rtl">
      <Toaster position="top-center" reverseOrder={false} />
      <div className="container mx-auto px-4 max-w-4xl">
        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">المدفوعات</h1>
          <p className="text-gray-600">إدارة مدفوعات الحجوزات والدفعات المقدمة</p>
        </motion.div>

        {reservations.length === 0 ? (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300"
          >
            <CreditCard className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-bold text-gray-700 mb-2">لا توجد معاملات مالية</h3>
            <p className="text-gray-500">ستظهر هنا مدفوعاتك للحجوزات</p>
          </motion.div>
        ) : (
          <div className="space-y-4">
            {reservations.map((r, i) => {
              const statusKey = STATUS_MAP[r.status] || 'pending';
              const cfg = STATUS_CONFIG[statusKey];
              const amount = r.depositAmount || r.totalPrice || 0;

              return (
                <motion.div
                  key={r.id || i}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="bg-white rounded-2xl shadow-sm border border-gray-200 p-5 hover:shadow-md transition-all"
                >
                  <div className="flex flex-col gap-4">
                    <div className="flex items-center justify-between gap-3">
                      <span className="text-sm font-medium text-gray-400">#{r.reservationId || r.id}</span>
                      <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium border ${cfg.color}`}>
                        {cfg.depositPaid ? <Check className="w-3 h-3" /> : <X className="w-3 h-3" />}
                        {cfg.label}
                      </span>
                    </div>

                    <div className="flex items-start justify-between gap-4">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center flex-shrink-0">
                          <Home className="w-5 h-5 text-amber-600" />
                        </div>
                        <div>
                          <div className="text-sm text-gray-500">Reservation</div>
                          <div className="font-bold text-gray-900">#{r.reservationId || r.id}</div>
                        </div>
                      </div>

                      <div className="text-right">
                        <div className="text-xs text-gray-400 mb-1">{r.currencyName}</div>
                        <div className="text-2xl md:text-3xl font-bold text-gray-900">
                          {formatCurrency(amount, r.currencySign)}
                        </div>
                      </div>
                    </div>

                    <div className="border-t border-gray-100 pt-4">
                      <div className="flex items-center justify-between text-sm text-gray-700">
                        <span className="flex items-center gap-2">
                          <Calendar className="w-4 h-4 text-gray-400" />
                          الفترة
                        </span>
                        <span className="font-medium">
                          {formatDate(r.startDate)} - {formatDate(r.endDate)}
                        </span>
                      </div>

                      <div className="flex items-center justify-between text-sm text-gray-700 mt-3">
                        <span className="flex items-center gap-2">
                          <Clock className="w-4 h-4 text-gray-400" />
                          Reservation
                        </span>
                        <span className="font-medium">#{r.reservationId || r.id}</span>
                      </div>
                    </div>

                    {canPay(r.status) && (
                      <div className="pt-2 flex justify-end">
                        <button
                          onClick={() => handlePayDeposit(r)}
                          disabled={payingId === r.id}
                          className="flex items-center gap-2 bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white px-6 py-2.5 rounded-xl text-sm font-medium transition"
                        >
                          {payingId === r.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <CreditCard className="w-4 h-4" />}
                          {payingId === r.id ? 'جاري الدفع...' : 'دفع السلفة'}
                        </button>
                      </div>
                    )}
                  </div>
                </motion.div>
              );
            })}
          </div>
        )}
      </div>
    </div>
  );
}