"use client";
import { usePermission } from "@/utils/auth/permission";
import { cellIndex } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Alert, Badge, Pagination, Spinner } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import ActionButton from "../action-button";
import DataTable from "../dataTable/data-table-fb";
import getData from "@/utils/fetch";
import DeleteItem from "../common/delete-item";
import { useRouter } from "next/navigation";
import SalaryShow from "./salary-show";

type props = {
    filterValue?: string
    api?: string
}

const SalaryList: FC<props> = ({ filterValue, api = `/api/v1/salaries` }) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [pagination, setPagination] = useState<any>({});
    const route = useRouter();

    const onPageChange = (page: number) => setCurrentPage(page);
    let base_url = `${api}?page=${currentPage}`;
    let url = filterValue ? `${base_url}` : base_url;

    const getSalaries = async () => {
        const {
            data: { data },
            data: { pagination },
        } = await getData(url);
        setPagination(pagination);
        return data;
    };

    const {
        data: salaries,
        isLoading,
        isFetching,
        refetch,
    } = useQuery({
        queryKey: ["salaries", { currentPage }],
        placeholderData: keepPreviousData,
        queryFn: () => getSalaries(),
        retry: 0,
        refetchOnWindowFocus: false
    });

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

    const columns = [
        {
            header: "SL",
            cell: ({ row }: any) => (
                <div className="font-bold">{cellIndex(row.index, pagination)}</div>
            ),
        },
        {
            header: "Staff",
            accessorKey: "staff.name",
            cell: ({ row }: any) => {
                const salary = row.original;
                return (
                    <div className="font-medium">
                        {salary.staff?.name || "N/A"}
                    </div>
                );
            },
        },
        {
            header: "Date",
            accessorKey: "date",
            cell: ({ row }: any) => {
                const salary = row.original;
                return (
                    <div className="text-sm">
                        {salary.date}
                    </div>
                );
            },
        },
        {
            header: "Amount",
            accessorKey: "amount",
            cell: ({ row }: any) => {
                const salary = row.original;
                return (
                    <div className="font-semibold text-green-600">
                        ৳{salary.amount?.toLocaleString()}
                    </div>
                );
            },
        },
        {
            header: "Type",
            accessorKey: "salary_type",
            cell: ({ row }: any) => {
                const salary = row.original;
                return (
                    <Badge color="indigo" className="inline-block capitalize">
                        {salary.salary_type || "N/A"}
                    </Badge>
                );
            },
        },
        {
            header: "Status",
            accessorKey: "status",
            cell: ({ row }: any) => {
                const salary = row.original;
                const statusColors = {
                    'pending': 'yellow',
                    'paid': 'green',
                    'cancelled': 'red',
                    'approved': 'info'
                };
                return (
                    <Badge color={statusColors[salary.status as keyof typeof statusColors] || 'gray'} className="inline capitalize">
                        {salary.status}
                    </Badge>
                );
            },
        },
        {
            header: "Actions",
            cell: ({ row }: any) => {
                const salary = row.original;
                const salary_id: string = String(salary.id);
                const [isOpen, setOpen] = useState(false)
                return (
                    <div className="flex">
                        <div className="mr-2">
                            {usePermission("salaries.edit") && (
                                <>
                                    <ActionButton
                                        type="edit"
                                        onClick={() => route.push(`/salaries/edit/${salary_id}`)}
                                    />
                                </>
                            )}
                        </div>
                        <div className="mr-2">
                            {usePermission("salaries.show") && (
                                <>
                                    <ActionButton
                                        type="view"
                                        onClick={() => setOpen(true)}
                                    />
                                    <SalaryShow isOpen={isOpen} setOpen={setOpen} salary={salary} />
                                </>
                            )}
                        </div>
                        {usePermission("salaries.delete") && salary?.status !== "repay" && (
                            <DeleteItem
                                keys="salaries"
                                url={`/api/v1/salaries/${salary_id}`}
                                name="salary"
                            />
                        )}
                    </div>
                );
            },
        },
    ];

    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>
            )}
            {salaries !== undefined && (
                <div className="user-list pb-20 shadow-md">
                    <div className="border-b overflow-x-auto">
                        <DataTable data={salaries} columns={columns} loading={isLoading} />
                    </div>

                    <div className="flex justify-between overflow-x-auto">
                        <div className="flex">
                            <Pagination
                                className="ml-2 mt-2"
                                layout="navigation"
                                currentPage={currentPage}
                                totalPages={pagination.total_pages || 0}
                                onPageChange={onPageChange}
                                showIcons
                                nextLabel=""
                                previousLabel=""
                            />
                            <div className="ml-2 mt-5">
                                <p className="text-gray-500">
                                    Showing
                                    <span className="ml-2 mr-1 mt-1 text-gray-900">
                                        {(pagination.current_page - 1) * 10 < 1
                                            ? 1
                                            : (pagination.current_page - 1) * 10}{" "}
                                        - {pagination.current_page * 10}
                                    </span>{" "}
                                    of <span className="text-gray-900"> {pagination.total}</span>{" "}
                                </p>
                            </div>
                        </div>
                        <Pagination
                            currentPage={currentPage}
                            totalPages={pagination.total_pages || 0}
                            onPageChange={onPageChange}
                            className="mr-2 mt-2 text-blue-900 sm:justify-end"
                            showIcons
                            color="blue"
                        />
                    </div>
                </div>
            )}
        </>
    );
};

export default SalaryList;