'use client';

import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Edit, 
  Trash2, 
  Eye, 
  MapPin, 
  Bed, 
  Bath, 
  Square,
  DollarSign,
  Percent,
  MoreVertical,
  X,
  CheckCircle,
  AlertCircle,
  Calendar,
  User,
  Home,
  Building,
  Clock
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';

const DeleteConfirmationModal = ({ isOpen, onClose, onConfirm, propertyTitle }) => {
  if (!isOpen) return null;

  return (
    <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={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 20 }}
        className="bg-white rounded-2xl w-full max-w-md p-6 shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="text-center mb-4">
          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
            <AlertCircle className="w-8 h-8 text-red-600" />
          </div>
          <h3 className="text-xl font-bold text-gray-900">تأكيد الحذف</h3>
          <p className="text-sm text-gray-500 mt-2">
            هل أنت متأكد من حذف العقار: <span className="font-bold text-gray-700">"{propertyTitle}"</span>؟
          </p>
          <p className="text-xs text-red-500 mt-1">هذا الإجراء لا يمكن التراجع عنه</p>
        </div>

        <div className="flex gap-3 pt-3">
          <button
            onClick={onClose}
            className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors"
          >
            إلغاء
          </button>
          <button
            onClick={onConfirm}
            className="flex-1 bg-red-600 text-white py-3 rounded-xl font-medium hover:bg-red-700 transition-colors"
          >
            نعم، احذف
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
};

const PropertyViewModal = ({ property, isOpen, onClose }) => {
  if (!isOpen || !property) return null;

  const formatCurrency = (amount) => {
    return amount?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' ل.س';
  };

  return (
    <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={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 20 }}
        className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white">
          <div className="flex justify-between items-center">
            <div>
              <h2 className="text-xl font-bold">{property.title}</h2>
              <p className="text-amber-100 text-sm mt-1">{property.location}</p>
            </div>
            <button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full">
              <X className="w-6 h-6" />
            </button>
          </div>
        </div>

        <div className="p-6 space-y-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <Home className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{property.type === 'villa' ? 'فيلا' : property.type === 'apartment' ? 'شقة' : 'بيت'}</div>
              <div className="text-xs text-gray-500">نوع العقار</div>
            </div>
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <DollarSign className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{formatCurrency(property.price)}</div>
              <div className="text-xs text-gray-500">السعر اليومي</div>
            </div>
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <Percent className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{property.commission}%</div>
              <div className="text-xs text-gray-500">نسبة العمولة</div>
            </div>
            <div className="bg-gray-50 p-3 rounded-xl text-center">
              <Calendar className="w-5 h-5 text-amber-500 mx-auto mb-1" />
              <div className="text-sm font-bold">{property.bookings || 0}</div>
              <div className="text-xs text-gray-500">عدد الحجوزات</div>
            </div>
          </div>

          <div className="bg-gray-50 p-4 rounded-xl">
            <h3 className="font-bold text-gray-900 mb-3 flex items-center gap-2">
              <MapPin className="w-5 h-5 text-amber-500" />
              الموقع
            </h3>
            <p className="text-gray-700">{property.location}</p>
          </div>

          <div className="bg-gray-50 p-4 rounded-xl">
            <h3 className="font-bold text-gray-900 mb-3">المواصفات</h3>
            <div className="grid grid-cols-3 gap-4">
              <div className="text-center">
                <Bed className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                <div className="text-lg font-bold">{property.bedrooms}</div>
                <div className="text-xs text-gray-500">غرف نوم</div>
              </div>
              <div className="text-center">
                <Bath className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                <div className="text-lg font-bold">{property.bathrooms}</div>
                <div className="text-xs text-gray-500">حمامات</div>
              </div>
              <div className="text-center">
                <Square className="w-5 h-5 text-amber-500 mx-auto mb-1" />
                <div className="text-lg font-bold">{property.area}</div>
                <div className="text-xs text-gray-500">م²</div>
              </div>
            </div>
          </div>

          <div className="bg-amber-50 p-4 rounded-xl">
            <h3 className="font-bold text-amber-700 mb-3 flex items-center gap-2">
              <Percent className="w-5 h-5" />
              معلومات العمولة
            </h3>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="text-xs text-gray-500">نسبة العمولة</label>
                <div className="font-bold text-amber-600">{property.commission}%</div>
              </div>
              <div>
                <label className="text-xs text-gray-500">مصدر العمولة</label>
                <div className="font-bold text-amber-600">{property.commissionType}</div>
              </div>
              <div>
                <label className="text-xs text-gray-500">قيمة العمولة</label>
                <div className="font-bold text-amber-600">
                  {formatCurrency((property.price * property.commission) / 100)}
                </div>
              </div>
              <div>
                <label className="text-xs text-gray-500">حالة العقار</label>
                <div className={`inline-block px-2 py-1 rounded-lg text-xs font-medium ${
                  property.status === 'available' 
                    ? 'bg-green-100 text-green-800' 
                    : 'bg-red-100 text-red-800'
                }`}>
                  {property.status === 'available' ? 'متاح' : 'محجوز'}
                </div>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
};

