// app.js

document.addEventListener('DOMContentLoaded', () => {

    // =================================================
    // 0. 로그아웃 로직 (추가됨)
    // =================================================
    const logoutBtn = document.getElementById('logout-button');
    if (logoutBtn) {
        logoutBtn.addEventListener('click', () => {
            if (confirm('정말로 로그아웃 하시겠습니까?')) {
                // 로그인 페이지(루트)로 이동
                window.location.href = '/';
            }
        });
    }

    // =================================================
    // 1. 탭 전환 로직
    // =================================================
    const tabVideo = document.getElementById('tab-video');
    const tabModels = document.getElementById('tab-models');
    const contentVideo = document.getElementById('content-video');
    const contentModels = document.getElementById('content-models');

    if (tabVideo && tabModels) {
        tabVideo.addEventListener('click', () => {
            tabVideo.classList.add('active');
            tabModels.classList.remove('active');
            contentVideo.classList.add('active');
            contentModels.classList.remove('active');
        });

        tabModels.addEventListener('click', () => {
            tabModels.classList.add('active');
            tabVideo.classList.remove('active');
            contentModels.classList.add('active');
            contentVideo.classList.remove('active');
            loadModelList();
            loadPoiList();
        });
    }

    // =================================================
    // 2. AI 모델 관리 로직
    // =================================================
    function loadModelList() {
        const tableBody = document.querySelector('.model-table tbody');
        if (!tableBody) return;
        fetch('/list-models').then(r=>r.json()).then(models=>{
             tableBody.querySelectorAll('tr[data-role]').forEach(row => {
                const role = row.dataset.role;
                const d = models[role];
                const f = row.querySelector('.model-filename');
                const v = row.querySelector('.model-version');
                const btn = row.querySelector('.btn-delete');
                if(d){ f.textContent=d.file; v.textContent=d.version; btn.classList.remove('hidden'); }
                else { f.textContent='-'; v.textContent='-'; btn.classList.add('hidden'); }
            });
        });
    }

    const modelTableBody = document.querySelector('.model-table tbody');
    if(modelTableBody) {
        modelTableBody.addEventListener('click', (e) => {
            if(e.target.classList.contains('btn-delete')) {
                const row = e.target.closest('tr');
                const filename = row.querySelector('.model-filename').textContent;
                if(filename && filename !== '-') deleteModelFile(filename);
            }
        });
    }

    function deleteModelFile(filename) {
        if (!confirm(`정말로 이 모델 파일(${filename})을 삭제하시겠습니까?`)) return;
        fetch('/delete-model', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({filename: filename})
        }).then(res => res.json()).then(data => {
            if (data.status === 'success') { alert('삭제되었습니다.'); loadModelList(); }
            else { alert(`삭제 실패: ${data.message}`); }
        });
    }

    const globalUploadBtn = document.getElementById('global-upload-button');
    const globalFileInput = document.getElementById('global-file-input');
    const fileNameDisplay = document.getElementById('file-name-display');
    const refreshButton = document.querySelector('.refresh-button');

    if (globalFileInput) {
        globalFileInput.addEventListener('change', () => {
            fileNameDisplay.textContent = globalFileInput.files.length > 0 ? globalFileInput.files[0].name : '선택된 파일 없음';
        });
    }
    if (globalUploadBtn) {
        globalUploadBtn.addEventListener('click', () => {
            if (!globalFileInput.files.length) return alert('파일을 선택해주세요.');
            const formData = new FormData();
            formData.append('modelFile', globalFileInput.files[0]);
            fetch('/upload-model', { method: 'POST', body: formData })
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') { alert('업로드 성공'); globalFileInput.value=''; fileNameDisplay.textContent='선택된 파일 없음'; loadModelList(); }
                    else { alert(`실패: ${data.message}`); }
                });
        });
    }
    if (refreshButton) refreshButton.addEventListener('click', loadModelList);


    // =================================================
    // 3. 관심 인물(POI) 관리 로직
    // =================================================
    const poiTableBody = document.querySelector('#poi-table tbody');
    const poiEmptyMsg = document.getElementById('poi-empty-msg');
    const btnPoiRegister = document.getElementById('btn-poi-register');
    const btnPoiRefresh = document.getElementById('btn-poi-refresh');

    // 모달 및 뷰어 요소
    const poiModal = document.getElementById('poi-modal');
    const poiNameInput = document.getElementById('poi-name-input');
    const btnModalConfirm = document.getElementById('btn-modal-confirm');
    const btnModalCancel = document.getElementById('btn-modal-cancel');

    const imageViewerModal = document.getElementById('image-viewer-modal');
    const fullImage = document.getElementById('full-image');
    const closeViewerBtn = document.querySelector('.close-viewer');

    // POI 목록 로드
    function loadPoiList() {
        if (!poiTableBody) return;

        fetch('/poi/list')
            .then(res => res.json())
            .then(list => {
                poiTableBody.innerHTML = '';

                if (!list || list.length === 0) {
                    poiEmptyMsg.classList.remove('hidden');
                    poiTableBody.parentElement.classList.add('hidden');
                } else {
                    poiEmptyMsg.classList.add('hidden');
                    poiTableBody.parentElement.classList.remove('hidden');

                    list.forEach((item, index) => {
                        const tr = document.createElement('tr');

                        let previewHtml = '-';
                        if (item.images && item.images.length > 0) {
                            const imagesHtml = item.images.map(imgName => {
                                const imgSrc = `/poi-images/${item.name}/${imgName}`;
                                return `
                                    <div class="preview-item">
                                        <img src="${imgSrc}" class="poi-preview" onclick="openImageViewer('${imgSrc}')" title="클릭하여 확대">
                                        <button class="btn-delete-small" onclick="deletePoiImage('${item.name}', '${imgName}')">삭제</button>
                                    </div>
                                `;
                            }).join('');
                            previewHtml = `<div class="preview-container">${imagesHtml}</div>`;
                        }

                        const fileInputId = `poi-file-${item.name}`;

                        tr.innerHTML = `
                            <td>${index + 1}</td>
                            <td>
                                <span style="font-weight:bold; font-size:1.1rem; margin-right:10px;">${item.name}</span>
                                <button class="btn-delete-small" onclick="deletePoi('${item.name}')">삭제</button>
                            </td>
                            <td>${previewHtml}</td>
                            <td>
                                <input type="file" id="${fileInputId}" class="hidden" accept=".jpg,.jpeg,.png" multiple onchange="uploadPoiImage('${item.name}', this)">
                                <label for="${fileInputId}" class="btn-browse" style="background:#fff; color:#333; border:1px solid #ccc;">찾아보기</label>
                            </td>
                        `;
                        poiTableBody.appendChild(tr);
                    });
                }
            })
            .catch(err => console.error('POI Load Error:', err));
    }

    // [전역 함수] 이미지 뷰어 열기
    window.openImageViewer = function(src) {
        if (fullImage && imageViewerModal) {
            fullImage.src = src;
            imageViewerModal.classList.remove('hidden');
        }
    };

    // 뷰어 닫기 로직
    if (closeViewerBtn) {
        closeViewerBtn.addEventListener('click', () => {
            imageViewerModal.classList.add('hidden');
        });
    }
    window.addEventListener('click', (e) => {
        if (e.target === imageViewerModal) {
            imageViewerModal.classList.add('hidden');
        }
    });


    // [전역 함수] 인물 전체 삭제
    window.deletePoi = function(name) {
        if (!confirm(`관심인물 '${name}'을(를) 완전히 삭제하시겠습니까?\n등록된 모든 이미지가 함께 삭제됩니다.`)) return;

        fetch('/poi/delete', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name })
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') loadPoiList();
            else alert('삭제 실패');
        });
    };

    // [전역 함수] 특정 이미지만 삭제
    window.deletePoiImage = function(name, imageName) {
        if (!confirm(`해당 이미지를 삭제하시겠습니까?`)) return;

        fetch('/poi/delete-image', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name, imageName })
        })
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success') loadPoiList();
            else alert('이미지 삭제 실패');
        });
    };

    // [수정됨] 다중 파일 업로드 처리
    window.uploadPoiImage = function(name, input) {
        if (!input.files || input.files.length === 0) return;

        const formData = new FormData();
        formData.append('poiName', name);

        // 선택된 모든 파일을 formData에 추가
        for (let i = 0; i < input.files.length; i++) {
            const file = input.files[i];
            const ext = file.name.split('.').pop().toLowerCase();

            if (!['jpg', 'jpeg', 'png'].includes(ext)) {
                alert(`'${file.name}'은(는) 허용되지 않는 파일 형식입니다. (jpg, png만 가능)`);
                input.value = '';
                return;
            }

            formData.append('poiFile', file);
        }

        fetch('/poi/upload-image', { method: 'POST', body: formData })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('이미지 등록 완료');
                    loadPoiList();
                } else {
                    alert('업로드 실패: ' + (data.message || '오류'));
                }
            })
            .catch(() => alert('오류 발생'));

        input.value = '';
    };


    // 이벤트 리스너
    if (btnPoiRefresh) btnPoiRefresh.addEventListener('click', loadPoiList);

    if (btnPoiRegister) {
        btnPoiRegister.addEventListener('click', () => {
            poiNameInput.value = '';
            poiModal.classList.remove('hidden');
        });
    }

    if (btnModalCancel) {
        btnModalCancel.addEventListener('click', () => {
            poiModal.classList.add('hidden');
        });
    }

    if (btnModalConfirm) {
        btnModalConfirm.addEventListener('click', () => {
            const name = poiNameInput.value.trim();
            if (!name) return alert('이름을 입력하세요.');
            const regex = /^[a-zA-Z0-9]+$/;
            if (!regex.test(name)) return alert('영문과 숫자만 입력 가능합니다.');

            fetch('/poi/register', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name })
            })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    poiModal.classList.add('hidden');
                    loadPoiList();
                } else {
                    alert(data.message || '등록 실패');
                }
            });
        });
    }

    // =================================================
    // 4. 비디오 & 웹소켓 (기존 기능)
    // =================================================
    const uri = "ws://10.10.11.246:8765";
    const canvasEl = document.getElementById("frame");
    const statusEl = document.getElementById("status");
    const detListEl = document.getElementById("det-list");
    const bboxContainerEl = document.getElementById("bbox-container");
    const modelContainerEl = document.getElementById("current-model-container");
    const modelDisplayEl = document.getElementById("current-model-display");
    const fpsDisplayEl = document.getElementById("fps-display");
    let ctx = null;

    if (canvasEl) ctx = canvasEl.getContext('2d');
    let frameCount = 0;
    let lastFpsCheckTime = performance.now();
    let lastFrameMeta = null;

    function connect() {
        const ws = new WebSocket(uri);
        ws.binaryType = "arraybuffer";
        ws.onopen = () => { statusEl.textContent = "연결됨"; statusEl.className = "status"; };
        ws.onclose = () => { statusEl.textContent = "연결 종료. 재접속..."; statusEl.className = "status err"; setTimeout(connect, 2000); };
        ws.onmessage = (event) => {
            const data = event.data;
            if (typeof data === "string") {
                try {
                    const meta = JSON.parse(data);
                    if (meta.type === "frame") {
                        lastFrameMeta = meta;
                        document.getElementById("frame-info").textContent = ` | FRAME ${meta.w}x${meta.h}`;
                    } else if (meta.type === "det") {
                        showDetections(meta);
                    }
                } catch(e){}
            } else if (data instanceof ArrayBuffer && lastFrameMeta) {
                frameCount++;
                const now = performance.now();
                if (now - lastFpsCheckTime >= 1000) {
                    fpsDisplayEl.textContent = `${Math.round(frameCount * 1000 / (now - lastFpsCheckTime))} FPS`;
                    frameCount = 0;
                    lastFpsCheckTime = now;
                }
                const blob = new Blob([data], {type: "image/jpeg"});
                createImageBitmap(blob).then(bmp => {
                    canvasEl.width = canvasEl.clientWidth;
                    canvasEl.height = canvasEl.clientHeight;
                    const r = Math.min(canvasEl.width / bmp.width, canvasEl.height / bmp.height);
                    const dw = bmp.width * r;
                    const dh = bmp.height * r;
                    const dx = (canvasEl.width - dw) / 2;
                    const dy = (canvasEl.height - dh) / 2;
                    ctx.clearRect(0,0,canvasEl.width, canvasEl.height);
                    ctx.drawImage(bmp, dx, dy, dw, dh);
                    bmp.close();
                    updateBboxContainerPosition();
                });
            }
        };
    }

    function showDetections(meta) {
        bboxContainerEl.innerHTML = "";
        const items = meta.items || [];
        let lines = [];
        items.forEach((it, i) => {
             lines.push(`#${i} cls=${it.cls} score=${it.conf || 0}`);
        });
        detListEl.textContent = lines.join("\n");
    }

    function updateBboxContainerPosition() {
        if (!canvasEl || !bboxContainerEl) return;
        bboxContainerEl.style.top = canvasEl.offsetTop + 'px';
        bboxContainerEl.style.left = canvasEl.offsetLeft + 'px';
        bboxContainerEl.style.width = canvasEl.offsetWidth + 'px';
        bboxContainerEl.style.height = canvasEl.offsetHeight + 'px';
    }

    if (modelContainerEl) {
        modelContainerEl.addEventListener('change', (e) => {
            if(e.target.name === 'current-model') {
                updateModelDisplay();
                fetch('/set-model', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({model: e.target.value})
                });
            }
        });
    }

    function updateModelDisplay() {
        if(!modelContainerEl || !modelDisplayEl) return;
        const checked = modelContainerEl.querySelector('input:checked');
        if(checked) {
            const label = modelContainerEl.querySelector(`label[for="${checked.id}"]`);
            modelDisplayEl.textContent = label ? label.textContent : checked.value;
        }
    }

    updateModelDisplay();
    if (canvasEl) connect();
    window.addEventListener('resize', updateBboxContainerPosition);
    loadPoiList();
    loadModelList();
});