<!-- 바로빌 설정 등록/수정 모달 -->
<div id="configModal" class="fixed inset-0 z-50 hidden">
    <!-- 배경 오버레이 -->
    <div class="fixed inset-0 bg-black/50" onclick="ConfigModal.close()"></div>

    <!-- 모달 컨테이너 -->
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto" onclick="event.stopPropagation()">
            <!-- 헤더 -->
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
                <h3 id="modalTitle" class="text-lg font-semibold text-gray-800">바로빌 설정 추가</h3>
                <button type="button" onclick="ConfigModal.close()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" 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" />
                    </svg>
                </button>
            </div>

            <!-- 폼 -->
            <form id="configForm" onsubmit="ConfigModal.submit(event)" class="p-6 space-y-4">
                <!-- 테스트 데이터 버튼 -->
                <div class="flex gap-2 mb-4">
                    <button type="button" onclick="ConfigModal.fillTestData('test')" class="px-3 py-1 text-xs bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200">
                        테스트 서버 기본값
                    </button>
                    <button type="button" onclick="ConfigModal.fillTestData('production')" class="px-3 py-1 text-xs bg-green-100 text-green-700 rounded hover:bg-green-200">
                        운영 서버 기본값
                    </button>
                </div>

                <!-- 설정 이름 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        설정 이름 <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" required maxlength="50"
                           placeholder="예: 테스트서버 기본, 운영서버 v2"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 환경 선택 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        환경 <span class="text-red-500">*</span>
                    </label>
                    <select name="environment" required
                            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="test">테스트서버</option>
                        <option value="production">운영서버</option>
                    </select>
                </div>

                <!-- 인증키 (CERTKEY) -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        인증키 (CERTKEY) <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="cert_key" required maxlength="100"
                           placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                           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">
                    <p class="mt-1 text-xs text-gray-500">바로빌 개발자센터에서 발급받은 인증키를 입력하세요.</p>
                </div>

                <!-- 서버 URL -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        서버 URL <span class="text-red-500">*</span>
                    </label>
                    <input type="url" name="base_url" required maxlength="255"
                           placeholder="https://testws.baroservice.com"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <!-- 파트너 사업자번호 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        파트너 사업자번호
                    </label>
                    <input type="text" name="corp_num" maxlength="20"
                           placeholder="1234567890 (하이픈 제외)"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="mt-1 text-xs text-gray-500">코드브릿지엑스 사업자번호 (선택사항)</p>
                </div>

                <!-- 설명 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">
                        설명
                    </label>
                    <textarea name="description" rows="2" maxlength="500"
                              placeholder="설정에 대한 메모를 입력하세요"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
                </div>

                <!-- 활성화 여부 -->
                <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
                    <input type="checkbox" name="is_active" id="is_active"
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <label for="is_active" class="text-sm text-gray-700">
                        <span class="font-medium">이 설정을 활성화</span>
                        <span class="block text-xs text-gray-500">환경당 하나의 설정만 활성화할 수 있습니다.</span>
                    </label>
                </div>

                <!-- 버튼 영역 -->
                <div class="flex gap-3 pt-4">
                    <button type="button" onclick="ConfigModal.close()"
                            class="flex-1 px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                        취소
                    </button>
                    <button type="submit" id="submitBtn"
                            class="flex-1 px-4 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                        등록하기
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
