const inscriptionIds = {
  chunk_0: "4bddd9e754125f06faf78a968c1ee6679836724a05f892f45ef7cb6eaffd7638i0",
  chunk_1: "19e0999b64721727d089ea2bfd1c9381881cb4d8695d1c433e06fcd62bd9278ei0",
  chunk_2: "613a746f66461ab3219b0943577fe1c9b6b689ddd5aed076104120220c829a4di0",
  chunk_3: "4dfa856001a26d0065a95328c0ad363e0d9ad1e8faedded40e979fb9eb74bd3ei0",
  chunk_4: "2d72d27fa499ce4792be4d0a4080eea989c5bbc9b6a89f0d1c755ea52ba906b9i0",
  chunk_5: "c829dcf080750c20cf5b4885b59d9cafea19ab5a5ede6fa87efd3578c446033fi0",
  chunk_6: "00a4b59c48ed6dd53baf9389db0c2096fc71b03349754147e38e6fb9d2d8bc7bi0",
  chunk_7: "b09b50aa25f6728df4588cc3d832378f595843e749b0384bdfb556b260da5288i0",
  chunk_8: "a7f05781360fc47d15f70394ce13e85b678b8143b942f90499b7ab195076bd65i0",
  chunk_9: "d9dcd73f452491b7e79af6506511cfa73bc9263d4aab33cf96a358af58e851b9i0",
  chunk_10:
    "1b4e20e16179ec9d46bb13dabb7d92416b42ba85ecbbe28e97264a864759ba5fi0",
};

const DEFAULT_BASE_URL = "/content/";

let baseUrl = DEFAULT_BASE_URL;
let mangaPages = [];
let currentPageIndex = -1;
let isLoading = false;
let totalPages = 0;

document.getElementById("settingsBtn").addEventListener("click", () => {
  const panel = document.getElementById("settingsPanel");
  panel.style.display =
    panel.style.display === "none" || !panel.style.display ? "block" : "none";
  document.getElementById("baseUrlInput").value = baseUrl;
});

document.getElementById("saveSettingsBtn").addEventListener("click", () => {
  const newBaseUrl = document.getElementById("baseUrlInput").value.trim();

  let shouldReload = false;

  if (newBaseUrl && newBaseUrl !== baseUrl) {
    baseUrl = newBaseUrl.endsWith("/") ? newBaseUrl : newBaseUrl + "/";
    shouldReload = true;
  }

  document.getElementById("settingsPanel").style.display = "none";

  if (shouldReload) {
    loadManga();
  }
});

document.getElementById("resetSettingsBtn").addEventListener("click", () => {
  baseUrl = DEFAULT_BASE_URL;
  document.getElementById("baseUrlInput").value = baseUrl;

  loadManga();
});

window.onload = () => {
  loadManga();
};

async function loadManga() {
  mangaPages = [];
  currentPageIndex = -1;
  isLoading = true;
  document.getElementById("loadingIndicator").classList.remove("hidden");

  try {
    const chunkPromises = [];

    for (let i = 0; i <= 10; i++) {
      const chunkKey = `chunk_${i}`;
      const url = baseUrl + inscriptionIds[chunkKey];

      console.log(`Fetching ${chunkKey} from: ${url}`);

      chunkPromises.push(
        fetch(url)
          .then((response) => {
            if (!response.ok) {
              throw new Error(`Failed to load ${chunkKey}: ${response.status}`);
            }
            return response.json();
          })
          .then((data) => {
            if (data && data.images) {
              console.log(
                `Successfully loaded ${chunkKey} with ${data.images.length} images`,
              );
              return data.images;
            }
            console.warn(`${chunkKey} has no images or invalid format`);
            return [];
          })
          .catch((error) => {
            console.error(`Error loading ${chunkKey}:`, error);
            return [];
          }),
      );
    }

    const chunkResults = await Promise.all(chunkPromises);

    chunkResults.forEach((images) => {
      mangaPages.push(...images);
    });

    console.log(`Total pages loaded: ${mangaPages.length}`);

    totalPages = mangaPages.length;

    if (totalPages > 0) {
      const img = new Image();
      img.onload = () => {
        document.getElementById("currentPage").src = img.src;
        document.getElementById("currentPage").className =
          totalPages > 1 ? "manga-page" : "manga-page cover";
        document.getElementById("pageNumber").textContent =
          totalPages > 1 ? `Pages 1-2 / ${totalPages * 2 - 2}` : "Cover";
        document.getElementById("loadingIndicator").classList.add("hidden");
        currentPageIndex = 0;
        isLoading = false;
      };
      img.onerror = () => {
        console.error("Failed to load the first page image");
        document.getElementById("loadingIndicator").classList.add("hidden");
        alert(
          "Failed to load the first page. Please check your connection or base URL.",
        );
        isLoading = false;
      };
      img.src = mangaPages[0];
    } else {
      document.getElementById("loadingIndicator").classList.add("hidden");
      alert(
        "No manga pages were loaded. Please check your connection or base URL.",
      );
      isLoading = false;
    }
  } catch (error) {
    console.error("Error loading manga:", error);
    document.getElementById("loadingIndicator").classList.add("hidden");
    alert(
      "Failed to load manga data. Please check your connection or base URL.",
    );
    isLoading = false;
  }
}

