import { Pencil, Eye, Trash2 } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Link, useForm } from "@inertiajs/react";
import type { PurchaseOrder } from "@/types/purchase-order";
import { toast } from "sonner";
import { Can } from "@/Components/Permission/Can";

export function PurchaseOrderActions({
    order,
}: { order: PurchaseOrder }) {
    const { delete: destroy, processing } = useForm({});

    const handleDelete = () => {
        if (confirm(`確定要刪除採購單 ${order.poNumber} 嗎？`)) {
            // @ts-ignore
            destroy(route('purchase-orders.destroy', order.id), {
                onSuccess: () => toast.success("採購單已成功刪除"),
                onError: (errors: any) => toast.error(errors.error || "刪除過程中發生錯誤"),
            });
        }
    };

    return (
        <div className="flex justify-center gap-2">
            <Link href={`/purchase-orders/${order.id}`}>
                <Button
                    variant="outline"
                    size="sm"
                    className="button-outlined-primary"
                    title="查看詳情"
                >
                    <Eye className="h-4 w-4" />
                </Button>
            </Link>
            <Can permission="purchase_orders.edit">
                <Link href={`/purchase-orders/${order.id}/edit`}>
                    <Button
                        variant="outline"
                        size="sm"
                        className="button-outlined-primary"
                        title="編輯"
                    >
                        <Pencil className="h-4 w-4" />
                    </Button>
                </Link>
            </Can>
            <Can permission="purchase_orders.delete">
                <Button
                    variant="outline"
                    size="sm"
                    className="button-outlined-error"
                    title="刪除"
                    onClick={handleDelete}
                    disabled={processing}
                >
                    <Trash2 className="h-4 w-4" />
                </Button>
            </Can>
        </div>
    );
}
