options.js

const listBody = document.getElementById('listBody');

function showInfoToast(msg, isError = false) {
  let container = document.getElementById('book-manager-info-toast-container');
  if (!container) {
    container = document.createElement('div');
    container.id = 'book-manager-info-toast-container';
    container.style.cssText = "position:fixed; bottom:20px; right:20px; z-index:999999; display:flex; flex-direction:column; gap:10px; pointer-events:none;";
    document.body.appendChild(container);
  }
  
  const toast = document.createElement('div');
  const bgColor = isError ? '#dc3545' : '#17a2b8';
  
  toast.style.cssText = "background: " + bgColor + "; color: white; padding: 12px 35px 12px 20px; border-radius: 8px; font-size: 14px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3); opacity: 0; transform: translateX(20px); transition: all 0.3s ease; white-space: nowrap; pointer-events: auto; position: relative;";
  toast.innerHTML = msg;

  const closeBtn = document.createElement('span');
  closeBtn.innerHTML = "×";
  closeBtn.style.cssText = "position: absolute; top: 8px; right: 12px; font-size: 20px; font-weight: normal; cursor: pointer; opacity: 0.6; line-height: 1;";
  closeBtn.onmouseover = () => closeBtn.style.opacity = '1';
  closeBtn.onmouseout = () => closeBtn.style.opacity = '0.6';
  closeBtn.onclick = () => {
      toast.style.opacity = '0';
      toast.style.transform = 'translateX(20px)';
      setTimeout(() => { if (toast.parentNode) toast.remove(); }, 300);
  };
  toast.appendChild(closeBtn);
  container.appendChild(toast);

  void toast.offsetWidth;
  toast.style.opacity = '1';
  toast.style.transform = 'translateX(0)';
  
  setTimeout(() => {
    toast.style.opacity = '0';
    toast.style.transform = 'translateX(20px)';
    setTimeout(() => { if (toast.parentNode) toast.remove(); }, 350); 
  }, 3000);
}

function parseDateStr(str) {
    if (!str) return 0;
    let d = new Date(str).getTime();
    if (!isNaN(d)) return d;
    d = new Date(str.replace(/\.\s*/g, '/').replace(/\/$/, '')).getTime();
    return isNaN(d) ? 0 : d;
}

function formatDisplayDate(str) {
    if (!str) return '';
    if (str.includes('T') || str.includes('-')) {
        return new Date(str).toLocaleDateString('ko-KR');
    }
    return str; 
}

function renderSites() {
  chrome.storage.local.get({ allowedSites: [] }, (data) => {
    const sites = Array.isArray(data.allowedSites) ? data.allowedSites : [];
    document.getElementById('siteList').innerHTML = sites.map(s => {
        if (typeof s === 'object') {
            let detailTxt = s.detailSelector ? s.detailSelector : '<span style="color:#aaa;">미등록</span>';
            return `<span class="site-tag">
                      <b style="font-size:13px; color:#0d6efd;">${s.url}</b> 
                      <span style="color:var(--text-muted);">상세: <code>${detailTxt}</code></span> 
                      <b style="color:red; cursor:pointer; font-size:14px; margin-left:4px;" data-site="${s.url}">×</b>
                    </span>`;
        } else {
            return `<span class="site-tag"><b>${s}</b> <b style="color:red; cursor:pointer;" data-site="${s}">×</b></span>`;
        }
    }).join('');
  });
}

function renderFilters() {
  chrome.storage.local.get({ filterWords: [] }, (data) => {
    const filters = Array.isArray(data.filterWords) ? data.filterWords : [];
    document.getElementById('filterList').innerHTML = filters.map(f => {
        return `<span class="site-tag" style="background: rgba(220,53,69,0.05); border-color: rgba(220,53,69,0.2); margin:0;">
                  <b style="font-size:13px; color:#dc3545;">${f}</b> 
                  <b style="color:#dc3545; cursor:pointer; font-size:15px; margin-left:6px; opacity:0.7;" data-filter="${f}">×</b>
                </span>`;
    }).join('');
  });
}

let renderFrame;

let currentPage = 1;
const itemsPerPage = 100; // 한 페이지에 보여줄 항목 수 (100개 권장)
let totalPages = 1;

