//형태는 ?path=fullPath(ex.http://gsim.hanmac..../1.jpg)&data=eadNadfl
//data는 json({key:value})을 stringify한 후에 btoa로 base64로 변경해서 달기.
//ex)
//const jsonData = JSON.stringify({ key1: "value1", key2: "value2" });
//const encodedData = btoa(jsonData); 
//?path=${fullPath}&data=${encodedData}
//넘어간 data는 모두 표출됨, 숨길 data는 key 앞에 $붙여주기(type, password는 그냥써도 무조건 표출X)

//받는 형태는 pdf, img(png, jpg, jpeg, panorama), mp4, gsim(gsimViewer로 redirect), ifc, 미지원 6가지
const searchParam = new URLSearchParams(window.location.search);
//serchParam 비워주기 - debug off
// window.history.replaceState(null, null, '/')

const fullPath = searchParam.get('path');
let ext = fullPath.toLowerCase().split('.').pop();//가장 마지막.이후 확장자

const dataA = searchParam.get('data');
// title filename으로 변경
document.title = fullPath.split('/').pop();
let data = (dataA)?JSON.parse((dataA)?decodeURIComponent(escape(atob(dataA))):'{}'):undefined;
//data로 ext 넘어오면 무조건 변경
ext = data.$ext;


// 🚩3d모델뷰어 썸네일 생성을 위해 아래의 변수 추가
const thumbnail_key = decodeURIComponent(searchParam.get('thumbnail_key'));
const path_name = searchParam.get('path_name');
const resourcePath = decodeURIComponent(searchParam.get('resourcePath'));
const dataId = searchParam.get('dataId');

if(data && Object.keys(data).length>0 && (data.$type == 'text'|| data.type == 'text')){
    //type text로 넘어왔을때 무조건 text뷰어로 연결
    _openText(fullPath);
}else{
    switch(ext){
        case 'pdf':
            _openPdf(fullPath,data);
            break;
        case 'xls':
        case 'xlsx':
        case 'xlsm':
            _openExcel(fullPath, data);
            break;
        case 'docx':
            _openDocx(fullPath, data);
            break;
        case 'pptx':
            _openPptx(fullPath, data);
            break;
        case 'hwp':
        case 'hwpx':
            _openHwp(fullPath, data);
            break;
        case 'mp4':
        case 'mov':
        case 'webm':
            _openVideo(fullPath);
            break;
        case 'png':
        case 'jpg':
        case 'jpeg':
        case 'webp':
        case 'gif':
            if(data && Object.keys(data).length>0 && (data.$type == 'panorama'||data.type == 'panorama')){
                // data 있으면서 type이 panorama인 경우
                _openPano(fullPath);
            }else{
                _openImage(fullPath);
            }
            break;
        case 'gsim':
            // gsim viewer 주소로 변경 필요
            window.location.href = `/libs/gsimViewer/gsimViewer.html?${searchParam.toString()}`;
            break;
        case 'ifc':
            _openIfc(fullPath, thumbnail_key, resourcePath, dataId, path_name);
            break;
        case 'txt':
        case 'log':
        case 'md':
            _openText(fullPath);
            break;
        case 'url':
            _openUrl(fullPath);
            break;
        case 'zip':
            _openZip(fullPath);
            break;
        case 'glb':
        case 'gltf':
        case 'obj':
        case 'stl':
        case 'fbx':
        case '3dm':
            _open3d(fullPath, thumbnail_key, resourcePath, dataId, path_name);
            break;
        case 'html':
            _openHtml(fullPath);
            break;
    }
    if(data && Object.keys(data).length>0){
        let keys = Object.keys(data).filter(key=>key.indexOf('$') != 0);
        if(keys.length > 0){
            _drawMeta(data);
        }
    }
}

function _openText(path){
    // ext를 매개변수로 받아도 md파일이 txt로 넘어오기때문에 경로에서 직접 ext 추출
    let ext = path.split('.').pop();
    ext = ext.split('%')[0];
    fetch(path).then(res => res.text()).then(data=>{
        let pre;
        // md 파일 확장자 일때 파싱 후 HTML 삽입
        if(ext === 'md'){
            pre = document.createElement('div');
            pre.classList.add('markdown-wrap');
            // mermaid 시퀀스 다이어 그램 변환
            const renderer = new marked.Renderer();
            const originalCode = renderer.code.bind(renderer);
            renderer.code = (code) => {
                if(code.lang === 'mermaid') return `<pre class="mermaid">${code.text}</pre>`
                return originalCode(code);
            }
            marked.setOptions({ gfm: true, breaks: true, renderer});
            const div = document.createElement('div');
            div.classList.add('markdown-body');       
            div.innerHTML = marked.parse(data);
            // mermaid 초기화 및 생성
            const mermaidEls = div.querySelectorAll('.mermaid');
            if(mermaidEls.length > 0){
                mermaid.initialize({ startOnLoad: false });
                mermaid.init(undefined, mermaidEls);
            }
            pre.appendChild(div);
        } else {
            pre = document.createElement('pre');
            pre.style.width = '100%';
            pre.style.height = '100%';
            pre.style.objectFit = 'contain';
            pre.textContent = data;
        }
        document.getElementById('popup_viewer').appendChild(pre);
        if(ext === 'md')hljs.highlightAll();
    }).catch(err=>console.error('파일 로드 실패', err));
}

