(function(){

  const SEA_API = "https://seaformslibrary.david-ang-sea.workers.dev";

  const listEl = document.getElementById("list");
  const statusEl = document.getElementById("status");
  const searchEl = document.getElementById("search");
  const typeFilter = document.getElementById("fileTypeFilter");
  const pageSizeEl = document.getElementById("pageSize");
  const prevBtn = document.getElementById("prevPage");
  const nextBtn = document.getElementById("nextPage");
  const pageInfo = document.getElementById("pageInfo");
  const downloadSelectedBtn = document.getElementById("btnDownloadSel");

  if(
    !listEl ||
    !statusEl ||
    !searchEl ||
    !typeFilter ||
    !pageSizeEl ||
    !prevBtn ||
    !nextBtn ||
    !pageInfo ||
    !downloadSelectedBtn
  ){
    console.warn("Forms Library: Required HTML elements are missing.");
    return;
  }

  let allFiles = [];
  let currentPage = 1;
  let pageSize = Number(pageSizeEl.value) || 10;

  async function loadFiles(){
    try{
      statusEl.textContent = "Loading forms...";

      const res = await fetch(`${SEA_API}/list`);

      if(!res.ok){
        throw new Error("Failed loading files");
      }

      const data = await res.json();
      allFiles = data.files || [];

      renderList();

      statusEl.textContent = allFiles.length
        ? `${allFiles.length} file(s) loaded`
        : "No file available.";

    }catch(err){
      console.error(err);
      statusEl.textContent = "Unable to load forms library.";
      listEl.innerHTML = "";
    }
  }

  function renderList(){
    const keyword = searchEl.value.toLowerCase().trim();
    const selectedType = typeFilter.value;

    const filtered = allFiles.filter(file => {
      const name = (file.name || "").toLowerCase();

      const matchKeyword = name.includes(keyword);

      let matchType = true;

      if(selectedType === "pdf"){
        matchType = name.endsWith(".pdf");
      }

      if(selectedType === "doc"){
        matchType =
          name.endsWith(".doc") ||
          name.endsWith(".docx");
      }

      if(selectedType === "xls"){
        matchType =
          name.endsWith(".xls") ||
          name.endsWith(".xlsx");
      }

      if(selectedType === "img"){
        matchType =
          name.endsWith(".jpg") ||
          name.endsWith(".jpeg") ||
          name.endsWith(".png") ||
          name.endsWith(".webp");
      }

      return matchKeyword && matchType;
    });

    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));

    if(currentPage > totalPages){
      currentPage = totalPages;
    }

    const start = (currentPage - 1) * pageSize;
    const paged = filtered.slice(start, start + pageSize);

    if(!paged.length){
      listEl.innerHTML = `
        <div style="padding:14px;font-size:13px;opacity:.7;">
          No file available.
        </div>
      `;
      updatePager(filtered.length);
      return;
    }

    listEl.innerHTML = `
      <div class="listHeader">
        <div></div>
        <div>#</div>
        <div>File Name</div>
        <div>Action</div>
      </div>

      ${paged.map((file,index)=>{
        const name = file.name || "Untitled";
        const lowerName = name.toLowerCase();
        const url = `${SEA_API}/file/${encodeURIComponent(name)}`;

        const viewUrl =
          lowerName.endsWith(".doc") || lowerName.endsWith(".docx")
            ? `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`
            : url;

        const label =
          lowerName.endsWith(".pdf") ? "PDF" :
          lowerName.endsWith(".doc") || lowerName.endsWith(".docx") ? "Word Doc" :
          lowerName.endsWith(".xls") || lowerName.endsWith(".xlsx") ? "Excel" :
          lowerName.endsWith(".jpg") || lowerName.endsWith(".jpeg") || lowerName.endsWith(".png") || lowerName.endsWith(".webp") ? "Image" :
          "File";

        return `
          <div class="listRow">
            <div class="chkCell">
              <input type="checkbox" class="fileCheck" data-url="${url}">
            </div>

            <div class="num">${start + index + 1}</div>

            <div>
              <div class="key">${escapeHtml(name)}</div>
              <div class="meta">${label} ${file.size ? "• " + formatSize(file.size) : ""}</div>
            </div>

            <div class="actions">
              <a class="linkBtn" href="${viewUrl}" target="_blank" rel="noopener">
                View
              </a>

              <a class="linkBtn" href="${url}" download>
                Download
              </a>
            </div>
          </div>
        `;
      }).join("")}
    `;

    updatePager(filtered.length);
  }

  function updatePager(total){
    const totalPages = Math.max(1, Math.ceil(total / pageSize));

    pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;

    prevBtn.disabled = currentPage <= 1;
    nextBtn.disabled = currentPage >= totalPages;
  }

  function formatSize(bytes){
    if(!bytes) return "";

    const kb = bytes / 1024;

    if(kb < 1024){
      return `${kb.toFixed(1)} KB`;
    }

    return `${(kb / 1024).toFixed(1)} MB`;
  }

  function escapeHtml(text){
    return String(text)
      .replace(/&/g,"&amp;")
      .replace(/</g,"&lt;")
      .replace(/>/g,"&gt;")
      .replace(/"/g,"&quot;")
      .replace(/'/g,"&#039;");
  }

  searchEl.addEventListener("input", function(){
    currentPage = 1;
    renderList();
  });

  typeFilter.addEventListener("change", function(){
    currentPage = 1;
    renderList();
  });

  pageSizeEl.addEventListener("change", function(){
    pageSize = Number(this.value) || 10;
    currentPage = 1;
    renderList();
  });

  prevBtn.addEventListener("click", function(){
    if(currentPage > 1){
      currentPage--;
      renderList();
    }
  });

  nextBtn.addEventListener("click", function(){
    currentPage++;
    renderList();
  });

  downloadSelectedBtn.addEventListener("click", function(){
    const selected = document.querySelectorAll(".fileCheck:checked");

    if(!selected.length){
      alert("Please select at least one file.");
      return;
    }

    selected.forEach(chk => {
      window.open(chk.dataset.url, "_blank");
    });
  });

  loadFiles();

})();