SweetHome/app/properties/page.js

'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Search,
  MapPin,
  Bed,
  Bath,
  Square,
  Filter,
  Grid3x3,
  List,
  Heart,
  ChevronDown,
  Star,
  Home,
  Building2,
  Phone,
  FileText
} from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { getRentProperties, getSaleProperties } from '../utils/api';
import { useFavorites } from '@/app/contexts/FavoritesContext';
import AuthService from '@/app/services/AuthService';
import toast, { Toaster } from 'react-hot-toast';
import { useTranslation } from 'react-i18next';

function mapApiProperty(t, item, index) {
  const info = item.propertyInformation || {};

  const dailyPrice = item.dailyRent ?? item.monthlyRent ?? item.price ?? 0;

  const buildingTypeMap = { 
    0: 'apartment', 
    1: 'villa', 
    2: 'sweet', 
    3: 'room', 
    4: 'studio', 
    5: 'office', 
    6: 'farms', 
    7: 'shop', 
    8: 'warehouse' 
  };
  const propType = buildingTypeMap[info.buildingType] ?? buildingTypeMap[item.type] ?? 'apartment';

  const statusMap = { 0: 'available', 1: 'notAvailable', 2: 'booked' };
  const status = statusMap[info.status] ?? statusMap[item.status] ?? 'available';

  const cityMap = {
    0: 'damascus',
    1: 'aleppo',
    2: 'homs',
    3: 'latakia',
    4: 'daraa',
    5: 'tartous',
    6: 'suweida',
    7: 'deirEzzor',
    8: 'raqqa',
    9: 'idlib',
    10: 'hasakah',
    11: 'qamishli',
    12: 'ruralDamascus'
  };

  const features = [];
  if (item.isSmokeAllow) features.push(t('smoke-allowed', 'مسموح التدخين'));
  if (item.isVisitorAllow) features.push(t('visitors-allowed', 'مسموح الزوار'));
  if (item.specializedFor) features.push(t('specialized', 'مخصص'));
  if (info.numberOfBedRooms) features.push(`${info.numberOfBedRooms} ${t('bedrooms', 'غرف نوم')}`);
  if (info.numberOfBathRooms) features.push(`${info.numberOfBathRooms} ${t('bathrooms', 'حمامات')}`);

  const apiBase = typeof window !== 'undefined' ? (process.env.NEXT_PUBLIC_API_URL || 'http://45.93.137.91/api') : '';
  const rawImages = Array.isArray(info.images) ? info.images : [];
  const images = rawImages.length > 0
    ? rawImages.map(img => img.startsWith('http') ? img : `${apiBase}${img.startsWith('/') ? '' : '/Pictures/'}${img}`)
    : ['/property-placeholder.jpg'];

  return {
    id: item.id ?? index + 1,
    title: info.address || `${t('property', 'عقار')} #${item.id || index + 1}`,
    description: info.description || '',
    type: propType,
    price: dailyPrice,
    priceUnit: 'daily',
    location: {
      city: cityMap[info.city] || extractCity(info.address) || 'damascus',
      district: info.address || '',
    },
    bedrooms: info.numberOfBedRooms || 0,
    bathrooms: info.numberOfBathRooms || 0,
    area: info.space || 0,
    features,
    images,
    status,
    rating: item.rating || 0,
    isNew: false,
    _raw: item,
  };
}

function extractCity(address) {
  if (!address) return '';
  const cityMap = {
    'دمشق': 'damascus',
    'حلب': 'aleppo',
    'حمص': 'homs',
    'اللاذقية': 'latakia',
    'درعا': 'daraa',
    'طرطوس': 'tartous',
    'السويداء': 'suweida',
    'دير الزور': 'deirEzzor',
    'الرقة': 'raqqa',
    'إدلب': 'idlib',
    'الحسكة': 'hasakah',
    'القامشلي': 'qamishli',
    'ريف دمشق': 'ruralDamascus'
  };
  for (const [arabic, key] of Object.entries(cityMap)) {
    if (address.includes(arabic)) return key;
  }
  return '';
}

