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