'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { 
  Edit, 
  Trash2, 
  Eye, 
  MapPin, 
  Bed, 
  Bath, 
  Square,
  DollarSign,
  Percent,
  MoreVertical
} from 'lucide-react';

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

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

  return (
    <div className="overflow-x-auto">
      <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}</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">
                <div className="flex items-center justify-center gap-2">
                  <button className="p-1 hover:bg-blue-100 rounded text-blue-600">
                    <Eye className="w-4 h-4" />
                  </button>
                  <button className="p-1 hover:bg-amber-100 rounded text-amber-600">
                    <Edit className="w-4 h-4" />
                  </button>
                  <button className="p-1 hover:bg-red-100 rounded text-red-600">
                    <Trash2 className="w-4 h-4" />
                  </button>
                  <button className="p-1 hover:bg-gray-100 rounded">
                    <MoreVertical className="w-4 h-4" />
                  </button>
                </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>
      )}
    </div>
  );
}