function _openZip(path){
    fetch(path).then(async data=>{
        let zblob = await data.blob();

        const zip = new JSZip();
        await zip.loadAsync(zblob);
        let folderText = ``;
        let fileText = ``;

        zip.forEach((relativePath, zipEntry) => {
            let slashIdx = relativePath.indexOf('/');
            if(slashIdx == -1 || slashIdx == relativePath.length -1){
                if(zipEntry.dir){
                    folderText += `(폴더) ${zipEntry.name.split('/')[0]} \n`;
                }else{
                    fileText += `(파일) ${zipEntry.name} \n`
                }
            }
        });

        const pre = document.createElement('pre');
        pre.style.width = '100%';
        pre.style.height = '100%';
        pre.style.objectFit = 'contain';
        pre.textContent = `${folderText}${(folderText == ``)?'':'\n'}${fileText}`;
        document.getElementById('popup_viewer').appendChild(pre);
    })
}

function _openUrl(path){
    fetch(path).then(res => res.text()).then(data=>{
        let url = data.split('URL=')[1];
        let iframe = document.createElement('iframe');
        iframe.src = url;
        iframe.style.width = '100%'; // 컨테이너에 맞게 너비 설정
        iframe.style.height = '100%'; // 컨테이너에 맞게 높이 설정
        iframe.style.border = 'none'; // 테두리 제거 (선택 사항)

        document.getElementById('popup_viewer').appendChild(iframe);
    }).catch(err=>console.error('파일 로드 실패', err));
}

function _openHtml(path){
    fetch(path).then(res => res.text()).then(data=>{
        let iframe = document.createElement('iframe');
        iframe.srcdoc = data;
        iframe.style.width = '100%'; // 컨테이너에 맞게 너비 설정
        iframe.style.height = '100%'; // 컨테이너에 맞게 높이 설정
        iframe.style.border = 'none'; // 테두리 제거 (선택 사항)

        document.getElementById('popup_viewer').appendChild(iframe);
    }).catch(err=>console.error('파일 로드 실패', err));
}

// function _openPdf(path,data){
//     let pdf_options = {
//             url: path,
//             initialPage: 1,
//         };
//     if(data && Object.keys(data).length > 0 && (data.$password || data.password)){
//         pdf_options.password = (data.$password)?data.$password:data.password;
//     }

//     let iframe = document.createElement('iframe');
//     iframe.src = `/libs/pdfViewer/web/viewer.html`;
//     document.getElementById('popup_viewer').appendChild(iframe);
//     iframe.addEventListener('load', () => {
//         // pdf 실행 시 무조건 1페이지부터 보이도록 기존 pdf 히스토리 삭제
//         try {
//             let appWin = iframe.contentWindow;
//             // PDF.js의 기본 히스토리 키
//             appWin.localStorage.removeItem('pdfjs.history');
//             // 또는 여러 키 삭제
//             Object.keys(appWin.localStorage).forEach(k => {
//                 if (k.startsWith('pdfjs.history') || k.startsWith('pdfjs.preferences')) {
//                     appWin.localStorage.removeItem(k);
//                 }
//             });
//         } catch (e) { /* ignore */ }

//         let app = document.querySelector('#popup_viewer iframe').contentWindow.PDFViewerApplication;
//         app.pdfCursorTools._handTool.activate();
        
//         app.open(pdf_options);

//         iframe.width = '100%';
//         iframe.height = '100%';
//     });
// }

