app.js

/**
 * ==============================================================================
 * BiblioDrift Core Logic - Main Application Entry Point
 * ==============================================================================
 *
 * Overview:
 * ---------
 * This file serves as the primary orchestrator for the BiblioDrift application.
 * It ties together the DOM manipulation, state management, 3D rendering interactions,
 * and API communications (both Google Books API and our custom Python backend).
 *
 * Key Components:
 * ---------------
 * 1. SafeStorage:
 *    A robust wrapper around `localStorage` with an `IndexedDB` fallback mechanism.
 *    This component is critical for offline-first capabilities and prevents the
 *    entire app from crashing when iOS/Safari or restrictive browser quotas prevent
 *    standard `localStorage` operations.
 *    - Automatically handles QuotaExceeded exceptions.
 *    - Provides asynchronous data restoration algorithms.
 *    - Integrates closely with the LibraryManager to store thousands of books safely.
 *
 * 2. LibraryManager:
 *    The central state machine over the user's book collection.
 *    - Shelf Types: Manages three distinctive shelves: 'want', 'current', 'finished'.
 *    - Concurrency Control: Handles race conditions when syncing local states with
 *      the backend utilizing optimistic locking techniques.
 *    - Merging Strategy: In the event of a conflict between the client data and
 *      server data, it attempts a non-destructive merge, retaining the state with
 *      the highest integer version map.
 *
 * 3. BookRenderer:
 *    An interface bridge to the DOM. Handles instantiation of HTML templates for
 *    individual 3D book instances, binding their unique event listeners, and
 *    applying their generated CSS styles and thematic properties.
 *    It integrates directly with `LibraryManager` to reflect real-time progress updates.
 *
 * 4. ThemeManager:
 *    Observes User Preferences and seamlessly toggles the UI's color palette between
 *    predefined themes (e.g., dark mode and light mode, wood mode), persisting
 *    these preferences to SafeStorage for a seamless experience across reloads.
 *
 * API Architecture Details:
 * -------------------------
 * - Google Books API: Facilitates the search and retrieval of rich book metadata
 *   including volume summaries, author info, and high-quality thumbnail images.
 * - Local Proxy/Backend: Certain complex interactions such as Machine Learning
 *   sentiment analysis (fetchAIVibe) are offloaded to `MOOD_API_BASE` to bypass
 *   client-side compute limitations and securely handle secret API keys.
 *
 * Security & Data Integrity Considerations:
 * -----------------------------------------
 * - Data Sanitization: All text rendered from external APIs is strictly passed
 *   through the `escapeHTML` utility safely converting brackets to entities to
 *   prevent XSS (Cross-Site Scripting) vectors.
 * - CSRF Protection: Interacts closely with the server-supplied `csrf_access_token`
 *   to securely validate state-mutating requests (POST, PUT, DELETE) preventing
 *   Cross Site Request Forgery attacks against logged-in users.
 *
 * Coding Standards and Development Guidelines:
 * --------------------------------------------
 * 1. Offline-First Philosophy: Ensure that actions (add, remove, update) are
 *    optimistically applied to local state before waiting for server resolution.
 * 2. Safe Storage Wrapper: Always use `SafeStorage.set()` instead of native
 *    `localStorage.setItem()`.
 * 3. Centralized Styling: For broad CSS manipulations, modify standard tokens in
 *    `index.css` rather than directly overriding inline styles to maintain a
 *    dynamic and cohesive theme strategy.
 *
 * File Structure:
 * ---------------
 * - [000-100]: Initialization and Utility Wrappers
 * - [100-300]: SafeStorage Implementation
 * - [300-800]: BookRenderer Class and 3D interactions
 * - [800-1300]: LibraryManager state machine and synchronization
 * - [1300+]: UI Controllers, Events, and Application Bootstrap
 * ==============================================================================
 */

// API_BASE and MOOD_API_BASE are declared globally in config.js (loaded first).
// Do NOT re-declare them here — use the globals from config.js directly.
if (typeof window.IS_DEV === 'undefined') {
    window.IS_DEV = typeof window !== 'undefined' && ['localhost', '127.0.0.1', '::1'].includes(window.location.hostname);
}
const IS_DEV = window.IS_DEV;
const moodAnalysisCache = new Map();
const APP_ROUTE = window.location.pathname.endsWith('/app.html') ? 'app.html' : 'app.html';


// ── No-results empty state helpers ──
function showNoResults() {
  const el = document.getElementById('no-results-state');
  if (el) el.style.display = 'flex';
}
function hideNoResults() {
  const el = document.getElementById('no-results-state');
  if (el) el.style.display = 'none';
}

const delay = (ms) => new Promise((res) => setTimeout(res, ms));

/**
 * Centralized Publish-Subscribe State Store
 */
class Store {
    constructor(initialState = {}) {
        this.state = initialState;
        this.listeners = [];
    }
    getState() { return this.state; }
    setState(updater) {
        const newState = typeof updater === 'function' ? updater(this.state) : updater;
        this.state = { ...this.state, ...newState };
        this.notify();
    }
    subscribe(listener) {
        this.listeners.push(listener);
        return () => { this.listeners = this.listeners.filter(l => l !== listener); };
    }
    notify() { this.listeners.forEach(listener => listener(this.state)); }
}

window.appStore = new Store({
    user: null,
    libraryBooks: { current: [], want: [], finished: [] },
    currentTheme: localStorage.getItem('bibliodrift_theme') || 'light'
});

let GOOGLE_API_KEY = '';

/**
 * Utility to extract a cookie value by name.
 */
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
}

const CollectionAPI = {
    getHeaders() {
        const headers = { 'Content-Type': 'application/json' };
        const csrf = getCookie('csrf_access_token');
        if (csrf) {
            headers['X-CSRF-TOKEN'] = csrf;
        }
        return headers;
    },
    async createCollection(userId, name, description = '', isPublic = false) {
        const res = await fetch(`${MOOD_API_BASE}/api/v1/collections`, {
            method: 'POST',
            headers: this.getHeaders(),
            credentials: 'include',
            body: JSON.stringify({ user_id: parseInt(userId), name, description, is_public: isPublic })
        });
        if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.error || `HTTP ${res.status}`);
        }
        return await res.json();
    },
    async getCollections(userId) {
        const res = await fetch(`${MOOD_API_BASE}/api/v1/collections?user_id=${userId}`, {
            method: 'GET',
            headers: this.getHeaders(),
            credentials: 'include'
        });
        if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.error || `HTTP ${res.status}`);
        }
        const data = await res.json();
        return data.collections || [];
    },
    async getCollection(id) {
        const res = await fetch(`${MOOD_API_BASE}/api/v1/collections/${id}`, {
            method: 'GET',
            headers: this.getHeaders(),
            credentials: 'include'
        });
        if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.error || `HTTP ${res.status}`);
        }
        const data = await res.json();
        return data.collection;
    },
    async updateCollection(id, name, description, isPublic) {
        const payload = {};
        if (name !== undefined) payload.name = name;
        if (description !== undefined) payload.description = description;
        if (isPublic !== undefined) payload.is_public = isPublic;

        const res = await fetch(`${MOOD_API_BASE}/api/v1/collections/${id}`, {
            method: 'PUT',
            headers: this.getHeaders(),
            credentials: 'include',
            body: JSON.stringify(payload)
        });
        if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.error || `HTTP ${res.status}`);
        }
        return await res.json();
    },
    async deleteCollection(id) {
        const res = await fetch(`${MOOD_API_BASE}/api/v1/collections/${id}`, {
            method: 'DELETE',
            headers: this.getHeaders(),
            credentials: 'include'
        });
        if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.error || `HTTP ${res.status}`);
        }
        return await res.json();
    },
    async addBookToCollection(collectionId, userId, bookId, title, authors = '', thumbnail = '') {
        const res = await fetch(`${MOOD_API_BASE}/api/v1/collections/${collectionId}/books`, {
            method: 'POST',
            headers: this.getHeaders(),
            credentials: 'include',
            body: JSON.stringify({
                user_id: parseInt(userId),
                google_books_id: bookId,
                title: title,
                authors: Array.isArray(authors) ? authors.join(', ') : authors,
                thumbnail: thumbnail
            })
        });
        if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.error || `HTTP ${res.status}`);
        }
        return await res.json();
    },
    async removeBookFromCollection(collectionId, bookId) {
        const res = await fetch(`${MOOD_API_BASE}/api/v1/collections/${collectionId}/books/${bookId}`, {
            method: 'DELETE',
            headers: this.getHeaders(),
            credentials: 'include'
        });
        if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.error || `HTTP ${res.status}`);
        }
        return await res.json();
    }
};
window.CollectionAPI = CollectionAPI;

