{{-- 매핑 설정 탭 --}}
<div x-data="mappingsManager()" 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="mappings.length === 0" class="mb-4 p-4 bg-gray-50 rounded-lg">
        <label class="block text-sm font-medium text-gray-700 mb-2">
            소스 변수 <span class="text-red-500">*</span>
        </label>
        <input type="text" x-model="sourceVariable"
               @input="sourceVariable = $event.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, '')"
               class="w-full max-w-xs px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
               placeholder="예: CONTROL_TYPE, MOTOR_TYPE">
        <p class="text-xs text-gray-500 mt-1">매핑에 사용할 변수명을 입력하세요 (예: 제어기 유형 CONTROL_TYPE)</p>
    </div>

    <!-- 소스 변수 표시 (매핑이 있을 때) -->
    <div x-show="mappings.length > 0" class="mb-4">
        <span class="text-sm text-gray-600">소스 변수:</span>
        <span class="ml-2 font-mono bg-purple-100 text-purple-700 px-3 py-1 rounded" x-text="sourceVariable || '-'"></span>
    </div>

    <!-- 매핑 목록 테이블 -->
    <div x-show="mappings.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-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="(mapping, index) in mappings" :key="mapping.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-gray-100 px-2 py-1 rounded" x-text="mapping.source_value"></span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="font-mono text-sm" x-text="mapping.result_value"></span>
                        </td>
                        <td class="px-4 py-3">
                            <span class="text-xs px-2 py-1 rounded-full"
                                  :class="mapping.result_type === 'fixed' ? 'bg-green-100 text-green-700' : 'bg-purple-100 text-purple-700'"
                                  x-text="mapping.result_type === 'fixed' ? '고정값' : '수식'"></span>
                        </td>
                        <td class="px-4 py-3 text-right">
                            <button @click="editMapping(mapping)" class="text-blue-600 hover:text-blue-800 text-sm mr-2">수정</button>
                            <button @click="deleteMapping(mapping.id)" class="text-red-600 hover:text-red-800 text-sm">삭제</button>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <!-- 빈 상태 -->
    <div x-show="mappings.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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></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-purple-600">source_variable</span>: 매핑 조건에 사용할 변수명</li>
            <li><span class="font-mono text-purple-600">source_value</span>: 변수의 특정 값 (예: EMB, EXP)</li>
            <li><span class="font-mono text-purple-600">result_value</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">예시: 제어기 유형 매핑 (소스 변수: CONTROL_TYPE)</p>
            <table class="text-xs w-full">
                <tr><td class="pr-4 font-mono">EMB</td><td>매립형</td></tr>
                <tr><td class="pr-4 font-mono">EXP</td><td>노출형</td></tr>
                <tr><td class="pr-4 font-mono">BOX_1P</td><td>콘트롤박스</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-lg w-full p-6 transform transition-all"
                 @click.stop>
                <h3 class="text-lg font-bold text-gray-800 mb-4" x-text="editingMapping ? '매핑 수정' : '매핑 추가'"></h3>

                <form @submit.prevent="saveMapping()">
                    <!-- 소스 변수 (추가 시에만, 첫 매핑일 때) -->
                    <div x-show="!editingMapping && mappings.length === 0" class="mb-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="mappingForm.source_variable"
                               @input="mappingForm.source_variable = $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="예: CONTROL_TYPE">
                    </div>

                    <div class="mb-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="mappingForm.source_value"
                               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="예: EMB, EXP"
                               required>
                        <p class="text-xs text-gray-500 mt-1">변수(<span class="font-mono" x-text="sourceVariable || mappingForm.source_variable || 'CONTROL_TYPE'"></span>)가 이 값일 때 매핑이 적용됩니다.</p>
                    </div>

                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            결과 유형
                        </label>
                        <div class="flex gap-4">
                            <label class="flex items-center">
                                <input type="radio" x-model="mappingForm.result_type" value="fixed"
                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                <span class="ml-2 text-sm text-gray-700">고정값</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" x-model="mappingForm.result_type" value="formula"
                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                <span class="ml-2 text-sm text-gray-700">수식</span>
                            </label>
                        </div>
                    </div>

                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            결과값 <span class="text-red-500">*</span>
                        </label>
                        <textarea x-model="mappingForm.result_value" rows="2"
                                  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="mappingForm.result_type === 'fixed' ? '예: 매립형, PT-CTRL-EMB' : '예: CTRL_BASE_PRICE * 1.2'"
                                  required></textarea>
                        <p class="text-xs text-gray-500 mt-1" x-show="mappingForm.result_type === 'formula'">
                            수식에서 다른 변수를 참조할 수 있습니다.
                        </p>
                    </div>

                    <div class="flex justify-end gap-3">
                        <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 mappingsManager() {
    return {
        showModal: false,
        editingMapping: null,
        sourceVariable: '',
        mappingForm: {
            source_variable: '',
            source_value: '',
            result_value: '',
            result_type: 'fixed',
        },

        init() {
            // 부모 컴포넌트의 mappings 데이터 사용
            this.$watch('$root.mappings', (mappings) => {
                if (mappings.length > 0 && mappings[0].source_variable) {
                    this.sourceVariable = mappings[0].source_variable;
                }
            });

            // 초기 소스 변수 설정
            if (this.$root.mappings && this.$root.mappings.length > 0) {
                this.sourceVariable = this.$root.mappings[0].source_variable;
            }
        },

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

        openAddModal() {
            this.editingMapping = null;
            this.mappingForm = {
                source_variable: this.sourceVariable,
                source_value: '',
                result_value: '',
                result_type: 'fixed',
            };
            this.showModal = true;
        },

        editMapping(mapping) {
            this.editingMapping = mapping;
            this.mappingForm = {
                source_variable: mapping.source_variable,
                source_value: mapping.source_value || '',
                result_value: mapping.result_value || '',
                result_type: mapping.result_type || 'fixed',
            };
            this.showModal = true;
        },

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

        async saveMapping() {
            const formulaId = {{ $id }};
            const isEdit = !!this.editingMapping;

            // 소스 변수 설정 (첫 매핑 추가 시)
            if (!isEdit && this.mappings.length === 0) {
                if (!this.mappingForm.source_variable) {
                    showToast('소스 변수를 입력해주세요.', 'error');
                    return;
                }
                this.sourceVariable = this.mappingForm.source_variable;
            }

            const data = {
                source_variable: this.sourceVariable || this.mappingForm.source_variable,
                source_value: this.mappingForm.source_value,
                result_value: this.mappingForm.result_value,
                result_type: this.mappingForm.result_type,
            };

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

            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();
                    // 부모 컴포넌트의 loadMappings 호출
                    await this.$root.loadMappings();
                } else {
                    showToast(result.message || '저장에 실패했습니다.', 'error');
                }
            } catch (err) {
                console.error('매핑 저장 실패:', err);
                showToast('서버 오류가 발생했습니다.', 'error');
            }
        },

        async deleteMapping(mappingId) {
            if (!confirm('이 매핑을 삭제하시겠습니까?')) return;

            const formulaId = {{ $id }};

            try {
                const res = await fetch(`/api/admin/quote-formulas/formulas/${formulaId}/mappings/${mappingId}`, {
                    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');
                    // 부모 컴포넌트의 loadMappings 호출
                    await this.$root.loadMappings();
                } else {
                    showToast(result.message || '삭제에 실패했습니다.', 'error');
                }
            } catch (err) {
                console.error('매핑 삭제 실패:', err);
                showToast('서버 오류가 발생했습니다.', 'error');
            }
        },
    };
}
</script>