// 'use client';

// import { useState, useEffect } from 'react';
// import { motion } from 'framer-motion';
// import { useRouter } from 'next/navigation';
// import Link from 'next/link';
// import {
//   DollarSign,
//   TrendingUp,
//   TrendingDown,
//   Calendar,
//   Home,
//   Building,
//   Download,
//   Filter,
//   ChevronLeft,
//   ChevronRight,
//   ArrowLeft,
//   Loader2,
//   Eye,
//   PieChart,
//   BarChart,
//   LineChart,
//   Wallet,
//   CreditCard,
//   Clock,
//   CheckCircle,
//   XCircle
// } from 'lucide-react';
// import toast, { Toaster } from 'react-hot-toast';
// import AuthService from '../../services/AuthService';

// const StatCard = ({ title, value, change, icon: Icon, color, trend }) => {
//   return (
//     <motion.div
//       initial={{ opacity: 0, y: 20 }}
//       animate={{ opacity: 1, y: 0 }}
//       className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all"
//     >
//       <div className="flex justify-between items-start mb-4">
//         <div className={`w-12 h-12 ${color} rounded-xl flex items-center justify-center`}>
//           <Icon className="w-6 h-6 text-white" />
//         </div>
//         <div className={`flex items-center gap-1 text-sm ${trend === 'up' ? 'text-green-600' : 'text-red-600'}`}>
//           {trend === 'up' ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
//           <span>{Math.abs(change)}%</span>
//         </div>
//       </div>
//       <h3 className="text-sm text-gray-600 mb-1">{title}</h3>
//       <div className="text-2xl font-bold text-gray-900">{value}</div>
//     </motion.div>
//   );
// };

// const PropertyProfitCard = ({ property, onViewDetails }) => {
//   const formatCurrency = (amount) => {
//     return amount?.toLocaleString() + ' ل.س';
//   };

//   return (
//     <motion.div
//       initial={{ opacity: 0, y: 20 }}
//       animate={{ opacity: 1, y: 0 }}
//       className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all"
//     >
//       <div className="p-5">
//         <div className="flex justify-between items-start mb-4">
//           <div>
//             <h3 className="font-bold text-gray-900 mb-1">{property.title}</h3>
//             <p className="text-sm text-gray-500">{property.location}</p>
//           </div>
//           <span className={`px-2 py-1 rounded-lg text-xs font-medium ${
//             property.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'
//           }`}>
//             {property.status === 'active' ? 'نشط' : 'غير نشط'}
//           </span>
//         </div>

//         <div className="grid grid-cols-2 gap-4 mb-4">
//           <div className="bg-gray-50 p-3 rounded-xl text-center">
//             <DollarSign className="w-5 h-5 text-amber-500 mx-auto mb-1" />
//             <div className="text-xs text-gray-500">إجمالي الأرباح</div>
//             <div className="text-lg font-bold text-amber-600">{formatCurrency(property.totalProfit)}</div>
//           </div>
//           <div className="bg-gray-50 p-3 rounded-xl text-center">
//             <Calendar className="w-5 h-5 text-blue-500 mx-auto mb-1" />
//             <div className="text-xs text-gray-500">عدد الحجوزات</div>
//             <div className="text-lg font-bold text-blue-600">{property.totalBookings}</div>
//           </div>
//         </div>

//         <div className="space-y-2 mb-4">
//           <div className="flex justify-between text-sm">
//             <span className="text-gray-500">هذا الشهر</span>
//             <span className="font-medium text-gray-900">{formatCurrency(property.monthlyProfit)}</span>
//           </div>
//           <div className="flex justify-between text-sm">
//             <span className="text-gray-500">الأسبوع الماضي</span>
//             <span className="font-medium text-gray-900">{formatCurrency(property.weeklyProfit)}</span>
//           </div>
//           <div className="flex justify-between text-sm">
//             <span className="text-gray-500">متوسط السعر اليومي</span>
//             <span className="font-medium text-gray-900">{formatCurrency(property.avgDailyPrice)}</span>
//           </div>
//         </div>

