popup.js

const BLOCK_KEY = 'blockedTags';
const HIGHLIGHT_KEY = 'highlightTags';
const DEFAULT_BLOCK = ['AI'];
const DEFAULT_HIGHLIGHT = [];
const MAX_BLOCK = 10;
const MAX_HIGHLIGHT = 2;

const tagInput = document.getElementById('tagInput');
const addBlockBtn = document.getElementById('addBlockBtn');
const addHighlightBtn = document.getElementById('addHighlightBtn');
const blockList = document.getElementById('blockList');
const highlightList = document.getElementById('highlightList');
const blockCount = document.getElementById('blockCount');
const highlightCount = document.getElementById('highlightCount');

let blockTags = [];
let highlightTags = [];

// 从 storage 加载
chrome.storage.sync.get(
  { [BLOCK_KEY]: DEFAULT_BLOCK, [HIGHLIGHT_KEY]: DEFAULT_HIGHLIGHT },
  (result) => {
    blockTags = result[BLOCK_KEY] || [];
    highlightTags = result[HIGHLIGHT_KEY] || [];
    render();
  }
);

function save() {
  chrome.storage.sync.set({
    [BLOCK_KEY]: blockTags,
    [HIGHLIGHT_KEY]: highlightTags
  });
}

function renderList(ul, tags, colorClass) {
  ul.innerHTML = '';
  if (tags.length === 0) {
    const li = document.createElement('li');
    li.className = 'empty-msg';
    li.textContent = '暂无标签';
    ul.appendChild(li);
    return;
  }
  tags.forEach((tag, index) => {
    const li = document.createElement('li');
    li.className = colorClass;
    const span = document.createElement('span');
    span.className = 'tag-text';
    span.textContent = tag;
    const btn = document.createElement('button');
    btn.textContent = '✕';
    btn.title = '移除';
    btn.addEventListener('click', () => {
      tags.splice(index, 1);
      save();
      render();
    });
    li.appendChild(span);
    li.appendChild(btn);
    ul.appendChild(li);
  });
}

function render() {
  blockCount.textContent = `${blockTags.length}/${MAX_BLOCK}`;
  highlightCount.textContent = `${highlightTags.length}/${MAX_HIGHLIGHT}`;
  renderList(blockList, blockTags, 'color-red');
  renderList(highlightList, highlightTags, 'color-green');
}

function addTag(list, maxLen, val) {
  if (!val || list.includes(val)) return false;
  if (list.length >= maxLen) return false;
  // 不允许同时出现在两个列表中
  if (blockTags.includes(val) || highlightTags.includes(val)) return false;
  list.push(val);
  return true;
}

// 添加屏蔽标签
addBlockBtn.addEventListener('click', () => {
  const val = tagInput.value.trim();
  if (addTag(blockTags, MAX_BLOCK, val)) {
    save();
    render();
    tagInput.value = '';
  }
});

// 添加高亮标签
addHighlightBtn.addEventListener('click', () => {
  const val = tagInput.value.trim();
  if (addTag(highlightTags, MAX_HIGHLIGHT, val)) {
    save();
    render();
    tagInput.value = '';
  }
});

// 回车默认添加屏蔽
tagInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    const val = tagInput.value.trim();
    if (addTag(blockTags, MAX_BLOCK, val)) {
      save();
      render();
      tagInput.value = '';
    }
  }
});