"use client"
import { IconTrendingUp } from "@tabler/icons-react"

import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { useTranslation } from "react-i18next"
import { useEffect, useState } from "react"
import useAxios from "@/hooks/useAxios"
import toast from "react-hot-toast"

export function SectionCards() {
  const [totalCourses, setTotalCourses] = useState(0);  
  const [totalSell, setTotalSell] = useState(0);  
  const [totalSettledSell, setTotalSettledSell] = useState(0);  
  const [totalSettled, setTotalSettled] = useState(0);  
  const [totalPrice, setTotalPrice] = useState(0);  
  const [isLoading, setIsLoading] = useState(false);
  const { request, loading, error } = useAxios();

  const fetchCourses = async (page = 1) => {
    setIsLoading(true);
    try {
      const response = await request(
        "GET",
        `/academy/academy/get/course`
      );

      console.log("پاسخ سرور:", response);

      // توجه: با توجه به ساختار دیتای شما
      if (response?.data?.courses) {
     
        setTotalCourses(response.data.pagination?.totalItems || 0);
       
      } else if (response?.courses) {
      
        setTotalCourses(response.pagination?.totalItems || 0);
        
      } else {
        console.error("ساختار پاسخ نامعتبر:", response);
        toast.error("خطا در ساختار داده دریافت شده");
      }
    } catch (err) {
      console.log("get error:", err);
      toast.error("خطا در دریافت اطلاعات");
    } finally {
      setIsLoading(false);
    }
  };
  const fetchCoursesPayment = async (page = 1) => {
    setIsLoading(true);
    try {
      const response = await request(
        "GET",
        `/academy/course/getAllAcademyPayments?status=success`
      );

      console.log("پاسخ سرور:", response);

      setTotalPrice(response.data.stats.totalAmount)
      setTotalSell(response.data.payments.length)

      console.log(response.data.payments);
      

     
    } catch (err) {
      console.log("get error:", err);
      toast.error("خطا در دریافت اطلاعات");
    } finally {
      setIsLoading(false);
    }
  };
  const fetchCoursesPayment2 = async (page = 1) => {
    setIsLoading(true);
    try {
      const response = await request(
        "GET",
        `/academy/course/getAllAcademyPayments?status=settled`
      );

      console.log("پاسخ سرور:", response);

      setTotalSettled(response.data.stats.totalAmount)
      setTotalSettledSell(response.data.payments.length)

     
    } catch (err) {
      console.log("get error:", err);
      toast.error("خطا در دریافت اطلاعات");
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchCourses(1);
    fetchCoursesPayment(1);
    fetchCoursesPayment2(1);
  }, []);
  return (
    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>{"مبلغ کل فروش"}</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
         
          {(totalPrice + totalSettled).toLocaleString('fa-IR', {
      minimumFractionDigits: 0,
      maximumFractionDigits: 2
    })} تومان
          
          </CardTitle>
          {/* <CardAction>
            <Badge variant="outline">
              <IconTrendingUp />
              +12.5%
            </Badge>
          </CardAction> */}
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            {"کسب درامد"} <IconTrendingUp className="size-4" />
          </div>
          <div className="text-muted-foreground">
          {"مبلغ کل فروش شما در این ماه"}
          </div>
        </CardFooter>
      </Card>
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>{"تعداد پکیج ها"}</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            {totalCourses}
          </CardTitle>
        
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
           {"پکیج های خود را افزایش دهید"} {/*  <IconTrendingDown className="size-4" /> */}
          </div>
          <div className="text-muted-foreground">
            {"درامدی بیشتر با پکیج های بیشتر"}
          </div>
        </CardFooter>
      </Card>
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>{"پکیج فروخته شده"}</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
            {totalSell + totalSettledSell}
          </CardTitle>
          {/* <CardAction>
            <Badge variant="outline">
              <IconTrendingUp />
              +12.5%
            </Badge>
          </CardAction> */}
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
            {"پکیج های فروخته شده در این ماه"} <IconTrendingUp className="size-4" />
          </div>
          <div className="text-muted-foreground">{"با اراعه پکیج های کامل بیشتر بفروشید"}</div>
        </CardFooter>
      </Card>
      <Card className="@container/card">
        <CardHeader>
          <CardDescription>{"مبلغ تسویه نشده"}</CardDescription>
          <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">

          {(totalPrice).toLocaleString('fa-IR', {
      minimumFractionDigits: 0,
      maximumFractionDigits: 2
    })} تومان
         
          </CardTitle>
          {/* <CardAction>
            <Badge variant="outline">
              <IconTrendingUp />
              +4.5%
            </Badge>
          </CardAction> */}
        </CardHeader>
        <CardFooter className="flex-col items-start gap-1.5 text-sm">
          <div className="line-clamp-1 flex gap-2 font-medium">
           {"مقدار بدهیه مدستاگرام به شما"} <IconTrendingUp className="size-4" />
          </div>
          <div className="text-muted-foreground">{"هر پکیج فروخته شده تا 15 روز بعد تسویه میشود"}</div>
        </CardFooter>
      </Card>
    </div>
  )
}
