star-erp/resources/js/Pages/StoreRequisition/Show.tsx

import { useState } from "react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, router } from "@inertiajs/react";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import { Label } from "@/Components/ui/label";
import { StatusBadge } from "@/Components/shared/StatusBadge";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogFooter,
    DialogDescription,
} from "@/Components/ui/dialog";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import { toast } from "sonner";
import { Can } from "@/Components/Permission/Can";
import { usePermission } from "@/hooks/usePermission";
import {
    Store,
    SendHorizontal,
    CheckCircle2,
    XCircle,
    Pencil,
    Loader2,
    ArrowLeft,
} from "lucide-react";
import { formatDate } from "@/lib/date";

function getStatusBadge(status: string) {
    const statusMap: Record<string, { label: string; variant: "neutral" | "warning" | "success" | "destructive" | "info" }> = {
        draft: { label: "草稿", variant: "neutral" },
        pending: { label: "待審核", variant: "warning" },
        approved: { label: "已核准", variant: "success" },
        rejected: { label: "已駁回", variant: "destructive" },
        completed: { label: "已完成", variant: "success" },
        cancelled: { label: "已取消", variant: "neutral" },
    };

    const config = statusMap[status];
    if (!config) return <StatusBadge variant="neutral">{status}</StatusBadge>;

    return (
        <StatusBadge variant={config.variant}>
            {config.label}
        </StatusBadge>
    );
}

interface RequisitionItem {
    id: number;
    product_id: number;
    product_name: string;
    product_code: string;
    unit_name: string;
    requested_qty: number;
    approved_qty: number | null;
    current_stock: number;
    remark: string | null;
}

interface Requisition {
    id: number;
    doc_no: string;
    status: string;
    store_warehouse_id: number;
    store_warehouse_name: string;
    supply_warehouse_id: number | null;
    supply_warehouse_name: string;
    remark: string | null;
    reject_reason: string | null;
    creator_name: string;
    approver_name: string;
    submitted_at: string | null;
    approved_at: string | null;
    transfer_order_id: number | null;
    created_at: string;
    items: RequisitionItem[];
}

interface Props {
    requisition: Requisition;
    warehouses: { id: number; name: string }[];
    activities: any[];
}