function renderList(filter = "", resetPage = false) {
  if (resetPage) currentPage = 1; // 검색/정렬 시 페이지 1로 리셋

  chrome.storage.local.get({ bookList: [], sortOption: 'id_desc' }, (data) => {
    listBody.innerHTML = '';
    
    let list = Array.isArray(data.bookList) ? data.bookList : [];
    
    const completeCount = list.filter(b => b.type === 'complete').length;
    const incompleteCount = list.filter(b => b.type === 'incomplete').length;
    const excludeCount = list.filter(b => b.type === 'exclude').length;
    
    document.getElementById('stat-total').innerText = list.length;
    document.getElementById('stat-complete').innerText = completeCount;
    document.getElementById('stat-incomplete').innerText = incompleteCount;
    document.getElementById('stat-exclude').innerText = excludeCount;

    const isDuplicateSearch = filter === "#중복";
    let duplicateIds = new Set();
    
    if (isDuplicateSearch) {
        const titleMap = new Map();
        list.forEach(b => {
            if (!b || !b.title) return;
            const normalized = b.title.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣぁ-んァ-ヶー一-龥]/g, '').toLowerCase();
            if (normalized.length === 0) return;
            if (titleMap.has(normalized)) {
                titleMap.get(normalized).push(b.id);
            } else {
                titleMap.set(normalized, [b.id]);
            }
        });
        
        titleMap.forEach(ids => {
            if (ids.length > 1) ids.forEach(id => duplicateIds.add(id));
        });
    }

    // 필터링 적용
    const normalizedFilter = filter.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ\sぁ-んァ-ヶー一-龥]/g, '').toLowerCase().trim().replace(/\s+/g, '');
    const filteredList = list.filter(b => {
        if (!b || !b.title) return false;
        if (isDuplicateSearch) return duplicateIds.has(b.id);
        if (b.title.toLowerCase().includes(filter.toLowerCase())) return true;
        if (normalizedFilter) {
            const normalizedTitle = b.title.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ\sぁ-んァ-ヶー一-龥]/g, '').toLowerCase().trim().replace(/\s+/g, '');
            return normalizedTitle.includes(normalizedFilter);
        }
        return false;
    });
    
    // 전체 페이지 계산 및 현재 페이지 보정
    totalPages = Math.ceil(filteredList.length / itemsPerPage) || 1;
    if (currentPage > totalPages) currentPage = totalPages;

    const countDisplay = document.getElementById('listCountDisplay');
    if (countDisplay) {
        if (isDuplicateSearch) {
            countDisplay.innerHTML = `중복 의심 목록: 총 <span style="color:#fd7e14;">${filteredList.length}</span>건 (공백/기호 무시 시 동일한 항목 묶음)`;
        } else if (filter.trim() === "") {
            countDisplay.innerHTML = `전체 목록: 총 <span style="color:#0d6efd;">${filteredList.length}</span>건 (현재 <b style="color:var(--text);">${currentPage} / ${totalPages}</b> 페이지)`;
        } else {
            countDisplay.innerHTML = `검색 결과: 총 <span style="color:#e83e8c;">${filteredList.length}</span>건 (현재 <b style="color:var(--text);">${currentPage} / ${totalPages}</b> 페이지)`;
        }
    }

    const findDuplicatesBtn = document.getElementById('findDuplicatesBtn');
    if (findDuplicatesBtn) {
        findDuplicatesBtn.onclick = () => {
            if (searchInput) {
                searchInput.value = '#중복';
                searchInput.dispatchEvent(new Event('input'));
            }
        };
    }

    // 정렬 로직 적용
    let sortFn;
    switch(data.sortOption) {
        case 'title_asc': sortFn = (a, b) => (a.title || '').localeCompare(b.title || ''); break;
        case 'title_desc': sortFn = (a, b) => (b.title || '').localeCompare(a.title || ''); break;
        case 'date_asc': sortFn = (a, b) => (parseDateStr(a.date) - parseDateStr(b.date)) || ((a.id || 0) - (b.id || 0)); break;
        case 'date_desc': sortFn = (a, b) => (parseDateStr(b.date) - parseDateStr(a.date)) || ((b.id || 0) - (a.id || 0)); break;
        case 'id_asc': sortFn = (a, b) => (a.id || 0) - (b.id || 0); break;
        case 'id_desc': 
        default: sortFn = (a, b) => (b.id || 0) - (a.id || 0); break;
    }
    
    if (isDuplicateSearch) {
        filteredList.sort((a, b) => {
            const normA = (a.title || '').replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣぁ-んァ-ヶー一-龥]/g, '').toLowerCase();
            const normB = (b.title || '').replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣぁ-んァ-ヶー一-龥]/g, '').toLowerCase();
            if (normA < normB) return -1;
            if (normA > normB) return 1;
            return sortFn(a, b);
        });
    } else {
        filteredList.sort(sortFn);
    }

    // 데이터 자르기 (Slice)
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, filteredList.length);
    const pageItems = filteredList.slice(startIndex, endIndex);

    // 화면에 그리기
    const fragment = document.createDocumentFragment();
    let prevNorm = null;

    pageItems.forEach(book => {
        if (isDuplicateSearch) {
            const normTitle = (book.title || '').replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣぁ-んァ-ヶー一-龥]/g, '').toLowerCase();
            if (normTitle !== prevNorm) {
                prevNorm = normTitle;
                const groupTr = document.createElement('tr');
                groupTr.className = 'group-header-tr';
                groupTr.innerHTML = `<td colspan="6" style="text-align: left; padding: 6px 12px; font-weight: bold; font-size: 12px; background-color: rgba(127, 127, 127, 0.1); color: var(--text); border-bottom: 2px solid #fd7e14; border-top: 2px solid var(--border);">📦 동일 항목 그룹: <span style="color:#fd7e14;">${normTitle}</span></td>`;
                fragment.appendChild(groupTr);
            }
        }

        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>
            <select class="edit-type" data-id="${book.id}" data-type="${book.type}" style="padding: 4px;">
              <option value="exclude" ${book.type==='exclude'?'selected':''}>제외</option>
              <option value="incomplete" ${book.type==='incomplete'?'selected':''}>미완</option>
              <option value="complete" ${book.type==='complete'?'selected':''}>완결</option>
            </select>
          </td>
          <td><input type="text" class="edit-title" value="${book.title}" data-id="${book.id}"></td>
          <td><input type="text" class="edit-res" value="${book.resolution||''}" data-id="${book.id}" placeholder="해상도" style="width:65px"></td>
          
          <td style="position:relative; vertical-align:middle; padding:0;">
            <div style="display:flex; align-items:center; justify-content:center; gap:4px; width:100%; height:100%;">
              <input type="text" class="edit-vol" value="${book.lastVol||''}" data-id="${book.id}" placeholder="권수" style="width:100%; min-width:35px; margin:0; padding:4px;">
              ${(book.missingVols && book.missingVols.length > 0) 
                  ? `<span class="missing-badge" style="flex-shrink:0; padding:2px 4px;" data-id="${book.id}">${book.missingVols.length}누락</span>` 
                  : `<span class="missing-badge empty" style="flex-shrink:0; padding:2px 4px;" data-id="${book.id}">+누락</span>`}
            </div>
          </td>
          
          <td style="color:var(--text-muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${formatDisplayDate(book.date)}</td>
          <td>
              <button class="btn-save" data-id="${book.id}">수정</button>
              <button class="btn-del" data-id="${book.id}">삭제</button>
          </td>
        `;
        fragment.appendChild(tr);
    });
    
    listBody.appendChild(fragment);
    
    // 페이지네이션 버튼 렌더링 호출
    renderPagination();
  });
}

// 하단 페이지네이션 버튼 생성 로직
function renderPagination() {
    const container = document.getElementById('paginationContainer');
    if (!container) return;
    container.innerHTML = '';

    if (totalPages <= 1) return;

    const createBtn = (text, targetPage, disabled = false, active = false) => {
        const btn = document.createElement('button');
        btn.className = 'page-btn' + (active ? ' active' : '');
        btn.innerHTML = text;
        btn.disabled = disabled;
        
        if (!disabled && !active) {
            btn.onclick = () => {
                currentPage = targetPage;
                renderList(document.getElementById('searchInput').value, false);
                window.scrollTo({ top: 0, behavior: 'smooth' }); // 페이지 이동 시 맨 위로
            };
        }
        return btn;
    };

    // 처음, 이전 버튼
    container.appendChild(createBtn('«', 1, currentPage === 1));
    container.appendChild(createBtn('‹', currentPage - 1, currentPage === 1));

    // 페이지 숫자 목록 (현재 페이지 기준으로 +- 2개씩 표시, 최대 5개)
    let startPage = Math.max(1, currentPage - 2);
    let endPage = Math.min(totalPages, startPage + 4);
    if (endPage - startPage < 4) {
        startPage = Math.max(1, endPage - 4);
    }

    for (let i = startPage; i <= endPage; i++) {
        container.appendChild(createBtn(i, i, false, i === currentPage));
    }

    // 다음, 마지막 버튼
    container.appendChild(createBtn('›', currentPage + 1, currentPage === totalPages));
    container.appendChild(createBtn('»', totalPages, currentPage === totalPages));
}

function saveWithUndo(newList, successMsg) {
    chrome.storage.local.get({ bookList: [] }, (data) => {
        chrome.storage.local.set({ backupList: data.bookList }, () => {
            chrome.storage.local.set({ bookList: newList }, () => {
                if (successMsg) showInfoToast(successMsg);
                // 수정/삭제 후 현재 페이지 유지 (false 전달)
                renderList(document.getElementById('searchInput').value, false); 
                
                const undoBtn = document.getElementById('undoBtn');
                undoBtn.style.display = 'block';
                setTimeout(() => { undoBtn.style.display = 'none'; }, 15000);
            });
        });
    });
}

document.getElementById('undoBtn').onclick = () => {
    chrome.storage.local.get({ backupList: null }, (data) => {
        if (data.backupList) {
            chrome.storage.local.set({ bookList: data.backupList }, () => {
                showInfoToast('⏪ 방금 전 작업이 완벽하게 취소(복구)되었습니다.');
                renderList(document.getElementById('searchInput').value, false);
                document.getElementById('undoBtn').style.display = 'none';
            });
        }
    });
};

document.getElementById('batchUpdateBtn').onclick = () => {
    const targetType = document.getElementById('batchTypeSelect').value;
    const filter = document.getElementById('searchInput').value.toLowerCase();
    const normalizedFilter = filter.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ\sぁ-んァ-ヶー一-龥]/g, '').trim().replace(/\s+/g, '');
    
    let typeNameKOR = targetType === 'exclude' ? '제외' : (targetType === 'complete' ? '완결' : '미완');
    if(!confirm(`현재 검색된 모든 항목을 [${typeNameKOR}] 타입으로 변경하시겠습니까?`)) return;

    chrome.storage.local.get({ bookList: [] }, (data) => {
        let list = Array.isArray(data.bookList) ? data.bookList : [];
        const today = new Date().toISOString(); 

        const updatedList = list.map(book => {
            if (book && book.title) {
                const lowerTitle = book.title.toLowerCase();
                const matchOriginal = lowerTitle.includes(filter);
                let matchNormalized = false;
                if (!matchOriginal && normalizedFilter) {
                    const normalizedTitle = lowerTitle.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ\sぁ-んァ-ヶー一-龥]/g, '').trim().replace(/\s+/g, '');
                    matchNormalized = normalizedTitle.includes(normalizedFilter);
                }
                if (matchOriginal || matchNormalized) {
                    return { ...book, type: targetType, date: today };
                }
            }
            return book;
        });

        saveWithUndo(updatedList, '일괄 수정이 완료되었습니다.');
    });
};

// ============================================================================
// [수정됨] 백업 (내보내기) 로직: 도서 목록 + 사이트 설정 + 금지어 설정 모두 포함
// ============================================================================
document.getElementById('exportBtn').onclick = () => {
    // 저장소에서 3가지 데이터를 모두 불러옵니다.
    chrome.storage.local.get({ bookList: [], allowedSites: [], filterWords: [] }, (data) => {
        // 객체(Object) 형태로 데이터를 묶어서 백업
        const exportData = {
            bookList: data.bookList,
            allowedSites: data.allowedSites,
            filterWords: data.filterWords
        };
        
        const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'book_manager_backup.json'; 
        a.click();
        URL.revokeObjectURL(url);

        const now = new Date();
        const backupTime = now.toLocaleString('ko-KR'); 
        chrome.storage.local.set({ lastBackup: backupTime }, () => {
            const timeSpan = document.getElementById('lastBackupTime');
            if(timeSpan) timeSpan.innerText = `최근 백업: ${backupTime}`;
        });
    });
};

document.getElementById('importBtn').onclick = () => document.getElementById('fileInput').click();

// ============================================================================
// [수정됨] 복구 (불러오기) 로직: 신규 포맷 및 구버전 포맷(하위 호환) 완벽 지원
// ============================================================================
document.getElementById('fileInput').onchange = (e) => {
    const file = e.target.files[0];
    if (!file) return;

    if (!confirm('경고: 파일의 데이터가 기존 데이터를 완전히 덮어씁니다. 계속하시겠습니까?\n(오류 시 우측 하단의 실행 취소 버튼으로 되돌릴 수 있습니다)')) {
        e.target.value = '';
        return;
    }

    const reader = new FileReader();
    reader.onload = (event) => {
        try {
            const importedData = JSON.parse(event.target.result);
            
            // 1. 신규 포맷 검사 (객체 형태: 도서 목록 + 사이트 설정 + 금지어)
            if (importedData && typeof importedData === 'object' && !Array.isArray(importedData)) {
                let hasSettings = false;
                
                // 사이트 설정이 존재하면 복구 및 화면 갱신
                if (Array.isArray(importedData.allowedSites)) {
                    chrome.storage.local.set({ allowedSites: importedData.allowedSites }, renderSites);
                    hasSettings = true;
                }
                
                // 필터(금지어) 설정이 존재하면 복구 및 화면 갱신
                if (Array.isArray(importedData.filterWords)) {
                    chrome.storage.local.set({ filterWords: importedData.filterWords }, renderFilters);
                    hasSettings = true;
                }

                // 도서 목록이 존재하면 복구 (기존 saveWithUndo 재활용하여 취소 기능 유지)
                if (Array.isArray(importedData.bookList)) {
                    saveWithUndo(importedData.bookList, '✅ 도서 목록 및 추가 설정 복구가 완료되었습니다.');
                } else if (hasSettings) {
                    showInfoToast('✅ 추가 설정(사이트/금지어) 복구가 완료되었습니다.');
                } else {
                    showInfoToast('❌ 유효한 백업 데이터가 없습니다.', true);
                }
            } 
            // 2. 구버전 포맷 검사 (배열 형태: 과거에 도서 목록만 백업했던 파일)
            else if (Array.isArray(importedData)) {
                saveWithUndo(importedData, '✅ 도서 목록 복구가 완료되었습니다. (구버전 백업 파일 호환 적용)');
            } 
            else {
                showInfoToast('❌ 올바른 백업 파일 형식이 아닙니다.', true);
            }
        } catch (err) {
            showInfoToast('❌ 파일을 읽는 중 오류가 발생했습니다. (JSON 파싱 에러)', true);
        }
        e.target.value = '';
    };
    reader.readAsText(file);
};

// ============================================================================
// [신규 추가] 타임머신 스냅샷 렌더링 및 복원 로직
// ============================================================================
async function renderSnapshots() {
    const container = document.getElementById('snapshotList');
    if (!container) return;
    try {
        const snapshots = await db.snapshots.orderBy('timestamp').reverse().toArray();
        if (snapshots.length === 0) {
            container.innerHTML = '<li style="font-size: 13px; color: var(--text-muted);">저장된 스냅샷이 없습니다. (자동 백업은 1일 뒤부터 생성됩니다)</li>';
            return;
        }
        container.innerHTML = snapshots.map(snap => {
            const date = new Date(snap.timestamp);
            const displayTime = `${date.getFullYear()}년 ${date.getMonth()+1}월 ${date.getDate()}일 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
            const bookCount = snap.data && snap.data.bookList ? snap.data.bookList.length : 0;
            return `
                <li style="display:flex; justify-content:space-between; align-items:center; background:var(--input-bg); border:1px solid var(--border); padding:10px 15px; border-radius:6px;">
                    <div>
                        <strong style="color:var(--text); font-size:13px;">📅 ${snap.dateStr} 자동 백업</strong><br>
                        <span style="color:var(--text-muted); font-size:11px;">저장 시간: ${displayTime} | 도서 데이터: ${bookCount}건</span>
                    </div>
                    <button class="btn-restore-snap" data-id="${snap.id}" style="background:#fd7e14; padding:5px 12px; font-size:12px; border:none;">이 시점으로 복원</button>
                </li>`;
        }).join('');
        
        document.querySelectorAll('.btn-restore-snap').forEach(btn => {
            btn.onclick = async (e) => {
                const id = parseInt(e.target.dataset.id, 10);
                if (confirm('정말로 이 시점의 데이터로 되돌리시겠습니까?\n현재 저장된 모든 데이터는 해당 시점의 데이터로 덮어씌워집니다.')) {
                    const snap = await db.snapshots.get(id);
                    if (snap && snap.data) {
                        let hasSettings = false;
                        if (Array.isArray(snap.data.allowedSites)) { chrome.storage.local.set({ allowedSites: snap.data.allowedSites }, renderSites); hasSettings = true; }
                        if (Array.isArray(snap.data.filterWords)) { chrome.storage.local.set({ filterWords: snap.data.filterWords }, renderFilters); hasSettings = true; }
                        if (Array.isArray(snap.data.bookList)) { saveWithUndo(snap.data.bookList, '✅ 선택한 시점으로 복원이 완료되었습니다.'); } 
                        else if (hasSettings) { showInfoToast('✅ 추가 설정(사이트/금지어) 복구가 완료되었습니다.'); } 
                    }
                }
            };
        });
    } catch (err) {
        container.innerHTML = '<li style="font-size: 13px; color: #dc3545;">스냅샷을 불러오는 데 실패했습니다.</li>';
    }
}

