async function loadInquiries() {
    // Adjust sticky thead position based on header height
    const header = document.getElementById('stickyHeader');
    const thead = document.querySelector('.inquiry-table thead');
    if (header && thead) {
        const headerHeight = header.offsetHeight;
        const totalOffset = 36 + headerHeight; // topbar(36) + sticky header height
        document.querySelectorAll('.inquiry-table thead th').forEach(th => {
            th.style.top = totalOffset + 'px';
        });
    }

    const pmType = document.getElementById('filterPmType').value;
    const category = document.getElementById('filterCategory').value;
    const status = document.getElementById('filterStatus').value;
    const keyword = document.getElementById('searchKeyword').value;

    const params = new URLSearchParams({
        pm_type: pmType,
        category: category,
        status: status,
        keyword: keyword
    });
    const response = await fetch(`/api/inquiries?${params}`);
    const data = await response.json();

    const tbody = document.getElementById('inquiryList');
    tbody.innerHTML = data.map(item => `
        <tr class="inquiry-row" onclick="toggleAccordion(${item.id})">
            <td title="${item.no}">${item.no}</td>
            <td title="${item.pm_type}">${item.pm_type}</td>
            <td title="${item.browser || 'Chrome'}">${item.browser || 'Chrome'}</td>
            <td title="${item.category}">${item.category}</td>
            <td title="${item.project_nm}">${item.project_nm}</td>
            <td class="content-preview" title="${item.content}">${item.content}</td>
            <td class="content-preview" title="${item.reply || ''}" style="color: #1e5149; font-weight: 500;">${item.reply || '-'}</td>
            <td title="${item.author}">${item.author}</td>
            <td title="${item.reg_date}">${item.reg_date}</td>
            <td><span class="status-badge ${getStatusClass(item.status)}">${item.status}</span></td>
        </tr>
        <tr id="detail-${item.id}" class="detail-row">
            <td colspan="10">
                <div class="detail-container">
                    <button class="btn-close-accordion" onclick="toggleAccordion(${item.id})">접기</button>
                    <div class="detail-content-wrapper">
                        <div class="detail-meta-grid">
                            <div><span class="detail-label">작성자:</span> ${item.author}</div>
                            <div><span class="detail-label">등록일:</span> ${item.reg_date}</div>
                            <div><span class="detail-label">시스템:</span> ${item.pm_type}</div>
                            <div><span class="detail-label">환경:</span> ${item.browser || 'Chrome'} / ${item.device || 'PC'}</div>
                        </div>
                        <div class="detail-q-section">
                            <h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[질문 내용]</h4>
                            <div style="line-height:1.6; white-space: pre-wrap;">${item.content}</div>
                        </div>
                        <div class="detail-a-section">
                            <h4 style="margin-top:0; margin-bottom:10px; color:#1e5149;">[조치 및 답변]</h4>
                            <div id="reply-form-${item.id}" class="reply-edit-form readonly">
                                <textarea id="reply-text-${item.id}" disabled placeholder="답변 내용이 없습니다.">${item.reply || ''}</textarea>
                                <div style="display:flex; justify-content: space-between; align-items: center;">
                                    <div style="display:flex; gap:15px; align-items:center;">
                                        <div class="filter-group" style="flex-direction:row; align-items:center; gap:8px;">
                                            <label style="margin:0;">처리상태:</label>
                                            <select id="reply-status-${item.id}" disabled style="padding:5px 10px;">
                                                <option value="완료" ${item.status === '완료' ? 'selected' : ''}>완료</option>
                                                <option value="작업 중" ${item.status === '작업 중' ? 'selected' : ''}>작업 중</option>
                                                <option value="확인 중" ${item.status === '확인 중' ? 'selected' : ''}>확인 중</option>
                                                <option value="개발예정" ${item.status === '개발예정' ? 'selected' : ''}>개발예정</option>
                                                <option value="미확인" ${item.status === '미확인' ? 'selected' : ''}>미확인</option>
                                            </select>
                                        </div>
                                        <div class="filter-group" style="flex-direction:row; align-items:center; gap:8px;">
                                            <label style="margin:0;">처리자:</label>
                                            <input type="text" id="reply-handler-${item.id}" disabled value="${item.handler || ''}" placeholder="이름 입력" style="padding:5px 10px; width:100px;">
                                        </div>
                                    </div>
                                    <div style="display:flex; gap:8px;">
                                        <button class="btn-edit sync-btn" onclick="enableEdit(${item.id})" style="background:#1e5149; color:#fff; border:none;">${item.reply ? '수정하기' : '답변작성'}</button>
                                        <button class="btn-save sync-btn" onclick="saveReply(${item.id})" style="background:#1e5149; color:#fff; border:none;">저장</button>
                                        <button class="btn-delete sync-btn" onclick="deleteReply(${item.id})" style="background:#f44336; color:#fff; border:none;">삭제</button>
                                        <button class="btn-cancel sync-btn" onclick="cancelEdit(${item.id})" style="background:#666; color:#fff; border:none;">취소</button>
                                    </div>
                                </div>
                                ${item.handled_date ? `<div style="margin-top:10px; font-size:12px; color:#888; text-align:right;">최종 수정일: ${item.handled_date}</div>` : ''}
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    `).join('');
}

