'use client';

import { motion } from 'framer-motion';
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import '../i18n/config'; 
import { 
  Users, 
  Home, 
  Calendar,
  User,
  Clock,
  DollarSign,
  PlusCircle,
  Edit,
  Trash2,
  CheckCircle,
  XCircle,
  Search,
  Filter,
  Download,
  Eye,
  MapPin,
  Bed,
  Bath,
  Square,
  Star,
  Phone,
  Mail,
  CalendarDays
} from 'lucide-react';

export default function AdminPage() {
  const { t, i18n } = useTranslation();
  const [activeTab, setActiveTab] = useState('properties');
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedUser, setSelectedUser] = useState(null);
  
  // احصل على اللغة الحالية من i18n
  const currentLanguage = i18n.language || 'en';
  
  const [stats, setStats] = useState({
    totalUsers: 0,
    totalProperties: 0,
    activeBookings: 0,
    availableProperties: 0
  });

  const [properties, setProperties] = useState([
    {
      id: 1,
      name: "luxuryVillaDamascus",
      type: "villa",
      price: 500000,
      location: "Damascus, Al-Mazzeh",
      bedrooms: 5,
      bathrooms: 4,
      area: 450,
      status: "available",
      images: [],
      features: ["swimmingPool", "privateGarden", "parking", "superLuxFinish"]
    },
    {
      id: 2,
      name: "modernApartmentAleppo",
      type: "apartment",
      price: 250000,
      location: "Aleppo, Al-Shahba",
      bedrooms: 3,
      bathrooms: 2,
      area: 180,
      status: "booked",
      images: [],
      features: ["equippedKitchen", "centralHeating", "balcony", "securitySystem"]
    },
    {
      id: 3,
      name: "familyHouseHoms",
      type: "house",
      price: 350000,
      location: "Homs, Baba Amr",
      bedrooms: 4,
      bathrooms: 3,
      area: 300,
      status: "available",
      images: [],
      features: ["largeGarden", "receptionHall", "maidRoom", "garage"]
    },
    {
      id: 4,
      name: "seasideApartmentLatakia",
      type: "apartment",
      price: 300000,
      location: "Latakia, Blue Beach",
      bedrooms: 3,
      bathrooms: 2,
      area: 200,
      status: "available",
      images: [],
      features: ["seaView", "centralHeating", "centralAC", "parking"]
    },
    {
      id: 5,
      name: "villaDaraa",
      type: "villa",
      price: 400000,
      location: "Daraa, Doctors District",
      bedrooms: 4,
      bathrooms: 3,
      area: 350,
      status: "booked",
      images: [],
      features: ["fruitGarden", "highWall", "advancedSecurity", "storage"]
    }
  ]);

  const [users, setUsers] = useState([
    {
      id: 1,
      name: "Ahmed Mohamed",
      email: "ahmed@example.com",
      phone: "+963 123 456 789",
      joinDate: "2024-01-15",
      activeBookings: 1,
      totalBookings: 3,
      currentBooking: {
        propertyId: 2,
        propertyName: "modernApartmentAleppo",
        startDate: "2024-02-01",
        endDate: "2024-08-01",
        duration: "6 months",
        totalAmount: 1500000
      }
    },
    {
      id: 2,
      name: "Sara Ahmed",
      email: "sara@example.com",
      phone: "+963 987 654 321",
      joinDate: "2024-02-10",
      activeBookings: 0,
      totalBookings: 2,
      currentBooking: null
    },
    {
      id: 3,
      name: "Mohammed Al-Halabi",
      email: "mohammed@example.com",
      phone: "+963 555 123 456",
      joinDate: "2024-01-25",
      activeBookings: 1,
      totalBookings: 1,
      currentBooking: {
        propertyId: 5,
        propertyName: "villaDaraa",
        startDate: "2024-02-15",
        endDate: "2024-05-15",
        duration: "3 months",
        totalAmount: 1200000
      }
    }
  ]);

  const [bookingRequests, setBookingRequests] = useState([
    {
      id: "B001",
      userId: 2,
      userName: "Sara Ahmed",
      propertyId: 1,
      propertyName: "luxuryVillaDamascus",
      startDate: "2024-03-01",
      endDate: "2024-06-01",
      duration: "3 months",
      totalAmount: 1500000,
      status: "pending",
      requestDate: "2024-02-20"
    },
    {
      id: "B002",
      userId: 1,
      userName: "Ahmed Mohamed",
      propertyId: 4,
      propertyName: "seasideApartmentLatakia",
      startDate: "2024-03-15",
      endDate: "2024-05-15",
      duration: "2 months",
      totalAmount: 600000,
      status: "pending",
      requestDate: "2024-02-18"
    }
  ]);

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

  const fadeInUp = {
    hidden: { opacity: 0, y: 20 },
    visible: { 
      opacity: 1, 
      y: 0,
      transition: { duration: 0.5 }
    }
  };

  const staggerContainer = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const cardHover = {
    rest: { 
      scale: 1,
      y: 0,
      boxShadow: "0 4px 6px rgba(0, 0, 0, 0.05)"
    },
    hover: { 
      scale: 1.02,
      y: -5,
      boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)",
      transition: { 
        type: "spring",
        stiffness: 300
      }
    }
  };

  const buttonHover = {
    rest: { scale: 1 },
    hover: { scale: 1.05 },
    tap: { scale: 0.98 }
  };

  useEffect(() => {
    const totalBookings = users.reduce((sum, user) => sum + user.activeBookings, 0);
    const availableProps = properties.filter(p => p.status === "available").length;
    
    setStats({
      totalUsers: users.length,
      totalProperties: properties.length,
      activeBookings: totalBookings,
      availableProperties: availableProps
    });
  }, [users, properties]);

  const handleBookingAction = (bookingId, action) => {
    setBookingRequests(prev => 
      prev.map(booking => 
        booking.id === bookingId 
          ? { ...booking, status: action === 'accept' ? 'approved' : 'rejected' }
          : booking
      )
    );
  };

  const handlePropertyAction = (propertyId, action) => {
    if (action === 'delete') {
      setProperties(prev => prev.filter(p => p.id !== propertyId));
    }
  };

  const showUserDetails = (user) => {
    setSelectedUser(user);
  };

  const getLocation = (location) => {
    const [city, district] = location.split(",").map(s => s.trim());
    
    // تحويل القيم إلى مفاتيح ترجمة
    const cityKey = city.toLowerCase();
    const districtKey = district.replace(/\s+/g, '');
    
    return `${t(cityKey)}, ${t(districtKey)}`;
  };

  return (
    <div className={`min-h-screen bg-gray-50 p-4 md:p-6 font-sans ${currentLanguage === 'ar' ? 'text-right' : 'text-left'}`}>
      {/* Header بدون زر اختيار اللغة */}
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="mb-8"
      >
        <div>
          <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-2 tracking-tight">
            {t("adminDashboard")}
          </h1>
          <p className="text-gray-600 text-base mb-1">{t("manageProperties")}</p>
          <p className="text-gray-500 text-sm">{t("pricesInSYP")}</p>
        </div>
      </motion.div>

      {/* إحصائيات */}
      <motion.div 
        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8"
        variants={staggerContainer}
        initial="hidden"
        animate="visible"
      >
        <motion.div
          variants={fadeInUp}
          whileHover="hover"
          variants={cardHover}
          className="bg-gradient-to-br from-blue-600 to-blue-700 text-white rounded-xl shadow p-5"
        >
          <div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
            <div className="p-3 bg-white/20 rounded-lg">
              <Users className="w-6 h-6" />
            </div>
            <div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
              <div className="text-2xl font-bold mb-1">{stats.totalUsers}</div>
              <div className="text-blue-100 text-sm">{t("totalUsers")}</div>
            </div>
          </div>
          <div className="text-xs text-blue-100 mt-3 pt-3 border-t border-blue-400/30">
            {users.filter(u => u.activeBookings > 0).length} {t("usersWithActiveBookings")}
          </div>
        </motion.div>

        <motion.div
          variants={fadeInUp}
          whileHover="hover"
          variants={cardHover}
          className="bg-gradient-to-br from-emerald-600 to-emerald-700 text-white rounded-xl shadow p-5"
        >
          <div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
            <div className="p-3 bg-white/20 rounded-lg">
              <Home className="w-6 h-6" />
            </div>
            <div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
              <div className="text-2xl font-bold mb-1">{stats.totalProperties}</div>
              <div className="text-emerald-100 text-sm">{t("totalProperties")}</div>
            </div>
          </div>
          <div className="text-xs text-emerald-100 mt-3 pt-3 border-t border-emerald-400/30">
            {stats.availableProperties} {t("propertiesAvailable")}
          </div>
        </motion.div>

        <motion.div
          variants={fadeInUp}
          whileHover="hover"
          variants={cardHover}
          className="bg-gradient-to-br from-purple-600 to-purple-700 text-white rounded-xl shadow p-5"
        >
          <div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
            <div className="p-3 bg-white/20 rounded-lg">
              <Calendar className="w-6 h-6" />
            </div>
            <div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
              <div className="text-2xl font-bold mb-1">{stats.activeBookings}</div>
              <div className="text-purple-100 text-sm">{t("activeBookings")}</div>
            </div>
          </div>
          <div className="text-xs text-purple-100 mt-3 pt-3 border-t border-purple-400/30">
            {bookingRequests.filter(b => b.status === 'pending').length} {t("bookingRequestsPending")}
          </div>
        </motion.div>

        <motion.div
          variants={fadeInUp}
          whileHover="hover"
          variants={cardHover}
          className="bg-gradient-to-br from-amber-600 to-amber-700 text-white rounded-xl shadow p-5"
        >
          <div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
            <div className="p-3 bg-white/20 rounded-lg">
              <Home className="w-6 h-6" />
            </div>
            <div className={currentLanguage === 'ar' ? 'text-left' : 'text-right'}>
              <div className="text-2xl font-bold mb-1">{stats.availableProperties}</div>
              <div className="text-amber-100 text-sm">{t("availableProperties")}</div>
            </div>
          </div>
          <div className="text-xs text-amber-100 mt-3 pt-3 border-t border-amber-400/30">
            {properties.filter(p => p.status === 'available').length} {t("propertiesReadyForRent")}
          </div>
        </motion.div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.2 }}
        className="mb-6"
      >
        <div className={`flex flex-wrap gap-2 border-b border-gray-200 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
          <button
            onClick={() => setActiveTab('properties')}
            className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'properties' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
          >
            <div className="flex items-center gap-2">
              <Home className="w-4 h-4" />
              <span>{t("properties")}</span>
            </div>
          </button>
          
          <button
            onClick={() => setActiveTab('bookings')}
            className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'bookings' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
          >
            <div className="flex items-center gap-2">
              <Calendar className="w-4 h-4" />
              <span>{t("bookingRequests")}</span>
            </div>
          </button>
          
          <button
            onClick={() => setActiveTab('users')}
            className={`px-4 py-3 font-medium text-sm rounded-t-lg transition-all ${activeTab === 'users' ? 'bg-white border-t border-x border-gray-300 text-blue-700' : 'text-gray-700 hover:text-blue-600 hover:bg-gray-100'}`}
          >
            <div className="flex items-center gap-2">
              <Users className="w-4 h-4" />
              <span>{t("users")}</span>
            </div>
          </button>
        </div>
      </motion.div>

      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
        
        {activeTab === 'properties' && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
          >
            <div className={`flex flex-col md:flex-row md:items-center justify-between mb-6 ${currentLanguage === 'ar' ? 'md:flex-row-reverse' : ''}`}>
              <div>
                <h2 className="text-xl font-bold text-gray-900 mb-1">{t("propertiesManagement")}</h2>
                <p className="text-gray-600 text-sm">{t("addEditDeleteProperties")}</p>
              </div>
              <motion.button
                variants={buttonHover}
                whileHover="hover"
                whileTap="tap"
                className="mt-3 md:mt-0 bg-blue-700 hover:bg-blue-800 text-white px-5 py-3 rounded-lg flex items-center gap-2 text-sm"
              >
                <PlusCircle className="w-4 h-4" />
                {t("addNewProperty")}
              </motion.button>
            </div>

            <div className={`mb-6 flex flex-col md:flex-row gap-3 ${currentLanguage === 'ar' ? 'md:flex-row-reverse' : ''}`}>
              <div className="relative flex-1">
                <Search className={`absolute ${currentLanguage === 'ar' ? 'right-3' : 'left-3'} top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-500`} />
                <input
                  type="text"
                  placeholder={t("searchProperties")}
                  className={`w-full ${currentLanguage === 'ar' ? 'pr-3 pl-10' : 'pl-3 pr-10'} py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm placeholder:text-gray-400`}
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <div className={`flex gap-2 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                <motion.button
                  variants={buttonHover}
                  whileHover="hover"
                  className="px-4 py-2.5 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-2 text-sm"
                >
                  <Filter className="w-4 h-4" />
                  {t("filter")}
                </motion.button>
                <motion.button
                  variants={buttonHover}
                  whileHover="hover"
                  className="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center gap-2 text-sm"
                >
                  <Download className="w-4 h-4" />
                  {t("export")}
                </motion.button>
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
              {properties.map((property) => (
                <motion.div
                  key={property.id}
                  initial={{ opacity: 0, scale: 0.95 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.3 }}
                  whileHover={{ y: -4 }}
                  className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-all duration-200"
                >
                  <div className="p-5">
                    <div className={`flex justify-between items-start mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                      <div>
                        <h3 className="text-base font-bold text-gray-900 mb-1">{t(property.name)}</h3>
                        <div className="flex items-center gap-2 text-gray-600 text-xs">
                          <MapPin className="w-3 h-3" />
                          <span>{getLocation(property.location)}</span>
                        </div>
                      </div>
                      <span className={`px-2.5 py-1 rounded-full text-xs font-medium ${property.status === 'available' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>
                        {property.status === 'available' ? t("available") : t("booked")}
                      </span>
                    </div>

                    <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
                      <div className="text-center bg-gray-50 p-3 rounded-lg">
                        <div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
                          <Bed className="w-3 h-3" />
                          <span>{t("bedrooms")}</span>
                        </div>
                        <div className="font-bold text-gray-900 text-sm">{property.bedrooms}</div>
                      </div>
                      
                      <div className="text-center bg-gray-50 p-3 rounded-lg">
                        <div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
                          <Bath className="w-3 h-3" />
                          <span>{t("bathrooms")}</span>
                        </div>
                        <div className="font-bold text-gray-900 text-sm">{property.bathrooms}</div>
                      </div>
                      
                      <div className="text-center bg-gray-50 p-3 rounded-lg">
                        <div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
                          <Square className="w-3 h-3" />
                          <span>{t("area")}</span>
                        </div>
                        <div className="font-bold text-gray-900 text-sm">{property.area} m²</div>
                      </div>
                      
                      <div className="text-center bg-gray-50 p-3 rounded-lg">
                        <div className="flex items-center justify-center gap-1 text-gray-700 mb-1 text-xs">
                          <DollarSign className="w-3 h-3" />
                          <span>{t("price")}</span>
                        </div>
                        <div className="font-bold text-gray-900 text-sm">{formatNumber(property.price)} SYP/{t("month")}</div>
                      </div>
                    </div>

                    <div className="mb-5">
                      <h4 className="font-bold text-gray-900 text-sm mb-2">{t("features")}:</h4>
                      <div className="flex flex-wrap gap-2">
                        {property.features.map((feature, idx) => (
                          <span key={idx} className="px-2.5 py-1 bg-blue-50 text-blue-800 rounded-full text-xs font-medium">
                            {t(feature)}
                          </span>
                        ))}
                      </div>
                    </div>

                    <div className={`flex justify-end gap-2 pt-4 border-t border-gray-100 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                      <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        className="px-3 py-2 bg-blue-100 text-blue-800 hover:bg-blue-200 rounded-lg flex items-center gap-2 text-xs"
                      >
                        <Eye className="w-3 h-3" />
                        {t("viewDetails")}
                      </motion.button>
                      <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        className="px-3 py-2 bg-amber-100 text-amber-800 hover:bg-amber-200 rounded-lg flex items-center gap-2 text-xs"
                      >
                        <Edit className="w-3 h-3" />
                        {t("edit")}
                      </motion.button>
                      <motion.button
                        whileHover={{ scale: 1.05 }}
                        whileTap={{ scale: 0.95 }}
                        onClick={() => handlePropertyAction(property.id, 'delete')}
                        className="px-3 py-2 bg-red-100 text-red-800 hover:bg-red-200 rounded-lg flex items-center gap-2 text-xs"
                      >
                        <Trash2 className="w-3 h-3" />
                        {t("delete")}
                      </motion.button>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        )}

        {activeTab === 'bookings' && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
          >
            <div className="mb-6">
              <h2 className="text-xl font-bold text-gray-900 mb-1">{t("bookingRequests")}</h2>
              <p className="text-gray-600 text-sm">{t("manageBookingRequests")}</p>
            </div>

            <div className="space-y-5">
              {bookingRequests.map((request) => (
                <motion.div
                  key={request.id}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.3 }}
                  className="border border-gray-200 rounded-lg p-5 hover:shadow-sm transition-shadow"
                >
                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                    <div className="flex-1">
                      <div className={`flex items-center justify-between mb-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                        <h3 className="text-base font-bold text-gray-900">{t("bookingRequest")} #{request.id}</h3>
                        <span className={`px-3 py-1 rounded-full text-xs font-medium ${request.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : request.status === 'approved' ? 'bg-emerald-100 text-emerald-800' : 'bg-red-100 text-red-800'}`}>
                          {request.status === 'pending' ? t("pending") : request.status === 'approved' ? t("approved") : t("rejected")}
                        </span>
                      </div>
                      
                      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
                        <div className="bg-gray-50 p-3 rounded-lg">
                          <div className="text-xs text-gray-600 mb-1">{t("user")}</div>
                          <div className="font-bold text-gray-900 text-sm">{request.userName}</div>
                        </div>
                        
                        <div className="bg-gray-50 p-3 rounded-lg">
                          <div className="text-xs text-gray-600 mb-1">{t("property")}</div>
                          <div className="font-bold text-gray-900 text-sm">{t(request.propertyName)}</div>
                        </div>
                        
                        <div className="bg-gray-50 p-3 rounded-lg">
                          <div className="text-xs text-gray-600 mb-1">{t("duration")}</div>
                          <div className="font-bold text-gray-900 text-sm">{request.duration}</div>
                        </div>
                        
                        <div className="bg-gray-50 p-3 rounded-lg">
                          <div className="text-xs text-gray-600 mb-1">{t("totalAmount")}</div>
                          <div className="font-bold text-gray-900 text-sm">{formatNumber(request.totalAmount)} SYP</div>
                        </div>
                      </div>
                      
                      <div className="text-xs text-gray-600 space-y-2">
                        <div className="flex items-center gap-2">
                          <CalendarDays className="w-3 h-3" />
                          <span>{t("from")} <span className="font-medium">{request.startDate}</span> {t("to")} <span className="font-medium">{request.endDate}</span></span>
                        </div>
                        <div className="flex items-center gap-2">
                          <Clock className="w-3 h-3" />
                          <span>{t("requestDate")}: <span className="font-medium">{request.requestDate}</span></span>
                        </div>
                      </div>
                    </div>
                    
                    {request.status === 'pending' && (
                      <div className={`flex gap-2 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                        <motion.button
                          variants={buttonHover}
                          whileHover="hover"
                          whileTap="tap"
                          onClick={() => handleBookingAction(request.id, 'accept')}
                          className="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg flex items-center gap-2 text-sm"
                        >
                          <CheckCircle className="w-4 h-4" />
                          {t("accept")}
                        </motion.button>
                        <motion.button
                          variants={buttonHover}
                          whileHover="hover"
                          whileTap="tap"
                          onClick={() => handleBookingAction(request.id, 'reject')}
                          className="px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center gap-2 text-sm"
                        >
                          <XCircle className="w-4 h-4" />
                          {t("reject")}
                        </motion.button>
                      </div>
                    )}
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        )}

        {activeTab === 'users' && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
          >
            <div className="mb-6">
              <h2 className="text-xl font-bold text-gray-900 mb-1">{t("users")}</h2>
              <p className="text-gray-600 text-sm">{t("viewUserDetails")}</p>
            </div>

            <div className="space-y-5">
              {users.map((user) => (
                <motion.div
                  key={user.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.3 }}
                  className="border border-gray-200 rounded-lg overflow-hidden hover:shadow-sm transition-all"
                >
                  <div className="p-5">
                    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-5">
                      <div className={`flex items-center gap-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                        <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                          <User className="w-6 h-6 text-blue-700" />
                        </div>
                        <div className={currentLanguage === 'ar' ? 'text-right' : 'text-left'}>
                          <h3 className="text-base font-bold text-gray-900 mb-1">{user.name}</h3>
                          <div className="flex flex-wrap gap-3 text-xs">
                            <div className="flex items-center gap-1 text-gray-700">
                              <Mail className="w-3 h-3" />
                              <span>{user.email}</span>
                            </div>
                            <div className="flex items-center gap-1 text-gray-700">
                              <Phone className="w-3 h-3" />
                              <span>{user.phone}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div className={`flex gap-4 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                        <div className="text-center bg-blue-50 p-3 rounded-lg">
                          <div className="text-lg font-bold text-blue-700">{user.activeBookings}</div>
                          <div className="text-gray-700 text-xs">{t("activeBookings")}</div>
                        </div>
                        <div className="text-center bg-emerald-50 p-3 rounded-lg">
                          <div className="text-lg font-bold text-emerald-700">{user.totalBookings}</div>
                          <div className="text-gray-700 text-xs">{t("totalBookings")}</div>
                        </div>
                      </div>
                    </div>

                    {user.currentBooking ? (
                      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-5">
                        <h4 className="font-bold text-blue-900 text-sm mb-3 flex items-center gap-2">
                          <Calendar className="w-4 h-4" />
                          {t("currentActiveBooking")}
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                          <div className="bg-white p-3 rounded">
                            <div className="text-xs text-blue-700 mb-1">{t("property")}</div>
                            <div className="font-bold text-blue-900 text-sm">{t(user.currentBooking.propertyName)}</div>
                          </div>
                          <div className="bg-white p-3 rounded">
                            <div className="text-xs text-blue-700 mb-1">{t("duration")}</div>
                            <div className="font-bold text-blue-900 text-sm">{user.currentBooking.duration}</div>
                          </div>
                          <div className="bg-white p-3 rounded">
                            <div className="text-xs text-blue-700 mb-1">{t("totalAmount")}</div>
                            <div className="font-bold text-blue-900 text-sm">{formatNumber(user.currentBooking.totalAmount)} SYP</div>
                          </div>
                          <div className="bg-white p-3 rounded">
                            <div className="text-xs text-blue-700 mb-1">{t("bookingPeriod")}</div>
                            <div className="font-bold text-blue-900 text-sm">
                              {user.currentBooking.startDate} {t("to")} {user.currentBooking.endDate}
                            </div>
                          </div>
                        </div>
                      </div>
                    ) : (
                      <div className="bg-gray-100 border border-gray-300 rounded-lg p-4 mb-5 text-center">
                        <div className="text-gray-600 text-sm">{t("noActiveBookings")}</div>
                      </div>
                    )}

                    <div className="flex justify-end">
                      <motion.button
                        variants={buttonHover}
                        whileHover="hover"
                        whileTap="tap"
                        onClick={() => showUserDetails(user)}
                        className="px-4 py-2.5 bg-blue-700 hover:bg-blue-800 text-white rounded-lg flex items-center gap-2 text-sm"
                      >
                        <Eye className="w-4 h-4" />
                        {t("viewFullDetails")}
                      </motion.button>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        )}
      </div>

      {selectedUser && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            className="bg-white rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto"
          >
            <div className="p-6">
              <div className={`flex justify-between items-center mb-6 ${currentLanguage === 'ar' ? 'flex-row-reverse' : ''}`}>
                <h3 className="text-lg font-bold text-gray-900">{t("userDetails")}: {selectedUser.name}</h3>
                <button
                  onClick={() => setSelectedUser(null)}
                  className="p-2 hover:bg-gray-100 rounded-lg"
                >
                  <XCircle className="w-5 h-5 text-gray-600" />
                </button>
              </div>
              
              <div className="space-y-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div className="bg-gray-50 p-4 rounded-lg">
                    <h4 className="font-bold text-sm text-gray-800 mb-3">{t("personalInformation")}</h4>
                    <div className="space-y-3 text-sm">
                      <div className="flex justify-between">
                        <span className="text-gray-600">{t("fullName")}:</span>
                        <span className="font-medium">{selectedUser.name}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-600">{t("email")}:</span>
                        <span className="font-medium">{selectedUser.email}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-600">{t("phoneNumber")}:</span>
                        <span className="font-medium">{selectedUser.phone}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-gray-600">{t("joinDate")}:</span>
                        <span className="font-medium">{selectedUser.joinDate}</span>
                      </div>
                    </div>
                  </div>
                  
                  <div className="bg-blue-50 p-4 rounded-lg">
                    <h4 className="font-bold text-sm text-blue-800 mb-3">{t("bookingStatistics")}</h4>
                    <div className="space-y-3 text-sm">
                      <div className="flex justify-between">
                        <span className="text-blue-600">{t("activeBookings")}:</span>
                        <span className="font-medium text-blue-800">{selectedUser.activeBookings}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-blue-600">{t("totalBookings")}:</span>
                        <span className="font-medium text-blue-800">{selectedUser.totalBookings}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </div>
      )}
    </div>
  );
}