//         <button
//           onClick={() => onViewDetails(property)}
//           className="w-full bg-gray-100 text-gray-700 py-2 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors flex items-center justify-center gap-2"
//         >
//           <Eye className="w-4 h-4" />
//           عرض التفاصيل
//         </button>
//       </div>
//     </motion.div>
//   );
// };

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

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

//   const monthlyData = [
//     { month: 'يناير', profit: 1250000 },
//     { month: 'فبراير', profit: 1500000 },
//     { month: 'مارس', profit: 1800000 },
//     { month: 'إبريل', profit: 2100000 },
//     { month: 'مايو', profit: 2500000 },
//     { month: 'يونيو', profit: 2300000 }
//   ];

//   const maxProfit = Math.max(...monthlyData.map(d => d.profit));

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

//         <div className="p-6 space-y-6">
//           <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
//             <div className="bg-amber-50 p-4 rounded-xl text-center">
//               <div className="text-2xl font-bold text-amber-600">{formatCurrency(property.totalProfit)}</div>
//               <div className="text-xs text-gray-600 mt-1">إجمالي الأرباح</div>
//             </div>
//             <div className="bg-blue-50 p-4 rounded-xl text-center">
//               <div className="text-2xl font-bold text-blue-600">{property.totalBookings}</div>
//               <div className="text-xs text-gray-600 mt-1">عدد الحجوزات</div>
//             </div>
//             <div className="bg-green-50 p-4 rounded-xl text-center">
//               <div className="text-2xl font-bold text-green-600">{property.occupancyRate}%</div>
//               <div className="text-xs text-gray-600 mt-1">نسبة الإشغال</div>
//             </div>
//             <div className="bg-purple-50 p-4 rounded-xl text-center">
//               <div className="text-2xl font-bold text-purple-600">{formatCurrency(property.avgDailyPrice)}</div>
//               <div className="text-xs text-gray-600 mt-1">متوسط السعر اليومي</div>
//             </div>
//           </div>

//           <div className="bg-gray-50 p-4 rounded-xl">
//             <h3 className="font-bold text-gray-900 mb-4">الأرباح الشهرية</h3>
//             <div className="space-y-3">
//               {monthlyData.map((data, index) => (
//                 <div key={index}>
//                   <div className="flex justify-between text-sm mb-1">
//                     <span className="text-gray-600">{data.month}</span>
//                     <span className="font-medium text-gray-900">{formatCurrency(data.profit)}</span>
//                   </div>
//                   <div className="w-full bg-gray-200 rounded-full h-2">
//                     <motion.div
//                       initial={{ width: 0 }}
//                       animate={{ width: `${(data.profit / maxProfit) * 100}%` }}
//                       transition={{ duration: 0.8, delay: index * 0.1 }}
//                       className="bg-amber-500 h-2 rounded-full"
//                     />
//                   </div>
//                 </div>
//               ))}
//             </div>
//           </div>

//           <div className="bg-gray-50 p-4 rounded-xl">
//             <h3 className="font-bold text-gray-900 mb-4">آخر الحجوزات</h3>
//             <div className="space-y-3">
//               {property.recentBookings?.map((booking, index) => (
//                 <div key={index} className="bg-white p-3 rounded-lg flex justify-between items-center">
//                   <div>
//                     <p className="font-medium text-gray-900">{booking.tenantName}</p>
//                     <p className="text-xs text-gray-500">{booking.startDate} - {booking.endDate}</p>
//                   </div>
//                   <div className="text-right">
//                     <p className="font-bold text-amber-600">{formatCurrency(booking.amount)}</p>
//                     <p className="text-xs text-gray-500">{booking.status === 'completed' ? 'مكتمل' : 'قيد التنفيذ'}</p>
//                   </div>
//                 </div>
//               ))}
//             </div>
//           </div>
//         </div>
//       </motion.div>
//     </motion.div>
//   );
// };

