bookhoard/web/src/bookshelf.ts

import { Alpine } from "./alpine";
import { showToast } from "./toast";

let currentLibraryId = "";
let mediaItems: unknown[] = [];

function initBookshelf(): void {
  const savedLibrary = localStorage.getItem("selectedLibrary");
  if (savedLibrary) {
    const select = document.getElementById("library-select") as HTMLSelectElement;
    if (select && select.value) {
      currentLibraryId = savedLibrary;
      loadBookshelf(savedLibrary);
    }
  }
}

function selectLibrary(): void {
  const select = document.getElementById("library-select") as HTMLSelectElement;
  if (!select) return;

  const libraryId = select.value;
  if (!libraryId) return;

  currentLibraryId = libraryId;
  localStorage.setItem("selectedLibrary", libraryId);
  loadBookshelf(libraryId);
}

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

  const loading = document.getElementById("loading");
  const booksGrid = document.getElementById("books-grid");
  const emptyState = document.getElementById("empty-state");

  if (loading) loading.style.display = "block";
  if (booksGrid) booksGrid.classList.add("hidden");
  if (emptyState) emptyState.classList.add("hidden");

  try {
    const response = await fetch(
      `/api/media-items?library_id=${libraryId}&limit=100&offset=0`,
      {
        headers: {
          Authorization: `Bearer ${token}`,
          "Content-Type": "application/json",
        },
      },
    );

    if (response.ok) {
      const data = await response.json();
      mediaItems = data;
      renderBookshelf();
    }
  } catch (error) {
    console.error("Error loading bookshelf:", error);
    showToast("Error loading books", "error");
  } finally {
    if (loading) loading.style.display = "none";
  }
}

function showEmptyState(): void {
  const booksGrid = document.getElementById("books-grid");
  const emptyState = document.getElementById("empty-state");
  const loading = document.getElementById("loading");

  if (loading) loading.style.display = "none";
  if (booksGrid) booksGrid.classList.add("hidden");
  if (emptyState) emptyState.classList.remove("hidden");
}

function renderBookshelf(): void {
  const booksGrid = document.getElementById("books-grid");
  const emptyState = document.getElementById("empty-state");
  const loading = document.getElementById("loading");

  if (!booksGrid) return;

  if (loading) loading.style.display = "none";
  if (emptyState) emptyState.classList.add("hidden");

  if (!mediaItems || mediaItems.length === 0) {
    showEmptyState();
    return;
  }

  booksGrid.classList.remove("hidden");

  const booksPerShelf = 6;
  const shelves: unknown[][] = [];

  for (let i = 0; i < mediaItems.length; i += booksPerShelf) {
    shelves.push(mediaItems.slice(i, i + booksPerShelf));
  }

  let html = "";
  shelves.forEach((shelfBooks) => {
    html += `<div class="relative bg-gradient-to-b from-transparent to-black/10 p-8 mb-4 rounded-lg" style="padding-bottom: 3rem;">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                ${shelfBooks.map((book: any) => renderBookCard(book)).join("")}
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-3 rounded-b-lg" style="background: linear-gradient(to bottom, rgba(107, 68, 35, 0.3) 0%, rgba(107, 68, 35, 0.5) 50%, rgba(107, 68, 35, 0.3) 100%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);"></div>
        </div>`;
  });

  booksGrid.innerHTML = html;
}

function renderBookCard(book: any): string {
  const coverUrl = book.cover_image_path || "/static/placeholder-book.svg";
  const authorHtml = book.author
    ? `<p class="text-xs" style="color: var(--text-secondary)">${book.author}</p>`
    : "";
  return `<div class="relative transition-all duration-200 ease hover:-translate-y-2 hover:-rotate-2 hover:shadow-2xl hover:z-10 cursor-pointer" data-book-id="${book.id}">
        <div class="aspect-[2/3] overflow-hidden rounded shadow-[2px_2px_4px_rgba(0,0,0,0.2),-1px_-1px_2px_rgba(255,255,255,0.1)_inset] relative">
            <div class="absolute left-0 top-0 bottom-0 w-1" style="background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);"></div>
            <img src="${coverUrl}"
                 alt="${book.title}"
                 class="w-full h-full object-cover"
                 onerror="this.src='/static/placeholder-book.svg'"
            >
        </div>
        <div class="mt-2">
            <h3 class="text-sm font-semibold line-clamp-2" style="color: var(--text-primary)">${book.title}</h3>
            ${authorHtml}
        </div>
    </div>`;
}

function viewBook(_bookId: string): void {
  showToast("Book viewer coming soon!", "info");
}

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

function changePage(page: number): void {
  if (!currentLibraryId) return;
  const offset = (page - 1) * 50;
  loadBookshelfPaginated(currentLibraryId, offset);
}

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

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

    if (response.ok) {
      const data = await response.json();
      mediaItems = data;
      renderBookshelf();
    }
  } catch (error) {
    console.error("Failed to load bookshelf:", error);
  }
}

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

  container.addEventListener("click", (e) => {
    const target = e.target as HTMLElement;
    const card = target.closest("[data-book-id]") as HTMLElement;

    if (card) {
      const bookId = card.dataset.bookId;
      if (bookId) {
        selectBook(bookId);
      }
    }
  });
}

export {
  changePage,
  initBookshelf,
  loadBookshelf,
  selectBook,
  selectLibrary,
  setupEventDelegation,
  viewBook,
};

Alpine.store("bookshelf", {
  changePage,
  initBookshelf,
  loadBookshelf,
  selectBook,
  selectLibrary,
  setupEventDelegation,
  viewBook,
});