script.js

// Book Gallery JavaScript
class BookGallery {
    constructor() {
        this.books = [];
        this.filteredBooks = [];
        this.filters = {
            tags: [],
            languages: [],
            status: 'read', // Default to showing read books
            sortBy: 'dateRead', // Default to sorting via date read
            searchTerm: ''
        };
        
        this.init();
    }
    
    init() {
        /*
         * Load the data before building filters or cards. If books.js is missing
         * or malformed, stop here and show a useful error. Continuing with fake
         * sample data would make the page look successful while displaying the
         * wrong library and incorrect statistics.
         */
        const booksLoaded = this.loadBooks();
        if (!booksLoaded) {
            this.showBookDataError();
            this.updateStats();
            return;
        }

        this.setupEventListeners();
        this.populateFilters();
        this.applyFilters();
        this.updateStats();
    }

    /**
     * Copy the library from books.js into this gallery.
     *
     * books.js runs before this file and creates `window.BOOKS_DATA`. Reading a
     * value that is already in memory works on GitHub Pages, a local web server,
     * and a directly opened index.html file. There is no network request to fail.
     *
     * @returns {boolean} true when a valid books array was found.
     */
    loadBooks() {
        const data = window.BOOKS_DATA;

        if (!data || !Array.isArray(data.books)) {
            console.error('Book data could not be loaded from books.js.');
            this.books = [];
            this.filteredBooks = [];
            return false;
        }

        this.books = data.books;
        this.filteredBooks = [...this.books];
        return true;
    }

    /**
     * Show an honest, actionable message when the data file cannot be loaded.
     * This replaces the old six-book demo fallback, which hid the real problem.
     */
    showBookDataError() {
        const noResults = document.getElementById('noResults');
        noResults.style.display = 'block';
        noResults.querySelector('h3').textContent = 'Could not load book data';
        noResults.querySelector('p').textContent = 'Make sure books.js is beside index.html, then refresh the page.';
    }
    
    setupEventListeners() {
        // Checkbox filters
        document.addEventListener('change', (e) => {
            if (e.target.classList.contains('filter-checkbox')) {
                this.updateFilters();
            }
            if (e.target.classList.contains('sort-radio')) {
                this.filters.sortBy = e.target.value;
                this.applyFilters();
            }
        });
        
        // Status buttons
        document.querySelectorAll('.status-btn').forEach(button => {
            button.addEventListener('click', (clickEvent) => {
                /*
                 * `target` and `currentTarget` sound similar, but they mean
                 * different things:
                 *
                 * - clickEvent.target is the exact element that was clicked.
                 *   That could be the small icon inside this button.
                 * - clickEvent.currentTarget is the element whose click handler
                 *   is currently running. Here, that is always the status button.
                 *
                 * We need the button because the button owns `data-status` and
                 * the active styling. Passing the whole button also means the
                 * next method does not need to rely on the browser's unreliable
                 * global `event` variable.
                 */
                const clickedButton = clickEvent.currentTarget;
                this.handleStatusChange(clickedButton);
            });
        });
        
        // Search bar
        document.getElementById('search').addEventListener('input', (e) => {
            // Store a cleaned-up version of what the visitor typed.
            //
            // Search should not care about capital letters, so "Tolstoy" and
            // "tolstoy" must behave in exactly the same way. Trimming also
            // prevents an accidental space at either end from hiding a match.
            this.filters.searchTerm = this.normalizeTextForSearch(e.target.value).trim();
            this.applyFilters();
        });
        
        // Clear filters button
        document.getElementById('clearFilters').addEventListener('click', () => {
            this.clearAllFilters();
        });

        /*
         * On phones, keep the library statistics visible but let visitors show
         * or hide the search/filter controls. The `open` class is only used by
         * the mobile CSS; desktop controls remain visible regardless.
         *
         * aria-expanded mirrors the visual state for screen readers. Keeping it
         * here, beside the class change, prevents the two states drifting apart.
         */
        document.getElementById('sidebarToggle').addEventListener('click', (event) => {
            const sidebarControls = document.getElementById('sidebarControls');
            const isOpen = sidebarControls.classList.toggle('open');
            event.currentTarget.setAttribute('aria-expanded', String(isOpen));
        });
    }
    
    populateFilters() {
        const tags = new Set();
        const languages = new Set();
        
        this.books.forEach(book => {
            book.tags.forEach(tag => tags.add(tag));
            languages.add(book.language);
        });
        
        // Populate tag checkboxes
        const tagFilters = document.getElementById('tagFilters');
        tagFilters.className = 'checkbox-group tags';
        tags.forEach(tag => {
            const label = document.createElement('label');
            label.className = 'checkbox-label';
            label.innerHTML = `
                <input type="checkbox" value="${tag}" class="filter-checkbox">
                <span class="checkmark"></span>
                ${tag}
            `;
            tagFilters.appendChild(label);
        });
        
        // Populate language checkboxes
        const languageFilters = document.getElementById('languageFilters');
        languages.forEach(lang => {
            const label = document.createElement('label');
            label.className = 'checkbox-label';
            label.innerHTML = `
                <input type="checkbox" value="${lang}" class="filter-checkbox">
                <span class="checkmark"></span>
                ${this.getLanguageName(lang)}
            `;
            languageFilters.appendChild(label);
        });
    }
    
