"use client";
import getData from "@/utils/fetch";
import { useNumberFormat } from "@/utils/lib/helpers";
import { useQuery } from "@tanstack/react-query";
import React, { useEffect, useState } from "react";
import { toast } from "react-toastify";
import Spinner from "../spinner";
import FilterForm from "../common/filter-form";
import { Filter } from "../forms/schema/filter";
import CardSkeleton from "./card-skeleton-loader";

type InvoiceReport = {
  month: string;
  total_invoice: number;
  total_discount: number;
  total_after_discount: number;
  total_amount_paid: number;
  total_amount_due: number;
  total_partial_paid: number;
};
export const invoiceFilter: Filter[] = [
  {
    name: "date_filter",
    type: "dropdown",
    placeholder: new Date().toLocaleString('default', { month: 'long' }),
    idName: "date_filter",
    initialData: [
      { name: "This month", id: 'this_month' },
      { name: "Last month", id: 'last_month' },
      { name: "This week", id: 'this_week' },
      { name: "Last week", id: 'last_week' },
      { name: "Today", id: 'today' },
      { name: "Last 15-day", id: 'last_15_days' },
    ],
  },
];

const InvoiceCards: React.FC = () => {
  const [filterValue, setFilter] = useState(null);
  let url = `/api/v1/dashboard-invoice-report`;
  if (filterValue) {
    url = `${url}?${filterValue}`
  }
  const getClientCount = async () => {
    const data = await getData(url);
    if (!data?.success) {
      return toast.error(data);
    }
    return data?.data;
  };

  const { data: cards, isLoading, refetch, isFetching } = useQuery<InvoiceReport>({
    queryKey: ["client-report", filterValue],
    queryFn: () => getClientCount(),
    refetchOnWindowFocus: false,
    retry: 0,
  });

  useEffect(() => {
    if (!filterValue?.includes("#")) {
      refetch();
    }
  }, [filterValue]);
  const CountCard = ({
    title,
    count,
  }: {
    title: string;
    count: number;
  }) => (
    <>
      {isLoading ? <CardSkeleton /> : (
        <div>
          <div>
            <div className="flex mb-2">
              <div className="font-medium">
                {title}
              </div>
              <div className="font-medium">({useNumberFormat(count)}/-)</div>
            </div>
            <div className="flex-1 -mt-4 font-normal text-base">
              <FilterForm schema={invoiceFilter} grids={1} setFilter={setFilter} searchButton={false} />
            </div>
          </div>
          <div>
            {isFetching ? (
              <Spinner size="xs" />
            ) : (
              <>
                <div className="flex justify-between">
                  <div className="font-medium text-green-600">
                    Paid: {cards?.total_amount_paid}
                  </div>
                  <div className="font-medium text-red-600">
                    Due: {cards?.total_amount_due}
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
      )}
    </>

  );
  return (
    <>
      <div className="bg-white p-3 shadow rounded ">
        {
          <CountCard
            title="Total invoice"
            count={cards?.total_after_discount}
          />
        }
      </div>
    </>
  );
};

export default InvoiceCards;