resources/js/Pages/Vendor/Show.tsx

/**
 * 廠商詳細資訊頁面
 */

import { useState } from "react";
import { Head, Link, router } from "@inertiajs/react";
import { Phone, Mail, Plus, ArrowLeft } from "lucide-react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Label } from "@/Components/ui/label";
import { Button } from "@/Components/ui/button";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import SupplyProductList from "@/Components/Vendor/SupplyProductList";
import AddSupplyProductDialog from "@/Components/Vendor/AddSupplyProductDialog";
import EditSupplyProductDialog from "@/Components/Vendor/EditSupplyProductDialog";
import type { Vendor } from "@/Pages/Vendor/Index";
import type { SupplyProduct } from "@/types/vendor";
import { getShowBreadcrumbs } from "@/utils/breadcrumb";

interface Pivot {
    last_price: number | null;
}

interface VendorProduct {
    id: number;
    name: string;
    unit?: string;
    base_unit?: string;
    purchase_unit?: string;
    pivot: Pivot;
}

interface ExtendedVendor extends Vendor {
    products: VendorProduct[];
}

interface ShowProps {
    vendor: ExtendedVendor;
    products: any[];
}

export default function VendorShow({ vendor, products }: ShowProps) {
    const [showAddDialog, setShowAddDialog] = useState(false);
    const [showEditDialog, setShowEditDialog] = useState(false);
    const [showRemoveDialog, setShowRemoveDialog] = useState(false);
    const [selectedProduct, setSelectedProduct] = useState<SupplyProduct | null>(null);

    // 轉換後端資料格式為前端組件需要的格式
    const supplyProducts: SupplyProduct[] = vendor.products.map(p => ({
        id: String(p.id),
        productId: String(p.id),
        productName: p.name,
        unit: p.purchase_unit || p.base_unit || "個",
        lastPrice: p.pivot.last_price || undefined,
    }));

    const handleAddProduct = (productId: string, lastPrice?: number) => {
        router.post(route('vendors.products.store', vendor.id), {
            product_id: productId,
            last_price: lastPrice,
        }, {
            onSuccess: () => setShowAddDialog(false),
        });
    };

    const handleEditProduct = (product: SupplyProduct) => {
        setSelectedProduct(product);
        setShowEditDialog(true);
    };

    const handleUpdateProduct = (productId: string, lastPrice?: number) => {
        router.put(route('vendors.products.update', [vendor.id, productId]), {
            last_price: lastPrice,
        }, {
            onSuccess: () => {
                setShowEditDialog(false);
                setSelectedProduct(null);
            }
        });
    };

    const handleRemoveProduct = (product: SupplyProduct) => {
        setSelectedProduct(product);
        setShowRemoveDialog(true);
    };

    const handleConfirmRemove = () => {
        if (selectedProduct) {
            router.delete(route('vendors.products.destroy', [vendor.id, selectedProduct.productId]), {
                onSuccess: () => {
                    setShowRemoveDialog(false);
                    setSelectedProduct(null);
                }
            });
        }
    };

    return (
        <AuthenticatedLayout breadcrumbs={getShowBreadcrumbs("vendors", `廠商詳情 (${vendor.name})`)}>
            <Head title={`廠商詳情 - ${vendor.name}`} />
            <div className="container mx-auto p-6 max-w-7xl">
                {/* 返回按鈕 */}
                <div className="mb-6">
                    <Link href="/vendors">
                        <Button
                            variant="outline"
                            className="gap-2 button-outlined-primary mb-6"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            返回廠商資料管理
                        </Button>
                    </Link>
                    <h1 className="mb-2">廠商詳細資訊</h1>
                    <p className="text-gray-600">
                        查看並管理供應商的詳細資料與供貨商品
                    </p>
                </div>

                {/* 基本資料 */}
                <div className="bg-white rounded-lg border border-border p-6 mb-6 shadow-sm">
                    <h3 className="mb-4 text-primary font-bold">基本資料</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <Label className="text-muted-foreground text-xs">廠商名稱</Label>
                            <p className="mt-1 font-medium flex items-baseline gap-2">
                                {vendor.name}
                                <span className="text-sm text-muted-foreground">({vendor.code})</span>
                            </p>
                        </div>
                        <div>
                            <Label className="text-muted-foreground text-xs">廠商簡稱</Label>
                            <p className="mt-1 font-medium">{vendor.short_name || "-"}</p>
                        </div>
                        <div>
                            <Label className="text-muted-foreground text-xs">統一編號</Label>
                            <p className="mt-1">{vendor.tax_id || "-"}</p>
                        </div>
                        <div>
                            <Label className="text-muted-foreground text-xs">負責人</Label>
                            <p className="mt-1">{vendor.owner || "-"}</p>
                        </div>
                        <div className="md:col-span-2">
                            <Label className="text-muted-foreground text-xs">備註</Label>
                            <p className="mt-1 whitespace-pre-wrap">{vendor.remark || "-"}</p>
                        </div>
                    </div>
                </div>

                {/* 聯絡資料 */}
                <div className="bg-white rounded-lg border border-border p-6 mb-6 shadow-sm">
                    <h3 className="mb-4 text-primary font-bold">聯絡資料</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <Label className="text-muted-foreground text-xs">聯絡人</Label>
                            <p className="mt-1">{vendor.contact_name || "-"}</p>
                        </div>
                        <div>
                            <Label className="text-muted-foreground text-xs">聯絡電話</Label>
                            <p className="mt-1 flex items-center gap-2">
                                <Phone className="h-4 w-4 text-muted-foreground" />
                                {vendor.phone || vendor.tel || "-"}
                            </p>
                        </div>
                        <div>
                            <Label className="text-muted-foreground text-xs">Email</Label>
                            <p className="mt-1 flex items-center gap-2">
                                <Mail className="h-4 w-4 text-muted-foreground" />
                                {vendor.email || "-"}</p>
                        </div>
                        <div>
                            <Label className="text-muted-foreground text-xs">地址</Label>
                            <p className="mt-1">{vendor.address || "-"}</p>
                        </div>
                    </div>
                </div>

                {/* 供貨商品列表 */}
                <div className="bg-white rounded-lg border border-border p-6 shadow-sm">
                    <div className="flex items-center justify-between mb-4">
                        <h3>供貨商品</h3>
                        <Button
                            onClick={() => setShowAddDialog(true)}
                            className="gap-2 button-filled-primary"
                            size="sm"
                        >
                            <Plus className="h-4 w-4" />
                            新增供貨商品
                        </Button>
                    </div>
                    <SupplyProductList
                        products={supplyProducts}
                        onEdit={handleEditProduct}
                        onRemove={handleRemoveProduct}
                    />
                </div>

                {/* 新增供貨商品對話框 */}
                <AddSupplyProductDialog
                    open={showAddDialog}
                    products={products}
                    existingSupplyProducts={supplyProducts}
                    onClose={() => setShowAddDialog(false)}
                    onAdd={handleAddProduct}
                />

                {/* 編輯供貨商品對話框 */}
                <EditSupplyProductDialog
                    open={showEditDialog}
                    product={selectedProduct}
                    onClose={() => {
                        setShowEditDialog(false);
                        setSelectedProduct(null);
                    }}
                    onSave={handleUpdateProduct}
                />

                {/* 取消供貨確認對話框 */}
                <AlertDialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>
                    <AlertDialogContent>
                        <AlertDialogHeader>
                            <AlertDialogTitle>確認取消供貨</AlertDialogTitle>
                            <AlertDialogDescription>
                                確定要將「{selectedProduct?.productName}」從供貨列表中移除嗎？此操作無法撤銷。
                            </AlertDialogDescription>
                        </AlertDialogHeader>
                        <AlertDialogFooter>
                            <AlertDialogCancel
                                className="gap-2 button-outlined-primary"
                            >
                                取消
                            </AlertDialogCancel>
                            <AlertDialogAction
                                className="gap-2 button-filled-error"
                                onClick={handleConfirmRemove}
                            >
                                確認移除
                            </AlertDialogAction>
                        </AlertDialogFooter>
                    </AlertDialogContent>
                </AlertDialog>
            </div>
        </AuthenticatedLayout>
    );
}