const bulkInput = document.getElementById('bulkInput');
const bulkPreview = document.getElementById('bulkPreview');

bulkInput.addEventListener('input', () => {
    const lines = bulkInput.value.split('\n').filter(t => t.trim());
    if (lines.length === 0) { 
        bulkPreview.style.display = 'none'; 
        return; 
    }
    
    bulkPreview.style.display = 'block';
    const line = lines[0]; 
    
    const resMatch = line.match(/\d{3,4}\s*px/gi);
    const rangeMatch = line.match(/(\d+)\s*(?:권|화|부(?!터))?\s*[~-]\s*(\d+)/);
    const singleMatch = line.match(/(\d+)\s*(?:권|완결|화|부(?!터))/);
    const endNumMatch = line.match(/(\d+)\s*$/);
    
    let parsedVol = "";
    if (rangeMatch) parsedVol = parseInt(rangeMatch[2], 10).toString();
    else if (singleMatch) parsedVol = parseInt(singleMatch[1], 10).toString();
    else if (endNumMatch) parsedVol = parseInt(endNumMatch[1], 10).toString();
    
    let cleanTitle = cleanSiteTitle(line)
      .replace(/\d+\s*권/g, '')
      .replace(/완결/g, '')
      .replace(/개$/g, '')
      .replace(/(\d+)?권/g, '')
      .replace(/(\d+)?완/g, '')
      .replace(/\s?권$/g, '')
      .replace(/\s?완$/g, '')
      .replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ\sぁ-んァ-ヶー一-龥]/g, ' ')
      .replace(/\s+/g, ' ')
      .trim();

    let extras = lines.length > 1 ? `<span style="color:var(--text-muted); float:right;">(+ 외 ${lines.length - 1}건)</span>` : '';
    
    bulkPreview.innerHTML = `
        <span style="display:inline-block; margin-bottom:5px;"><b>👀 첫 번째 줄 파싱 결과</b> ${extras}</span><br>
        📚 제목: <span style="color:#0d6efd; font-weight:bold;">${cleanTitle || '(없음)'}</span> | 
        📑 권수: <span style="color:#e83e8c; font-weight:bold;">${parsedVol || '(없음)'}</span> | 
        📺 해상도: <span style="color:#20c997; font-weight:bold;">${resMatch ? Array.from(new Set(resMatch)).join(',') : '(없음)'}</span>
    `;
});

