MyFavStuff3/src/pages/books.astro

---
// src/pages/books.astro
import SiteLayout from '../components/SiteLayout.astro';
import MediaCard from '../components/MediaCard.astro';
import '../styles/global.css';

const bookImports = import.meta.glob('../../content/books/*.md');
let allBooksAstro = []; // Use let to reassign after sorting
for (const path in bookImports) {
  const bookModule = await bookImports[path]();
  allBooksAstro.push({
    frontmatter: bookModule.frontmatter,
    url: bookModule.url || path.replace('../../content', '').replace('.md', ''),
    description: bookModule.frontmatter.description || bookModule.rawContent()?.substring(0, 100) + '...' || 'No description available.',
    // Ensure all necessary fields for filtering are directly accessible
    genre: bookModule.frontmatter.genre,
    rating: bookModule.frontmatter.rating,
    title: bookModule.frontmatter.title, // for sorting
    cover: bookModule.frontmatter.cover // for MediaCard
  });
}

// Sort books by title alphabetically
allBooksAstro.sort((a, b) => a.title.localeCompare(b.title));

const uniqueGenres = [...new Set(allBooksAstro.map(book => book.genre).filter(Boolean))].sort();
const ratings = [5, 4, 3, 2, 1];

const pageTitle = "My Books Collection";
const booksFoundCount = allBooksAstro.length;

// Data to pass to Alpine.js
const alpineData = {
  alpineBooks: allBooksAstro,
  uniqueGenres,
  ratings
};
---

<SiteLayout title={pageTitle} activeTab="books">
  <div class="container mx-auto px-4 py-8" x-data="page" x-init="init()">
    <header class="mb-8 text-center">
      <h1 class="text-4xl font-bold text-slate-800">{pageTitle}</h1>
      {booksFoundCount > 0 && (
        <p class="text-lg text-slate-600 mt-2">
          Displaying <span x-text="filteredBooks.length"></span> of {booksFoundCount} books.
        </p>
      )}
    </header>

    <!-- Filters -->
    {booksFoundCount > 0 && (
      <div class="mb-8 p-4 bg-slate-100 rounded-lg shadow">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
          <div>
            <label for="genre-filter" class="block text-sm font-medium text-slate-700 mb-1">Genre</label>
            <select id="genre-filter" x-model="selectedGenre" class="mt-1 block w-full py-2 px-3 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm">
              <option value="">All Genres</option>
              <template x-for="genre in genres" :key="genre">
                <option :value="genre" x-text="genre"></option>
              </template>
            </select>
          </div>
          <div>
            <label for="rating-filter" class="block text-sm font-medium text-slate-700 mb-1">Min. Rating</label>
            <select id="rating-filter" x-model="selectedRating" class="mt-1 block w-full py-2 px-3 border border-slate-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm">
              <option value="">All Ratings</option>
              <template x-for="rating in ratings" :key="rating">
                <option :value="rating" x-text="`${rating} Stars`"></option>
              </template>
            </select>
          </div>
          <div class="md:mt-auto">
            <button @click="resetFilters()" class="w-full bg-slate-500 hover:bg-slate-600 text-white font-semibold py-2 px-4 rounded-md shadow-sm sm:text-sm">
              Reset Filters
            </button>
          </div>
        </div>
      </div>
    )}

    <!-- Book Grid -->
    {booksFoundCount > 0 ? (
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-8 md:gap-10 justify-items-center">
        <template x-for="book in filteredBooks" :key="book.url">
          <div class="bg-slate-50 border-2 border-sky-500 rounded-xl shadow-lg w-56 mx-auto p-4 my-4 transition-all duration-200 hover:shadow-2xl">
            <a :href="book.url" class="block">
              <img
                :src="book.cover || '/placeholder-cover.png'"
                :alt="book.title ? `Cover for ${book.title}` : 'Book cover'"
                class="w-full h-24 object-contain bg-gray-100 rounded-t-lg"
                @error="event.target.src='/placeholder-cover.png'"
              />
            </a>
            <div class="p-2">
              <h3 class="text-sm font-semibold text-slate-800 mb-1 truncate">
                <a :href="book.url" class="hover:text-sky-600" x-text="book.title"></a>
              </h3>
              <template x-if="book.author">
                <p class="text-xs text-slate-500 mb-1" x-text="`by ${book.author}`"></p>
              </template>
              <template x-if="book.rating">
                <p class="text-xs text-slate-600 mb-1" x-text="`Rating: ${book.rating}/5`"></p>
              </template>
              <template x-if="book.description">
                <p class="text-xs text-slate-700 mt-1 overflow-hidden" x-text="book.description"></p>
              </template>
            </div>
          </div>
        </template>
      </div>
    ) : (
      <div class="text-center py-10">
        <p class="text-xl text-slate-500">No books found in your collection yet.</p>
        <p class="text-slate-400 mt-2">Try adding some markdown files to the <code>content/books</code> directory.</p>
      </div>
    )}
    
    <!-- Empty state for filters -->
    <template x-if="booksFoundCount > 0 && filteredBooks.length === 0">
      <div class="text-center py-10">
        <p class="text-xl text-slate-500">No books match your current filters.</p>
        <p class="text-slate-400 mt-2">Try adjusting or resetting your filters.</p>
      </div>
    </template>

  </div>
</SiteLayout>

<script define:vars={alpineData} is:inline>
  document.addEventListener('alpine:init', () => {
    Alpine.data('page', () => ({
      allBooks: alpineBooks, // from define:vars
      genres: uniqueGenres,   // from define:vars
      ratings: ratings,       // from define:vars
      selectedGenre: '',
      selectedRating: '',
      
      init() {
        // Could load filters from localStorage here if desired
        console.log('Alpine component initialized with', this.allBooks.length, 'books.');
      },

      get filteredBooks() {
        if (!this.allBooks) return [];
        return this.allBooks.filter(book => {
          const genreMatch = this.selectedGenre === '' || book.genre === this.selectedGenre;
          const ratingValue = book.rating;
          const selectedRatingValue = this.selectedRating === '' ? '' : parseInt(this.selectedRating);
          
          let ratingMatch = this.selectedRating === '' || (ratingValue !== undefined && ratingValue !== null && ratingValue >= selectedRatingValue);

          // Debug log for genre and rating filter
           console.log(
             `Book: "${book.title}", Book Genre: "${book.genre}", Selected Genre: "${this.selectedGenre}", Genre Match: ${genreMatch}, ` +
             `Book Rating: ${ratingValue} (type: ${typeof ratingValue}), Selected Dropdown Rating: "${this.selectedRating}" (type: ${typeof this.selectedRating}), Parsed Selected: ${selectedRatingValue} (type: ${typeof selectedRatingValue}), Rating Match: ${ratingMatch}`
           );
           return genreMatch && ratingMatch;
        });
      },

      resetFilters() {
        this.selectedGenre = '';
        this.selectedRating = '';
      }
    }));
  });
</script>