// export default function OwnerProfitsPage() {
//   const router = useRouter();
//   const [user, setUser] = useState(null);
//   const [properties, setProperties] = useState([]);
//   const [filteredProperties, setFilteredProperties] = useState([]);
//   const [isLoading, setIsLoading] = useState(true);
//   const [selectedProperty, setSelectedProperty] = useState(null);
//   const [dateRange, setDateRange] = useState({ start: '', end: '' });
//   const [selectedPeriod, setSelectedPeriod] = useState('month');

//     useEffect(() => {
//     const authUser = AuthService.getUser();
//     if (authUser && AuthService.isOwner()) {
//       setUser({
//         name: authUser.name || authUser.email,
//         email: authUser.email,
//         role: 'owner',
//       });
//       loadData();
//     } else {
//       router.push('/auth/choose-role');
//     }
//   }, [router]); // month, year, all



//   const loadProfitsData = () => {
//     const storedProfits = localStorage.getItem('ownerProfits');
//     if (storedProfits) {
//       setProperties(JSON.parse(storedProfits));
//       setFilteredProperties(JSON.parse(storedProfits));
//     } else {
//       const mockProperties = [
//         {
//           id: 1,
//           title: 'فيلا فاخرة في المزة',
//           location: 'دمشق، المزة',
//           status: 'active',
//           totalProfit: 12500000,
//           totalBookings: 24,
//           monthlyProfit: 3200000,
//           weeklyProfit: 850000,
//           avgDailyPrice: 500000,
//           occupancyRate: 78,
//           recentBookings: [
//             { tenantName: 'أحمد محمد', startDate: '2024-03-10', endDate: '2024-03-15', amount: 2500000, status: 'completed' },
//             { tenantName: 'سارة أحمد', startDate: '2024-03-05', endDate: '2024-03-08', amount: 1500000, status: 'completed' }
//           ]
//         },
//         {
//           id: 2,
//           title: 'شقة حديثة في الشهباء',
//           location: 'حلب، الشهباء',
//           status: 'active',
//           totalProfit: 5800000,
//           totalBookings: 18,
//           monthlyProfit: 1500000,
//           weeklyProfit: 400000,
//           avgDailyPrice: 250000,
//           occupancyRate: 65,
//           recentBookings: [
//             { tenantName: 'محمد علي', startDate: '2024-03-12', endDate: '2024-03-14', amount: 750000, status: 'completed' }
//           ]
//         },
//         {
//           id: 3,
//           title: 'بيت عائلي في بابا عمرو',
//           location: 'حمص، بابا عمرو',
//           status: 'active',
//           totalProfit: 8400000,
//           totalBookings: 12,
//           monthlyProfit: 2100000,
//           weeklyProfit: 525000,
//           avgDailyPrice: 350000,
//           occupancyRate: 45,
//           recentBookings: []
//         }
//       ];
//       setProperties(mockProperties);
//       setFilteredProperties(mockProperties);
//       localStorage.setItem('ownerProfits', JSON.stringify(mockProperties));
//     }
//     setIsLoading(false);
//   };

//   const totalStats = {
//     totalProfit: properties.reduce((sum, p) => sum + p.totalProfit, 0),
//     totalBookings: properties.reduce((sum, p) => sum + p.totalBookings, 0),
//     avgOccupancy: Math.round(properties.reduce((sum, p) => sum + p.occupancyRate, 0) / properties.length),
//     activeProperties: properties.filter(p => p.status === 'active').length
//   };

//   const formatCurrency = (amount) => {
//     if (amount >= 1000000) {
//       return (amount / 1000000).toFixed(1) + ' مليون ل.س';
//     }
//     return amount?.toLocaleString() + ' ل.س';
//   };

//   if (isLoading) {
//     return (
//       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
//         <div className="text-center">
//           <Loader2 className="w-12 h-12 text-amber-500 animate-spin mx-auto mb-4" />
//           <p className="text-gray-600">جاري تحميل بيانات الأرباح...</p>
//         </div>
//       </div>
//     );
//   }