document.getElementById('saveBtn').onclick = () => {
  const lines = document.getElementById('bulkInput').value.split('\n').filter(t => t.trim());
  const selectedTypeSelect = document.getElementById('bulkTypeSelect');
  const targetType = selectedTypeSelect ? selectedTypeSelect.value : 'exclude';
  
  // 데이터가 많을 경우 브라우저 멈춤을 방지하기 위해 로딩 상태 표시
  const btn = document.getElementById('saveBtn');
  const originalBtnText = btn.innerText;
  btn.innerText = "⏳ 처리 중... (잠시만 기다려주세요)";
  btn.style.pointerEvents = 'none';

  chrome.storage.local.set({ lastBulkType: targetType });

  // UI 텍스트가 바뀔 틈을 주기 위해 setTimeout으로 비동기 실행
  setTimeout(() => {
    chrome.storage.local.get({ bookList: [] }, (data) => {
      let currentList = Array.isArray(data.bookList) ? data.bookList : [];
      let skippedCount = 0;

      // [최적화 1] 검색 속도 무한대 향상 (O(N) -> O(1))
      // 매번 findIndex로 찾지 않도록 기존 목록을 Map(사전) 형태로 미리 만들어 둡니다.
      const titleMap = new Map();
      currentList.forEach((book, idx) => {
          if (book && book.title) {
              const normalized = book.title.replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ\sぁ-んァ-ヶー一-龥]/g, '').toLowerCase().trim().replace(/\s+/g, '');
              titleMap.set(normalized, idx); // 제목을 키(Key)로, 인덱스를 값(Value)으로 저장
          }
      });

      // [최적화 2] unshift 연산 제거
      // 매번 배열을 뒤로 미는 대신, 임시 배열에 일단 차곡차곡 쌓습니다(push).
      const newBooks = [];

      lines.forEach(line => {
        const resMatch = line.match(/\d{3,4}\s*px/gi);
        
        // 이전에 수정한 부(?!터) 정규식 그대로 유지
        const rangeMatch = line.match(/(\d+)\s*(?:권|화|부(?!터))?\s*[~-]\s*(\d+)/);
        const singleMatch = line.match(/(\d+)\s*(?:권|완결|화|부(?!터))/);
        const endNumMatch = line.match(/(\d+)\s*$/);
        
        let parsedVol = "";
        if (rangeMatch) parsedVol = parseInt(rangeMatch[2], 10).toString();
        else if (singleMatch) parsedVol = parseInt(singleMatch[1], 10).toString();
        else if (endNumMatch) parsedVol = parseInt(endNumMatch[1], 10).toString();
        
        let cleanTitle = cleanSiteTitle(line)
          .replace(/\d+\s*권/g, '')
          .replace(/완결/g, '')
          .replace(/개$/g, '')
          .replace(/(\d+)?권/g, '')
          .replace(/(\d+)?완/g, '')
          .replace(/\s?권$/g, '')
          .replace(/\s?완$/g, '')
          .replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ\sぁ-んァ-ヶー一-龥]/g, ' ')
          .replace(/\s+/g, ' ')
          .trim();

        if (!cleanTitle) {
            skippedCount++;
            return; 
        }

        const normalizedNewTitle = cleanTitle.replace(/\s+/g, '').toLowerCase();
        
        const bookData = { 
          type: targetType,
          title: cleanTitle, 
          resolution: resMatch ? Array.from(new Set(resMatch)).join(',') : "", 
          lastVol: parsedVol, 
          date: new Date().toISOString(), 
          id: Date.now() + Math.random() 
        };

        // [최적화 1 적용] Map에서 즉시(0.0001초) 찾아냅니다.
        if (titleMap.has(normalizedNewTitle)) {
            const existingIdx = titleMap.get(normalizedNewTitle);
            currentList[existingIdx] = { ...currentList[existingIdx], ...bookData };
        } else {
            // [최적화 2 적용] 무거운 unshift 대신 가벼운 push 사용
            newBooks.push(bookData);
            // 6만 건의 새 데이터 안에서 중복이 발생할 수도 있으니 Map에도 등록
            titleMap.set(normalizedNewTitle, -1); 
        }
      });

      // [최적화 3] 마지막에 배열 합치기
      // 기존 unshift처럼 최신 항목이 위로 오게 하려면, 새 책들을 뒤집은(reverse) 후 기존 목록 앞에 붙이면 됩니다.
      currentList = [...newBooks.reverse(), ...currentList];

      let typeNameKOR = targetType === 'exclude' ? '제외' : (targetType === 'complete' ? '완결' : '미완');
      let alertMsg = `✅ [${typeNameKOR}] 타입으로 일괄 저장이 완료되었습니다.`;
      if (skippedCount > 0) alertMsg += `\n(단, 제목을 식별할 수 없는 ${skippedCount}개의 항목은 제외됨)`;

      saveWithUndo(currentList, alertMsg);
      
      document.getElementById('bulkInput').value = ''; 
      const bulkPreview = document.getElementById('bulkPreview');
      if (bulkPreview) bulkPreview.style.display = 'none';

      // 버튼 상태 원상복구
      btn.innerText = originalBtnText;
      btn.style.pointerEvents = 'auto';
    });
  }, 50); // 렌더링에 50ms 양보
};