function _openPdf(path, data) {
    let pdf_options = {
        url: path,
        initialPage: 1,
    };
    
    if (data && Object.keys(data).length > 0 && (data.$password || data.password)) {
        pdf_options.password = (data.$password) ? data.$password : data.password;
    }

    let iframe = document.createElement('iframe');
    iframe.src = `/libs/pdfViewer/web/viewer.html`;
    document.getElementById('popup_viewer').appendChild(iframe);
    
    iframe.addEventListener('load', () => {
        try {
            let appWin = iframe.contentWindow;
            
            // 히스토리 삭제
            appWin.localStorage.removeItem('pdfjs.history');
            Object.keys(appWin.localStorage).forEach(k => {
                if (k.startsWith('pdfjs.history') || k.startsWith('pdfjs.preferences')) {
                    appWin.localStorage.removeItem(k);
                }
            });

            let app = appWin.PDFViewerApplication;
            let isRendering = false;
            let lastScale = 1;
            
            app.initializedPromise.then(() => {
                const PDFPageView = appWin.PDFPageView;
                
                // draw 함수를 완전히 오버라이드
                const originalDraw = PDFPageView.prototype.draw;
                PDFPageView.prototype.draw = function() {
                    // 고해상도 설정
                    this.outputScale = {
                        sx: (window.devicePixelRatio || 1) * 2,
                        sy: (window.devicePixelRatio || 1) * 2
                    };
                    return originalDraw.call(this);
                };
                
                // reset 함수도 오버라이드하여 캔버스 완전 삭제
                const originalReset = PDFPageView.prototype.reset;
                PDFPageView.prototype.reset = function() {
                    // 캔버스 완전히 제거
                    if (this.canvas) {
                        if (this.canvas.parentNode) {
                            this.canvas.parentNode.removeChild(this.canvas);
                        }
                        this.canvas.width = 0;
                        this.canvas.height = 0;
                        this.canvas = null;
                    }
                    
                    // 렌더 태스크 취소
                    if (this.renderTask) {
                        this.renderTask.cancel();
                        this.renderTask = null;
                    }
                    
                    return originalReset.call(this);
                };
                
                if (app.pdfViewer) {
                    app.pdfViewer.textLayerMode = 1;
                    app.pdfViewer.useOnlyCssZoom = false;
                }
                
                // 확대 시 완전 재렌더링
                app.eventBus.on('scalechanging', function(evt) {
                    if (isRendering) return;
                    
                    const newScale = evt.scale;
                    const scaleDiff = Math.abs(newScale - lastScale);
                    
                    // 스케일 변화가 있을 때만 재렌더링
                    if (scaleDiff > 0.01) {
                        isRendering = true;
                        
                        setTimeout(() => {
                            if (app.pdfViewer && app.pdfViewer._pages) {
                                app.pdfViewer._pages.forEach(pageView => {
                                    // 1. 렌더 태스크 강제 취소
                                    if (pageView.renderTask) {
                                        pageView.renderTask.cancel();
                                        pageView.renderTask = null;
                                    }
                                    
                                    // 2. 캔버스 완전 제거
                                    if (pageView.canvas) {
                                        const parent = pageView.canvas.parentNode;
                                        if (parent) {
                                            parent.removeChild(pageView.canvas);
                                        }
                                        pageView.canvas.width = 0;
                                        pageView.canvas.height = 0;
                                        pageView.canvas = null;
                                    }
                                    
                                    // 3. viewport 업데이트
                                    if (pageView.pdfPage) {
                                        pageView.viewport = pageView.pdfPage.getViewport({
                                            scale: newScale,
                                            rotation: pageView.rotation || 0
                                        });
                                    }
                                    
                                    // 4. 페이지 완전 리셋
                                    pageView.reset();
                                    
                                    // 5. 새로 그리기
                                    pageView.draw();
                                });
                            }
                            
                            lastScale = newScale;
                            isRendering = false;
                        }, 200); // 딜레이 증가
                    }
                });
                
                // 스크롤/페이지 변경 시에도 재렌더링
                app.eventBus.on('updateviewarea', function(evt) {
                    if (isRendering) return;
                    
                    // 현재 보이는 페이지만 재렌더링
                    const visiblePages = app.pdfViewer._getVisiblePages();
                    if (visiblePages && visiblePages.views) {
                        visiblePages.views.forEach(view => {
                            if (view && view.div && view.div.classList.contains('pdfPage')) {
                                const pageView = app.pdfViewer._pages[view.id - 1];
                                if (pageView && !pageView.renderTask) {
                                    pageView.draw();
                                }
                            }
                        });
                    }
                });
            });

            app.pdfCursorTools._handTool.activate();
            app.open(pdf_options);

        } catch (e) {
            console.error('PDF 설정 오류:', e);
        }

        iframe.width = '100%';
        iframe.height = '100%';
    });
}

function _openVideo(path){
    const popupVideo = document.createElement('video');
    popupVideo.autoplay = true;
    popupVideo.muted = true;
    popupVideo.playsInline = true;
    popupVideo.controls = true;
    popupVideo.crossOrigin = 'anonymous';

    const sourceElement = document.createElement('source');
    sourceElement.src = path;

    popupVideo.style.width = '100%';
    popupVideo.style.height = '100%';
    popupVideo.style.objectFit = 'contain';

    document.getElementById('popup_viewer').appendChild(popupVideo);
    popupVideo.appendChild(sourceElement);
}

function _openPano(path){
    let panorama = pannellum.viewer('popup_viewer',{
        "type": "equirectangular",
        "panorama": path,
        "autoLoad": true,
        "compass":false,
    })
}

