"use client";
import { cellIndex } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC, useEffect, useState } from "react";
import MoneyFormat from "../common/money";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import { TSproductSchema } from "../forms/schema/product";
import Spinner from "../spinner";
import ProductSerialView from "./product-serial-view";
import { Tooltip } from "flowbite-react";

type props = {
  filterValue?: string | null;
  initProduct?: TSproductSchema;
  initPagination?: any;
  initReports?: any;
};
const ProductOutReport: FC<props> = ({
  initProduct,
  initPagination,
  initReports,
  filterValue,
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>(initPagination);
  const [reports, setReports] = useState<any>(initReports);
  let url = `/api/product-reports?page=${currentPage}&mode=out`;

  const onPageChange = (page: number) => setCurrentPage(page);
  const getProductStock = async () => {
    const {
      data: { data },
      data: {
        data: { pagination },
      },
      data: {
        data: { reports },
      },
    } = await axios.get(filterValue ? `${url}&${filterValue}` : url);
    setReports(reports);
    setPagination(pagination);
    return data?.data;
  };
  const {
    data: productStock,
    isRefetching,
    isError,
    refetch,
    error = {} as any,
  } = useQuery({
    queryKey: ["product-details", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getProductStock(),
    retry: 0,
    initialData: initProduct,
    refetchOnWindowFocus: false,
  });
  useEffect(() => {
    setCurrentPage(1);
    refetch();
  }, [filterValue]);

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      accessorKey: "Date",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <div>
            {product?.out_date}
          </div>
        );
      },
    },
    {
      header: "Status",
      accessorKey: "status",
    },
    {
      header: "vendor",
      cell: ({ row }: any) => {
        const product = row.original;
        return <>{product?.vendor?.name}</>;
      },
    },
    {
      header: "Stock Out",
      accessorKey: "quantity",
      cell: ({ row }: any) => {
        const products = row.original;
        return <>{products?.quantity}</>;
      },
    },
    {
      header: "UP",
      accessorKey: "unit_price",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <>
            <MoneyFormat amount={product?.unit_price} />
          </>
        );
      },
    },
    {
      header: "TP",
      accessorKey: "total_price",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <>
            <MoneyFormat amount={product?.total_price} />
          </>
        );
      },
    },
    {
      header: "SL",
      cell: ({ row }: any) => {
        const product = row.original;
        return <ProductSerialView product={product} />;
      },
    },
    {
      header: "Note",
      cell: ({ row }: any) => {
        const product = row.original;
        const tooltip = `${product?.note} ${product?.receivedBy?.name ? ` purchase by: ${product?.receivedBy?.name} ` : ''} ${product?.staff?.name ? ` entry by: ${product?.staff?.name} ` : ''}`
        return (<>
          <div className="line-clamp-1">
            <Tooltip content={tooltip}>
              {product?.note}
            </Tooltip>
          </div>
        </>);
      },
    },
  ];

  return (
    <div className="overflow-hidden dark:text-gray-200">
      <div>
        <div className="border-t p-2 dark:border-gray-500 dark:border-b dark:bg-gray-800">
          <div className="grid gap-6 grid-cols-1 md:grid-cols-4">
            <div>
              Actual Quantity:
              <span className="font-bold"> {reports?.actual_quantity}</span>
            </div>
            <div>
              Actual Price:
              <div className="font-bold inline-block ml-2">
                <MoneyFormat amount={reports?.actual_total_price} />
              </div>
            </div>
            <div>
              Current Quantity:
              <span className="font-bold inline-block ml-2">
                {reports?.product_out_current_quantity}
              </span>
            </div>
            <div>
              Current Price:
              <span className="font-bold inline-block ml-2">
                <MoneyFormat
                  amount={reports?.product_out_current_total_price}
                />
              </span>
            </div>
          </div>
        </div>
        {isRefetching && (
          <div className="flex relative justify-center">
            <Spinner size="lg" className="absolute z-10" />
          </div>
        )}
        <div className="overflow-hidden pb-10">
          <div className="border-b overflow-x-auto">
            {productStock?.length > 0 && (
              <DataTable data={productStock} columns={columns} />
            )}
          </div>
          <CustomPagination
            currentPage={currentPage}
            onPageChange={onPageChange}
            pagination={pagination}
          />
        </div>
      </div>
    </div>
  );
};

export default ProductOutReport;