SweetHome/app/booked-properties/page.js

'use client';

import { useState, useEffect, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Home, Star, MapPin, Calendar, Clock, Check, X, Loader2,
  User, MessageCircle, ChevronDown, Image as ImageIcon,
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import { getUserReservations } from '../utils/api';
import AuthService from '../services/AuthService';
import PropertyRatingForm from '../components/ratings/PropertyRatingForm';

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

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

const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'https://45.93.137.91.nip.io/api';

function StatusBadge({ code }) {
  const key = STATUS_MAP[code] || 'pending';
  const cfg = STATUS_CONFIG[key];
  return (
    <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium border ${cfg.color}`}>
      <Clock className="w-3 h-3" /> {cfg.label}
    </span>
  );
}

function ReservationCard({ reservation: r, onRate }) {
  const isCompleted = STATUS_MAP[r.status] === 'completed';
  const imgSrc = r.propertyImage || r._prop?.images?.[0] || (r.propertyInfo?.images?.[0]);
  const imageUrl = imgSrc ? `${API_BASE}${imgSrc}` : null;
  const address = r.propertyAddress || r._prop?.address || '';
  const beds = r._prop?.numberOfBedRooms ?? r.numberOfBedRooms ?? 0;
  const baths = r._prop?.numberOfBathRooms ?? r.numberOfBathRooms ?? 0;

  return (
    <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}
      className="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all border border-gray-200 overflow-hidden">
      <div className="p-5 space-y-4">
        <div className="flex justify-between items-start">
          <div className="flex items-center gap-2">
            <Home className="w-5 h-5 text-amber-500" />
            <span className="font-semibold text-gray-900">عقار #{r.propertyId || r.id}</span>
          </div>
          <StatusBadge code={r.status} />
        </div>

        {imageUrl ? (
          <div className="w-full h-44 rounded-xl overflow-hidden bg-gray-100">
            <img src={imageUrl} alt="" className="w-full h-full object-cover" />
          </div>
        ) : (
          <div className="w-full h-44 rounded-xl bg-gray-100 flex items-center justify-center">
            <ImageIcon className="w-12 h-12 text-gray-300" />
          </div>
        )}

        {address && (
          <div className="flex items-center gap-1 text-gray-500 text-sm">
            <MapPin className="w-4 h-4 flex-shrink-0" />
            {address}
          </div>
        )}

        {(beds > 0 || baths > 0) && (
          <div className="flex gap-3 text-sm text-gray-600">
            {beds > 0 && <span>{beds} غرف</span>}
            {baths > 0 && <span>{baths} حمامات</span>}
          </div>
        )}

        <div className="grid grid-cols-2 gap-3">
          <div className="bg-gray-50 p-3 rounded-xl text-center">
            <Calendar className="w-4 h-4 text-amber-500 mx-auto mb-1" />
            <div className="text-xs text-gray-500">من</div>
            <div className="text-sm font-medium">{new Date(r.startDate).toLocaleDateString('ar')}</div>
          </div>
          <div className="bg-gray-50 p-3 rounded-xl text-center">
            <Calendar className="w-4 h-4 text-amber-500 mx-auto mb-1" />
            <div className="text-xs text-gray-500">إلى</div>
            <div className="text-sm font-medium">{new Date(r.endDate).toLocaleDateString('ar')}</div>
          </div>
        </div>

        <div className="bg-amber-50 p-3 rounded-xl text-center">
          <div className="text-lg font-bold text-amber-600">{r.totalPrice?.toLocaleString() ?? '—'}</div>
          <div className="text-xs text-gray-500">السعر الإجمالي</div>
        </div>

        <div className="flex items-center gap-2 text-xs text-gray-400">
          <User className="w-3 h-3" />
          <span>رقم الحجز: #{r.id}</span>
        </div>

        {isCompleted && (
          <button onClick={onRate}
            className="w-full bg-amber-500 hover:bg-amber-600 text-white py-2.5 rounded-xl text-sm font-medium transition flex items-center justify-center gap-2">
            <Star className="w-4 h-4" /> تقييم العقار
          </button>
        )}
      </div>
    </motion.div>
  );
}

export default function BookedPropertiesPage() {
  const [reservations, setReservations] = useState([]);
  const [loading, setLoading] = useState(true);
  const [ratingReservation, setRatingReservation] = useState(null);
  const [expandedId, setExpandedId] = useState(null);

  useEffect(() => {
    if (!AuthService.getToken()) {
      toast.error('يرجى تسجيل الدخول أولاً');
      setLoading(false);
      return;
    }
    loadReservations();
  }, []);

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

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

  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">
        <motion.div initial={{ opacity: 0, y: -20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900 mb-2">العقارات المحجوزة</h1>
              <p className="text-gray-600">لديك {reservations.length} حجز</p>
            </div>
            {reservations.length > 0 && (
              <button onClick={() => setExpandedId(expandedId ? null : 'all')}
                className="flex items-center gap-1 text-sm text-amber-600 hover:text-amber-700 transition">
                <ChevronDown className={`w-4 h-4 transition-transform ${expandedId ? 'rotate-180' : ''}`} />
                {expandedId ? 'طي الكل' : 'عرض الكل'}
              </button>
            )}
          </div>
        </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">
            <Home className="w-16 h-16 text-amber-500 mx-auto mb-4" />
            <h3 className="text-xl font-bold text-gray-900 mb-2">لا توجد حجوزات</h3>
            <p className="text-gray-500">لم تقم بحجز أي عقار حتى الآن</p>
          </motion.div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {reservations.map((r, i) => (
              <ReservationCard key={r.id || i} reservation={r} onRate={() => setRatingReservation(r)} />
            ))}
          </div>
        )}

        {reservations.filter(r => STATUS_MAP[r.status] === 'completed').length > 0 && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}
            className="mt-8 bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start gap-3">
            <MessageCircle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
            <div>
              <p className="text-amber-800 font-medium">تقييم العقارات</p>
              <p className="text-amber-600 text-sm">يمكنك تقييم العقارات المنتهية حجزها لمساعدة المستأجرين الآخرين</p>
            </div>
          </motion.div>
        )}
      </div>

      <AnimatePresence>
        {ratingReservation && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
            onClick={() => setRatingReservation(null)}>
            <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }}
              className="w-full max-w-lg" onClick={e => e.stopPropagation()}>
              <div className="relative">
                <button onClick={() => setRatingReservation(null)}
                  className="absolute left-2 top-2 z-10 bg-white/80 rounded-full p-1 hover:bg-white transition shadow">
                  <X className="w-5 h-5 text-gray-600" />
                </button>
                <PropertyRatingForm
                  reservationId={ratingReservation.id}
                  onSuccess={() => { setRatingReservation(null); toast.success('تم إرسال التقييم بنجاح!'); }}
                  onCancel={() => setRatingReservation(null)}
                />
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}