"use client";
import { usePermission } from "@/utils/auth/permission";
import { FC, useEffect, useState } from "react";
import ActionButton from "../action-button";
import DeleteRecord from "../common/delete-record";
import { Tooltip } from "flowbite-react";
import { HiCheckCircle, HiXCircle } from "react-icons/hi";
import { useExpenseStatusUpdate } from "./expense-status-form";
import { TSexpenseSchema } from "../forms/schema/expense";

type ExpenseActionsProps = {
    expenseId: string;
    onEditClick: () => void;
    expense: TSexpenseSchema
};

const ExpenseActions: FC<ExpenseActionsProps> = ({ expenseId, onEditClick, expense }) => {
    const { updateStatus, isPending } = useExpenseStatusUpdate(expenseId);
    const [currentAction, setCurrentAction] = useState<"approve" | "decline" | null>(null);

    const handleApprove = () => {
        setCurrentAction("approve");
        updateStatus("approved");
    };

    const handleDecline = () => {
        setCurrentAction("decline");
        updateStatus("declined");
    };

    // Reset currentAction when mutation completes
    useEffect(() => {
        if (!isPending && currentAction) {
            setCurrentAction(null);
        }
    }, [isPending, currentAction]);

    return (
        <div className="flex">
            <div className="mr-2">
                {usePermission("expenses.edit") && (
                    <ActionButton
                        type="edit"
                        onClick={onEditClick}
                    />
                )}
            </div>
            <div className="mr-2">
                {usePermission("expenses.edit") && (expense?.status !== "approved") && (
                    <Tooltip content="Approve">
                        <ActionButton
                            isLoading={isPending && currentAction === "approve"}
                            type="any"
                            size="xs"
                            color="green"
                            onClick={handleApprove}
                        >
                            <HiCheckCircle className="text-xl text-green-500" />
                        </ActionButton>
                    </Tooltip>
                )}
            </div>
            <div className="mr-2">
                {usePermission("expenses.edit") && (expense?.status !== "declined") && (
                    <Tooltip content="Decline">
                        <ActionButton
                            isLoading={isPending && currentAction === "decline"}
                            type="any"
                            size="xs"
                            color="red"
                            onClick={handleDecline}
                        >
                            <HiXCircle className="text-xl text-red-500" />
                        </ActionButton>
                    </Tooltip>
                )}
            </div>
            {usePermission("expenses.delete") && (
                <DeleteRecord
                    name="Expense"
                    url={`/api/v1/expenses/${expenseId}`}
                    keys="expenses"
                />
            )}
        </div>
    );
};

export default ExpenseActions;