function _openImage(path){
    const img = document.createElement('img');
    img.src = path;
    document.getElementById('popup_viewer').appendChild(img);
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.objectFit = 'contain';

    img.addEventListener('click',()=>{
        document.getElementById('large-img-container').style.display = 'block';
        centerImage();
    })

    const container = document.getElementById('large-img-container');
    const image = document.getElementById('large-image');
    const zoomInfo = document.getElementById('large-img-zoomInfo');
    image.src = path;

    let isDragging = false;
    let startX, startY;
    let translateX = 0;
    let translateY = 0;
    let scale = 1;

    // 드래그 시작
    function dragStart(e) {
        if (e.target !== image) return;
        
        isDragging = true;
        startX = e.clientX - translateX;
        startY = e.clientY - translateY;
        
        // 드래그 중일 때 transition 제거
        image.style.transition = 'none';
    }

    // 드래그 중
    function drag(e) {
        if (!isDragging) return;
        
        e.preventDefault();
        
        // 현재 마우스 위치에서 시작 위치를 빼서 이동 거리 계산
        translateX = e.clientX - startX;
        translateY = e.clientY - startY;
        
        updateImageTransform();
    }

    // 드래그 종료
    function dragEnd() {
        if (!isDragging) return;
        
        isDragging = false;
        // 드래그 종료 시 부드러운 transition 효과 복원
        image.style.transition = 'transform 0.1s ease-out';
    }

    // 확대/축소
    function zoom(e) {
        e.preventDefault();

        // 현재 이미지의 실제 위치와 크기
        const imageRect = image.getBoundingClientRect();
        
        // 마우스 포인터의 화면상 좌표
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        
        // 마우스 포인터의 이미지상 상대 좌표
        const mouseImageX = mouseX - imageRect.left;
        const mouseImageY = mouseY - imageRect.top;
        
        // 이전 스케일 저장
        const prevScale = scale;
        
        // 새로운 스케일 계산
        const delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
        const scaleFactor = 0.1;
        
        if (delta > 0) {
            scale = Math.min(4, scale + scaleFactor);
        } else {
            scale = Math.max(0.1, scale - scaleFactor);
        }
        
        // 스케일 변화율
        const scaleRatio = scale / prevScale;
        
        // 새로운 translate 값 계산
        // 마우스 포인터 위치는 고정되어야 하므로, 스케일 변화에 따른 위치 조정
        translateX = mouseX - (((mouseX - translateX) * scaleRatio));
        translateY = mouseY - (((mouseY - translateY) * scaleRatio));
        
        updateImageTransform();
        updateZoomInfo();
    }

    // 이미지 transform 업데이트
    function updateImageTransform() {
        // transform의 원점을 이미지의 중심으로 설정
        const originX = image.offsetWidth / 2;
        const originY = image.offsetHeight / 2;
        image.style.transformOrigin = `${originX}px ${originY}px`;
        image.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
    }

    // 줌 정보 업데이트
    function updateZoomInfo() {
        zoomInfo.textContent = `${Math.round(scale * 100)}%`;
    }

    // 이미지 초기 위치 설정
    function centerImage() {
        translateX = (container.offsetWidth - image.offsetWidth) / 2;
        translateY = (container.offsetHeight - image.offsetHeight) / 2;
        updateImageTransform();
    }

    // 이벤트 리스너 등록
    container.addEventListener('mousedown', dragStart);
    window.addEventListener('mousemove', drag);
    window.addEventListener('mouseup', dragEnd);
    container.addEventListener('wheel', zoom);
    container.addEventListener('contextmenu',(e)=>{
        e.preventDefault();
        container.style.display = 'none';
    })

    // 더블클릭으로 원래 크기로 복원
    container.addEventListener('dblclick', () => {
        scale = 1;
        updateZoomInfo();
    });
}

function _openIfc(path, thumbnail_key, resourcePath, dataId, path_name){
    const iframe = document.createElement('iframe');
    iframe.onload = () => {
        iframe.contentWindow.postMessage({ path, thumbnail_key, resourcePath, dataId, path_name }, '*');  // path 값을 iframe에 전달
    };
    iframe.src = `/libs/ifcViewer/index.html`;
    iframe.width = '100%';
    iframe.height = '100%';
    document.getElementById('popup_viewer').appendChild(iframe);
}

function _open3d(path, thumbnail_key, resourcePath, dataId, path_name){
    const iframe = document.createElement('iframe');
    iframe.onload = () => {
        iframe.contentWindow.postMessage({ path, thumbnail_key, resourcePath, dataId, path_name }, '*');  // path 값을 iframe에 전달
    };
    iframe.src = `/libs/3dViewer/index.html`;
    iframe.width = '100%';
    iframe.height = '100%';
    document.getElementById('popup_viewer').appendChild(iframe);
}

function _drawMeta(data){
    let container = document.getElementById('meta-data');
    container.style.display = 'block';
    Object.keys(data).forEach(item=>{
        if(!item.startsWith('$') && item != 'type' && item != 'password'){
            let line = `<span class="key">${item}</span> : <span>${data[item]}</span><br>`;
            container.innerHTML += line;
        }
    })
}

// -----------------------------------------------------------------
// 오픈소스 문서 직접 뷰잉 및 PDF 폴백 함수 정의
// -----------------------------------------------------------------

function initFallbackPdfButton(dataId, path_name, resourcePath) {
    const btn = document.getElementById('fallback-pdf-btn');
    if (!btn) return;
    
    // 이전 등록된 리스너 제거를 위해 복사 대체
    const newBtn = btn.cloneNode(true);
    btn.parentNode.replaceChild(newBtn, btn);
    
    newBtn.style.display = 'block';
    newBtn.textContent = 'PDF로 보기';
    newBtn.style.pointerEvents = 'auto';
    
    newBtn.addEventListener('click', async () => {
        newBtn.textContent = '로딩 중...';
        newBtn.style.pointerEvents = 'none';
        
        try {
            // 1. 파일 메타데이터 (popup_key) 조회
            let dataInfoRes = await fetch(`${path_name}/getDataInfo`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ params: { dataIdArr: [dataId], isRemoved: false, debug: "popup fallback" } })
            });
            let dataInfo = await dataInfoRes.json();
            let result = dataInfo.result;
            if (Array.isArray(result)) result = result[0];
            let popupKey = result ? result.popup_key : null;
            
            // 2. 만약 PDF 변환본이 아직 없다면 백엔드 변환 요청
            if (!popupKey) {
                newBtn.textContent = 'PDF 변환 요청 중...';
                await fetch(`${path_name}/convertPdf`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        params: {
                            dataId: dataId,
                            resourcePath: resourcePath,
                            userInfoString: JSON.stringify({ user_id: 'SYSTEM', user_nm: 'Viewer User' }),
                            objectKey: result.object_key,
                            storageType: result.storage_type
                        }
                    })
                });
                alert('서버 측 PDF 변환이 시작되었습니다. 잠시 후 다시 클릭해 주세요.');
                newBtn.textContent = 'PDF로 보기';
                newBtn.style.pointerEvents = 'auto';
                return;
            }
            
            // 3. PDF용 Presigned URL 생성
            let downloadUrlRes = await fetch(`${path_name}/generateDownloadUrl`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ objectKey: popupKey, resourcePath: resourcePath })
            });
            let downloadUrlData = await downloadUrlRes.json();
            if (downloadUrlData.message === 'generateDownloadUrl_success') {
                let pdfUrl = downloadUrlData.url;
                
                // 화면 초기화 및 PDF 뷰어 로드
                document.getElementById('popup_viewer').innerHTML = '';
                newBtn.style.display = 'none';
                _openPdf(pdfUrl, {});
            } else {
                alert('PDF 미리보기 주소 획득에 실패했습니다.');
                newBtn.textContent = 'PDF로 보기';
                newBtn.style.pointerEvents = 'auto';
            }
        } catch (e) {
            console.error(e);
            alert('PDF 변환 로드 과정 중 오류가 발생했습니다.');
            newBtn.textContent = 'PDF로 보기';
            newBtn.style.pointerEvents = 'auto';
        }
    });
}

