// ==== Item List Panel (with footer total) ====
async function itemListPanel() {
  try {
    const res = await getData(`${host}api622.php?action=list_all&fields=id,name,flag,timestamp,board`);
    const items = res.data || [];
    const footerContent = `Total: ${items.length}`;

    createPanel("itemListPanel", "CC", "ctc", 500, 600, {
      bodyContent: renderItemList(items, ""),
      noFooter: false,
      title: "Item List",
      footerContent,
      resizeAble: true,
    });

    const searchInput = document.getElementById("itemSearchInput");
    if (searchInput) searchInput.addEventListener("input", e => refreshItemListPanel(e.target.value));
  } catch (err) {
    createPanel("itemListPanel", "CC", "ctc", 400, 200, {
      bodyContent: `<div class="error">${err.message}</div>`,
      noFooter: true,
      title: "Item List",
      resizeAble: true,
    });
  }
}

// ==== Item List Panel (with footer total) ====
async function itemListPanel() {
  try {
    const res = await getData(`${host}api622.php?action=list_all&fields=id,name,flag,timestamp,board`);
    const items = res.data || [];
    const footerContent = `Total: ${items.length}`;

    createPanel("itemListPanel", "CC", "ctc", 500, 600, {
      bodyContent: renderItemList(items, ""),
      noFooter: false,
      title: "Item List",
      footerContent,
      resizeAble: true,
    });

    const searchInput = document.getElementById("itemSearchInput");
    if (searchInput) searchInput.addEventListener("input", e => refreshItemListPanel(e.target.value));
  } catch (err) {
    createPanel("itemListPanel", "CC", "ctc", 400, 200, {
      bodyContent: `<div class="error">${err.message}</div>`,
      noFooter: true,
      title: "Item List",
      resizeAble: true,
    });
  }
}

async function batchAddItemsPanel() {
  const formHTML = `
    <form id="batchAddItemForm">
      <div>
        <label for="batchItems">Item Data (JSON format):</label><br>
        <textarea id="batchItems" rows="10" cols="50" required></textarea>
      </div>
      <div>
        <small>Format: [{"id": "i1", "name": "Item1", "board":"B1","cup":"C1","bucket":"BU1","keeper":"K1"}, ...]</small>
      </div>
      <button type="submit">Add Items</button>
    </form>
  `;

  createPanel("batchAddItemPanel", "CC", "ctc", 600, 600, {
    bodyContent: formHTML,
    noFooter: true,
    title: "Batch Add Items",
    resizeAble: true,
  });

  const form = document.getElementById("batchAddItemForm");
  if (form) {
    form.addEventListener("submit", async e => {
      e.preventDefault();
      const itemsText = document.getElementById("batchItems").value;
      try {
        const items = JSON.parse(itemsText);
        if (!Array.isArray(items)) throw new Error("Input must be a JSON array");

        let successCount = 0, errorCount = 0;
        for (const item of items) {
          try {
            await postto(`${host}api622.php`, {
              id: item.id || "",
              name: item.name || "",
              board: item.board || "",
              cup: item.cup || "",
              bucket: item.bucket || "",
              keeper: item.keeper || ""
            });
            successCount++;
          } catch (err) {
            console.error("Error adding item:", err.message);
            errorCount++;
          }
        }
        closePanel("batchAddItemPanel");
        alert(`Batch add completed. Success: ${successCount}, Errors: ${errorCount}`);
        refreshItemListPanel();
      } catch (err) {
        alert("Batch error: " + err.message);
      }
    });
  }
}
async function userListLoad() {
  try {
    const res = await getData(`${host}aui.php?action=list`);
    window.allUsers = res.data || [];
    console.log("Loaded users:", window.allUsers);
  } catch (err) {
    console.error("Error loading users:", err.message);
    window.allUsers = [];
  }
}

function matchingItemUser(items, users) {
  return items.map(item => {
    const matchedUser = users.find(u => u.username === item.keeper || u.id === item.keeper);
    return {
      ...item,
      matchedUser: matchedUser ? `${matchedUser.name} (${matchedUser.username})` : "—"
    };
  });
}
async function itemUserPanel() {
  try {
    // Load users first if not loaded
    if (!window.allUsers) await userListLoad();

    // Load items
    const res = await getData(`${host}api622.php?action=list_all&fields=id,name,flag,timestamp,board,keeper`);
    const items = res.data || [];
    const merged = matchingItemUser(items, window.allUsers);

    const bodyHTML = `
      <div class="search-container">
        <input type="text" id="itemUserSearch" placeholder="Search..." />
      </div>
      <div id="itemUserList">
        ${merged.map(it => `
          <div class="userlist-entry">
            <div>
              <strong>${it.name}</strong> (${it.id})
              <div style="font-size:12px; color:#666;">
                Board: ${it.board}, Keeper: ${it.keeper} → ${it.matchedUser}
              </div>
            </div>
          </div>
        `).join("")}
      </div>
      <div style="margin-top:10px;font-size:12px;color:#666;">
        Total: ${merged.length}
      </div>
    `;

    createPanel("itemUserPanel", "CC", "ctc", 600, 600, {
      bodyContent: bodyHTML,
      noFooter: true,
      title: "Item ↔ User Matching",
      resizeAble: true,
    });

    // search filter
    const searchInput = document.getElementById("itemUserSearch");
    if (searchInput) {
      searchInput.addEventListener("input", e => {
        const term = e.target.value.toLowerCase();
        const filtered = merged.filter(it =>
          it.name?.toLowerCase().includes(term) ||
          it.id?.toLowerCase().includes(term) ||
          it.keeper?.toLowerCase().includes(term) ||
          it.matchedUser?.toLowerCase().includes(term)
        );
        document.getElementById("itemUserList").innerHTML = filtered.map(it => `
          <div class="userlist-entry">
            <div>
              <strong>${it.name}</strong> (${it.id})
              <div style="font-size:12px; color:#666;">
                Board: ${it.board}, Keeper: ${it.keeper} → ${it.matchedUser}
              </div>
            </div>
          </div>
        `).join("");
      });
    }
  } catch (err) {
    createPanel("itemUserPanel", "CC", "ctc", 400, 200, {
      bodyContent: `<div class="error">${err.message}</div>`,
      noFooter: true,
      title: "Item ↔ User Matching",
      resizeAble: true,
    });
  }
}