document.body.onclick = (e) => {
  const id = parseFloat(e.target.dataset.id);
  const site = e.target.dataset.site;
  const filterWord = e.target.dataset.filter; 

  if (id && e.target.classList.contains('btn-del')) {
    chrome.storage.local.get({ bookList: [] }, (data) => {
      const list = Array.isArray(data.bookList) ? data.bookList : [];
      saveWithUndo(list.filter(b => b.id !== id), null);
    });
  } else if (id && e.target.classList.contains('btn-save')) {
    chrome.storage.local.get({ bookList: [] }, (data) => {
      const list = Array.isArray(data.bookList) ? data.bookList : [];
      const idx = list.findIndex(b => b.id === id);
      const row = e.target.closest('tr');
      if (idx > -1) {
        const newTitle = row.querySelector('.edit-title').value.trim();
        if (!newTitle) { showInfoToast('❌ 제목은 비워둘 수 없습니다!', true); return; }

        list[idx] = { 
            ...list[idx], 
            type: row.querySelector('.edit-type').value, 
            title: newTitle, 
            resolution: row.querySelector('.edit-res').value.trim(), 
            lastVol: row.querySelector('.edit-vol').value.trim(),
            date: new Date().toISOString() 
        };
        saveWithUndo(list, '✅ 수정이 완료되었습니다.');
      }
    });
  } else if (site) {
    chrome.storage.local.get({ allowedSites: [] }, (data) => {
      const sites = Array.isArray(data.allowedSites) ? data.allowedSites : [];
      const newSites = sites.filter(s => {
          const sUrl = typeof s === 'string' ? s : s.url;
          return sUrl !== site;
      });
      chrome.storage.local.set({ allowedSites: newSites }, renderSites);
    });
  } else if (filterWord) {
    chrome.storage.local.get({ filterWords: [] }, (data) => {
        const filters = Array.isArray(data.filterWords) ? data.filterWords : [];
        const newFilters = filters.filter(f => f !== filterWord);
        chrome.storage.local.set({ filterWords: newFilters }, renderFilters);
    });
  }
};