//   return (
//     <div className="min-h-screen bg-gray-50 py-8">
//       <Toaster position="top-center" reverseOrder={false} />
      
//       <ProfitDetailsModal
//         property={selectedProperty}
//         isOpen={!!selectedProperty}
//         onClose={() => setSelectedProperty(null)}
//       />

//       <div className="container mx-auto px-4">
//         <motion.div
//           initial={{ opacity: 0, y: -20 }}
//           animate={{ opacity: 1, y: 0 }}
//           className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"
//         >
//           <div>
//             <h1 className="text-3xl font-bold text-gray-900 mb-2">الأرباح والإحصائيات</h1>
//             <p className="text-gray-600">مرحباً {user?.name}، إليك ملخص أرباحك</p>
//           </div>
          
//           <div className="flex gap-3">
//             <select
//               value={selectedPeriod}
//               onChange={(e) => setSelectedPeriod(e.target.value)}
//               className="px-4 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500"
//             >
//               <option value="month">آخر 30 يوم</option>
//               <option value="year">آخر 12 شهر</option>
//               <option value="all">جميع الفترات</option>
//             </select>
//             {/* <button className="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 transition-colors flex items-center gap-2">
//               <Download className="w-5 h-5" />
//               تصدير التقرير
//             </button> */}
//           </div>
//         </motion.div>

//         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
//           <StatCard
//             title="إجمالي الأرباح"
//             value={formatCurrency(totalStats.totalProfit)}
//             change={12.5}
//             icon={Wallet}
//             color="bg-amber-500"
//             trend="up"
//           />
//           <StatCard
//             title="عدد الحجوزات"
//             value={totalStats.totalBookings}
//             change={8.2}
//             icon={Calendar}
//             color="bg-blue-500"
//             trend="up"
//           />
//           <StatCard
//             title="متوسط نسبة الإشغال"
//             value={`${totalStats.avgOccupancy}%`}
//             change={5.3}
//             icon={PieChart}
//             color="bg-green-500"
//             trend="up"
//           />
//           <StatCard
//             title="العقارات النشطة"
//             value={totalStats.activeProperties}
//             change={0}
//             icon={Building}
//             color="bg-purple-500"
//             trend="up"
//           />
//         </div>

//         <div className="mb-6">
//           <div className="flex justify-between items-center mb-4">
//             <h2 className="text-xl font-bold text-gray-900">أرباح العقارات</h2>
//             <div className="flex gap-2">
//               <button
//                 onClick={() => setFilteredProperties(properties)}
//                 className="px-3 py-1.5 bg-gray-100 rounded-lg text-sm hover:bg-gray-200 transition-colors"
//               >
//                 عرض الكل
//               </button>
//             </div>
//           </div>

//           {filteredProperties.length === 0 ? (
//             <div className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-gray-300">
//               <div className="w-24 h-24 bg-amber-100 rounded-full flex items-center justify-center mx-auto mb-4">
//                 <DollarSign className="w-12 h-12 text-amber-600" />
//               </div>
//               <h3 className="text-xl font-bold text-gray-900 mb-2">لا توجد بيانات</h3>
//               <p className="text-gray-600">لا توجد أرباح مسجلة حتى الآن</p>
//             </div>
//           ) : (
//             <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
//               {filteredProperties.map((property) => (
//                 <PropertyProfitCard
//                   key={property.id}
//                   property={property}
//                   onViewDetails={setSelectedProperty}
//                 />
//               ))}
//             </div>
//           )}
//         </div>

//         <motion.div
//           initial={{ opacity: 0 }}
//           animate={{ opacity: 1 }}
//           transition={{ delay: 0.6 }}
//           className="bg-gradient-to-r from-amber-500 to-amber-600 rounded-2xl p-6 text-white mt-8"
//         >
//           <div className="flex items-center justify-between flex-wrap gap-4">
//             <div>
//               <h3 className="text-lg font-bold mb-1">احصل على المزيد من الأرباح</h3>
//               <p className="text-amber-100 text-sm">أضف عقارات جديدة وحسّن أسعارك لزيادة الإشغال</p>
//             </div>
//             <Link
//               href="/owner/properties/add"
//               className="px-6 py-2 bg-white text-amber-600 rounded-xl font-medium hover:bg-amber-50 transition-colors"
//             >
//               إضافة عقار جديد
//             </Link>
//           </div>
//         </motion.div>
//       </div>
//     </div>
//   );
// }