const PropertyEditModal = ({ property, isOpen, onClose, onSave }) => {
  const [formData, setFormData] = useState({ ...property });
  const [isSaving, setIsSaving] = useState(false);

  const formatCurrency = (amount) => {
    return amount?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  const handleSave = () => {
    setIsSaving(true);
    setTimeout(() => {
      onSave(formData);
      setIsSaving(false);
      onClose();
      toast.success('تم تحديث العقار بنجاح');
    }, 1000);
  };

  if (!isOpen || !property) return null;

  return (
    <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={onClose}
    >
      <motion.div
        initial={{ scale: 0.9, y: 20 }}
        animate={{ scale: 1, y: 0 }}
        exit={{ scale: 0.9, y: 20 }}
        className="bg-white rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="sticky top-0 bg-gradient-to-r from-amber-500 to-amber-600 p-6 text-white">
          <div className="flex justify-between items-center">
            <h2 className="text-xl font-bold">تعديل العقار</h2>
            <button onClick={onClose} className="p-1 hover:bg-white/20 rounded-full">
              <X className="w-6 h-6" />
            </button>
          </div>
          <p className="text-amber-100 text-sm mt-1">يمكنك تعديل معلومات العقار</p>
        </div>

        <div className="p-6 space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                اسم العقار
              </label>
              <input
                type="text"
                value={formData.title}
                onChange={(e) => setFormData({...formData, title: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                نوع العقار
              </label>
              <select
                value={formData.type}
                onChange={(e) => setFormData({...formData, type: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              >
                <option value="villa">فيلا</option>
                <option value="apartment">شقة</option>
                <option value="house">بيت</option>
                <option value="studio">استوديو</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                الموقع
              </label>
              <input
                type="text"
                value={formData.location}
                onChange={(e) => setFormData({...formData, location: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                السعر اليومي (ل.س)
              </label>
              <input
                type="number"
                value={formData.price}
                onChange={(e) => setFormData({...formData, price: parseInt(e.target.value)})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                نسبة العمولة (%)
              </label>
              <input
                type="number"
                step="0.1"
                value={formData.commission}
                onChange={(e) => setFormData({...formData, commission: parseFloat(e.target.value)})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                مصدر العمولة
              </label>
              <select
                value={formData.commissionType}
                onChange={(e) => setFormData({...formData, commissionType: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              >
                <option value="من المالك">من المالك</option>
                <option value="من المستأجر">من المستأجر</option>
                <option value="من الاثنين">من الاثنين</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                عدد الغرف
              </label>
              <input
                type="number"
                value={formData.bedrooms}
                onChange={(e) => setFormData({...formData, bedrooms: parseInt(e.target.value)})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                عدد الحمامات
              </label>
              <input
                type="number"
                value={formData.bathrooms}
                onChange={(e) => setFormData({...formData, bathrooms: parseInt(e.target.value)})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                المساحة (م²)
              </label>
              <input
                type="number"
                value={formData.area}
                onChange={(e) => setFormData({...formData, area: parseInt(e.target.value)})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                حالة العقار
              </label>
              <select
                value={formData.status}
                onChange={(e) => setFormData({...formData, status: e.target.value})}
                className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-amber-500"
              >
                <option value="available">متاح</option>
                <option value="booked">محجوز</option>
                <option value="maintenance">صيانة</option>
              </select>
            </div>
          </div>
        </div>

        <div className="sticky bottom-0 bg-gray-50 border-t p-4 flex gap-3">
          <button
            onClick={onClose}
            className="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors"
          >
            إلغاء
          </button>
          <button
            onClick={handleSave}
            disabled={isSaving}
            className="flex-1 bg-amber-500 text-white py-3 rounded-xl font-medium hover:bg-amber-600 transition-colors disabled:opacity-50"
          >
            {isSaving ? 'جاري الحفظ...' : 'حفظ التغييرات'}
          </button>
        </div>
      </motion.div>
    </motion.div>
  );
};

const MoreActionsMenu = ({ property, isOpen, onClose, onViewBookings, onViewReports }) => {
  if (!isOpen) return null;

  return (
    <>
      <div className="fixed inset-0 z-40" onClick={onClose} />
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.9 }}
        className="absolute left-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden z-50"
      >
      </motion.div>
    </>
  );
};

export default function PropertiesTable() {
  const [properties, setProperties] = useState([
    {
      id: 1,
      title: 'فيلا فاخرة في المزة',
      type: 'villa',
      location: 'دمشق, المزة',
      price: 500000,
      commission: 5,
      commissionType: 'من المالك',
      bedrooms: 5,
      bathrooms: 4,
      area: 450,
      status: 'available',
      bookings: 3
    },
    {
      id: 2,
      title: 'شقة حديثة في الشهباء',
      type: 'apartment',
      location: 'حلب, الشهباء',
      price: 250000,
      commission: 7,
      commissionType: 'من المستأجر',
      bedrooms: 3,
      bathrooms: 2,
      area: 180,
      status: 'booked',
      bookings: 1
    }
  ]);

  const [viewModal, setViewModal] = useState({ isOpen: false, property: null });
  const [editModal, setEditModal] = useState({ isOpen: false, property: null });
  const [deleteModal, setDeleteModal] = useState({ isOpen: false, property: null });
  const [moreMenu, setMoreMenu] = useState({ isOpen: false, property: null, anchorEl: null });

  const formatCurrency = (amount) => {
    return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' ل.س';
  };

  const getStatusBadge = (status) => {
    const styles = {
      available: 'bg-green-100 text-green-800',
      booked: 'bg-red-100 text-red-800',
      maintenance: 'bg-yellow-100 text-yellow-800'
    };
    
    const labels = {
      available: 'متاح',
      booked: 'محجوز',
      maintenance: 'صيانة'
    };

    return (
      <span className={`px-2 py-1 rounded-full text-xs font-medium ${styles[status]}`}>
        {labels[status]}
      </span>
    );
  };

  const handleView = (property) => {
    setViewModal({ isOpen: true, property });
  };

  const handleEdit = (property) => {
    setEditModal({ isOpen: true, property });
  };

  const handleDelete = (property) => {
    setDeleteModal({ isOpen: true, property });
  };

  const confirmDelete = () => {
    if (deleteModal.property) {
      setProperties(prev => prev.filter(p => p.id !== deleteModal.property.id));
      setDeleteModal({ isOpen: false, property: null });
      toast.success('تم حذف العقار بنجاح');
    }
  };

  const handleSaveEdit = (updatedProperty) => {
    setProperties(prev => prev.map(p => 
      p.id === updatedProperty.id ? updatedProperty : p
    ));
    toast.success('تم تحديث العقار بنجاح');
  };

  const handleMoreClick = (event, property) => {
    event.stopPropagation();
    setMoreMenu({ isOpen: true, property, anchorEl: event.currentTarget });
  };

  const handleViewBookings = (property) => {
    toast.success(`جاري عرض حجوزات ${property.title}`);
  };

  const handleViewReports = (property) => {
    toast.success(`جاري عرض تقرير أرباح ${property.title}`);
  };

  return (
    <div className="overflow-x-auto">
      <Toaster position="top-center" reverseOrder={false} />
      
      <table className="w-full">
        <thead className="bg-gray-50 border-b">
          <tr>
            <th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">العقار</th>
            <th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">الموقع</th>
            <th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">السعر/يوم</th>
            <th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">العمولة</th>
            <th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">المصدر</th>
            <th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">التفاصيل</th>
            <th className="px-4 py-3 text-right text-sm font-semibold text-gray-900">الحالة</th>
            <th className="px-4 py-3 text-center text-sm font-semibold text-gray-900">الإجراءات</th>
          </tr>
        </thead>
        <tbody className="divide-y">
          {properties.map((property, index) => (
            <motion.tr
              key={property.id}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: index * 0.05 }}
              className="hover:bg-gray-50"
            >
              <td className="px-4 py-3">
                <div className="font-medium">{property.title}</div>
                <div className="text-xs text-gray-500">
                  {property.type === 'villa' ? 'فيلا' : 
                   property.type === 'apartment' ? 'شقة' : 
                   property.type === 'house' ? 'بيت' : 'استوديو'}
                </div>
              </td>
              <td className="px-4 py-3">
                <div className="flex items-center gap-1 text-sm">
                  <MapPin className="w-3 h-3 text-gray-400" />
                  {property.location}
                </div>
              </td>
              <td className="px-4 py-3 font-bold text-blue-600">
                {formatCurrency(property.price)}
              </td>
              <td className="px-4 py-3">
                <div className="flex items-center gap-1">
                  <Percent className="w-3 h-3 text-amber-500" />
                  {property.commission}%
                </div>
              </td>
              <td className="px-4 py-3 text-sm">{property.commissionType}</td>
              <td className="px-4 py-3">
                <div className="flex items-center gap-2 text-xs">
                  <Bed className="w-3 h-3" /> {property.bedrooms}
                  <Bath className="w-3 h-3 mr-2" /> {property.bathrooms}
                  <Square className="w-3 h-3 mr-2" /> {property.area}m²
                </div>
              </td>
              <td className="px-4 py-3">
                {getStatusBadge(property.status)}
              </td>
              <td className="px-4 py-3 relative">
                <div className="flex items-center justify-center gap-2">
                  <button
                    onClick={() => handleView(property)}
                    className="p-1 hover:bg-blue-100 rounded text-blue-600 transition-colors"
                    title="عرض التفاصيل"
                  >
                    <Eye className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleEdit(property)}
                    className="p-1 hover:bg-amber-100 rounded text-amber-600 transition-colors"
                    title="تعديل العقار"
                  >
                    <Edit className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => handleDelete(property)}
                    className="p-1 hover:bg-red-100 rounded text-red-600 transition-colors"
                    title="حذف العقار"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                  {moreMenu.isOpen && moreMenu.property?.id === property.id && (
                    <MoreActionsMenu
                      property={property}
                      isOpen={moreMenu.isOpen}
                      onClose={() => setMoreMenu({ isOpen: false, property: null, anchorEl: null })}
                      onViewBookings={handleViewBookings}
                      onViewReports={handleViewReports}
                    />
                  )}
                </div>
              </td>
            </motion.tr>
          ))}
        </tbody>
      </table>

      {properties.length === 0 && (
        <div className="text-center py-12">
          <Home className="w-12 h-12 text-gray-300 mx-auto mb-3" />
          <p className="text-gray-500">لا توجد عقارات مضافة بعد</p>
        </div>
      )}

      <PropertyViewModal
        property={viewModal.property}
        isOpen={viewModal.isOpen}
        onClose={() => setViewModal({ isOpen: false, property: null })}
      />

      <PropertyEditModal
        property={editModal.property}
        isOpen={editModal.isOpen}
        onClose={() => setEditModal({ isOpen: false, property: null })}
        onSave={handleSaveEdit}
      />

      <DeleteConfirmationModal
        isOpen={deleteModal.isOpen}
        onClose={() => setDeleteModal({ isOpen: false, property: null })}
        onConfirm={confirmDelete}
        propertyTitle={deleteModal.property?.title}
      />
    </div>
  );
}