async function loadReleaseHistory() {
    const container = document.getElementById('releaseHistoryContainer');
    if (container.dataset.loaded === "true") return; 

    try {
        const response = await fetch('https://api.github.com/repos/dongkkase/Chrome_Library_Management/releases');
        if (!response.ok) throw new Error('GitHub API 응답 오류');
        const releases = await response.json();

        if (releases.length === 0) {
            container.innerHTML = '<div style="text-align: center; color: var(--text-muted); padding: 30px;">등록된 업데이트 내역이 없습니다.</div>';
            return;
        }

        let html = '';
        releases.forEach(rel => {
            const date = new Date(rel.published_at).toLocaleDateString('ko-KR');
            
            let lines = (rel.body || '').split('\n');
            let htmlLines = [];
            let inList = false;

            lines.forEach(line => {
                let trimmedLine = line.trimRight();
                
                let safeLine = trimmedLine.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                safeLine = safeLine.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
                
                let h3Match = safeLine.match(/^\s*###\s+(.*)/);
                let h2Match = safeLine.match(/^\s*##\s+(.*)/);
                let h1Match = safeLine.match(/^\s*#\s+(.*)/);
                let listMatch = safeLine.match(/^(\s*)[-*]\s+(.*)/);

                if (h3Match) {
                    if (inList) { htmlLines.push('</ul>'); inList = false; }
                    htmlLines.push('<h4>' + h3Match[1] + '</h4>');
                } else if (h2Match) {
                    if (inList) { htmlLines.push('</ul>'); inList = false; }
                    htmlLines.push('<h3>' + h2Match[1] + '</h3>');
                } else if (h1Match) {
                    if (inList) { htmlLines.push('</ul>'); inList = false; }
                    htmlLines.push('<h3>' + h1Match[1] + '</h3>');
                } else if (listMatch) {
                    if (!inList) { htmlLines.push('<ul>'); inList = true; }
                    let indent = listMatch[1].length;
                    let text = listMatch[2];
                    let liClass = indent > 0 ? ' class="sub-li"' : '';
                    htmlLines.push(`<li${liClass}>${text}</li>`);
                } else if (safeLine.trim() === '') {
                    if (inList) { htmlLines.push('</ul>'); inList = false; }
                } else {
                    if (inList) { htmlLines.push('</ul>'); inList = false; }
                    htmlLines.push('<p>' + safeLine + '</p>');
                }
            });
            if (inList) htmlLines.push('</ul>');
            
            let bodyHtml = htmlLines.join('\n');

            html += `
                <div class="release-item">
                    <div class="release-version">
                        <span>🏷️ ${rel.name || rel.tag_name}</span>
                        <span class="release-date">${date}</span>
                    </div>
                    <div class="release-body">${bodyHtml}</div>
                </div>
            `;
        });
        container.innerHTML = html;
        container.dataset.loaded = "true";
    } catch (error) {
        container.innerHTML = `<div style="text-align: center; color: #dc3545; padding: 30px;">오류가 발생했습니다.<br>${error.message}</div>`;
    }
}

document.addEventListener('DOMContentLoaded', () => { 
    if (window.location.hash === '#sidepanel') {
        document.body.classList.add('side-panel-mode');
    }

    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
            e.target.classList.add('active');
            
            const targetId = e.target.getAttribute('data-target');
            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
            document.getElementById(targetId).classList.add('active');

            if (targetId === 'tab-history') {
                loadReleaseHistory();
            } else if (targetId === 'tab-backup') {
                renderSnapshots(); // 백업 탭 열릴 때 스냅샷 목록 갱신
            }
        });
    });

    const themeToggle = document.getElementById('themeToggle');
    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

    chrome.storage.local.get(['darkMode'], (data) => {
        let isDark = data.darkMode;
        if (isDark === undefined) {
            isDark = prefersDarkScheme.matches; 
        }
        themeToggle.checked = isDark;
        if (isDark) document.body.classList.add('dark-mode');
    });

    themeToggle.addEventListener('change', (e) => {
        const isDark = e.target.checked;
        if (isDark) document.body.classList.add('dark-mode');
        else document.body.classList.remove('dark-mode');
        chrome.storage.local.set({ darkMode: isDark });
    });

    chrome.storage.local.get({ lastBackup: null, sortOption: 'id_desc', lastBulkType: 'exclude' }, (data) => {
        const sortSelect = document.getElementById('sortSelect');
        if (sortSelect) sortSelect.value = data.sortOption;
        
        const bulkTypeSelect = document.getElementById('bulkTypeSelect');
        if (bulkTypeSelect) {
            bulkTypeSelect.value = data.lastBulkType;
            bulkTypeSelect.addEventListener('change', (e) => {
                chrome.storage.local.set({ lastBulkType: e.target.value });
            });
        }

        renderList('', true); 
        renderSites();
        renderFilters(); 
        renderSnapshots();

        const timeSpan = document.getElementById('lastBackupTime');
        if (timeSpan) {
            if (data.lastBackup) {
                timeSpan.innerText = `최근 백업: ${data.lastBackup}`;
            } else {
                timeSpan.innerText = `최근 백업: 기록 없음`;
            }
        }
    });

    // 라이브 타입 변경 색상 반영을 위한 이벤트 리스너
    if (listBody) {
        listBody.addEventListener('change', (e) => {
            if (e.target.classList.contains('edit-type')) {
                e.target.setAttribute('data-type', e.target.value);
            }
        });
    }

    const addSiteBtn = document.getElementById('addSiteBtn');
    if (addSiteBtn) {
      addSiteBtn.onclick = () => {
        const siteInput = document.getElementById('siteInput');
        if (!siteInput) return;
        const val = siteInput.value.trim().replace(/^https?:\/\//, '').split('/')[0];
        if (val) {
          chrome.storage.local.get({ allowedSites: [] }, (data) => { 
            const currentSites = Array.isArray(data.allowedSites) ? data.allowedSites : [];
            const exists = currentSites.some(s => (typeof s === 'string' ? s : s.url) === val);
            if (!exists) {
              chrome.storage.local.set({ allowedSites: [...currentSites, { url: val, detailSelector: "" }] }, () => { 
                siteInput.value = ''; 
                renderSites(); 
              });
            } else {
              showInfoToast('❌ 이미 등록된 사이트입니다.', true);
            }
          });
        }
      };
    }

    const addFilterBtn = document.getElementById('addFilterBtn');
    if (addFilterBtn) {
        addFilterBtn.onclick = () => {
            const filterInput = document.getElementById('filterInput');
            if (!filterInput) return;
            const val = filterInput.value.trim();
            if (val) {
                chrome.storage.local.get({ filterWords: [] }, (data) => {
                    const currentFilters = Array.isArray(data.filterWords) ? data.filterWords : [];
                    if (!currentFilters.includes(val)) {
                        chrome.storage.local.set({ filterWords: [...currentFilters, val] }, () => {
                            filterInput.value = '';
                            renderFilters();
                        });
                    } else {
                        showInfoToast('❌ 이미 등록된 금지어입니다.', true);
                    }
                });
            }
        };
    }

    const searchInput = document.getElementById('searchInput');
    const clearSearchBtn = document.getElementById('clearSearchBtn');
    let searchDebounceTimer;
    if (searchInput) {
        if (clearSearchBtn) {
            clearSearchBtn.style.display = searchInput.value ? 'block' : 'none';
        }
        searchInput.oninput = (e) => {
            if (clearSearchBtn) {
                clearSearchBtn.style.display = e.target.value ? 'block' : 'none';
            }
            clearTimeout(searchDebounceTimer);
            searchDebounceTimer = setTimeout(() => {
                // 검색어 입력 시 1페이지로 리셋 (true 전달)
                renderList(e.target.value, true); 
            }, 300);
        };
    }

    if (clearSearchBtn && searchInput) {
        clearSearchBtn.onclick = () => {
            searchInput.value = '';
            clearSearchBtn.style.display = 'none';
            renderList('', true);
        };
    }

    const sortSelect = document.getElementById('sortSelect');
    if (sortSelect) {
        sortSelect.onchange = (e) => {
            chrome.storage.local.set({ sortOption: e.target.value }, () => {
                const filter = searchInput ? searchInput.value : '';
                // 💡 정렬 변경 시 1페이지로 리셋 (true 전달)
                renderList(filter, true); 
            });
        };
    }

    initVersionCheck();

    const uiCheckbox = document.getElementById('showDownloadUICheckbox');
    const confirmCheckbox = document.getElementById('autoConfirmCheckbox');
    const folderCheckbox = document.getElementById('autoFolderCheckbox'); 
    const focusLeftCheckbox = document.getElementById('focusLeftTabCheckbox');
    const slidePanelCheckbox = document.getElementById('openSlidePanelCheckbox');
    const connectEverythingCheckbox = document.getElementById('connectEverythingCheckbox');
    const showListQuickBtnCheckbox = document.getElementById('showListQuickBtnCheckbox');
    const showListQuickBtnHoverCheckbox = document.getElementById('showListQuickBtnHoverCheckbox');
    const customThemeCheckbox = document.getElementById('useCustomThemeCheckbox');
    const supportSingleCharCheckbox = document.getElementById('supportSingleCharCheckbox');

    chrome.storage.local.get({ showDownloadUI: true, autoConfirm: true, autoFolder: true, focusLeftTab: false, openSlidePanel: false, connectEverything: false, showListQuickBtn: false, showListQuickBtnHover: false, useCustomTheme: false, supportSingleChar: false }, (data) => {
        if (uiCheckbox) uiCheckbox.checked = data.showDownloadUI;
        if (confirmCheckbox) confirmCheckbox.checked = data.autoConfirm;
        if (folderCheckbox) folderCheckbox.checked = data.autoFolder; 
        if (focusLeftCheckbox) focusLeftCheckbox.checked = data.focusLeftTab;
        if (slidePanelCheckbox) slidePanelCheckbox.checked = data.openSlidePanel;
        if (connectEverythingCheckbox) connectEverythingCheckbox.checked = data.connectEverything;
        if (showListQuickBtnCheckbox) showListQuickBtnCheckbox.checked = data.showListQuickBtn;
        if (showListQuickBtnHoverCheckbox) showListQuickBtnHoverCheckbox.checked = data.showListQuickBtnHover;
        if (customThemeCheckbox) customThemeCheckbox.checked = data.useCustomTheme;
        if (supportSingleCharCheckbox) supportSingleCharCheckbox.checked = data.supportSingleChar;
    });
    
    // 옵션값 변경 시 저장 로직
    if (uiCheckbox) {
        uiCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ showDownloadUI: e.target.checked });
        });
    }
    if (supportSingleCharCheckbox) {
        supportSingleCharCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ supportSingleChar: e.target.checked });
        });
    }
    if (confirmCheckbox) {
        confirmCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ autoConfirm: e.target.checked });
        });
    }
    if (folderCheckbox) {
        folderCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ autoFolder: e.target.checked });
        });
    }
    // 왼쪽 탭 포커스 저장 로직 추가
    if (focusLeftCheckbox) {
        focusLeftCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ focusLeftTab: e.target.checked });
        });
    }
    // 슬라이드 패널 저장 로직 수정 (레이스 컨디션 방지 및 백그라운드 이관)
    if (slidePanelCheckbox) {
        slidePanelCheckbox.addEventListener('change', (e) => {
            const isSlide = e.target.checked;
            chrome.storage.local.set({ openSlidePanel: isSlide }, () => {
                if (isSlide) {
                    chrome.windows.getCurrent({ populate: false }, (currentWindow) => {
                        if (chrome.sidePanel && chrome.sidePanel.open) {
                            chrome.sidePanel.open({ windowId: currentWindow.id })
                                .then(() => {
                                    window.close();
                                })
                                .catch((err) => {
                                    console.error(err);
                                    window.close();
                                });
                        } else {
                            window.close();
                        }
                    });
                } else {
                    // 확장 프로그램 아이콘을 프로그래밍 방식으로 강제 클릭(트리거)하여 원래의 팝업 말풍선을 엽니다.
                    if (chrome.action && chrome.action.openPopup) {
                        chrome.action.setPopup({ popup: "options.html" }, () => {
                            chrome.action.openPopup()
                                .then(() => {
                                    window.close();
                                })
                                .catch((err) => {
                                    console.error("Popup trigger failed:", err);
                                    // API 지원이 안 되거나 권한 문제 시 기존 단독 창 모드로 대체
                                    chrome.windows.create({
                                        url: "options.html",
                                        type: "popup",
                                        width: 760,
                                        height: 850
                                    }, () => {
                                        window.close();
                                    });
                                });
                        });
                    } else {
                        // 하위 버전 크롬 호환용 폴백
                        chrome.windows.create({
                            url: "options.html",
                            type: "popup",
                            width: 760,
                            height: 850
                        }, () => {
                            window.close();
                        });
                    }
                }
            });
        });
    }

    if (connectEverythingCheckbox) {
        connectEverythingCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ connectEverything: e.target.checked });
        });
    }
    if (showListQuickBtnCheckbox) {
        showListQuickBtnCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ showListQuickBtn: e.target.checked });
        });
    }
    if (showListQuickBtnHoverCheckbox) {
        showListQuickBtnHoverCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ showListQuickBtnHover: e.target.checked });
        });
    }
    if (customThemeCheckbox) {
        customThemeCheckbox.addEventListener('change', (e) => {
            chrome.storage.local.set({ useCustomTheme: e.target.checked });
        });
    }
});

