popup.js

/**
 * TabSave - popup.js
 * 核心逻辑：加载标签页、读取书签树、检测重复、批量保存、i18n
 */

// ===== i18n 辅助 =====
function t(key, substitutions) {
  return chrome.i18n.getMessage(key, substitutions) || key;
}

/** 扫描 DOM 中 data-i18n / data-i18n-placeholder 属性并替换文本 */
function applyI18n() {
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    const msg = t(key);
    if (msg) el.textContent = msg;
  });
  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
    const key = el.getAttribute('data-i18n-placeholder');
    const msg = t(key);
    if (msg) el.placeholder = msg;
  });
}

// ===== DOM 引用 =====
const tabCountEl     = document.getElementById('tab-count');
const tabListEl      = document.getElementById('tab-list');
const folderSelect   = document.getElementById('folder-select');
const toggleNewBtn   = document.getElementById('toggle-new-folder');
const newFolderArea  = document.getElementById('new-folder-area');
const newFolderName  = document.getElementById('new-folder-name');
const newFolderParent= document.getElementById('new-folder-parent');
const dupSection     = document.getElementById('duplicate-section');
const dupListEl      = document.getElementById('duplicate-list');
const resultBar      = document.getElementById('result-bar');
const saveBtn        = document.getElementById('save-btn');

// ===== 状态 =====
let allTabs = [];
let bookmarkTree = [];
let folderMap = {};
let duplicates = [];

// ===== 初始化 =====
document.addEventListener('DOMContentLoaded', async () => {
  applyI18n();
  await Promise.all([loadTabs(), loadBookmarks()]);
  checkDuplicates();
  updateSaveBtn();
});

