document.addEventListener("DOMContentLoaded", () => {
    const tableBody = document.querySelector("#replacementsTable tbody");
    const originalInput = document.getElementById("original");
    const replacementInput = document.getElementById("replacement");
    const addButton = document.getElementById("addButton");
  
    // 載入詞語對
    function loadReplacements() {
      chrome.storage.local.get("replacements", (data) => {
        const replacements = data.replacements || {};
        tableBody.innerHTML = "";
        for (const [key, value] of Object.entries(replacements)) {
          addRow(key, value);
        }
      });
    }
  
    // 新增表格行
    function addRow(original, replacement) {
      const row = document.createElement("tr");
      row.innerHTML = `
        <td>${original}</td>
        <td>${replacement}</td>
        <td>
          <button class="deleteButton">刪除</button>
        </td>
      `;
      row.querySelector(".deleteButton").addEventListener("click", () => {
        deleteReplacement(original);
      });
      tableBody.appendChild(row);
    }
  
    // 新增詞語對
    addButton.addEventListener("click", () => {
      const original = originalInput.value.trim();
      const replacement = replacementInput.value.trim();
      if (!original || !replacement) return alert("請輸入有效的詞語！");
      chrome.storage.local.get("replacements", (data) => {
        const replacements = data.replacements || {};
        replacements[original] = replacement;
        chrome.storage.local.set({ replacements }, loadReplacements);
      });
      originalInput.value = "";
      replacementInput.value = "";
    });
  
    // 刪除詞語對
    function deleteReplacement(original) {
      chrome.storage.local.get("replacements", (data) => {
        const replacements = data.replacements || {};
        delete replacements[original];
        chrome.storage.local.set({ replacements }, loadReplacements);
      });
    }
  
    loadReplacements();
  });