function enableEdit(id) {
    const form = document.getElementById(`reply-form-${id}`);
    form.classList.remove('readonly');
    form.classList.add('editable');
    
    document.getElementById(`reply-text-${id}`).disabled = false;
    document.getElementById(`reply-status-${id}`).disabled = false;
    document.getElementById(`reply-handler-${id}`).disabled = false;
    document.getElementById(`reply-text-${id}`).focus();
}

async function cancelEdit(id) {
    try {
        // 서버에서 해당 항목의 원래 데이터를 다시 가져옴
        const response = await fetch(`/api/inquiries/${id}`);
        const item = await response.json();
        
        const form = document.getElementById(`reply-form-${id}`);
        const txt = document.getElementById(`reply-text-${id}`);
        const status = document.getElementById(`reply-status-${id}`);
        const handler = document.getElementById(`reply-handler-${id}`);
        
        // 데이터 원복
        txt.value = item.reply || '';
        status.value = item.status;
        handler.value = item.handler || '';
        
        // UI 상태 원복 (비활성화 및 클래스 변경)
        txt.disabled = true;
        status.disabled = true;
        handler.disabled = true;
        
        form.classList.remove('editable');
        form.classList.add('readonly');
    } catch (e) {
        console.error("취소 중 오류 발생:", e);
        loadInquiries(); // 오류 시에는 전체 새로고침으로 대응
    }
}

async function saveReply(id) {
    const reply = document.getElementById(`reply-text-${id}`).value;
    const status = document.getElementById(`reply-status-${id}`).value;
    const handler = document.getElementById(`reply-handler-${id}`).value;

    if (!reply.trim()) return alert("답변 내용을 입력해 주세요.");
    if (!handler.trim()) return alert("처리자 이름을 입력해 주세요.");

    try {
        const response = await fetch(`/api/inquiries/${id}/reply`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ reply, status, handler })
        });
        const result = await response.json();
        if (result.success) {
            alert("답변이 저장되었습니다.");
            loadInquiries();
        } else {
            alert("저장에 실패했습니다: " + result.error);
        }
    } catch (e) {
        alert("오류가 발생했습니다.");
    }
}

async function deleteReply(id) {
    if (!confirm("답변을 삭제하시겠습니까? (처리 상태가 '미확인'으로 초기화됩니다.)")) return;

    try {
        const response = await fetch(`/api/inquiries/${id}/reply`, { method: 'DELETE' });
        const result = await response.json();
        if (result.success) {
            alert("답변이 삭제되었습니다.");
            loadInquiries();
        } else {
            alert("삭제에 실패했습니다: " + result.error);
        }
    } catch (e) {
        alert("오류가 발생했습니다.");
    }
}

function toggleAccordion(id) {
    const detailRow = document.getElementById(`detail-${id}`);
    if (!detailRow) return;
    const inquiryRow = detailRow.previousElementSibling;
    const isActive = detailRow.classList.contains('active');
    
    // Close all other active details and remove their row highlights
    document.querySelectorAll('.detail-row.active').forEach(row => {
        if (row.id !== `detail-${id}`) {
            row.classList.remove('active');
            if (row.previousElementSibling) row.previousElementSibling.classList.remove('active-row');
        }
    });

    // Toggle current
    if (isActive) {
        detailRow.classList.remove('active');
        inquiryRow.classList.remove('active-row');
    } else {
        detailRow.classList.add('active');
        inquiryRow.classList.add('active-row');

        // [추가] 펼쳐진 항목이 보기 편하도록 스크롤 위치 조정
        setTimeout(() => {
            const stickyHeader = document.getElementById('stickyHeader');
            const thead = document.querySelector('.inquiry-table thead');
            const topbarHeight = 36;
            const stickyHeaderHeight = stickyHeader ? stickyHeader.offsetHeight : 0;
            const theadHeight = thead ? thead.offsetHeight : 0;
            
            // 모든 고정 영역의 합 (Topbar + 필터영역 + 표 헤더)
            const totalOffset = topbarHeight + stickyHeaderHeight + theadHeight;

            const rowPosition = inquiryRow.getBoundingClientRect().top + window.pageYOffset;
            const offsetPosition = rowPosition - totalOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
        }, 100);
    }
}

function getStatusClass(status) {
    if (status === '완료') return 'status-complete';
    if (status === '작업 중') return 'status-working';
    if (status === '확인 중') return 'status-checking';
    return 'status-pending';
}

document.addEventListener('DOMContentLoaded', loadInquiries);
window.addEventListener('resize', loadInquiries);