'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Image from 'next/image';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import {
  MapPin,
  Bed,
  Bath,
  Square,
  DollarSign,
  Heart,
  Share2,
  Phone,
  Mail,
  MessageCircle,
  Calendar,
  Shield,
  Star,
  ChevronLeft,
  ChevronRight,
  Check,
  X,
  Wifi,
  Car,
  Coffee,
  Wind,
  Thermometer,
  Lock,
  Camera,
  Home,
  Building2,
  Users,
  Ruler,
  CalendarDays,
  Clock,
  Award,
  FileText,
  Printer,
  Download,
  ArrowLeft
} from 'lucide-react';

export default function PropertyDetailsPage() {
  const params = useParams();
  const [currentImage, setCurrentImage] = useState(0);
  const [showContact, setShowContact] = useState(false);
  const [bookingDates, setBookingDates] = useState({ start: '', end: '' });
  const [selectedDuration, setSelectedDuration] = useState(1);
  const [property, setProperty] = useState(null);
  const [loading, setLoading] = useState(true);

  const propertiesData = {
    1: {
      id: 1,
      title: 'فيلا فاخرة في المزة',
      description: `تتميز هذه الفيلا الفاخرة بتصميمها العصري وموقعها المميز في أفضل أحياء دمشق. تم بناء الفيلا بأعلى المواصفات باستخدام أفضل المواد، مع مساحات واسعة وحديقة خاصة.

المميزات الرئيسية:
• موقع راقي وقريب من جميع الخدمات
• تصميم داخلي عصري مع أثاث فاخر
• إطلالة رائعة على المدينة
• خصوصية تامة وأمن على مدار الساعة

المساحات الداخلية:
• الطابق الأرضي: صالة استقبال كبيرة (80 م²)، مجلس رجال (40 م²)، مجلس نساء (35 م²)، مطبخ (25 م²)، غرفة طعام (30 م²)
• الطابق الأول: 5 غرف نوم ماستر مع حمامات خاصة (كل غرفة 35-45 م²)
• الطابق الثاني: غرفة معيشة عائلية (50 م²)، غرفة ترفيه (40 م²)، سطح مع إطلالة (100 م²)

الخدمات القريبة:
• مدارس وجامعات على بعد 5 دقائق
• مستشفيات ومراكز طبية
• مولات تجارية ومطاعم
• حدائق عامة ومسارات مشي`,
      type: 'villa',
      price: 500000,
      priceUnit: 'daily',
      location: {
        city: 'دمشق',
        district: 'المزة',
        address: 'شارع المزة - فيلات غربية',
        lat: 33.5,
        lng: 36.3
      },
      bedrooms: 5,
      bathrooms: 4,
      area: 450,
      features: [
        { name: 'مسبح', available: true, description: 'مسبح خاص بمساحة 40 م²' },
        { name: 'حديقة خاصة',  available: true, description: 'حديقة بمساحة 200 م² مع نوافير' },
        { name: 'موقف سيارات',  available: true, description: 'موقف يتسع لـ 4 سيارات' },
        { name: 'أمن 24/7',  available: true, description: 'كاميرات مراقبة وحراسة' },
        { name: 'تدفئة مركزية',  available: true, description: 'تدفئة مركزية لجميع الغرف' },
        { name: 'تكييف مركزي',  available: true, description: 'تكييف مركزي في جميع الغرف' },
        { name: 'مطبخ مجهز',  available: true, description: 'مطبخ أمريكي مجهز بالكامل' },
        { name: 'غرفة خادمة',  available: true, description: 'غرفة خادمة مع حمام خاص' },
        { name: 'مصعد', available: false, description: 'قابل للتركيب' },
        { name: 'واي فاي', available: true, description: 'ألياف بصرية' }
      ],
      images: [
        '/villa1.jpg',
        '/villa2.jpg',
        '/villa3.jpg',
        '/villa4.jpg',
        '/villa5.jpg',
        '/villa6.jpg'
      ],
      status: 'available',
      rating: 4.8,
      reviews: 24,
      reviewList: [
        { user: 'أحمد محمد', rating: 5, comment: 'فيلا رائعة ونظيفة، موقع ممتاز', date: '2024-01-15' },
        { user: 'سارة أحمد', rating: 5, comment: 'إقامة مريحة، خدمات ممتازة', date: '2024-01-10' },
        { user: 'خالد عمر', rating: 4, comment: 'مكان جميل ولكن السعر مرتفع قليلاً', date: '2023-12-20' }
      ],
      owner: {
        name: 'محمد الخالد',
        phone: '0933111222',
        email: 'mohamed@example.com',
        rating: 4.9,
        properties: 5,
        memberSince: '2023',
        responseRate: '98%',
        responseTime: 'خلال ساعة'
      },
      nearby: [
        { type: 'مدرسة', distance: '500م' },
        { type: 'مستشفى', distance: '1كم' },
        { type: 'مول تجاري', distance: '2كم' },
        { type: 'مطعم', distance: '300م' },
        { type: 'جامعة', distance: '1.5كم' },
        { type: 'حديقة', distance: '800م' }
      ],
      specifications: {
        constructionYear: 2022,
        floor: 'أرضي + 2',
        parking: 4,
        gardenArea: 200,
        poolArea: 40,
        furnished: true,
        airConditioning: 'مركزي',
        heating: 'مركزي',
        electricity: '220V',
        water: 'شبكة عامة'
      },
      rules: [
        'لا يسمح بالحيوانات الأليفة',
        'لا يسمح بالتدخين داخل الغرف',
        'حفلات مسموحة بعد التنسيق',
        'وقت المغادرة: 12:00 ظهراً'
      ]
    },
    2: {
      id: 2,
      title: 'شقة حديثة في الشهباء',
      description: 'شقة عصرية في حي الشهباء الراقي بحلب. إطلالة رائعة وتشطيب فاخر.',
      type: 'apartment',
      price: 250000,
      priceUnit: 'daily',
      location: {
        city: 'حلب',
        district: 'الشهباء',
        address: 'شارع النيل - بناء الرحاب',
        lat: 36.2,
        lng: 37.1
      },
      bedrooms: 3,
      bathrooms: 2,
      area: 180,
      features: [
        { name: 'مطبخ مجهز', available: true, description: 'مطبخ أمريكي' },
        { name: 'بلكونة',  available: true, description: 'بلكونة بمساحة 10 م²' },
        { name: 'موقف سيارات', available: true, description: 'موقف خاص' },
        { name: 'مصعد', available: true, description: 'مصعد حديث' }
      ],
      images: ['/apartment1.jpg', '/apartment2.jpg'],
      status: 'available',
      rating: 4.5,
      reviews: 12,
      owner: {
        name: 'أحمد حلبي',
        phone: '0944222333',
        email: 'ahmad@example.com',
        rating: 4.7,
        properties: 3,
        memberSince: '2023'
      },
      nearby: [
        { type: 'مدرسة', distance: '300م' },
        { type: 'مستشفى', distance: '1.2كم' },
        { type: 'مول', distance: '500م' }
      ]
    }
  };

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setProperty(propertiesData[params.id] || propertiesData[1]);
      setLoading(false);
    }, 500);
  }, [params.id]);

  const formatCurrency = (amount) => {
    return amount?.toLocaleString() + ' ل.س';
  };

  const calculateTotalPrice = () => {
    if (!property) return 0;
    const days = bookingDates.start && bookingDates.end 
      ? Math.ceil((new Date(bookingDates.end) - new Date(bookingDates.start)) / (1000 * 60 * 60 * 24))
      : selectedDuration;
    return property.price * (days > 0 ? days : 1);
  };

  const handleBooking = () => {
    alert('تم إرسال طلب الحجز بنجاح. سيتم التواصل معك قريباً.');
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-gray-200 border-t-gray-800 rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">جاري تحميل تفاصيل العقار...</p>
        </div>
      </div>
    );
  }

  if (!property) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <Home className="w-16 h-16 text-gray-400 mx-auto mb-4" />
          <h2 className="text-2xl font-bold text-gray-900 mb-2">العقار غير موجود</h2>
          <p className="text-gray-600 mb-4">لم نتمكن من العثور على العقار المطلوب</p>
          <Link href="/properties" className="bg-gray-800 text-white px-6 py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors">
            العودة إلى العقارات
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="bg-white border-b sticky top-16 z-40 shadow-sm">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            <Link href="/properties" className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors">
              <ArrowLeft className="w-5 h-5" />
              <span>العودة إلى العقارات</span>
            </Link>
            <div className="flex gap-2">
              <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
                <Heart className="w-5 h-5 text-gray-600" />
              </button>
              <button className="p-2 hover:bg-gray-100 rounded-full transition-colors">
                <Share2 className="w-5 h-5 text-gray-600" />
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="container mx-auto px-4 py-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-8"
        >
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div className="relative h-[500px] rounded-2xl overflow-hidden group bg-gray-100">
              <Image
                src={property.images[currentImage] || '/property-placeholder.jpg'}
                alt={property.title}
                fill
                className="object-cover"
              />
              
              {property.images.length > 1 && (
                <>
                  <button
                    onClick={() => setCurrentImage(prev => Math.max(0, prev - 1))}
                    className="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-white"
                  >
                    <ChevronLeft className="w-5 h-5" />
                  </button>
                  <button
                    onClick={() => setCurrentImage(prev => Math.min(property.images.length - 1, prev + 1))}
                    className="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-white/90 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-white"
                  >
                    <ChevronRight className="w-5 h-5" />
                  </button>
                </>
              )}

              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
                {property.images.map((_, idx) => (
                  <button
                    key={idx}
                    onClick={() => setCurrentImage(idx)}
                    className={`w-2 h-2 rounded-full transition-all ${
                      idx === currentImage ? 'bg-gray-800 w-4' : 'bg-white/70 hover:bg-white'
                    }`}
                  />
                ))}
              </div>

              <div className="absolute bottom-4 right-4 bg-black/50 text-white px-3 py-1 rounded-full text-sm backdrop-blur-sm">
                <Camera className="w-4 h-4 inline ml-1" />
                {currentImage + 1} / {property.images.length}
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              {property.images.slice(1, 5).map((img, idx) => (
                <div
                  key={idx}
                  onClick={() => setCurrentImage(idx + 1)}
                  className="relative h-[240px] rounded-2xl overflow-hidden cursor-pointer hover:opacity-90 transition-opacity bg-gray-100"
                >
                  <Image src={img} alt={`${property.title} ${idx + 2}`} fill className="object-cover" />
                </div>
              ))}
            </div>
          </div>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
            >
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h1 className="text-3xl font-bold text-gray-900 mb-2">{property.title}</h1>
                  <div className="flex items-center gap-2 text-gray-500">
                    <MapPin className="w-5 h-5" />
                    <span>{property.location.address}</span>
                  </div>
                </div>
                <div className="text-left">
                  <div className="text-3xl font-bold text-gray-900">{formatCurrency(property.price)}</div>
                  <div className="text-sm text-gray-500">/{property.priceUnit === 'daily' ? 'يوم' : 'شهر'}</div>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <div className="flex items-center gap-1">
                  <Star className="w-5 h-5 fill-gray-800 text-gray-800" />
                  <span className="font-bold text-gray-900">{property.rating}</span>
                  <span className="text-gray-500">({property.reviews} تقييم)</span>
                </div>
                <div className="w-px h-4 bg-gray-200" />
                <span className={`font-medium ${
                  property.status === 'available' ? 'text-gray-800' : 'text-gray-500'
                }`}>
                  {property.status === 'available' ? 'متاح للإيجار' : 'محجوز حالياً'}
                </span>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
            >
              <h2 className="text-xl font-bold mb-4 text-gray-900">المواصفات الرئيسية</h2>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="text-center p-4 bg-gray-50 rounded-xl">
                  <Bed className="w-6 h-6 text-gray-700 mx-auto mb-2" />
                  <div className="font-bold text-gray-900">{property.bedrooms}</div>
                  <div className="text-sm text-gray-500">غرف نوم</div>
                </div>
                <div className="text-center p-4 bg-gray-50 rounded-xl">
                  <Bath className="w-6 h-6 text-gray-700 mx-auto mb-2" />
                  <div className="font-bold text-gray-900">{property.bathrooms}</div>
                  <div className="text-sm text-gray-500">حمامات</div>
                </div>
                <div className="text-center p-4 bg-gray-50 rounded-xl">
                  <Square className="w-6 h-6 text-gray-700 mx-auto mb-2" />
                  <div className="font-bold text-gray-900">{property.area}</div>
                  <div className="text-sm text-gray-500">م²</div>
                </div>
                <div className="text-center p-4 bg-gray-50 rounded-xl">
                  <Home className="w-6 h-6 text-gray-700 mx-auto mb-2" />
                  <div className="font-bold text-gray-900">
                    {property.type === 'villa' ? 'فيلا' : 
                     property.type === 'apartment' ? 'شقة' : 'بيت'}
                  </div>
                  <div className="text-sm text-gray-500">نوع العقار</div>
                </div>
              </div>

              {property.specifications && (
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Calendar className="w-4 h-4" />
                    <span>بناء: {property.specifications.constructionYear}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Ruler className="w-4 h-4" />
                    <span>حديقة: {property.specifications.gardenArea} م²</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Car className="w-4 h-4" />
                    <span>موقف: {property.specifications.parking}</span>
                  </div>
                  <div className="flex items-center gap-2 text-sm text-gray-600">
                    <Wind className="w-4 h-4" />
                    <span>{property.specifications.airConditioning}</span>
                  </div>
                </div>
              )}
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 }}
              className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
            >
              <h2 className="text-xl font-bold mb-4 text-gray-900">وصف العقار</h2>
              <p className="text-gray-600 whitespace-pre-line leading-relaxed">{property.description}</p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 }}
              className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
            >
              <h2 className="text-xl font-bold mb-4 text-gray-900">المميزات والخدمات</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {property.features.map((feature, idx) => (
                  <div key={idx} className="flex items-start gap-3 p-3 bg-gray-50 rounded-xl">
                    <div className={`w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 ${
                      feature.available ? 'bg-gray-800 text-white' : 'bg-gray-200 text-gray-500'
                    }`}>
                      {feature.available ? (
                        <Check className="w-4 h-4" />
                      ) : (
                        <X className="w-4 h-4" />
                      )}
                    </div>
                    <div>
                      <div className="flex items-center gap-2">
                        <span className="text-2xl">{feature.icon}</span>
                        <span className={`font-medium ${feature.available ? 'text-gray-900' : 'text-gray-400'}`}>
                          {feature.name}
                        </span>
                      </div>
                      {feature.description && (
                        <p className={`text-sm mt-1 ${feature.available ? 'text-gray-500' : 'text-gray-400'}`}>
                          {feature.description}
                        </p>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
              className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
            >
              <h2 className="text-xl font-bold mb-4 text-gray-900">القرب من الخدمات</h2>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {property.nearby.map((item, idx) => (
                  <div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
                    <div className="flex items-center gap-2">
                      <span className="text-xl">{item.icon}</span>
                      <span className="text-gray-700">{item.type}</span>
                    </div>
                    <span className="font-medium text-gray-900">{item.distance}</span>
                  </div>
                ))}
              </div>
            </motion.div>

            {property.reviewList && property.reviewList.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.6 }}
                className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
              >
                <h2 className="text-xl font-bold mb-4 text-gray-900">تقييمات المستأجرين</h2>
                <div className="space-y-4">
                  {property.reviewList.map((review, idx) => (
                    <div key={idx} className="border-b border-gray-100 last:border-0 pb-4 last:pb-0">
                      <div className="flex justify-between items-start mb-2">
                        <div>
                          <span className="font-bold text-gray-900">{review.user}</span>
                          <div className="flex items-center gap-1 mt-1">
                            {[...Array(5)].map((_, i) => (
                              <Star key={i} className={`w-4 h-4 ${
                                i < review.rating ? 'fill-gray-800 text-gray-800' : 'text-gray-300'
                              }`} />
                            ))}
                          </div>
                        </div>
                        <span className="text-sm text-gray-500">{review.date}</span>
                      </div>
                      <p className="text-gray-600">{review.comment}</p>
                    </div>
                  ))}
                </div>
              </motion.div>
            )}

            {property.rules && (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.7 }}
                className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
              >
                <h2 className="text-xl font-bold mb-4 text-gray-900">قوانين المنزل</h2>
                <ul className="space-y-2">
                  {property.rules.map((rule, idx) => (
                    <li key={idx} className="flex items-center gap-2 text-gray-600">
                      <div className="w-1.5 h-1.5 bg-gray-400 rounded-full" />
                      {rule}
                    </li>
                  ))}
                </ul>
              </motion.div>
            )}
          </div>

          <div className="space-y-6">
            <div className="sticky top-28">
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 mb-6"
              >
                <h2 className="text-xl font-bold mb-4 text-gray-900">احجز هذا العقار</h2>
                
                <div className="mb-4">
                  <label className="block text-sm font-medium text-gray-700 mb-2">اختر المدة (أيام)</label>
                  <div className="flex gap-2">
                    {[1, 3, 7, 14, 30].map(days => (
                      <button
                        key={days}
                        onClick={() => setSelectedDuration(days)}
                        className={`flex-1 py-2 rounded-xl text-sm font-medium transition-colors ${
                          selectedDuration === days
                            ? 'bg-gray-800 text-white'
                            : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                        }`}
                      >
                        {days}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="space-y-4 mb-6">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">تاريخ البداية</label>
                    <input
                      type="date"
                      value={bookingDates.start}
                      onChange={(e) => setBookingDates({ ...bookingDates, start: e.target.value })}
                      className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-2">تاريخ النهاية</label>
                    <input
                      type="date"
                      value={bookingDates.end}
                      onChange={(e) => setBookingDates({ ...bookingDates, end: e.target.value })}
                      className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300"
                    />
                  </div>
                </div>

                <div className="bg-gray-50 p-4 rounded-xl mb-6">
                  <div className="flex justify-between mb-2">
                    <span className="text-gray-600">السعر لـ {selectedDuration} أيام</span>
                    <span className="font-bold text-gray-900">{formatCurrency(property.price * selectedDuration)}</span>
                  </div>
                  <div className="flex justify-between mb-2">
                    <span className="text-gray-600">سلفة ضمان</span>
                    <span className="font-bold text-gray-900">{formatCurrency(500000)}</span>
                  </div>
                  <div className="flex justify-between pt-2 border-t border-gray-200 font-bold">
                    <span className="text-gray-900">الإجمالي</span>
                    <span className="text-gray-900">{formatCurrency(property.price * selectedDuration + 500000)}</span>
                  </div>
                </div>

                <button
                  onClick={handleBooking}
                  className="w-full bg-gray-800 text-white py-4 rounded-xl font-bold text-lg hover:bg-gray-900 transition-colors mb-4"
                >
                  تأكيد الحجز
                </button>

                <div className="flex items-center gap-2 text-sm text-gray-500">
                  <Shield className="w-4 h-4 text-gray-600" />
                  <span>الدفع آمن ومضمون. سلفة الضمان قابلة للاسترداد.</span>
                </div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.2 }}
                className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100"
              >
                <h3 className="font-bold mb-4 text-gray-900">معلومات المالك</h3>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
                    <span className="text-xl font-bold text-gray-700">
                      {property.owner.name.charAt(0)}
                    </span>
                  </div>
                  <div>
                    <div className="font-bold text-gray-900">{property.owner.name}</div>
                    <div className="flex items-center gap-1 text-sm text-gray-500">
                      <Star className="w-3 h-3 fill-gray-600 text-gray-600" />
                      <span>{property.owner.rating}</span>
                      <span>· {property.owner.properties} عقارات</span>
                    </div>
                    {property.owner.responseRate && (
                      <div className="flex items-center gap-1 text-xs text-gray-500 mt-1">
                        <Clock className="w-3 h-3" />
                        <span>استجابة: {property.owner.responseRate}</span>
                      </div>
                    )}
                  </div>
                </div>

                {showContact ? (
                  <div className="space-y-3">
                    <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-xl">
                      <Phone className="w-4 h-4 text-gray-600" />
                      <span className="font-medium text-gray-900">{property.owner.phone}</span>
                    </div>
                    <div className="flex items-center gap-2 p-3 bg-gray-50 rounded-xl">
                      <Mail className="w-4 h-4 text-gray-600" />
                      <span className="font-medium text-gray-900">{property.owner.email}</span>
                    </div>
                  </div>
                ) : (
                  <button
                    onClick={() => setShowContact(true)}
                    className="w-full bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors flex items-center justify-center gap-2"
                  >
                    <Phone className="w-5 h-5" />
                    عرض معلومات الاتصال
                  </button>
                )}

                <button className="w-full mt-3 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center justify-center gap-2">
                  <MessageCircle className="w-5 h-5" />
                  مراسلة المالك
                </button>
              </motion.div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}