'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import {
  DollarSign,
  TrendingUp,
  Calendar,
  Loader2,
  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 { t, i18n } = useTranslation();
  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()) {
      return;
    }
    if (!AuthService.isOwner()) {
      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 ?? data.totalRevenue ?? 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(t('accountBook.loadError'));
  } finally {
    setIsLoading(false);
  }
}
    fetchData();
  }, []);

  const formatCurrency = (amount) => {
    const num = Number(amount);
    if (isNaN(num)) return 'N/A';
    return num.toLocaleString() + ' ' + t('currency-syp-suffix');
  };

  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">{t('accountBook.loading')}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8" dir={i18n.language === 'ar' ? 'rtl' : 'ltr'}>
      <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="mb-8"
        >
          <h1 className="text-3xl font-bold text-gray-900">{t('accountBook')}</h1>
          <p className="text-gray-600">{t('financialRecords')}</p>
        </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">{t('accountBook.ownerFinancialOverview')}</h2>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            <StatCard
              title={t('accountBook.revenue')}
              value={formatCurrency(stats.financialRevenue)}
              icon={TrendingUp}
              color="bg-emerald-500"
              isNA={isNA(stats.financialRevenue)}
            />
            <StatCard
              title={t('accountBook.commission')}
              value={formatCurrency(stats.financialCommission)}
              icon={DollarSign}
              color="bg-orange-500"
              isNA={isNA(stats.financialCommission)}
            />
            <StatCard
              title={t('accountBook.remainingBalance')}
              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">{t('accountBook.directPropertyStats')}</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-6">
            <StatCard
              title={t('accountBook.revenue')}
              value={formatCurrency(stats.directRevenue)}
              icon={TrendingUp}
              color="bg-emerald-500"
              isNA={isNA(stats.directRevenue)}
            />
            <StatCard
              title={t('accountBook.commission')}
              value={formatCurrency(stats.directCommission)}
              icon={DollarSign}
              color="bg-orange-500"
              isNA={isNA(stats.directCommission)}
            />
            <StatCard
              title={t('accountBook.remainingBalance')}
              value={formatCurrency(stats.directBalance)}
              icon={DollarSign}
              color="bg-blue-500"
              isNA={isNA(stats.directBalance)}
            />
            <StatCard
              title={t('accountBook.overallRating')}
              value={formatRating(stats.directRating)}
              icon={Star}
              color="bg-purple-500"
              isNA={isNA(stats.directRating)}
            />
            <StatCard
              title={t('accountBook.postponements')}
              value={formatNumber(stats.directPostponements)}
              icon={Calendar}
              color="bg-red-500"
              isNA={isNA(stats.directPostponements)}
            />
          </div>
        </motion.div>
      </div>
    </div>
  );
}