import { w2grid, w2ui, w2popup, w2alert } from 'https://cdn.jsdelivr.net/gh/vitmalina/w2ui@master/dist/w2ui.es6.min.js'
// 파일이 실제 존재하는지 확인 필수! 존재하지 않으면 아래 코드가 모두 멈춥니다.
import { bindProductPopupEvents } from '/kngil/js/adm_common.js'



export function openuseHistoryPopup(memberId = '',isSuperAdmin='') {
    // 기존 그리드 안전하게 제거
    if (w2ui.UseHistoryGrid) {
        w2ui.UseHistoryGrid.destroy();
    }

    w2popup.open({
        title: '서비스 사용 이력',
        width: 1100,
        height: 600,
        modal: true,
        body: 
            /*
            `
            <div style="padding:8px">
                <div id="UseHistoryGrid" style="height:520px;"></div>
            </div>
            */
           `
            <div id="popupMainContainer" style="display: flex; flex-direction: column; height: 100%; padding: 10px; gap: 10px; box-sizing: border-box;">
                
                <div id="searchFormArea" style="display: flex; align-items: center; gap: 20px; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
                    
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span style="font-weight: bold; color: #333; white-space: nowrap;">회원 ID</span>
                        <input type="text" id="searchMemberId" value="${memberId}" 
                            ${!isSuperAdmin ? 'disabled' : ''}
                            style="width: 120px; padding: 6px; border: 1px solid #ccc; border-radius: 4px;" 
                            placeholder="아이디">
                    </div>

                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span style="font-weight: bold; color: #333; white-space: nowrap;">성명</span>
                        <input type="text" id="searchUserNm" 
                            style="width: 120px; padding: 6px; border: 1px solid #ccc; border-radius: 4px;" 
                            placeholder="성명 입력">
                    </div>

                    <div style="display: flex; align-items: center; gap: 8px;">
                        <span style="font-weight: bold; color: #333; white-space: nowrap;">부서</span>
                        <input type="text" id="searchDeptNm" 
                            style="width: 150px; padding: 6px; border: 1px solid #ccc; border-radius: 4px;" 
                            placeholder="부서명 입력">
                    </div>
                    
                    <button id="btnSearchHistory" 
                            style="padding: 6px 20px; background: #1565c0; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; margin-left: auto;">
                        검색
                    </button>
                </div>

                <div id="UseHistoryGrid" style="flex: 1; min-height: 450px; border: 1px solid #ddd;"></div>
            </div>

        `,
        onOpen(event) {
            event.onComplete = () => {
                const searchBtn = document.getElementById('btnSearchHistory');
                const searchInput = document.getElementById('searchMemberId');
                const inputUnm = document.getElementById('searchUserNm');
                const inputDnm = document.getElementById('searchDeptNm');

                // 조회 버튼 클릭 시 동작
                if (searchBtn) {
                    searchBtn.onclick = () => {
                        loadUseHistoryData(searchInput.value,inputUnm,inputDnm); 
                    };
                }

                // 엔터키 지원
                if (searchInput,inputUnm,inputDnm) {
                    searchInput.onkeydown = (e) => {
                        if (e.key === 'Enter') searchBtn.click();
                    };
                }

                createUseHistoryGrid(memberId);
                loadUseHistoryData(memberId); 
            }
        }
    });
}

function createUseHistoryGrid(memberId) {
    new w2grid({
        name: 'UseHistoryGrid',
        box: '#UseHistoryGrid',
        show: {
            //toolbar: true,
            footer: true,
            lineNumbers: true // 행 번호를 표시하면 디버깅이 편합니다.
        },
        columns: [
            // field 이름이 PHP에서 내려주는 JSON 키값과 정확히 일치해야 함!
            { field: 'member_id', text: '회원ID', size: '100px',style: 'text-align: center', attr: 'align=center',hidden: true }, // name 아님!
            { field: 'use_dt', text: '사용일자', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true},      // name 아님!
            { field: 'user_id', text: '사용자ID', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true},    // name 아님!
            { field: 'sq_no', text: '순번', size: '100px',style: 'text-align: center', attr: 'align=center' ,hidden: true},    // name 아님!
            { field: 'user_nm', text: '성명', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님!
            { field: 'dept_nm', text: '부서', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님!
            { field: 'posit_nm', text: '직위', size: '100px',style: 'text-align: center', attr: 'align=center' ,sortable: true}, // name 아님!
            { field: 'use_yn', text: '사용여부', size: '80px', attr: 'align=center' ,sortable: true}, // name 아님!
            { field: 'use_area', text: '사용면적', size: '100px',render: 'number:0' , attr: 'align=center' ,sortable: true}, // name 아님!            
            { field: 'ser_bc', text: '서비스구분', size: '150px', attr: 'align=center' ,sortable: true}, // name 아님!            
    

        ]
    });
}

async function loadUseHistoryData(memberId = ''){
    try {
        const grid = w2ui.UseHistoryGrid;
        if (!grid) return;

        // DOM에서 현재 입력된 값을 실시간으로 읽어옴
        const sMid = document.getElementById('searchMemberId')?.value || '';
        const sUnm = document.getElementById('searchUserNm')?.value || '';
        const sDnm = document.getElementById('searchDeptNm')?.value || '';

        grid.lock('조회 중...', true);

        const searchParams = new URLSearchParams();
        searchParams.append('member_id', sMid); 
        searchParams.append('user_nm', sUnm);
        searchParams.append('dept_nm', sDnm);
        
        const response = await fetch('/admin/api/use-history', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: searchParams
        });
        
        if (!response.ok) throw new Error(`서버 응답 오류: ${response.status}`);

        const data = await response.json();

        if (!Array.isArray(data)) {
            throw new Error('응답 데이터 형식 오류');
        }

        grid.clear();
        grid.add(data);
        grid.unlock();

    } catch (e) {
        console.error(e);
        if (w2ui.UseHistoryGrid) w2ui.UseHistoryGrid.unlock();
        w2alert('사용이력 조회 실패: ' + e.message);
    }
}
////////////////////////////////////////////////////////////////////////