function _openExcel(path, data) {
    const viewer = document.getElementById('popup_viewer');
    viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;font-size:1.2rem;color:#666;background:#fff;">엑셀 데이터를 불러오는 중...</div>';

    fetch(path)
        .then(res => {
            if (!res.ok) throw new Error(`HTTP ${res.status} ${res.statusText}`);
            return res.arrayBuffer();
        })
        .then(arrayBuffer => {
            viewer.innerHTML = '';
            
            LuckyExcel.transformExcelToLucky(arrayBuffer, function(exportJson, luckysheetfile) {
                if(exportJson.sheets == null || exportJson.sheets.length == 0) {
                    viewer.innerHTML = '<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:#d9534f;font-size:1.1rem;background:#fff;">엑셀 데이터를 파싱하지 못했습니다. (xls 확장자는 지원하지 않습니다.)</div>';
                    if (dataId && path_name) {
                        initFallbackPdfButton(dataId, path_name, resourcePath);
                    }
                    return;
                }
                
                if (window.luckysheet) {
                    window.luckysheet.destroy();
                }
                
                viewer.style.position = 'relative';
                const container = document.createElement('div');
                container.id = 'luckysheet_inner';
                container.style.margin = '0px';
                container.style.padding = '0px';
                container.style.position = 'absolute';
                container.style.width = '100%';
                container.style.height = '100%';
                container.style.left = '0px';
                container.style.top = '0px';
                viewer.appendChild(container);
                
                try {
                    window.luckysheet.create({
                        container: 'luckysheet_inner',
                        data: exportJson.sheets,
                        title: exportJson.info.name || document.title,
                        lang: 'en',
                        showinfobar: false,
                        myFolderUrl: 'javascript:void(0)'
                    });
                } catch (createErr) {
                    console.error("Luckysheet create error: ", createErr);
                    viewer.innerHTML = `<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:#d9534f;background:#fff;">
                        <div>엑셀 시트 생성 중 오류가 발생했습니다.</div>
                        <div style="font-size:0.9rem;color:#999;margin-top:8px;">에러: ${createErr.message}</div>
                    </div>`;
                    if (dataId && path_name) {
                        initFallbackPdfButton(dataId, path_name, resourcePath);
                    }
                }
            }, function(err) {
                console.error("Luckysheet transform error: ", err);
                viewer.innerHTML = `<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:#d9534f;background:#fff;">
                    <div>엑셀 파일을 읽는 중 오류가 발생했습니다.</div>
                    <div style="font-size:0.9rem;color:#999;margin-top:8px;">상세: ${err.message || err}</div>
                </div>`;
                if (dataId && path_name) {
                    initFallbackPdfButton(dataId, path_name, resourcePath);
                }
            });
        })
        .catch(err => {
            console.error(err);
            viewer.innerHTML = `<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;color:#d9534f;background:#fff;">
                <div>엑셀 파일을 불러오는데 실패했습니다.</div>
                <div style="font-size:0.9rem;color:#999;margin-top:8px;">에러: ${err.message}</div>
            </div>`;
            if (dataId && path_name) {
                initFallbackPdfButton(dataId, path_name, resourcePath);
            }
        });
}

