bookhoard/web/src/bookshelf.ts

function selectLibrary(libraryId: string): void {
  localStorage.setItem("selectedLibrary", libraryId);

  document.querySelectorAll(".library-item").forEach((el) => {
    el.classList.remove("ring-2");
    el.classList.remove("ring-accent");
  });

  const selected = document.querySelector(`[data-library-id="${libraryId}"]`);
  if (selected) {
    selected.classList.add("ring-2");
    selected.classList.add("ring-accent");
  }

  loadBookshelf(libraryId);
}

async function loadBookshelf(libraryId: string): Promise<void> {
  const token = localStorage.getItem("token");
  if (!token) return;

  try {
    const response = await fetch(`/api/libraries/${libraryId}/books`, {
      headers: { Authorization: `Bearer ${token}` },
    });

    if (response.ok) {
      const data = await response.json();
      renderBooks(data.books || []);
    }
  } catch (error) {
    console.error("Failed to load bookshelf:", error);
  }
}

function renderBooks(books: unknown[]): void {
  const container = document.getElementById("books-grid");
  if (!container) return;

  if (books.length === 0) {
    container.innerHTML =
      '<p class="text-center p-8" style="color: var(--text-secondary)">No books in this library</p>';
    return;
  }

  container.innerHTML = books
    .map(
      (book: any) => `
        <div class="book-card p-3 rounded-lg border transition-transform hover:scale-105 cursor-pointer"
             style="background-color: var(--bg-secondary); border-color: var(--border)"
             onclick="window.selectBook('${book.id}')">
            ${
              book.cover_image_path
                ? `<img src="${book.cover_image_path}" alt="${book.title}" class="w-full h-48 object-cover rounded mb-2">`
                : `<div class="w-full h-48 rounded mb-2 flex items-center justify-center" style="background-color: var(--bg-primary)">
                    <span class="text-4xl">📖</span>
                </div>`
            }
            <h3 class="font-medium text-sm truncate" style="color: var(--text-primary)">${book.title}</h3>
            <p class="text-xs truncate" style="color: var(--text-secondary)">${book.author || "Unknown Author"}</p>
        </div>
    `,
    )
    .join("");
}

function selectBook(bookId: string): void {
  localStorage.setItem("selectedBook", bookId);
  window.location.href = `/books/${bookId}`;
}

function changePage(page: number): void {
  const libraryId = localStorage.getItem("selectedLibrary");
  if (!libraryId) return;

  const offset = (page - 1) * 50;
  loadBookshelfPaginated(libraryId, offset);
}

async function loadBookshelfPaginated(
  libraryId: string,
  offset: number,
): Promise<void> {
  const token = localStorage.getItem("token");
  if (!token) return;

  try {
    const response = await fetch(
      `/api/libraries/${libraryId}/books?offset=${offset}&limit=50`,
      {
        headers: { Authorization: `Bearer ${token}` },
      },
    );

    if (response.ok) {
      const data = await response.json();
      renderBooks(data.books || []);
      updatePagination(data.total, offset);
    }
  } catch (error) {
    console.error("Failed to load bookshelf:", error);
  }
}

function updatePagination(total: number, offset: number): void {
  const container = document.getElementById("pagination");
  if (!container) return;

  const limit = 50;
  const currentPage = Math.floor(offset / limit) + 1;
  const totalPages = Math.ceil(total / limit);

  if (totalPages <= 1) {
    container.innerHTML = "";
    return;
  }

  container.innerHTML = `
        <div class="flex justify-center space-x-2">
            ${currentPage > 1 ? `<button onclick="window.changePage(${currentPage - 1})" class="btn-secondary px-3 py-1 rounded">Previous</button>` : ""}
            <span class="px-3 py-1" style="color: var(--text-secondary)">Page ${currentPage} of ${totalPages}</span>
            ${currentPage < totalPages ? `<button onclick="window.changePage(${currentPage + 1})" class="btn-secondary px-3 py-1 rounded">Next</button>` : ""}
        </div>
    `;
}

(window as any).selectLibrary = selectLibrary;
(window as any).loadBookshelf = loadBookshelf;
(window as any).selectBook = selectBook;
(window as any).changePage = changePage;