'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useRouter } from 'next/navigation';
import { 
  DollarSign, 
  TrendingUp, 
  Wallet,
  Star,
  Eye,
  Download,
  CalendarDays
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '@/app/services/AuthService';

const StatCard = ({ title, value, icon: Icon, color }) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-all"
    >
      <div className="flex items-center justify-between mb-4">
        <div className={`w-12 h-12 ${color} rounded-xl flex items-center justify-center`}>
          <Icon className="w-6 h-6 text-white" />
        </div>
      </div>
      <h3 className="text-sm text-gray-500 mb-1">{title}</h3>
      <div className="text-2xl font-bold text-gray-900">{value}</div>
    </motion.div>
  );
};

const PropertyProfitCard = ({ property, onViewDetails }) => {
  const formatCurrency = (amount) => `$${amount?.toLocaleString()}`;

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-all"
    >
      <div className="p-5">
        <div className="flex justify-between items-start mb-4">
          <div>
            <h3 className="font-bold text-lg text-gray-900">{property.title}</h3>
            {property.isNotSeized && (
              <span className="inline-block mt-1 px-2 py-0.5 bg-amber-100 text-amber-800 rounded-full text-xs font-medium">
                غير محجوز
              </span>
            )}
          </div>
          <span className="text-xs text-gray-500">{property.location}</span>
        </div>

        <div className="grid grid-cols-3 gap-4 mb-4">
          <div className="text-center">
            <div className="text-sm text-gray-500">الإيرادات</div>
            <div className="text-lg font-bold text-amber-600">{formatCurrency(property.revenue)}</div>
          </div>
          <div className="text-center">
            <div className="text-sm text-gray-500">العمولة</div>
            <div className="text-lg font-bold text-blue-600">{formatCurrency(property.commission)}</div>
          </div>
          <div className="text-center">
            <div className="text-sm text-gray-500">المتبقي</div>
            <div className="text-lg font-bold text-green-600">{formatCurrency(property.remaining)}</div>
          </div>
        </div>

        <div className="flex justify-between items-center pt-3 border-t border-gray-100">
          <div className="flex items-center gap-2">
            <Star className="w-4 h-4 text-amber-500" />
            <span className="text-sm font-medium text-gray-700">التقييم العام:</span>
            <span className="text-sm font-medium text-gray-900">{property.valuation}</span>
          </div>
          <div className="flex items-center gap-1 text-sm text-gray-500">
            <CalendarDays className="w-4 h-4" />
            <span>مؤجر {property.rentedCount} مرة</span>
          </div>
        </div>

        <button
          onClick={() => onViewDetails(property)}
          className="w-full mt-4 py-2 bg-gray-100 text-gray-700 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors flex items-center justify-center gap-2"
        >
          <Eye className="w-4 h-4" />
          عرض التفاصيل
        </button>
      </div>
    </motion.div>
  );
};

