SweetHome/app/payments/page.js

'use client';

import { useEffect, useState, useCallback } from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import {
  Home,
  MapPin,
  Phone,
  ShieldCheck,
  CreditCard,
  Banknote,
  Building,
  ArrowLeftRight,
  Loader2,
  Check,
  X,
  Calendar,
  Clock,
  LogIn,
  Lock,
  Info,
  Landmark,
  Wallet,
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '@/app/services/AuthService';
import { payDeposit, getMyTransaction } 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', icon: Clock },
  ownerConfirmed:   { label: 'مؤكد من المالك',    color: 'bg-blue-100 text-blue-800 border-blue-300',       icon: ShieldCheck },
  depositPaid:      { label: 'تم دفع السلفة',     color: 'bg-orange-100 text-orange-800 border-orange-300', icon: Wallet },
  depositConfirmed: { label: 'تم تأكيد الدفع',    color: 'bg-green-100 text-green-800 border-green-300',    icon: Check },
  completed:        { label: 'منتهي',             color: 'bg-teal-100 text-teal-800 border-teal-300',       icon: Check },
  cancelled:        { label: 'ملغي',              color: 'bg-red-100 text-red-800 border-red-300',          icon: X },
};

const PAYMENT_METHODS = [
  {
    id: 'cash',
    label: 'الدفع النقدي',
    desc: 'ادفع الآن عبر شام كاش مع تأكيد تلقائي للحجز',
    icon: Banknote,
    active: true,
  },
  {
    id: 'office',
    label: 'نقداً',
    desc: 'ادفع في مكتب المنصة. يتم التأكيد لاحقاً',
    icon: Building,
    active: true,
  },
  {
    id: 'transfer',
    label: 'تحويل داخلي',
    desc: 'حول من حساب داخلي ثم أرسل المرجع',
    icon: ArrowLeftRight,
    active: false,
  },
  {
    id: 'electronic',
    label: 'دفع إلكتروني',
    desc: 'سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً',
    icon: CreditCard,
    active: false,
  },
];

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

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