// Example click handler for your custom "Save for Offline" icon
async function handleDownloadToggle(bookCard, bookData) {
    const isAlreadyDownloaded = await window.db.downloadedBooks.get(bookData.id);

    if (isAlreadyDownloaded) {
        const success = await window.removeOfflineBook(bookData.id);
        if (success) bookCard.classList.remove('is-downloaded');
    } else {
        const success = await window.saveBookOffline(bookData);
        if (success) bookCard.classList.add('is-downloaded');
    }
}
// Toast Notification Helper
function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast-notification ${type}`;
    toast.innerHTML = `
        <i class="fa-solid ${type === 'error' ? 'fa-circle-exclamation' : 'fa-info-circle'}"></i>
        <span>${message}</span>
    `;
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.style.animation = 'fadeOut 0.3s ease-in forwards';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

function clearStoredAuthState() {
    SafeStorage.remove('bibliodrift_user');
    SafeStorage.remove('bibliodrift_token');
    SafeStorage.remove('isLoggedIn');
    window.appStore.setState({ user: null });
    authSessionPromise = null;
}

function parseStoredUser() {
    const userStr = SafeStorage.get('bibliodrift_user');
    if (!userStr) return null;

    try {
        return JSON.parse(userStr);
    } catch (error) {
        return null;
    }
}

function renderAuthNavigation(authLink, tooltip, isAuthenticated) {
    if (!authLink) return;

    if (isAuthenticated) {
        authLink.innerHTML = '<i class="fa-solid fa-user"></i> Profile';
        authLink.href = 'profile.html';
        authLink.classList.remove('active');
        authLink.setAttribute('aria-label', 'View profile');
        if (tooltip) tooltip.innerHTML = '<i class="fa-solid fa-id-card"></i> View Profile';
        return;
    }

    authLink.textContent = 'Sign In';
    authLink.href = 'auth.html';
    if (tooltip) tooltip.innerHTML = '<i class="fa-solid fa-key"></i> Access account';
}

let authSessionPromise = null;

async function verifyStoredAuthSession() {
    if (authSessionPromise) {
        return authSessionPromise;
    }

    authSessionPromise = (async () => {
        const token = SafeStorage.get('bibliodrift_token');
        const storedUser = parseStoredUser();
        const thinksLoggedIn = SafeStorage.get('isLoggedIn') === 'true';

        if (token === 'demo-token-12345') {
            return storedUser;
        }

        // Real logins use HttpOnly JWT cookies (see backend JWT_TOKEN_LOCATION). Optional CSRF cookie is readable by JS.
        const shouldProbe = thinksLoggedIn || storedUser || getCookie('csrf_access_token');
        if (!shouldProbe) {
            return null;
        }

        try {
            const headers = {
                ...(token ? { 'Authorization': `Bearer ${token}` } : {})
            };
            const csrf = getCookie('csrf_access_token');
            if (csrf) {
                headers['X-CSRF-TOKEN'] = csrf;
            }

            const response = await fetch(`${MOOD_API_BASE}/auth/verify`, {
                method: 'GET',
                headers,
                credentials: 'include',
            });

            if (response.ok) {
                const data = await response.json();
                const verifiedUser = data.user || storedUser;
                if (verifiedUser) {
                    SafeStorage.set('bibliodrift_user', JSON.stringify(verifiedUser));
                    window.appStore.setState({ user: verifiedUser });
                }
                SafeStorage.set('isLoggedIn', 'true');
                return verifiedUser || null;
            }

            if (response.status === 401 || response.status === 422) {
                clearStoredAuthState();
            }
            return null;
        } catch (error) {
            console.warn('Auth verification failed (network error); using cached session state if available.', error);
            return storedUser;
        }
    })();

    return authSessionPromise;
}

window.verifyStoredAuthSession = verifyStoredAuthSession;
window.renderAuthNavigation = renderAuthNavigation;

/**
 * Robust Wrapper for Storage (LocalStorage + IndexedDB Fallback)
 * Prevents application data loss and handles browser storage wipes/quotas.
 */
const SafeStorage = {
    _dbName: 'BiblioDriftDB',
    _storeName: 'library_backup',

    /**
     * Attempts to request persistent storage from the browser.
     * This prevents the browser from clearing storage when disk space is low.
     */
    async requestPersistence() {
        if (navigator.storage && navigator.storage.persist) {
            try {
                const isPersisted = await navigator.storage.persist();
                if (IS_DEV) {
                    console.log(`[Storage] Persistent status: ${isPersisted}`);
                }
            } catch (e) {
                console.warn('[Storage] Persist request failed', e);
            }
        }
    },

    /**
     * Internal: Opens the IndexedDB for backup.
     */
    async _openDB() {
        return new Promise((resolve, reject) => {
            const request = indexedDB.open(this._dbName, 1);
            request.onupgradeneeded = (e) => {
                const db = e.target.result;
                if (!db.objectStoreNames.contains(this._storeName)) {
                    db.createObjectStore(this._storeName);
                }
            };
            request.onsuccess = (e) => resolve(e.target.result);
            request.onerror = (e) => reject(e.target.error);
        });
    },

    /**
     * Attempts to save data to localStorage with IndexedDB backup.
     * @param {string} key
     * @param {string} value
     * @returns {boolean} Success status
     */
    set(key, value) {
        // 1. Primary: LocalStorage
        try {
            localStorage.setItem(key, value);
        } catch (error) {
            const isQuotaError =
                error instanceof DOMException &&
                (error.code === 22 ||
                    error.code === 1014 ||
                    error.name === 'QuotaExceededError' ||
                    error.name === 'NS_ERROR_DOM_QUOTA_REACHED');

            if (isQuotaError) {
                showToast('Local storage full! Saving to secure backup.', 'info');
            } else {
                console.error('LocalStorage Error:', error);
            }
        }

        // 2. Secondary: IndexedDB (Durable Backup for Library)
        if (key === 'bibliodrift_library') {
            this._saveToDB(key, value);
        }
        return true;
    },

    async _saveToDB(key, value) {
        try {
            const db = await this._openDB();
            const transaction = db.transaction(this._storeName, 'readwrite');
            const store = transaction.objectStore(this._storeName);
            store.put(value, key);
        } catch (e) {
            console.error('IndexedDB Backup Failed', e);
        }

        showToast('Local storage full! Please sync to cloud and clear cache.', 'error');
        return false;
    },

    /**
     * Safely retrieves data from localStorage.
     */
    get(key) {
        try {
            const value = localStorage.getItem(key);
            return value;
        } catch (e) {
            return null;
        }
    },

    /**
     * Retrieves data with IndexedDB fallback if LocalStorage is wiped.
     */
    async getAsync(key) {
        let val = this.get(key);
        if (!val && key === 'bibliodrift_library') {
            try {
                const db = await this._openDB();
                const transaction = db.transaction(this._storeName, 'readonly');
                const store = transaction.objectStore(this._storeName);
                val = await new Promise((resolve) => {
                    const request = store.get(key);
                    request.onsuccess = () => resolve(request.result);
                    request.onerror = () => resolve(null);
                });

                if (val) {
                    if (IS_DEV) console.log('[Storage] Restored from IndexedDB backup');
                    // Try to restore to LocalStorage for future sync calls
                    try {
                        localStorage.setItem(key, val);
                    } catch (e) { }
                }
            } catch (e) {
                console.warn('Backup retrieval failed', e);
            }
        }
        return val;
    },

    /**
     * Safely removes data from storage.
     * @param {string} key
     */
    remove(key) {
        try {
            localStorage.removeItem(key);
            if (key === 'bibliodrift_library') {
                this._saveToDB(key, null);
            }
            return true;
        } catch (e) {
            return false;
        }
    },

    /**
     * Safely clears all localStorage.
     */
    clear() {
        try {
            localStorage.clear();
            this.setMeta({});
            return true;
        } catch (e) {
            return false;
        }
    },
};

const COVER_IMAGE_NAME_OVERRIDES = {
    'The Shadow of the Wind': 'The Shadow of The Wind.jpg'
};

function getCoverImagePath(title) {
    if (!title) {
        return '../assets/images/cover-placeholder.jpg';
    }

    const fileName = COVER_IMAGE_NAME_OVERRIDES[title] || String(title || '')
        .trim()
        .replace(/[\/\?%\*:|"<>]/g, '') + '.jpg';

    return `../assets/images/${fileName}`;
}

const MOCK_BOOKS = [
    {
        id: "mock-dune",
        volumeInfo: {
            title: "Dune",
            authors: ["Frank Herbert"],
            description: "A sweeping science fiction epic set on the desert planet Arrakis. Dune explores complex themes of politics, religion, and man's relationship with nature. Paul Atreides must navigate a treacherous path to becoming the mysterious Muad'Dib.",
            imageLinks: { thumbnail: "../assets/images/dune.jpg" }
        }
    },
    {
        id: "mock-1984",
        volumeInfo: {
            title: "1984",
            authors: ["George Orwell"],
            description: "Orwell's chilling prophecy of a totalitarian future where Big Brother is always watching. A profound exploration of surveillance, truth, and the resilience of the human spirit.",
            imageLinks: { thumbnail: "../assets/images/1984.jpg" }
        }
    },
    {
        id: "mock-hobbit",
        volumeInfo: {
            title: "The Hobbit",
            authors: ["J.R.R. Tolkien"],
            description: "In a hole in the ground there lived a hobbit. Join Bilbo Baggins on an unexpected journey across Middle-earth, encountering dragons, dwarves, and a rigorous test of courage.",
            imageLinks: { thumbnail: "../assets/images/hobbit.jpg" }
        }
    },
    {
        id: "mock-pride",
        volumeInfo: {
            title: "Pride and Prejudice",
            authors: ["Jane Austen"],
            description: "A timeless romance of manners and misunderstanding. Elizabeth Bennet's wit matches Mr. Darcy's pride in this sharp social commentary that remains one of the most loved novels in English literature.",
            imageLinks: { thumbnail: "../assets/images/pride.jpg" }
        }
    },
    {
        id: "mock-gatsby",
        volumeInfo: {
            title: "The Great Gatsby",
            authors: ["F. Scott Fitzgerald"],
            description: "The quintessential novel of the Jazz Age. Jay Gatsby's obsessive love for Daisy Buchanan drives a tragic tale of wealth, illusion, and the American Dream.",
            imageLinks: { thumbnail: "../assets/images/gatsby.jpg" }
        }
    },
    {
        id: "mock-sapiens",
        volumeInfo: {
            title: "Sapiens",
            authors: ["Yuval Noah Harari"],
            description: "A groundbreaking narrative of humanity's creation and evolution. Harari explores the ways in which biology and history have defined us and enhanced our understanding of what it means to be 'human'.",
            imageLinks: { thumbnail: "../assets/images/sapiens.jpg" }
        }
    },
    {
        id: "mock-hail-mary",
        volumeInfo: {
            title: "Project Hail Mary",
            authors: ["Andy Weir"],
            description: "A lone astronaut must save the earth from disaster in this gripping tale of survival and scientific discovery. Full of humor and hard science, it is a celebration of human ingenuity.",
            imageLinks: { thumbnail: "../assets/images/hail_mary.jpg" }
        }
    }
];

const HARDCODED_CATEGORY_BOOKS = {
    'dark academia': [
        {
            id: 'hardcoded-dark-academia-1',
            volumeInfo: {
                title: 'The Secret History',
                authors: ['Donna Tartt'],
                description: 'A haunting campus thriller that follows a group of classics students whose obsession with beauty and secrecy leads to murder and madness.',
                imageLinks: { thumbnail: getCoverImagePath('The Secret History') },
                categories: ['Dark Academia', 'Mystery', 'Campus']
            }
        },
        {
            id: 'hardcoded-dark-academia-2',
            volumeInfo: {
                title: 'If We Were Villains',
                authors: ['M.L. Rio'],
                description: 'A Shakespeare-obsessed troupe of actors at an elite conservatory is undone by jealousy, rivalry, and the weight of their own tragic art.',
                imageLinks: { thumbnail: getCoverImagePath('If We Were Villains') },
                categories: ['Dark Academia', 'Thriller', 'Psychological']
            }
        },
        {
            id: 'hardcoded-dark-academia-3',
            volumeInfo: {
                title: 'The Magicians',
                authors: ['Lev Grossman'],
                description: 'A darker coming-of-age story set at a magical college, where genius, privilege and boredom collide with dangerous consequences.',
                imageLinks: { thumbnail: getCoverImagePath('The Magicians') },
                categories: ['Dark Academia', 'Fantasy', 'College']
            }
        }
    ],
    'mystery': [
        {
            id: 'hardcoded-mystery-1',
            volumeInfo: {
                title: 'The Girl with the Dragon Tattoo',
                authors: ['Stieg Larsson'],
                description: 'A dark, atmospheric thriller about family secrets, corruption, and an unlikely detective duo in Sweden.',
                imageLinks: { thumbnail: getCoverImagePath('The Girl with the Dragon Tattoo') },
                categories: ['Mystery', 'Thriller']
            }
        },
        {
            id: 'hardcoded-mystery-2',
            volumeInfo: {
                title: 'The Woman in White',
                authors: ['Wilkie Collins'],
                description: 'A Victorian classic of suspense, mistaken identity, and eerie conspiracies that helped invent the modern mystery novel.',
                imageLinks: { thumbnail: getCoverImagePath('The Woman in White') },
                categories: ['Mystery', 'Classic']
            }
        },
        {
            id: 'hardcoded-mystery-3',
            volumeInfo: {
                title: 'The Hound of the Baskervilles',
                authors: ['Arthur Conan Doyle'],
                description: 'Sherlock Holmes and Dr. Watson investigate a supernatural legend on the foggy moors of England.',
                imageLinks: { thumbnail: getCoverImagePath('The Hound of the Baskervilles') },
                categories: ['Mystery', 'Detective']
            }
        }
    ],
    'india': [
        {
            id: 'hardcoded-indian-1',
            volumeInfo: {
                title: "Midnight's Children",
                authors: ['Salman Rushdie'],
                description: "A magical realist saga that follows children born at the moment of India's independence and the country's turbulent early years.",
                imageLinks: { thumbnail: getCoverImagePath("Midnight's Children") },
                categories: ['Literary Fiction', 'India']
            }
        },
        {
            id: 'hardcoded-indian-2',
            volumeInfo: {
                title: 'The God of Small Things',
                authors: ['Arundhati Roy'],
                description: 'A rich, lyrical novel about forbidden love and family secrets in Kerala.',
                imageLinks: { thumbnail: getCoverImagePath('The God of Small Things') },
                categories: ['Literary Fiction', 'India']
            }
        },
        {
            id: 'hardcoded-indian-3',
            volumeInfo: {
                title: 'The White Tiger',
                authors: ['Aravind Adiga'],
                description: 'A darkly comic social thriller following a man who rises out of poverty to become a successful entrepreneur.',
                imageLinks: { thumbnail: getCoverImagePath('The White Tiger') },
                categories: ['Literary Fiction', 'India']
            }
        }
    ],
    'classic fiction': [
        {
            id: 'hardcoded-classic-1',
            volumeInfo: {
                title: 'To Kill a Mockingbird',
                authors: ['Harper Lee'],
                description: 'A powerful story of justice and childhood in the American South, told through the eyes of Scout Finch.',
                imageLinks: { thumbnail: getCoverImagePath('To Kill a Mockingbird') },
                categories: ['Classic', 'Fiction']
            }
        },
        {
            id: 'hardcoded-classic-2',
            volumeInfo: {
                title: 'Jane Eyre',
                authors: ['Charlotte Brontë'],
                description: 'A gothic romance about resilience, love, and a heroine who refuses to be defined by society.',
                imageLinks: { thumbnail: getCoverImagePath('Jane Eyre') },
                categories: ['Classic', 'Romance']
            }
        },
        {
            id: 'hardcoded-classic-3',
            volumeInfo: {
                title: 'Brave New World',
                authors: ['Aldous Huxley'],
                description: 'A dystopian classic examining technology, conformity, and the loss of individuality.',
                imageLinks: { thumbnail: getCoverImagePath('Brave New World') },
                categories: ['Classic', 'Dystopian']
            }
        }
    ],
    'fiction': [
        {
            id: 'hardcoded-fiction-1',
            volumeInfo: {
                title: 'The Night Circus',
                authors: ['Erin Morgenstern'],
                description: 'A magical competition between two illusionists becomes a love story set in a mysterious traveling circus.',
                imageLinks: { thumbnail: getCoverImagePath('The Night Circus') },
                categories: ['Fantasy', 'Fiction']
            }
        },
        {
            id: 'hardcoded-fiction-2',
            volumeInfo: {
                title: 'The Shadow of the Wind',
                authors: ['Carlos Ruiz Zafón'],
                description: 'A young boy uncovers a mysterious book and enters a labyrinth of secrets in post-war Barcelona.',
                imageLinks: { thumbnail: getCoverImagePath('The Shadow of the Wind') },
                categories: ['Mystery', 'Fiction']
            }
        },
        {
            id: 'hardcoded-fiction-3',
            volumeInfo: {
                title: 'Never Let Me Go',
                authors: ['Kazuo Ishiguro'],
                description: 'A haunting tale of love and memory at an English boarding school with a dark, speculative undercurrent.',
                imageLinks: { thumbnail: getCoverImagePath('Never Let Me Go') },
                categories: ['Fiction', 'Speculative']
            }
        }
    ]
};

function getHardcodedBooksByTheme(query, maxResults = 5) {
    const normalized = String(query || '').toLowerCase();
    for (const theme of Object.keys(HARDCODED_CATEGORY_BOOKS)) {
        if (normalized.includes(theme)) {
            return HARDCODED_CATEGORY_BOOKS[theme].slice(0, maxResults);
        }
    }
    return [];
}

function normalizeQueryTerms(query) {
    return String(query || '')
        .toLowerCase()
        .replace(/[^a-z0-9\s]/g, ' ')
        .split(/\s+/)
        .filter(Boolean);
}

function scoreMockBook(book, queryTerms) {
    const volumeInfo = book.volumeInfo || {};
    const haystack = [
        volumeInfo.title || '',
        (volumeInfo.authors || []).join(' '),
        volumeInfo.description || '',
        (volumeInfo.categories || []).join(' ')
    ].join(' ').toLowerCase();

    return queryTerms.reduce((score, term) => score + (haystack.includes(term) ? 1 : 0), 0);
}

function getFallbackBooks(query, maxResults = 5) {
    const hardcoded = getHardcodedBooksByTheme(query, maxResults);
    if (hardcoded.length > 0) {
        return hardcoded;
    }

    const queryTerms = normalizeQueryTerms(query);
    const ranked = MOCK_BOOKS
        .map(book => ({ book, score: scoreMockBook(book, queryTerms) }))
        .sort((a, b) => b.score - a.score);

    const matches = ranked.filter(item => item.score > 0).map(item => item.book);
    const pool = matches.length > 0 ? matches : MOCK_BOOKS;

    return pool.slice(0, maxResults);
}


class BookRenderer {
    constructor(libraryManager = null) {
        this.libraryManager = libraryManager;
    }

    renderSkeletons(container, count = 5, type = 'card') {
        if (!container) return;
        let html = '';
        if (type === 'card') {
            html = Array(count).fill(0).map(() => `
                <div class="book-skeleton skeleton"></div>
            `).join('');
        } else if (type === 'spine') {
            html = Array(count).fill(0).map(() => `
                <div class="spine-skeleton skeleton"></div>
            `).join('');
        }
        container.innerHTML = html;
    }

    async createBookElement(bookData, shelf = null) {
        const { id, volumeInfo } = bookData;
        const progress = typeof bookData.progress === 'number' ? bookData.progress : 0;
        const title = volumeInfo.title || "Untitled";
        const authors = volumeInfo.authors ? volumeInfo.authors.join(", ") : "Unknown Author";
        const thumb = volumeInfo.imageLinks && volumeInfo.imageLinks.thumbnail
            ? volumeInfo.imageLinks.thumbnail
            : getCoverImagePath(title);
        const originalDescription = volumeInfo.description ? volumeInfo.description.substring(0, 100) + "..." : "A mysterious tome waiting to be opened.";
        const categories = volumeInfo.categories || [];

        const vibe = this.generateVibe(originalDescription, categories);
        const encodedThumb = thumb ? encodeURI(thumb).replace(/'/g, '%27') : 'https://via.placeholder.com/128x196?text=No+Cover';
        const spineColors = ['#5D4037', '#4E342E', '#3E2723', '#2C2420', '#8D6E63'];
        const randomSpine = spineColors[Math.floor(Math.random() * spineColors.length)];
        const cleanId = title.toLowerCase().trim().replace(/[^a-z0-9]/g, '_');
        const spineImagePath = `assets/images/${cleanId}_spine.jpg`;

        const scene = document.createElement('div');
        scene.className = 'book-scene';

        // Load flip sound
        const flipSound = new Audio('../assets/sounds/page-flip.mp3');
        flipSound.preload = 'auto';
        flipSound.volume = 0.5;

        const escapeHTML = (str) => {
            if (!str) return "";
            return String(str)
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#39;");
        };

        const safeTitle = escapeHTML(title);
        const safeAuthors = escapeHTML(authors);
        const safeOriginalDescription = escapeHTML(originalDescription);
        const safeVibe = escapeHTML(vibe);
        const safeThumb = escapeHTML(encodedThumb.replace('http:', 'https:'));

        scene.innerHTML = `
            <div class="book" data-id="${escapeHTML(id)}">
                <div class="book__face book__face--front">
                    <img src="${safeThumb}" alt="Cover of '${safeTitle}' by ${safeAuthors || 'Unknown Author'}">
                </div>
                <div class="book__face book__face--spine" style="background: ${randomSpine}"></div>
                <div class="book__face book__face--right"></div>
                <div class="book__face book__face--top"></div>
                <div class="book__face book__face--bottom"></div>
                <div class="book__face book__face--back">
                    <div style="overflow-y: auto; height: 100%; padding-right: 5px; scrollbar-width: thin;">
                        <div style="font-weight: bold; font-size: 0.9rem; margin-bottom: 0.5rem; color: #2c2420;">${safeTitle}</div>
                        <div class="handwritten-note" style="margin-bottom: 0.8rem; font-style: italic; color: #5d4037;">${safeVibe}</div>
                        ${bookData.moods && bookData.moods.length > 0 ? `
                        <div class="book-mood-tags" style="margin-bottom: 0.8rem; display: flex; flex-wrap: wrap; gap: 4px;">
                            ${bookData.moods.map(m => `<span style="font-size: 0.6rem; background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 10px;"><i class="fa-solid ${this.getMoodIcon(m)}"></i> ${m}</span>`).join('')}
                        </div>
                        ` : ''}
                    </div>

                    <button class="read-details-btn" title="Read Details">
                        <i class="fa-solid fa-circle-info"></i> Read Details
                    </button>

                    ${shelf === 'current' ? `
                    <div class="reading-progress">
                        <input type="range" min="0" max="100" value="${progress}" class="progress-slider" />
                        <small>${progress}% read</small>
                    </div>` : ''}
                    <div class="book-actions">
                        <button class="btn-icon add-btn" title="Add to Library"><i class="fa-regular fa-heart"></i></button>
                        <button class="btn-icon share-btn" title="Share Book"><i class="fa-solid fa-share-nodes"></i></button>
                        <button class="btn-icon mood-btn" title="Explore Mood"><i class="fa-solid fa-wand-magic-sparkles"></i></button>
                        <button class="btn-icon flip-back-btn" title="Flip Back"><i class="fa-solid fa-rotate-left"></i></button>
                    </div>
                </div>
            </div>
        <div class="book-pages-3d"></div>
    <div class="glass-overlay">
        <strong>${safeTitle}</strong><br><small>${safeAuthors}</small>
    </div>