function _openDocx(path, data) {
    const viewer = document.getElementById('popup_viewer');
    viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;font-size:1.2rem;color:#666;background:#fff;">워드 문서를 불러오는 중...</div>';
    
    if (dataId && path_name) {
        initFallbackPdfButton(dataId, path_name, resourcePath);
    }
    
    fetch(path)
        .then(res => {
            if (!res.ok) throw new Error('Word fetch failed');
            return res.arrayBuffer();
        })
        .then(arrayBuffer => {
            viewer.innerHTML = '';
            
            const container = document.createElement('div');
            container.style.width = '100%';
            container.style.height = '100%';
            container.style.overflow = 'auto';
            container.style.padding = '20px';
            container.style.boxSizing = 'border-box';
            container.style.background = '#f5f5f5';
            
            const docxInner = document.createElement('div');
            docxInner.style.background = '#ffffff';
            docxInner.style.margin = '0 auto';
            docxInner.style.maxWidth = '800px';
            docxInner.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
            docxInner.style.padding = '40px';
            
            container.appendChild(docxInner);
            viewer.appendChild(container);
            
            docx.renderAsync(arrayBuffer, docxInner)
                .then(() => console.log("docx rendered"))
                .catch(err => {
                    console.error(err);
                    docxInner.innerHTML = '<div style="color:#d9534f;text-align:center;">워드 문서 파싱 중 오류가 발생했습니다. 상단의 "PDF로 보기" 버튼을 이용해 주세요.</div>';
                });
        })
        .catch(err => {
            console.error(err);
            viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;color:#d9534f;background:#fff;">워드 문서를 불러오는데 실패했습니다.</div>';
        });
}

function _openHwp(path, data) {
    const viewer = document.getElementById('popup_viewer');
    viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;font-size:1.2rem;color:#666;background:#fff;">한글 문서를 불러오는 중...</div>';
    
    if (dataId && path_name) {
        initFallbackPdfButton(dataId, path_name, resourcePath);
    }
    
    fetch(path)
        .then(res => {
            if (!res.ok) throw new Error('HWP fetch failed');
            return res.blob();
        })
        .then(blob => {
            viewer.innerHTML = '';
            
            const container = document.createElement('div');
            container.style.width = '100%';
            container.style.height = '100%';
            container.style.overflowX = 'hidden';
            container.style.overflowY = 'auto';
            container.style.padding = '20px';
            container.style.boxSizing = 'border-box';
            container.style.background = '#f5f5f5';
            
            const styleEl = document.createElement('style');
            styleEl.textContent = `
                .hwp-inner-container {
                    background: #ffffff;
                    margin: 0 auto;
                    max-width: 800px;
                    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
                    padding: 30px !important;
                    box-sizing: border-box !important;
                    min-height: 100%;
                }
                .hwp-inner-container > div > div {
                    max-width: 100% !important;
                    height: auto !important;
                    box-sizing: border-box !important;
                    padding-left: 20px !important;
                    padding-right: 20px !important;
                    margin-bottom: 20px !important;
                }
                .hwp-inner-container table {
                    max-width: 100% !important;
                    width: 100% !important;
                    table-layout: fixed !important;
                }
                .hwp-inner-container img {
                    max-width: 100% !important;
                    height: auto !important;
                }
                @media (max-width: 600px) {
                    .hwp-inner-container {
                        padding: 10px !important;
                    }
                    .hwp-inner-container > div > div {
                        padding-left: 10px !important;
                        padding-right: 10px !important;
                    }
                }
            `;
            container.appendChild(styleEl);
            
            const hwpInner = document.createElement('div');
            hwpInner.classList.add('hwp-inner-container');
            
            container.appendChild(hwpInner);
            viewer.appendChild(container);
            
            const reader = new FileReader();
            reader.onload = (e) => {
                const bstr = e.target.result;
                try {
                    new hwp.Viewer(hwpInner, bstr);
                } catch (err) {
                    console.error("hwp.js error: ", err);
                    hwpInner.innerHTML = '<div style="color:#d9534f;text-align:center;">한글 문서 파싱 중 오류가 발생했습니다. 상단의 "PDF로 보기" 버튼을 이용해 주세요.</div>';
                }
            };
            reader.readAsBinaryString(blob);
        })
        .catch(err => {
            console.error(err);
            viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;color:#d9534f;background:#fff;">한글 문서를 불러오는데 실패했습니다.</div>';
        });
}

