{/* Header */}

{order ? "編輯採購單" : "建立採購單"}

{order ? `修改採購單 ${order.poNumber} 的詳細資訊` : "填寫新採購單的資訊以開始流程"}

{/* 步驟一：基本資訊 */}

基本資訊

預計入庫倉庫

供應商

預計到貨日期 setExpectedDate(e.target.value)} min={getTodayDate()} className="h-12 border-gray-200" />

{order && (

狀態

)}

備註事項

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 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">2</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>
                            )}

{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}
                        disabled={!canSave}
                    >
                        {order ? "更新採購單" : "確認發布採購單"}
                    </Button>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}