`;

        // Interaction: Progress Slider
        const slider = scene.querySelector('.progress-slider');
        if (slider) {
            slider.addEventListener('change', (e) => {
                const newProgress = parseInt(e.target.value);
                if (this.libraryManager) {
                    this.libraryManager.updateBook(id, { progress: newProgress });
                }
                // Update small tag
                const small = slider.nextElementSibling;
                if (small) small.textContent = `${newProgress}% read`;
            });
        }

        // Interaction: Flip
        const bookEl = scene.querySelector('.book');
        scene.addEventListener('click', (e) => {
            if (!e.target.closest('.btn-icon') && !e.target.closest('.reading-progress')) {
                if (bookEl) {
                    bookEl.classList.toggle('flipped');
                }
                // Play sound
                flipSound.play().catch(e => {
                    if (IS_DEV) {
                        console.log("Audio play failed", e);
                    }
                });
            }
        });

        // Interaction: Add to Library Logic
        const addBtn = scene.querySelector('.add-btn');
        const updateBtn = () => {
            addBtn.innerHTML = this.libraryManager.findBook(id) ? '<i class="fa-solid fa-check"></i>' : '<i class="fa-regular fa-heart"></i>';
        };
        updateBtn();

        addBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            if (this.libraryManager.findBook(id)) {
                this.libraryManager.removeBook(id);
            } else {
                this.libraryManager.addBook(bookData, shelf || 'want');
            }
            updateBtn();
        });

        const frontImage = scene.querySelector('.book__face--front img');
        if (frontImage) {
            frontImage.onerror = () => {
                const fallback = encodedThumb.startsWith('../assets/images/')
                    ? 'https://via.placeholder.com/128x196?text=No+Cover'
                    : getCoverImagePath(title);
                if (frontImage.src !== fallback) {
                    frontImage.src = fallback;
                } else {
                    frontImage.onerror = null;
                }
            };
        }

        // Info Button
        scene.querySelector('.read-details-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this.openModal(bookData);
        });

        // Share Button
        scene.querySelector('.share-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            const shareText = `Check out this book: ${title} by ${authors}`;
            navigator.clipboard.writeText(shareText).then(() => {
                showToast('Book details copied to clipboard!', 'success');
            }).catch(err => {
                console.error('Failed to copy text: ', err);
                showToast('Failed to copy book details.', 'error');
            });
        });

        // Explore Mood Button
        scene.querySelector('.mood-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this.exploreBookMood(title, authors);
        });

        // Flip Back Button
        scene.querySelector('.flip-back-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            bookEl.classList.remove('flipped');
            flipSound.play().catch(err => {
                if (IS_DEV) {
                    console.log("Audio play failed", err);
                }
            });
        });

        // Async fetch AI Vibe - Hydrate the UI
        this.fetchAIVibe(title, authors, volumeInfo.description || "").then(aiVibe => {
            if (aiVibe) {
                // Strip any accidental prefix the AI might return
                const cleanVibe = aiVibe.replace(/^(Bookseller's Note:|Note:|Recommendation:)\s*/i, "");

                const noteEl = scene.querySelector('.handwritten-note');
                if (noteEl) {
                    noteEl.innerHTML = cleanVibe;
                    noteEl.classList.add('fade-in'); // Optional animation hook
                }
            }
        });

        return scene;
    }

    async fetchAIVibe(title, author, description) {
        try {
            const res = await fetch(`${MOOD_API_BASE}/generate-note`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({ title, author, description })
            });
            if (res.ok) {
                const data = await res.json();
                const payload = data.data || data;
                return payload?.vibe || payload?.bookseller_note || payload?.insight || payload?.note || null;
            }
        } catch (e) {
            // Silently fail to use fallback
        }
        return null;
    }

    async fetchAIBlurb(bookId, title, author, description, categories = []) {
        try {
            const res = await fetch(`${MOOD_API_BASE}/generate-note`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({ bookId, title, author, description, categories })
            });
            if (res.ok) {
                const data = await res.json();
                return data.data?.blurb || null;
            }
        } catch (e) {
            // Silently fail to use fallback
        }
        return null;
    }

    async fetchMoodTags(title, author) {
        try {
            const csrfToken = getCookie('csrf_access_token');
            const headers = { 'Content-Type': 'application/json' };
            if (csrfToken) {
                headers['X-CSRF-TOKEN'] = csrfToken;
            }
            const res = await fetch(`${MOOD_API_BASE}/mood-tags`, {
                method: 'POST',
                headers: headers,
                credentials: 'include',
                body: JSON.stringify({ title, author })
            });
            return res;
        } catch (e) {
            console.error("fetchMoodTags error", e);
            return null;
        }
    }

    generateVibe(text, categories = []) {
        // Fallback vibes if AI hasn't loaded yet.
        const lowerText = text.toLowerCase();
        const lowerCats = categories.join(' ').toLowerCase();

        // 1. Context-aware fallbacks
        if (lowerCats.includes('classic') || lowerText.includes('classic')) return "A timeless tale that defined a genre.";
        if (lowerCats.includes('romance') || lowerText.includes('love')) return "A heartwarming story of connection.";
        if (lowerCats.includes('mystery') || lowerText.includes('murder') || lowerText.includes('detective')) return "Full of twists that keep you guessing.";
        if (lowerCats.includes('fantasy') || lowerText.includes('magic')) return "A magical escape to another world.";
        if (lowerCats.includes('fiction') || lowerText.includes('novel')) return "A compelling narrative voice.";
        if (lowerCats.includes('history') || lowerText.includes('war')) return "A journey into the past.";
        if (lowerCats.includes('science') || lowerText.includes('space')) return "Opens your mind to new possibilities.";

        // 2. Generic fallbacks (Deterministic hash)
        const vibes = [
            "Perfect for a rainy afternoon.",
            "A quiet companion for coffee.",
            "Intense and thought-provoking.",
            "Will make you laugh and cry.",
            "Best devoured in one sitting.",
            "Prepare to be surprised."
        ];

        // Simple hash to pick a stable vibe for this book text
        let hash = 0;
        for (let i = 0; i < text.length; i++) {
            hash = ((hash << 5) - hash) + text.charCodeAt(i);
            hash |= 0; // Convert to 32bit integer
        }

        return vibes[Math.abs(hash) % vibes.length];
    }

    openModal(book) {
        const modal = document.getElementById('book-details-modal');
        if (!modal) return;

        document.getElementById('modal-img').src = book.volumeInfo.imageLinks?.thumbnail.replace('http:', 'https:') || '';
        document.getElementById('modal-img').alt = `Cover of '${book.volumeInfo.title}' by ${book.volumeInfo.authors?.join(', ') || 'Unknown Author'}`;
        document.getElementById('modal-title').textContent = book.volumeInfo.title;
        document.getElementById('modal-author').textContent = book.volumeInfo.authors?.join(", ") || "Unknown Author";

        const summaryEl = document.getElementById('modal-summary');
        if (summaryEl) {
            // Show skeletons while AI is "thinking"
            summaryEl.innerHTML = `
                <div class="text-skeleton skeleton"></div>
                <div class="text-skeleton skeleton" style="width: 90%"></div>
            `;

            // Fetch the AI vibe to populate the Insight box
            this.fetchAIVibe(book.volumeInfo.title, book.volumeInfo.authors?.join(", ") || "", book.volumeInfo.description || "").then(vibe => {
                if (vibe) {
                    const cleanVibe = vibe.replace(/^(Bookseller's Note:|Note:|Recommendation:)\s*/i, "");
                    summaryEl.innerHTML = `<p class="fade-in">${cleanVibe}</p>`;
                } else {
                    // Fallback to description if AI vibe fails
                    summaryEl.textContent = book.volumeInfo.description || "No description available.";
                }
            });
        }

        const addBtn = document.getElementById('modal-add-btn');
        const shareBtn = document.getElementById('modal-share-btn');
        const isInLibrary = this.libraryManager && typeof this.libraryManager.findBook === 'function' && this.libraryManager.findBook(book.id);

        if (addBtn) {
            addBtn.onclick = null;
            addBtn.classList.toggle('library-remove-btn', isInLibrary);
            addBtn.innerHTML = isInLibrary
                ? '<i class="fa-solid fa-trash"></i> Remove from Library'
                : '<i class="fa-regular fa-heart"></i> Add to Library';

            addBtn.onclick = async () => {
                if (!this.libraryManager) return;

                if (isInLibrary) {
                    if (confirm('Are you sure you want to remove this book from your library?')) {
                        await this.libraryManager.removeBook(book.id);
                        modal.close();
                    }
                    return;
                }

                await this.libraryManager.addBook(book, 'want');
                addBtn.innerHTML = '<i class="fa-solid fa-trash"></i> Remove from Library';
                addBtn.classList.add('library-remove-btn');
            };
        }

        if (shareBtn) {
            shareBtn.onclick = () => {
                const shareText = `Check out this book: ${book.volumeInfo.title} by ${book.volumeInfo.authors?.join(", ") || "Unknown Author"}`;
                navigator.clipboard.writeText(shareText).then(() => {
                    showToast('Book title and author copied!', 'success');
                }).catch(err => {
                    console.error('Failed to copy text: ', err);
                    showToast('Failed to copy book details.', 'error');
                });
            };
        }

        // Preview Button — opens the Google Books Embedded Viewer
        const previewBtn = document.getElementById('modal-preview-btn');
        if (previewBtn) {
            previewBtn.onclick = () => {
                if (window.BookPreview && book.id) {
                    const author = book.volumeInfo.authors ? book.volumeInfo.authors.join(', ') : 'Unknown Author';
                    const rating = book.volumeInfo.averageRating || 0;
                    const genre = book.volumeInfo.categories ? book.volumeInfo.categories[0] : 'Fiction';
                    window.BookPreview.open(book.id, book.volumeInfo.title || 'Book Preview', author, rating, genre);
                }
            };
        }

        // Fetch and render purchase links
        const purchaseLinksEl = document.getElementById('modal-purchase-links');
        if (purchaseLinksEl) {
            purchaseLinksEl.innerHTML = '<div class="text-skeleton skeleton" style="width: 100%; height: 30px;"></div>';

            const title = encodeURIComponent(book.volumeInfo.title || '');
            const author = encodeURIComponent(book.volumeInfo.authors ? book.volumeInfo.authors[0] : '');
            let isbn = '';
            if (book.volumeInfo.industryIdentifiers) {
                const identifier = book.volumeInfo.industryIdentifiers.find(i => i.type === 'ISBN_13' || i.type === 'ISBN_10');
                if (identifier) isbn = encodeURIComponent(identifier.identifier);
            }

            fetch(`${MOOD_API_BASE}/books/purchase-links?title=${title}&author=${author}&isbn=${isbn}`)
                .then(res => res.json())
                .then(data => {
                    if (data.success && data.links && data.links.length > 0) {
                        const linksHtml = data.links.map(link => {
                            return `<a href="${link.url}" target="_blank" class="purchase-link-btn" style="background-color: ${link.color || 'var(--wood-dark)'}; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-right: 5px; margin-bottom: 5px; font-size: 0.85rem;">
                                <i class="${link.icon || 'fa-solid fa-book'}"></i> ${link.name}
                            </a>`;
                        }).join('');
                        purchaseLinksEl.innerHTML = linksHtml;
                    } else {
                        purchaseLinksEl.innerHTML = '<p class="modal-subtitle" style="margin: 0; font-size: 0.85rem; opacity: 0.7;">No purchase links available.</p>';
                    }
                })
                .catch(err => {
                    console.error('Failed to load purchase links', err);
                    purchaseLinksEl.innerHTML = '<p class="modal-subtitle" style="margin: 0; font-size: 0.85rem; opacity: 0.7;">Failed to load purchase links.</p>';
                });
        } // end if (purchaseLinksEl)

        // Explore Mood Button
        const moodBtnModal = document.getElementById('modal-mood-btn');
        if (moodBtnModal) {
            moodBtnModal.onclick = () => {
                this.exploreBookMood(book.volumeInfo.title, book.volumeInfo.authors?.join(", ") || "");
            };
        }

            modal.showModal();
            document.getElementById('closeModalBtn').onclick = () => modal.close();

            // Emotion Tagging UI
            const emotionContainer = document.createElement('div');
            emotionContainer.className = 'emotion-tagging-section';
            emotionContainer.innerHTML = `
            <h3 class="modal-section-title">How does this book make you feel?</h3>
            <div class="emotion-tags-container">
                ${['Melancholic', 'Cozy', 'Tense', 'Inspiring', 'Whimsical', 'Dark', 'Adventurous'].map(mood => {
            const isActive = book.moods && book.moods.includes(mood);
            return `<span class="emotion-tag ${isActive ? 'active' : ''}" data-mood="${mood}" style="color: var(--text-main); border-color: var(--control-border);">
                        <i class="fa-solid ${this.getMoodIcon(mood)}"></i> ${mood}
                    </span>`;
            }).join('')}
            </div>
        `;
            // Insert before the buttons
            const modalBody = modal.querySelector('.modal-body') || modal.querySelector('.book-details-content');
            const actions = modal.querySelector('.modal-actions') || modal.querySelector('.book-actions-section');

            if (actions) {
                // Remove existing tagging section if re-opening
                const existing = actions.parentNode.querySelector('.emotion-tagging-section');
                if (existing) existing.remove();

                actions.parentNode.insertBefore(emotionContainer, actions);
            } else if (modalBody) {
                // Fallback
                const existing = modalBody.querySelector('.emotion-tagging-section');
                if (existing) existing.remove();
                modalBody.appendChild(emotionContainer);
            }

            // Add tag toggle listeners
            emotionContainer.querySelectorAll('.emotion-tag').forEach(tag => {
                tag.onclick = async () => {
                    const mood = tag.dataset.mood;
                    if (!book.moods) book.moods = [];

                    const index = book.moods.indexOf(mood);
                    if (index > -1) {
                        book.moods.splice(index, 1);
                        tag.classList.remove('active');
                    } else {
                        book.moods.push(mood);
                        tag.classList.add('active');
                    }

                    if (this.libraryManager) {
                        await this.libraryManager.updateBook(book.id, { moods: book.moods });
                    }
                };
            });

            // Custom Collections Section
            let collectionsSection = document.getElementById('modal-discovery-collections-tagging');
            if (!collectionsSection) {
                collectionsSection = document.createElement('div');
                collectionsSection.id = 'modal-discovery-collections-tagging';
                collectionsSection.className = 'collections-tagging-section';
                collectionsSection.style.cssText = 'margin-top: 15px; margin-bottom: 15px; padding: 1rem; background: rgba(255,255,255,0.02); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);';
            }

            if (actions) {
                const existing = actions.parentNode.querySelector('#modal-discovery-collections-tagging');
                if (existing) existing.remove();
                actions.parentNode.insertBefore(collectionsSection, actions);
            } else if (modalBody) {
                const existing = modalBody.querySelector('#modal-discovery-collections-tagging');
                if (existing) existing.remove();
                modalBody.appendChild(collectionsSection);
            }

            const userObj = typeof parseStoredUser === 'function' ? parseStoredUser() : null;
            if (!userObj) {
                collectionsSection.innerHTML = `
                <h4 style="margin: 0 0 5px 0; color: var(--accent-gold); font-family: 'Playfair Display', serif; font-size: 0.95rem;">Save in Custom Collections</h4>
                <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0;"><a href="auth.html" style="color: var(--accent-gold); text-decoration: underline;">Sign in</a> to save this book in custom shelves.</p>
            `;
            } else {
                collectionsSection.innerHTML = `
                <h4 style="margin: 0 0 8px 0; color: var(--accent-gold); font-family: 'Playfair Display', serif; font-size: 0.95rem; display: flex; align-items: center; gap: 6px;">
                    <i class="fa-solid fa-folder-open"></i> Add to Custom Collections
                </h4>
                <div id="modal-discovery-collections-list" style="display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow-y: auto; padding-right: 4px;">
                    <span style="font-size: 0.8rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> Retrieving collections...</span>
                </div>
            `;

                (async () => {
                    try {
                        const cols = await window.CollectionAPI.getCollections(userObj.id);
                        const listEl = document.getElementById('modal-discovery-collections-list');
                        if (!listEl) return;

                        if (cols.length === 0) {
                            listEl.innerHTML = `
                            <span style="font-size: 0.8rem; color: var(--text-muted);">No custom collections created yet. Go to Custom Collections view to create one!</span>
                        `;
                            return;
                        }

                        const colsWithItems = await Promise.all(
                            cols.map(async (c) => {
                                try {
                                    return await window.CollectionAPI.getCollection(c.id);
                                } catch (e) {
                                    return { id: c.id, name: c.name, items: [] };
                                }
                            })
                        );

                        listEl.innerHTML = '';
                        colsWithItems.forEach(col => {
                            const existingItem = col.items.find(item => item.google_books_id === book.id);
                            const isChecked = !!existingItem;
                            const label = document.createElement('label');
                            label.style.cssText = 'display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-main); cursor: pointer; user-select: none; margin-bottom: 4px;';

                            const checkbox = document.createElement('input');
                            checkbox.type = 'checkbox';
                            checkbox.checked = isChecked;
                            checkbox.style.cssText = 'cursor: pointer; width: 15px; height: 15px; margin: 0;';

                            if (isChecked) {
                                checkbox.dataset.bookId = existingItem.book_id;
                            }

                            checkbox.onchange = async () => {
                                checkbox.disabled = true;
                                try {
                                    if (checkbox.checked) {
                                        const authorStr = Array.isArray(book.volumeInfo.authors) ? book.volumeInfo.authors.join(', ') : (book.volumeInfo.authors || 'Unknown Author');
                                        const res = await window.CollectionAPI.addBookToCollection(
                                            col.id,
                                            userObj.id,
                                            book.id,
                                            book.volumeInfo.title,
                                            authorStr,
                                            book.volumeInfo.imageLinks?.thumbnail || ''
                                        );
                                        checkbox.dataset.bookId = res.item.book_id;
                                        showToast(`Added to "${col.name}"`, 'success');
                                    } else {
                                        const bookId = checkbox.dataset.bookId;
                                        if (bookId) {
                                            await window.CollectionAPI.removeBookFromCollection(col.id, bookId);
                                            delete checkbox.dataset.bookId;
                                            showToast(`Removed from "${col.name}"`, 'success');
                                        }
                                    }
                                } catch (err) {
                                    checkbox.checked = !checkbox.checked; // Revert
                                    showToast(err.message, 'error');
                                } finally {
                                    checkbox.disabled = false;
                                }
                            };

                            label.appendChild(checkbox);

                            const textSpan = document.createElement('span');
                            textSpan.textContent = col.name;
                            label.appendChild(textSpan);

                            listEl.appendChild(label);
                        });
                    } catch (e) {
                        console.error('Modal collections load failed', e);
                        const listEl = document.getElementById('modal-discovery-collections-list');
                        if (listEl) {
                            listEl.innerHTML = `<span style="font-size: 0.8rem; color: #e53935;">Failed to load collections.</span>`;
                        }
                    }
                })();
            }
        }
    }

    async exploreBookMood(title, author) {
        const cacheKey = `${title.toLowerCase().trim()}|${(author || '').toLowerCase().trim()}`;

        // 1. Create and show the mood modal dynamically
        let modal = document.getElementById('mood-analysis-modal');
        if (!modal) {
            modal = document.createElement('div');
            modal.id = 'mood-analysis-modal';
            modal.className = 'mood-modal';
            document.body.appendChild(modal);
        } else {
            modal.classList.remove('hidden');
            modal.style.display = 'flex';
        }

        const escapeHTML = (str) => {
            if (!str) return "";
            return String(str)
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#39;");
        };

        modal.innerHTML = `
            <div class="mood-modal-content">
                <div class="mood-modal-header">
                    <h3>Mood Deep-Dive: ${escapeHTML(title)}</h3>
                    <button class="close-modal" id="close-mood-modal">&times;</button>
                </div>
                <div class="mood-modal-body">
                    <div id="mood-modal-loader" class="mood-loading-section" style="text-align: center; padding: 2rem;">
                        <i class="fa-solid fa-spinner fa-spin fa-2x" style="color: var(--accent-gold); margin-bottom: 1rem;"></i>
                        <p style="color: var(--text-muted); font-size: 0.9rem;">Scraping GoodReads reviews & analyzing sentiment...</p>
                    </div>
                    <div id="mood-modal-error" class="mood-error-section hidden" style="text-align: center; padding: 2rem;">
                        <i class="fa-solid fa-triangle-exclamation fa-2x" style="color: #f44336; margin-bottom: 1rem;"></i>
                        <p id="mood-error-message" style="color: var(--text-main); font-size: 0.95rem;"></p>
                    </div>
                    <div id="mood-modal-results" class="mood-results-section hidden">
                        <div class="mood-section">
                            <h4>Primary Moods</h4>
                            <div class="mood-tags-large" id="mood-modal-tags" style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0.5rem;">
                                <!-- Mood tags go here -->
                            </div>
                        </div>
                        <div class="mood-section" style="margin-top: 1.5rem;">
                            <h4>Overall Sentiment</h4>
                            <div class="sentiment-bar">
                                <div class="sentiment-fill" id="mood-modal-sentiment-fill" style="width: 0%;"></div>
                            </div>
                            <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem;" id="mood-modal-sentiment-desc"></p>
                        </div>
                        <div class="mood-section" style="margin-top: 1.5rem;">
                            <h4>Bookseller's Vibe</h4>
                            <div class="vibe-quote" id="mood-modal-vibe" style="margin-top: 0.5rem;">
                                <!-- Vibe quote goes here -->
                            </div>
                        </div>
                        <div style="font-size: 0.75rem; color: var(--text-muted); text-align: right; margin-top: 1.5rem;" id="mood-modal-meta">
                            <!-- Meta info goes here -->
                        </div>
                    </div>
                </div>
            </div>
        `;

        const closeModal = () => {
            modal.style.display = 'none';
            modal.classList.add('hidden');
        };

        modal.querySelector('#close-mood-modal').onclick = closeModal;
        modal.onclick = (e) => {
            if (e.target === modal) closeModal();
        };

        const showLoader = () => {
            modal.querySelector('#mood-modal-loader').classList.remove('hidden');
            modal.querySelector('#mood-modal-error').classList.add('hidden');
            modal.querySelector('#mood-modal-results').classList.add('hidden');
        };

        const showError = (msg) => {
            modal.querySelector('#mood-modal-loader').classList.add('hidden');
            modal.querySelector('#mood-modal-error').classList.remove('hidden');
            modal.querySelector('#mood-modal-error p').textContent = msg;
            modal.querySelector('#mood-modal-results').classList.add('hidden');
        };

        const renderResults = (analysis) => {
            modal.querySelector('#mood-modal-loader').classList.add('hidden');
            modal.querySelector('#mood-modal-error').classList.add('hidden');
            const resultsSection = modal.querySelector('#mood-modal-results');
            resultsSection.classList.remove('hidden');

            // Render primary moods
            const tagsContainer = modal.querySelector('#mood-modal-tags');
            tagsContainer.innerHTML = '';
            if (analysis.primary_moods && analysis.primary_moods.length > 0) {
                analysis.primary_moods.forEach(moodObj => {
                    const moodVal = moodObj.mood;
                    const confidence = moodObj.confidence;
                    const tag = document.createElement('span');
                    const moodClass = `mood-${moodVal.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
                    tag.className = `mood-tag-large ${moodClass}`;
                    tag.innerHTML = `<i class="fa-solid ${this.getMoodIcon(moodVal)}"></i> ${escapeHTML(moodVal)} (${Math.round(confidence * 100)}%)`;
                    tagsContainer.appendChild(tag);
                });
            } else {
                tagsContainer.innerHTML = '<span style="font-size: 0.9rem; color: var(--text-muted);">No distinct moods detected.</span>';
            }

            // Render sentiment bar
            const compoundScore = analysis.overall_sentiment?.compound_score || 0;
            const percentage = Math.round(((compoundScore + 1) / 2) * 100);
            modal.querySelector('#mood-modal-sentiment-fill').style.width = `${percentage}%`;
            modal.querySelector('#mood-modal-sentiment-desc').textContent = `${analysis.mood_description || 'Sentiment analyzed successfully.'} (Score: ${compoundScore.toFixed(2)})`;

            // Render vibe
            modal.querySelector('#mood-modal-vibe').innerHTML = `<p>${escapeHTML(analysis.bibliodrift_vibe || 'A quiet read with deep undertones.')}</p>`;

            // Render metadata
            const totalReviews = analysis.total_reviews_analyzed || 0;
            const confidenceScore = analysis.analysis_confidence ? Math.round(analysis.analysis_confidence * 100) : 50;
            modal.querySelector('#mood-modal-meta').textContent = `Analyzed ${totalReviews} Goodreads reviews. Vibe confidence: ${confidenceScore}%.`;
        };

        // 2. Fetch or load from cache
        if (moodAnalysisCache.has(cacheKey)) {
            if (IS_DEV) console.log(`Cache hit for mood analysis: ${cacheKey}`);
            renderResults(moodAnalysisCache.get(cacheKey));
            return;
        }

        showLoader();

        try {
            const csrf = getCookie('csrf_access_token');
            const headers = { 'Content-Type': 'application/json' };
            if (csrf) {
                headers['X-CSRF-TOKEN'] = csrf;
            }

            const res = await fetch(`${MOOD_API_BASE}/analyze-mood`, {
                method: 'POST',
                headers,
                credentials: 'include',
                body: JSON.stringify({ title, author })
            });

            if (res.ok) {
                const data = await res.json();
                const analysis = data.data?.mood_analysis || data.mood_analysis;
                if (analysis && analysis.success) {
                    moodAnalysisCache.set(cacheKey, analysis);
                    renderResults(analysis);
                } else {
                    showError(analysis?.error || 'Could not parse mood analysis for this book.');
                }
            } else {
                if (res.status === 429) {
                    const data = await res.json().catch(() => ({}));
                    const retryAfter = data.retry_after || 60;
                    showError(`Rate limit exceeded. Please try again in ${retryAfter} seconds.`);
                } else if (res.status === 503) {
                    showError('Mood analysis is currently offline (missing backend dependencies).');
                } else if (res.status === 404) {
                    showError('No Goodreads reviews found for this title to analyze.');
                } else {
                    showError(`Failed to fetch mood analysis (Server error: ${res.status}).`);
                }
            }
        } catch (err) {
            console.error('Failed to explore book mood:', err);
            showError('Network error connecting to mood analysis service.');
        }
    }

    getMoodIcon(mood) {
        if (!mood) return 'fa-tag';
        const icons = {
            'melancholic': 'fa-cloud-showers-heavy',
            'melancholy': 'fa-cloud-showers-heavy',
            'cozy': 'fa-mug-hot',
            'tense': 'fa-bolt',
            'intense': 'fa-bolt',
            'inspiring': 'fa-lightbulb',
            'uplifting': 'fa-lightbulb',
            'whimsical': 'fa-wand-magic-sparkles',
            'dark': 'fa-moon',
            'adventurous': 'fa-compass',
            'mysterious': 'fa-eye',
            'romantic': 'fa-heart',
            'atmospheric': 'fa-wind',
            'thoughtful': 'fa-brain',
            'thought-provoking': 'fa-brain',
            'emotional': 'fa-face-sad-tear'
        };
        return icons[mood.toLowerCase().trim()] || 'fa-tag';
    }

    async renderCuratedSection(query, elementId, maxResults = 5) {
        const container = document.getElementById(elementId);
        if (!container) return;

        // Show skeletons while loading
        this.renderSkeletons(container, maxResults);

        try {
            const client = window.GoogleBooksClient;
            const data = await client.fetchVolumes(query, { maxResults, extraParams: '&printType=books' });

            if (data.items && data.items.length > 0) {
                await this.renderBookCards(container, data.items.slice(0, maxResults));
            } else {
                const fallbackBooks = getFallbackBooks(query, maxResults);
                if (fallbackBooks.length > 0 && container.id !== 'search-results-grid') {
                    await this.renderBookCards(container, fallbackBooks);
                } else if (container.id === 'search-results-grid') {
                    showNoResults();
                } else {
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fa-solid fa-box-open"></i>
                            <p>No books found. The shelves are empty.</p>
                        </div>`;
                }
            }
        } catch (err) {
            console.error("Failed to fetch books", err);
            const fallbackBooks = getFallbackBooks(query, maxResults);
            if (fallbackBooks.length > 0 && container.id !== 'search-results-grid') {
                await this.renderBookCards(container, fallbackBooks);
                return;
            } else if (container.id === 'search-results-grid') {
                showNoResults();
                return;
            }
    }
}

    async renderMoodCategorySection(categoryConfig, elementId, maxResults = 5) {
        const container = document.getElementById(elementId);
        if (!container) return;

        this.renderSkeletons(container, maxResults);

        try {
            const res = await fetch(`${MOOD_API_BASE}/category-books`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
                body: JSON.stringify({
                    category: categoryConfig.category,
                    vibe_description: categoryConfig.vibeDescription,
                    count: maxResults
                })
            });

            if (!res.ok) {
                throw new Error(`Category API Error: ${res.status}`);
            }

            const payload = await res.json();
            const categoryBooks = payload?.data?.books || [];

            if (categoryBooks.length === 0) {
                throw new Error(`No books returned for category: ${categoryConfig.category}`);
            }

            const resolvedBooks = await this.resolveCategoryBooks(categoryBooks);
            if (resolvedBooks.length > 0) {
                await this.renderBookCards(container, resolvedBooks.slice(0, maxResults));
                return;
            }

            throw new Error(`Could not resolve Google Books matches for category: ${categoryConfig.category}`);
        } catch (err) {
            console.error(`Failed to load category shelf "${categoryConfig.category}"`, err);
            const categoryFallbackBooks = getHardcodedBooksByTheme(`${categoryConfig.category} ${categoryConfig.fallbackQuery}`, maxResults);
            if (categoryFallbackBooks.length > 0) {
                await this.renderBookCards(container, categoryFallbackBooks);
                return;
            }
            await this.renderCuratedSection(categoryConfig.fallbackQuery, elementId, maxResults);
        }
    }

    async resolveCategoryBooks(categoryBooks) {
        const resolvedBooks = [];

        for (const item of categoryBooks) {
            const title = String(item?.title || '').trim();
            const author = String(item?.author || '').trim();
            if (!title) continue;

            const searchQuery = author
                ? `intitle:${title} inauthor:${author}`
                : `intitle:${title}`;

            try {
                const data = await window.GoogleBooksClient.fetchVolumes(searchQuery, { maxResults: 1, extraParams: '&printType=books' });

                const matchedBook = data?.items?.[0];
                if (matchedBook) {
                    matchedBook.categoryReason = item.reason || '';
                    resolvedBooks.push(matchedBook);
                }
            } catch (error) {
                console.warn(`Failed to resolve category book "${title}"`, error);
            }
        }

        return resolvedBooks;
    }

    async renderBookCards(container, books) {
        if (container.id === 'search-results-grid') {
            if (!books || books.length === 0) {
                showNoResults();
                return;
            }
            hideNoResults();
            window.searchFilterManager = new SearchFilterManager(container, books, this);
            return;
        }

        container.innerHTML = '';
        if (!books || books.length === 0) {
            container.innerHTML = '<p class="empty-state">No books available for this collection.</p>';
            return;
        }

        for (const book of books) {
            try {
                const bookElement = await this.createBookElement(book);
                if (bookElement) {
                    container.appendChild(bookElement);
                }
            } catch (err) {
                console.error("Failed to render individual book:", book.id, err);
                // Continue to next book instead of breaking the row
            }
        }

        // If nothing was rendered, show error
        if (container.children.length === 0) {
            container.innerHTML = '<p class="empty-state">Failed to load books. Please check your connection.</p>';
        }

        
    }
}

class SearchFilterManager {
    constructor(container, books, renderer) {
        this.container = container;
        this.books = books;
        this.renderer = renderer;
        this.activeFilter = null;
        this.uniqueMoods = new Set();
        this.bookElements = new Map(); // bookId -> bookSceneElement

        // Initialize UI elements
        this.filterBar = document.getElementById('mood-filter-bar');
        this.chipsContainer = document.getElementById('filter-chips');

        if (this.filterBar && this.chipsContainer) {
            this.filterBar.hidden = false;
            this.chipsContainer.innerHTML = '';
        }

        // Restore active filter from URL query params or sessionStorage if exists
        const urlParams = new URLSearchParams(window.location.search);
        this.activeFilter = urlParams.get('mood') || sessionStorage.getItem('active_mood_filter');

        this.init();
    }

    async init() {
        // Clear previous grid
        this.container.innerHTML = '';

        // Render all books first
        for (const book of this.books) {
            try {
                const bookElement = await this.renderer.createBookElement(book);
                if (bookElement) {
                    this.container.appendChild(bookElement);
                    this.bookElements.set(book.id, bookElement);
                }
            } catch (err) {
                console.error("Failed to render book in search filter:", book.id, err);
            }
        }

        // Process hydration in a staggered fashion to avoid 429 rate limits
        let delayMs = 0;
        for (const book of this.books) {
            const bookElement = this.bookElements.get(book.id);
            if (bookElement) {
                setTimeout(() => {
                    this.hydrateBookMoodTags(book, bookElement);
                }, delayMs);
                delayMs += 350; // Stagger by 350ms to respect backend rate limits
            }
        }

        // If no elements were rendered, show error/empty
        if (this.container.children.length === 0) {
            this.container.innerHTML = '<p class="empty-state">No books available for this collection.</p>';
        }
    }

    async hydrateBookMoodTags(book, bookElement, retryCount = 0) {
        const title = book.volumeInfo?.title || "Untitled";
        const authors = book.volumeInfo?.authors ? book.volumeInfo?.authors.join(", ") : "Unknown Author";

        try {
            const res = await this.renderer.fetchMoodTags(title, authors);

            if (res && res.status === 429) {
                // Rate limited! Retry after a delay if retryCount < 3
                if (retryCount < 3) {
                    const backoff = (retryCount + 1) * 1000;
                    setTimeout(() => {
                        this.hydrateBookMoodTags(book, bookElement, retryCount + 1);
                    }, backoff);
                    return;
                }
            }

            if (res && res.ok) {
                const data = await res.json();
                const moods = data.data?.mood_tags || [];
                if (moods && moods.length > 0) {
                    book.moods = moods; // Save to book object

                    // Update back face tags in DOM
                    const backFace = bookElement.querySelector('.book__face--back > div');
                    if (backFace) {
                        let tagsEl = backFace.querySelector('.book-mood-tags');
                        if (!tagsEl) {
                            tagsEl = document.createElement('div');
                            tagsEl.className = 'book-mood-tags';
                            tagsEl.style.cssText = 'margin-bottom: 0.8rem; display: flex; flex-wrap: wrap; gap: 4px;';
                            backFace.appendChild(tagsEl);
                        }
                        tagsEl.innerHTML = moods.map(m => `
                            <span class="mood-tag-badge" data-mood="${m}" style="font-size: 0.6rem; background: rgba(0,0,0,0.1); padding: 2px 6px; border-radius: 10px; text-transform: capitalize; color: var(--text-main);">
                                <i class="fa-solid ${this.renderer.getMoodIcon(m)}"></i> ${m}
                            </span>
                        `).join('');
                    }

                    // Add to unique moods set
                    moods.forEach(mood => {
                        // Standardize casing to capitalize first letter for cleaner chips display
                        const cleanMood = mood.charAt(0).toUpperCase() + mood.slice(1).toLowerCase();
                        this.uniqueMoods.add(cleanMood);
                    });

                    // Update filter chips bar
                    this.renderFilterChips();

                    // If this book matches the active filter
                    this.updateBookVisibility(book.id);
                }
            }
        } catch (e) {
            console.warn("Failed to hydrate mood tags for", title, e);
        }
    }

    renderFilterChips() {
        if (!this.chipsContainer) return;

        // If no moods loaded yet, don't show the bar
        if (this.uniqueMoods.size === 0) {
            this.filterBar.hidden = true;
            return;
        }

        this.filterBar.hidden = false;

        // Save current active element scroll or cursor position if needed
        const prevScrollLeft = this.chipsContainer.scrollLeft;

        this.chipsContainer.innerHTML = '';

        // 1. Add "All" or "Clear Filter" chip
        const allChip = document.createElement('div');
        allChip.className = `filter-chip ${!this.activeFilter ? 'active' : ''}`;
        allChip.innerHTML = `<i class="fa-solid fa-border-all"></i> All`;
        allChip.addEventListener('click', () => this.setFilter(null));
        this.chipsContainer.appendChild(allChip);

        // 2. Add dynamic chips for unique moods
        const sortedMoods = Array.from(this.uniqueMoods).sort();
        sortedMoods.forEach(mood => {
            const isChipActive = this.activeFilter && this.activeFilter.toLowerCase() === mood.toLowerCase();
            const chip = document.createElement('div');
            chip.className = `filter-chip ${isChipActive ? 'active' : ''}`;
            chip.innerHTML = `<i class="fa-solid ${this.renderer.getMoodIcon(mood)}"></i> ${mood}`;
            chip.addEventListener('click', () => this.setFilter(mood));
            this.chipsContainer.appendChild(chip);
        });

        // Restore scroll position
        this.chipsContainer.scrollLeft = prevScrollLeft;
    }

    setFilter(mood) {
        if (mood) {
            this.activeFilter = mood.toLowerCase();
            sessionStorage.setItem('active_mood_filter', this.activeFilter);

            // Update URL query parameters without reloading the page
            const url = new URL(window.location);
            url.searchParams.set('mood', this.activeFilter);
            window.history.pushState({}, '', url);
        } else {
            this.activeFilter = null;
            sessionStorage.removeItem('active_mood_filter');

            // Remove mood query param
            const url = new URL(window.location);
            url.searchParams.delete('mood');
            window.history.pushState({}, '', url);
        }

        // Render chips state update
        this.renderFilterChips();

        // Apply filtering logic to book elements
        this.applyFilter();
    }

    updateBookVisibility(bookId) {
        const element = this.bookElements.get(bookId);
        if (!element) return;

        const book = this.books.find(b => b.id === bookId);
        if (!book) return;

        let visible = true;
        if (this.activeFilter) {
            const bookMoods = (book.moods || []).map(m => m.toLowerCase());
            visible = bookMoods.includes(this.activeFilter);
        }

        if (visible) {
            element.style.display = 'block';
            element.classList.remove('filtered-out');
        } else {
            element.style.display = 'none';
            element.classList.add('filtered-out');
        }
    }

    applyFilter() {
        let visibleCount = 0;

        for (const [bookId, element] of this.bookElements.entries()) {
            const book = this.books.find(b => b.id === bookId);
            if (!book) continue;

            let visible = true;
            if (this.activeFilter) {
                const bookMoods = (book.moods || []).map(m => m.toLowerCase());
                visible = bookMoods.includes(this.activeFilter);
            }

            if (visible) {
                element.style.display = 'block';
                element.classList.remove('filtered-out');
                visibleCount++;
            } else {
                element.style.display = 'none';
                element.classList.add('filtered-out');
            }
        }

        // Handle empty matching filter state
        const existingEmptyState = this.container.querySelector('.empty-filter-state');
        if (existingEmptyState) {
            existingEmptyState.remove();
        }

        if (visibleCount === 0 && this.books.length > 0) {
            const emptyState = document.createElement('div');
            emptyState.className = 'empty-filter-state';
            emptyState.id = 'empty-filter-state';

            const activeMoodName = this.activeFilter.charAt(0).toUpperCase() + this.activeFilter.slice(1);
            emptyState.innerHTML = `
                <i class="fa-solid ${this.renderer.getMoodIcon(this.activeFilter)}"></i>
                <h3>No "${activeMoodName}" vibes on this shelf</h3>
                <p>Try selecting a different mood chip to explore other avenues.</p>
            `;
            this.container.appendChild(emptyState);
        }
    }
}

class LibraryManager {
    constructor() {
        this.storageKey = 'bibliodrift_library';
        // Initialize with empty library to prevent crashes during async load
        this.library = {
            current: [],
            want: [],
            finished: []
        };


        this.apiBase = MOOD_API_BASE; // Fixed: Use global constant (Issue #7)

        // Asynchronous initialization
        this._initPromise = this.init();
    }

    async ready() {
        await this._initPromise;
        return this;
    }

    async init() {
        // 1. Request persistent storage to prevent wipes
        await SafeStorage.requestPersistence();

        const user = this.getUser();
        let storedLibrary = null;

        // 2. Load from Dexie IndexedDB (Issue #875)
        if (user && window.db?.userLibrary) {
            try {
                const record = await window.db.userLibrary.get(user.id);
                if (record && record.library) {
                    storedLibrary = record.library;
                }
            } catch (e) {
                console.error("[Library] Failed to read from Dexie", e);
            }
        }

        // Fallback to SafeStorage for migration
        if (!storedLibrary) {
            const stored = await SafeStorage.getAsync(this.storageKey);
            if (stored) {
                try {
                    storedLibrary = JSON.parse(stored);
                } catch (e) {
                    console.error("[Library] Failed to parse stored library, resetting to empty.", e);
                }
            }
        }

        if (storedLibrary) {
            this.library = storedLibrary;
            // Migrate to Dexie immediately
            if (user && window.db?.userLibrary) {
                window.db.userLibrary.put({ userId: user.id, library: this.library }).catch(e => console.error(e));
            }
        }

        // 3. Setup sorting and trigger initial fast render
        this.setupSorting();

        if (document.getElementById('shelf-want')) {
            // Fast Render from local data
            this.renderShelf('want', 'shelf-want');
            this.renderShelf('current', 'shelf-current');
            this.renderShelf('finished', 'shelf-finished');
        }

        // 4. Sync with backend if available (Background Refresh)
        if (!storedLibrary) {
            await this.syncWithBackend();
            if (navigator.onLine) {
                await this.flushPendingLibraryMutations();
            }
            await this.updateSyncStatus();
        } else {
            // Background sync (stale-while-revalidate strategy)
            (async () => {
                try {
                    await this.syncWithBackend();
                    if (navigator.onLine) {
                        await this.flushPendingLibraryMutations();
                    }
                    await this.updateSyncStatus();
                } catch (e) {
                    console.error("[Library] Background sync failed", e);
                }
            })();
        }
    }

    getUser() {
        const userStr = SafeStorage.get('bibliodrift_user');
        return userStr ? JSON.parse(userStr) : null;
    }

    getAuthHeaders() {
        const csrfToken = getCookie('csrf_access_token');
        const headers = {
            'Content-Type': 'application/json'
        };
        // CSRF protection for cookie-based auth
        if (csrfToken) {
            headers['X-CSRF-TOKEN'] = csrfToken;
        }
        return new Headers(headers);
    }

    async _getPendingSyncCount() {
        const user = this.getUser();
        if (!user || !window.db?.syncQueue) return 0;
        return await window.db.syncQueue.where('userId').equals(user.id).count();
    }

    async updateSyncStatus() {
        const statusEl = document.getElementById('library-sync-status');
        if (!statusEl) return;

        const pendingCount = await this._getPendingSyncCount();
        statusEl.hidden = false;
        statusEl.textContent = pendingCount > 0
            ? `${pendingCount} pending sync${pendingCount === 1 ? '' : 's'}`
            : 'Synced';
        statusEl.dataset.state = pendingCount > 0 ? 'pending' : 'synced';
    }

    async _queueMutation(action, book, extra = {}) {
        if (typeof window.enqueueLibraryMutation !== 'function') return;

        const user = this.getUser();
        if (!user || !window.db?.syncQueue) return;

        const snapshot = JSON.parse(JSON.stringify(book));

        const existingMutations = (await window.db.syncQueue.where('userId').equals(user.id).toArray())
            .filter((mutation) => mutation.bookId === snapshot.id);

        if (action === 'remove') {
            await Promise.all(existingMutations.map((mutation) => window.db.syncQueue.delete(mutation.id)));
            await this.updateSyncStatus();
            return;
        }

        const shelf = extra.shelf || this.findBookShelf(snapshot.id) || null;
        const mergedMutation = {
            userId: user.id,
            action,
            bookId: snapshot.id,
            db_id: snapshot.db_id || null,
            shelf,
            payload: extra,
            book: snapshot
        };

        const pendingAdd = existingMutations.find((mutation) => mutation.action === 'add');
        if (pendingAdd && (action === 'move' || action === 'update')) {
            await window.db.syncQueue.put({
                ...pendingAdd,
                db_id: mergedMutation.db_id || pendingAdd.db_id || null,
                shelf: action === 'move' ? extra.toShelf || pendingAdd.shelf : pendingAdd.shelf,
                payload: {
                    ...(pendingAdd.payload || {}),
                    ...extra
                },
                book: snapshot,
                createdAt: pendingAdd.createdAt || new Date().toISOString()
            });
            await this.updateSyncStatus();
            return;
        }

        if (action === 'add') {
            await Promise.all(existingMutations.map((mutation) => window.db.syncQueue.delete(mutation.id)));
        }

        await window.enqueueLibraryMutation(mergedMutation);
        await this.updateSyncStatus();
    }

    async _applyQueuedMutation(mutation) {
        const user = this.getUser();
        if (!user) return;

        const localBookResult = this.findBookInShelf(mutation.bookId);
        const localBook = localBookResult?.book || mutation.book;
        const dbId = localBook?.db_id || mutation.db_id;

        if (mutation.action === 'add') {
            if (!localBook) return;

            const payload = {
                user_id: user.id,
                google_books_id: localBook.id,
                title: localBook.volumeInfo?.title || localBook.title || '',
                authors: localBook.volumeInfo?.authors ? localBook.volumeInfo.authors.join(', ') : '',
                thumbnail: localBook.volumeInfo?.imageLinks?.thumbnail || '',
                shelf_type: mutation.shelf || mutation.payload?.shelf || 'want'
            };

            const res = await fetch(`${this.apiBase}/library`, {
                method: 'POST',
                headers: this.getAuthHeaders(),
                credentials: 'include',
                body: JSON.stringify(payload)
            });

            if (!res.ok) {
                const data = await res.json().catch(() => ({}));
                throw new Error(data.error || `HTTP ${res.status}`);
            }

            const data = await res.json();
            if (localBook) {
                localBook.db_id = data.item.id;
                localBook.version = data.item.version;
                this.saveLocally();
            }
            return;
        }

        if (mutation.action === 'remove') {
            if (!dbId) return;

            const res = await fetch(`${this.apiBase}/library/${dbId}`, {
                method: 'DELETE',
                headers: this.getAuthHeaders(),
                credentials: 'include'
            });

            if (!res.ok) {
                const data = await res.json().catch(() => ({}));
                throw new Error(data.error || `HTTP ${res.status}`);
            }
            return;
        }

        if (mutation.action === 'move' || mutation.action === 'update') {
            if (!dbId || !localBook) return;

            const body = mutation.action === 'move'
                ? {
                    shelf_type: mutation.payload?.toShelf,
                    progress: localBook.progress,
                    version: localBook.version
                }
                : {
                    ...mutation.payload?.updates,
                    version: localBook.version
                };

            const res = await fetch(`${this.apiBase}/library/${dbId}`, {
                method: 'PUT',
                headers: this.getAuthHeaders(),
                credentials: 'include',
                body: JSON.stringify(body)
            });

            if (!res.ok) {
                const data = await res.json().catch(() => ({}));
                throw new Error(data.error || `HTTP ${res.status}`);
            }

            const data = await res.json();
            localBook.version = data.item.version;
            this.saveLocally();
        }
    }

    async flushPendingLibraryMutations() {
        const user = this.getUser();
        if (!user || !window.db?.syncQueue) {
            await this.updateSyncStatus();
            return 0;
        }

        const pendingMutations = await window.db.syncQueue.where('userId').equals(user.id).sortBy('createdAt');
        if (pendingMutations.length === 0) {
            await this.updateSyncStatus();
            return 0;
        }

        let processed = 0;
        for (const mutation of pendingMutations) {
            await this._applyQueuedMutation(mutation);
            await window.db.syncQueue.delete(mutation.id);
            processed += 1;
        }

        if (processed > 0) {
            await this.syncWithBackend();
        }

        await this.updateSyncStatus();
        return processed;
    }

    async syncWithBackend() {
        const user = this.getUser();
        if (!user) return;

        try {
            const res = await fetch(`${this.apiBase}/library/${user.id}`, {
                headers: this.getAuthHeaders(),
                credentials: 'include'
            });
            if (res.ok) {
                const data = await res.json();

                // Merge Strategy:
                // 1. Create a map of existing local books for quick lookup
                const localBooksMap = new Map();
                ['current', 'want', 'finished'].forEach(shelf => {
                    this.library[shelf].forEach(book => {
                        localBooksMap.set(book.id, { book, shelf });
                    });
                });

                // 2. Process backend books
                data.library.forEach(item => {
                    const existing = localBooksMap.get(item.google_books_id);

                    // Construct standard book object
                    const remoteBook = {
                        id: item.google_books_id,
                        db_id: item.id,
                        version: item.version,
                        volumeInfo: {
                            title: item.title,
                            authors: item.authors ? item.authors.split(', ') : [],
                            imageLinks: { thumbnail: item.thumbnail }
                        },
                        // Backend data is authoritative during sync DOWN
                        progress: item.progress,
                        date_added: item.created_at || new Date().toISOString()
                    };

                    if (existing) {
                        const localBook = existing.book;

                        // Conflict Resolution Logic:
                        // If backend has a higher version, it wins.
                        if (item.version > (localBook.version || 0)) {
                            if (existing.shelf !== item.shelf_type) {
                                // Remove from old shelf
                                this.library[existing.shelf] = this.library[existing.shelf].filter(b => b.id !== item.google_books_id);
                                // Add to new shelf
                                this.library[item.shelf_type].push(remoteBook);
                            } else {
                                // Update details in place
                                Object.assign(localBook, remoteBook);
                            }
                        } else if (item.version === (localBook.version || 0)) {
                            // Versions match, just ensure db_id is set
                            localBook.db_id = item.id;
                        }
                        // If item.version < localBook.version, we have unsynced local changes.
                        // syncLocalToBackend will handle pushing these.

                        // Mark as processed/merged
                        localBooksMap.delete(item.google_books_id);
                    } else {
                        // New book from backend
                        if (this.library[item.shelf_type]) {
                            this.library[item.shelf_type].push(remoteBook);
                        }
                    }
                });

                // 3. Handle remaining local books (not in backend)
                // These could be:
                // a) Added offline and not yet synced -> Keep them
                // b) Deleted on another device -> Should remove?
                // For this implementation, we will KEEP them to prioritize no data loss (offline first).
                // Ideally, we'd check timestamps or have a specific "sync queue".

                this.saveLocally();

                // Trigger Render
                if (document.getElementById('shelf-want')) {
                    const sortSelect = document.getElementById('sortLibrary');
                    if (sortSelect && typeof this.sortLibrary === 'function') {
                        this.sortLibrary(sortSelect.value);
                    } else {
                        this.renderShelf('want', 'shelf-want');
                        this.renderShelf('current', 'shelf-current');
                        this.renderShelf('finished', 'shelf-finished');
                    }
                }
                await this.updateSyncStatus();
            }
        } catch (e) {
            console.error("Sync failed", e);
            showToast("Sync failed. Using local library.", "error");
        }
    }

    async syncLocalToBackend(user) {
        if (!user) return;

        // Flatten local library into a list of items with 'shelf' property
        const itemsToSync = [];
        ['current', 'want', 'finished'].forEach(shelf => {
            if (this.library[shelf]) {
                this.library[shelf].forEach(book => {
                    // Sync both new (anonymous) items and potentially updated items (with db_id)
                    // If book.db_id is present, it's an update. If not, it's a new item.
                    itemsToSync.push({
                        ...book,
                        shelf: shelf,
                        // Ensure version is sent if present
                        version: book.version || 0
                    });
                });
            }
        });

        if (itemsToSync.length === 0) return; // Nothing to sync

        try {
            if (IS_DEV) {
                console.log(`Syncing ${itemsToSync.length} items to backend...`);
            }
            const res = await fetch(`${this.apiBase}/library/sync`, {
                method: 'POST',
                headers: this.getAuthHeaders(),
                credentials: 'include',
                body: JSON.stringify({
                    user_id: user.id,
                    items: itemsToSync
                })
            });

            if (res.ok) {
                const data = await res.json();
                if (IS_DEV) {
                    console.log("Sync result:", data);
                }

                if (data.conflicts > 0) {
                    showToast(`Synced ${data.message} (${data.conflicts} conflicts resolved by server)`, "info");
                } else {
                    showToast(`Synced ${data.message}`, "success");
                }

                // After upload, pull fresh state from backend to get the new DB IDs and versions
                await this.syncWithBackend();
                await this.updateSyncStatus();
            } else {
                const data = await res.json();
                console.error("Backend refused sync", data);
                showToast("Sync failed: " + (data.error || "Server error"), "error");
            }
        } catch (e) {
            console.error("Sync upload failed", e);
            showToast("Failed to upload local library", "error");
        }
    }

    setupSorting() {
        const sortSelect = document.getElementById('library-sort');
        if (sortSelect) {
            sortSelect.addEventListener('change', (e) => {
                this.sortLibrary(e.target.value);
            });
        }

        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                const query = e.target.value.toLowerCase();
                this.filterLibrary(query);
            });
        }
    }

    filterLibrary(query) {
        ['current', 'want', 'finished'].forEach(shelf => {
            const containerId = `shelf-${shelf}-3d`;
            const container = document.getElementById(containerId);
            if (!container) return;

            const books = this.library[shelf];
            const filtered = books.filter(book => {
                const title = (book.volumeInfo.title || "").toLowerCase();
                const author = (book.volumeInfo.authors || []).join(" ").toLowerCase();
                const moods = (book.moods || []).join(" ").toLowerCase();
                return title.includes(query) || author.includes(query) || moods.includes(query);
            });

            this.renderFilteredShelf(shelf, containerId, filtered);
        });
    }

    async renderFilteredShelf(shelfName, elementId, books) {
        const container = document.getElementById(elementId);
        if (!container) return;

        container.innerHTML = '';
        if (books.length === 0) {
            container.innerHTML = '<div class="empty-state">No matching books found.</div>';
            return;
        }

        try {
            const renderer = new BookRenderer(this);
            for (const book of books) {
                const el = await renderer.createBookElement(book, shelfName);
                container.appendChild(el);
            }
        } catch (error) {
            console.error(`[Library] Error rendering filtered shelf:`, error);
        }
    }

    sortLibrary(criteria) {
        const sortFn = (a, b) => {
            switch (criteria) {
                case 'date_desc':
                    return new Date(b.date_added || 0) - new Date(a.date_added || 0);
                case 'date_asc':
                    return new Date(a.date_added || 0) - new Date(b.date_added || 0);
                case 'title':
                case 'title_asc':
                    return (a.volumeInfo.title || "").localeCompare(b.volumeInfo.title || "");
                case 'title_desc':
                    return (b.volumeInfo.title || "").localeCompare(a.volumeInfo.title || "");
                case 'author':
                case 'author_asc':
                    const authorA = (a.volumeInfo.authors && a.volumeInfo.authors[0]) || "";
                    const authorB = (b.volumeInfo.authors && b.volumeInfo.authors[0]) || "";
                    return authorA.localeCompare(authorB);
                case 'mood':
                    // Sort by primary mood if available
                    const moodA = (a.moods && a.moods[0]) || "zzz"; // push untagged to bottom
                    const moodB = (b.moods && b.moods[0]) || "zzz";
                    return moodA.localeCompare(moodB);
                case 'rating':
                    return (b.volumeInfo.averageRating || 0) - (a.volumeInfo.averageRating || 0);
                default:
                    return 0;
            }
        };

        ['current', 'want', 'finished'].forEach(shelf => {
            if (this.library[shelf]) {
                this.library[shelf].sort(sortFn);
                // If we have a dedicated 3D renderer, let it handle the UI to avoid duplicate rendering
                if (window.bookshelf3D && typeof window.bookshelf3D.refreshShelves === 'function') {
                    window.bookshelf3D.refreshShelves();
                } else {
                    this.renderShelf(shelf, `shelf-${shelf}-3d`);
                }
            }
        });
    }

    async addBook(book, shelf) {
        // Check if book exists ANYWHERE in library specifically by ID
        if (this.findBook(book.id)) {
            // It exists. Check where.
            const existingShelf = this.findBookShelf(book.id);
            if (existingShelf === shelf) {
                showToast("Book already in this shelf!", "info");
                return;
            } else if (existingShelf) {
                // Move logic? For now, prevent duplicates and notify user.
                // Or allow "moving" implicitly? 
                // Let's implement move: Remove from old, add to new.
                this.removeBook(book.id);
                // Fall through to add
                showToast(`Moved book from ${existingShelf} to ${shelf}`, "info");
            }
        }

        const enrichedBook = {
            ...book,
            progress: shelf === 'current' ? 0 : null,
            date_added: new Date().toISOString()
        };

        // 1. Update Local State
        this.library[shelf].push(enrichedBook);
        this.saveLocally();
        if (IS_DEV) {
            console.log(`Added ${book.volumeInfo.title} to ${shelf}`);
        }
        if (typeof window.logReadingActivity === 'function') {
            window.logReadingActivity('add', `Added "${book.volumeInfo.title}" to ${shelf}`);
        }

        // 2. Update Backend
        const user = this.getUser();
        if (user) {
            try {
                const payload = {
                    user_id: user.id,
                    google_books_id: book.id,
                    title: book.volumeInfo.title,
                    authors: book.volumeInfo.authors ? book.volumeInfo.authors.join(", ") : "",
                    thumbnail: book.volumeInfo.imageLinks ? book.volumeInfo.imageLinks.thumbnail : "",
                    shelf_type: shelf
                };

                const res = await fetch(`${this.apiBase}/library`, {
                    method: 'POST',
                    headers: this.getAuthHeaders(),
                    credentials: 'include',
                    body: JSON.stringify(payload)
                });

                if (res.ok) {
                    const data = await res.json();
                    // Store the DB ID and version back to the local object
                    enrichedBook.db_id = data.item.id;
                    enrichedBook.version = data.item.version;
                    this.saveLocally();
                    await this.updateSyncStatus();
                }
            } catch (e) {
                console.error("Failed to save to backend", e);
                await this._queueMutation('add', enrichedBook, { shelf });
                showToast("Saved locally; sync queued", "info");
            }
        }
    }


    async updateBook(id, updates) {
        const result = this.findBookInShelf(id);
        if (!result) return;

        const { shelf, book } = result;

        // 1. Update Local State
        Object.assign(book, updates);

        // Local "Finished" logic
        if (updates.progress === 100 && shelf !== 'finished') {
            // Remove from current, add to finished
            this.library[shelf] = this.library[shelf].filter(b => b.id !== id);
            this.library.finished.push(book);
            showToast(`Congrats! You finished ${book.volumeInfo.title}!`, "success");
            if (typeof window.logReadingActivity === 'function') {
                window.logReadingActivity('finish', `Finished reading "${book.volumeInfo.title}"`);
            }
        }

        this.saveLocally();

        // 2. Update Backend
        const user = this.getUser();
        if (user && book.db_id) {
            try {
                const res = await fetch(`${this.apiBase}/library/${book.db_id}`, {
                    method: 'PUT',
                    headers: this.getAuthHeaders(),
                    credentials: 'include',
                    body: JSON.stringify({
                        ...updates,
                        version: book.version // Optimistic locking
                    })
                });

                if (res.ok) {
                    const data = await res.json();
                    book.version = data.item.version;
                    this.saveLocally();
                    await this.updateSyncStatus();
                } else if (res.status === 409) {
                    const data = await res.json();
                    showToast("Conflict detected! Syncing with server...", "error");
                    // Optionally show a more detailed merge UI here
                    await this.syncWithBackend();
                } else {
                    const data = await res.json();
                    console.error("Update failed:", data.error);
                }
            } catch (e) {
                console.error("Failed to update backend", e);
                await this._queueMutation('update', book, { updates });
                showToast("Saved locally; sync queued", "info");
            }
        }
    }


    findBook(id) {
        for (const shelf in this.library) {
            if (this.library[shelf].some(b => b.id === id)) return true;
        }
        return false;
    }

    findBookShelf(id) {
        for (const shelf in this.library) {
            if (this.library[shelf].some(b => b.id === id)) return shelf;
        }
        return null;
    }

    findBookInShelf(id) {
        for (const shelf in this.library) {
            const book = this.library[shelf].find(b => b.id === id);
            if (book) return { shelf, book };
        }
        return null;
    }

    getShelfBooks(shelf) {
        return Array.isArray(this.library[shelf]) ? [...this.library[shelf]] : [];
    }

    getLibrarySnapshot() {
        return {
            current: this.getShelfBooks('current'),
            want: this.getShelfBooks('want'),
            finished: this.getShelfBooks('finished')
        };
    }

    async removeBook(id) {
        const result = this.findBookInShelf(id);
        if (result) {
            const { shelf, book } = result;

            // 1. Update Local
            this.library[shelf] = this.library[shelf].filter(b => b.id !== id);
            this.saveLocally();
            if (IS_DEV) {
                console.log(`Removed book ${id} from ${shelf}`);
            }

            // 2. Update Backend
            const user = this.getUser();
            // We need the DB ID to delete from backend usually, 
            // but our remove_from_library endpoint uses item_id (DB ID).
            // Do we have it?
            if (user && book.db_id) {
                try {
                    await fetch(`${this.apiBase}/library/${book.db_id}`, {
                        method: 'DELETE',
                        headers: this.getAuthHeaders(),
                        credentials: 'include'
                    });
                    await this.updateSyncStatus();
                } catch (e) {
                    console.error("Failed to delete from backend", e);
                    await this._queueMutation('remove', book, { shelf });
                    showToast("Removed locally; sync queued", "info");
                }
            } else if (user) {
                // Fallback: If we don't have db_id locally (maybe added before login logic), 
                // we might need to look it up or accept that local-only items can't be remotely deleted easily
                // without an API change to delete by google_id.
                // For MVP, we proceed.
                console.warn("Could not delete from backend: missing db_id");
            }

            return true;
        }
        return false;
    }

    async moveBook(id, toShelf) {
        const result = this.findBookInShelf(id);
        if (!result) return false;

        const { shelf: fromShelf, book } = result;
        if (fromShelf === toShelf) return true;
        if (!this.library[toShelf]) return false;

        this.library[fromShelf] = this.library[fromShelf].filter(b => b.id !== id);

        if (toShelf === 'finished' && book.progress !== 100) {
            book.progress = 100;
        } else if (toShelf === 'current' && (book.progress == null || book.progress === 100)) {
            book.progress = 0;
        }

        this.library[toShelf].push(book);
        this.saveLocally();

        const user = this.getUser();
        if (user && book.db_id) {
            try {
                const res = await fetch(`${this.apiBase}/library/${book.db_id}`, {
                    method: 'PUT',
                    headers: this.getAuthHeaders(),
                    credentials: 'include',
                    body: JSON.stringify({
                        shelf_type: toShelf,
                        progress: book.progress,
                        version: book.version
                    })
                });

                if (res.ok) {
                    const data = await res.json();
                    book.version = data.item.version;
                    this.saveLocally();
                    await this.updateSyncStatus();
                } else if (res.status === 409) {
                    showToast("Conflict detected! Syncing with server...", "error");
                    await this.syncWithBackend();
                    return false;
                } else {
                    const data = await res.json();
                    console.error("Move failed:", data.error);
                }
            } catch (e) {
                console.error("Failed to update backend during move", e);
                await this._queueMutation('move', book, { fromShelf, toShelf });
                showToast("Moved locally; sync queued", "info");
            }
        }

        await this.updateSyncStatus();
        return true;
    }

    saveLocally() {
        const user = this.getUser();
        if (user && window.db?.userLibrary) {
            window.db.userLibrary.put({ userId: user.id, library: this.library }).catch(e => console.error(e));
        }
        SafeStorage.set(this.storageKey, JSON.stringify(this.library));
    }

    async renderShelf(shelfName, elementId) {
        const container = document.getElementById(elementId);
        if (!container) return;
        const books = this.library[shelfName];
        if (books.length === 0) {
            // If we have no books, ensure empty state is visible (if we cleared it previously)
            container.innerHTML = '<div class="empty-state">This shelf is empty.</div>';
            return;
        }

        // Clear container for re-rendering (essential for sorting)
        container.innerHTML = '';

        try {
            for (const book of books) {
                const renderer = new BookRenderer(this);
                const el = await renderer.createBookElement(book, shelfName);
                container.appendChild(el);
            }
        } catch (error) {
            console.error(`[Library] Error rendering shelf ${shelfName}:`, error);
        }
    }
}


class ThemeManager {
    constructor() {
        this.themeKey = 'bibliodrift_theme';
        this.toggleBtn = null;
        this.currentTheme = 'light';

        // Named handler so we can safely remove/re-add without stacking listeners
        this._handler = this._onClick.bind(this);

        // Wait until the DOM is ready before querying #themeToggle
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => this.init(), { once: true });
        } else {
            this.init();
        }
    }

    _getStoredTheme() {
        // Safe fallback if SafeStorage is not loaded yet
        try {
            if (typeof SafeStorage !== 'undefined' && SafeStorage.get) {
                const stored = SafeStorage.get(this.themeKey);
                return stored === 'night' ? 'night' : 'light';
            }

            const stored = localStorage.getItem(this.themeKey);
            return stored === 'night' ? 'night' : 'light';
        } catch {
            return 'light';
        }
    }

    _saveTheme(theme) {
        try {
            if (typeof SafeStorage !== 'undefined' && SafeStorage.set) {
                SafeStorage.set(this.themeKey, theme);
            } else {
                localStorage.setItem(this.themeKey, theme);
            }
        } catch {
            // Ignore storage errors
        }
    }

    _onClick() {
        this.currentTheme =
            this.currentTheme === 'night' ? 'light' : 'night';

        this.applyTheme(this.currentTheme);
        this._saveTheme(this.currentTheme);
    }

    init() {
        // Re-query in case the button wasn't available during construction
        this.toggleBtn = document.getElementById('themeToggle');

        // Load saved theme and apply it even if the button doesn't exist
        this.currentTheme = this._getStoredTheme();
        this.applyTheme(this.currentTheme);

        // Exit if no toggle button on this page
        if (!this.toggleBtn) return;

        // Prevent duplicate listeners if init() runs more than once
        this.toggleBtn.removeEventListener('click', this._handler);
        this.toggleBtn.addEventListener('click', this._handler);
    }

    applyTheme(theme) {
        const isNight = theme === 'night';

        // Apply theme to <html>
        if (isNight) {
            document.documentElement.setAttribute('data-theme', 'night');
        } else {
            document.documentElement.removeAttribute('data-theme');
        }

        // Update toggle button icon and accessibility labels
        if (this.toggleBtn) {
            const icon = this.toggleBtn.querySelector('i');

            if (icon) {
                icon.className = isNight
                    ? 'fa-solid fa-sun'
                    : 'fa-solid fa-moon';
            }

            this.toggleBtn.title = isNight
                ? 'Switch to Light Mode'
                : 'Switch to Dark Mode';

            this.toggleBtn.setAttribute(
                'aria-label',
                this.toggleBtn.title
            );

            this.toggleBtn.setAttribute(
                'aria-pressed',
                String(isNight)
            );
        }
    }
}

// Initialize once
window.themeManager = new ThemeManager();

class GenreManager {
    constructor(libraryManager = null) {
        this.libraryManager = libraryManager;
        this.genreGrid = document.getElementById('genre-grid');
        this.modal = document.getElementById('genre-modal');
        this.closeBtn = document.getElementById('close-genre-modal');
        this.modalTitle = document.getElementById('genre-modal-title');
        this.booksGrid = document.getElementById('genre-books-grid');
    }

    init() {
        if (!this.genreGrid) return;

        // Add click listeners to genre cards
        const cards = this.genreGrid.querySelectorAll('.genre-card');
        cards.forEach(card => {
            card.addEventListener('click', () => {
                const genre = card.dataset.genre;
                this.openGenre(genre);
            });
        });

        // Close modal listeners
        if (this.closeBtn) {
            this.closeBtn.addEventListener('click', () => this.closeModal());
        }

        if (this.modal) {
            this.modal.addEventListener('click', (e) => {
                if (e.target === this.modal) this.closeModal();
            });
        }
    }

    openGenre(genre) {
        if (!this.modal) return;

        const genreName = genre.charAt(0).toUpperCase() + genre.slice(1);
        this.modalTitle.textContent = `${genreName} Books`;
        this.modal.showModal();
        document.body.style.overflow = 'hidden'; // Prevent scrolling

        this.fetchBooks(genre);
    }

    closeModal() {
        if (!this.modal) return;
        this.modal.close();
        document.body.style.overflow = ''; // Restore scrolling
    }

    async fetchBooks(genre) {
        if (!this.booksGrid) return;

        const genreQueries = {
            romance: 'subject:romance romance love story',
            mystery: 'subject:mystery detective suspense thriller',
            fiction: 'subject:fiction literary fiction bestselling',
            crime: 'subject:crime detective mystery true crime',
            fantasy: 'subject:fantasy magic epic adventure',
            thriller: 'subject:thriller suspense action mystery',
            biography: 'subject:biography memoir inspirational life story',
            'self-help': 'subject:self-help motivation personal growth wellness',
            science: 'subject:science technology popular science innovation',
            history: 'subject:history historical nonfiction events'
        };

        const searchQuery = genreQueries[genre] || `subject:${genre}`;

        // Show loading skeletons
        if (window.renderer) {
            window.renderer.renderSkeletons(this.booksGrid, 10);
        } else {
            this.booksGrid.innerHTML = `
                <div class="genre-loading">
                    <i class="fa-solid fa-spinner fa-spin"></i>
                    <span>Finding best ${genre} books...</span>
                </div>
            `;
        }

        try {
            const data = await window.GoogleBooksClient.fetchVolumes(searchQuery, { maxResults: 20, extraParams: '&langRestrict=en&orderBy=relevance' });

            const items = data.items || [];
            if (items.length > 0) {
                this.renderBooks(items);
            } else {
                this.renderBooks(getFallbackBooks(genre, 20));
            }
        } catch (error) {
            console.error('Error fetching genre books:', error);
            this.renderBooks(getFallbackBooks(genre, 20));
        }
    }

    async renderBooks(books) {
        this.booksGrid.innerHTML = '';


        const renderer = new BookRenderer(this.libraryManager);
        for (const book of books) {
            const el = await renderer.createBookElement(book);
            this.booksGrid.appendChild(el);
        }
    }
}

// Init
// --- Application Bootstrap ---
document.addEventListener('DOMContentLoaded', async () => {
    console.log('🚀 BiblioDrift Initializing...');

    // 1. Initialize Managers
    const libManager = new LibraryManager();
    window.libManager = libManager;
    window.dispatchEvent(new CustomEvent('bibliodrift:library-manager-ready', {
        detail: { libraryManager: libManager }
    }));
    libManager.ready().then(() => {
        window.dispatchEvent(new CustomEvent('bibliodrift:library-manager-synced', {
            detail: { libraryManager: libManager }
        }));
    });

    window.renderer = new BookRenderer(libManager);
    const themeManager = new ThemeManager();

    // 2. Load Config before rendering shelves so Google Books key is available.
    // await loadConfig(); // Removed: function is undefined and Google Books API works without key

    // --- AUTH LOGIC ---
    const toggleLink = document.getElementById('toggleText');
    const authTitle = document.getElementById('authTitle');
    const authBtn = document.getElementById('submitBtn');
    const authForm = document.getElementById('authForm');
    const nameField = document.getElementById('nameField');

    if (toggleLink && authTitle && authBtn && authForm) {
        let isLogin = true;
        authForm.dataset.mode = 'login';

        toggleLink.addEventListener('click', () => {
            isLogin = !isLogin;

            if (!isLogin) {
                // Switch to Register Mode
                authForm.dataset.mode = 'register';
                authTitle.textContent = 'Create Account';
                authBtn.textContent = 'Sign Up';
                toggleLink.textContent = 'Already have an account? Sign in.';
                if (nameField) nameField.style.display = 'block';
            } else {
                // Switch to Login Mode
                authForm.dataset.mode = 'login';
                authTitle.textContent = 'Welcome Back';
                authBtn.textContent = 'Sign In';
                toggleLink.textContent = 'No account? Create one.';
                if (nameField) nameField.style.display = 'none';
            }
        });
    }

    const genreManager = new GenreManager(libManager);
    genreManager.init();

    // ── No-results suggestion tag clicks ──
    document.querySelectorAll('.mood-suggestion-tag').forEach(btn => {
    btn.addEventListener('click', () => {
        const input = document.getElementById('searchInput');
        if (!input) return;
        input.value = btn.dataset.mood;
        window.location.href = `index.html?q=${encodeURIComponent(btn.dataset.mood)}`;
    });
    });

    const exportBtn = document.getElementById("export-library");
    if (exportBtn) {
        const isLibraryPage = document.getElementById("shelf-want");
        exportBtn.style.display = isLibraryPage ? "inline-flex" : "none";

        exportBtn.addEventListener("click", () => {
            const library = SafeStorage.get("bibliodrift_library");
            if (!library) {
                showToast("Library is empty!", "info");
                return;
            }
            const blob = new Blob([library], { type: "application/json" });
            const url = URL.createObjectURL(blob);

            const a = document.createElement("a");
            a.href = url;
            a.download = `bibliodrift_library_${new Date().toISOString().slice(0, 10)}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);

            URL.revokeObjectURL(url);
            showToast("Library exported successfully!", "success");
        });
    }



    const verifiedUser = await verifyStoredAuthSession();
    const isLoggedIn = !!verifiedUser;
    const authLink = document.getElementById('navAuthLink');
    const tooltip = document.getElementById('navAuthTooltip');
    renderAuthNavigation(authLink, tooltip, isLoggedIn);

    // Redirect if already logged in and on the sign-in page
    if (verifiedUser && window.location.pathname.endsWith('auth.html')) {
        window.location.href = 'profile.html';
        return;
    }

    if (verifiedUser) {
        await libManager.syncWithBackend();
    }

    const searchInput = document.getElementById('searchInput');
    const searchIcon = document.querySelector('.search-bar .search-icon');

    const performSearch = () => {
        if (searchInput && searchInput.value.trim()) {
            // Only redirect to discovery search if we're not already on the library page 
            // where search is handled by the local library filter.
            if (!window.location.pathname.includes('library.html')) {
                window.location.href = `${APP_ROUTE}?q=${encodeURIComponent(searchInput.value.trim())}`;
            }
        }
    };

    if (searchInput) {
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') performSearch();
        });
    }

    if (searchIcon) {
        searchIcon.style.cursor = 'pointer';
        searchIcon.addEventListener('click', performSearch);
    }

    const urlParams = new URLSearchParams(window.location.search);
    const query = urlParams.get('q');

    // Fill search box if query exists
    if (query && searchInput) {
        searchInput.value = query;
    }

    if (query && document.getElementById('search-results-section')) {
        const searchSection = document.getElementById('search-results-section');
        const queryDisplay = document.getElementById('search-query-display');

        queryDisplay.textContent = `Results for "${query}"`;
        searchSection.removeAttribute('hidden');

        // Hide other main content to focus on search without destroying modals
        document.querySelectorAll('.curated-section:not(#search-results-section), .hero').forEach(el => {
            el.style.display = 'none';
        });

        renderer.renderCuratedSection(query, 'search-results-grid', 20);

        // Fire-and-forget: fetch a matching ambient playlist for this mood query
        fetch(`${MOOD_API_BASE}/mood-search`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ query })
        }).then(res => res.ok ? res.json() : null).then(data => {
            window.dispatchEvent(new CustomEvent('bibliodrift:ambient-music', {
                detail: data?.data?.ambient_music || null
            }));
        }).catch(() => { /* playlist is optional; search results still render */ });
    } else if (document.getElementById('dynamic-shelves-container')) {
        console.log('📚 Initializing Curated Discovery Sections...');
        const container = document.getElementById('dynamic-shelves-container');
        const fallbackShelves = [
            { type: 'query', query: 'subject:mystery atmosphere', elementId: 'row-rainy', title: 'Rainy Evening Reads', subtitle: 'Mystery & Melancholy', icon: 'fa-cloud-rain' },
            { type: 'query', query: 'authors:arundhati roy|subject:india', elementId: 'row-indian', title: 'Indian Authors', subtitle: 'Subcontinent Voices', icon: 'fa-feather' },
            { type: 'query', query: 'subject:classic fiction', elementId: 'row-classics', title: 'Forgotten Classics', subtitle: 'Timeless & Dust-free', icon: 'fa-hourglass' },
            { type: 'query', query: 'subject:gothic fiction subject:dark academia subject:campus', elementId: 'row-dark-academia', title: 'Dark Academia', subtitle: 'Gothic, cerebral, candlelit', icon: 'fa-feather-pointed', vibeDescription: 'gothic, intellectual, melancholic, and candlelit', fallbackQuery: 'subject:gothic fiction subject:campus' },
            { type: 'query', query: 'subject:fiction', elementId: 'row-fiction', title: 'General Fiction', subtitle: 'Stories for everyone', icon: 'fa-book-open' },
            { type: 'query', query: 'subject:thriller suspense', elementId: 'row-thriller', title: 'Thriller & Suspense', subtitle: 'Edge of Your Seat', icon: 'fa-skull' }
        ];

        (async () => {
            try {
                let discoveryShelves = fallbackShelves;
                try {
                    const response = await fetch(`${MOOD_API_BASE}/content/live-shelves`);
                    if (response.ok) {
                        const data = await response.json();
                        if (data.success && data.data && data.data.shelves) {
                            discoveryShelves = data.data.shelves;
                        }
                    }
                } catch (apiErr) {
                    console.warn('⚠️ Could not fetch live shelves, falling back to local config:', apiErr);
                }

                // Render HTML for shelves
                container.innerHTML = discoveryShelves.map(shelf => `
                    <section class="curated-section">
                        <div class="section-header">
                            <h2>${shelf.title}</h2>
                            <span><i class="fa-solid ${shelf.icon}"></i> ${shelf.subtitle}</span>
                        </div>
                        <div class="curated-row" id="${shelf.elementId}"></div>
                    </section>
                `).join('');

                for (const shelf of discoveryShelves) {
                    if (shelf.type === 'category') {
                        await renderer.renderMoodCategorySection(shelf, shelf.elementId);
                    } else {
                        await renderer.renderCuratedSection(shelf.query, shelf.elementId);
                    }
                    await delay(500);
                }
                console.log('✅ Discovery shelves populated.');
            } catch (err) {
                console.error('❌ Critical error during shelf initialization:', err);
            }
        })();
    }

    // Re-rendering is now handled by libManager.init() asynchronously to ensure
    // data is loaded from IndexedDB backup if LocalStorage was wiped.
    // if (document.getElementById('shelf-want')) {
    //     libManager.renderShelf('want', 'shelf-want');
    //     libManager.renderShelf('current', 'shelf-current');
    //     libManager.renderShelf('finished', 'shelf-finished');
    // }


    // Check if Profile Page
    if (document.getElementById('profile-page')) {
        const user = verifiedUser;
        if (!user) {
            window.location.href = 'auth.html';
            return;
        }

        // populate User Info
        document.getElementById('profile-username').textContent = user.username || 'Bookworm';
        document.getElementById('profile-email').textContent = user.email || '';
        document.getElementById('profile-joined').textContent = user.created_at ? new Date(user.created_at).getFullYear() : '2024';

        // populate Stats
        const currentCount = libManager.library.current?.length || 0;
        const wantCount = libManager.library.want?.length || 0;
        const finishedCount = libManager.library.finished?.length || 0;

        const totalBooks = currentCount + wantCount + finishedCount;

        // Vibe/Genre calculation
        const allBooks = [
            ...(libManager.library.current || []),
            ...(libManager.library.want || []),
            ...(libManager.library.finished || [])
        ];

        const categoryCounts = {};
        allBooks.forEach(book => {
            const categories = book.volumeInfo?.categories || [];
            categories.forEach(cat => {
                categoryCounts[cat] = (categoryCounts[cat] || 0) + 1;
            });
        });

        let topVibe = 'Mystery'; // Fallback
        if (Object.keys(categoryCounts).length > 0) {
            topVibe = Object.keys(categoryCounts).reduce((a, b) => categoryCounts[a] > categoryCounts[b] ? a : b);
        } else if (totalBooks === 0) {
            topVibe = '-';
        }

        const statTotalEl = document.getElementById('stat-total');
        const statWantDashEl = document.getElementById('stat-want-dash');
        const statVibeEl = document.getElementById('stat-vibe');

        if (statTotalEl) statTotalEl.textContent = totalBooks;
        if (statWantDashEl) statWantDashEl.textContent = wantCount;
        if (statVibeEl) statVibeEl.textContent = topVibe;

        // Initialize Extended Stats (Goals, Streak, Leaderboard)
        const currentYear = new Date().getFullYear();
        if (document.getElementById('current-year-display')) {
            document.getElementById('current-year-display').textContent = currentYear;
        }

        const loadExtendedStats = async () => {
            const token = SafeStorage.get('bibliodrift_token');
            if (!token) return;

            try {
                // Fetch Stats & Goals
                const statsResponse = await fetch(`${MOOD_API_BASE}/stats?user_id=${user.id}&year=${currentYear}`, {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (statsResponse.ok) {
                    const stats = await statsResponse.json();

                    // Update Streak
                    if (stats.current_streak > 0) {
                        const streakBadge = document.getElementById('streak-badge');
                        const streakCount = document.getElementById('streak-count');
                        if (streakBadge && streakCount) {
                            streakBadge.style.display = 'inline-block';
                            streakCount.textContent = stats.current_streak;
                        }
                    }

                    // Update Goal Progress
                    if (stats.goal) {
                        const progressText = document.getElementById('goal-progress-text');
                        const barGoal = document.getElementById('bar-goal');
                        const target = stats.goal.target_books || 0;
                        const completed = stats.books_this_year || 0;

                        if (progressText) progressText.textContent = `${completed} / ${target} books`;
                        if (barGoal && target > 0) {
                            barGoal.style.width = `${Math.min(100, (completed / target) * 100)}%`;
                        }
                    } else {
                        const progressText = document.getElementById('goal-progress-text');
                        if (progressText) progressText.textContent = 'No goal set for this year';
                    }
                }

                // Fetch Leaderboard
                const lbResponse = await fetch(`${MOOD_API_BASE}/stats/leaderboard?year=${currentYear}&limit=5`, {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (lbResponse.ok) {
                    const leaderboard = await lbResponse.json();
                    const lbSection = document.getElementById('leaderboard-section');
                    const lbList = document.getElementById('leaderboard-list');

                    if (leaderboard && leaderboard.length > 0 && lbSection && lbList) {
                        lbSection.style.display = 'block';
                        lbList.innerHTML = leaderboard.map((entry, index) => `
                            <div class="leaderboard-entry" style="display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border-color); ${entry.user_id === user.id ? 'background: rgba(139, 115, 85, 0.1); border-radius: 8px;' : ''}">
                                <div style="display: flex; align-items: center; gap: 15px;">
                                    <span style="font-weight: bold; min-width: 25px;">#${index + 1}</span>
                                    <span>${entry.username} ${entry.user_id === user.id ? '(You)' : ''}</span>
                                </div>
                                <div style="text-align: right;">
                                    <div style="font-weight: 600;">${entry.total_books} books</div>
                                    <div style="font-size: 0.75rem; color: var(--text-muted);">${entry.total_pages.toLocaleString()} pages</div>
                                </div>
                            </div>
                        `).join('');
                    }
                }
            } catch (error) {
                console.error('Error loading extended stats:', error);
            }
        };

        // Goal Editing Logic
        const editGoalBtn = document.getElementById('edit-goal-btn');
        const saveGoalBtn = document.getElementById('save-goal-btn');
        const goalInput = document.getElementById('goal-input');
        const goalEditGroup = document.getElementById('goal-edit-group');

        if (editGoalBtn) {
            editGoalBtn.addEventListener('click', () => {
                goalEditGroup.style.display = goalEditGroup.style.display === 'none' ? 'flex' : 'none';
                if (goalEditGroup.style.display === 'flex') goalInput.focus();
            });
        }

        if (saveGoalBtn) {
            saveGoalBtn.addEventListener('click', async () => {
                const target = parseInt(goalInput.value);
                if (isNaN(target) || target < 1) return;

                const token = SafeStorage.get('bibliodrift_token');
                try {
                    const response = await fetch(`${MOOD_API_BASE}/stats/goal`, {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${token}`,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            user_id: user.id,
                            year: currentYear,
                            target_books: target
                        })
                    });

                    if (response.ok) {
                        goalEditGroup.style.display = 'none';
                        loadExtendedStats(); // Refresh
                    }
                } catch (error) {
                    console.error('Failed to save goal:', error);
                }
            });
        }

        loadExtendedStats();

        // =====================================================================
        // READER IDENTITY LOGIC
        // Fetches reviews, determines archetype/mood/cluster, and renders states.
        // =====================================================================
        const renderErrorIdentityState = () => {
            const identityContent = document.getElementById('reader-identity-content');
            if (!identityContent) return;

            identityContent.innerHTML = `
                <div class="error-state" style="padding: 1.5rem; text-align: center; color: var(--text-muted); background: rgba(229, 57, 53, 0.05); border: 1px solid rgba(229, 57, 53, 0.2); border-radius: 10px;">
                    <i class="fa-solid fa-triangle-exclamation" style="font-size: 2rem; color: #e53935; margin-bottom: 1rem; display: block;"></i>
                    <p style="margin-bottom: 1rem;">Failed to load Reader Identity profile.</p>
                    <button id="retry-identity-btn" class="action-btn-secondary" style="font-size: 0.8rem; padding: 4px 10px;">Retry</button>
                </div>
            `;

            const retryBtn = document.getElementById('retry-identity-btn');
            if (retryBtn) {
                retryBtn.addEventListener('click', () => {
                    loadReaderIdentity();
                });
            }
        };

        const fetchAndRenderArchetype = async (genres, reviewsList) => {
            const identityContent = document.getElementById('reader-identity-content');
            if (!identityContent) return;

            const token = SafeStorage.get('bibliodrift_token');
            const response = await fetch(`${MOOD_API_BASE}/reader-archetype`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ genres, reviews: reviewsList })
            });

            if (!response.ok) {
                throw new Error(`Failed to fetch archetype (Status: ${response.status})`);
            }

            const data = await response.json();
            if (!data.success || !data.reader_profile) {
                throw new Error('API returned unsuccessful profile generation');
            }

            const profile = data.reader_profile;
            const archetype = profile.archetype || "Unknown Reader";
            const mood = profile.reader_mood || "Balanced Analytical Reader";
            const sentimentScore = typeof profile.sentiment_score === 'number' ? profile.sentiment_score.toFixed(2) : '0.00';
            const cluster = typeof profile.reader_cluster === 'number' ? (profile.reader_cluster === -1 ? 'Unclassified' : `Group #${profile.reader_cluster}`) : 'Unclassified';

            const archetypeDescriptions = {
                "Deep Thinker": "Drawn to philosophy, existential questions, and reflective/psychological themes.",
                "Emotional Reader": "Connects deeply with romance, relationships, emotional journeys, and human feelings.",
                "Dark Reader": "Enjoys crime, violence, psychological thrillers, horror, and mystery.",
                "Adventurous Reader": "Seeks sci-fi, fantasy, action-packed adventures, and exploration."
            };
            const desc = archetypeDescriptions[archetype] || "Based on your current reading habits and preferences.";

            identityContent.innerHTML = `
                <div class="reader-identity-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem; text-align: left;">
                    <div class="identity-card" style="background: rgba(255, 255, 255, 0.03); padding: 1.2rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05);">
                        <div style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: 0.5px;">Reader Archetype</div>
                        <div style="font-size: 1.3rem; font-weight: 600; color: var(--accent-gold); display: flex; align-items: center; gap: 8px;">
                            <i class="fa-solid fa-brain" style="font-size: 1.3rem; margin: 0; color: var(--accent-gold);"></i> 
                            <span id="identity-archetype">${archetype}</span>
                        </div>
                        <div style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem;" id="identity-archetype-desc">
                            ${desc}
                        </div>
                    </div>
                    
                    <div class="identity-card" style="background: rgba(255, 255, 255, 0.03); padding: 1.2rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05);">
                        <div style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: 0.5px;">Reader Mood</div>
                        <div style="font-size: 1.3rem; font-weight: 600; color: var(--accent-gold); display: flex; align-items: center; gap: 8px;">
                            <i class="fa-solid fa-masks-theater" style="font-size: 1.3rem; margin: 0; color: var(--accent-gold);"></i> 
                            <span id="identity-mood">${mood}</span>
                        </div>
                        <div style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem;">
                            Sentiment Score: <strong id="identity-sentiment">${sentimentScore}</strong>
                        </div>
                    </div>

                    <div class="identity-card" style="background: rgba(255, 255, 255, 0.03); padding: 1.2rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05);">
                        <div style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; letter-spacing: 0.5px;">Reader Group</div>
                        <div style="font-size: 1.3rem; font-weight: 600; color: var(--accent-gold); display: flex; align-items: center; gap: 8px;">
                            <i class="fa-solid fa-people-group" style="font-size: 1.3rem; margin: 0; color: var(--accent-gold);"></i> 
                            <span id="identity-cluster">${cluster}</span>
                        </div>
                        <div style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem;">
                            Based on review text analysis.
                        </div>
                    </div>
                </div>
            `;
        };

        const renderEmptyIdentityState = (genres) => {
            const identityContent = document.getElementById('reader-identity-content');
            if (!identityContent) return;

            identityContent.innerHTML = `
                <div class="empty-state" style="padding: 1rem 0; text-align: center; color: var(--text-muted);">
                    <i class="fa-solid fa-circle-info" style="font-size: 2rem; color: var(--accent-gold); margin-bottom: 1rem; display: block;"></i>
                    <p style="margin-bottom: 1.5rem;">We couldn't find any reviews in your profile yet. Add reviews to your finished books to unlock your reader identity!</p>
                    <div style="max-width: 450px; margin: 0 auto; background: rgba(255, 255, 255, 0.02); padding: 1.5rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.05); text-align: left;">
                        <h4 style="color: var(--text-main); margin-bottom: 0.5rem;">Or try a quick test right now:</h4>
                        <p style="font-size: 0.85rem; margin-bottom: 1rem;">Write a brief summary of the kinds of books you love reading (e.g. "I love deep space adventures with complex characters"):</p>
                        <textarea id="onboarding-review-text" placeholder="I love exploring dark mystery novels and fast-paced thrillers..." style="width: 100%; height: 80px; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); margin-bottom: 1rem; font-family: inherit; font-size: 0.9rem; resize: none;"></textarea>
                        <button id="submit-onboarding-btn" class="action-btn-primary" style="font-size: 0.85rem; padding: 6px 15px;">Analyze Mood & Archetype</button>
                    </div>
                </div>
            `;

            const submitBtn = document.getElementById('submit-onboarding-btn');
            if (submitBtn) {
                submitBtn.addEventListener('click', async () => {
                    const textInput = document.getElementById('onboarding-review-text').value.trim();
                    if (!textInput) return;

                    identityContent.innerHTML = `
                        <div class="loading-state" style="padding: 2rem 0; text-align: center; color: var(--text-muted);">
                            <i class="fa-solid fa-spinner fa-spin" style="font-size: 2rem; color: var(--accent-gold); margin-bottom: 1rem; display: block;"></i>
                            <p>Analyzing your custom input...</p>
                        </div>
                    `;

                    try {
                        await fetchAndRenderArchetype(genres, [textInput]);
                    } catch (error) {
                        console.error('Error analyzing custom onboarding input:', error);
                        renderErrorIdentityState();
                    }
                });
            }
        };

        const loadReaderIdentity = async () => {
            const identityContent = document.getElementById('reader-identity-content');
            if (!identityContent) return;

            identityContent.innerHTML = `
                <div class="loading-state" style="padding: 2rem 0; text-align: center; color: var(--text-muted);">
                    <i class="fa-solid fa-spinner fa-spin" style="font-size: 2rem; color: var(--accent-gold); margin-bottom: 1rem; display: block;"></i>
                    <p>Analyzing your reading profile and reviews...</p>
                </div>
            `;

            const token = SafeStorage.get('bibliodrift_token');
            if (!token) {
                identityContent.innerHTML = `
                    <div class="error-state" style="padding: 1.5rem; text-align: center; color: var(--text-muted);">
                        <p>Please log in to view your Reader Identity.</p>
                    </div>
                `;
                return;
            }

            try {
                // 1. Fetch user reviews
                const reviewsResponse = await fetch(`${MOOD_API_BASE}/users/${user.id}/reviews`, {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (!reviewsResponse.ok) {
                    throw new Error(`Failed to fetch reviews (Status: ${reviewsResponse.status})`);
                }

                const reviewsData = await reviewsResponse.json();
                const reviewsList = (reviewsData.reviews || []).map(r => r.review_text).filter(Boolean);

                // Derive genres
                const allBooks = [
                    ...(libManager.library.current || []),
                    ...(libManager.library.want || []),
                    ...(libManager.library.finished || [])
                ];
                const genres = Array.from(new Set(
                    allBooks.flatMap(book => book.volumeInfo?.categories || [])
                ));

                // 2. Render empty/onboarding or loaded state
                if (reviewsList.length === 0) {
                    renderEmptyIdentityState(genres);
                } else {
                    await fetchAndRenderArchetype(genres, reviewsList);
                }
            } catch (error) {
                console.error('Error loading reader identity:', error);
                renderErrorIdentityState();
            }
        };

        // Initialize reader identity loading
        loadReaderIdentity();

        // Progress Bar Calculation
        const barFinished = document.getElementById('bar-finished');
        const barCurrent = document.getElementById('bar-current');
        const barWant = document.getElementById('bar-want');

        const countFinishedEl = document.getElementById('count-finished');
        const countCurrentEl = document.getElementById('count-current');
        const countWantEl = document.getElementById('count-want');

        if (countFinishedEl) countFinishedEl.textContent = finishedCount;
        if (countCurrentEl) countCurrentEl.textContent = currentCount;
        if (countWantEl) countWantEl.textContent = wantCount;

        if (totalBooks > 0) {
            setTimeout(() => {
                if (barFinished) barFinished.style.width = `${(finishedCount / totalBooks) * 100}%`;
                if (barCurrent) barCurrent.style.width = `${(currentCount / totalBooks) * 100}%`;
                if (barWant) barWant.style.width = `${(wantCount / totalBooks) * 100}%`;
            }, 100);
        }

        // =====================================================================
        // READING PROGRESS OVERVIEW
        // Renders a progress card for each book currently being read.
        // =====================================================================
        const progressGrid = document.getElementById('progress-overview-grid');
        if (progressGrid) {
            const currentBooks = libManager.library.current || [];
            if (currentBooks.length === 0) {
                progressGrid.innerHTML = '<div class="empty-state"><p>No books currently in progress. <a href="library.html">Visit your library</a> to start reading.</p></div>';
            } else {
                progressGrid.innerHTML = '';
                currentBooks.forEach(book => {
                    const title = book.volumeInfo?.title || book.title || 'Untitled';
                    const author = (book.volumeInfo?.authors?.[0]) || book.author || 'Unknown Author';
                    const cover = book.volumeInfo?.imageLinks?.thumbnail || book.cover || '';
                    const progress = typeof book.progress === 'number' ? book.progress : 0;

                    const card = document.createElement('div');
                    card.className = 'progress-overview-card';
                    card.innerHTML = `
                        <div class="progress-card-cover">
                            ${cover ? `<img src="${cover.replace('http:', 'https:')}" alt="Cover of '${title}' by ${author}" loading="lazy">` : '<i class="fa-solid fa-book"></i>'}
                        </div>
                        <div class="progress-card-info">
                            <div class="progress-card-title">${title}</div>
                            <div class="progress-card-author">${author}</div>
                            <div class="progress-card-bar-wrap">
                                <div class="progress-card-bar-track">
                                    <div class="progress-card-bar-fill" style="width:${progress}%"></div>
                                </div>
                                <span class="progress-card-pct">${progress}%</span>
                            </div>
                            <div class="progress-card-quick-update">
                                <input type="range" min="0" max="100" value="${progress}"
                                    class="progress-card-slider"
                                    aria-label="Update reading progress for ${title}">
                                <button class="progress-card-save-btn" data-book-id="${book.id}">
                                    <i class="fa-solid fa-floppy-disk"></i>
                                </button>
                            </div>
                        </div>
                    `;

                    // Wire up the quick-update slider
                    const slider = card.querySelector('.progress-card-slider');
                    const barFill = card.querySelector('.progress-card-bar-fill');
                    const pctLabel = card.querySelector('.progress-card-pct');
                    const saveBtn = card.querySelector('.progress-card-save-btn');

                    slider.addEventListener('input', () => {
                        const val = parseInt(slider.value);
                        barFill.style.width = `${val}%`;
                        pctLabel.textContent = `${val}%`;
                    });

                    saveBtn.addEventListener('click', async () => {
                        const newProgress = parseInt(slider.value);
                        saveBtn.disabled = true;
                        saveBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
                        try {
                            await libManager.updateBook(book.id, { progress: newProgress });
                            book.progress = newProgress;
                            saveBtn.innerHTML = '<i class="fa-solid fa-check"></i>';
                            saveBtn.style.background = '#4caf50';
                            setTimeout(() => {
                                saveBtn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i>';
                                saveBtn.style.background = '';
                                saveBtn.disabled = false;
                            }, 2000);
                        } catch (err) {
                            saveBtn.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
                            saveBtn.style.background = '#e53935';
                            setTimeout(() => {
                                saveBtn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i>';
                                saveBtn.style.background = '';
                                saveBtn.disabled = false;
                            }, 2000);
                        }
                    });

                    progressGrid.appendChild(card);
                });
            }
        }

        // Populate Achievements
        const achievementsGrid = document.getElementById('achievements-grid');
        achievementsGrid.innerHTML = '';

        const achievements = [
            {
                id: 'reader',
                badge: 'badge--gold',
                icon: `
                    <svg class="ach-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <path fill="currentColor" d="M3 6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v12a1 1 0 0 1-1 1H6a2 2 0 0 1-2-2V6z"></path>
                        <path fill="currentColor" d="M21 6h-2v12h2V6z" opacity="0.18"></path>
                    </svg>`,
                title: 'Avid Reader',
                desc: 'Finished 5 books',
                condition: finishedCount >= 5
            },
            {
                id: 'collector',
                badge: 'badge--teal',
                icon: `
                    <svg class="ach-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <rect x="3" y="4" width="18" height="3" rx="1" fill="currentColor"></rect>
                        <rect x="5" y="9" width="14" height="3" rx="1" fill="currentColor" opacity="0.9"></rect>
                        <rect x="7" y="14" width="10" height="3" rx="1" fill="currentColor" opacity="0.7"></rect>
                    </svg>`,
                title: 'Curator',
                desc: 'Added 10 books',
                condition: (currentCount + wantCount + finishedCount) >= 10
            },
            {
                id: 'critic',
                badge: 'badge--purple',
                icon: `
                    <svg class="ach-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <path fill="currentColor" d="M12.3 2.3l2.4 2.4-8.5 8.5-2.4-2.4L12.3 2.3zM3 21l6-1 10.7-10.7 1.3 1.3L10.3 22 3 21z"></path>
                    </svg>`,
                title: 'Critic',
                desc: 'Saved 3 reviews',
                condition: false
            },
            {
                id: 'focused',
                badge: 'badge--gray',
                icon: `
                    <svg class="ach-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <path fill="currentColor" d="M4 10a3 3 0 0 1 6 0 1 1 0 0 0 2 0 3 3 0 0 1 6 0v2h-2v6H4v-6H2v-2h2zM8 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM18 12a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
                    </svg>`,
                title: 'Focused',
                desc: 'Reading 3 at once',
                condition: currentCount >= 3
            }
        ];

        achievements.forEach(ach => {
            const card = document.createElement('div');
            card.className = `achievement-card ${ach.condition ? 'unlocked' : 'locked'}`;
            card.innerHTML = `
                <span class="achievement-badge ${ach.badge}" aria-hidden="true"></span>
                ${ach.icon}
                <h4>${ach.title}</h4>
                <p>${ach.desc}</p>
            `;
            achievementsGrid.appendChild(card);
        });

        // Logout
        document.getElementById('logout-btn').addEventListener('click', async () => {
            try {
                // Clear backend cookies
                await fetch(`${MOOD_API_BASE}/logout`, { method: 'POST', credentials: 'include' });
            } catch (e) {
                console.warn("Backend logout failed", e);
            }
            SafeStorage.remove('bibliodrift_user');
            SafeStorage.remove('bibliodrift_token');
            SafeStorage.remove('isLoggedIn');
            window.location.href = APP_ROUTE;
        });
    }
    // Scroll Manager (Back to Top)
    const backToTopBtn = document.getElementById('backToTop');
    if (backToTopBtn) {
        window.addEventListener('scroll', () => {
            if (window.scrollY > 200) {
                backToTopBtn.classList.remove('hidden');
            } else {
                backToTopBtn.classList.add('hidden');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }


});

/**
 * ==============================================================================
 * SECURITY FIX: CSRF PROTECTION & SESSION MANAGEMENT
 * ==============================================================================
 * 
 * Issue:
 * ------
 * The auth form has no CSRF protection — it directly POSTs credentials to the API 
 * from the browser.
 * 
 * Why it matters:
 * ---------------
 * Without a CSRF token, a malicious third-party page could trick authenticated 
 * users into making authenticated requests. Also, isLoggedIn was previously stored 
 * as a plain string 'true' in localStorage, meaning any script could forge the 
 * login state by setting this key.
 * 
 * Fix:
 * ----
 * Move the authenticated session indicator to an HttpOnly cookie managed by the 
 * backend, and validate the JWT on every protected API call (which is already 
 * done server-side — the frontend just needs to stop relying on the localStorage 
 * flag for access control decisions).
 * ==============================================================================
 */
async function handleAuth(event) {
    event.preventDefault();
    const form = event.target;
    const btn = form.querySelector('button[type="submit"]') || document.getElementById('submitBtn');
    const originalText = btn ? btn.innerHTML : (form.dataset.mode === 'register' ? 'Sign Up' : 'Sign In');

    // 1. Immediate UI Feedback: Disable button and show loading state
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i> Processing...';
    }

    // Determine mode from dataset (set by our toggle logic) or default to login
    const mode = form.dataset.mode || 'login';

    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const usernameInput = document.getElementById("username");

    // Helper to reset button state on failure
    const resetBtn = () => {
        if (btn) {
            btn.disabled = false;
            btn.innerHTML = originalText;
        }
    };

    // Validate Email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        if (typeof showToast === 'function') showToast("Enter a valid email address", "error");
        else alert("Enter a valid email address");
        resetBtn();
        return;
    }

    // Demo bypass logic
    if (email === 'demo@bibliodrift.com') {
        const demoUser = { id: 1, username: 'Demo User', email: 'demo@bibliodrift.com' };
        SafeStorage.set('bibliodrift_user', JSON.stringify(demoUser));
        SafeStorage.set('isLoggedIn', 'true');
        SafeStorage.set('bibliodrift_token', 'demo-token-12345');

        if (typeof showToast === 'function')
            showToast(`Welcome, Demo User!`, "success");

        // Keep button disabled during redirect delay
        setTimeout(() => {
            window.location.href = "library.html";
        }, 1000);
        return;
    }

    // Prepare Payload
    let payload = {};
    let endpoint = "";

    if (mode === 'register') {
        const username = usernameInput ? usernameInput.value : email.split('@')[0];
        endpoint = '/register';
        payload = { username, email, password };
    } else {
        endpoint = '/login';
        payload = { username: email, password: password };
    }

    // =========================================================================
    // SECURITY ENHANCEMENT: CSRF TOKEN INTEGRATION
    // =========================================================================
    // We retrieve the CSRF token from the hidden input field 'csrf_token'.
    // This token is then injected into the 'X-CSRF-Token' header. 
    // The Flask-WTF backend expects this header for all state-changing
    // AJAX requests. This protects against Cross-Site Request Forgery 
    // by ensuring that the request is authenticated via the browser's 
    // Same-Origin Policy and session-bound secrets.
    // =========================================================================
    const csrfToken = document.getElementById('csrf_token')?.value;

    try {
        const fetchOptions = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            credentials: 'include',
            body: JSON.stringify(payload)
        };

        // Inject CSRF token into headers if available
        if (csrfToken) {
            fetchOptions.headers['X-CSRF-Token'] = csrfToken;
        } else if (IS_DEV) {
            console.warn('[Security] No CSRF token found in DOM. Request may be rejected by server.');
        }

        const res = await fetch(`${MOOD_API_BASE}${endpoint.replace('/api/v1', '')}`, fetchOptions);

        const data = await res.json();

        if (res.ok) {
            // Success!
            // Token is now in an HttpOnly cookie (managed by backend)
            SafeStorage.set('bibliodrift_user', JSON.stringify(data.user));
            SafeStorage.set('isLoggedIn', 'true');

            if (typeof showToast === 'function')
                showToast(`${mode === 'login' ? 'Welcome back' : 'Welcome'}, ${data.user.username}!`, "success");

            // SYNC LOGIC
            if (window.libManager) {
                if (typeof showToast === 'function') showToast("Syncing your library...", "info");
                await window.libManager.syncLocalToBackend(data.user);
            }

            // Redirect - Button remains disabled
            setTimeout(() => {
                window.location.href = "library.html";
            }, 1000);
        } else {
            // Authentication failed - re-enable button
            if (typeof showToast === 'function') showToast(data.error || "Authentication failed", "error");
            else alert(data.error || "Authentication failed");
            resetBtn();
        }
    } catch (e) {
        console.error("Auth Error", e);
        if (typeof showToast === 'function') showToast("Server connection failed", "error");
        else alert("Server connection failed");
        resetBtn();
    }
}


function enableTapEffects() {
    if (!('ontouchstart' in window)) return;

    document.querySelectorAll('.btn-icon').forEach(btn => {
        btn.addEventListener('click', () => {
            btn.classList.toggle('tap-btn-icon');
        });
    });


    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', () => {
            link.classList.toggle('tap-nav-link');
        });
    });

    const themeToggle = document.getElementById('themeToggle');
    if (themeToggle) {
        themeToggle.addEventListener('click', () => {
            themeToggle.classList.toggle('tap-theme-toggle');
        });
    }

    const backTop = document.querySelector('.back-to-top');
    if (backTop) {
        backTop.addEventListener('click', () => {
            backTop.classList.toggle('tap-back-to-top');
        });
    }


    document.querySelectorAll('.social_icons a').forEach(icon => {
        icon.addEventListener('click', () => {
            icon.classList.toggle('tap-social-icon');
        });
    });
}

enableTapEffects();

// --- creak and page flip effects ---
const pageFlipSound = new Audio('../assets/sounds/page-flip.mp3');
pageFlipSound.preload = 'auto';
pageFlipSound.volume = 0.2;
pageFlipSound.muted = true;

document.addEventListener('click', () => {
    pageFlipSound.play().catch(() => { });
}, { once: true });


document.addEventListener("click", (e) => {
    const scene = e.target.closest(".book-scene");
    if (!scene) return;

    if (IS_DEV) {
        console.log("BOOK CLICK");
    }

    const book = scene.querySelector(".book");
    const overlay = scene.querySelector(".glass-overlay");

    pageFlipSound.muted = false;

    pageFlipSound.pause();
    pageFlipSound.currentTime = 0;
    book.classList.toggle("tap-effect");
    if (overlay) overlay.classList.toggle("tap-overlay");
});
// ============================================
// Keyboard Shortcuts Module (Issue #103)
// ============================================
// Provides keyboard navigation and interaction
// with BiblioDrift library and book management

const KeyboardShortcuts = {
    // Shortcut configuration mapping
    shortcuts: {
        'j': { action: 'navigateNext', description: 'Navigate to next book' },
        'k': { action: 'navigatePrev', description: 'Navigate to previous book' },
        'Enter': { action: 'selectBook', description: 'Select/open current book' },
        'a': { action: 'addToWantRead', description: 'Add to Want to Read' },
        'r': { action: 'markCurrentlyReading', description: 'Mark as Currently Reading' },
        'f': { action: 'addToFavorites', description: 'Add to Favorites' },
        'Escape': { action: 'closeModal', description: 'Close popup/modal' },
        '?': { action: 'showHelpMenu', description: 'Show keyboard shortcuts help' },
        '/': { action: 'focusSearch', description: 'Focus search bar' }
    },

    // Initialize keyboard event listener
    init() {
        document.addEventListener('keydown', (e) => this.handleKeyPress(e));
        if (IS_DEV) {
            console.log('BiblioDrift Keyboard Shortcuts Initialized');
        }
    },


    // Handle keypress events
    handleKeyPress(event) {
        // Don't trigger shortcuts when typing in input fields
        if (['INPUT', 'TEXTAREA'].includes(event.target.tagName)) {
            return;
        }

        const key = event.key;
        const shortcut = this.shortcuts[key];

        if (shortcut) {
            event.preventDefault();
            this.executeAction(shortcut.action);
        }
    },

    // Execute action based on shortcut
    executeAction(action) {
        switch (action) {
            case 'navigateNext':
                if (IS_DEV) {
                    console.log('Navigating to next book...');
                }
                this.navigateToNextBook();
                break;
            case 'navigatePrev':
                if (IS_DEV) {
                    console.log('Navigating to previous book...');
                }
                this.navigateToPreviousBook();
                break;
            case 'selectBook':
                if (IS_DEV) {
                    console.log('Selecting current book...');
                }
                this.selectCurrentBook();
                break;
            case 'addToWantRead':
                if (IS_DEV) {
                    console.log('Adding to Want to Read list...');
                }
                this.moveCurrentBookToShelf('want');
                break;
            case 'markCurrentlyReading':
                if (IS_DEV) {
                    console.log('Marking as Currently Reading...');
                }
                this.moveCurrentBookToShelf('current');
                break;
            case 'addToFavorites':
                if (IS_DEV) {
                    console.log('Adding to Favorites...');
                }
                this.moveCurrentBookToShelf('finished');
                break;
            case 'closeModal':
                if (IS_DEV) {
                    console.log('Closing modal...');
                }
                const modals = document.querySelectorAll('.modal, [role="dialog"]');
                modals.forEach(modal => modal.style.display = 'none');
                break;
            case 'showHelpMenu':
                if (IS_DEV) {
                    console.log('Showing help menu...');
                }
                this.displayHelpMenu();
                break;
            case 'focusSearch':
                if (IS_DEV) {
                    console.log('Focusing search bar...');
                }
                const searchInput = document.querySelector('input[type="search"], input.search, [placeholder*="search" i]');
                if (searchInput) searchInput.focus();
                break;
        }
    },

    // Display keyboard shortcuts help menu
    displayHelpMenu() {
        const helpContent = Object.entries(this.shortcuts)
            .map(([key, data]) => `<strong>${key}</strong>: ${data.description}`)
            .join('<br/>');

        alert('BiblioDrift Keyboard Shortcuts\n\n' +
            Object.entries(this.shortcuts)
                .map(([key, data]) => `${key}: ${data.description}`)
                .join('\n'));
    },

    // Helper: Get all visible book spine elements
    getVisibleBooks() {
        return Array.from(document.querySelectorAll('.book-spine-3d'));
    },

    // Helper: Get current focused book index
    getFocusedBookIndex() {
        const books = this.getVisibleBooks();
        const focused = document.querySelector('.book-spine-3d.focused');
        if (focused) {
            return books.indexOf(focused);
        }
        return -1;
    },

    // Helper: Set focus on a book spine
    setBookFocus(bookElement) {
        // Remove previous focus
        document.querySelectorAll('.book-spine-3d.focused').forEach(el => {
            el.classList.remove('focused');
        });

        if (bookElement) {
            bookElement.classList.add('focused');
            bookElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });

            // Get the book data from the element
            const bookId = bookElement.dataset.bookId;
            if (window.bookshelfRenderer && bookId) {
                const storage = window.libManager?.getLibrarySnapshot?.() || { current: [], want: [], finished: [] };
                for (const shelf of ['current', 'want', 'finished']) {
                    const book = storage[shelf].find(b => b.id === bookId);
                    if (book) {
                        window.bookshelfRenderer.currentBook = book.volumeInfo ? {
                            id: book.id,
                            title: book.volumeInfo.title || 'Untitled',
                            author: (book.volumeInfo.authors && book.volumeInfo.authors[0]) || 'Unknown',
                            cover: book.volumeInfo.imageLinks?.thumbnail || '',
                            description: book.volumeInfo.description || '',
                            rating: book.volumeInfo.averageRating || 0,
                            ratingCount: book.volumeInfo.ratingsCount || 0,
                            categories: book.volumeInfo.categories || [],
                            moods: book.moods || [],
                            reviews: []
                        } : book;
                        break;
                    }
                }
            }
        }
    },

    // Navigate to next book
    navigateToNextBook() {
        const books = this.getVisibleBooks();
        if (books.length === 0) {
            showToast('No books to navigate', 'info');
            return;
        }

        let currentIndex = this.getFocusedBookIndex();
        let nextIndex = (currentIndex + 1) % books.length;

        this.setBookFocus(books[nextIndex]);
    },

    // Navigate to previous book
    navigateToPreviousBook() {
        const books = this.getVisibleBooks();
        if (books.length === 0) {
            showToast('No books to navigate', 'info');
            return;
        }

        let currentIndex = this.getFocusedBookIndex();
        let prevIndex = currentIndex <= 0 ? books.length - 1 : currentIndex - 1;

        this.setBookFocus(books[prevIndex]);
    },

    // Select/open the current book
    selectCurrentBook() {
        if (window.bookshelfRenderer && window.bookshelfRenderer.currentBook) {
            window.bookshelfRenderer.openModal(window.bookshelfRenderer.currentBook);
            showToast('Opening book details', 'info');
        } else {
            showToast('No book selected', 'info');
        }
    },

    // Move current book to a specific shelf
    moveCurrentBookToShelf(targetShelf) {
        if (!window.bookshelfRenderer || !window.bookshelfRenderer.currentBook) {
            showToast('No book selected', 'info');
            return;
        }

        const currentBook = window.bookshelfRenderer.currentBook;
        const storage = window.libManager?.getLibrarySnapshot?.() || { current: [], want: [], finished: [] };

        // Find current shelf
        let currentShelf = null;
        for (const shelf of ['current', 'want', 'finished']) {
            const found = storage[shelf].find(b => b.id === currentBook.id);
            if (found) {
                currentShelf = shelf;
                break;
            }
        }

        if (!currentShelf) {
            showToast('Book not found in library', 'error');
            return;
        }

        if (currentShelf === targetShelf) {
            showToast('Book is already on that shelf', 'info');
            return;
        }

        // Move the book
        window.bookshelfRenderer.moveBook(currentBook.id, currentShelf, targetShelf);

        // Show appropriate feedback
        const shelfNames = {
            'current': 'Currently Immersed',
            'want': 'Anticipated Journeys',
            'finished': 'Lifetime Favorites'
        };

        showToast(`Moved to ${shelfNames[targetShelf]}`, 'success');
    }
};

// Initialize keyboard shortcuts when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => KeyboardShortcuts.init());
} else {
    KeyboardShortcuts.init();
}

// --- Connection Management & Offline Fallback Fallback Hooks ---

// Function to automatically track network status changes
function handleConnectivityChange() {
    const offlineIndicator = document.getElementById('offline-indicator');

    if (!navigator.onLine) {
        console.warn("🌐 Connection dropped. Switching to local sanctuary archives...");

        // Show an elegant banner to let the user know they are reading offline
        if (offlineIndicator) {
            offlineIndicator.style.display = 'block';
        }

        // Fall back to loading cached books from IndexedDB
        triggerOfflineLibraryView();
    } else {
        console.log("🌐 Connection restored! Connected back to the live backend cloud server.");
        if (offlineIndicator) {
            offlineIndicator.style.display = 'none';
        }

        // Reload live API content if the user comes back online
        if (typeof loadDiscoverBooks === 'function') {
            loadDiscoverBooks();
        }
    }
}

// Fallback logic to retrieve data from Dexie when offline
async function triggerOfflineLibraryView() {
    // Look up the database instance initialized on the global window context
    if (!window.db) {
        console.error("Database layer is missing from window.db context.");
        return;
    }

    try {
        const savedBooks = await window.db.books.toArray();
        // Target your bookshelf or matching layout grid element from the page markup
        const libraryContainer = document.getElementById('search-results-grid') || document.querySelector('.bookshelf');

        if (!libraryContainer) return;

        if (savedBooks.length === 0) {
            // Friendly empty state UI explaining how to save books
            libraryContainer.innerHTML = `
                <div class="offline-empty-state" style="grid-column: 1/-1; text-align: center; color: #a0a0a0; padding: 3rem 1rem;">
                    <p style="font-size: 1.5rem; margin-bottom: 0.5rem;">✨ You are wandering offline</p>
                    <p style="font-size: 1rem; opacity: 0.8;">No cached books found on your shelf. Save books while online to read them anywhere.</p>
                </div>`;
        } else {
            libraryContainer.innerHTML = ""; // Wipe standard layout containers

            // Render cached items back onto the UI shelf
            savedBooks.forEach(book => {
                const bookCard = document.createElement('div');
                bookCard.className = 'book-card offline-card';
                bookCard.innerHTML = `
                    <div class="book-cover-wrapper">
                        <img src="${book.coverUrl || '../assets/images/default-cover.png'}" alt="Cover of '${book.title}' by ${book.author || 'Unknown Author'}" class="book-cover-img" />
                    </div>
                    <div class="book-details">
                        <h3>${book.title}</h3>
                        <p class="author-tag">By ${book.author}</p>
                        <p class="offline-summary">${book.content}</p>
                        <span class="offline-badge" style="background: #2c3e50; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem;">Saved Offline</span>
                    </div>
                `;
                libraryContainer.appendChild(bookCard);
            });
        }
    } catch (error) {
        console.error("Failed to load local offline assets:", error);
    }
}

// Attach network listeners directly to the window lifecycle
window.addEventListener('online', handleConnectivityChange);
window.addEventListener('offline', handleConnectivityChange);

// Run a status check right away on startup in case the user loads the app while already disconnected
document.addEventListener('DOMContentLoaded', handleConnectivityChange);

// Reading Mood Quiz - manager-based implementation
class ReadingMoodQuizManager {
        constructor(libraryManager, renderer) {
                this.libraryManager = libraryManager;
                this.renderer = renderer;
                this.section = null;
                this.quizAnswers = {};
        }

        init() {
                this.section = document.getElementById('reading-mood-quiz') || document.getElementById('readingMoodQuiz');
                if (!this.section) return;

                this.quizOptionGroups = this.section.querySelectorAll('.quiz-options');
                this.generateBtn = this.section.querySelector('#generateMoodTags');
                this.results = this.section.querySelector('#quizResults');
                this.moodTagsContainer = this.section.querySelector('#moodTags');
                this.retakeBtn = this.section.querySelector('#retakeQuiz');

                if (!this.quizOptionGroups.length || !this.generateBtn || !this.results || !this.moodTagsContainer || !this.retakeBtn) {
                        return;
                }

                this._wireOptions();
                this._wireButtons();
                this.loadSavedMoodTags();
                this._updateGenerateButtonState();
        }

        _wireOptions() {
                this.quizOptionGroups.forEach(group => {
                        const key = group.dataset.question;
                        const buttons = group.querySelectorAll('button');
                        buttons.forEach(btn => {
                                btn.addEventListener('click', () => {
                                        buttons.forEach(b => b.classList.remove('selected'));
                                        btn.classList.add('selected');
                                        this.quizAnswers[key] = btn.dataset.value;
                                        this._updateGenerateButtonState();
                                });
                        });
                });
        }

        _wireButtons() {
                this.generateBtn.addEventListener('click', async () => {
                        const tags = Object.values(this.quizAnswers).filter(Boolean);
                        this.renderMoodTags(tags);
                        // Persist using SafeStorage wrapper
                        try { SafeStorage.set('readingMoodTags', JSON.stringify(tags)); } catch (e) { localStorage.setItem('readingMoodTags', JSON.stringify(tags)); }

                        // Compose a generated query from tags and render results
                        const generatedMoodQuery = tags.join(' ');
                        try {
                                if (this.renderer && typeof this.renderer.renderCuratedSection === 'function') {
                                        this.renderer.renderCuratedSection(generatedMoodQuery, 'mood-quiz-results-grid', 16);
                                }
                        } catch (e) {
                                console.error('Mood quiz: failed to render curated section', e);
                        }
                });

                this.retakeBtn.addEventListener('click', () => {
                        this.quizAnswers = {};
                        this.quizOptionGroups.forEach(group => {
                                group.querySelectorAll('button').forEach(btn => btn.classList.remove('selected'));
                        });
                        this.moodTagsContainer.innerHTML = '';
                        this.results.hidden = true;
                        try { SafeStorage.remove('readingMoodTags'); } catch (e) { localStorage.removeItem('readingMoodTags'); }
                        this._updateGenerateButtonState();
                });
        }

        _updateGenerateButtonState() {
                const total = this.quizOptionGroups.length;
                const answered = Object.keys(this.quizAnswers).length;
                this.generateBtn.disabled = answered !== total;
        }

        renderMoodTags(tags) {
                this.moodTagsContainer.innerHTML = '';
                tags.forEach(tag => {
                        const span = document.createElement('span');
                        span.textContent = `#${tag}`;
                        this.moodTagsContainer.appendChild(span);
                });
                this.results.hidden = false;
        }

        loadSavedMoodTags() {
                let saved = null;
                try { saved = SafeStorage.get('readingMoodTags'); } catch (e) { saved = localStorage.getItem('readingMoodTags'); }
                if (saved) {
                        try {
                                const tags = JSON.parse(saved);
                                if (Array.isArray(tags) && tags.length > 0) this.renderMoodTags(tags);
                        } catch (e) { /* ignore */ }
                }
        }
}

// Initialize the manager if the page contains the quiz. Wait for library/renderer readiness.
function _startReadingMoodQuiz() {
        const startIfReady = () => {
                const el = document.getElementById('reading-mood-quiz') || document.getElementById('readingMoodQuiz');
                if (!el) return;
                if (window.libManager && window.renderer) {
                        window.moodQuizManager = new ReadingMoodQuizManager(window.libManager, window.renderer);
                        window.moodQuizManager.init();
                } else {
                        // Wait for library-manager-ready event
                        window.addEventListener('bibliodrift:library-manager-ready', () => {
                                if (window.libManager && window.renderer) {
                                        window.moodQuizManager = new ReadingMoodQuizManager(window.libManager, window.renderer);
                                        window.moodQuizManager.init();
                                }
                        }, { once: true });
                }
        };

        if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', startIfReady, { once: true });
        } else {
                startIfReady();
        }
}

_startReadingMoodQuiz();

function showForgotResetLink(resetUrl) {
    const box = document.getElementById('forgotResetLinkBox');
    if (!box || !resetUrl) return;
    box.style.display = 'block';
    box.innerHTML = `
        <strong>Development reset link</strong> (no email was sent):<br>
        <a href="${resetUrl}">Open link to set a new password</a>
    `;
}

async function handleForgotPassword(event) {
    if (event) event.preventDefault();
    const btn = document.getElementById('forgotSubmitBtn');
    const emailInput = document.getElementById('forgotEmail');
    const linkBox = document.getElementById('forgotResetLinkBox');
    const email = emailInput?.value?.trim() || '';
    const originalText = btn ? btn.textContent : 'Send reset link';

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        if (typeof showToast === 'function') showToast('Enter a valid email address', 'error');
        else alert('Enter a valid email address');
        return;
    }

    if (linkBox) {
        linkBox.style.display = 'none';
        linkBox.innerHTML = '';
    }

    if (btn) {
        btn.disabled = true;
        btn.textContent = 'Sending...';
    }

    try {
        const res = await fetch(`${MOOD_API_BASE}/auth/forgot-password`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'include',
            body: JSON.stringify({ email }),
        });
        const data = await res.json();
        const message = data.message
            || 'If an account exists for that email, password reset instructions have been sent.';

        if (res.ok) {
            if (data.reset_url) {
                showForgotResetLink(data.reset_url);
                console.info('[Dev] Password reset link:', data.reset_url);
                if (typeof showToast === 'function') {
                    showToast('No email sent — use the reset link shown on this page.', 'info');
                }
            } else if (typeof showToast === 'function') {
                showToast(message, 'success');
            } else {
                alert(message + '\n\n(No email is sent by the server yet.)');
            }
        } else {
            const err = data.error || data.message || 'Unable to send reset link.';
            if (typeof showToast === 'function') showToast(err, 'error');
            else alert(err);
        }
    } catch (error) {
        console.error('Forgot password failed:', error);
        if (typeof showToast === 'function') {
            showToast('Could not reach the server. Use http://127.0.0.1:5500 (not file://) and ensure Flask is running.', 'error');
        } else {
            alert('Network error. Use http://127.0.0.1:5500 and ensure the backend is running on port 5000.');
        }
    } finally {
        if (btn) {
            btn.disabled = false;
            btn.textContent = originalText;
        }
    }
}

