star-erp/resources/js/Pages/PurchaseOrder/Create.tsx

/**
 * 建立/編輯採購單頁面
 */

import { ArrowLeft, Plus, Info } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import { Alert, AlertDescription } from "@/Components/ui/alert";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link, router } from "@inertiajs/react";
import { PurchaseOrderItemsTable } from "@/Components/PurchaseOrder/PurchaseOrderItemsTable";
import type { PurchaseOrder, Supplier } from "@/types/purchase-order";
import type { Warehouse } from "@/types/requester";
import { usePurchaseOrderForm } from "@/hooks/usePurchaseOrderForm";
import {
    filterValidItems,
    calculateTotalAmount,
    getTodayDate,
    formatCurrency,
} from "@/utils/purchase-order";
import { STATUS_OPTIONS } from "@/constants/purchase-order";
import { toast } from "sonner";
import { getCreateBreadcrumbs, getEditBreadcrumbs } from "@/utils/breadcrumb";

interface Props {
    order?: PurchaseOrder;
    suppliers: Supplier[];
    warehouses: Warehouse[];
}

export default function CreatePurchaseOrder({
    order,
    suppliers,
    warehouses,
}: Props) {
    const {
        supplierId,
        expectedDate,
        items,
        notes,
        selectedSupplier,
        isOrderSent,
        warehouseId,
        setSupplierId,
        setExpectedDate,
        setNotes,
        setWarehouseId,
        addItem,
        removeItem,
        updateItem,
        status,
        setStatus,
        invoiceNumber,
        invoiceDate,
        invoiceAmount,
        setInvoiceNumber,
        setInvoiceDate,
        setInvoiceAmount,
    } = usePurchaseOrderForm({ order, suppliers });


    const totalAmount = calculateTotalAmount(items);

    const handleSave = () => {
        if (!warehouseId) {
            toast.error("請選擇入庫倉庫");
            return;
        }

        if (!supplierId) {
            toast.error("請選擇供應商");
            return;
        }

        if (!expectedDate) {
            toast.error("請選擇預計到貨日期");
            return;
        }

        if (items.length === 0) {
            toast.error("請至少新增一項採購商品");
            return;
        }

        // 檢查是否有數量大於 0 的項目
        const itemsWithQuantity = items.filter(item => item.quantity > 0);
        if (itemsWithQuantity.length === 0) {
            toast.error("請填寫有效的採購數量（必須大於 0）");
            return;
        }

        // 檢查有數量的項目是否都有填寫單價
        const itemsWithoutPrice = itemsWithQuantity.filter(item => !item.unitPrice || item.unitPrice <= 0);
        if (itemsWithoutPrice.length > 0) {
            toast.error("請填寫所有商品的預估單價（必須大於 0）");
            return;
        }

        const validItems = filterValidItems(items);
        if (validItems.length === 0) {
            toast.error("請確保所有商品都有填寫數量和單價");
            return;
        }

        const data = {
            vendor_id: supplierId,
            warehouse_id: warehouseId,
            expected_delivery_date: expectedDate,
            remark: notes,
            status: status,
            invoice_number: invoiceNumber || null,
            invoice_date: invoiceDate || null,
            invoice_amount: invoiceAmount ? parseFloat(invoiceAmount) : null,
            items: validItems.map(item => ({
                productId: item.productId,
                quantity: item.quantity,
                unitPrice: item.unitPrice,
                unitId: item.unitId,
                subtotal: item.subtotal,
            })),
        };

        if (order) {
            router.put(`/purchase-orders/${order.id}`, data, {
                onSuccess: () => toast.success("採購單已更新"),
                onError: (errors) => {
                    // 顯示更詳細的錯誤訊息
                    if (errors.items) {
                        toast.error("商品資料有誤,請檢查數量和單價是否正確填寫");
                    } else if (errors.error) {
                        toast.error(errors.error);
                    } else {
                        toast.error("更新失敗,請檢查輸入內容");
                    }
                    console.error(errors);
                }
            });
        } else {
            router.post("/purchase-orders", data, {
                onSuccess: () => toast.success("採購單已成功建立"),
                onError: (errors) => {
                    if (errors.items) {
                        toast.error("商品資料有誤,請檢查數量和單價是否正確填寫");
                    } else if (errors.error) {
                        toast.error(errors.error);
                    } else {
                        toast.error("建立失敗,請檢查輸入內容");
                    }
                    console.error(errors);
                }
            });
        }
    };

    const hasSupplier = !!supplierId;

    return (
        <AuthenticatedLayout breadcrumbs={order ? getEditBreadcrumbs("purchaseOrders") : getCreateBreadcrumbs("purchaseOrders")}>
            <Head title={order ? "編輯採購單" : "建立採購單"} />
            <div className="container mx-auto p-6 max-w-5xl">
                {/* Header */}
                <div className="mb-8">
                    <Link href="/purchase-orders">
                        <Button
                            variant="outline"
                            className="gap-2 button-outlined-primary mb-6"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            返回列表
                        </Button>
                    </Link>

                    <div className="mb-6">
                        <h1 className="mb-2">{order ? "編輯採購單" : "建立採購單"}</h1>
                        <p className="text-gray-600">
                            {order ? `修改採購單 ${order.poNumber} 的詳細資訊` : "填寫新採購單的資訊以開始流程"}
                        </p>
                    </div>
                </div>

                <div className="space-y-8">
                    {/* 步驟一：基本資訊 */}
                    <div className="bg-white rounded-lg border shadow-sm overflow-hidden">
                        <div className="p-6 bg-gray-50/50 border-b flex items-center gap-3">
                            <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">1</div>
                            <h2 className="text-lg font-bold">基本資訊</h2>
                        </div>

                        <div className="p-8 space-y-8">
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div className="space-y-3">
                                    <label className="text-sm font-bold text-gray-700">
                                        預計入庫倉庫
                                    </label>
                                    <SearchableSelect
                                        value={String(warehouseId)}
                                        onValueChange={setWarehouseId}
                                        disabled={isOrderSent}
                                        options={warehouses.map((w) => ({ label: w.name, value: String(w.id) }))}
                                        placeholder="請選擇倉庫"
                                        searchPlaceholder="搜尋倉庫..."
                                    />
                                </div>

                                <div className="space-y-3">
                                    <label className="text-sm font-bold text-gray-700">供應商</label>
                                    <SearchableSelect
                                        value={String(supplierId)}
                                        onValueChange={setSupplierId}
                                        disabled={isOrderSent}
                                        options={suppliers.map((s) => ({ label: s.name, value: String(s.id) }))}
                                        placeholder="選擇供應商"
                                        searchPlaceholder="搜尋供應商..."
                                    />
                                </div>
                            </div>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                <div className="space-y-3">
                                    <label className="text-sm font-bold text-gray-700">
                                        預計到貨日期
                                    </label>
                                    <Input
                                        type="date"
                                        value={expectedDate || ""}
                                        onChange={(e) => setExpectedDate(e.target.value)}
                                        min={getTodayDate()}
                                        className="h-12 border-gray-200"
                                    />
                                </div>

                                {order && (
                                    <div className="space-y-3">
                                        <label className="text-sm font-bold text-gray-700">狀態</label>
                                        <SearchableSelect
                                            value={status}
                                            onValueChange={(v) => setStatus(v as any)}
                                            options={STATUS_OPTIONS.map((opt) => ({ label: opt.label, value: opt.value }))}
                                            placeholder="選擇狀態"
                                        />
                                    </div>
                                )}
                            </div>

                            <div className="space-y-3">
                                <label className="text-sm font-bold text-gray-700">備註事項</label>
                                <Textarea
                                    value={notes || ""}
                                    onChange={(e) => setNotes(e.target.value)}
                                    placeholder="備註這筆採購單的特殊需求..."
                                    className="min-h-[100px] border-gray-200"
                                />
                            </div>
                        </div>
                    </div>

                    {/* 發票資訊 */}
                    <div className="bg-white rounded-lg border shadow-sm overflow-hidden">
                        <div className="p-6 bg-gray-50/50 border-b flex items-center gap-3">
                            <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">2</div>
                            <h2 className="text-lg font-bold">發票資訊</h2>
                            <span className="text-sm text-gray-500">（選填）</span>
                        </div>

                        <div className="p-8 space-y-8">
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                                <div className="space-y-3">
                                    <label className="text-sm font-bold text-gray-700">
                                        發票號碼
                                    </label>
                                    <Input
                                        type="text"
                                        value={invoiceNumber}
                                        onChange={(e) => setInvoiceNumber(e.target.value)}
                                        placeholder="AB-12345678"
                                        maxLength={11}
                                        className="h-12 border-gray-200"
                                    />
                                    <p className="text-xs text-gray-500">格式：2 碼英文 + 分隔線 + 8 碼數字</p>
                                </div>

                                <div className="space-y-3">
                                    <label className="text-sm font-bold text-gray-700">
                                        發票日期
                                    </label>
                                    <Input
                                        type="date"
                                        value={invoiceDate}
                                        onChange={(e) => setInvoiceDate(e.target.value)}
                                        className="h-12 border-gray-200"
                                    />
                                </div>

                                <div className="space-y-3">
                                    <label className="text-sm font-bold text-gray-700">
                                        發票金額
                                    </label>
                                    <Input
                                        type="number"
                                        value={invoiceAmount}
                                        onChange={(e) => setInvoiceAmount(e.target.value)}
                                        placeholder="0"
                                        min="0"
                                        step="0.01"
                                        className="h-12 border-gray-200"
                                    />
                                    {invoiceAmount && totalAmount > 0 && parseFloat(invoiceAmount) !== totalAmount && (
                                        <p className="text-xs text-amber-600">
                                            ⚠️ 發票金額與採購總額不一致（總額：{formatCurrency(totalAmount)}）
                                        </p>
                                    )}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* 步驟三：品項明細 */}
                    <div className={`bg-white rounded-lg border shadow-sm overflow-hidden transition-all duration-300 ${!hasSupplier ? 'opacity-60 saturate-50' : ''}`}>
                        <div className="p-6 bg-gray-50/50 border-b flex items-center justify-between">
                            <div className="flex items-center gap-3">
                                <div className="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center font-bold">3</div>
                                <h2 className="text-lg font-bold">採購商品明細</h2>
                            </div>
                            <Button
                                onClick={addItem}
                                disabled={!hasSupplier || isOrderSent}
                                className="button-filled-primary h-10 gap-2"
                            >
                                <Plus className="h-4 w-4" /> 新增一個品項
                            </Button>
                        </div>

                        <div className="p-8">
                            {!hasSupplier && (
                                <Alert className="mb-6 bg-amber-50 border-amber-200 text-amber-800">
                                    <Info className="h-4 w-4 text-amber-600" />
                                    <AlertDescription>
                                        請先在步驟一選擇「供應商」，才能從該供應商的常用項目中選取商品。
                                    </AlertDescription>
                                </Alert>
                            )}

                            <PurchaseOrderItemsTable
                                items={items}
                                supplier={selectedSupplier}
                                isReadOnly={isOrderSent}
                                isDisabled={!hasSupplier}
                                onRemoveItem={removeItem}
                                onItemChange={updateItem}
                            />

                            {hasSupplier && items.length > 0 && (
                                <div className="mt-8 flex justify-end">
                                    <div className="bg-primary/5 px-8 py-5 rounded-xl border border-primary/10 inline-flex flex-col items-end min-w-[240px]">
                                        <span className="text-sm text-gray-500 font-medium mb-1">採購預估總額</span>
                                        <span className="text-3xl font-black text-primary">{formatCurrency(totalAmount)}</span>
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </div>

                {/* 底部按鈕 */}
                <div className="flex items-center justify-end gap-4 py-8 border-t border-gray-100 mt-8">
                    <Link href="/purchase-orders">
                        <Button variant="ghost" className="h-12 px-8 text-gray-500 hover:text-gray-700">
                            取消
                        </Button>
                    </Link>
                    <Button
                        size="lg"
                        className="bg-primary hover:bg-primary/90 text-white px-12 h-14 rounded-xl shadow-lg shadow-primary/20 text-lg font-bold transition-all hover:scale-[1.02] active:scale-[0.98]"
                        onClick={handleSave}
                    >
                        {order ? "更新採購單" : "確認發布採購單"}
                    </Button>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}