const PropertyCard = ({ property, viewMode = 'grid', onLoginRequired }) => {
  const { t, i18n } = useTranslation();
  const { isFavorite: checkFavorite, addFavorite, removeFavorite } = useFavorites();
  const [favLoading, setFavLoading] = useState(false);
  const [currentImage, setCurrentImage] = useState(0);
  const isFav = checkFavorite(property.id);

  const toggleFavorite = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!AuthService.isAuthenticated()) { onLoginRequired?.(); return; }
    setFavLoading(true);
    if (isFav) {
      await removeFavorite(property.id);
    } else {
      await addFavorite(property.id);
    }
    setFavLoading(false);

  };

  const formatCurrency = (amount) => {
    return amount?.toLocaleString() + ' ' + t('syp-symbol', 'ل.س');
  };

  const getPropertyTypeIcon = (type) => {
    switch (type) {
      case 'villa': return <Home className="w-4 h-4" />;
      case 'apartment': return <Building2 className="w-4 h-4" />;
      case 'house': return <Home className="w-4 h-4" />;
      case 'studio': return <Building2 className="w-4 h-4" />;
      default: return <Home className="w-4 h-4" />;
    }
  };

  const getPropertyTypeLabel = (type) => {
    switch (type) {
      case 'villa': return t('buildingType.villa', 'فيلا');
      case 'apartment': return t('buildingType.apartment', 'شقة');
      case 'house': return t('house', 'منزل');
      case 'studio': return t('buildingType.studio', 'ستوديو');
      case 'sweet': return t('buildingType.sweet', 'جناح');
      case 'room': return t('buildingType.room', 'غرفة');
      case 'office': return t('buildingType.office', 'مكتب');
      case 'farms': return t('buildingType.farms', 'مزرعة');
      case 'shop': return t('buildingType.shop', 'محل تجاري');
      case 'warehouse': return t('buildingType.warehouse', 'مستودع');
      default: return type;
    }
  };

  if (viewMode === 'list') {
    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 duration-300 overflow-hidden border border-gray-100"
      >
        <div className="flex flex-col md:flex-row">
          <div className="md:w-1/3 relative h-64 md:h-auto bg-gray-100">
            <Image
              src={property.images[currentImage] || '/property-placeholder.jpg'}
              alt={property.title}
              fill
              loading='lazy'
              className="object-cover"
            />
            {property.images.length > 1 && (
              <div className="absolute bottom-2 left-2 right-2 flex justify-center gap-1">
                {property.images.map((_, idx) => (
                  <button
                    key={idx}
                    onClick={() => setCurrentImage(idx)}
                    className={`w-1.5 h-1.5 rounded-full transition-all ${idx === currentImage ? 'bg-gray-800 w-3' : 'bg-white/70'}`}
                  />
                ))}
              </div>
            )}
            <div className="absolute top-2 right-2 flex gap-2">
              <button
                onClick={toggleFavorite}
                disabled={favLoading}
                className="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white transition-colors shadow-sm"
              >
                <Heart className={`w-4 h-4 ${isFav ? 'fill-red-500 text-red-500' : 'text-gray-600'}`} />
              </button>
            </div>
          </div>

          <div className="md:w-2/3 p-6">
            <div className="flex justify-between items-start mb-3">
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <span className="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs font-medium flex items-center gap-1">
                    {getPropertyTypeIcon(property.type)}
                    {getPropertyTypeLabel(property.type)}
                  </span>
                  <span className={`px-2 py-1 rounded-lg text-xs font-medium ${property.status === 'available' ? 'bg-gray-800 text-white' : 'bg-gray-200 text-gray-600'}`}>
                    {property.status === 'available' ? t('available', 'متاح') : t('booked', 'محجوز')}
                  </span>
                </div>
                <h3 className="text-xl font-bold text-gray-900 mb-1">{property.title}</h3>
                <div className="flex items-center gap-1 text-gray-500 text-sm mb-3">
                  <MapPin className="w-4 h-4" />
                  {t('city.' + property.location.city, property.location.city)}، {property.location.district}
                </div>
              </div>
              <div className="text-left">
                <div className="text-2xl font-bold text-gray-900">{formatCurrency(property.price)}</div>
                <div className="text-xs text-gray-500">/{property.priceUnit === 'daily' ? t('day', 'يوم') : t('month', 'شهر')}</div>
              </div>
            </div>

            <div className="flex flex-wrap gap-4 mb-4">
              <div className="flex items-center gap-1 text-gray-600">
                <Bed className="w-4 h-4" />
                <span>{property.bedrooms} {t('rooms', 'غرف')}</span>
              </div>
              <div className="flex items-center gap-1 text-gray-600">
                <Bath className="w-4 h-4" />
                <span>{property.bathrooms} {t('bathrooms', 'حمامات')}</span>
              </div>
              <div className="flex items-center gap-1 text-gray-600">
                <Square className="w-4 h-4" />
                <span>{property.area} {t('sqm', 'م²')}</span>
              </div>
            </div>

            <p className="text-gray-600 text-sm mb-4 line-clamp-2">{property.description}</p>

            <div className="flex gap-3">
              <Link
                href={`/property/${property.id}`}
                className="flex-1 bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors text-center"
              >
                {t('viewDetails', 'عرض التفاصيل')}
              </Link>
              <button className="px-4 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center gap-2">
                <Phone className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </motion.div>
    );
  }

  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 duration-300 overflow-hidden border border-gray-100"
    >
      <div className="relative h-56 bg-gray-100">
        <Image
          src={property.images[currentImage] || '/property-placeholder.jpg'}
          alt={property.title}
          fill
          className="object-cover"
        />
        <div className="absolute top-2 right-2 flex gap-2">
          <button
            onClick={toggleFavorite}
            disabled={favLoading}
            className="w-8 h-8 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white transition-colors shadow-sm"
          >
            <Heart className={`w-4 h-4 ${isFav ? 'fill-red-500 text-red-500' : 'text-gray-600'}`} />
          </button>
        </div>
      </div>

      <div className="p-5">
        <div className="flex justify-between items-start mb-3">
          <div>
            <div className="flex items-center gap-2 mb-2">
              <span className="px-2 py-1 bg-gray-100 text-gray-700 rounded-lg text-xs font-medium flex items-center gap-1">
                {getPropertyTypeIcon(property.type)}
                {getPropertyTypeLabel(property.type)}
              </span>
              {property.status === 'available' && (
                <span className="px-2 py-1 bg-gray-800 text-white rounded-lg text-xs font-medium">{t('available', 'متاح')}</span>
              )}
            </div>
            <h3 className="font-bold text-gray-900 mb-1 line-clamp-1">{property.title}</h3>
            <div className="flex items-center gap-1 text-gray-500 text-xs mb-2">
              <MapPin className="w-3 h-3" />
              <span className="line-clamp-1">{t('city.' + property.location.city, property.location.city)}، {property.location.district}</span>
            </div>
          </div>
          <div className="text-left">
            <div className="text-xl font-bold text-gray-900">{formatCurrency(property.price)}</div>
            <div className="text-xs text-gray-500">/{property.priceUnit === 'daily' ? t('day', 'يوم') : t('month', 'شهر')}</div>
          </div>
        </div>

        <div className="flex justify-between items-center mb-4">
          <div className="flex items-center gap-3 text-gray-600 text-sm">
            <div className="flex items-center gap-1">
              <Bed className="w-4 h-4" />
              <span>{property.bedrooms}</span>
            </div>
            <div className="flex items-center gap-1">
              <Bath className="w-4 h-4" />
              <span>{property.bathrooms}</span>
            </div>
            <div className="flex items-center gap-1">
              <Square className="w-4 h-4" />
              <span>{property.area}{t('sqm', 'م²')}</span>
            </div>
          </div>
          {property.rating > 0 && (
            <div className="flex items-center gap-1">
              <Star className="w-4 h-4 fill-amber-500 text-amber-500" />
              <span className="text-sm font-medium text-gray-700">{property.rating.toFixed(1)}</span>
            </div>
          )}
        </div>

        <Link
          href={`/property/${property.id}`}
          className="block w-full bg-gray-800 text-white py-3 rounded-xl font-medium hover:bg-gray-900 transition-colors text-center"
        >
          {t('viewDetails', 'عرض التفاصيل')}
        </Link>
      </div>
    </motion.div>
  );
};

