{{-- 품목 설정 탭 --}}
<div x-data="itemsManager()" x-init="init()">
    <!-- 헤더 -->
    <div class="flex justify-between items-center mb-4">
        <div>
            <h3 class="text-lg font-medium text-gray-800">품목 설정</h3>
            <p class="text-sm text-gray-500 mt-1">수식 결과로 생성되는 출력 품목을 정의합니다.</p>
        </div>
        <button @click="openAddModal()" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm transition flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            품목 추가
        </button>
    </div>

    <!-- 품목 목록 테이블 -->
    <div x-show="items.length > 0" class="overflow-x-auto">
        <table class="w-full border border-gray-200 rounded-lg overflow-hidden">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-12">#</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">품목코드</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">품목명</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">규격</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">단위</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">수량식</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">단가식</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider w-32">액션</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                <template x-for="(item, index) in items" :key="item.id">
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-sm text-gray-500" x-text="index + 1"></td>
                        <td class="px-4 py-3">
                            <span class="font-mono text-sm bg-blue-100 text-blue-700 px-2 py-1 rounded" x-text="item.item_code"></span>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-800" x-text="item.item_name"></td>
                        <td class="px-4 py-3 text-sm text-gray-600" x-text="item.specification || '-'"></td>
                        <td class="px-4 py-3 text-sm text-gray-600" x-text="item.unit"></td>
                        <td class="px-4 py-3">
                            <span class="font-mono text-xs bg-gray-100 px-2 py-1 rounded" x-text="item.quantity_formula"></span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="font-mono text-xs" :class="item.unit_price_formula ? 'bg-green-100 text-green-700 px-2 py-1 rounded' : 'text-gray-400'"
                                  x-text="item.unit_price_formula || '마스터 참조'"></span>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <button @click="editItem(item)" class="text-blue-600 hover:text-blue-800 text-sm mr-2">수정</button>
                            <button @click="deleteItem(item.id)" class="text-red-600 hover:text-red-800 text-sm">삭제</button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <!-- 빈 상태 -->
    <div x-show="items.length === 0" class="text-center py-12 text-gray-500 border-2 border-dashed border-gray-200 rounded-lg">
        <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
        </svg>
        <p class="text-lg font-medium mb-1">설정된 품목이 없습니다</p>
        <p class="text-sm mb-4">위의 "품목 추가" 버튼을 클릭하여 첫 번째 품목을 추가하세요.</p>
    </div>

    <!-- 도움말 -->
    <div class="mt-6 p-4 bg-gray-50 rounded-lg">
        <h4 class="text-sm font-medium text-gray-700 mb-2">품목 설정 가이드</h4>
        <ul class="text-sm text-gray-600 space-y-1">
            <li><span class="font-mono text-blue-600">item_code</span>: 품목 고유 코드 (예: PT-MOTOR-150)</li>
            <li><span class="font-mono text-blue-600">item_name</span>: 품목명 (예: 개폐전동기 150kg)</li>
            <li><span class="font-mono text-blue-600">specification</span>: 규격 (예: 150K(S))</li>
            <li><span class="font-mono text-blue-600">quantity_formula</span>: 수량 계산식 (예: 1, 2, CEIL(H1/3000))</li>
            <li><span class="font-mono text-blue-600">unit_price_formula</span>: 단가 계산식 (빈 값은 마스터 가격 참조)</li>
        </ul>
        <div class="mt-3 p-3 bg-white rounded border border-gray-200">
            <p class="text-xs font-medium text-gray-500 mb-2">예시: 모터 품목</p>
            <table class="text-xs w-full">
                <tr><td class="pr-4 font-mono">품목코드</td><td>PT-MOTOR-150</td></tr>
                <tr><td class="pr-4 font-mono">품목명</td><td>개폐전동기 150kg</td></tr>
                <tr><td class="pr-4 font-mono">규격</td><td>150K(S)</td></tr>
                <tr><td class="pr-4 font-mono">수량식</td><td>1</td></tr>
                <tr><td class="pr-4 font-mono">단가식</td><td>285000 (또는 마스터 참조)</td></tr>
            </table>
        </div>
    </div>

    <!-- 품목 추가/수정 모달 -->
    <div x-show="showModal" x-cloak
         class="fixed inset-0 z-50 overflow-y-auto"
         @keydown.escape.window="closeModal()">
        <div class="flex items-center justify-center min-h-screen px-4">
            <!-- 오버레이 -->
            <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" @click="closeModal()"></div>

            <!-- 모달 콘텐츠 -->
            <div class="relative bg-white rounded-lg shadow-xl max-w-2xl w-full p-6 transform transition-all"
                 @click.stop>
                <h3 class="text-lg font-bold text-gray-800 mb-4" x-text="editingItem ? '품목 수정' : '품목 추가'"></h3>

                <form @submit.prevent="saveItem()">
                    <div class="grid grid-cols-2 gap-4">
                        <!-- 품목코드 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                품목코드 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" x-model="itemForm.item_code"
                                   @input="itemForm.item_code = $event.target.value.toUpperCase().replace(/[^A-Z0-9_-]/g, '')"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
                                   placeholder="예: PT-MOTOR-150"
                                   required>
                        </div>

                        <!-- 품목명 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                품목명 <span class="text-red-500">*</span>
                            </label>
                            <input type="text" x-model="itemForm.item_name"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="예: 개폐전동기 150kg"
                                   required>
                        </div>

                        <!-- 규격 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                규격
                            </label>
                            <input type="text" x-model="itemForm.specification"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="예: 150K(S)">
                        </div>

                        <!-- 단위 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                단위
                            </label>
                            <select x-model="itemForm.unit"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="EA">EA (개)</option>
                                <option value="SET">SET (세트)</option>
                                <option value="M">M (미터)</option>
                                <option value="MM">MM (밀리미터)</option>
                                <option value="KG">KG (킬로그램)</option>
                                <option value="BOX">BOX (박스)</option>
                            </select>
                        </div>
                    </div>

                    <!-- 수량 계산식 -->
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            수량 계산식 <span class="text-red-500">*</span>
                        </label>
                        <input type="text" x-model="itemForm.quantity_formula"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
                               placeholder="예: 1, 2, CEIL(H1/3000)"
                               required>
                        <p class="text-xs text-gray-500 mt-1">정수 또는 수식 (변수 사용 가능: W0, H0, S, H1, K 등)</p>
                    </div>

                    <!-- 단가 계산식 -->
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            단가 계산식
                        </label>
                        <input type="text" x-model="itemForm.unit_price_formula"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
                               placeholder="예: 285000, MOTOR_PRICE * 1.1">
                        <p class="text-xs text-gray-500 mt-1">빈 값이면 5130 마스터 가격을 참조합니다.</p>
                    </div>

                    <div class="flex justify-end gap-3 mt-6">
                        <button type="button" @click="closeModal()"
                                class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                            취소
                        </button>
                        <button type="submit"
                                class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition">
                            저장
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function itemsManager() {
    return {
        showModal: false,
        editingItem: null,
        itemForm: {
            item_code: '',
            item_name: '',
            specification: '',
            unit: 'EA',
            quantity_formula: '1',
            unit_price_formula: '',
        },

        init() {
            // 부모 컴포넌트의 items 데이터 사용
            this.$watch('$root.items', (items) => {
                // items 변경 시 처리 (필요시)
            });
        },

        get items() {
            return this.$root.items || [];
        },

        openAddModal() {
            this.editingItem = null;
            this.itemForm = {
                item_code: '',
                item_name: '',
                specification: '',
                unit: 'EA',
                quantity_formula: '1',
                unit_price_formula: '',
            };
            this.showModal = true;
        },

        editItem(item) {
            this.editingItem = item;
            this.itemForm = {
                item_code: item.item_code || '',
                item_name: item.item_name || '',
                specification: item.specification || '',
                unit: item.unit || 'EA',
                quantity_formula: item.quantity_formula || '1',
                unit_price_formula: item.unit_price_formula || '',
            };
            this.showModal = true;
        },

        closeModal() {
            this.showModal = false;
            this.editingItem = null;
        },

        async saveItem() {
            const formulaId = {{ $id }};
            const isEdit = !!this.editingItem;

            const data = {
                item_code: this.itemForm.item_code,
                item_name: this.itemForm.item_name,
                specification: this.itemForm.specification || null,
                unit: this.itemForm.unit,
                quantity_formula: this.itemForm.quantity_formula,
                unit_price_formula: this.itemForm.unit_price_formula || null,
            };

            const url = isEdit
                ? `/api/admin/quote-formulas/formulas/${formulaId}/items/${this.editingItem.id}`
                : `/api/admin/quote-formulas/formulas/${formulaId}/items`;

            try {
                const res = await fetch(url, {
                    method: isEdit ? 'PUT' : 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify(data),
                });

                const result = await res.json();

                if (res.ok && result.success) {
                    showToast(result.message, 'success');
                    this.closeModal();
                    // 부모 컴포넌트의 loadItems 호출
                    await this.$root.loadItems();
                } else {
                    showToast(result.message || '저장에 실패했습니다.', 'error');
                }
            } catch (err) {
                console.error('품목 저장 실패:', err);
                showToast('서버 오류가 발생했습니다.', 'error');
            }
        },

        async deleteItem(itemId) {
            if (!confirm('이 품목을 삭제하시겠습니까?')) return;

            const formulaId = {{ $id }};

            try {
                const res = await fetch(`/api/admin/quote-formulas/formulas/${formulaId}/items/${itemId}`, {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                });

                const result = await res.json();

                if (res.ok && result.success) {
                    showToast(result.message, 'success');
                    // 부모 컴포넌트의 loadItems 호출
                    await this.$root.loadItems();
                } else {
                    showToast(result.message || '삭제에 실패했습니다.', 'error');
                }
            } catch (err) {
                console.error('품목 삭제 실패:', err);
                showToast('서버 오류가 발생했습니다.', 'error');
            }
        },
    };
}
</script>