star-erp/resources/js/Components/PurchaseOrder/PurchaseOrderActions.tsx

import { useState } from "react";
import { Pencil, Eye, Trash2 } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Link, useForm, usePage } from "@inertiajs/react";
import type { PurchaseOrder } from "@/types/purchase-order";
import { toast } from "sonner";
import { Can } from "@/Components/Permission/Can";
import { PageProps } from "@/types/global";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";

export function PurchaseOrderActions({
    order,
}: { order: PurchaseOrder }) {
    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
    const { delete: destroy, processing } = useForm({});
    const { auth } = usePage<PageProps>().props;
    const permissions = auth.user?.permissions || [];
    const isSuperAdmin = auth.user?.roles?.some((r: any) => r.name === 'super-admin');

    const canApprove = isSuperAdmin || permissions.includes('purchase_orders.approve');
    const canEdit = isSuperAdmin || permissions.includes('purchase_orders.edit');

    // 編輯按鈕顯示邏輯：
    // 1. 草稿狀態 + 編輯權限
    // 2. 待核准狀態 + 核准權限 (讓主管能直接改)
    const showEditButton = (order.status === 'draft' && canEdit) ||
        (order.status === 'pending' && canApprove);

    const handleConfirmDelete = () => {
        // @ts-ignore
        destroy(route('purchase-orders.destroy', order.id), {
            onSuccess: () => {
                toast.success("採購單已成功刪除");
                setShowDeleteDialog(false);
            },
            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>
            {showEditButton && (
                <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 permission="purchase_orders.delete">
                {order.status === 'draft' && (
                    <Button
                        variant="outline"
                        size="sm"
                        className="button-outlined-error"
                        title="刪除"
                        onClick={() => setShowDeleteDialog(true)}
                        disabled={processing}
                    >
                        <Trash2 className="h-4 w-4" />
                    </Button>
                )}

                <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>確認刪除採購單</AlertDialogTitle>
                            <AlertDialogDescription>
                                確定要刪除採購單 「{order.poNumber}」 嗎？此操作無法撤銷。
                            </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel className="button-outlined-primary">取消</AlertDialogCancel>
                            <AlertDialogAction
                                onClick={handleConfirmDelete}
                                className="button-filled-error"
                            >
                                確認刪除
                            </AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </Can>
        </div>
    );
}