const FilterBar = ({ filters, onFilterChange }) => {
  const { t } = useTranslation();
  const [showFilters, setShowFilters] = useState(false);

  const propertyTypes = [
    { id: 'all', label: t('all', 'الكل') },
    { id: 'residential', label: t('propertyType.residential', 'سكني') },
    { id: 'commercial', label: t('propertyType.commercial', 'تجاري') },
    { id: 'agricultural', label: t('propertyType.agricultural', 'زراعي') },
  ];

  const buildingTypes = [
    { id: 'all', label: t('all', 'الكل') },
    { id: 'apartment', label: t('buildingType.apartment', 'شقة'), icon: Building2 },
    { id: 'villa', label: t('buildingType.villa', 'فيلا'), icon: Home },
    { id: 'sweet', label: t('buildingType.sweet', 'جناح'), icon: Home },
    { id: 'room', label: t('buildingType.room', 'غرفة'), icon: Home },
    { id: 'studio', label: t('buildingType.studio', 'ستوديو'), icon: Building2 },
    { id: 'office', label: t('buildingType.office', 'مكتب'), icon: Building2 },
    { id: 'farms', label: t('buildingType.farms', 'مزرعة'), icon: Home },
    { id: 'shop', label: t('buildingType.shop', 'محل تجاري'), icon: Building2 },
    { id: 'warehouse', label: t('buildingType.warehouse', 'مستودع'), icon: Building2 }
  ];

  const priceRanges = [
    { id: 'all', label: t('allPrices', 'جميع الأسعار') },
    { id: '0-500000', label: t('price-range-less-than-500k', 'أقل من 500 ألف') },
    { id: '500000-1000000', label: t('price-range-500k-to-1m', '500 ألف - 1 مليون') },
    { id: '1000000-2000000', label: t('price-range-1m-to-2m', '1 مليون - 2 مليون') },
    { id: '2000000-5000000', label: t('price-range-2m-to-5m', '2 مليون - 5 مليون') },
    { id: '5000000+', label: t('price-range-more-than-5m', 'أكثر من 5 مليون') }
  ];

  const cities = [
    { id: 'all', label: t('allCities', 'جميع المدن') },
    { id: 'damascus', label: t('city.damascus', 'دمشق') },
    { id: 'aleppo', label: t('city.aleppo', 'حلب') },
    { id: 'homs', label: t('city.homs', 'حمص') },
    { id: 'latakia', label: t('city.latakia', 'اللاذقية') },
    { id: 'daraa', label: t('city.daraa', 'درعا') },
    { id: 'tartous', label: t('city.tartous', 'طرطوس') },
    { id: 'suweida', label: t('city.suweida', 'السويداء') },
    { id: 'deirEzzor', label: t('city.deirEzzor', 'دير الزور') },
    { id: 'raqqa', label: t('city.raqqa', 'الرقة') },
    { id: 'idlib', label: t('city.idlib', 'إدلب') },
    { id: 'hasakah', label: t('city.hasakah', 'الحسكة') },
    { id: 'qamishli', label: t('city.qamishli', 'القامشلي') },
    { id: 'ruralDamascus', label: t('city.ruralDamascus', 'ريف دمشق') }
  ];

  const certificates = [
    { id: 'all', label: t('allCertificates', 'جميع السندات') },
    { id: 'realEstateTitle', label: t('certificate.realEstateTitle', 'طابو أخضر') },
    { id: 'courtRuling', label: t('certificate.courtRuling', 'حكم محكمة') },
    { id: 'notary', label: t('certificate.notary', 'كاتب عدل') },
    { id: 'shares', label: t('certificate.shares', 'أسهم عقارية') }
  ];

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
      <div className="flex flex-col md:flex-row gap-3 mb-4">
        <div className="flex-1 relative">
          <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
          <input
            type="text"
            placeholder={t('search-property-placeholder', 'ابحث عن عقار...')}
            className="w-full pr-12 px-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 transition-all"
            value={filters.search}
            onChange={(e) => onFilterChange({ ...filters, search: e.target.value })}
          />
        </div>
        <button
          onClick={() => setShowFilters(!showFilters)}
          className="px-6 py-3 bg-gray-100 rounded-xl font-medium hover:bg-gray-200 transition-colors flex items-center gap-2 text-gray-700"
        >
          <Filter className="w-5 h-5" />
          {t('advanced-filters', 'فلاتر متقدمة')}
          <ChevronDown className={`w-4 h-4 transition-transform ${showFilters ? 'rotate-180' : ''}`} />
        </button>
      </div>

      <AnimatePresence>
        {showFilters && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="overflow-hidden"
          >
            <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 pt-4 border-t border-gray-100">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('property-type', 'نوع الاستثمار')}</label>
                <select
                  value={filters.propertyType}
                  onChange={(e) => onFilterChange({ ...filters, propertyType: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                >
                  {propertyTypes.map((type) => (
                    <option key={type.id} value={type.id}>{type.label}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('building-type', 'نوع البناء')}</label>
                <select
                  value={filters.buildingType}
                  onChange={(e) => onFilterChange({ ...filters, buildingType: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                >
                  {buildingTypes.map((type) => (
                    <option key={type.id} value={type.id}>{type.label}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('city', 'المدينة')}</label>
                <select
                  value={filters.city}
                  onChange={(e) => onFilterChange({ ...filters, city: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                >
                  {cities.map((city) => (
                    <option key={city.id} value={city.id}>{city.label}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('price-range', 'مجال السعر')}</label>
                <select
                  value={filters.priceRange}
                  onChange={(e) => onFilterChange({ ...filters, priceRange: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                >
                  {priceRanges.map((range) => (
                    <option key={range.id} value={range.id}>{range.label}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('bedrooms', 'عدد الغرف')}</label>
                <select
                  value={filters.bedrooms}
                  onChange={(e) => onFilterChange({ ...filters, bedrooms: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                >
                  <option value="all">{t('all-numbers', 'الكل')}</option>
                  <option value="1">1+</option>
                  <option value="2">2+</option>
                  <option value="3">3+</option>
                  <option value="4">4+</option>
                  <option value="5">5+</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('bathrooms-label', 'عدد الحمامات')}</label>
                <select
                  value={filters.bathrooms}
                  onChange={(e) => onFilterChange({ ...filters, bathrooms: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                >
                  <option value="all">{t('all-numbers', 'الكل')}</option>
                  <option value="1">1+</option>
                  <option value="2">2+</option>
                  <option value="3">3+</option>
                  <option value="4">4+</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('certificate-label', 'الشهادة / السند العقاري')}</label>
                <select
                  value={filters.certificate}
                  onChange={(e) => onFilterChange({ ...filters, certificate: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                >
                  {certificates.map((cert) => (
                    <option key={cert.id} value={cert.id}>{cert.label}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">{t('area-sqm', 'المساحة (م²)')}</label>
                <div className="flex gap-2">
                  <input
                    type="number"
                    placeholder={t('from', 'من')}
                    className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                    value={filters.minArea}
                    onChange={(e) => onFilterChange({ ...filters, minArea: e.target.value })}
                  />
                  <input
                    type="number"
                    placeholder={t('to', 'إلى')}
                    className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-sm"
                    value={filters.maxArea}
                    onChange={(e) => onFilterChange({ ...filters, maxArea: e.target.value })}
                  />
                </div>
              </div>
            </div>

            <div className="flex gap-3 mt-4 pt-4 border-t border-gray-100">
              <button
                onClick={() => onFilterChange({
                  search: '',
                  propertyType: 'all',
                  buildingType: 'all',
                  city: 'all',
                  priceRange: 'all',
                  bedrooms: 'all',
                  bathrooms: 'all',
                  certificate: 'all',
                  minArea: '',
                  maxArea: '',
                  features: []
                })}
                className="px-6 py-2 bg-gray-100 rounded-xl font-medium hover:bg-gray-200 transition-colors text-gray-700 text-sm"
              >
                {t('reset', 'إعادة تعيين')}
              </button>
              <button
                onClick={() => setShowFilters(false)}
                className="px-6 py-2 bg-gray-800 text-white rounded-xl font-medium hover:bg-gray-900 transition-colors text-sm"
              >
                {t('apply-filters', 'تطبيق')}
              </button>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default function PropertiesPage() {
  const { t, i18n } = useTranslation();
  const [purposeTab, setPurposeTab] = useState('rent');
  const [viewMode, setViewMode] = useState('grid');
  const [sortBy, setSortBy] = useState('newest');
  const [properties, setProperties] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  const [filters, setFilters] = useState({
    search: '',
    propertyType: 'all',
    buildingType: 'all',
    city: 'all',
    priceRange: 'all',
    bedrooms: 'all',
    bathrooms: 'all',
    certificate: 'all',
    minArea: '',
    maxArea: '',
    features: []
  });

  useEffect(() => {
    async function fetchProperties() {
      setLoading(true);
      try {
        const queryParams = new URLSearchParams();

        if (filters.bedrooms !== 'all') {
          queryParams.append('numberOfBedRooms', filters.bedrooms);
        }

        if (filters.bathrooms !== 'all') {
          queryParams.append('numberOfBathRooms', filters.bathrooms);
        }

        if (filters.minArea) {
          queryParams.append('space', filters.minArea);
        }

        const buildingTypeReverseMap = { 
          'apartment': 'Apartment', 
          'villa': 'Villa', 
          'sweet': 'Sweet', 
          'room': 'Room', 
          'studio': 'Studio', 
          'office': 'Office', 
          'farms': 'Farms', 
          'shop': 'Shop', 
          'warehouse': 'Warehouse' 
        };
        if (filters.buildingType !== 'all' && buildingTypeReverseMap[filters.buildingType] !== undefined) {
          queryParams.append('buildingType', buildingTypeReverseMap[filters.buildingType]);
        }

        const propertyTypeReverseMap = {
          'residential': 'Residential',
          'commercial': 'Commercial',
          'agricultural': 'Agricultural'
        };
        if (filters.propertyType !== 'all' && propertyTypeReverseMap[filters.propertyType] !== undefined) {
          queryParams.append('propertyType', propertyTypeReverseMap[filters.propertyType]);
        }

        const certificateReverseMap = {
          'realEstateTitle': 'RealEstateTitle',
          'courtRuling': 'CourtRuling',
          'notary': 'Notary',
          'shares': 'Shares'
        };
        if (filters.certificate !== 'all' && certificateReverseMap[filters.certificate] !== undefined) {
          queryParams.append('certificate', certificateReverseMap[filters.certificate]);
        }

        if (filters.city !== 'all') {
          const cityFormatted = filters.city.charAt(0).toUpperCase() + filters.city.slice(1);
          queryParams.append('city', cityFormatted);
        }

        const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://45.93.137.91/api';
        const rentEndpoint = `${baseUrl}/RentProperties/FilterRentProperties?${queryParams.toString()}`;

        const [rentRes, saleData] = await Promise.all([
          fetch(rentEndpoint, {
            headers: {
              'Accept': 'application/json',
            }
          }).then(res => res.json()).catch(() => ({ data: [], isSuccess: false })),
          getSaleProperties().catch(() => []),
        ]);

        const rentList = rentRes.isSuccess && Array.isArray(rentRes.data) ? rentRes.data : [];
        const saleList = Array.isArray(saleData) ? saleData : [];

        const mapped = [
          ...rentList.map((p, i) => ({ ...mapApiProperty(t, p, i), purpose: 'rent' })),
          ...saleList.map((p, i) => ({ ...mapApiProperty(t, p, rentList.length + i), purpose: 'sale' })),
        ];

        setProperties(mapped);
      } catch (err) {
        console.error('[Properties] Failed to fetch properties:', err);
      } finally {
        setLoading(false);
      }
    }

    fetchProperties();
  }, [filters, t]);

  const filteredProperties = properties
    .filter(p => p.purpose === purposeTab)
    .filter(property => {
      if (filters.search && !property.title.includes(filters.search) && !property.description.includes(filters.search)) {
        return false;
      }
      if (filters.priceRange !== 'all') {
        const [min, max] = filters.priceRange.split('-');
        if (max) {
          if (property.price < parseInt(min) || property.price > parseInt(max)) return false;
        } else if (filters.priceRange.endsWith('+')) {
          const minVal = parseInt(filters.priceRange.replace('+', ''));
          if (property.price < minVal) return false;
        }
      }
      return true;
    })
    .sort((a, b) => {
      switch (sortBy) {
        case 'price_asc': return a.price - b.price;
        case 'price_desc': return b.price - a.price;
        case 'rating': return b.rating - a.rating;
        default: return 0;
      }
    });

  return (
    <div dir={i18n.language === 'ar' ? 'rtl' : 'ltr'} className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-8"
        >
          <h1 className="text-4xl font-bold text-gray-900 mb-2">{purposeTab === 'rent' ? t('properties-for-rent', 'عقارات للإيجار') : t('properties-for-sale', 'عقارات للبيع')}</h1>
          <p className="text-gray-500">{t('best-properties-in-syria', 'أفضل العقارات المتاحة في سوريا مباشرة وبسهولة')}</p>

          <div className="flex justify-center mt-4">
            <div className="inline-flex bg-gray-100 rounded-xl p-1">
              <button onClick={() => setPurposeTab('rent')}
                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === 'rent' ? 'bg-white text-amber-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>
                {t('for-rent', 'للإيجار')}
              </button>
              <button onClick={() => setPurposeTab('sale')}
                className={`px-6 py-2 rounded-lg text-sm font-medium transition-all ${purposeTab === 'sale' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'}`}>
                {t('for-sale', 'للبيع')}
              </button>
            </div>
          </div>
          {loading && (
            <div className="mt-4">
              <div className="inline-block w-6 h-6 border-2 border-gray-200 border-t-gray-800 rounded-full animate-spin"></div>
            </div>
          )}
        </motion.div>

        <FilterBar filters={filters} onFilterChange={setFilters} />

        <div className="flex justify-between items-center my-6">
          <div className="text-gray-600">
            <span className="font-bold text-gray-900">{filteredProperties.length}</span> {t('property-available', 'عقار متاح')}
          </div>
          <div className="flex gap-3">
            <select
              value={sortBy}
              onChange={(e) => setSortBy(e.target.value)}
              className="px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-gray-300 focus:border-gray-300 text-gray-700 text-sm"
            >
              <option value="newest">{t('newest', 'الأحدث')}</option>
              <option value="price_asc">{t('price-low-to-high', 'السعر من الأقل للأعلى')}</option>
              <option value="price_desc">{t('price-high-to-low', 'السعر من الأعلى للأقل')}</option>
              <option value="rating">{t('rating', 'التقييم')}</option>
            </select>
            <div className="flex gap-2">
              <button
                onClick={() => setViewMode('grid')}
                className={`p-2 rounded-xl transition-colors ${viewMode === 'grid' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
              >
                <Grid3x3 className="w-5 h-5" />
              </button>
              <button
                onClick={() => setViewMode('list')}
                className={`p-2 rounded-xl transition-colors ${viewMode === 'list' ? 'bg-gray-800 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
              >
                <List className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>

        <div className={viewMode === 'grid'
          ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'
          : 'space-y-4'
        }>
          {filteredProperties.map((property) => (
            <PropertyCard key={property.id} property={property} viewMode={viewMode} onLoginRequired={() => setShowLoginDialog(true)} />
          ))}
        </div>

        {!loading && filteredProperties.length === 0 && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="text-center py-16"
          >
            <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Home className="w-12 h-12 text-gray-400" />
            </div>
            <h3 className="text-xl font-bold text-gray-700 mb-2">{t('no-properties', 'لا يوجد نتائج تطابق بحثك')}</h3>
            <p className="text-gray-500">{t('try-changing-search-criteria', 'يرجى تجربة تعديل خيارات الفلترة والبحث')}</p>
          </motion.div>
        )}
      </div>
      <Toaster position="top-center" />
      {showLoginDialog && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => setShowLoginDialog(false)}>
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            onClick={(e) => e.stopPropagation()}
            className="bg-white rounded-2xl p-6 max-w-sm w-full mx-4 shadow-xl text-center"
          >
            <div className="w-14 h-14 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <Heart className="w-7 h-7 text-amber-600" />
            </div>
            <h3 className="text-xl font-bold text-gray-900 mb-2">{t('login-required-title', 'تسجيل الدخول مطلوب')}</h3>
            <p className="text-gray-500 mb-6">{t('login-required-favorites-desc', 'يجب تسجيل الدخول لتتمكن من إضافة العقار للمفضلة')}</p>
            <div className="flex gap-3">
              <button
                onClick={() => setShowLoginDialog(false)}
                className="flex-1 py-3 border border-gray-200 rounded-xl font-medium text-gray-600 hover:bg-gray-50 transition-colors"
              >
                {t('cancel', 'إلغاء')}
              </button>
              <Link
                href="/login"
                className="flex-1 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors text-center"
              >
                {t('login', 'دخول')}
              </Link>
            </div>
          </motion.div>
        </div>
      )}
    </div>
  );
}