function _openPptx(path, data) {
    const viewer = document.getElementById('popup_viewer');
    viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;font-size:1.2rem;color:#666;background:#fff;">PPTX 문서를 불러오는 중...</div>';
    
    if (dataId && path_name) {
        initFallbackPdfButton(dataId, path_name, resourcePath);
    }
    
    fetch(path)
        .then(res => {
            if (!res.ok) throw new Error('PPTX fetch failed');
            return res.arrayBuffer();
        })
        .then(async (arrayBuffer) => {
            try {
                const zip = await JSZip.loadAsync(arrayBuffer);
                
                // Read presentation.xml to get slide size
                const presentationXmlText = await zip.file("ppt/presentation.xml").async("text");
                const parser = new DOMParser();
                const presDoc = parser.parseFromString(presentationXmlText, "text/xml");
                const sldSz = presDoc.getElementsByTagName("p:sldSz")[0];
                const cx = sldSz ? (parseInt(sldSz.getAttribute("cx"), 10) || 12192000) : 12192000;
                const cy = sldSz ? (parseInt(sldSz.getAttribute("cy"), 10) || 6858000) : 6858000;
                const ratio = (cy / cx) * 100;

                // Get slide files
                const slideFiles = Object.keys(zip.files).filter(name => name.startsWith("ppt/slides/slide") && name.endsWith(".xml"));
                slideFiles.sort((a, b) => {
                    const numA = parseInt(a.replace("ppt/slides/slide", "").replace(".xml", ""), 10);
                    const numB = parseInt(b.replace("ppt/slides/slide", "").replace(".xml", ""), 10);
                    return numA - numB;
                });

                viewer.innerHTML = '';
                
                const slidesContainer = document.createElement('div');
                slidesContainer.style.display = 'flex';
                slidesContainer.style.flexDirection = 'column';
                slidesContainer.style.gap = '20px';
                slidesContainer.style.alignItems = 'center';
                slidesContainer.style.background = '#f0f0f0';
                slidesContainer.style.padding = '20px';
                slidesContainer.style.width = '100%';
                slidesContainer.style.height = '100%';
                slidesContainer.style.overflow = 'auto';
                slidesContainer.style.boxSizing = 'border-box';
                viewer.appendChild(slidesContainer);

                for (let i = 0; i < slideFiles.length; i++) {
                    const slideXmlText = await zip.file(slideFiles[i]).async("text");
                    const slideDoc = parser.parseFromString(slideXmlText, "text/xml");

                    const slideCard = document.createElement('div');
                    slideCard.className = 'pptx-slide-card';
                    slideCard.style.position = 'relative';
                    slideCard.style.width = '100%';
                    slideCard.style.maxWidth = '800px';
                    slideCard.style.backgroundColor = '#ffffff';
                    slideCard.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
                    slideCard.style.height = '0';
                    slideCard.style.paddingTop = ratio + '%';
                    slideCard.style.overflow = 'hidden';
                    slideCard.style.flexShrink = '0';

                    const slideContent = document.createElement('div');
                    slideContent.style.position = 'absolute';
                    slideContent.style.top = '0';
                    slideContent.style.left = '0';
                    slideContent.style.width = '100%';
                    slideContent.style.height = '100%';
                    slideCard.appendChild(slideContent);
                    slidesContainer.appendChild(slideCard);

                    // Parse relationships for this slide
                    const relMap = {};
                    try {
                        const slideName = slideFiles[i].split('/').pop();
                        const relsFileName = `ppt/slides/_rels/${slideName}.rels`;
                        const relsFile = zip.file(relsFileName);
                        if (relsFile) {
                            const relsXmlText = await relsFile.async("text");
                            const relsDoc = parser.parseFromString(relsXmlText, "text/xml");
                            const relationships = relsDoc.getElementsByTagName("Relationship");
                            for (let r = 0; r < relationships.length; r++) {
                                const id = relationships[r].getAttribute("Id");
                                const target = relationships[r].getAttribute("Target");
                                relMap[id] = target;
                            }
                        }
                    } catch (relErr) {
                        console.warn("Failed to parse relationships for slide:", slideFiles[i], relErr);
                    }

                    const elements = slideDoc.querySelectorAll('p\\:sp, sp, p\\:pic, pic, p\\:graphicFrame, graphicFrame');
                    
                    for (const elem of elements) {
                        const xfrm = elem.querySelector('a\\:xfrm, xfrm');
                        if (!xfrm) continue;

                        const off = xfrm.querySelector('a\\:off, off');
                        const ext = xfrm.querySelector('a\\:ext, ext');
                        if (!off || !ext) continue;

                        const x = parseInt(off.getAttribute('x'), 10);
                        const y = parseInt(off.getAttribute('y'), 10);
                        const w = parseInt(ext.getAttribute('cx'), 10);
                        const h = parseInt(ext.getAttribute('cy'), 10);

                        const leftPct = (x / cx) * 100;
                        const topPct = (y / cy) * 100;
                        const widthPct = (w / cx) * 100;
                        const heightPct = (h / cy) * 100;

                        const itemDiv = document.createElement('div');
                        itemDiv.style.position = 'absolute';
                        itemDiv.style.left = leftPct + '%';
                        itemDiv.style.top = topPct + '%';
                        itemDiv.style.width = widthPct + '%';
                        itemDiv.style.height = heightPct + '%';
                        itemDiv.style.boxSizing = 'border-box';

                        const nodeName = elem.nodeName.toLowerCase();
                        if (nodeName.includes('pic')) {
                            let imgUrl = null;
                            try {
                                const blip = elem.querySelector('a\\:blip, blip');
                                const rId = blip ? (blip.getAttribute('r:embed') || blip.getAttribute('embed')) : null;
                                if (rId && relMap[rId]) {
                                    const targetPath = relMap[rId].replace('../', 'ppt/');
                                    const imgFile = zip.file(targetPath);
                                    if (imgFile) {
                                        const imgBlob = await imgFile.async("blob");
                                        imgUrl = URL.createObjectURL(imgBlob);
                                    }
                                }
                            } catch (imgErr) {
                                console.warn("Failed to extract slide image:", imgErr);
                            }

                            if (imgUrl) {
                                itemDiv.style.backgroundImage = `url("${imgUrl}")`;
                                itemDiv.style.backgroundRepeat = 'no-repeat';
                                itemDiv.style.backgroundPosition = 'center';
                                itemDiv.style.backgroundSize = 'contain';
                            } else {
                                itemDiv.style.border = '1px dashed #cccccc';
                                itemDiv.style.backgroundColor = '#f9f9f9';
                                itemDiv.style.display = 'flex';
                                itemDiv.style.alignItems = 'center';
                                itemDiv.style.justifyContent = 'center';

                                const label = document.createElement('span');
                                label.style.color = '#999999';
                                label.style.fontSize = '10px';
                                label.style.fontWeight = 'bold';
                                label.textContent = '[그림 영역]';
                                itemDiv.appendChild(label);
                            }
                        } else if (nodeName.includes('graphicframe')) {
                            const tbl = elem.querySelector('a\\:tbl, tbl');
                            if (tbl) {
                                const htmlTable = document.createElement('table');
                                htmlTable.style.width = '100%';
                                htmlTable.style.height = '100%';
                                htmlTable.style.borderCollapse = 'collapse';
                                htmlTable.style.fontSize = 'calc(0.4vw + 5px)';
                                htmlTable.style.fontFamily = 'sans-serif';
                                htmlTable.style.backgroundColor = '#ffffff';
                                htmlTable.style.boxShadow = '0 1px 3px rgba(0,0,0,0.05)';
                                
                                const rows = tbl.querySelectorAll('a\\:tr, tr');
                                rows.forEach((row, rIdx) => {
                                    const trEl = document.createElement('tr');
                                    if (rIdx === 0) {
                                        trEl.style.backgroundColor = '#f8f9fa';
                                        trEl.style.fontWeight = '600';
                                    } else if (rIdx % 2 === 0) {
                                        trEl.style.backgroundColor = '#fafafa';
                                    }
                                    
                                    const cells = row.querySelectorAll('a\\:tc, tc');
                                    cells.forEach(cell => {
                                        const tdEl = document.createElement('td');
                                        tdEl.style.border = '1px solid #e0e0e0';
                                        tdEl.style.padding = '4px 6px';
                                        tdEl.style.wordBreak = 'break-all';
                                        tdEl.style.verticalAlign = 'middle';
                                        
                                        const gridSpan = cell.getAttribute('gridSpan');
                                        if (gridSpan) tdEl.setAttribute('colspan', gridSpan);
                                        const rowSpan = cell.getAttribute('rowSpan');
                                        if (rowSpan) tdEl.setAttribute('rowspan', rowSpan);

                                        const txBody = cell.querySelector('a\\:txBody, txBody');
                                        if (txBody) {
                                            const paragraphs = txBody.querySelectorAll('a\\:p, p');
                                            paragraphs.forEach(p => {
                                                const runs = p.querySelectorAll('a\\:r, r');
                                                let cellText = '';
                                                runs.forEach(r => {
                                                    const t = r.querySelector('a\\:t, t');
                                                    if (t) cellText += t.textContent;
                                                });
                                                if (cellText.trim()) {
                                                    const pEl = document.createElement('p');
                                                    pEl.style.margin = '0';
                                                    pEl.style.lineHeight = '1.2';
                                                    pEl.textContent = cellText;
                                                    tdEl.appendChild(pEl);
                                                }
                                            });
                                        }
                                        trEl.appendChild(tdEl);
                                    });
                                    htmlTable.appendChild(trEl);
                                });
                                itemDiv.appendChild(htmlTable);
                            } else {
                                itemDiv.style.border = '1px dashed #dddddd';
                                itemDiv.style.backgroundColor = '#fdfdfd';
                                itemDiv.style.display = 'flex';
                                itemDiv.style.alignItems = 'center';
                                itemDiv.style.justifyContent = 'center';

                                const label = document.createElement('span');
                                label.style.color = '#aaaaaa';
                                label.style.fontSize = '10px';
                                label.style.fontWeight = 'bold';
                                label.textContent = '[차트 영역]';
                                itemDiv.appendChild(label);
                            }
                        } else {
                            const txBody = elem.querySelector('p\\:txBody, txBody');
                            if (txBody) {
                                itemDiv.style.overflow = 'hidden';
                                itemDiv.style.wordBreak = 'break-all';
                                itemDiv.style.fontSize = 'calc(0.5vw + 5px)';
                                itemDiv.style.fontFamily = 'sans-serif';
                                itemDiv.style.color = '#333333';

                                const paragraphs = txBody.querySelectorAll('a\\:p, p');
                                paragraphs.forEach(p => {
                                    const runs = p.querySelectorAll('a\\:r, r');
                                    let paraText = '';
                                    runs.forEach(r => {
                                        const t = r.querySelector('a\\:t, t');
                                        if (t) paraText += t.textContent;
                                    });

                                    if (paraText.trim()) {
                                        const pEl = document.createElement('p');
                                        pEl.style.margin = '0 0 2px 0';
                                        pEl.style.lineHeight = '1.2';
                                        pEl.textContent = paraText;
                                        itemDiv.appendChild(pEl);
                                    }
                                });
                            } else {
                                itemDiv.style.border = '1px solid #eeeeee';
                                itemDiv.style.backgroundColor = 'rgba(0,0,0,0.01)';
                            }
                        }
                        slideContent.appendChild(itemDiv);
                    }
                }
            } catch (parseErr) {
                console.error("PPTX parse error:", parseErr);
                viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;color:#d9534f;background:#fff;padding:20px;text-align:center;">PPTX 파싱 중 에러가 발생했습니다. 상단의 "PDF로 보기" 버튼을 이용해 주세요.</div>';
            }
        })
        .catch(err => {
            console.error(err);
            viewer.innerHTML = '<div style="display:flex;justify-content:center;align-items:center;height:100%;color:#d9534f;background:#fff;">PPTX 문서를 불러오는데 실패했습니다.</div>';
        });
}