{{-- 統一商品選択モーダル --}}
<div x-data="productSelectionModal()" x-show="show" x-cloak 
     class="fixed inset-0 z-50 overflow-y-auto">
    
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>
        
        <div class="inline-block w-full max-w-6xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-lg">
            
            {{-- ヘッダー --}}
            <div class="flex items-center justify-between pb-4 border-b">
                <h3 class="text-lg font-medium text-gray-900">商品選択</h3>
                <button @click="closeModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            {{-- エラー情報表示 --}}
            <div class="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded-md">
                <div class="flex">
                    <svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                    </svg>
                    <div class="ml-3">
                        <h4 class="text-sm font-medium text-yellow-800">商品選択が必要です</h4>
                        <div class="mt-2 text-sm text-yellow-700">
                            <p><strong>JANコード:</strong> <span x-text="errorData.jan_code"></span></p>
                            <p><strong>商品名:</strong> <span x-text="errorData.product_name"></span></p>
                            <p><strong>エラー種別:</strong> <span x-text="getErrorTypeText(errorData.error_type)"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            
            {{-- 候補商品一覧 --}}
            <div class="mt-6">
                <h4 class="text-md font-medium text-gray-900 mb-3">候補商品</h4>
                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-300">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">選択</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品コード</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品名</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">仕様</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">価格</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">在庫</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <template x-for="product in candidateProducts" :key="product.id">
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="radio" :value="product.id" x-model="selectedProductId" 
                                               class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="product.product_code"></td>
                                    <td class="px-6 py-4 text-sm text-gray-900" x-text="product.product_name"></td>
                                    <td class="px-6 py-4 text-sm text-gray-900" x-text="product.specification"></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="formatPrice(product.price)"></td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900" x-text="product.stock_quantity"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
            
            {{-- フッター --}}
            <div class="mt-6 flex justify-end space-x-3">
                <x-button.secondary @click="skipSelection()">スキップ</x-button.secondary>
                <x-button.primary @click="selectProduct()" :disabled="!selectedProductId">選択</x-button.primary>
            </div>
        </div>
    </div>
</div>

<script>
function productSelectionModal() {
    return {
        show: false,
        errorData: {},
        candidateProducts: [],
        selectedProductId: null,
        
        openModal(errorData, candidateProducts) {
            this.errorData = errorData;
            this.candidateProducts = candidateProducts;
            this.selectedProductId = null;
            this.show = true;
        },
        
        closeModal() {
            this.show = false;
            this.errorData = {};
            this.candidateProducts = [];
            this.selectedProductId = null;
        },
        
        selectProduct() {
            if (this.selectedProductId) {
                // 商品選択処理を実行
                this.$dispatch('product-selected', {
                    errorId: this.errorData.id,
                    productId: this.selectedProductId
                });
                this.closeModal();
            }
        },
        
        skipSelection() {
            // 商品選択をスキップ
            this.$dispatch('product-selection-skipped', {
                errorId: this.errorData.id
            });
            this.closeModal();
        },
        
        getErrorTypeText(errorType) {
            const types = {
                'multiple_products': '同一JANコードで複数商品が存在',
                'product_not_found': '商品マスタに未登録'
            };
            return types[errorType] || '不明なエラー';
        },
        
        formatPrice(price) {
            return price ? '¥' + Number(price).toLocaleString() : '-';
        }
    }
}
</script>