export default function PaymentsPage() {
  const [reservations, setReservations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [payingId, setPayingId] = useState(null);
  const [isGuest, setIsGuest] = useState(null);
  const [selectedPayment, setSelectedPayment] = useState('cash');

  const loadReservations = useCallback(async () => {
    try {
      const json = await getMyTransaction();
      const items = 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 || {};
        const propertyInfo = reservation?.propertyInformation || {};

        return {
          id: deposit.id ?? reservation.id ?? item?.id,
          reservationId: reservation.id ?? deposit.reservationId ?? item?.reservationId,
          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,
          propertyName: propertyInfo.name || propertyInfo.address || reservation.propertyName || `عقار #${reservation.id || ''}`,
          propertyAddress: propertyInfo.address || reservation.propertyAddress || '',
          propertyCity: propertyInfo.city || reservation.city || '',
          _deposit: deposit,
          _reservation: reservation,
        };
      });

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

  useEffect(() => {
    if (AuthService.isGuest()) {
      setIsGuest(true);
      setLoading(false);
      return;
    }
    setIsGuest(false);
    loadReservations();
  }, [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 canPay = (status) => STATUS_MAP[status] === 'ownerConfirmed';

  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>
    );
  }

  if (isGuest) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-amber-50/50 to-white flex items-center justify-center p-4" dir="rtl">
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          className="bg-white rounded-3xl shadow-xl border border-gray-200 p-10 max-w-md w-full text-center"
        >
          <div className="w-20 h-20 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <Lock className="w-10 h-10 text-amber-600" />
          </div>
          <h2 className="text-2xl font-bold text-gray-900 mb-3">المدفوعات</h2>
          <p className="text-gray-600 leading-relaxed mb-8">
            دفعاتك مرتبطة بحاسبك لذلك يرجى تسجيل الدخول أولاً
          </p>
          <Link
            href="/login"
            className="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-8 py-3 rounded-2xl text-lg font-semibold transition shadow-lg shadow-amber-200"
          >
            <LogIn className="w-5 h-5" />
            تسجيل الدخول
          </Link>
        </motion.div>
      </div>
    );
  }

  const payables = reservations.filter((r) => canPay(r.status));
  const others = reservations.filter((r) => !canPay(r.status));

  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>

        {payables.length > 0 && (
          <div className="space-y-6 mb-10">
            <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
              <Wallet className="w-5 h-5 text-amber-500" />
              المدفوعات المطلوبة
            </h2>
            {payables.map((r, i) => (
              <PaymentCard
                key={r.id || i}
                reservation={r}
                payingId={payingId}
                selectedPayment={selectedPayment}
                onSelectPayment={setSelectedPayment}
                onPay={handlePayDeposit}
              />
            ))}
          </div>
        )}

        {others.length > 0 && (
          <div className="space-y-4">
            <h2 className="text-xl font-bold text-gray-800 flex items-center gap-2">
              <Clock className="w-5 h-5 text-gray-500" />
              الحجوزات السابقة
            </h2>
            {others.map((r, i) => {
              const statusKey = STATUS_MAP[r.status] || 'pending';
              const cfg = STATUS_CONFIG[statusKey];
              const Icon = cfg.icon;
              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"
                >
                  <div className="flex items-center justify-between gap-3 mb-3">
                    <span className="text-sm font-medium text-gray-400">#{r.reservationId || r.id}</span>
                    <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border ${cfg.color}`}>
                      <Icon className="w-3 h-3" />
                      {cfg.label}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2 text-sm text-gray-600">
                      <Calendar className="w-4 h-4" />
                      {formatDate(r.startDate)} - {formatDate(r.endDate)}
                    </div>
                    <div className="text-lg font-bold text-gray-900">
                      {formatCurrency(amount, r.currencySign)}
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </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>
    </div>
  );
}

function PaymentCard({ reservation, payingId, selectedPayment, onSelectPayment, onPay }) {
  const r = reservation;
  const amount = r.depositAmount || r.totalPrice || 0;
  const [showCashDialog, setShowCashDialog] = useState(false);

  return (
    <>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="bg-white rounded-3xl shadow-md border border-gray-200 overflow-hidden"
      >
      {/* Property details */}
      <div className="p-6 border-b border-gray-100">
        <div className="flex items-start gap-4 mb-4">
          <div className="w-14 h-14 bg-amber-100 rounded-2xl flex items-center justify-center shrink-0">
            <Home className="w-7 h-7 text-amber-600" />
          </div>
          <div className="min-w-0 flex-1">
            <h3 className="text-xl font-bold text-gray-900 mb-1">
              {r.propertyName}
            </h3>
            {(r.propertyAddress || r.propertyCity) && (
              <p className="text-sm text-gray-500 flex items-center gap-1">
                <MapPin className="w-3.5 h-3.5" />
                {[r.propertyCity, r.propertyAddress].filter(Boolean).join(' - ')}
              </p>
            )}
          </div>
        </div>

        <div className="flex items-center gap-4 text-sm text-gray-600">
          <span className="flex items-center gap-1.5">
            <Calendar className="w-4 h-4 text-gray-400" />
            {formatDate(r.startDate)} - {formatDate(r.endDate)}
          </span>
          <span className="flex items-center gap-1.5">
            <Clock className="w-4 h-4 text-gray-400" />
            #{r.reservationId || r.id}
          </span>
        </div>
      </div>

      {/* Deposit amount */}
      <div className="px-6 py-5 border-b border-gray-100">
        <div className="text-center">
          <p className="text-sm text-gray-500 mb-1">مبلغ التأمين (الرعبون)</p>
          <p className="text-4xl font-bold text-amber-600">
            {formatCurrency(amount, r.currencySign)}
          </p>
          <p className="text-xs text-gray-400 mt-2">
            يتم دفع التأمين إلى المنصة وليس إلى المالك
          </p>
        </div>
      </div>

      {/* Payment methods note */}
      <div className="px-6 py-4 bg-amber-50 border-b border-amber-100">
        <div className="flex items-start gap-3">
          <Info className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
          <p className="text-sm text-amber-800 leading-relaxed">
            الدفع النقدي فقط هو المتاح. سيتم تفعيل الدفع الإلكتروني والتحويل لاحقاً.
          </p>
        </div>
      </div>

      {/* Payment method options */}
      <div className="px-6 py-5 border-b border-gray-100">
        <p className="text-sm font-bold text-gray-700 mb-3">طريقة الدفع</p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {PAYMENT_METHODS.map((method) => {
            const isSelected = selectedPayment === method.id;
            const Icon = method.icon;
            return (
              <button
                key={method.id}
                type="button"
                disabled={!method.active}
                onClick={() => method.active && onSelectPayment(method.id)}
                className={`relative flex items-start gap-3 p-4 rounded-2xl border-2 text-right transition-all ${
                  !method.active
                    ? 'border-gray-100 bg-gray-50 opacity-50 cursor-not-allowed'
                    : isSelected
                      ? 'border-amber-500 bg-amber-50 shadow-sm'
                      : 'border-gray-200 bg-white hover:border-amber-300 cursor-pointer'
                }`}
              >
                <div className={`w-10 h-10 rounded-xl flex items-center justify-center shrink-0 ${
                  isSelected ? 'bg-amber-500 text-white' : 'bg-gray-100 text-gray-500'
                }`}>
                  <Icon className="w-5 h-5" />
                </div>
                <div className="min-w-0 flex-1">
                  <p className={`text-sm font-bold ${isSelected ? 'text-amber-900' : 'text-gray-800'}`}>
                    {method.label}
                  </p>
                  <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">
                    {method.desc}
                  </p>
                  {!method.active && (
                    <span className="inline-block mt-1 text-[10px] font-medium text-gray-400 bg-gray-200 px-2 py-0.5 rounded-full">
                      غير متاح
                    </span>
                  )}
                </div>
                {isSelected && (
                  <div className="absolute top-2 left-2 w-5 h-5 bg-amber-500 rounded-full flex items-center justify-center">
                    <Check className="w-3 h-3 text-white" />
                  </div>
                )}
              </button>
            );
          })}
        </div>
      </div>

      {/* Pay button */}
      <div className="px-6 py-5 border-b border-gray-100">
        <motion.button
          type="button"
          onClick={() => onPay(r)}
          disabled={payingId === r.id}
          whileHover={{ scale: 1.01 }}
          whileTap={{ scale: 0.99 }}
          className="w-full bg-amber-500 hover:bg-amber-600 disabled:bg-amber-300 text-white font-bold py-4 px-6 rounded-2xl text-lg transition-all shadow-lg hover:shadow-xl flex items-center justify-center gap-3"
        >
          {payingId === r.id ? (
            <>
              <Loader2 className="w-5 h-5 animate-spin" />
              جاري الدفع...
            </>
          ) : (
            <>
              <Banknote className="w-5 h-5" />
              دفع التأمين ({formatCurrency(amount, r.currencySign)})
            </>
          )}
        </motion.button>
      </div>

      {/* Cash pay button */}
      <div className="px-6 py-4 border-b border-gray-100">
        <button
          type="button"
          onClick={() => setShowCashDialog(true)}
          className="w-full bg-white border-2 border-amber-200 hover:border-amber-400 text-amber-700 font-bold py-3 px-6 rounded-2xl text-base transition-all flex items-center justify-center gap-2"
        >
          <Building className="w-5 h-5" />
          سأدفع نقداً
        </button>
      </div>

      {/* Cash payment dialog */}
      {showCashDialog && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 py-8">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            className="w-full max-w-md rounded-3xl bg-white p-8 shadow-2xl border border-gray-200 text-center"
          >
            <div className="w-16 h-16 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-5">
              <Clock className="w-8 h-8 text-amber-600" />
            </div>
            <h3 className="text-xl font-bold text-gray-900 mb-3">الدفع النقدي قيد الانتظار</h3>
            <p className="text-gray-600 leading-relaxed mb-6">
              اذهب إلى موقع المنصة وادفع العربون.
              <br />
              ستقوم المنصة بتأكيد الدفع بعد استلام المبلغ.
            </p>
            <div className="bg-gray-50 rounded-2xl p-4 mb-6 text-right">
              <p className="text-sm font-bold text-gray-800 mb-1">موقع المنصة</p>
              <p className="text-sm text-gray-600">مكتب المنصة: أبو رمانة، شارع المالكي، دمشق</p>
              <p className="text-sm text-gray-600 flex items-center gap-1 mt-1" dir="ltr">
                <Phone className="w-3.5 h-3.5" />
                +963567823411
              </p>
            </div>
            <div className="flex flex-col gap-3 sm:flex-row">
              <button
                type="button"
                onClick={() => setShowCashDialog(false)}
                className="w-full px-5 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors font-medium"
              >
                إغلاق
              </button>
              <Link
                href="/reservations"
                className="w-full px-5 py-3 rounded-xl bg-amber-500 text-white font-semibold text-center hover:bg-amber-600 transition-colors"
              >
                حجوزاتي
              </Link>
            </div>
          </motion.div>
        </div>
      )}

      {/* Platform location */}
      <div className="px-6 py-5 bg-gray-50">
        <div className="flex items-start gap-3">
          <Landmark className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
          <div>
            <p className="text-sm font-bold text-gray-800 mb-1">موقع الدفع النقدي</p>
            <p className="text-sm text-gray-600 leading-relaxed">
              مكتب المنصة: أبو رمانة، شارع المالكي، دمشق
            </p>
            <p className="text-sm text-gray-600 flex items-center gap-1 mt-1">
              <Phone className="w-3.5 h-3.5" />
              <span dir="ltr">+963567823411</span>
            </p>
          </div>
        </div>
      </div>
    </motion.div>
    </>
  );
}