"use client";
import { cellIndex } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Badge, Spinner } from "flowbite-react";
import { FC, useEffect, useMemo, useState } from "react";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import ExpenseEdit from "./expense-edit";
import getData from "@/utils/fetch";
import MoneyFormat from "../common/money";
import ExpenseActions from "./expense-actions";

type props = {
  filterValue?: string
}

const ExpenseList: FC<props> = ({ filterValue }) => {
  const [currentPage, setCurrentPage] = useState<any>(1);
  const [pagination, setPagination] = useState<any>({});
  const onPageChange = (page: number) => setCurrentPage(page);
  const [isOpen, setOpen] = useState(false);
  const [expense_id, setExpenseId] = useState<string | null>(null);

  const getExpenses = async () => {
    const base_url = `/api/v1/expenses?page=${currentPage}`;
    const url = filterValue ? `${base_url}&${filterValue}` : base_url;
    try {
      const {
        data: { data },
        data: { pagination },
      } = await getData(url);
      setPagination(pagination);
      return data;
    } catch (error) {
      console.error("Error fetching expenses:", error);
      throw error;
    }
  };

  const {
    data: expenses,
    isLoading,
    isError,
    refetch,
    isFetching,
    error = {} as any,
  } = useQuery({
    queryKey: ["expenses", currentPage, filterValue],
    placeholderData: keepPreviousData,
    queryFn: getExpenses,
    retry: 0,
  });

  useEffect(() => {
    if (!filterValue?.includes("#")) {
      setCurrentPage(1);
    }
  }, [filterValue]);

  const columns = useMemo(() => [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      header: "date",
      accessorKey: "expense_date",
    },
    {
      header: "voucher",
      accessorKey: "voucher",
    },
    {
      header: "expense by",
      accessorKey: "expense.staff.name",
      cell: ({ row }: any) => {
        const expense = row.original;
        return <p>{expense?.staff?.name}</p>;
      },
    },
    {
      header: "fund",
      accessorKey: "fund.name",
      cell: ({ row }: any) => {
        const expense = row.original;
        return <p>{expense?.fund?.name}</p>;
      },
    },
    {
      header: "zone",
      accessorKey: "zone.name",
      cell: ({ row }: any) => {
        const expense = row.original;
        return <p>{expense?.zone?.name}</p>;
      },
    },
    {
      header: "type",
      accessorKey: "expenseType.name",
    },
    {
      header: "category",
      accessorKey: "expense_category.name",
    },
    {
      header: "amount",
      accessorKey: "amount",
      cell: ({ row }: any) => {
        const expense = row.original;
        return <MoneyFormat amount={expense?.amount} />;
      },
    },
    {
      header: "status",
      accessorKey: "status",
      cell: ({ row }: any) => {
        const expense = row.original;
        const colorBadge = {
          approved: "success",
          pending: "gray",
          declined: "failure",
        }
        return (
          <Badge className="inline-block" color={colorBadge[expense?.status]}>
            {expense?.status}
          </Badge>
        );
      },
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const expense = row.original;
        const expense_id: string = String(expense.id);
        return (
          <ExpenseActions
            expenseId={expense_id}
            onEditClick={() => {
              setOpen(true);
              setExpenseId(expense_id);
            }}
            expense={expense}
          />
        );
      },
    },
  ], [pagination]);

  return (
    <>
      {(isLoading || isFetching) && (
        <div className="relative">
          <div className="grid fixed left-2/4 top-1/2 z-50">
            <Spinner size="xl" color="purple" />
          </div>
        </div>
      )}
      {isOpen && (
        <ExpenseEdit
          expenseId={expense_id}
          setOpen={setOpen as () => void}
          isOpen={isOpen}
        />
      )}
      {isError && (
        <div className="p-4 text-red-600">
          Error loading expenses: {error?.message || "Unknown error"}
        </div>
      )}
      {(expenses !== undefined && expenses !== null) && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b overflow-x-auto">
            <DataTable data={expenses || []} columns={columns} loading={isOpen} />
          </div>

          <CustomPagination
            currentPage={currentPage}
            onPageChange={onPageChange}
            pagination={pagination}
          />
        </div>
      )}
    </>
  );
};
export default ExpenseList;