document.addEventListener('DOMContentLoaded', function() {
    const templateSelect = document.getElementById('template_code');
    const varContainer = document.getElementById('variable_fields');

    if (templateSelect) {
        templateSelect.addEventListener('change', function() {
            const selectedCode = this.value;
            varContainer.innerHTML = ''; // 기존 필드 초기화
            varContainer.style.display = 'none'; // 컨테이너 숨김

            if (!selectedCode) {
                return;
            }

            // AJAX 요청으로 선택된 템플릿의 변수 가져오기
            fetch(`./ajax_get_template_vars.php?code=${selectedCode}`)
                .then(response => {
                    // [개선] 네트워크 오류 발생 시, 더 명확한 에러를 throw합니다.
                    if (!response.ok) {
                        throw new Error('네트워크 응답이 올바르지 않습니다.');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        alert(data.error);
                        return;
                    }

                    if (data.success && Object.keys(data.variables).length > 0) {
                        // [개선] 테이블 구조를 명확하게 생성합니다.
                        const table = document.createElement('table');
                        const colgroup = document.createElement('colgroup');
                        const col1 = document.createElement('col');
                        col1.className = 'grid_4';
                        const col2 = document.createElement('col');
                        colgroup.appendChild(col1);
                        colgroup.appendChild(col2);
                        table.appendChild(colgroup);

                        const tbody = document.createElement('tbody');

                        // 제목 행 추가
                        const caption = document.createElement('caption');
                        caption.textContent = '치환 변수 값 입력';
                        caption.className = 'sound_only'; // 스크린리더만 읽도록 처리
                        table.appendChild(caption);

                        for (const varName in data.variables) {
                            const defaultValue = data.variables[varName];

                            const tr = document.createElement('tr');

                            const th = document.createElement('th');
                            th.scope = 'row';
                            const label = document.createElement('label');
                            // [개선] label의 for 속성값에 특수문자가 없도록 varName을 사용합니다.
                            label.htmlFor = `variable_${varName}`;
                            label.textContent = `{${varName}}`;
                            th.appendChild(label);

                            const td = document.createElement('td');
                            const input = document.createElement('input');
                            input.type = 'text';
                            input.name = `variables[${varName}]`;
                            input.id = `variable_${varName}`;
                            input.className = 'frm_input';
                            input.style.width = '95%';
                            input.value = defaultValue;
                            input.placeholder = `${varName}에 치환될 값을 입력하세요`;
                            td.appendChild(input);

                            tr.appendChild(th);
                            tr.appendChild(td);
                            tbody.appendChild(tr);
                        }

                        table.appendChild(tbody);
                        varContainer.appendChild(table);
                        varContainer.style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('변수 정보를 가져오는 중 오류가 발생했습니다:', error);
                    alert('변수 정보를 가져오는 데 실패했습니다. 개발자 콘솔을 확인해주세요.');
                });
        });
    }
});