    getLanguageName(code) {
        const languages = {
            'SA': 'Sanskrit',
            'EN': 'English',
            'BN': 'Bengali',
            'ES': 'Spanish',
            'DE': 'German',
            'HI': 'Hindi',
        };
        return languages[code] || code;
    }

    /**
     * Convert a value from books.js into text that is safe to search.
     *
     * Most titles and authors are normal strings. However, an unfinished book
     * entry may temporarily contain `null` or may omit a field while it is being
     * edited. JavaScript cannot call `.toLowerCase()` on `null`, so doing that
     * directly would stop the entire search feature with an error.
     *
     * Returning an empty string for a missing value is the least surprising
     * behaviour: that missing field simply does not match the search, while the
     * rest of the library continues to work normally.
     */
    normalizeTextForSearch(value) {
        if (typeof value !== 'string') {
            return '';
        }

        return value.toLocaleLowerCase();
    }

    getFormatIcon(format) {
        const icons = {
            'paper': 'fas fa-book-open',
            'ebook': 'fas fa-tablet-alt',
            'audio': 'fas fa-headphones'
        };
        return icons[format] || '';
    }
    
    updateFilters() {
        // Get all checked checkboxes
        const checkedTags = Array.from(document.querySelectorAll('#tagFilters .filter-checkbox:checked')).map(cb => cb.value);
        const checkedLanguages = Array.from(document.querySelectorAll('#languageFilters .filter-checkbox:checked')).map(cb => cb.value);
        
        this.filters.tags = checkedTags;
        this.filters.languages = checkedLanguages;
        
        this.applyFilters();
    }
    
    /**
     * Select one reading-status button and display books with that status.
     *
     * The clicked button is passed in directly by the event listener above.
     * Keeping all status-changing work in this one method makes the behaviour
     * easy to find and change later.
     */
    handleStatusChange(clickedButton) {
        // The status is stored in HTML, for example: data-status="reading".
        const status = clickedButton.dataset.status;

        // This guard protects the page if somebody later adds a status button
        // but forgets its data-status attribute. Without it, the gallery would
        // quietly filter out every book and misleadingly show zero results.
        if (!status) {
            console.error('A status button is missing its data-status attribute.');
            return;
        }

        // First remove the yellow "selected" style from every status button.
        document.querySelectorAll('.status-btn').forEach(button => {
            button.classList.remove('active');
        });

        // Then apply that style only to the actual button that was clicked.
        clickedButton.classList.add('active');
        
        // Finally save the selected status and redraw the matching books.
        this.filters.status = status;
        this.applyFilters();
    }
    
