"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Check, X, Eye, Loader2 } from "lucide-react";
import { updateRequestStatus } from "@/app/lib/actions";

export function ApprovalActions({ id, type }: { id: string, type: 'reimbursement' | 'overtime' }) {
    const [isUpdating, setIsUpdating] = useState<'APPROVED' | 'REJECTED' | null>(null);

    async function handleUpdate(status: 'APPROVED' | 'REJECTED') {
        setIsUpdating(status);
        try {
            await updateRequestStatus(id, type, status);
        } catch (e) {
            alert("Failed to update status.");
        } finally {
            setIsUpdating(null);
        }
    }

    return (
        <div className="flex gap-2">
            <Button variant="ghost" className="rounded-xl w-10 h-10 p-0 text-neutral-400 hover:text-indigo-600 hover:bg-indigo-50 transition-all">
                <Eye className="w-5 h-5" />
            </Button>
            <Button
                onClick={() => handleUpdate('APPROVED')}
                disabled={!!isUpdating}
                variant="ghost"
                className="rounded-xl w-10 h-10 p-0 text-neutral-400 hover:text-emerald-600 hover:bg-emerald-50 transition-all"
            >
                {isUpdating === 'APPROVED' ? <Loader2 className="w-5 h-5 animate-spin" /> : <Check className="w-5 h-5" />}
            </Button>
            <Button
                onClick={() => handleUpdate('REJECTED')}
                disabled={!!isUpdating}
                variant="ghost"
                className="rounded-xl w-10 h-10 p-0 text-neutral-400 hover:text-rose-600 hover:bg-rose-50 transition-all"
            >
                {isUpdating === 'REJECTED' ? <Loader2 className="w-5 h-5 animate-spin" /> : <X className="w-5 h-5" />}
            </Button>
        </div>
    );
}