window.handleForgotPassword = handleForgotPassword;

async function handleResetPassword(event) {
    if (event) event.preventDefault();

    const btn = document.getElementById('resetSubmitBtn');
    const pwdInput = document.getElementById('resetNewPassword');
    const originalText = btn ? btn.textContent : 'Reset password';
    const newPassword = pwdInput?.value || '';

    // Get the token from the URL e.g. auth.html?mode=reset&token=xxx
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');

    if (!token) {
        const err = 'Reset token is missing from the URL.';
        if (typeof showToast === 'function') showToast(err, 'error');
        else alert(err);
        return;
    }

    if (newPassword.length < 6) {
        const err = 'Password must be at least 6 characters long.';
        if (typeof showToast === 'function') showToast(err, 'error');
        else alert(err);
        return;
    }

    if (btn) {
        btn.disabled = true;
        btn.textContent = 'Resetting...';
    }

    try {
        const res = await fetch(`${MOOD_API_BASE}/auth/reset-password/${encodeURIComponent(token)}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            credentials: 'include',
            body: JSON.stringify({ new_password: newPassword }),
        });
        const data = await res.json();

        if (res.ok) {
            if (typeof showToast === 'function') showToast('Password reset successfully! You can now log in.', 'success');
            else alert('Password reset successfully! You can now log in.');

            setTimeout(() => {
                window.location.href = 'auth.html?mode=login';
            }, 2000);
        } else {
            const err = data.error || data.message || 'Failed to reset password.';
            if (typeof showToast === 'function') showToast(err, 'error');
            else alert(err);
        }
    } catch (error) {
        console.error('Reset password failed:', error);
        if (typeof showToast === 'function') {
            showToast('Could not reach the server. Ensure backend is running.', 'error');
        } else {
            alert('Network error. Ensure the backend is running on port 5000.');
        }
    } finally {
        if (btn) {
            btn.disabled = false;
            btn.textContent = originalText;
        }
    }
}

window.handleResetPassword = handleResetPassword;