    clearAllFilters() {
        // Uncheck all checkboxes
        document.querySelectorAll('.filter-checkbox').forEach(cb => cb.checked = false);
        
        // Reset filters
        this.filters.tags = [];
        this.filters.languages = [];
        this.filters.status = 'read'; // Reset to default
        this.filters.sortBy = 'dateRead';
        this.filters.searchTerm = '';

        // Clear search bar
        document.getElementById('search').value = '';
        
        // Reset active button
        document.querySelectorAll('.status-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector('[data-status="read"]').classList.add('active');

        // Reset sort radio
        document.querySelector('input[name="sort"][value="dateRead"]').checked = true;
        
        this.applyFilters();
    }
    
    applyFilters() {
        this.filteredBooks = this.books.filter(book => {
            // Search filter
            if (this.filters.searchTerm) {
                const searchTerm = this.filters.searchTerm;

                // Always normalize data from books.js before searching it.
                // This is especially important for older or incomplete records,
                // where an author can be null. A missing title or author should
                // never be able to crash search for every other book.
                const searchableTitle = this.normalizeTextForSearch(book.title);
                const searchableAuthor = this.normalizeTextForSearch(book.author);
                const titleMatch = searchableTitle.includes(searchTerm);
                const authorMatch = searchableAuthor.includes(searchTerm);

                if (!titleMatch && !authorMatch) return false;
            }

            // Tag filter (union - OR logic)
            if (this.filters.tags.length > 0) {
                const hasMatchingTag = this.filters.tags.some(filterTag => 
                    book.tags.includes(filterTag)
                );
                if (!hasMatchingTag) return false;
            }
            
            // Language filter (union - OR logic)
            if (this.filters.languages.length > 0) {
                if (!this.filters.languages.includes(book.language)) {
                    return false;
                }
            }
            
            // Status filter
            if (this.filters.status !== 'all' && book.status !== this.filters.status) {
                return false;
            }
            
            return true;
        });

        this.applySorting();
        this.renderBooks();
        this.updateStats();
    }

    applySorting() {
        if (this.filters.sortBy === 'dateRead') {
            this.filteredBooks.sort((a, b) => {
                if (a.dateRead && b.dateRead) {
                    return new Date(b.dateRead) - new Date(a.dateRead);
                }
                return a.dateRead ? -1 : 1;
            });
        } else if (this.filters.sortBy === 'rating') {
            this.filteredBooks.sort((a, b) => (b.rating || 0) - (a.rating || 0));
        }
    }
    
    renderBooks() {
        const grid = document.getElementById('booksGrid');
        const noResults = document.getElementById('noResults');
        
        if (this.filteredBooks.length === 0) {
            grid.innerHTML = '';
            noResults.style.display = 'block';
            return;
        }
        
        noResults.style.display = 'none';
        
        grid.innerHTML = this.filteredBooks.map(book => this.createBookCard(book)).join('');
    }
    
    createBookCard(book) {
        /*
         * Show the exact numeric rating instead of repeating star characters.
         * String.repeat() accepts only a whole number, so a rating such as 4.5
         * was silently shortened to four stars. One decorative star plus the
         * exact "4.5/5" text is honest and much easier to maintain.
         *
         * A null rating means "not rated"; it must never appear as "null/5".
         * `== null` is intentional here because it covers both null and an
         * accidentally missing value.
         */
        const ratingDisplay = book.rating == null
            ? '<span class="rating-not-set">Not rated</span>'
            : `<span class="stars" aria-hidden="true">★</span><span>${book.rating}/5</span>`;

        const tags = book.tags.map(tag => `<span class="tag">${tag}</span>`).join('');
        let dateDisplay;
        if (book.dateRead) {
            dateDisplay = this.formatDate(book.dateRead);
        } else if (book.status === 'read') {
            dateDisplay = '-';
        } else {
            dateDisplay = 'Not read yet';
        }
        const reviewLink = book.review ? `<a href="${book.review}" target="_blank" class="review-link"><i class="fas fa-external-link-alt"></i> Read Review</a>` : '';
        const formatIcon = this.getFormatIcon(book.format);
        
        let statusText = '';
        if (book.status === 'read') {
            statusText = 'Read';
        } else if (book.status === 'want-to-read') {
            statusText = 'Want to Read';
        } else if (book.status === 'reading') {
            statusText = 'Reading';
        }

        /*
         * Cover-image performance notes:
         *
         * - loading="lazy" tells the browser that it may wait to download a
         *   cover until that cover is getting close to the visible screen.
         *   Without it, the initial "Read" view tries to load hundreds of
         *   covers even though the visitor can see only the first few.
         *
         * - decoding="async" tells the browser that decoding an image should
         *   not block other page work. The browser can display each cover when
         *   it is ready while keeping scrolling and controls responsive.
         *
         * These are built-in HTML features. They need no JavaScript library,
         * configuration, or future maintenance, which is ideal for this small
         * static hobby site.
         */
        return `
            <div class="book-card">
                <div class="book-status status-${book.status}">
                    ${statusText}
                </div>
                <img
                    src="${book.cover}"
                    alt="${book.title}"
                    class="book-cover"
                    loading="lazy"
                    decoding="async"
                    onerror="this.src='https://via.placeholder.com/200x280/cccccc/666666?text=No+Cover'"
                >
                <div class="book-info">
                    <h3 class="book-title">${book.title}</h3>
                    <p class="book-author">by ${book.author}</p>
                    <div class="book-details">
                        <div class="book-rating">
                            ${ratingDisplay}
                        </div>
                        <div class="book-date">
                            <i class="fas fa-calendar"></i>
                            ${dateDisplay}
                            ${formatIcon ? `<i class="${formatIcon} format-icon"></i>` : ''}
                        </div>
                        <div class="book-language">
                            <i class="fas fa-globe"></i>
                            ${this.getLanguageName(book.language)}
                        </div>
                        <div class="book-tags">
                            ${tags}
                        </div>
                        ${reviewLink ? `<div class="book-review">${reviewLink}</div>` : ''}
                    </div>
                </div>
            </div>
        `;
    }
    
    formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString('en-US', { 
            year: 'numeric', 
            month: 'short', 
            day: 'numeric' 
        });
    }
    
    updateStats() {
        // dynamic update of reading stats
        const totalBooks = this.books.length;
        const readBooks = this.books.filter(book => book.status === 'read').length;
        const readingBooks = this.books.filter(book => book.status === 'reading').length;
        const wantToReadBooks = this.books.filter(book => book.status === 'want-to-read').length;
        
        document.getElementById('totalBooks').textContent = totalBooks;
        document.getElementById('readBooks').textContent = readBooks;
        document.getElementById('readingBooks').textContent = readingBooks;
        document.getElementById('wantToReadBooks').textContent = wantToReadBooks;
    }
}

// Initialize the gallery when the page loads
document.addEventListener('DOMContentLoaded', () => {
    new BookGallery();
});