async function loadPage(index) {
  if (isLoading || index < 0 || index >= totalPages) return;

  isLoading = true;

  const pageWrapper = document.querySelector(".manga-page-wrapper");
  const currentImg = document.getElementById("currentPage");

  if (index === 0) {
    if (currentPageIndex > 0) {
      const staticOverlay = document.createElement("div");
      staticOverlay.className = "static-page-overlay";
      staticOverlay.style.backgroundImage = `url(${currentImg.src})`;
      staticOverlay.style.backgroundSize = "contain";
      staticOverlay.style.backgroundPosition = "center";
      staticOverlay.style.backgroundRepeat = "no-repeat";
      pageWrapper.appendChild(staticOverlay);

      const flipContainer = document.createElement("div");
      flipContainer.className = "flip-container";
      pageWrapper.appendChild(flipContainer);

      const flipPage = document.createElement("div");
      flipPage.className = "flip-page flip-page-cover";
      flipContainer.appendChild(flipPage);

      const flipFront = document.createElement("div");
      flipFront.className = "flip-page-front";
      flipPage.appendChild(flipFront);

      const flipBack = document.createElement("div");
      flipBack.className = "flip-page-back";
      flipPage.appendChild(flipBack);

      const frontContent = document.createElement("div");
      frontContent.className = "page-content cover-content";
      flipFront.appendChild(frontContent);

      const backContent = document.createElement("div");
      backContent.className = "page-content cover-content";
      flipBack.appendChild(backContent);

      const coverImage = new Image();
      coverImage.onload = () => {
        backContent.style.backgroundImage = `url(${coverImage.src})`;
        frontContent.style.backgroundImage = `url(${mangaPages[currentPageIndex]})`;

        setTimeout(() => {
          flipPage.classList.remove("flipped");

          setTimeout(() => {
            currentImg.src = mangaPages[0];
            currentImg.className = "manga-page cover";
            document.getElementById("pageNumber").textContent = "Cover";

            pageWrapper.removeChild(flipContainer);
            if (staticOverlay.parentNode) {
              pageWrapper.removeChild(staticOverlay);
            }
            currentPageIndex = index;
            isLoading = false;
          }, 800);
        }, 100);
      };
      coverImage.src = mangaPages[0];
    } else {
      const img = new Image();
      img.onload = () => {
        currentImg.src = img.src;
        currentImg.className = "manga-page cover";
        document.getElementById("pageNumber").textContent = "Cover";
        currentPageIndex = index;
        isLoading = false;
      };
      img.src = mangaPages[0];
    }
  } else if (currentPageIndex === 0 && index > 0) {
    const staticOverlay = document.createElement("div");
    staticOverlay.className = "static-page-overlay";
    staticOverlay.style.backgroundImage = `url(${currentImg.src})`;
    staticOverlay.style.backgroundSize = "contain";
    staticOverlay.style.backgroundPosition = "center";
    staticOverlay.style.backgroundRepeat = "no-repeat";
    pageWrapper.appendChild(staticOverlay);

    const flipContainer = document.createElement("div");
    flipContainer.className = "flip-container";
    pageWrapper.appendChild(flipContainer);

    const flipPage = document.createElement("div");
    flipPage.className = "flip-page flip-page-cover";
    flipContainer.appendChild(flipPage);

    const flipFront = document.createElement("div");
    flipFront.className = "flip-page-front";
    flipPage.appendChild(flipFront);

    const flipBack = document.createElement("div");
    flipBack.className = "flip-page-back";
    flipPage.appendChild(flipBack);

    const frontContent = document.createElement("div");
    frontContent.className = "page-content cover-content";
    flipFront.appendChild(frontContent);

    const backContent = document.createElement("div");
    backContent.className = "page-content cover-content";
    flipBack.appendChild(backContent);

    const coverImage = new Image();
    coverImage.onload = () => {
      frontContent.style.backgroundImage = `url(${coverImage.src})`;

      const nextPageImage = new Image();
      nextPageImage.onload = () => {
        backContent.style.backgroundImage = `url(${nextPageImage.src})`;

        setTimeout(() => {
          flipPage.classList.add("flipped");

          setTimeout(() => {
            currentImg.src = mangaPages[index];
            currentImg.className = "manga-page";
            document.getElementById("pageNumber").textContent =
              `Pages ${index * 2 - 1}-${index * 2} / ${totalPages * 2 - 2}`;

            pageWrapper.removeChild(flipContainer);
            if (staticOverlay.parentNode) {
              pageWrapper.removeChild(staticOverlay);
            }
            currentPageIndex = index;
            isLoading = false;
          }, 800);
        }, 100);
      };
      nextPageImage.src = mangaPages[index];
    };
    coverImage.src = currentImg.src;
  } else {
    if (index > currentPageIndex) {
      const rightOverlay = document.createElement("div");
      rightOverlay.className = "right-side-overlay";

      const rightHalfImage = currentImg.cloneNode(true);
      rightHalfImage.className = "right-half-image";
      rightOverlay.appendChild(rightHalfImage);

      currentImg.src = mangaPages[index];

      pageWrapper.appendChild(rightOverlay);

      const flipContainer = document.createElement("div");
      flipContainer.className = "flip-container";
      pageWrapper.appendChild(flipContainer);

      const flipPage = document.createElement("div");
      flipPage.className = "flip-page";
      flipContainer.appendChild(flipPage);

      const flipFront = document.createElement("div");
      flipFront.className = "flip-page-front";
      flipPage.appendChild(flipFront);

      const flipBack = document.createElement("div");
      flipBack.className = "flip-page-back";
      flipPage.appendChild(flipBack);

      const frontContent = document.createElement("div");
      frontContent.className = "page-content left-content";
      flipFront.appendChild(frontContent);

      const backContent = document.createElement("div");
      backContent.className = "page-content right-content";
      flipBack.appendChild(backContent);

      const currentPageImage = new Image();
      currentPageImage.onload = () => {
        frontContent.style.backgroundImage = `url(${currentPageImage.src})`;

        const nextPageImage = new Image();
        nextPageImage.onload = () => {
          backContent.style.backgroundImage = `url(${nextPageImage.src})`;

          setTimeout(() => {
            flipPage.classList.add("flipped");

            setTimeout(() => {
              document.getElementById("pageNumber").textContent =
                `Pages ${index * 2 - 1}-${index * 2} / ${totalPages * 2 - 2}`;

              pageWrapper.removeChild(flipContainer);
              if (rightOverlay.parentNode) {
                pageWrapper.removeChild(rightOverlay);
              }
              currentPageIndex = index;
              isLoading = false;
            }, 800);
          }, 100);
        };
        nextPageImage.src = mangaPages[index];
      };
      currentPageImage.src = mangaPages[currentPageIndex];
    } else {
      const leftOverlay = document.createElement("div");
      leftOverlay.className = "left-side-overlay";

      const leftHalfImage = currentImg.cloneNode(true);
      leftHalfImage.className = "left-half-image";
      leftOverlay.appendChild(leftHalfImage);

      currentImg.src = mangaPages[index];

      pageWrapper.appendChild(leftOverlay);

      const flipContainer = document.createElement("div");
      flipContainer.className = "flip-container";
      pageWrapper.appendChild(flipContainer);

      const flipPage = document.createElement("div");
      flipPage.className = "flip-page flipped";
      flipContainer.appendChild(flipPage);

      const flipFront = document.createElement("div");
      flipFront.className = "flip-page-front";
      flipPage.appendChild(flipFront);

      const flipBack = document.createElement("div");
      flipBack.className = "flip-page-back";
      flipPage.appendChild(flipBack);

      const frontContent = document.createElement("div");
      frontContent.className = "page-content left-content";
      flipFront.appendChild(frontContent);

      const backContent = document.createElement("div");
      backContent.className = "page-content right-content";
      flipBack.appendChild(backContent);

      const prevPageImage = new Image();
      prevPageImage.onload = () => {
        frontContent.style.backgroundImage = `url(${prevPageImage.src})`;

        const currentPageImage = new Image();
        currentPageImage.onload = () => {
          backContent.style.backgroundImage = `url(${currentPageImage.src})`;

          setTimeout(() => {
            flipPage.classList.remove("flipped");

            setTimeout(() => {
              document.getElementById("pageNumber").textContent =
                `Pages ${index * 2 - 1}-${index * 2} / ${totalPages * 2 - 2}`;

              pageWrapper.removeChild(flipContainer);
              if (leftOverlay.parentNode) {
                pageWrapper.removeChild(leftOverlay);
              }
              currentPageIndex = index;
              isLoading = false;
            }, 800);
          }, 100);
        };
        currentPageImage.src = mangaPages[currentPageIndex];
      };
      prevPageImage.src = mangaPages[index];
    }
  }
}

function nextPage() {
  loadPage(currentPageIndex + 1);
}
function previousPage() {
  loadPage(currentPageIndex - 1);
}
function firstPage() {
  loadPage(0);
}
function lastPage() {
  loadPage(totalPages - 1);
}

document.addEventListener("keydown", (e) => {
  switch (e.key) {
    case "ArrowLeft":
      nextPage();
      break;
    case "ArrowRight":
      previousPage();
      break;
    case "Home":
      firstPage();
      break;
    case "End":
      lastPage();
      break;
  }
});