export const dynamic = 'force-dynamic';

import {
  getTotalProducts,
  getTotalInventory,
  getUserWishlist,
  getTop10SoldProducts,
  getTotalCategories,
  getTotalCollections,
  getCategoriesData,
  getCollectionsData,
  getTop10WishProducts,
} from "@/lib/actions/adminDashboard";
import { Separator } from "@/components/ui/separator";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  CardFooter,
} from "@/components/ui/card";
import {
  BookCopy,
  Tag,
  CopyCheck,
  Shapes,
  ListTodo,
} from "lucide-react";
import TopSellingProducts from "@/components/admin/dashboard/topSelling";
import LowInventories from "@/components/admin/dashboard/lowInventories";
import TopWishProducts from "@/components/admin/dashboard/topWishList";
import UserWishlist from "@/components/admin/dashboard/userWishlist";
import { CombinedPieChart } from "@/components/admin/dashboard/categoriesPie";
import NavPageButton from "@/components/admin/dashboard/navigationPage";
import ChartDataFilter from "@/components/admin/dashboard/chartDataFilter";
import { RANGE_OPTIONS, getRangeOption } from "@/lib/chartRangeOptions";

const adminSummary2 = async(
  { searchParams: { page2, page2From, page2To } }: {
    searchParams: {
      page2?: string;
      page2From?: string;
      page2To?: string;
    }
  }
) => {
  const dataRangeOption = getRangeOption(page2, page2From, page2To) || RANGE_OPTIONS.last_7_days;
  console.log(dataRangeOption);

  // const totalProducts = await getTotalProducts(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );
  const totalProducts = 10;

  // const totalInventory = await getTotalInventory(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );
  const totalInventory = 20;

  // const userWishlist = await getUserWishlist(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );

  const userWishlist = 30;

  // const totalCategories = await getTotalCategories(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );

  const totalCategories = 10;

  // const totalCollections = await getTotalCollections(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );
  const totalCollections = 8;

  const categoriesData = [
    { name: "Category 1", total: 10 },
    { name: "Category 2", total: 20 },
    { name: "Category 3", total: 40 },
    { name: "Category 4", total: 22 },
    { name: "Category 5", total: 30 },
    { name: "Category 6", total: 15 },
  ];

  // const categoriesData = await getCategoriesData(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );

  const collectionsData = [
    { name: "Collection 1", total: 15 },
    { name: "Collection 2", total: 25 },
    { name: "Collection 3", total: 18 },
    { name: "Collection 3", total: 34 },
    { name: "Collection 5", total: 50 },
    { name: "Collection 6", total: 20 },
  ];

  // const collectionsData = await getCollectionsData(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );

  const top10WishProducts = [
    { name: "Product A", users: 1000 },
    { name: "Product B", users: 800 },
    { name: "Product C", users: 600 },
    { name: "Product D", users: 400 },
    { name: "Product E", users: 900 },
    { name: "Product F", users: 760 },
    { name: "Product G", users: 50 },
    { name: "Product H", users: 100 },
    { name: "Product I", users: 200 },
    { name: "Product J", users: 300 },
  ];

  // const top10WishProducts = await getTop10WishProducts(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );

  //console.log(top10WishProducts);


  const top10SoldProducts = [
    { name: "Product A", sold: 100, quantity: 240, fill: "#ff8042" },
    { name: "Product B", sold: 90, quantity: 220, fill: "#ffbb28" },
    { name: "Product C", sold: 80, quantity: 200, fill: "#ff7f50" },
    { name: "Product D", sold: 70, quantity: 180, fill: "#ffc658" },
    { name: "Product E", sold: 60, quantity: 160, fill: "#d0ed59" },
    { name: "Product F", sold: 50, quantity: 140, fill: "#a4de6c" },
    { name: "Product G", sold: 40, quantity: 120, fill: "#82ca9d" },
    { name: "Product H", sold: 30, quantity: 100, fill: "#8dd1e1" },
    { name: "Product I", sold: 20, quantity: 80, fill: "#83a6ed" },
    { name: "Product J", sold: 10, quantity: 60, fill: "#8884d8" },
  ];
  
  // const top10SoldProducts = await getTop10SoldProducts(
  //   dataRangeOption.startDate,
  //   dataRangeOption.endDate ? dataRangeOption.endDate : new Date()
  // );

  //console.log(top10SoldProducts);

  return (
    <div className="px-8 py-10">
      <div className="flex justify-between items-center mt-6">
        <p className="text-heading2-bold  text-grey-1 max-sm:text-heading4-bold">
          Products Summary
        </p>
        <ChartDataFilter
          queryKey="page2"
          selectedRangeLabel={dataRangeOption.label}
        />
      </div>
      <Separator className="bg-grey-1 my-4" />

      <div className="grid grid-cols-2 md:grid-cols-3 gap-6 text-grey-1 mt-10">
        <Card>
          <CardHeader className="flex flex-row justify-between items-center">
            <CardTitle>Total Products</CardTitle>
            <Tag className="w-6 h-6 hidden sm:block" />
          </CardHeader>
          <CardContent>
            <p className="text-body-bold">+ {totalProducts}</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row justify-between items-center">
            <CardTitle>Total Inventory</CardTitle>
            <CopyCheck className="max-sm:hidden" />
          </CardHeader>
          <CardContent>
            <p className="text-body-bold">+ {totalInventory}</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row justify-between items-center">
            <CardTitle>Total WishList</CardTitle>
            <ListTodo className="max-sm:hidden" />
          </CardHeader>
          <CardContent>
            <p className="text-body-bold">+ {userWishlist}</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7 mt-10 text-grey-1">
        <Card className="col-span-4 max-h-[380px] overflow-y-hidden">
          <CardHeader>
            <CardTitle>Top 10 Selling Products</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <TopSellingProducts data={top10SoldProducts} />
          </CardContent>
        </Card>
        <Card className="col-span-3 overflow-y-scroll max-sm:col-span-4 max-h-[380px] ">
          <CardHeader>
            <CardTitle>Lower Inventory Products</CardTitle>
            <CardDescription>
              Here you have lower inventory products which might run out of
              stock
            </CardDescription>
          </CardHeader>
          <CardContent>
            <LowInventories />
          </CardContent>
        </Card>
      </div>

      <div className="row-span-1 md:row-span-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 mt-8 text-grey-1">
        <div className="col-span-1 sm:col-span-2">
          <Card className="overflow-y-scroll">
            <CardHeader>
              <CardTitle>Collections & Categoties Product Ratio </CardTitle>
            </CardHeader>
            <CardContent>
              <CombinedPieChart
                categoriesData={categoriesData}
                collectionsData={collectionsData}
              />
            </CardContent>
          </Card>
        </div>
        <div className="col-span-1 sm:col-span-2 md:col-span-1 overflow-y-scroll ">
          <div className="grid grid-cols-2 md:grid-cols-1 gap-2 max-sm:gap-2  h-full">
            <Card className="w-full h-full">
              <CardHeader className="flex flex-row items-center justify-between p-4">
                <CardTitle>Total Main Categories</CardTitle>
                <BookCopy className="w-6 h-6 hidden sm:block" />
              </CardHeader>
              <CardContent className="p-4">
                <p className="text-lg sm:text-xl font-bold">
                  + {totalCategories}
                </p>
              </CardContent>
            </Card>
            <Card className="w-full h-full">
              <CardHeader className="flex flex-row items-center justify-between p-4">
                <CardTitle>Total Collections</CardTitle>
                <Shapes className="w-6 h-6 hidden sm:block" />
              </CardHeader>
              <CardContent className="p-4">
                <p className="text-lg sm:text-xl font-bold">
                  + {totalCollections}
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-2 mt-10 text-grey-1">
        <Card className="col-span-1  overflow-y-hidden">
          <CardHeader>
            <CardTitle>Top 10 Wishlists Products</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            <TopWishProducts data={top10WishProducts} />
          </CardContent>
        </Card>
        <Card className="col-span-1 overflow-y-scroll ">
          <CardHeader>
            <CardTitle>User Wishlists</CardTitle>
            <CardDescription>
              User have added total +98 products to their wishlist
            </CardDescription>
          </CardHeader>
          <CardContent>
            <UserWishlist />
          </CardContent>
        </Card>
      </div>

      <NavPageButton />
    </div>
  );
};

export default adminSummary2;