function initVersionCheck() {
  const manifest = chrome.runtime.getManifest();
  const currentVersion = manifest.version;
  const versionSpan = document.getElementById('current-version');
  if (versionSpan) versionSpan.textContent = "v" + currentVersion;

  const updateLink = document.getElementById('update-link');
  const manualBtn = document.getElementById('manual-check-btn');
  const statusMsg = document.getElementById('update-status-msg');
  
  const GITHUB_RAW_URL = "https://raw.githubusercontent.com/dongkkase/Chrome_Library_Management/main/version.json";

  const checkVersion = (isManual = false) => {
    if (isManual && statusMsg) {
      statusMsg.textContent = "⏳ 확인 중...";
      statusMsg.style.color = "#6c757d";
      statusMsg.style.display = "inline-block";
      if (updateLink) updateLink.style.display = "none";
    }

    chrome.storage.local.get(['lastVersionCheckTime', 'latestVersionInfo'], async (data) => {

      const now = Date.now();
      const updateInterval = 2 * 60 * 60 * 1000; 
      let latestData = data.latestVersionInfo;
      const shouldFetch = isManual || !data.lastVersionCheckTime || (now - data.lastVersionCheckTime > updateInterval);

      if (shouldFetch) {
        try {
          const response = await fetch(GITHUB_RAW_URL + "?t=" + now); 
          if (response.ok) {
            latestData = await response.json();
            chrome.storage.local.set({
              lastVersionCheckTime: now,
              latestVersionInfo: latestData
            });
          } else {
            throw new Error("서버 응답 오류");
          }
        } catch (error) {
          console.log("버전 체크 실패:", error);
          if (isManual && statusMsg) {
            statusMsg.textContent = "⚠️ 확인 실패 (인터넷 연결 오류)";
            statusMsg.style.color = "#dc3545";
            setTimeout(() => statusMsg.style.display = "none", 3000);
          }
          return;
        }
      }

      if (latestData && latestData.latest_version) {
        if (currentVersion !== latestData.latest_version) {
          if (updateLink) {
            updateLink.style.display = 'inline-block';
            updateLink.textContent = `📥 최신 파일 받기 (v${latestData.latest_version})`;
            
            updateLink.onclick = (e) => {
                e.preventDefault(); 
                
                const zipUrl = `https://github.com/dongkkase/Chrome_Library_Management/releases/download/v${latestData.latest_version}/libmanagement.zip`;             
                
                chrome.downloads.download({ url: zipUrl }, () => {
                    alert(`📥 [v${latestData.latest_version}] 업데이트 파일(.zip) 다운로드가 시작되었습니다!\n\n[수동 업데이트 방법]\n1. 다운로드된 압축 파일을 풉니다.\n2. 기존 확장프로그램 폴더에 파일들을 모두 덮어씌웁니다.\n3. 크롬 '확장프로그램 관리(chrome://extensions)' 페이지에서 [↻ 새로고침] 버튼을 누르면 적용됩니다.`);
                });
            };
          }
          if (statusMsg) statusMsg.style.display = "none";
          if (chrome.action && chrome.action.setBadgeText) {
              chrome.action.setBadgeText({ text: "NEW" });
              chrome.action.setBadgeBackgroundColor({ color: "#dc3545" });
          }
        } else {
          if (updateLink) updateLink.style.display = "none";
          if (isManual && statusMsg) {
            statusMsg.textContent = "✅ 최신 버전입니다.";
            statusMsg.style.color = "#28a745";
            setTimeout(() => statusMsg.style.display = "none", 3000); 
          }
          if (chrome.action && chrome.action.setBadgeText) chrome.action.setBadgeText({ text: "" });
        }
      }
    });
  };

  checkVersion(false);

  if (manualBtn) {
    manualBtn.addEventListener('click', () => {
      checkVersion(true);
    });
  }
}