// ===== 加载标签页 =====
async function loadTabs() {
  const tabs = await chrome.tabs.query({ currentWindow: true });
  allTabs = tabs.filter(tab => tab.url && /^https?:\/\//i.test(tab.url));

  tabCountEl.textContent = t('tabCount', [String(allTabs.length)]);

  if (allTabs.length === 0) {
    tabListEl.innerHTML = '';
    const emptyDiv = document.createElement('div');
    emptyDiv.className = 'loading';
    emptyDiv.textContent = t('noTabs');
    tabListEl.appendChild(emptyDiv);
    return;
  }

  tabListEl.innerHTML = '';
  allTabs.forEach(tab => {
    const item = document.createElement('div');
    item.className = 'tab-item';

    if (tab.favIconUrl && tab.favIconUrl.startsWith('http')) {
      const img = document.createElement('img');
      img.className = 'tab-favicon';
      img.src = tab.favIconUrl;
      img.alt = '';
      img.onerror = () => { img.style.display = 'none'; };
      item.appendChild(img);
    } else {
      const placeholder = document.createElement('div');
      placeholder.className = 'tab-favicon-placeholder';
      item.appendChild(placeholder);
    }

    const title = tab.title || tab.url;
    const url   = tab.url;

    const info = document.createElement('div');
    info.className = 'tab-info';
    const titleEl = document.createElement('div');
    titleEl.className = 'tab-title';
    titleEl.title = title;
    titleEl.textContent = title;
    const urlEl = document.createElement('div');
    urlEl.className = 'tab-url';
    urlEl.title = url;
    urlEl.textContent = url;
    info.appendChild(titleEl);
    info.appendChild(urlEl);
    item.appendChild(info);

    tabListEl.appendChild(item);
  });
}

// ===== 加载书签树 =====
async function loadBookmarks() {
  const tree = await chrome.bookmarks.getTree();
  bookmarkTree = tree;
  folderMap = {};
  collectFolders(tree, folderMap);

  folderSelect.innerHTML = '';
  const defOpt = document.createElement('option');
  defOpt.value = '';
  defOpt.textContent = t('folderPlaceholder');
  folderSelect.appendChild(defOpt);

  newFolderParent.innerHTML = '';
  const rootOpt = document.createElement('option');
  rootOpt.value = '';
  rootOpt.textContent = t('parentFolderRoot');
  newFolderParent.appendChild(rootOpt);

  buildFolderOptions(tree, folderSelect, 0);
  buildFolderOptions(tree, newFolderParent, 0);
}

function collectFolders(nodes, map) {
  nodes.forEach(node => {
    if (!node.url) {
      map[node.id] = node;
      if (node.children) collectFolders(node.children, map);
    }
  });
}

function buildFolderOptions(nodes, selectEl, depth) {
  nodes.forEach(node => {
    if (!node.url) {
      if (node.id === '0') {
        if (node.children) buildFolderOptions(node.children, selectEl, depth);
        return;
      }
      const indent = '\u00A0\u00A0'.repeat(depth);
      const option = document.createElement('option');
      option.value = node.id;
      option.textContent = indent + (depth > 0 ? '\uD83D\uDCC1 ' : '') + (node.title || t('noTitle'));
      selectEl.appendChild(option);
      if (node.children) buildFolderOptions(node.children, selectEl, depth + 1);
    }
  });
}

// ===== 新建文件夹切换 =====
toggleNewBtn.addEventListener('click', () => {
  const isHidden = newFolderArea.classList.contains('hidden');
  newFolderArea.classList.toggle('hidden', !isHidden);
  toggleNewBtn.textContent = isHidden ? t('cancelNewFolder') : t('newFolder');
  if (!isHidden) {
    checkDuplicates();
  } else {
    hideDuplicates();
  }
  updateSaveBtn();
});

// ===== 检测重复 =====
folderSelect.addEventListener('change', () => {
  // 文件夹变了，重置 saveSucceeded 允许再次保存
  saveSucceeded = false;
  checkDuplicates();
  updateSaveBtn();
});

newFolderName.addEventListener('input', () => {
  saveSucceeded = false;
  updateSaveBtn();
});

let checkVersion = 0;

async function checkDuplicates() {
  const folderId = folderSelect.value;
  const usingNewFolder = !newFolderArea.classList.contains('hidden');
  if (!folderId || usingNewFolder) {
    hideDuplicates();
    return;
  }

  const version = ++checkVersion;
  const children = await chrome.bookmarks.getChildren(folderId);
  if (version !== checkVersion) return;

  const existingUrls = {};
  children.forEach(bm => {
    if (bm.url) existingUrls[bm.url] = bm;
  });

  duplicates = allTabs
    .filter(tab => existingUrls[tab.url])
    .map(tab => ({ tab, existing: existingUrls[tab.url] }));

  if (duplicates.length === 0) {
    hideDuplicates();
    return;
  }

  dupListEl.innerHTML = '';
  duplicates.forEach(({ tab }) => {
    const item = document.createElement('div');
    item.className = 'dup-item';
    const icon = document.createElement('span');
    icon.className = 'dup-icon';
    icon.textContent = '\u26A0';
    const titleEl = document.createElement('span');
    titleEl.className = 'dup-title';
    titleEl.title = tab.url;
    titleEl.textContent = tab.title || tab.url;
    item.appendChild(icon);
    item.appendChild(titleEl);
    dupListEl.appendChild(item);
  });

  dupSection.classList.remove('hidden');
}

function hideDuplicates() {
  duplicates = [];
  dupSection.classList.add('hidden');
}

// ===== 更新保存按钮状态 =====
function updateSaveBtn() {
  if (saveSucceeded) {
    saveBtn.disabled = true;
    return;
  }
  if (allTabs.length === 0) {
    saveBtn.disabled = true;
    return;
  }
  const usingNewFolder = !newFolderArea.classList.contains('hidden');
  if (usingNewFolder) {
    saveBtn.disabled = newFolderName.value.trim() === '';
  } else {
    saveBtn.disabled = folderSelect.value === '';
  }
}

// ===== 按钮 SVG 模板 =====
const SAVE_BTN_SVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M17 3H7C5.9 3 5 3.9 5 5V21L12 18L19 21V5C19 3.9 18.1 3 17 3Z" fill="white"/></svg>';

function setSaveBtnText(msgKey) {
  saveBtn.innerHTML = '';
  const svgWrapper = document.createElement('span');
  svgWrapper.innerHTML = SAVE_BTN_SVG;
  saveBtn.appendChild(svgWrapper.firstChild);
  const span = document.createElement('span');
  span.textContent = t(msgKey);
  saveBtn.appendChild(span);
}

let saveSucceeded = false;

// ===== 保存逻辑 =====
saveBtn.addEventListener('click', async () => {
  if (saveSucceeded) return;

  saveBtn.disabled = true;
  saveBtn.classList.add('saving');
  setSaveBtnText('saving');
  resultBar.classList.add('hidden');

  let succeeded = false;

  try {
    let targetFolderId = folderSelect.value;

    const usingNewFolder = !newFolderArea.classList.contains('hidden');
    if (usingNewFolder) {
      const name = newFolderName.value.trim();
      if (!name) {
        showResult('error', t('errorNoName'));
        return;
      }
      const parentId = newFolderParent.value || undefined;
      const newFolder = await chrome.bookmarks.create({ parentId, title: name });
      targetFolderId = newFolder.id;
      await loadBookmarks();
      folderSelect.value = newFolder.id;
      newFolderArea.classList.add('hidden');
      toggleNewBtn.textContent = t('newFolder');
    }

    if (!targetFolderId) {
      showResult('error', t('errorNoFolder'));
      return;
    }

    const children = await chrome.bookmarks.getChildren(targetFolderId);
    const existingMap = {};
    children.forEach(bm => {
      if (bm.url) existingMap[bm.url] = bm;
    });

    const dupAction = document.querySelector('input[name="dup-action"]:checked')?.value || 'skip';

    let savedCount     = 0;
    let skippedCount   = 0;
    let overwriteCount = 0;

    for (const tab of allTabs) {
      const existing = existingMap[tab.url];
      if (existing) {
        if (dupAction === 'skip') {
          skippedCount++;
        } else if (dupAction === 'overwrite') {
          await chrome.bookmarks.update(existing.id, { title: tab.title || tab.url });
          overwriteCount++;
        }
        continue;
      }
      await chrome.bookmarks.create({
        parentId: targetFolderId,
        title: tab.title || tab.url,
        url: tab.url,
      });
      savedCount++;
    }

    const parts = [];
    if (savedCount > 0)     parts.push(t('resultSaved', [String(savedCount)]));
    if (overwriteCount > 0) parts.push(t('resultUpdated', [String(overwriteCount)]));
    if (skippedCount > 0)   parts.push(t('resultSkipped', [String(skippedCount)]));
    const msg = parts.length > 0 ? parts.join(t('resultJoiner')) : t('resultNone');
    showResult('success', msg);

    succeeded = true;
    saveSucceeded = true;

    hideDuplicates();

  } catch (err) {
    showResult('error', t('errorSaveFailed', [err.message]));
  } finally {
    saveBtn.classList.remove('saving');
    setSaveBtnText('saveBtn');
    if (succeeded) {
      saveBtn.disabled = true;
    } else {
      updateSaveBtn();
    }
  }
});

// ===== 工具函数 =====
function showResult(type, message) {
  resultBar.textContent = message;
  resultBar.className = `result-bar ${type}`;
}