export default function Show({ requisition, warehouses }: Props) {
    usePermission();
    const [submitting, setSubmitting] = useState(false);
    const [approving, setApproving] = useState(false);
    const [rejecting, setRejecting] = useState(false);

    // 核准狀態
    const [showApproveDialog, setShowApproveDialog] = useState(false);
    const [supplyWarehouseId, setSupplyWarehouseId] = useState("");
    const [approvedItems, setApprovedItems] = useState<{ id: number; approved_qty: string }[]>(
        requisition.items.map((item) => ({
            id: item.id,
            approved_qty: item.requested_qty.toString(),
        }))
    );

    // 駁回狀態
    const [showRejectDialog, setShowRejectDialog] = useState(false);
    const [rejectReason, setRejectReason] = useState("");

    // 提交確認
    const [showSubmitDialog, setShowSubmitDialog] = useState(false);

    const handleSubmit = () => {
        setSubmitting(true);
        router.post(route("store-requisitions.submit", [requisition.id]), {}, {
            onFinish: () => {
                setSubmitting(false);
                setShowSubmitDialog(false);
            },
        });
    };

    const handleApprove = () => {
        if (!supplyWarehouseId) {
            toast.error("請選擇供貨倉庫");
            return;
        }
        // 確認每個核准數量
        for (const item of approvedItems) {
            const qty = parseFloat(item.approved_qty);
            if (isNaN(qty) || qty < 0) {
                toast.error("核准數量不能為負數");
                return;
            }
        }

        setApproving(true);
        router.post(
            route("store-requisitions.approve", [requisition.id]),
            {
                supply_warehouse_id: supplyWarehouseId,
                items: approvedItems.map((item) => ({
                    id: item.id,
                    approved_qty: parseFloat(item.approved_qty),
                })),
            },
            {
                onFinish: () => {
                    setApproving(false);
                    setShowApproveDialog(false);
                },
            }
        );
    };

    const handleReject = () => {
        if (!rejectReason.trim()) {
            toast.error("請填寫駁回原因");
            return;
        }
        setRejecting(true);
        router.post(
            route("store-requisitions.reject", [requisition.id]),
            { reject_reason: rejectReason },
            {
                onFinish: () => {
                    setRejecting(false);
                    setShowRejectDialog(false);
                },
            }
        );
    };

    const updateApprovedQty = (itemId: number, qty: string) => {
        setApprovedItems(
            approvedItems.map((item) => (item.id === itemId ? { ...item, approved_qty: qty } : item))
        );
    };

    const isEditable = ["draft", "rejected"].includes(requisition.status);
    const isPending = requisition.status === "pending";

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: "商品與庫存管理", href: "#" },
                { label: "門市叫貨", href: route("store-requisitions.index") },
                { label: requisition.doc_no, href: "#", isPage: true },
            ]}
        >
            <Head title={`叫貨單 ${requisition.doc_no}`} />

            <div className="container mx-auto p-6 max-w-7xl">
                {/* 返回按鈕 */}
                <div className="mb-6">
                    <Link href={route("store-requisitions.index")}>
                        <Button variant="outline" className="gap-2 button-outlined-primary">
                            <ArrowLeft className="h-4 w-4" />
                            返回列表
                        </Button>
                    </Link>
                </div>

                {/* 頁面標題與操作 */}
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                            <Store className="h-6 w-6 text-primary-main" />
                            {requisition.doc_no}
                        </h1>
                        <div className="flex items-center gap-2 mt-1">
                            {getStatusBadge(requisition.status)}
                            <span className="text-gray-500 text-sm">
                                {formatDate(requisition.created_at)}
                            </span>
                        </div>
                    </div>

                    {/* 操作按鈕 */}
                    <div className="flex gap-2">
                        {isEditable && (
                            <>
                                <Can permission="store_requisitions.edit">
                                    <Link href={route("store-requisitions.edit", [requisition.id])}>
                                        <Button variant="outline" className="button-outlined-primary">
                                            <Pencil className="w-4 h-4 mr-1" />
                                            編輯
                                        </Button>
                                    </Link>
                                </Can>
                                {requisition.status === "draft" && (
                                    <Can permission="store_requisitions.view">
                                        <Button
                                            className="button-filled-primary"
                                            onClick={() => setShowSubmitDialog(true)}
                                        >
                                            <SendHorizontal className="w-4 h-4 mr-1" />
                                            提交審核
                                        </Button>
                                    </Can>
                                )}
                            </>
                        )}
                        {isPending && (
                            <>
                                <Can permission="store_requisitions.approve">
                                    <Button
                                        variant="outline"
                                        className="button-outlined-error"
                                        onClick={() => setShowRejectDialog(true)}
                                    >
                                        <XCircle className="w-4 h-4 mr-1" />
                                        駁回
                                    </Button>
                                    <Button
                                        className="button-filled-success"
                                        onClick={() => setShowApproveDialog(true)}
                                    >
                                        <CheckCircle2 className="w-4 h-4 mr-1" />
                                        核准
                                    </Button>
                                </Can>
                            </>
                        )}
                    </div>
                </div>

                {/* 基本資訊 */}
                <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
                    <h2 className="text-lg font-semibold text-gray-800 mb-4">基本資訊</h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div>
                            <span className="text-sm text-gray-500">申請倉庫</span>
                            <p className="font-medium text-gray-800 mt-1">
                                {requisition.store_warehouse_name}
                            </p>
                        </div>
                        <div>
                            <span className="text-sm text-gray-500">供貨倉庫</span>
                            <p className="font-medium text-gray-800 mt-1">
                                {requisition.supply_warehouse_name || "-"}
                            </p>
                        </div>
                        <div>
                            <span className="text-sm text-gray-500">申請人</span>
                            <p className="font-medium text-gray-800 mt-1">
                                {requisition.creator_name}
                            </p>
                        </div>
                        {requisition.submitted_at && (
                            <div>
                                <span className="text-sm text-gray-500">提交時間</span>
                                <p className="font-medium text-gray-800 mt-1">
                                    {formatDate(requisition.submitted_at)}
                                </p>
                            </div>
                        )}
                        {requisition.approved_at && (
                            <>
                                <div>
                                    <span className="text-sm text-gray-500">審核人</span>
                                    <p className="font-medium text-gray-800 mt-1">
                                        {requisition.approver_name}
                                    </p>
                                </div>
                                <div>
                                    <span className="text-sm text-gray-500">審核時間</span>
                                    <p className="font-medium text-gray-800 mt-1">
                                        {formatDate(requisition.approved_at)}
                                    </p>
                                </div>
                            </>
                        )}
                        {requisition.remark && (
                            <div className="md:col-span-3">
                                <span className="text-sm text-gray-500">備註</span>
                                <p className="font-medium text-gray-800 mt-1">
                                    {requisition.remark}
                                </p>
                            </div>
                        )}
                        {requisition.reject_reason && (
                            <div className="md:col-span-3">
                                <span className="text-sm text-red-500 font-medium">駁回原因</span>
                                <p className="text-red-600 bg-red-50 rounded-md p-3 mt-1">
                                    {requisition.reject_reason}
                                </p>
                            </div>
                        )}
                        {requisition.transfer_order_id && (
                            <div>
                                <span className="text-sm text-gray-500">關聯調撥單</span>
                                <p className="mt-1">
                                    <Link
                                        href={`${route("inventory.transfer.show", [requisition.transfer_order_id])}?from=requisition&from_id=${requisition.id}&from_doc=${encodeURIComponent(requisition.doc_no)}`}
                                        className="text-primary-main hover:underline font-medium"
                                    >
                                        查看調撥單 →
                                    </Link>
                                </p>
                            </div>
                        )}
                    </div>
                </div>

                {/* 商品明細 */}
                <div className="bg-white rounded-lg shadow-sm border p-6 mb-6">
                    <h2 className="text-lg font-semibold text-gray-800 mb-4">商品明細</h2>
                    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <Table>
                            <TableHeader className="bg-gray-50">
                                <TableRow>
                                    <TableHead className="w-[50px] text-center font-medium text-gray-600">
                                        #
                                    </TableHead>
                                    <TableHead className="font-medium text-gray-600">商品編號</TableHead>
                                    <TableHead className="font-medium text-gray-600">商品名稱</TableHead>
                                    <TableHead className="text-right font-medium text-gray-600">
                                        現有庫存
                                    </TableHead>
                                    <TableHead className="text-right font-medium text-gray-600">
                                        需求數量
                                    </TableHead>
                                    <TableHead className="font-medium text-gray-600">單位</TableHead>
                                    {["approved", "completed"].includes(requisition.status) && (
                                        <TableHead className="text-right font-medium text-gray-600">
                                            核准數量
                                        </TableHead>
                                    )}
                                    <TableHead className="font-medium text-gray-600">備註</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {requisition.items.map((item, index) => (
                                    <TableRow key={item.id}>
                                        <TableCell className="text-center text-gray-500 font-medium">
                                            {index + 1}
                                        </TableCell>
                                        <TableCell className="font-mono text-sm text-gray-600">
                                            {item.product_code}
                                        </TableCell>
                                        <TableCell className="font-medium text-gray-800">
                                            {item.product_name}
                                        </TableCell>
                                        <TableCell className="text-right text-gray-600">
                                            {Number(item.current_stock).toLocaleString()}
                                        </TableCell>
                                        <TableCell className="text-right font-medium text-gray-800">
                                            {Number(item.requested_qty).toLocaleString()}
                                        </TableCell>
                                        <TableCell className="text-gray-500">{item.unit_name}</TableCell>
                                        {["approved", "completed"].includes(requisition.status) && (
                                            <TableCell className="text-right font-medium text-green-600">
                                                {item.approved_qty !== null
                                                    ? Number(item.approved_qty).toLocaleString()
                                                    : "-"}
                                            </TableCell>
                                        )}
                                        <TableCell className="text-gray-500 text-sm">
                                            {item.remark || "-"}
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>
                    </div>
                </div>
            </div>

            {/* 提交確認 */}
            <AlertDialog open={showSubmitDialog} onOpenChange={setShowSubmitDialog}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>確認提交審核？</AlertDialogTitle>
                        <AlertDialogDescription>
                            提交後將無法修改叫貨單內容，並會通知相關人員進行審核。
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>取消</AlertDialogCancel>
                        <AlertDialogAction
                            onClick={handleSubmit}
                            className="button-filled-primary"
                            disabled={submitting}
                        >
                            {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            確認提交
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

            {/* 核准對話框 */}
            <Dialog open={showApproveDialog} onOpenChange={setShowApproveDialog}>
                <DialogContent className="sm:max-w-[700px]">
                    <DialogHeader>
                        <DialogTitle>核准叫貨單</DialogTitle>
                        <DialogDescription>選擇供貨倉庫，並確認各商品的核准數量。</DialogDescription>
                    </DialogHeader>
                    <div className="space-y-4 py-2">
                        <div className="space-y-2">
                            <Label>
                                供貨倉庫 <span className="text-red-500">*</span>
                            </Label>
                            <SearchableSelect
                                value={supplyWarehouseId}
                                onValueChange={setSupplyWarehouseId}
                                options={warehouses
                                    .filter((w) => w.id !== requisition.store_warehouse_id)
                                    .map((w) => ({
                                        label: w.name,
                                        value: w.id.toString(),
                                    }))}
                                placeholder="請選擇供貨倉庫"
                                className="h-9"
                            />
                        </div>

                        <div className="border rounded-lg overflow-hidden">
                            <Table>
                                <TableHeader className="bg-gray-50">
                                    <TableRow>
                                        <TableHead className="font-medium text-gray-600">商品</TableHead>
                                        <TableHead className="text-right font-medium text-gray-600 w-[120px]">
                                            需求數量
                                        </TableHead>
                                        <TableHead className="font-medium text-gray-600 w-[80px]">單位</TableHead>
                                        <TableHead className="font-medium text-gray-600 w-[150px]">
                                            核准數量
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {requisition.items.map((item) => (
                                        <TableRow key={item.id}>
                                            <TableCell>
                                                <span className="font-mono text-xs text-gray-500">
                                                    {item.product_code}
                                                </span>
                                                <span className="ml-2 text-gray-800">{item.product_name}</span>
                                            </TableCell>
                                            <TableCell className="text-right text-gray-700">
                                                {Number(item.requested_qty).toLocaleString()}
                                            </TableCell>
                                            <TableCell className="text-gray-500 text-sm">
                                                {item.unit_name}
                                            </TableCell>
                                            <TableCell>
                                                <Input
                                                    type="number"
                                                    step="1"
                                                    min="0"
                                                    value={
                                                        approvedItems.find((ai) => ai.id === item.id)
                                                            ?.approved_qty || ""
                                                    }
                                                    onChange={(e) =>
                                                        updateApprovedQty(item.id, e.target.value)
                                                    }
                                                    className="h-8 text-right"
                                                />
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </div>
                    </div>
                    <DialogFooter>
                        <Button
                            variant="outline"
                            className="button-outlined-primary"
                            onClick={() => setShowApproveDialog(false)}
                        >
                            取消
                        </Button>
                        <Button
                            className="bg-green-600 hover:bg-green-700 text-white"
                            onClick={handleApprove}
                            disabled={approving || !supplyWarehouseId}
                        >
                            {approving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            確認核准
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>

            {/* 駁回對話框 */}
            <Dialog open={showRejectDialog} onOpenChange={setShowRejectDialog}>
                <DialogContent className="sm:max-w-[425px]">
                    <DialogHeader>
                        <DialogTitle>駁回叫貨單</DialogTitle>
                        <DialogDescription>
                            請說明駁回原因，申請人可根據原因修改後重新提交。
                        </DialogDescription>
                    </DialogHeader>
                    <div className="py-2">
                        <Label>
                            駁回原因 <span className="text-red-500">*</span>
                        </Label>
                        <Textarea
                            value={rejectReason}
                            onChange={(e) => setRejectReason(e.target.value)}
                            placeholder="請填寫駁回原因..."
                            rows={4}
                            className="mt-2"
                        />
                    </div>
                    <DialogFooter>
                        <Button
                            variant="outline"
                            className="button-outlined-primary"
                            onClick={() => setShowRejectDialog(false)}
                        >
                            取消
                        </Button>
                        <Button
                            variant="destructive"
                            onClick={handleReject}
                            disabled={rejecting || !rejectReason.trim()}
                        >
                            {rejecting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                            確認駁回
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </AuthenticatedLayout>
    );
}