"use client";

import { useEffect, useRef, useState } from "react";

import axios from "axios";

import Cookies from "js-cookie";

import { Package, LayoutGrid, ShoppingCart, Users } from "lucide-react";

import { Card, CardContent } from "@/components/shadcnui/card";

interface DashboardCountType {
  totalProducts: number;

  totalCategories: number;

  totalOrders: number;

  totalUsers: number;
}

const DashboardPage = () => {
  const token = Cookies.get("kero_token");

  const [counts, setCounts] = useState<DashboardCountType>({
    totalProducts: 0,

    totalCategories: 0,

    totalOrders: 0,

    totalUsers: 0,
  });

  const [loading, setLoading] = useState(true);

  // Store the current AbortController
  const abortControllerRef = useRef<AbortController | null>(null);

  const getDashboardCounts = async () => {
    // Cancel any previous dashboard requests
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }

    // Create a new AbortController for this request batch
    const controller = new AbortController();

    abortControllerRef.current = controller;

    try {
      setLoading(true);

      const headers = {
        Authorization: `Bearer ${token}`,
      };

      const [
        productsResponse,
        categoriesResponse,
        ordersResponse,
        usersResponse,
      ] = await Promise.all([
        axios.get(`${process.env.NEXT_PUBLIC_API_BASE_URL}/products/admin`, {
          headers,
          signal: controller.signal,
        }),

        axios.get(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/categories/all_Categories`,
          {
            headers,
            signal: controller.signal,
          },
        ),

        axios.get(`${process.env.NEXT_PUBLIC_API_BASE_URL}/orders/admin`, {
          headers,
          signal: controller.signal,
        }),

        axios.get(
          `${process.env.NEXT_PUBLIC_API_BASE_URL}/users/all_users?page=1&limit=10`,
          {
            headers,
            signal: controller.signal,
          },
        ),
      ]);

      // Make sure this request was not cancelled
      if (controller.signal.aborted) {
        return;
      }

      setCounts({
        totalProducts:
          productsResponse.data?.total ||
          productsResponse.data?.products?.length ||
          0,

        totalCategories: categoriesResponse.data?.categories?.length || 0,

        totalOrders:
          ordersResponse.data?.totalOrders ||
          ordersResponse.data?.orders?.length ||
          0,

        totalUsers:
          usersResponse.data?.pagination?.totalUsers ||
          usersResponse.data?.data?.length ||
          0,
      });
    } catch (error) {
      // Ignore errors caused by intentional request cancellation
      if (axios.isCancel(error)) {
        return;
      }

      console.log(error);
    } finally {
      // Only update loading state for the currently active request
      if (abortControllerRef.current === controller) {
        setLoading(false);
      }
    }
  };

  useEffect(() => {
    getDashboardCounts();

    // Cancel dashboard requests when leaving the page
    return () => {
      if (abortControllerRef.current) {
        abortControllerRef.current.abort();
      }
    };
  }, []);

  const dashboardCards = [
    {
      title: "Total Products",

      count: counts.totalProducts,

      icon: Package,
    },

    {
      title: "Categories",

      count: counts.totalCategories,

      icon: LayoutGrid,
    },

    {
      title: "Orders",

      count: counts.totalOrders,

      icon: ShoppingCart,
    },

    {
      title: "Users",

      count: counts.totalUsers,

      icon: Users,
    },
  ];

  return (
    <div className="mt-4 space-y-8">
      <div>
        <h1 className="text-3xl font-bold">Dashboard</h1>

        <p className="text-muted-foreground mt-2">
          Welcome to Kero Admin Dashboard
        </p>
      </div>

      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
        {dashboardCards.map((item) => {
          const Icon = item.icon;

          return (
            <Card
              key={item.title}
              className="border transition-all hover:shadow-lg">
              <CardContent className="flex items-center justify-between p-6">
                <div>
                  <h2 className="text-muted-foreground text-sm font-medium">
                    {item.title}
                  </h2>

                  <p className="mt-3 text-4xl font-bold">
                    {loading ? "..." : item.count}
                  </p>
                </div>

                <div className="rounded-full border p-4">
                  <Icon size={28} />
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>
    </div>
  );
};

export default DashboardPage;