const PropertyCalendar = ({ year, month }) => {
  const [currentMonth, setCurrentMonth] = useState(new Date(year, month - 1));
  const monthNames = ['يناير', 'فبراير', 'مارس', 'إبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'];
  const weekDays = ['إثنين', 'ثلاثاء', 'أربعاء', 'خميس', 'جمعة', 'سبت', 'أحد'];

  const getDaysInMonth = (date) => {
    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
  };

  const getFirstDayOfMonth = (date) => {
    const day = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
    return day === 0 ? 6 : day - 1;
  };

  const daysInMonth = getDaysInMonth(currentMonth);
  const firstDayIndex = getFirstDayOfMonth(currentMonth); 

  const cells = [];
  for (let i = 0; i < firstDayIndex; i++) {
    cells.push(<div key={`empty-${i}`} className="p-2 md:p-3 text-center" />);
  }
  for (let d = 1; d <= daysInMonth; d++) {
    cells.push(
      <div
        key={d}
        className="p-2 md:p-3 text-center rounded-xl hover:bg-gray-100 transition-colors"
      >
        {d}
      </div>
    );
  }

  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6">
      <div className="flex justify-between items-center mb-6">
        <h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
          <CalendarDays className="w-5 h-5 text-amber-500" />
          {monthNames[currentMonth.getMonth()]} {currentMonth.getFullYear()}
        </h3>
        <div className="flex gap-2">
          <button
            onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))}
            className="p-2 hover:bg-gray-100 rounded-lg"
          >
            &larr;
          </button>
          <button
            onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))}
            className="p-2 hover:bg-gray-100 rounded-lg"
          >
            &rarr;
          </button>
        </div>
      </div>

      <div className="grid grid-cols-7 gap-1 mb-3 text-center text-sm font-medium text-gray-500">
        {weekDays.map(day => (
          <div key={day}>{day}</div>
        ))}
      </div>

      <div className="grid grid-cols-7 gap-1">
        {cells}
      </div>
    </div>
  );
};

export default function OwnerProfitsPage() {
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  const [summary] = useState({
    totalRevenue: 4290,
    totalCommission: 644,
    remainingBalance: 3647,
  });

  const [properties] = useState([
    {
      id: 1,
      title: 'Damascus Olive Residence',
      location: 'دمشق، المزة',
      isNotSeized: true,
      revenue: 3240,
      commission: 486,
      remaining: 2754,
      valuation: 'جيد جدا',
      rentedCount: 18,
    },
  ]);

  useEffect(() => {
    if (AuthService.isGuest()) {
      router.push('/auth/choose-role');
      return;
    }
    if (!AuthService.isOwner()) {
      router.push('/');
      return;
    }

    const authUser = AuthService.getUser();
    if (authUser) {
      setUser({
        name: authUser.name || authUser.email,
        email: authUser.email,
      });
    }
    setIsLoading(false);
  }, [router]);

  const formatCurrency = (amount) => `$${amount?.toLocaleString()}`;

  const handleViewDetails = (property) => {
    toast.info(`عرض تفاصيل ${property.title}`);
  };

  const handleExportReport = () => {
    toast.success('جاري تصدير التقرير...');
  };

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-amber-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
          <p className="text-gray-600">جاري التحميل...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <Toaster position="top-center" reverseOrder={false} />
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">دفتر الحسابات</h1>
          <p className="text-gray-600">نظرة عامة على أرباح المالك</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          <StatCard
            title="الإيرادات"
            value={formatCurrency(summary.totalRevenue)}
            icon={DollarSign}
            color="bg-green-500"
          />
          <StatCard
            title="العمولة"
            value={formatCurrency(summary.totalCommission)}
            icon={TrendingUp}
            color="bg-blue-500"
          />
          <StatCard
            title="المتبقي"
            value={formatCurrency(summary.remainingBalance)}
            icon={Wallet}
            color="bg-amber-500"
          />
        </div>

        <div className="mb-12">
          <h2 className="text-xl font-bold text-gray-900 mb-4">عقاراتي</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {properties.map((property) => (
              <PropertyProfitCard
                key={property.id}
                property={property}
                onViewDetails={handleViewDetails}
              />
            ))}
          </div>
        </div>

        <div className="mb-12">
          <h2 className="text-xl font-bold text-gray-900 mb-4">تقويم العقار</h2>
          <PropertyCalendar year={2026} month={3} />
        </div>

        {/* <div className="flex justify-end">
          <button
            onClick={handleExportReport}
            className="px-6 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors flex items-center justify-center gap-2"
          >
            <Download className="w-5 h-5" />
            تصدير التقرير
          </button>
        </div> */}
      </div>
    </div>
  );
}