SweetHome/app/owner/account-book/page.js

'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useRouter } from 'next/navigation';
import {
  DollarSign,
  TrendingUp,
  Calendar,
  Building,
  Loader2,
  ArrowLeft,
  Star,
} from 'lucide-react';
import toast, { Toaster } from 'react-hot-toast';
import AuthService from '@/app/services/AuthService';
import { getOwnerStatistics } from '@/app/utils/api';

const StatCard = ({ title, value, icon: Icon, color, subtitle, isNA }) => (
  <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">{isNA ? 'N/A' : value}</div>
    {subtitle && <p className="text-xs text-gray-400 mt-1">{subtitle}</p>}
  </motion.div>
);

export default function OwnerAccountBookPage() {
  const router = useRouter();
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [stats, setStats] = useState({
    totalRevenue: null,
    totalReservations: null,
    activeProperties: null,
    financialRevenue: null,
    financialCommission: null,
    financialBalance: null,
    directRevenue: null,
    directCommission: null,
    directBalance: null,
    directRating: null,
    directPostponements: null,
  });

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

    async function fetchData() {
      try {
        const data = await getOwnerStatistics();
        if (data) {
          setStats({
            totalRevenue: data.totalRevenue ?? null,
            totalReservations: data.totalReservations ?? null,
            activeProperties: data.activeProperties ?? null,
            financialRevenue: data.financialRevenue ?? null,
            financialCommission: data.financialCommission ?? null,
            financialBalance: data.financialBalance ?? null,
            directRevenue: data.directRevenue ?? null,
            directCommission: data.directCommission ?? null,
            directBalance: data.directBalance ?? null,
            directRating: data.directRating ?? null,
            directPostponements: data.directPostponements ?? null,
          });
        }
      } catch {
        toast.error('تعذر تحميل إحصائيات الحساب');
      } finally {
        setIsLoading(false);
      }
    }
    fetchData();
  }, [router]);

  const formatCurrency = (amount) => {
    const num = Number(amount);
    if (isNaN(num)) return 'N/A';
    return num.toLocaleString() + ' ل.س';
  };

  const formatNumber = (val) => {
    const num = Number(val);
    if (isNaN(num)) return 'N/A';
    return num.toLocaleString();
  };

  const formatRating = (val) => {
    const num = Number(val);
    if (isNaN(num)) return 'N/A';
    return num.toFixed(1);
  };

  const isNA = (val) => val === null || val === undefined || val === '';

  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" dir="rtl">
      <Toaster position="top-center" reverseOrder={false} />
      <div className="container mx-auto px-4 max-w-7xl">
        <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 className="flex items-center gap-4">
            <button
              onClick={() => router.back()}
              className="p-2 hover:bg-gray-200 rounded-xl transition-colors"
            >
              <ArrowLeft className="w-5 h-5 text-gray-600" />
            </button>
            <div>
              <h1 className="text-3xl font-bold text-gray-900">دفتر الحسابات</h1>
            </div>
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="mb-8"
        >
          <h2 className="text-xl font-bold text-gray-900 mb-4">نظرة مالية للمالك</h2>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            <StatCard
              title="الإيرادات"
              value={formatCurrency(stats.financialRevenue)}
              icon={TrendingUp}
              color="bg-emerald-500"
              isNA={isNA(stats.financialRevenue)}
            />
            <StatCard
              title="العمولة"
              value={formatCurrency(stats.financialCommission)}
              icon={DollarSign}
              color="bg-orange-500"
              isNA={isNA(stats.financialCommission)}
            />
            <StatCard
              title="الرصيد المتبقي"
              value={formatCurrency(stats.financialBalance)}
              icon={DollarSign}
              color="bg-blue-500"
              isNA={isNA(stats.financialBalance)}
            />
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="mb-8"
        >
          <h2 className="text-xl font-bold text-gray-900 mb-4">إحصائيات العقارات المباشرة</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
            <StatCard
              title="الإيرادات"
              value={formatCurrency(stats.directRevenue)}
              icon={TrendingUp}
              color="bg-emerald-500"
              isNA={isNA(stats.directRevenue)}
            />
            <StatCard
              title="العمولة"
              value={formatCurrency(stats.directCommission)}
              icon={DollarSign}
              color="bg-orange-500"
              isNA={isNA(stats.directCommission)}
            />
            <StatCard
              title="الرصيد المتبقي"
              value={formatCurrency(stats.directBalance)}
              icon={DollarSign}
              color="bg-blue-500"
              isNA={isNA(stats.directBalance)}
            />
            <StatCard
              title="التقييم العام"
              value={formatRating(stats.directRating)}
              icon={Star}
              color="bg-purple-500"
              isNA={isNA(stats.directRating)}
            />
            <StatCard
              title="مرات التأجيل"
              value={formatNumber(stats.directPostponements)}
              icon={Calendar}
              color="bg-red-500"
              isNA={isNA(stats.directPostponements)}
            />
          </div>
        </motion.div>
      </div>
    </div>
  );
}