// ============================================================================
// [신규 추가] 실시간 데이터 동기화 리스너
// 우클릭 메뉴 등 외부(백그라운드)에서 데이터가 변경되었을 때, 
// 열려있는 슬라이드 패널(또는 옵션창)의 리스트를 즉시 새로고침합니다.
// ============================================================================
chrome.storage.onChanged.addListener((changes, areaName) => {
    if (areaName === 'local' && changes.bookList) {
        const searchInput = document.getElementById('searchInput');
        const filter = searchInput ? searchInput.value : '';
        
        // 검색어가 유지된 상태로 현재 페이지 위치에서 리스트를 다시 그립니다.
        renderList(filter, false);
    }
});


// 누락 권수 관리 팝오버 초기화 및 이벤트 리스너 추가
let volPopover = document.getElementById('missingPopover');
if (!volPopover) {
    volPopover = document.createElement('div');
    volPopover.id = 'missingPopover';
    document.body.appendChild(volPopover);
    
    // 팝오버 외부 클릭 시 닫기
    document.addEventListener('click', (e) => {
        if (!volPopover.contains(e.target) && !e.target.closest('.missing-badge')) {
            volPopover.style.display = 'none';
        }
    });
}

// 리스트 내의 누락 배지 클릭 감지
if (listBody) {
    listBody.addEventListener('click', (e) => {
        const badge = e.target.closest('.missing-badge');
        if (badge) {
            const id = parseFloat(badge.dataset.id);
            openMissingPopover(id, badge);
        }
    });
}

function openMissingPopover(bookId, badgeElement) {
    chrome.storage.local.get({ bookList: [] }, (data) => {
        const list = data.bookList;
        const book = list.find(b => b.id === bookId);
        if (!book) return;

        const lastVol = parseInt(book.lastVol, 10);
        if (isNaN(lastVol) || lastVol <= 0) {
            showInfoToast('❌ 권수를 먼저 숫자로 입력하고 [수정] 버튼으로 저장한 뒤에 이용해주세요.', true);
            return;
        }

        let missingVols = book.missingVols || [];

        // 팝오버 내부 HTML 구성 (입력된 최대 권수까지 번호표 렌더링)
        volPopover.innerHTML = `
            <div class="popover-header">
                <span style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;">${book.title} (총 ${lastVol}권)</span>
                <button id="closePopoverBtn" style="background:transparent; color:var(--text); padding:0; margin-left:5px; font-size:14px; box-shadow:none; cursor:pointer;">✕</button>
            </div>
            <div style="font-size:11px; color:var(--text-muted); margin-bottom:8px;">빈틈이 발생한 누락 번호를 클릭하세요.</div>
            <div class="vol-grid">
                ${Array.from({length: lastVol}, (_, i) => i + 1).map(v => `
                    <div class="vol-item ${missingVols.includes(v) ? 'missing' : ''}" data-vol="${v}">${v}</div>
                `).join('')}
            </div>
        `;

        // 클릭된 배지 위치를 계산하여 팝오버 띄우기
        const rect = badgeElement.getBoundingClientRect();
        volPopover.style.display = 'block';
        volPopover.style.top = `${rect.bottom + window.scrollY + 8}px`;
        let leftPos = rect.left + window.scrollX - 180;
        if (leftPos < 10) leftPos = 10; // 화면 왼쪽 벗어남 방지
        volPopover.style.left = `${leftPos}px`;

        document.getElementById('closePopoverBtn').onclick = () => volPopover.style.display = 'none';
        
        // 개별 번호 클릭 시 토글 및 자동 저장
        volPopover.querySelectorAll('.vol-item').forEach(item => {
            item.onclick = (e) => {
                const vol = parseInt(e.target.dataset.vol, 10);
                if (e.target.classList.contains('missing')) {
                    e.target.classList.remove('missing');
                    missingVols = missingVols.filter(v => v !== vol);
                } else {
                    e.target.classList.add('missing');
                    missingVols.push(vol);
                }
                
                // 변경된 배열을 저장소에 업데이트 (저장 즉시 onChanged 이벤트로 인해 리스트 배지가 업데이트됨)
                const updatedList = list.map(b => b.id === bookId ? { ...b, missingVols } : b);
                chrome.storage.local.set({ bookList: updatedList }); 
            };
        });
    });
}