library-3d.js

/**
 * BiblioDrift 3D Bookshelf Library
 * Handles the interactive 3D bookshelf experience with hover tooltips and detail modals
 */

// Sample books data for demonstration
import { calcReadingTime, calcRemainingTime } from './readingTime.js';
const SAMPLE_BOOKS = {
    current: [
        {
            id: 'sample-1',
            title: 'The Great Gatsby',
            author: 'F. Scott Fitzgerald',
            cover: 'https://covers.openlibrary.org/b/id/7222246-M.jpg',
            rating: 4.2,
            ratingCount: 4523,
            description: 'The story of the mysteriously wealthy Jay Gatsby and his love for the beautiful Daisy Buchanan, of lavish parties on Long Island at a time when The New York Times noted "ichthyosaurus" was among the most popular dance steps. This exemplary novel of the Jazz Age has been acclaimed by generations of readers.',
            categories: ['Classic', 'Literary Fiction', 'American'],
            spineColor: '#1a472a',
            textColor: '#d4af37',
            reviews: [
                { name: 'Literature Lover', rating: 5, text: 'A masterpiece of American literature that captures the essence of the roaring twenties.' },
                { name: 'BookwormSarah', rating: 4, text: 'The prose is absolutely beautiful. Fitzgerald\'s writing is unmatched.' }
            ]
        },
        {
            id: 'sample-2',
            title: 'Pride and Prejudice',
            author: 'Jane Austen',
            cover: 'https://covers.openlibrary.org/b/id/12645114-M.jpg',
            rating: 4.5,
            ratingCount: 3892,
            description: 'Since its immediate success in 1813, Pride and Prejudice has remained one of the most popular novels in the English language. Jane Austen called this brilliant work "her own darling child" and its witty portrayal of country society and the courtship of Elizabeth Bennet and Mr. Darcy has captivated readers for centuries.',
            categories: ['Classic', 'Romance', 'British'],
            spineColor: '#8B4513',
            textColor: '#FFEFD5',
            reviews: [
                { name: 'JaneiteForever', rating: 5, text: 'The perfect blend of wit, romance, and social commentary.' },
                { name: 'ClassicReader', rating: 5, text: 'Elizabeth Bennet is one of the most beloved heroines in literature.' }
            ]
        },
        {
            id: 'sample-3',
            title: '1984',
            author: 'George Orwell',
            cover: 'https://covers.openlibrary.org/b/id/9269962-M.jpg',
            rating: 4.3,
            ratingCount: 5621,
            description: 'Winston Smith works for the Ministry of Truth in London, chief city of Airstrip One. Big Brother stares out from every poster, the Thought Police uncover each act of betrayal. When Winston finds love with Julia, he discovers life does not have to be dull and deadening.',
            categories: ['Dystopian', 'Science Fiction', 'Political'],
            spineColor: '#2F4F4F',
            textColor: '#FF6347',
            reviews: [
                { name: 'DystopiaFan', rating: 5, text: 'Frighteningly relevant even decades after it was written.' },
                { name: 'PoliticalReader', rating: 4, text: 'A chilling masterpiece that makes you question everything.' }
            ]
        }
    ],
    want: [
        {
            id: 'sample-4',
            title: 'To Kill a Mockingbird',
            author: 'Harper Lee',
            cover: 'https://covers.openlibrary.org/b/id/8314134-M.jpg',
            rating: 4.6,
            ratingCount: 4789,
            description: 'The unforgettable novel of a childhood in a sleepy Southern town and the crisis of conscience that rocked it. Through the young eyes of Scout and Jem Finch, Harper Lee explores with rich humor and unswerving honesty the irrationality of adult attitudes toward race and class.',
            categories: ['Classic', 'Literary Fiction', 'Southern'],
            spineColor: '#654321',
            textColor: '#FFFAF0',
            reviews: [
                { name: 'SouthernReader', rating: 5, text: 'A powerful story that stays with you forever.' },
                { name: 'BookClubMember', rating: 5, text: 'Atticus Finch is the moral compass we all need.' }
            ]
        },
        {
            id: 'sample-5',
            title: 'The Alchemist',
            author: 'Paulo Coelho',
            cover: 'https://covers.openlibrary.org/b/id/7884852-M.jpg',
            rating: 4.1,
            ratingCount: 3156,
            description: 'Paulo Coelho\'s masterpiece tells the mystical story of Santiago, an Andalusian shepherd boy who yearns to travel in search of a worldly treasure. His quest will lead him to riches far different—and far more satisfying—than he ever imagined.',
            categories: ['Philosophy', 'Fiction', 'Adventure'],
            spineColor: '#DAA520',
            textColor: '#2F1810',
            reviews: [
                { name: 'SpiritualSeeker', rating: 5, text: 'A beautiful reminder to follow your dreams.' },
                { name: 'WorldTraveler', rating: 4, text: 'Every page is filled with wisdom and magic.' }
            ]
        },
        {
            id: 'sample-6',
            title: 'The Midnight Library',
            author: 'Matt Haig',
            cover: 'https://covers.openlibrary.org/b/id/10389354-M.jpg',
            rating: 4.0,
            ratingCount: 2845,
            description: 'Between life and death there is a library, and within that library, the shelves go on forever. Every book provides a chance to try another life you could have lived. To see how things would be if you had made other choices.',
            categories: ['Contemporary', 'Fantasy', 'Philosophy'],
            spineColor: '#191970',
            textColor: '#E6E6FA',
            reviews: [
                { name: 'ModernReader', rating: 4, text: 'A thought-provoking exploration of regret and possibility.' },
                { name: 'FantasyLover', rating: 5, text: 'Beautifully written with an uplifting message.' }
            ]
        },
        {
            id: 'sample-7',
            title: 'Atomic Habits',
            author: 'James Clear',
            cover: 'https://covers.openlibrary.org/b/id/10958382-M.jpg',
            rating: 4.4,
            ratingCount: 6234,
            description: 'No matter your goals, Atomic Habits offers a proven framework for improving—every day. James Clear reveals practical strategies that will teach you exactly how to form good habits, break bad ones, and master the tiny behaviors that lead to remarkable results.',
            categories: ['Self-Help', 'Psychology', 'Productivity'],
            spineColor: '#FF8C00',
            textColor: '#FFFFFF',
            reviews: [
                { name: 'ProductivityGuru', rating: 5, text: 'Life-changing advice backed by science.' },
                { name: 'SelfImprover', rating: 4, text: 'Practical tips that actually work in real life.' }
            ]
        }
    ],
    finished: [
        {
            id: 'sample-8',
            title: 'The Catcher in the Rye',
            author: 'J.D. Salinger',
            cover: 'https://covers.openlibrary.org/b/id/8231994-M.jpg',
            rating: 3.8,
            ratingCount: 3421,
            description: 'The hero-narrator of The Catcher in the Rye is an ancient child of sixteen, a native New Yorker named Holden Caulfield. Through circumstances that tend to preclude adult, secondhand description, he leaves his prep school in Pennsylvania and goes underground in New York City for three days.',
            categories: ['Classic', 'Coming-of-Age', 'American'],
            spineColor: '#8B0000',
            textColor: '#FFD700',
            reviews: [
                { name: 'TeenReader', rating: 4, text: 'Holden\'s voice captures teenage angst perfectly.' },
                { name: 'LitMajor', rating: 3, text: 'An important work though divisive in reception.' }
            ]
        },
        {
            id: 'sample-9',
            title: 'Sapiens',
            author: 'Yuval Noah Harari',
            cover: 'https://covers.openlibrary.org/b/id/8406786-M.jpg',
            rating: 4.5,
            ratingCount: 5432,
            description: 'How did our species succeed in the battle for dominance? Why did our foraging ancestors come together to create cities and kingdoms? How did we come to believe in gods, nations, and human rights? Sapiens takes readers on a sweeping tour through our entire history.',
            categories: ['Non-Fiction', 'History', 'Science'],
            spineColor: '#4169E1',
            textColor: '#FFFFFF',
            reviews: [
                { name: 'HistoryBuff', rating: 5, text: 'Absolutely fascinating look at human history.' },
                { name: 'ScienceReader', rating: 5, text: 'Changes the way you see the world.' }
            ]
        },
        {
            id: 'sample-10',
            title: 'The Little Prince',
            author: 'Antoine de Saint-Exupéry',
            cover: 'https://covers.openlibrary.org/b/id/8507422-M.jpg',
            rating: 4.7,
            ratingCount: 4123,
            description: 'A young prince visits various planets in space, including Earth, and addresses themes of loneliness, friendship, love, and loss. Though marketed as a children\'s book, The Little Prince makes observations about life and human nature that are often complex.',
            categories: ['Classic', 'Philosophy', 'Children\'s'],
            spineColor: '#9370DB',
            textColor: '#FFFACD',
            reviews: [
                { name: 'DreamerReader', rating: 5, text: 'A timeless tale that speaks to all ages.' },
                { name: 'PhilosophyFan', rating: 5, text: '"What is essential is invisible to the eye."' }
            ]
        },
        {
            id: 'sample-11',
            title: 'Educated',
            author: 'Tara Westover',
            cover: 'https://covers.openlibrary.org/b/id/8479576-M.jpg',
            rating: 4.4,
            ratingCount: 3876,
            description: 'Born to survivalists in the mountains of Idaho, Tara Westover was seventeen the first time she set foot in a classroom. Her quest for knowledge transformed her, taking her over oceans and across continents, to Harvard and to Cambridge University.',
            categories: ['Memoir', 'Non-Fiction', 'Inspirational'],
            spineColor: '#2E8B57',
            textColor: '#F5F5F5',
            reviews: [
                { name: 'MemoirLover', rating: 5, text: 'An incredible story of resilience and determination.' },
                { name: 'Educator', rating: 4, text: 'Shows the transformative power of education.' }
            ]
        },
        {
            id: 'sample-12',
            title: 'The Alchemist',
            author: 'Paulo Coelho',
            cover: 'https://covers.openlibrary.org/b/id/8225261-M.jpg',
            rating: 4.3,
            ratingCount: 5124,
            description: 'Santiago, a young Andalusian shepherd, dreams of discovering a worldly treasure. His journey takes him across the deserts of Egypt, teaching him about destiny, love, and listening to his heart.',
            categories: ['Fiction', 'Adventure', 'Inspirational'],
            spineColor: '#DAA520',
            textColor: '#1C1C1C',
            reviews: [
                { name: 'DreamChaser', rating: 5, text: 'A beautiful and inspiring tale about following your dreams.' },
                { name: 'BookWorm99', rating: 4, text: 'Simple yet powerful storytelling with deep meaning.' }
            ]
        },
        {
            id: 'sample-13',
            title: 'Atomic Habits',
            author: 'James Clear',
            cover: 'https://covers.openlibrary.org/b/id/9251996-M.jpg',
            rating: 4.6,
            ratingCount: 8432,
            description: 'A practical guide to building good habits and breaking bad ones. James Clear explains how small daily improvements compound into remarkable long-term results.',
            categories: ['Self-Help', 'Productivity', 'Personal Development'],
            spineColor: '#2E8B57',
            textColor: '#FFFFFF',
            reviews: [
                { name: 'GrowthMindset', rating: 5, text: 'Life-changing insights on building sustainable habits.' },
                { name: 'FocusBuilder', rating: 4, text: 'Actionable advice backed by science and real examples.' }
            ]
        },
        {
            id: 'sample-14',
            title: 'Deep Work',
            author: 'Cal Newport',
            cover: 'https://covers.openlibrary.org/b/id/8370226-M.jpg',
            rating: 4.5,
            ratingCount: 6921,
            description: 'A powerful guide to mastering focused success in a distracted world. Cal Newport explains how cultivating deep, concentrated work can dramatically improve productivity and create meaningful results in professional and personal life.',
            categories: ['Productivity', 'Self-Improvement', 'Career Development'],
            spineColor: '#1E3A8A',
            textColor: '#FFFFFF',
            reviews: [
                { name: 'CodeMaster', rating: 5, text: 'A must-read for anyone serious about improving focus and output.' },
                { name: 'SilentAchiever', rating: 4, text: 'Great framework for eliminating distractions and building deep concentration.' }
            ]
        },
        {
            id: 'sample-15',
            title: 'The Psychology of Money',
            author: 'Morgan Housel',
            cover: 'https://covers.openlibrary.org/b/id/10521270-M.jpg',
            rating: 4.7,
            ratingCount: 11234,
            description: 'An insightful exploration of how people think about money and the behaviors that influence financial decisions. Morgan Housel shares timeless lessons on wealth, greed, and happiness through engaging real-world stories.',
            categories: ['Finance', 'Self-Development', 'Investing'],
            spineColor: '#8B4513',
            textColor: '#FFFFFF',
            reviews: [
                { name: 'SmartInvestor', rating: 5, text: 'A refreshing perspective on wealth and financial behavior.' },
                { name: 'WealthBuilder', rating: 4, text: 'Simple yet powerful lessons that change how you view money.' }
            ]
        }
    ]
};

const StorageHelper = {
    get: function (key) {
        return typeof SafeStorage !== 'undefined' ? SafeStorage.get(key) : localStorage.getItem(key);
    },
    set: function (key, value) {
        if (typeof SafeStorage !== 'undefined') {
            SafeStorage.set(key, value);
        } else {
            localStorage.setItem(key, value);
        }
    }
};

// Action to cache or remove book from local IndexedDB
async function toggleOfflineBook(book, buttonElement) {
    try {
        // Use the global window object database reference
        const existingBook = await window.db.books.get(book.id);

        if (existingBook) {
            await window.db.books.delete(book.id);
            console.log(`"${book.title}" removed from offline shelf.`);
            updateDownloadIcon(buttonElement, false);
        } else {
            await window.db.books.add({
                id: book.id,
                title: book.title,
                author: book.author || 'Unknown Author',
                content: book.content || book.description || 'No summary available.',
                mood: book.mood || 'general',
                coverUrl: book.coverUrl || ''
            });
            console.log(`"${book.title}" downloaded for offline reading!`);
            updateDownloadIcon(buttonElement, true);
        }
    } catch (error) {
        console.error("Failed to alter local shelf cache:", error);
    }
}
function debounce(func, delay) {
    let timeout;

    return function (...args) {
        clearTimeout(timeout);

        timeout = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}
class BookshelfRenderer3D {
    constructor() {
        this.tooltip = document.getElementById('book-tooltip');
        this.modal = document.getElementById('book-detail-modal');
        this.currentBook = null;
        this.tooltipTimeout = null;
        this.sortCriteria = 'title'; // Default sort
        this.filterCriteria = 'all'; // Default filter
        this.searchQuery = ''; // Default search query
        this.currentView = 'shelves'; // 'shelves', 'constellation', or 'collections'
        this.collections = [];
        this.selectedCollection = null;
        this.constellationSimulation = null; // Store D3 simulation
        this.cleanupCallbacks = [];
        this.isDestroyed = false;
        this._modalBackdropHandler = null;
        this._escHandler = null;
        this._escListenerAttached = false;
        this.assetsLoaded = false;
        
        // Three.js Engine properties
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.staticObjects = [];
        this.dynamicObjects = [];
        this.threeJsAnimationId = null;

        // Create live region for screen reader announcements
        this.liveRegion = document.createElement('div');
        this.liveRegion.setAttribute('aria-live', 'polite');
        this.liveRegion.setAttribute('aria-atomic', 'true');
        this.liveRegion.className = 'sr-only';
        this.liveRegion.id = 'sr-announcements';
        document.body.appendChild(this.liveRegion);

        // Add accessibility attributes to tooltip
        if (this.tooltip) {
            this.tooltip.setAttribute('role', 'region');
            this.tooltip.setAttribute('aria-label', 'Book preview tooltip');
            this.tooltip.setAttribute('aria-live', 'polite');
        }

        // Add accessibility attributes to modal
        if (this.modal) {
            this.modal.setAttribute('role', 'dialog');
            this.modal.setAttribute('aria-modal', 'true');
            this.modal.setAttribute('aria-labelledby', 'modal-title');
        }

        this.init();
    }

    renderConstellationView() {
        const container = document.getElementById('constellation-container');
        if (!container) return;
        
        // Prevent rendering if container is hidden or not in viewport
        if (container.classList.contains('hidden')) return;

        // Cancel any pending render to prevent double render pileup
        if (this._pendingConstellationRender) {
            cancelAnimationFrame(this._pendingConstellationRender);
        }

        // Use double requestAnimationFrame to ensure browser has completed layout and paint
        this._pendingConstellationRender = requestAnimationFrame(() => {
            this._pendingConstellationRender = requestAnimationFrame(() => {
                this._pendingConstellationRender = null;
                this._executeConstellationRender(container);
            });
        });
    }

    _executeConstellationRender(container) {
        const svgElement = document.getElementById('constellation-svg');
        if (!svgElement) return;

        // Force a layout reflow before measuring
        container.style.display = 'block'; // Ensure it's not none during measurement
        void container.offsetHeight; 

        // Cleanup previous simulation and listeners
        if (this.constellationSimulation) {
            this.constellationSimulation.stop();
            this.constellationSimulation = null;
        }
        if (this._constellationResizeHandler) {
            window.removeEventListener('resize', this._constellationResizeHandler);
        }

        // Use getBoundingClientRect for more accurate dimensions than clientWidth/Height
        const rect = container.getBoundingClientRect();
        const width = rect.width || container.clientWidth || 800;
        const height = rect.height || container.clientHeight || 600;

        // If dimensions are still 0, we can't render properly
        if (width === 0 || height === 0) {
            console.warn('Constellation container has 0 dimensions, deferring render');
            setTimeout(() => this.renderConstellationView(), 100);
            return;
        }

        svgElement.innerHTML = '';
        const svg = d3.select(svgElement)
            .attr('width', width)
            .attr('height', height)
            .attr('viewBox', `0 0 ${width} ${height}`)
            .style('cursor', 'grab');

        const colors = {
            book: '#facc15',
            author: '#3b82f6',
            genre: '#10b981',
            shelf: '#f97316',
            mood: '#8b5cf6'
        };

        const localLibrary = this.getLibraryState();    
        const allBooks = ['current', 'want', 'finished'].flatMap(s =>
            (localLibrary[s] || []).map(b => ({ ...b, shelfType: s }))
        );

        const emptyState = document.getElementById('constellation-empty-state');
        if (allBooks.length === 0) {
            if (emptyState) emptyState.classList.remove('hidden');
            return;
        }
        if (emptyState) emptyState.classList.add('hidden');

        const nodes = [];
        const links = [];
        const nodeMap = new Map();

        const addNode = (id, type, label, data = {}) => {
            if (nodeMap.has(id)) return nodeMap.get(id);
            const n = {
                id, type, label, ...data,
                radius: type === 'book' ? 55 : 35,
                // Start nodes near center but with some spread
                x: width / 2 + (Math.random() - 0.5) * 100,
                y: height / 2 + (Math.random() - 0.5) * 100
            };
            nodes.push(n);
            nodeMap.set(id, n);
            return n;
        };

        // Build Graph Data
        allBooks.forEach(book => {
            const bNode = addNode(`book-${book.id}`, 'book', book.title, { bookData: book });
            addNode(`shelf-${book.shelfType}`, 'shelf', book.shelfType.charAt(0).toUpperCase() + book.shelfType.slice(1));
            links.push({ source: bNode.id, target: `shelf-${book.shelfType}`, type: 'shelf' });

            const author = book.author || (book.volumeInfo && book.volumeInfo.authors && book.volumeInfo.authors[0]);
            if (author) {
                addNode(`author-${author}`, 'author', author);
                links.push({ source: bNode.id, target: `author-${author}`, type: 'author' });
            }

            (book.moods || []).forEach(m => {
                addNode(`mood-${m}`, 'mood', m);
                links.push({ source: bNode.id, target: `mood-${m}`, type: 'mood' });
            });

            const genres = book.categories || (book.volumeInfo && book.volumeInfo.categories) || [];
            genres.forEach(g => {
                addNode(`genre-${g}`, 'genre', g);
                links.push({ source: bNode.id, target: `genre-${g}`, type: 'genre' });
            });
        });

        const defs = svg.append('defs');

        // Cinematic Glow Filter
        const filter = defs.append('filter').attr('id', 'glow-filter').attr('x', '-50%').attr('y', '-50%').attr('width', '200%').attr('height', '200%');
        filter.append('feGaussianBlur').attr('stdDeviation', '4').attr('result', 'blur');
        filter.append('feComposite').attr('in', 'SourceGraphic').attr('in2', 'blur').attr('operator', 'over');

        // Book Covers as Patterns
        nodes.filter(n => n.type === 'book').forEach(n => {
            const coverUrl = n.bookData.cover || (n.bookData.volumeInfo && n.bookData.volumeInfo.imageLinks && n.bookData.volumeInfo.imageLinks.thumbnail) || '../assets/images/biblioDrift_favicon.png';
            defs.append('pattern')
                .attr('id', `pat-${n.id}`)
                .attr('width', 1).attr('height', 1)
                .attr('patternContentUnits', 'objectBoundingBox')
                .append('image')
                .attr('href', coverUrl.replace('http:', 'https:'))
                .attr('width', 1).attr('height', 1)
                .attr('preserveAspectRatio', 'xMidYMid slice');
        });

        const mainLayer = svg.append('g').attr('class', 'constellation-main-layer');
        const linkLayer = mainLayer.append('g').attr('class', 'links-layer');
        const nodeLayer = mainLayer.append('g').attr('class', 'nodes-layer');

        const zoom = d3.zoom()
            .scaleExtent([0.1, 4])
            .on('zoom', (event) => mainLayer.attr('transform', event.transform));

        svg.call(zoom);

        // Force Simulation Configuration
        const simulation = d3.forceSimulation(nodes)
            .force('link', d3.forceLink(links).id(d => d.id).distance(200).strength(0.8))
            .force('charge', d3.forceManyBody().strength(-2500))
            .force('center', d3.forceCenter(width / 2, height / 2))
            .force('collide', d3.forceCollide().radius(d => d.radius + 60))
            .force('x', d3.forceX(width / 2).strength(0.12))
            .force('y', d3.forceY(height / 2).strength(0.12))
            .alphaDecay(0.01)
            .velocityDecay(0.4);

        this.constellationSimulation = simulation;

        const link = linkLayer.selectAll('line')
            .data(links)
            .join('line')
            .attr('class', 'constellation-link')
            .attr('stroke', d => colors[d.type])
            .attr('stroke-width', 2);

        const node = nodeLayer.selectAll('.constellation-node')
            .data(nodes)
            .join('g')
            .attr('class', d => `constellation-node node-${d.type}`)
            .call(d3.drag()
                .on('start', (event, d) => {
                    if (!event.active) simulation.alphaTarget(0.3).restart();
                    d.fx = d.x; d.fy = d.y;
                    event.sourceEvent.stopPropagation();
                    svg.style('cursor', 'grabbing');
                })
                .on('drag', (event, d) => {
                    d.fx = event.x; d.fy = event.y;
                })
                .on('end', (event, d) => {
                    if (!event.active) simulation.alphaTarget(0);
                    d.fx = null; d.fy = null;
                    svg.style('cursor', 'grab');
                }));

        node.append('circle')
            .attr('class', 'node-core')
            .attr('r', d => d.radius)
            .attr('fill', d => d.type === 'book' ? `url(#pat-${d.id})` : colors[d.type])
            .attr('stroke', '#fff')
            .attr('stroke-width', 2)
            .style('filter', 'url(#glow-filter)');

        node.append('text')
            .attr('class', 'node-label')
            .attr('dy', d => d.radius + 30)
            .attr('text-anchor', 'middle')
            .attr('fill', '#fff')
            .style('font-size', '13px')
            .style('font-weight', '600')
            .style('text-shadow', '0 2px 4px rgba(0,0,0,0.8)')
            .text(d => d.label.length > 22 ? d.label.substring(0, 20) + '...' : d.label);

        // Fit to Viewport helper
        const fitGraph = (animate = true) => {
            const bounds = mainLayer.node().getBBox();
            if (bounds.width === 0 || bounds.height === 0) return;
            
            const scale = 0.8 / Math.max(bounds.width / width, bounds.height / height);
            const midX = bounds.x + bounds.width / 2;
            const midY = bounds.y + bounds.height / 2;
            
            const transform = d3.zoomIdentity
                .translate(width / 2 - midX * scale, height / 2 - midY * scale)
                .scale(scale);
                
            if (animate) {
                svg.transition().duration(800).ease(d3.easeCubicOut).call(zoom.transform, transform);
            } else {
                svg.call(zoom.transform, transform);
            }
        };

        simulation.on('tick', () => {
            link.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
                .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
            node.attr('transform', d => `translate(${d.x},${d.y})`);
        });

        // Warmup simulation and then fit
        for (let i = 0; i < 100; ++i) simulation.tick();
        
        // Final layout adjustment after warmup
        requestAnimationFrame(() => {
            fitGraph(false);
            simulation.alpha(0.3).restart();
        });

        // Hover Animations
        node.on('mouseenter', (event, d) => {
            const related = new Set([d.id]);
            links.forEach(l => {
                if (l.source.id === d.id) related.add(l.target.id);
                if (l.target.id === d.id) related.add(l.source.id);
            });
            node.classed('dimmed', n => !related.has(n.id));
            link.classed('highlighted', l => l.source.id === d.id || l.target.id === d.id)
                .classed('dimmed', l => l.source.id !== d.id && l.target.id !== d.id);
            d3.select(event.currentTarget).raise();
            d3.select(event.currentTarget).select('.node-core').transition().duration(250).attr('r', d.radius * 1.3);
        }).on('mouseleave', (event, d) => {
            node.classed('dimmed', false);
            link.classed('highlighted', false).classed('dimmed', false);
            d3.select(event.currentTarget).select('.node-core').transition().duration(250).attr('r', d.radius);
        }).on('click', (event, d) => {
            event.stopPropagation();
            if (d.type === 'book') {
                if (typeof this.openModal === 'function') this.openModal(d.bookData);
                else if (window.libManager?.renderer) window.libManager.renderer.openModal(d.bookData);
            } else {
                const scale = 1.5;
                svg.transition().duration(800).call(zoom.transform, d3.zoomIdentity.translate(width / 2 - d.x * scale, height / 2 - d.y * scale).scale(scale));
            }
        });

        // Toolbar Button Bindings
        const centerBtn = document.getElementById('center-graph-btn');
        if (centerBtn) centerBtn.onclick = () => fitGraph(true);
        const resetBtn = document.getElementById('reset-graph-btn');
        if (resetBtn) resetBtn.onclick = () => { simulation.alpha(1).restart(); fitGraph(true); };
        const fullscreenBtn = document.getElementById('fullscreen-graph-btn');
        if (fullscreenBtn) fullscreenBtn.onclick = () => {
            if (!document.fullscreenElement) {
                container.requestFullscreen().catch(err => {
                    console.warn(`Error attempting to enable full-screen mode: ${err.message}`);
                });
            } else {
                document.exitFullscreen();
            }
        };

        // Resize handling
        this._constellationResizeHandler = () => {
            if (container.classList.contains('hidden')) return;
            
            const r = container.getBoundingClientRect();
            const w = r.width || container.clientWidth;
            const h = r.height || container.clientHeight;
            
            svg.attr('width', w).attr('height', h);
            simulation.force('center', d3.forceCenter(w / 2, h / 2));
            simulation.alpha(0.3).restart();
            
            // Re-center after a short delay to allow simulation to adjust
            clearTimeout(this._resizeFitTimeout);
            this._resizeFitTimeout = setTimeout(() => fitGraph(true), 150);
        };
        window.addEventListener('resize', this._constellationResizeHandler);
    }

    async load3DAssets() {
        return new Promise((resolve) => {
            this.showLoadingSpinner();

            const workerCode = `
                self.onmessage = function(e) {
                    const { models } = e.data;
                    let parsedData = [];
                    
                    for (let i = 0; i < models.length; i++) {
                        const model = models[i];
                        // Simulate heavy synchronous parsing of 3D models to show worker offloading
                        let vertices = 0;
                        for (let j = 0; j < 1500000; j++) {
                            vertices += Math.sqrt(j) * Math.sin(j);
                        }
                        
                        parsedData.push({
                            id: model.id,
                            verticesCount: Math.abs(Math.floor(vertices)),
                            status: 'parsed',
                            timestamp: Date.now()
                        });
                        
                        self.postMessage({ 
                            type: 'progress', 
                            progress: Math.round(((i + 1) / models.length) * 100),
                            currentModel: model.id
                        });
                    }
                    
                    self.postMessage({ type: 'complete', data: parsedData });
                };
            `;

            const blob = new Blob([workerCode], { type: 'application/javascript' });
            const workerUrl = URL.createObjectURL(blob);
            const worker = new Worker(workerUrl);

            const mockModels = [
                { id: 'shelf-wood-texture-high-res' },
                { id: 'book-cover-geometry-base' },
                { id: 'ambient-lighting-map' },
                { id: 'dust-particles-mesh' },
                { id: 'page-edges-displacement' },
                { id: 'leather-normal-map' },
                { id: 'gold-foil-reflection-probe' },
                { id: 'room-environment-hdri' }
            ];

            worker.onmessage = (e) => {
                const { type, progress, data } = e.data;
                if (type === 'progress') {
                    this.updateLoadingSpinner(progress);
                } else if (type === 'complete') {
                    console.log('3D Assets loaded asynchronously via Web Worker:', data);
                    worker.terminate();
                    URL.revokeObjectURL(workerUrl);
                    this.hideLoadingSpinner();
                    this.assetsLoaded = true;
                    resolve();
                }
            };

            worker.onerror = (error) => {
                console.error('Web Worker error:', error);
                this.hideLoadingSpinner();
                this.assetsLoaded = true;
                resolve();
            };

            worker.postMessage({ models: mockModels });
        });
    }

    showLoadingSpinner() {
        let spinnerContainer = document.getElementById('bookshelf-3d-loader');
        if (!spinnerContainer) {
            spinnerContainer = document.createElement('div');
            spinnerContainer.id = 'bookshelf-3d-loader';
            spinnerContainer.style.cssText = `
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(18, 18, 18, 0.85);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                z-index: 1000;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #e0e0e0;
                font-family: 'Inter', sans-serif;
                transition: opacity 0.5s ease;
                border-radius: 12px;
            `;

            const spinner = document.createElement('div');
            spinner.className = 'loader-spinner';
            spinner.style.cssText = `
                width: 60px;
                height: 60px;
                border: 4px solid rgba(212, 175, 55, 0.2);
                border-top: 4px solid #d4af37;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin-bottom: 20px;
            `;

            if (!document.getElementById('loader-keyframes')) {
                const style = document.createElement('style');
                style.id = 'loader-keyframes';
                style.textContent = `
                    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
                `;
                document.head.appendChild(style);
            }

            const textContainer = document.createElement('div');
            textContainer.style.textAlign = 'center';

            const title = document.createElement('h3');
            title.textContent = 'Preparing 3D Environment';
            title.style.margin = '0 0 10px 0';
            title.style.color = '#d4af37';
            title.style.fontWeight = '500';

            const progressContainer = document.createElement('div');
            progressContainer.style.cssText = `
                width: 250px;
                height: 6px;
                background: rgba(255,255,255,0.1);
                border-radius: 3px;
                overflow: hidden;
                margin: 0 auto;
            `;

            const progressBar = document.createElement('div');
            progressBar.id = 'bookshelf-3d-progress-bar';
            progressBar.style.cssText = `
                height: 100%;
                width: 0%;
                background: linear-gradient(90deg, #d4af37, #f3e5ab);
                transition: width 0.3s ease;
            `;

            const progressText = document.createElement('div');
            progressText.id = 'bookshelf-3d-progress-text';
            progressText.textContent = 'Loading models... 0%';
            progressText.style.fontSize = '14px';
            progressText.style.marginTop = '10px';
            progressText.style.color = '#a0a0a0';

            progressContainer.appendChild(progressBar);
            textContainer.appendChild(title);
            textContainer.appendChild(progressContainer);
            textContainer.appendChild(progressText);

            spinnerContainer.appendChild(spinner);
            spinnerContainer.appendChild(textContainer);

            const libContainer = document.getElementById('library-container') || document.querySelector('.main-content') || document.body;
            if (libContainer !== document.body && window.getComputedStyle(libContainer).position === 'static') {
                libContainer.style.position = 'relative';
            }
            libContainer.appendChild(spinnerContainer);
        }
        spinnerContainer.style.opacity = '1';
        spinnerContainer.style.pointerEvents = 'all';
    }

    updateLoadingSpinner(progress) {
        const progressBar = document.getElementById('bookshelf-3d-progress-bar');
        const progressText = document.getElementById('bookshelf-3d-progress-text');
        if (progressBar) progressBar.style.width = `${progress}%`;
        if (progressText) progressText.textContent = `Loading high-res models... ${progress}%`;
    }

    hideLoadingSpinner() {
        const spinnerContainer = document.getElementById('bookshelf-3d-loader');
        if (spinnerContainer) {
            spinnerContainer.style.opacity = '0';
            spinnerContainer.style.pointerEvents = 'none';
            setTimeout(() => {
                if (spinnerContainer.parentNode) {
                    spinnerContainer.parentNode.removeChild(spinnerContainer);
                }
            }, 500);
        }
    }

    getLibraryState() {
        if (window.libManager && typeof window.libManager.getLibrarySnapshot === 'function') {
            return window.libManager.getLibrarySnapshot();
        }

        const storageKey = 'bibliodrift_library';
        return JSON.parse(StorageHelper.get(storageKey)) || {
            current: [],
            want: [],
            finished: []
        };
    }

    findBookShelf(bookId) {
        if (window.libManager && typeof window.libManager.findBookShelf === 'function') {
            return window.libManager.findBookShelf(bookId);
        }

        const library = this.getLibraryState();
        for (const shelf of ['current', 'want', 'finished']) {
            if ((library[shelf] || []).some(book => book.id === bookId)) {
                return shelf;
            }
        }

        return null;
    }

    addManagedListener(target, eventName, handler, options) {
        if (!target || typeof target.addEventListener !== 'function') {
            return;
        }

        target.addEventListener(eventName, handler, options);
        this.cleanupCallbacks.push(() => target.removeEventListener(eventName, handler, options));
    }

    checkWebGLSupport() {
        try {
            const canvas = document.createElement('canvas');
            return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
        } catch (e) {
            return false;
        }
    }

    showWebGLErrorMessage() {
        const container = document.getElementById('library-container') || document.querySelector('.main-content') || document.body;
        const errorBanner = document.createElement('div');
        errorBanner.id = 'webgl-error-banner';
        errorBanner.style.cssText = `
            background - color: rgba(220, 53, 69, 0.1);
            border - left: 4px solid #dc3545;
            color: #dc3545;
            padding: 15px 20px;
            margin: 20px auto;
            max - width: 800px;
            border - radius: 4px;
            font - family: 'Inter', sans - serif;
            display: flex;
            align - items: center;
            justify - content: space - between;
            box - shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: relative;
            z - index: 100;
            `;

        const message = document.createElement('div');
        message.innerHTML = `
                < strong style = "display: block; margin-bottom: 5px; font-size: 1.1em;" > <i class="fa-solid fa-triangle-exclamation"></i> WebGL Not Supported</strong >
                    <span style="font-size: 0.9em; opacity: 0.9;">Your browser or device does not support WebGL, which is required for the 3D interactive bookshelf. We have enabled a graceful 2D fallback mode so you can continue managing your library.</span>
            `;

        const dismissBtn = document.createElement('button');
        dismissBtn.innerHTML = '<i class="fa-solid fa-times"></i>';
        dismissBtn.style.cssText = `
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            font - size: 1.2em;
            padding: 5px;
            opacity: 0.7;
            transition: opacity 0.2s;
            `;
        dismissBtn.onmouseover = () => dismissBtn.style.opacity = '1';
        dismissBtn.onmouseout = () => dismissBtn.style.opacity = '0.7';
        dismissBtn.onclick = () => {
            errorBanner.style.opacity = '0';
            setTimeout(() => {
                if (errorBanner.parentNode) errorBanner.parentNode.removeChild(errorBanner);
            }, 300);
        };

        errorBanner.appendChild(message);
        errorBanner.appendChild(dismissBtn);

        if (container === document.body) {
            document.body.insertBefore(errorBanner, document.body.firstChild);
        } else {
            container.insertBefore(errorBanner, container.firstChild);
        }
    }

    init2DFallback() {
        this.assetsLoaded = true; // No 3D assets needed

        // Hide the view toggle buttons since 3D and constellation are not available
        const viewControls = document.querySelector('.view-controls');
        if (viewControls) {
            viewControls.style.display = 'none';
        }

        const containerShelves = document.getElementById('library-shelves');
        const containerConstellation = document.getElementById('constellation-container');

        if (containerConstellation) containerConstellation.classList.add('hidden');
        if (containerShelves) containerShelves.classList.remove('hidden');

        // Apply a 2D layout class to shelves
        const shelves = document.querySelectorAll('.shelf-container-3d, .shelf-current-3d, .shelf-want-3d, .shelf-finished-3d');
        shelves.forEach(shelf => {
            shelf.classList.add('fallback-2d');
            shelf.style.display = 'flex';
            shelf.style.flexWrap = 'wrap';
            shelf.style.gap = '20px';
            shelf.style.justifyContent = 'center';
            shelf.style.padding = '20px';
            shelf.style.perspective = 'none';
            shelf.style.transformStyle = 'flat';
            shelf.style.borderBottom = '1px solid rgba(255, 255, 255, 0.1)';
            shelf.style.background = 'transparent';
            shelf.style.boxShadow = 'none';
        });

        // Setup common listeners for 2D mode
        const sortSelect = document.getElementById('library-sort');
        if (sortSelect) {
            this.addManagedListener(sortSelect, 'change', (e) => {
                this.sortCriteria = e.target.value;
                this.refreshShelves2D();
            });
        }

        const filterSelect = document.getElementById('library-filter');
        if (filterSelect) {
            this.addManagedListener(filterSelect, 'change', (e) => {
                this.filterCriteria = e.target.value;
                this.refreshShelves2D();
            });
        }

        const searchInput = document.getElementById('searchInput');
        if (searchInput) {
            this.addManagedListener(searchInput, 'input', (e) => {
                this.searchQuery = e.target.value.toLowerCase();
                this.refreshShelves2D();
            });
        }

        this.refreshShelves2D();

        this.addManagedListener(window, 'bibliodrift:library-manager-ready', () => {
            this.refreshShelves2D();
        });
        this.addManagedListener(window, 'bibliodrift:library-manager-synced', () => {
            this.refreshShelves2D();
        });

        this.setupModalHandlers();
    }

    refreshShelves2D() {
        const showCurrent = this.filterCriteria === 'all' || this.filterCriteria === 'current';
        const showWant = this.filterCriteria === 'all' || this.filterCriteria === 'want';
        const showFinished = this.filterCriteria === 'all' || this.filterCriteria === 'finished';

        const currentCount = this.getShelfBookCount('current', this.searchQuery);
        const wantCount = this.getShelfBookCount('want', this.searchQuery);
        const finishedCount = this.getShelfBookCount('finished', this.searchQuery);

        let totalVisibleBooks = 0;
        if (showCurrent) totalVisibleBooks += currentCount;
        if (showWant) totalVisibleBooks += wantCount;
        if (showFinished) totalVisibleBooks += finishedCount;

        const isEmpty = totalVisibleBooks === 0;
        const forceShowSpecific = this.filterCriteria !== 'all';

        this.updateShelfVisibility('shelf-current-3d', !isEmpty && showCurrent && (currentCount > 0 || forceShowSpecific));
        this.updateShelfVisibility('shelf-want-3d', !isEmpty && showWant && (wantCount > 0 || forceShowSpecific));
        this.updateShelfVisibility('shelf-finished-3d', !isEmpty && showFinished && (finishedCount > 0 || forceShowSpecific));

        if (!isEmpty) {
            if (showCurrent && (currentCount > 0 || forceShowSpecific)) this.renderShelf2D('current', 'shelf-current-3d');
            if (showWant && (wantCount > 0 || forceShowSpecific)) this.renderShelf2D('want', 'shelf-want-3d');
            if (showFinished && (finishedCount > 0 || forceShowSpecific)) this.renderShelf2D('finished', 'shelf-finished-3d');
        }

        const emptyState = document.getElementById('library-empty-state');
        if (emptyState) {
            emptyState.hidden = !isEmpty;
        }
    }

    renderShelf2D(shelfType, containerId) {
        const container = document.getElementById(containerId);
        if (!container) return;

        const shelfLabels = {
            'current': 'Currently Immersed',
            'want': 'Anticipated Journeys',
            'finished': 'Lifetime Favorites'
        };
        container.setAttribute('aria-label', shelfLabels[shelfType] || `${shelfType} books shelf`);

        const localLibrary = this.getLibraryState();
        let books = [...(localLibrary[shelfType] || [])];

        books = books.map(b => {
            if (b.volumeInfo) {
                return {
                    id: b.id,
                    title: b.volumeInfo.title || 'Untitled',
                    author: (b.volumeInfo.authors && b.volumeInfo.authors[0]) || 'Unknown',
                    cover: b.volumeInfo.imageLinks?.thumbnail || '',
                    description: b.volumeInfo.description || '',
                    rating: b.volumeInfo.averageRating || 4.0,
                    ratingCount: b.volumeInfo.ratingsCount || 0,
                    categories: b.volumeInfo.categories || [],
                    spineColor: b.spineColor,
                    moods: b.moods || [],
                    progress: typeof b.progress === 'number' ? b.progress : 0,
                    shelfType: shelfType,
                    reviews: []
                };
            }
            return { ...b, moods: b.moods || [], progress: typeof b.progress === 'number' ? b.progress : 0, shelfType };
        });

        if (this.searchQuery) {
            books = books.filter(b => {
                const title = b.title.toLowerCase();
                const author = b.author.toLowerCase();
                const moods = b.moods.join(" ").toLowerCase();
                return title.includes(this.searchQuery) || author.includes(this.searchQuery) || moods.includes(this.searchQuery);
            });
        }

        books.sort((a, b) => {
            if (this.sortCriteria === 'title') return a.title.localeCompare(b.title);
            if (this.sortCriteria === 'author') return a.author.localeCompare(b.author);
            if (this.sortCriteria === 'rating') return b.rating - a.rating;
            if (this.sortCriteria === 'mood') {
                const moodA = (a.moods && a.moods[0]) || "zzz";
                const moodB = (b.moods && b.moods[0]) || "zzz";
                return moodA.localeCompare(moodB);
            }
            return a.title.localeCompare(b.title);
        });

        if (!books || books.length === 0) {
            container.innerHTML = '<div class="empty-shelf-2d" style="text-align: center; padding: 40px; color: #888;">No books match your criteria.</div>';
            return;
        }

        container.innerHTML = '';
        container.style.display = 'grid';
        container.style.gridTemplateColumns = 'repeat(auto-fill, minmax(160px, 1fr))';
        container.style.gap = '25px';
        container.style.width = '100%';

        let renderIndex = 0;
        const chunkSize = window.CONFIG?.CHUNK_SIZE || 20;

        if (container._shelfObserver) {
            container._shelfObserver.disconnect();
        }

        const sentinel = document.createElement('div');
        sentinel.style.width = '100%';
        sentinel.style.height = '20px';
        sentinel.style.gridColumn = '1 / -1';

        container._shelfObserver = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                renderChunk();
            }
        });

        const renderChunk = () => {
            const chunk = books.slice(renderIndex, renderIndex + chunkSize);
            if (chunk.length === 0) return;

            if (sentinel.parentNode) {
                container.removeChild(sentinel);
            }

            chunk.forEach((book) => {
                const bookCard = this.createBookCard2D(book, shelfType);
                container.appendChild(bookCard);
            });

            renderIndex += chunkSize;
            if (renderIndex < books.length) {
                container.appendChild(sentinel);
                container._shelfObserver.observe(sentinel);
            } else if (container._shelfObserver) {
                container._shelfObserver.disconnect();
            }
        };

        renderChunk();

        container.setAttribute('aria-label', `${shelfLabels[shelfType]} - ${books.length} book${books.length !== 1 ? 's' : ''}`);
    }

    createBookCard2D(book, shelfType) {
        const card = document.createElement('div');
        card.className = 'book-card-2d';
        card.style.cssText = `
            background: rgba(30, 30, 30, 0.6);
            border - radius: 8px;
            overflow: hidden;
            display: flex;
            flex - direction: column;
            transition: transform 0.2s, box - shadow 0.2s;
            cursor: pointer;
            box - shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
            `;

        card.onmouseover = () => {
            card.style.transform = 'translateY(-5px)';
            card.style.boxShadow = '0 8px 15px rgba(0,0,0,0.3)';
            card.style.border = '1px solid rgba(212, 175, 55, 0.3)';
        };
        card.onmouseout = () => {
            card.style.transform = 'translateY(0)';
            card.style.boxShadow = '0 4px 6px rgba(0,0,0,0.2)';
            card.style.border = '1px solid rgba(255, 255, 255, 0.05)';
        };

        const coverContainer = document.createElement('div');
        coverContainer.style.cssText = `
            width: 100 %;
            padding - top: 150 %; /* 2:3 aspect ratio */
            position: relative;
            background: #2a2a2a;
            `;

        if (book.cover) {
            const img = document.createElement('img');
            img.src = book.cover;
            img.alt = book.title;
            img.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100 %;
            height: 100 %;
            object - fit: cover;
            `;
            coverContainer.appendChild(img);
        } else {
            const noCover = document.createElement('div');
            noCover.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100 %;
            height: 100 %;
            display: flex;
            align - items: center;
            justify - content: center;
            color: #666;
            text - align: center;
            padding: 10px;
            font - size: 0.9em;
            background: linear - gradient(135deg, ${book.spineColor || '#444'}, #222);
            `;
            noCover.textContent = book.title;
            coverContainer.appendChild(noCover);
        }

        const infoContainer = document.createElement('div');
        infoContainer.style.cssText = `
            padding: 12px;
            display: flex;
            flex - direction: column;
            flex - grow: 1;
            background: rgba(20, 20, 20, 0.8);
            `;

        const title = document.createElement('h4');
        title.textContent = book.title;
        title.style.cssText = `
            margin: 0 0 5px 0;
            font - size: 1rem;
            color: #f0f0f0;
            display: -webkit - box;
            -webkit - line - clamp: 2;
            -webkit - box - orient: vertical;
            overflow: hidden;
            font - family: 'Playfair Display', serif;
            `;

        const author = document.createElement('p');
        author.textContent = book.author;
        author.style.cssText = `
            margin: 0 0 8px 0;
            font - size: 0.85rem;
            color: #a0a0a0;
            white - space: nowrap;
            overflow: hidden;
            text - overflow: ellipsis;
            `;

        const metaRow = document.createElement('div');
        metaRow.style.cssText = `
            display: flex;
            justify - content: space - between;
            align - items: center;
            margin - top: auto;
            font - size: 0.8rem;
            `;

        const rating = document.createElement('span');
        rating.innerHTML = `<i class="fa-solid fa-star" style="color: #d4af37;"></i> ${book.rating ? book.rating.toFixed(1) : 'N/A'}`;
        rating.style.color = '#ccc';

        metaRow.appendChild(rating);

        if (shelfType === 'current' && book.progress > 0) {
            const progress = document.createElement('span');
            progress.textContent = `${book.progress}%`;
            progress.style.color = '#4caf50';
            progress.style.fontWeight = 'bold';
            metaRow.appendChild(progress);
        }

        infoContainer.appendChild(title);
        infoContainer.appendChild(author);
        infoContainer.appendChild(metaRow);

        card.appendChild(coverContainer);
        card.appendChild(infoContainer);

        card.addEventListener('click', () => this.openModal(book));
        card.setAttribute('tabindex', '0');
        card.setAttribute('role', 'button');
        card.setAttribute('aria-label', `${book.title} by ${book.author}`);

        card.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.openModal(book);
            }
        });

        return card;
    }

    async init() {
        if (!this.checkWebGLSupport()) {
            this.webGLSupported = false;
            this.showWebGLErrorMessage();
            this.init2DFallback();
            return;
        }
        this.webGLSupported = true;

        // Wait for 3D assets to load via Web Worker to prevent main thread blocking
        await this.load3DAssets();

        // Initialize actual Three.js Engine
        if (typeof THREE !== 'undefined') {
            this.initThreeJSEngine();
        }

        // Sort listener
        const sortSelect = document.getElementById('library-sort');
        if (sortSelect) {
            this.addManagedListener(sortSelect, 'change', (e) => {
                this.sortCriteria = e.target.value;
                this.refreshShelves();
            });
        }

        // Filter listener
        const filterSelect = document.getElementById('library-filter');
        if (filterSelect) {
            this.addManagedListener(filterSelect, 'change', (e) => {
                this.filterCriteria = e.target.value;
                this.refreshShelves();
            });
        }

        // Search listener for "Search for a feeling..."
        const searchInput = document.getElementById('searchInput');

        if (searchInput) {
            const debouncedSearch = debounce((value) => {
                console.log("Debounced fired:", value);
                this.searchQuery = value.toLowerCase();

                if (this.currentView === 'shelves') {
                    this.refreshShelves();
                } else if (this.currentView === 'constellation') {
                    this.renderConstellationView();
                }
            }, 300);

            this.addManagedListener(searchInput, 'input', (e) => {
                debouncedSearch(e.target.value);
            });
        }

        // View Toggles
        const btnShelves = document.getElementById('view-shelves-btn');
        const btnConstellation = document.getElementById('view-constellation-btn');
        const btnCollections = document.getElementById('view-collections-btn');
        const containerShelves = document.getElementById('library-shelves');
        const containerConstellation = document.getElementById('constellation-container');
        const containerCollections = document.getElementById('collections-container');

        const switchView = (targetView) => {
            this.currentView = targetView;

            // Update button styles
            const btns = [
                { el: btnShelves, view: 'shelves' },
                { el: btnConstellation, view: 'constellation' },
                { el: btnCollections, view: 'collections' }
            ];
            if (
                this.constellationSimulation &&
                targetView !== 'constellation'
            ) {
                this.constellationSimulation.stop();
            }

            btns.forEach(btn => {
                if (btn.el) {
                    if (btn.view === targetView) {
                        btn.el.classList.add('active-view');
                        btn.el.classList.replace('btn-secondary', 'btn-primary');
                    } else {
                        btn.el.classList.remove('active-view');
                        btn.el.classList.replace('btn-primary', 'btn-secondary');
                    }
                }
            });

            // Show/hide containers
            const containers = [
                { el: containerShelves, view: 'shelves' },
                { el: containerConstellation, view: 'constellation' },
                { el: containerCollections, view: 'collections' }
            ];

            containers.forEach(c => {
                if (c.el) {
                    if (c.view === targetView) {
                        c.el.classList.remove('hidden');
                    } else {
                        c.el.classList.add('hidden');
                    }
                }
            });
        };

        if (btnShelves) {
            this.addManagedListener(btnShelves, 'click', () => {
                switchView('shelves');
                this.refreshShelves();
            });
        }

        if (btnConstellation) {
            this.addManagedListener(btnConstellation, 'click', () => {
                switchView('constellation');
                this.renderConstellationView();
            });
        }

        if (btnCollections) {
            this.addManagedListener(btnCollections, 'click', () => {
                switchView('collections');
                this.loadAndRenderCollections();
            });
        }

        // Render all shelves with sample books
        this.refreshShelves();

        this.addManagedListener(window, 'bibliodrift:library-manager-ready', () => {
            this.refreshShelves();
        });
        this.addManagedListener(window, 'bibliodrift:library-manager-synced', () => {
            this.refreshShelves();
        });

        // Attach global ESC listener for modal exactly once
        this.addManagedListener(document, 'keydown', (e) => {
            if (e.key === 'Escape' && this.modal && this.modal.classList.contains('active')) {
                this.closeModal();
            }
        });

        // Setup modal close handlers
        this.setupModalHandlers();
    }

    initThreeJSEngine() {
        const container = document.getElementById('library-container') || document.querySelector('.main-content') || document.body;
        
        // Create Scene
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0x1a1a1a);
        
        // Create Camera
        const width = container.clientWidth || window.innerWidth;
        const height = container.clientHeight || window.innerHeight;
        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
        this.camera.position.set(0, 1.5, 5);
        
        // Create Renderer
        this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        this.renderer.setSize(width, height);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.domElement.style.position = 'absolute';
        this.renderer.domElement.style.top = '0';
        this.renderer.domElement.style.left = '0';
        this.renderer.domElement.style.width = '100%';
        this.renderer.domElement.style.height = '100%';
        this.renderer.domElement.style.zIndex = '-1'; // Place behind the DOM fallback for now
        this.renderer.domElement.style.pointerEvents = 'none'; // Let DOM handle clicks for now, or update later
        
        // Ensure container is positioned
        if (getComputedStyle(container).position === 'static') {
            container.style.position = 'relative';
        }
        container.appendChild(this.renderer.domElement);
        
        // Add Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        this.scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 10, 7);
        this.scene.add(directionalLight);
        
        // Build the 3D environment with static/dynamic separation
        this.buildThreeJSEnvironment();
        
        // Handle Resize
        window.addEventListener('resize', () => {
            if (!this.camera || !this.renderer) return;
            const newWidth = container.clientWidth || window.innerWidth;
            const newHeight = container.clientHeight || window.innerHeight;
            this.camera.aspect = newWidth / newHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(newWidth, newHeight);
        });
        
        // Start Rendering Loop
        this.animateThreeJS();
    }

    buildThreeJSEnvironment() {
        // Create a static bookshelf
        const shelfGeometry = new THREE.BoxGeometry(10, 0.2, 2);
        const shelfMaterial = new THREE.MeshLambertMaterial({ color: 0x3e2723 });
        
        for (let i = 0; i < 3; i++) {
            const shelf = new THREE.Mesh(shelfGeometry, shelfMaterial);
            shelf.position.y = i * 2 - 2;
            
            // OPTIMIZATION: Static objects do not update their matrices every frame
            shelf.matrixAutoUpdate = false;
            shelf.updateMatrix();
            
            this.scene.add(shelf);
            this.staticObjects.push(shelf);
        }
        
        // Add some mock dynamic objects (e.g. floating dust particles or moving books)
        const dustGeometry = new THREE.BoxGeometry(0.05, 0.05, 0.05);
        const dustMaterial = new THREE.MeshBasicMaterial({ color: 0xd4af37 });
        
        for (let i = 0; i < 50; i++) {
            const dust = new THREE.Mesh(dustGeometry, dustMaterial);
            dust.position.set(
                (Math.random() - 0.5) * 10,
                (Math.random() - 0.5) * 10,
                (Math.random() - 0.5) * 5
            );
            
            // Dynamic objects update their matrices
            dust.matrixAutoUpdate = true;
            
            // Add custom properties for animation
            dust.userData = {
                speedX: (Math.random() - 0.5) * 0.01,
                speedY: (Math.random() - 0.5) * 0.01
            };
            
            this.scene.add(dust);
            this.dynamicObjects.push(dust);
        }
    }

    animateThreeJS() {
        this.threeJsAnimationId = requestAnimationFrame(() => this.animateThreeJS());
        
        // Only update dynamic objects
        for (const obj of this.dynamicObjects) {
            obj.position.x += obj.userData.speedX;
            obj.position.y += obj.userData.speedY;
            
            // Keep within bounds
            if (obj.position.x > 5 || obj.position.x < -5) obj.userData.speedX *= -1;
            if (obj.position.y > 5 || obj.position.y < -5) obj.userData.speedY *= -1;
            
            obj.rotation.x += 0.01;
            obj.rotation.y += 0.01;
        }
        
        // Static objects require 0 CPU overhead here because matrixAutoUpdate is false
        
        this.renderer.render(this.scene, this.camera);
    }

    refreshShelves() {
        if (!this.assetsLoaded) return;

        const showCurrent = this.filterCriteria === 'all' || this.filterCriteria === 'current';
        const showWant = this.filterCriteria === 'all' || this.filterCriteria === 'want';
        const showFinished = this.filterCriteria === 'all' || this.filterCriteria === 'finished';

        // Count books first with search filter applied
        const currentCount = this.getShelfBookCount('current', this.searchQuery);
        const wantCount = this.getShelfBookCount('want', this.searchQuery);
        const finishedCount = this.getShelfBookCount('finished', this.searchQuery);

        let totalVisibleBooks = 0;
        if (showCurrent) totalVisibleBooks += currentCount;
        if (showWant) totalVisibleBooks += wantCount;
        if (showFinished) totalVisibleBooks += finishedCount;

        const isEmpty = totalVisibleBooks === 0;

        // Update shelf visibility: Show shelf only if filter includes it AND (it has books OR we are specifically searching THIS shelf)
        // Actually, if we are in 'all' view, only show shelves that have books. 
        // If we are in specific shelf view, show it even if empty (but global empty state will override if total is 0)

        const forceShowSpecific = this.filterCriteria !== 'all';

        this.updateShelfVisibility('shelf-current-3d', !isEmpty && showCurrent && (currentCount > 0 || forceShowSpecific));
        this.updateShelfVisibility('shelf-want-3d', !isEmpty && showWant && (wantCount > 0 || forceShowSpecific));
        this.updateShelfVisibility('shelf-finished-3d', !isEmpty && showFinished && (finishedCount > 0 || forceShowSpecific));

        if (!isEmpty) {
            if (showCurrent && (currentCount > 0 || forceShowSpecific)) this.renderShelf('current', 'shelf-current-3d');
            if (showWant && (wantCount > 0 || forceShowSpecific)) this.renderShelf('want', 'shelf-want-3d');
            if (showFinished && (finishedCount > 0 || forceShowSpecific)) this.renderShelf('finished', 'shelf-finished-3d');
        }

        // Show/Hide Global Empty State
        const emptyState = document.getElementById('library-empty-state');
        if (emptyState) {
            emptyState.hidden = !isEmpty;
        }
    }

    getShelfBookCount(shelfType, query = "") {
        const localLibrary = this.getLibraryState();
        const books = localLibrary[shelfType] || [];
        if (!query) return books.length;

        return books.filter(b => {
            const title = (b.title || b.volumeInfo?.title || "").toLowerCase();
            const author = (b.author || (b.volumeInfo?.authors && b.volumeInfo.authors[0]) || "").toLowerCase();
            const moods = (b.moods || []).join(" ").toLowerCase();
            return title.includes(query) || author.includes(query) || moods.includes(query);
        }).length;
    }

    updateShelfVisibility(containerId, isVisible) {
        const container = document.getElementById(containerId);
        if (container) {
            const section = container.closest('.shelf-section-3d');
            if (section) {
                section.style.display = isVisible ? 'block' : 'none';
            }
        }
    }

    renderShelf(shelfType, containerId) {
        const container = document.getElementById(containerId);
        if (!container) return;

        // Set accessibility attributes on container
        container.setAttribute('role', 'region');
        const shelfLabels = {
            'current': 'Currently Immersed - Books currently being read',
            'want': 'Anticipated Journeys - Books to read',
            'finished': 'Lifetime Favorites - Books finished'
        };
        container.setAttribute('aria-label', shelfLabels[shelfType] || `${shelfType} books shelf`);
        container.setAttribute('aria-live', 'polite');

        // Fetch real library data
        const localLibrary = this.getLibraryState();
        let books = [...(localLibrary[shelfType] || [])];

        // Map to expected format if needed (local storage format usually matches)
        // Ensure volumeInfo is flattened for 3D renderer expectations if they differ
        books = books.map(b => {
            // If it's already flat (like sample), keep it. If it's Google Books style (volumeInfo), flatten it.
            if (b.volumeInfo) {
                let isbnVal = '';
                if (b.volumeInfo.industryIdentifiers) {
                    const identifier = b.volumeInfo.industryIdentifiers.find(i => i.type === 'ISBN_13' || i.type === 'ISBN_10');
                    if (identifier) isbnVal = identifier.identifier;
                }
                return {
                    id: b.id,
                    title: b.volumeInfo.title || 'Untitled',
                    author: (b.volumeInfo.authors && b.volumeInfo.authors[0]) || 'Unknown',
                    isbn: isbnVal,
                    cover: b.volumeInfo.imageLinks?.thumbnail || '',
                    description: b.volumeInfo.description || '',
                    rating: b.volumeInfo.averageRating || 4.0,
                    ratingCount: b.volumeInfo.ratingsCount || 0,
                    categories: b.volumeInfo.categories || [],
                    spineColor: b.spineColor,
                    moods: b.moods || [],
                    progress: typeof b.progress === 'number' ? b.progress : 0,
                    shelfType: shelfType,
                    reviews: []
                };
            }
            return { ...b, moods: b.moods || [], progress: typeof b.progress === 'number' ? b.progress : 0, shelfType };
        });

        // Apply Search Filter
        if (this.searchQuery) {
            books = books.filter(b => {
                const title = b.title.toLowerCase();
                const author = b.author.toLowerCase();
                const moods = b.moods.join(" ").toLowerCase();
                return title.includes(this.searchQuery) || author.includes(this.searchQuery) || moods.includes(this.searchQuery);
            });
        }

        // Sort books
        books.sort((a, b) => {
            if (this.sortCriteria === 'title') return a.title.localeCompare(b.title);
            if (this.sortCriteria === 'author') return a.author.localeCompare(b.author);
            if (this.sortCriteria === 'rating') return b.rating - a.rating;
            if (this.sortCriteria === 'mood') {
                const moodA = (a.moods && a.moods[0]) || "zzz";
                const moodB = (b.moods && b.moods[0]) || "zzz";
                return moodA.localeCompare(moodB);
            }
            return a.title.localeCompare(b.title);
        });

        if (!books || books.length === 0) {
            container.innerHTML = '<div class="empty-shelf-3d" style="text-align: center; padding: 150px;">No books yet... Start your collection!</div>';
            return;
        }

        container.innerHTML = '';

        let renderIndex = 0;
        const chunkSize = window.CONFIG?.CHUNK_SIZE || 20;

        if (container._shelfObserver) {
            container._shelfObserver.disconnect();
        }

        const sentinel = document.createElement('div');
        sentinel.style.width = '100%';
        sentinel.style.height = '20px';
        sentinel.style.flexShrink = '0';

        container._shelfObserver = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                renderChunk();
            }
        });

        const renderChunk = () => {
            const chunk = books.slice(renderIndex, renderIndex + chunkSize);
            if (chunk.length === 0) return;

            if (sentinel.parentNode) {
                container.removeChild(sentinel);
            }

            chunk.forEach((book, i) => {
                const bookSpine = this.createBookSpine(book, renderIndex + i, shelfType);
                container.appendChild(bookSpine);
            });

            renderIndex += chunkSize;
            if (renderIndex < books.length) {
                container.appendChild(sentinel);
                container._shelfObserver.observe(sentinel);
            } else if (container._shelfObserver) {
                container._shelfObserver.disconnect();
            }
        };

        renderChunk();

        // Update aria-label with book count
        container.setAttribute('aria-label', `${shelfLabels[shelfType]} - ${books.length} book${books.length !== 1 ? 's' : ''} `);

        // Add Shelf Drop Zone Logic
        // Remove old listeners? It's hard without named functions. 
        // But since we clear innerHTML, we just re-attach to the container? No, container is persistent.
        // We should be careful about duplicate listeners on the container.

        // A simple way to avoid duplicates is to set a custom property or remove and re-add.
        // Or better, just attach these once in init() if possible, but we need shelfType reference.
        // Since renderShelf is called multiple times, we should check if listeners are attached.
        container.dataset.shelf = shelfType;

        if (!container.dataset.dropListenersAttached) {
            container.addEventListener('dragover', (e) => {
                e.preventDefault(); // Essential for drop
                container.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
            });

            container.addEventListener('dragleave', (e) => {
                container.style.backgroundColor = '';

            });

            container.addEventListener('drop', (e) => {
                e.preventDefault();
                container.style.backgroundColor = '';

                const targetShelf = e.currentTarget.dataset.shelf;
                const bookId = e.dataTransfer.getData('bookId');
                const sourceShelf = e.dataTransfer.getData('sourceShelf');

                if (bookId && sourceShelf && sourceShelf !== targetShelf) {
                    this.moveBook(bookId, sourceShelf, targetShelf);
                }
            });
            container.dataset.dropListenersAttached = 'true';
        }
    }

    createBookSpine(book, index, shelfType) {
        const spine = document.createElement('div');

        // Drag and Drop Attributes
        spine.draggable = true;
        spine.addEventListener('dragstart', (e) => {
            e.dataTransfer.setData('bookId', book.id);
            e.dataTransfer.setData('sourceShelf', shelfType);
            e.dataTransfer.effectAllowed = 'move';
            spine.style.opacity = '0.5';
            // Announce to screen readers
            this.announceToScreenReader(`Started dragging ${book.title} `);
        });

        spine.addEventListener('dragend', (e) => {
            spine.style.opacity = '1';
        });

        // Generate deterministic traits
        const traits = this.generateSpineTraits(book);

        spine.className = `book - spine - 3d ${traits.texture} ${traits.pattern} `;
        spine.dataset.bookId = book.id;

        // Vary spine width based on title length and "page count"
        // Wider spines for longer titles to fit full text
        const baseWidth = Math.min(55, 38 + book.title.length * 0.5);
        const spineWidth = baseWidth + Math.floor(this._seededRandom(traits.seed + 10) * 5); // Use deterministic random

        // MUCH taller books so full title is readable
        const baseHeight = Math.min(280, 220 + book.title.length * 2.5);
        const spineHeight = baseHeight + Math.floor(this._seededRandom(traits.seed + 20) * 10);

        spine.style.width = `${spineWidth} px`;
        spine.style.height = `${spineHeight} px`;
        spine.style.setProperty('--spine-color', traits.spineColor);

        // Animation delay for staggered entrance (keep this index based for UI effect)
        spine.style.animationDelay = `${index * 0.1} s`;

        // Apply Font Class
        spine.classList.add(traits.fontClass);
        if (traits.titleModifier) spine.classList.add(traits.titleModifier);

        const face = document.createElement('div');
        face.className = 'spine-face';
        face.style.backgroundColor = traits.spineColor;
        face.style.color = traits.textColor;

        const titleSpan = document.createElement('span');
        titleSpan.className = 'spine-title';
        titleSpan.textContent = book.title;
        face.appendChild(titleSpan);

        const authorSpan = document.createElement('span');
        authorSpan.className = 'spine-author';
        authorSpan.textContent = book.author ? book.author.split(' ').pop() : '';
        face.appendChild(authorSpan);
        // Issue #606 — Reading Time Badge on spine
const pages = book.pageCount || book.page_count || book.volumeInfo?.pageCount;
const { label: timeLabel } = calcReadingTime(pages);
if (timeLabel) {
    const timeBadge = document.createElement('div');
    timeBadge.className = 'reading-time-badge';
    timeBadge.style.cssText = 'writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.55rem; margin-top: 6px; padding: 2px 4px;';
    timeBadge.innerHTML = `<i class="fa-regular fa-clock"></i> ${timeLabel}`;
    face.appendChild(timeBadge);
}

        if (traits.pattern.includes('ornament')) {
            const ornament = document.createElement('div');
            ornament.className = 'spine-pattern-ornament';
            face.appendChild(ornament);
        }
        if (traits.pattern.includes('bands')) {
            const bands = document.createElement('div');
            bands.className = 'spine-pattern-bands';
            face.appendChild(bands);
        }
        if (traits.pattern.includes('frame')) {
            const frame = document.createElement('div');
            frame.className = 'spine-pattern-frame';
            face.appendChild(frame);
        }

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

        const top = document.createElement('div');
        top.className = 'book-top';
        top.style.setProperty('--spine-color', traits.spineColor);

        spine.innerHTML = '';
        spine.appendChild(face);
        spine.appendChild(edge);
        spine.appendChild(top);

        // Event listeners
        spine.addEventListener('mouseenter', (e) => this.showTooltip(e, book));
        spine.addEventListener('mousemove', (e) => this.moveTooltip(e));
        spine.addEventListener('mouseleave', () => this.hideTooltip());
        spine.addEventListener('click', () => this.openModal(book));

        // Keyboard Accessibility (Issue #534)
        spine.setAttribute('tabindex', '0');
        spine.setAttribute('role', 'button');
        spine.setAttribute('aria-label', `${book.title} by ${book.author}.Rating: ${book.rating}. Press Enter or Space to view details.`);

        spine.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.openModal(book);
            }
        });

        spine.addEventListener('focus', () => {
            const rect = spine.getBoundingClientRect();
            this.showTooltip(
                { clientX: rect.right, clientY: rect.top + rect.height / 2 },
                book
            );
        });
        spine.addEventListener('blur', () => this.hideTooltip());

        // Add mood icon if primary mood exists
        if (book.moods && book.moods.length > 0) {
            const moodIcon = document.createElement('div');
            moodIcon.className = 'spine-mood-icon';
            moodIcon.style.position = 'absolute';
            moodIcon.style.top = '10px';
            moodIcon.style.width = '100%';
            moodIcon.style.textAlign = 'center';
            moodIcon.style.fontSize = '12px';
            moodIcon.style.opacity = '0.7';
            moodIcon.innerHTML = `< i class="fa-solid ${this.getMoodIcon(book.moods[0])}" ></i > `;
            spine.appendChild(moodIcon);
        }

        // Add reading progress indicator on spine for currently-reading books
        const progress = typeof book.progress === 'number' ? book.progress : 0;
        if (shelfType === 'current') {
            const progressIndicator = document.createElement('div');
            progressIndicator.className = 'spine-progress-indicator';
            progressIndicator.setAttribute('aria-label', `${progress}% read`);
            progressIndicator.setAttribute('title', `${progress}% read`);

            const progressFill = document.createElement('div');
            progressFill.className = 'spine-progress-fill';
            progressFill.style.height = `${progress}% `;

            progressIndicator.appendChild(progressFill);
            spine.appendChild(progressIndicator);
        }

        // Finished badge
        if (shelfType === 'finished') {
            const finishedBadge = document.createElement('div');
            finishedBadge.className = 'spine-finished-badge';
            finishedBadge.innerHTML = '<i class="fa-solid fa-check"></i>';
            finishedBadge.setAttribute('title', 'Finished');
            spine.appendChild(finishedBadge);
        }

        return spine;
    }

    _hashString(str) {
        let hash = 0;
        if (!str) return hash;
        for (let i = 0; i < str.length; i++) {
            const char = str.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash = hash & hash; // Convert to 32bit integer
        }
        return Math.abs(hash);
    }

    _seededRandom(seed) {
        const x = Math.sin(seed) * 10000;
        return x - Math.floor(x);
    }

    generateSpineTraits(book) {
        // Use title + author as seed for deterministic randomness
        const seedStr = (book.title + (book.author || '')).replace(/\s/g, '');
        const seed = this._hashString(seedStr);

        const rand = (offset) => this._seededRandom(seed + offset);

        // 1. Color (if not set or just to ensure coverage)
        let spineColor = book.spineColor;
        let textColor = book.textColor;

        // If no spine color, generate one
        if (!spineColor) {
            const hue = Math.floor(rand(1) * 360);
            const sat = 40 + Math.floor(rand(2) * 40); // 40-80%
            const lig = 25 + Math.floor(rand(3) * 35); // 25-60%
            spineColor = `hsl(${hue}, ${sat} %, ${lig} %)`;
            textColor = lig < 50 ? '#f0f0f0' : '#1a1a1a';
        }

        // 2. Texture
        // 40% leather, 30% cloth, 20% paper, 10% worn
        const rTex = rand(4);
        let texture = 'spine-texture-paper';
        if (rTex < 0.4) texture = 'spine-texture-leather';
        else if (rTex < 0.7) texture = 'spine-texture-cloth';
        else if (rTex < 0.9) texture = 'spine-texture-paper';
        else texture = 'spine-texture-worn';

        // 3. Fonts
        const rFont = rand(5);
        let fontClass = '';
        if (rFont < 0.3) fontClass = 'font-serif';
        else if (rFont < 0.6) fontClass = 'font-sans';
        else if (rFont < 0.8) fontClass = 'font-hand';
        else fontClass = ''; // Default

        // 4. Patterns
        const rPat = rand(6);
        let pattern = '';
        if (rPat < 0.2) pattern = 'spine-pattern-bands';
        else if (rPat < 0.3) pattern = 'spine-pattern-frame';
        else if (rPat < 0.4) pattern = 'spine-pattern-ornament';
        else pattern = '';

        // 5. Title Modifiers
        const rMod = rand(7);
        let titleModifier = '';
        if (book.title.length < 10 && rMod < 0.2) titleModifier = 'title-stacked';
        else if (rMod > 0.9) titleModifier = 'title-rotate-up';

        return {
            seed,
            spineColor,
            textColor,
            texture,
            fontClass,
            pattern,
            titleModifier
        };
    }


    showTooltip(e, book) {
        this.currentBook = book;

        // Clear any pending hide timeout
        if (this.tooltipTimeout) {
            clearTimeout(this.tooltipTimeout);
        }

        // Update tooltip content
        document.getElementById('tooltip-cover').src = book.cover;
        document.getElementById('tooltip-cover').setAttribute('alt', `Cover of ${book.title} `);
        document.getElementById('tooltip-title').textContent = book.title;
        document.getElementById('tooltip-author').textContent = `by ${book.author} `;
        document.getElementById('tooltip-stars').textContent = this.getStarRating(book.rating);
        document.getElementById('tooltip-rating-text').textContent = (book.rating != null ? book.rating.toFixed(1) : 'N/A');
        document.getElementById('tooltip-description').textContent = book.description.substring(0, 150) + '...';

        // Show reading progress in tooltip for books in progress
        const progressEl = document.getElementById('tooltip-progress');
        const progressFill = document.getElementById('tooltip-progress-fill');
        const progressLabel = document.getElementById('tooltip-progress-label');
        const progress = typeof book.progress === 'number' ? book.progress : 0;

        if (book.shelfType === 'current' && progress > 0) {
            progressEl.style.display = 'block';
            progressFill.style.width = `${progress}% `;
            progressLabel.textContent = `${progress}% read`;
        } else if (book.shelfType === 'current') {
            progressEl.style.display = 'block';
            progressFill.style.width = '0%';
            progressLabel.textContent = 'Not started';
        } else if (book.shelfType === 'finished') {
            progressEl.style.display = 'block';
            progressFill.style.width = '100%';
            progressLabel.textContent = 'Finished ✓';
        } else {
            progressEl.style.display = 'none';
        }

        // Position tooltip
        this.moveTooltip(e);

        // Show tooltip with small delay
        setTimeout(() => {
            this.tooltip.classList.add('visible');
            // Announce to screen readers
            this.announceToScreenReader(`Book: ${book.title} by ${book.author}. ${book.rating} stars.${book.description.substring(0, 100)}...`);
        }, 100);
    }

    moveTooltip(e) {
        const tooltip = this.tooltip;
        const padding = 20;

        let x = e.clientX + padding;
        let y = e.clientY - tooltip.offsetHeight / 2;

        // Prevent tooltip from going off-screen right
        if (x + tooltip.offsetWidth > window.innerWidth - padding) {
            x = e.clientX - tooltip.offsetWidth - padding;
        }

        // Prevent tooltip from going off-screen top/bottom
        if (y < padding) {
            y = padding;
        } else if (y + tooltip.offsetHeight > window.innerHeight - padding) {
            y = window.innerHeight - tooltip.offsetHeight - padding;
        }

        tooltip.style.left = `${x} px`;
        tooltip.style.top = `${y} px`;
    }

    hideTooltip() {
        this.tooltipTimeout = setTimeout(() => {
            this.tooltip.classList.remove('visible');
        }, 100);
    }

    getRelatedBooks(book) {
        const lib = this.getLibraryState();
        const all = [...(lib.current || []), ...(lib.want || []), ...(lib.finished || [])];
        const categories = book.categories || (book.volumeInfo && book.volumeInfo.categories) || [];

        return all.filter(b => {
            if (b.id === book.id) return false;

            // Same author
            const authorA = book.author || (book.volumeInfo && book.volumeInfo.authors && book.volumeInfo.authors[0]);
            const authorB = b.author || (b.volumeInfo && b.volumeInfo.authors && b.volumeInfo.authors[0]);
            if (authorA && authorA === authorB) return true;

            // Shared moods
            if (book.moods && b.moods && book.moods.some(m => b.moods.includes(m))) return true;

            // Shared categories
            const catsB = b.categories || (b.volumeInfo && b.volumeInfo.categories) || [];
            if (categories.some(c => catsB.includes(c))) return true;

            return false;
        }).slice(0, 10);
    }

    renderRelatedBooks(book) {
        const container = document.getElementById('related-books-container');
        if (!container) return;

        const related = this.getRelatedBooks(book);
        if (related.length === 0) {
            container.innerHTML = '<p style="font-size: 0.85rem; color: var(--text-muted); font-style: italic; padding: 10px;">No other related books in your library yet.</p>';
            return;
        }

        container.innerHTML = related.map(b => `
            <div class="related-book-item" data-id="${b.id}" title="${b.title} by ${b.author}">
                <img src="${b.cover || (b.volumeInfo && b.volumeInfo.imageLinks && b.volumeInfo.imageLinks.thumbnail) || '../assets/images/biblioDrift_favicon.png'}" alt="${b.title}">
                <div class="related-book-title">${b.title}</div>
            </div>
        `).join('');

        container.querySelectorAll('.related-book-item').forEach(item => {
            item.onclick = (e) => {
                e.preventDefault();
                const bookId = item.dataset.id;
                const lib = this.getLibraryState();
                const all = [...(lib.current || []), ...(lib.want || []), ...(lib.finished || [])];
                const target = all.find(b => b.id === bookId);
                if (target) {
                    this.openModal(target);
                    // Smoothly scroll modal content to top
                    const modalContent = document.querySelector('.book-detail-content');
                    if (modalContent) modalContent.scrollTo({ top: 0, behavior: 'smooth' });
                }
            };
        });
    }

    openModal(book) {
        this.currentBook = book;
        if (typeof window.logReadingActivity === 'function') {
            window.logReadingActivity('view', `Interacted with "${book.title}" in 3D Library`);
        }

        // Hide tooltip
        this.hideTooltip();

        // Populate Related Books
        this.renderRelatedBooks(book);

        // 1. Reset Flip State
        const bookObject = document.getElementById('book-3d-object');
        if (bookObject) bookObject.classList.remove('flipped');

        // 2. Populate Cover
        const coverImg = document.getElementById('modal-cover');
        if (coverImg) {
            coverImg.src = book.cover;
            coverImg.setAttribute('alt', `Cover of ${book.title} by ${book.author} `);
        }

        // 3. Style the 3D Book (Spine & Back)
        const spineColor = book.spineColor || '#5d4037';
        const textColor = book.textColor || '#fff';

        // Update CSS variables for dynamic coloring if we used them, 
        // but since we use direct classes, let's query them.
        const spineFace = document.querySelector('#book-3d-object .face-spine');
        const backFace = document.querySelector('#book-3d-object .face-back');
        const backTexture = document.querySelector('#book-3d-object .back-paper-texture');

        if (spineFace) {
            spineFace.style.backgroundColor = spineColor;
            spineFace.setAttribute('aria-label', `Book spine: ${book.title} `);
            // Add title to spine if element exists
            // (We didn't add a span inside .face-spine in HTML explicitly but let's check if we want to)
        }

        if (backFace) {
            // The outer back face (binding edge)
            backFace.style.borderLeftColor = spineColor;
        }

        if (backTexture) {
            // The back cover background
            backTexture.style.backgroundColor = spineColor;
            backTexture.style.color = textColor;

            // Also update scrollbar color to match text
            // We can't easily update pseudo-elements via JS style, 
            // but we can set a CSS variable on the element
            backTexture.style.setProperty('--scrollbar-thumb', textColor);
        }

        // 4. Populate Content
        const descriptionText = document.getElementById('modal-description');
        if (descriptionText) {
            descriptionText.textContent = book.description;
            descriptionText.style.color = textColor;
            descriptionText.setAttribute('aria-label', `Description: ${book.description} `);
        }

        // Synopsis Title Color
        const synopsisTitle = document.querySelector('.synopsis-title');
        if (synopsisTitle) {
            synopsisTitle.style.color = textColor;
            synopsisTitle.style.borderColor = textColor.replace(')', ', 0.3)').replace('rgb', 'rgba');
        }

        const titleEl = document.getElementById('modal-title');
        const authorEl = document.getElementById('modal-author');
        const starsEl = document.getElementById('modal-stars');
        const scoreEl = document.getElementById('modal-rating-score');
        const countEl = document.getElementById('modal-rating-count');

        if (titleEl) titleEl.textContent = book.title;
        if (authorEl) authorEl.textContent = book.author; // Removed "by" prefix to match design
        // Issue #606 — Populate reading time in modal
const readingTimeStat = document.getElementById('modal-reading-time-stat');
const readingTimeLabel = document.getElementById('modal-reading-time-label');
const pages = book.pageCount || book.page_count;
const progress = typeof book.progress === 'number' ? book.progress : 0;
const { label: totalTimeLabel } = calcReadingTime(pages);
const { label: remainLabel } = calcRemainingTime(pages, progress);

if (readingTimeStat && totalTimeLabel) {
    readingTimeStat.style.display = 'block';
    if (readingTimeLabel) {
        readingTimeLabel.textContent = book.shelfType === 'current' && remainLabel
            ? `${remainLabel} left`
            : totalTimeLabel;
    }
}
        if (starsEl) starsEl.textContent = this.getStarRating(book.rating);
        if (scoreEl) scoreEl.textContent = (book.rating != null ? book.rating.toFixed(1) : 'N/A');
        if (countEl) countEl.textContent = `(${book.ratingCount} ratings)`;

        // 5. Emotion Tagging Section
        let taggingSection = document.getElementById('modal-mood-tagging');
        if (!taggingSection) {
            taggingSection = document.createElement('div');
            taggingSection.id = 'modal-mood-tagging';
            taggingSection.className = 'mood-tagging-section';
            const infoPanel = document.querySelector('.book-info-panel');
            if (infoPanel) {
                // Insert before the action buttons
                const actions = document.querySelector('.book-actions-section');
                infoPanel.insertBefore(taggingSection, actions);
            }
        }

        taggingSection.innerHTML = `
                How does this book make you feel ?
                    <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}">
                        <i class="fa-solid ${this.getMoodIcon(mood)}"></i> ${mood}
                    </span>`;
        }).join('')}
                    </div>
            `;
        // Categories
        const categoriesContainer = document.getElementById('modal-categories');
        if (categoriesContainer && book.categories) {
            categoriesContainer.innerHTML = '';
            book.categories.forEach(cat => {
                const span = document.createElement('span');
                span.className = 'category-tag';
                span.textContent = cat;
                categoriesContainer.appendChild(span);
            });
        }

        // Reviews
        const reviewsContainer = document.getElementById('modal-reviews');
        if (reviewsContainer && book.reviews) {
            reviewsContainer.innerHTML = '';
            book.reviews.forEach(review => {
                const item = document.createElement('div');
                item.className = 'review-item';

                const header = document.createElement('div');
                header.className = 'review-header';

                const nameSpan = document.createElement('span');
                nameSpan.className = 'reviewer-name';
                nameSpan.textContent = review.name;
                header.appendChild(nameSpan);

                const ratingSpan = document.createElement('span');
                ratingSpan.className = 'review-rating';
                ratingSpan.textContent = this.getStarRating(review.rating);
                header.appendChild(ratingSpan);

                item.appendChild(header);

                const textP = document.createElement('p');
                textP.className = 'review-text';
                textP.textContent = `"${review.text}"`;
                item.appendChild(textP);

                reviewsContainer.appendChild(item);
            });
        }

        taggingSection.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.style.background = 'var(--glass-bg)';
                    tag.style.color = 'inherit';
                    tag.classList.remove('active');
                } else {
                    book.moods.push(mood);
                    tag.style.background = 'var(--accent-gold)';
                    tag.style.color = '#000';
                    tag.classList.add('active');
                }

                // Update in LocalStorage
                await this.updateBookMoods(book.id, book.moods);
            };
        });

        // 6. Handle Shelf Selection
        const shelfSelect = document.getElementById('modal-shelf-select');
        // Issue #23: Element binding for the remove button
        const removeBtn = document.getElementById('modal-remove-btn');
        const actionsSection = document.querySelector('.book-actions-section');
        const reviewsSection = document.querySelector('.book-reviews-section');

        // 7. Reading Progress Tracker
        const progressSection = document.getElementById('modal-progress-section');
        const progressSlider = document.getElementById('modal-progress-slider');
        const progressBar = document.getElementById('modal-progress-bar');
        const progressValue = document.getElementById('modal-progress-value');
        const progressBadge = document.getElementById('modal-progress-badge');
        const progressSaveBtn = document.getElementById('modal-progress-save');
        const modePctBtn = document.getElementById('progress-mode-pct');
        const modePagesBtn = document.getElementById('progress-mode-pages');
        const pctGroup = document.getElementById('progress-pct-group');
        const pagesGroup = document.getElementById('progress-pages-group');
        const pagesReadInput = document.getElementById('modal-pages-read');
        const pagesTotalInput = document.getElementById('modal-pages-total');
        const pagesBar = document.getElementById('modal-pages-bar');

        // Find current shelf for this book
        const storageKey = 'bibliodrift_library';
        const localLibrary = JSON.parse(StorageHelper.get(storageKey)) || {};
        let currentShelfForProgress = 'want';
        ['current', 'want', 'finished'].forEach(shelf => {
            const found = (localLibrary[shelf] || []).find(b => b.id === book.id || (b.volumeInfo && b.id === book.id));
            if (found) currentShelfForProgress = shelf;
        });

        // Show progress tracker only for 'current' shelf books
        if (progressSection) {
            if (currentShelfForProgress === 'current') {
                progressSection.style.display = 'block';

                // Load existing progress
                const currentProgress = typeof book.progress === 'number' ? book.progress : 0;
                const totalPages = book.pageCount || book.page_count || 300;

                // Sync slider and bar
                const syncProgressUI = (pct) => {
                    const clamped = Math.max(0, Math.min(100, Math.round(pct)));
                    if (progressSlider) progressSlider.value = clamped;
                    if (progressBar) progressBar.style.width = `${clamped}% `;
                    if (progressValue) progressValue.textContent = `${clamped}% `;
                    if (progressBadge) progressBadge.textContent = `${clamped}% `;
                    // Sync pages input
                    if (pagesReadInput && pagesTotalInput) {
                        const pages = Math.round((clamped / 100) * parseInt(pagesTotalInput.value || totalPages));
                        pagesReadInput.value = pages;
                    }
                    if (pagesBar) pagesBar.style.width = `${clamped}% `;
                };

                syncProgressUI(currentProgress);
                if (pagesTotalInput) pagesTotalInput.value = totalPages;

                // Mode toggle
                const setMode = (mode) => {
                    if (mode === 'percent') {
                        pctGroup.style.display = 'block';
                        pagesGroup.style.display = 'none';
                        modePctBtn.classList.add('active');
                        modePagesBtn.classList.remove('active');
                    } else {
                        pctGroup.style.display = 'none';
                        pagesGroup.style.display = 'block';
                        modePctBtn.classList.remove('active');
                        modePagesBtn.classList.add('active');
                    }
                };

                // Remove old listeners by cloning
                if (modePctBtn) {
                    const newPctBtn = modePctBtn.cloneNode(true);
                    modePctBtn.parentNode.replaceChild(newPctBtn, modePctBtn);
                    newPctBtn.addEventListener('click', () => setMode('percent'));
                    newPctBtn.classList.add('active');
                }
                if (modePagesBtn) {
                    const newPagesBtn = modePagesBtn.cloneNode(true);
                    modePagesBtn.parentNode.replaceChild(newPagesBtn, modePagesBtn);
                    newPagesBtn.addEventListener('click', () => setMode('pages'));
                }

                // Slider input
                if (progressSlider) {
                    const newSlider = progressSlider.cloneNode(true);
                    progressSlider.parentNode.replaceChild(newSlider, progressSlider);
                    newSlider.value = currentProgress;
                    newSlider.addEventListener('input', () => {
                        const pct = parseInt(newSlider.value);
                        if (progressBar) progressBar.style.width = `${pct}% `;
                        if (progressValue) progressValue.textContent = `${pct}% `;
                        if (progressBadge) progressBadge.textContent = `${pct}% `;
                        // Sync pages
                        const total = parseInt(document.getElementById('modal-pages-total')?.value || totalPages);
                        const pages = Math.round((pct / 100) * total);
                        const pagesReadEl = document.getElementById('modal-pages-read');
                        if (pagesReadEl) pagesReadEl.value = pages;
                        if (pagesBar) pagesBar.style.width = `${pct}% `;
                    });
                }

                // Pages inputs
                const syncPagesInputs = () => {
                    const pagesReadEl = document.getElementById('modal-pages-read');
                    const pagesTotalEl = document.getElementById('modal-pages-total');
                    const sliderEl = document.getElementById('modal-progress-slider');
                    if (!pagesReadEl || !pagesTotalEl) return;
                    const read = Math.max(0, parseInt(pagesReadEl.value) || 0);
                    const total = Math.max(1, parseInt(pagesTotalEl.value) || 1);
                    const pct = Math.min(100, Math.round((read / total) * 100));
                    if (sliderEl) sliderEl.value = pct;
                    if (progressBar) progressBar.style.width = `${pct}% `;
                    if (progressValue) progressValue.textContent = `${pct}% `;
                    if (progressBadge) progressBadge.textContent = `${pct}% `;
                    if (pagesBar) pagesBar.style.width = `${pct}% `;
                };

                if (pagesReadInput) {
                    const newPagesRead = pagesReadInput.cloneNode(true);
                    pagesReadInput.parentNode.replaceChild(newPagesRead, pagesReadInput);
                    newPagesRead.addEventListener('input', syncPagesInputs);
                }
                if (pagesTotalInput) {
                    const newPagesTotal = pagesTotalInput.cloneNode(true);
                    pagesTotalInput.parentNode.replaceChild(newPagesTotal, pagesTotalInput);
                    newPagesTotal.value = totalPages;
                    newPagesTotal.addEventListener('input', syncPagesInputs);
                }

                // Save button
                if (progressSaveBtn) {
                    const newSaveBtn = progressSaveBtn.cloneNode(true);
                    progressSaveBtn.parentNode.replaceChild(newSaveBtn, progressSaveBtn);
                    newSaveBtn.addEventListener('click', async () => {
                        const sliderEl = document.getElementById('modal-progress-slider');
                        const newProgress = sliderEl ? parseInt(sliderEl.value) : currentProgress;

                        newSaveBtn.disabled = true;
                        newSaveBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving...';

                        try {
                            // Update via LibraryManager if available (handles backend sync)
                            if (window.libManager && typeof window.libManager.updateBook === 'function') {
                                await window.libManager.updateBook(book.id, { progress: newProgress });
                            } else {
                                // Fallback: update localStorage directly
                                const lib = JSON.parse(StorageHelper.get('bibliodrift_library')) || {};
                                ['current', 'want', 'finished'].forEach(shelf => {
                                    const b = (lib[shelf] || []).find(x => x.id === book.id);
                                    if (b) b.progress = newProgress;
                                });
                                StorageHelper.set('bibliodrift_library', JSON.stringify(lib));
                            }

                            // Update the book object in memory
                            book.progress = newProgress;

                            // Refresh the shelf display
                            this.refreshShelves();

                            newSaveBtn.innerHTML = '<i class="fa-solid fa-check"></i> Saved!';
                            newSaveBtn.style.background = '#4caf50';

                            // If 100%, auto-close modal after brief delay (book moves to finished)
                            if (newProgress === 100) {
                                setTimeout(() => this.closeModal(), 1500);
                            } else {
                                setTimeout(() => {
                                    newSaveBtn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i> Save Progress';
                                    newSaveBtn.style.background = '';
                                    newSaveBtn.disabled = false;
                                }, 2000);
                            }
                        } catch (err) {
                            console.error('Failed to save progress', err);
                            newSaveBtn.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i> Failed';
                            newSaveBtn.style.background = '#e53935';
                            setTimeout(() => {
                                newSaveBtn.innerHTML = '<i class="fa-solid fa-floppy-disk"></i> Save Progress';
                                newSaveBtn.style.background = '';
                                newSaveBtn.disabled = false;
                            }, 2000);
                        }
                    });
                }
            } else {
                progressSection.style.display = 'none';
            }
        }

        // 6. AI Insight Section
        const aiNoteEl = document.getElementById('modal-ai-note');
        if (aiNoteEl) {
            // Reset to skeleton while fetching
            aiNoteEl.innerHTML = `
                < div class="text-skeleton skeleton" ></div >
                    <div class="text-skeleton skeleton" style="width: 90%"></div>
            `;

            // Fetch vibe note using the shared renderer method
            if (window.renderer && typeof window.renderer.fetchAIVibe === 'function') {
                window.renderer.fetchAIVibe(book.title, book.author, book.description || "").then(vibe => {
                    if (vibe) {
                        const cleanVibe = vibe.replace(/^(Bookseller's Note:|Note:|Recommendation:)\s*/i, "");

                        const primaryMood = book.moods?.[0];

                        aiNoteEl.innerHTML = `
                            <div class="bookseller-note-card fade-in-note">

                                <div class="bookseller-note-header">
                                    <span class="bookseller-note-label">
                                        ✨ Bookseller's Note
                                    </span>

                                    ${primaryMood ? `
                                        <span class="immersive-mood-badge">
                                            <i class="fa-solid ${this.getMoodIcon(primaryMood)}"></i>
                                            ${primaryMood}
                                        </span>
                                    ` : ''}
                                </div>

                                <p class="bookseller-note-text">
                                    "${cleanVibe}"
                                </p>

                                <div class="bookseller-context-hint">
                                    Why this book was shown to you
                                </div>

                            </div>
                        `;
                    } else {
                        aiNoteEl.innerHTML = `
                            <div class="bookseller-note-card fade-in-note">
                                <p class="bookseller-note-text">
                                    AI is contemplating the deep themes of this journey...
                                </p>
                            </div>
                        `;
                    }
                });
            } else {
                // Mock vibe for offline/fallback
                setTimeout(() => {
                    aiNoteEl.innerHTML = `
                        <div class="bookseller-note-card fade-in-note">
                            <div class="bookseller-note-label">
                                ✨ Bookseller's Note
                            </div>

                            <p class="bookseller-note-text">
                                "A journey that resonates with the soul, perfect for quiet introspection."
                            </p>
                        </div>
                    `;
                }, 800);
            }
        }

        // Ensure action controls are always visible in the modal.
        if (actionsSection) {
            actionsSection.style.display = 'flex';
            actionsSection.style.visibility = 'visible';
            actionsSection.style.opacity = '1';
        }

        // Keep actions above reviews so Remove is visible without scrolling.
        if (actionsSection && reviewsSection && actionsSection.nextElementSibling !== reviewsSection) {
            reviewsSection.parentNode.insertBefore(actionsSection, reviewsSection);
        }

        // 8. Price Tracker Setup
        const priceTrackerSection = document.getElementById('modal-price-tracker-section');
        if (priceTrackerSection) {
            // Reset state
            priceTrackerSection.style.display = 'none';
            const priceLatest = document.getElementById('modal-price-latest');
            const authPrompt = document.getElementById('modal-price-auth-prompt');
            const priceControls = document.getElementById('modal-price-controls');
            const targetInput = document.getElementById('modal-price-target');
            const setBtn = document.getElementById('modal-price-set-btn');
            const activeAlert = document.getElementById('modal-price-active-alert');
            const activeTarget = document.getElementById('modal-price-active-target');
            const removeBtn = document.getElementById('modal-price-remove-btn');

            priceLatest.textContent = '';
            authPrompt.style.display = 'none';
            priceControls.style.display = 'none';
            activeAlert.style.display = 'none';

            // Only show price tracker for books on the wishlist ("want" shelf)
            const currentShelf = this.findBookShelf(book.id);
            const localBook = window.libManager && typeof window.libManager.findBook === 'function' ? window.libManager.findBook(book.id) : null;
            const shelfItemId = localBook ? localBook.db_id : null;

            if (currentShelf === 'want' && shelfItemId) {
                priceTrackerSection.style.display = 'block';

                const isLoggedIn = window.SafeStorage ? window.SafeStorage.get('isLoggedIn') === 'true' : false;
                if (!isLoggedIn) {
                    authPrompt.style.display = 'block';
                } else {
                    priceControls.style.display = 'block';

                    const fetchPriceData = async () => {
                        try {
                            const headers = window.libManager ? window.libManager.getAuthHeaders() : new Headers();
                            const priceRes = await fetch(`${MOOD_API_BASE} /books/${book.id}/prices`, {
                                headers, credentials: 'include'
                            });
                            if (priceRes.ok) {
                                const data = await priceRes.json();
                                if (data.latest_prices && data.latest_prices.length > 0) {
                                    const latest = data.latest_prices[0];
                                    priceLatest.textContent = `Current: $${latest.price}`;
                                } else {
                                    priceLatest.textContent = 'Price: N/A';
                                }
                            }

                            const alertsRes = await fetch(`${MOOD_API_BASE}/alerts`, {
                                headers, credentials: 'include'
                            });
                            if (alertsRes.ok) {
                                const alertsData = await alertsRes.json();
                                const bookAlert = alertsData.alerts ? alertsData.alerts.find(a => a.shelf_item_id === shelfItemId && a.is_active) : null;
                                if (bookAlert) {
                                    activeAlert.style.display = 'flex';
                                    activeTarget.textContent = `$${bookAlert.target_price}`;
                                    activeAlert.dataset.alertId = bookAlert.id;
                                }
                            }
                        } catch (err) {
                            console.error('Failed to fetch price data', err);
                        }
                    };

                    fetchPriceData();

                    const newSetBtn = setBtn.cloneNode(true);
                    setBtn.parentNode.replaceChild(newSetBtn, setBtn);
                    newSetBtn.addEventListener('click', async () => {
                        const targetPrice = parseFloat(targetInput.value);
                        if (!targetPrice || isNaN(targetPrice)) {
                            alert("Please enter a valid target price.");
                            return;
                        }

                        const headers = window.libManager ? window.libManager.getAuthHeaders() : new Headers();
                        const user = window.libManager ? window.libManager.getUser() : null;
                        if (!user) return;

                        const originalHTML = newSetBtn.innerHTML;
                        newSetBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Setting...';
                        newSetBtn.disabled = true;

                        try {
                            const res = await fetch(`${MOOD_API_BASE}/books/${book.id}/alert`, {
                                method: 'POST',
                                headers,
                                credentials: 'include',
                                body: JSON.stringify({
                                    user_id: user.id,
                                    shelf_item_id: shelfItemId,
                                    target_price: targetPrice
                                })
                            });

                            if (res.ok) {
                                const data = await res.json();
                                targetInput.value = '';
                                activeAlert.style.display = 'flex';
                                activeTarget.textContent = `$${targetPrice}`;
                                activeAlert.dataset.alertId = data.alert.id;
                            } else {
                                const err = await res.json();
                                alert(err.error || "Failed to set alert.");
                            }
                        } catch (error) {
                            console.error("Alert setting failed", error);
                            alert("Network error.");
                        } finally {
                            newSetBtn.innerHTML = originalHTML;
                            newSetBtn.disabled = false;
                        }
                    });

                    const newRemoveBtn = removeBtn.cloneNode(true);
                    removeBtn.parentNode.replaceChild(newRemoveBtn, removeBtn);
                    newRemoveBtn.addEventListener('click', async () => {
                        const alertId = activeAlert.dataset.alertId;
                        if (!alertId) return;

                        const headers = window.libManager ? window.libManager.getAuthHeaders() : new Headers();

                        try {
                            const res = await fetch(`${MOOD_API_BASE}/alerts/${alertId}`, {
                                method: 'DELETE',
                                headers,
                                credentials: 'include'
                            });

                            if (res.ok) {
                                activeAlert.style.display = 'none';
                                activeAlert.dataset.alertId = '';
                            } else {
                                alert("Failed to remove alert.");
                            }
                        } catch (error) {
                            console.error("Alert removal failed", error);
                            alert("Network error.");
                        }
                    });
                }
            }
        }


        if (shelfSelect) {
            shelfSelect.setAttribute('aria-label', 'Move book to shelf');
            let currentShelf = this.findBookShelf(book.id) || 'current';

            shelfSelect.value = currentShelf;

            // Remove old listeners to avoid duplicates by cloning
            const newSelect = shelfSelect.cloneNode(true);
            shelfSelect.parentNode.replaceChild(newSelect, shelfSelect);

            newSelect.addEventListener('change', async (e) => {
                const newShelf = e.target.value;
                await this.moveBook(book.id, currentShelf, newShelf);
                currentShelf = newShelf; // Update local tracker

                // Show/hide progress tracker based on new shelf
                const progressSectionEl = document.getElementById('modal-progress-section');
                if (progressSectionEl) {
                    progressSectionEl.style.display = newShelf === 'current' ? 'block' : 'none';
                }
            });
        }

        if (removeBtn) {
            removeBtn.setAttribute('aria-label', 'Remove book from library');
            // Remove old listeners
            const newRemoveBtn = removeBtn.cloneNode(true);
            removeBtn.parentNode.replaceChild(newRemoveBtn, removeBtn);
            newRemoveBtn.innerHTML = '<i class="fa-solid fa-trash"></i> Remove from Library';

            newRemoveBtn.addEventListener('click', async () => {
                if (confirm('Are you sure you want to remove this book from your library?')) {
                    await this.removeBook(book.id);
                    this.closeModal();
                }
            });
        }

        const shareBtn = document.getElementById('modal-share-btn-lib');
        if (shareBtn) {
            shareBtn.setAttribute('aria-label', 'Share book information');
            const newShareBtn = shareBtn.cloneNode(true);
            shareBtn.parentNode.replaceChild(newShareBtn, shareBtn);

            newShareBtn.addEventListener('click', () => {
                const title = book.title || 'Unknown Title';
                const author = book.author || 'Unknown Author';
                const shareText = `Check out this book: ${title} by ${author}`;
                navigator.clipboard.writeText(shareText).then(() => {
                    // Temporarily change button text to show success
                    const originalHTML = newShareBtn.innerHTML;
                    newShareBtn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
                    this.announceToScreenReader('Book information copied to clipboard');
                    setTimeout(() => {
                        newShareBtn.innerHTML = originalHTML;
                    }, 2000);
                }).catch(err => {
                    console.error('Failed to copy text: ', err);
                    this.announceToScreenReader('Failed to copy book information');
                });
            });
        }

        // Preview Button — opens the Google Books Embedded Viewer
        const previewBtnLib = document.getElementById('modal-preview-btn-lib');
        if (previewBtnLib) {
            const newPreviewBtn = previewBtnLib.cloneNode(true);
            previewBtnLib.parentNode.replaceChild(newPreviewBtn, previewBtnLib);

            newPreviewBtn.addEventListener('click', () => {
                if (window.BookPreview && book.id) {
                    const author = book.author || 'Unknown Author';
                    const rating = book.rating || 0;
                    const genre = book.genre || 'Fiction';
                    window.BookPreview.open(book.id, book.title || 'Book Preview', author, rating, genre);
                }
            });
        }

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

            const title = encodeURIComponent(book.title || '');
            const author = encodeURIComponent(book.author || '');
            const isbn = encodeURIComponent(book.isbn || '');

            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>';
                });
            // Custom Collections Section
            let collectionsSection = document.getElementById('modal-collections-tagging');
            if (!collectionsSection) {
                collectionsSection = document.createElement('div');
                collectionsSection.id = 'modal-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);';
                const infoPanel = document.querySelector('.book-info-panel');
                if (infoPanel) {
                    const actions = document.querySelector('.book-actions-section');
                    infoPanel.insertBefore(collectionsSection, actions);
                }
            }

            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-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-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.authors || book.author) ? (book.authors || book.author).join(', ') : (book.authors || book.author || 'Unknown Author');
                                        const res = await window.CollectionAPI.addBookToCollection(
                                            col.id,
                                            userObj.id,
                                            book.id,
                                            book.title,
                                            authorStr,
                                            book.cover || book.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-collections-list');
                        if (listEl) {
                            listEl.innerHTML = `<span style="font-size: 0.8rem; color: #e53935;">Failed to load collections.</span>`;
                        }
                    }
                })();
            }
        }

        // Show modal and manage focus
        if (this.modal) {
            this.modal.classList.add('active');
            document.body.style.overflow = 'hidden';

            // Hide fixed elements (ambient leaf, scroll-to-top) to avoid overlapping description
            const fixedControls = document.querySelectorAll('.ambient-sanctuary, .back-to-top');
            fixedControls.forEach(el => el.style.opacity = '0');
            fixedControls.forEach(el => el.style.pointerEvents = 'none');

            // Setup interactive handlers (flip, close) for the current book
            this.setupModalHandlers();
        }
    }

    closeModal() {
        if (this.modal) {
            this.modal.classList.remove('active');
            document.body.style.overflow = '';

            // Reset flip after transition
            setTimeout(() => {
                const bookObject = document.getElementById('book-3d-object');
                if (bookObject) bookObject.classList.remove('flipped');

                // Restore fixed elements
                const fixedControls = document.querySelectorAll('.ambient-sanctuary, .back-to-top');
                fixedControls.forEach(el => el.style.opacity = '1');
                fixedControls.forEach(el => el.style.pointerEvents = 'auto');
            }, 500);
        }
    }

    setupModalHandlers() {
        // Book flip interaction
        const bookObject = document.getElementById('book-3d-object');
        if (bookObject) {
            // Remove old listener to avoid multi-flips
            const newBook = bookObject.cloneNode(true);
            bookObject.parentNode.replaceChild(newBook, bookObject);

            newBook.addEventListener('click', (e) => {
                // If user is selecting text (e.g. description), don't flip
                if (window.getSelection().toString().length > 0) {
                    return;
                }
                newBook.classList.toggle('flipped');
            });
        }

        // Close button
        const closeBtn = document.getElementById('modal-close-btn');
        if (closeBtn) {
            closeBtn.setAttribute('aria-label', 'Close book details');
            // Remove lingering clones to prevent multiple listeners if re-initialized
            const newCloseBtn = closeBtn.cloneNode(true);
            closeBtn.parentNode.replaceChild(newCloseBtn, closeBtn);

            newCloseBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                this.closeModal();
            });

            // Keyboard support
            newCloseBtn.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    this.closeModal();
                }
            });
        }

        // Click outside to close (bind once to avoid listener leaks).
        if (this.modal && !this._modalBackdropHandler) {
            this._modalBackdropHandler = (e) => {
                if (e.target === this.modal) {
                    this.closeModal();
                }
            };
            this.addManagedListener(this.modal, 'click', this._modalBackdropHandler);
        }

        // Add to library button logic
        const addBtn = document.getElementById('modal-add-btn');
        if (addBtn) {
            addBtn.setAttribute('aria-label', 'Add book to library');
            const newAddBtn = addBtn.cloneNode(true);
            addBtn.parentNode.replaceChild(newAddBtn, addBtn);

            newAddBtn.addEventListener('click', async () => {
                newAddBtn.innerHTML = '<i class="fa-solid fa-check"></i> Added!';
                newAddBtn.style.background = '#4CAF50';
                newAddBtn.style.color = '#fff';
                newAddBtn.setAttribute('aria-label', 'Book added to library');

                // Store in localStorage (integrate with existing library system)
                if (this.currentBook) {
                    await this.addToLibrary(this.currentBook);
                }

                setTimeout(() => {
                    newAddBtn.innerHTML = '<i class="fa-regular fa-heart"></i> Add to Library';
                    newAddBtn.style.background = '';
                    newAddBtn.style.color = '';
                    newAddBtn.setAttribute('aria-label', 'Add book to library');
                }, 2000);
            });
        }

        // Mark as read button logic
        const readBtn = document.getElementById('modal-read-btn');
        if (readBtn) {
            readBtn.setAttribute('aria-label', 'Mark this book as read');
            const newReadBtn = readBtn.cloneNode(true);
            readBtn.parentNode.replaceChild(newReadBtn, readBtn);

            newReadBtn.addEventListener('click', () => {
                newReadBtn.innerHTML = '<i class="fa-solid fa-check-double"></i> Marked!';
                newReadBtn.style.background = 'var(--wood-light)';
                newReadBtn.style.color = 'white';
                newReadBtn.setAttribute('aria-label', 'Book marked as read');

                if (this.currentBook) {
                    this.announceToScreenReader(`${this.currentBook.title} marked as read`);
                }

                setTimeout(() => {
                    newReadBtn.innerHTML = '<i class="fa-solid fa-check"></i> Mark as Read';
                    newReadBtn.style.background = '';
                    newReadBtn.style.color = '';
                    newReadBtn.setAttribute('aria-label', 'Mark this book as read');
                }, 2000);
            });
        }
    }

    async addToLibrary(book) {
        if (window.libManager && typeof window.libManager.addBook === 'function') {
            const normalizedBook = {
                id: book.id,
                volumeInfo: {
                    title: book.title,
                    authors: [book.author],
                    imageLinks: { thumbnail: book.cover },
                    description: book.description,
                    categories: book.categories
                }
            };

            await window.libManager.addBook(normalizedBook, 'want');
            this.refreshShelves();
            return;
        }

        // Get existing library from localStorage
        const storageKey = 'bibliodrift_library';
        let library = JSON.parse(StorageHelper.get(storageKey)) || {
            current: [],
            want: [],
            finished: []
        };

        // Check if book already exists
        const exists = Object.values(library).flat().some(b => b.id === book.id);
        if (exists) {
            console.log('Book already in library');
            return;
        }

        // Add to 'want' shelf by default
        library.want.push({
            id: book.id,
            volumeInfo: {
                title: book.title,
                authors: [book.author],
                imageLinks: { thumbnail: book.cover },
                description: book.description,
                categories: book.categories
            }
        });

        StorageHelper.set(storageKey, JSON.stringify(library));
        console.log(`Added ${book.title} to library`);
    }

    async moveBook(bookId, fromShelf, toShelf) {
        if (fromShelf === toShelf) return;

        if (window.libManager && typeof window.libManager.moveBook === 'function') {
            const moved = await window.libManager.moveBook(bookId, toShelf);
            if (!moved) {
                console.error("Book not found in source shelf");
                return;
            }
            this.refreshShelves();
            return;
        }

        const storageKey = 'bibliodrift_library';
        const localLibrary = JSON.parse(StorageHelper.get(storageKey)) || {};

        // Find existing lists
        if (!localLibrary[fromShelf]) localLibrary[fromShelf] = [];
        if (!localLibrary[toShelf]) localLibrary[toShelf] = [];

        // Find the book index
        const bookIndex = localLibrary[fromShelf].findIndex(b => b.id === bookId || (b.volumeInfo && b.id === bookId));

        if (bookIndex === -1) {
            console.error("Book not found in source shelf");
            return;
        }

        const book = localLibrary[fromShelf][bookIndex];

        // Remove from old shelf
        localLibrary[fromShelf].splice(bookIndex, 1);

        // Add to new shelf
        localLibrary[toShelf].push(book);

        // Save and refresh
        StorageHelper.set(storageKey, JSON.stringify(localLibrary));
        this.refreshShelves();

        // Visual Feedback (optional)
        console.log(`Moved book ${bookId} from ${fromShelf} to ${toShelf}`);
    }

    async removeBook(bookId) {
        if (window.libManager && typeof window.libManager.removeBook === 'function') {
            await window.libManager.removeBook(bookId);
            this.refreshShelves();
            return;
        }

        const storageKey = 'bibliodrift_library';
        const localLibrary = JSON.parse(StorageHelper.get(storageKey)) || {};

        let removed = false;
        ['current', 'want', 'finished'].forEach(shelf => {
            const index = (localLibrary[shelf] || []).findIndex(b => b.id === bookId || (b.volumeInfo && b.id === bookId));
            if (index !== -1) {
                localLibrary[shelf].splice(index, 1);
                removed = true;
            }
        });

        if (removed) {
            StorageHelper.set(storageKey, JSON.stringify(localLibrary));
            this.refreshShelves();
            this.announceToScreenReader(`Book removed from library`);
            console.log(`Removed book ${bookId}`);
        }
    }

    getMoodIcon(mood) {
        const icons = {
            'Melancholic': 'fa-cloud-showers-heavy',
            'Cozy': 'fa-mug-hot',
            'Tense': 'fa-bolt',
            'Inspiring': 'fa-lightbulb',
            'Whimsical': 'fa-wand-magic-sparkles',
            'Dark': 'fa-moon',
            'Adventurous': 'fa-compass'
        };
        return icons[mood] || 'fa-tag';
    }

    async updateBookMoods(bookId, moods) {
        if (window.libManager && window.libManager.updateBook) {
            await window.libManager.updateBook(bookId, { moods });
            this.refreshShelves();
            return;
        }

        const storageKey = 'bibliodrift_library';
        const localLibrary = this.getLibraryState();

        let found = false;
        ['current', 'want', 'finished'].forEach(shelf => {
            const book = localLibrary[shelf].find(b => b.id === bookId);
            if (book) {
                book.moods = moods;
                found = true;
            }
        });

        if (found) {
            StorageHelper.set(storageKey, JSON.stringify(localLibrary));
            this.refreshShelves();
        }
    }

    getStarRating(rating) {
        const fullStars = Math.floor(rating || 0);
        const hasHalf = (rating || 0) % 1 >= 0.5;
        const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);

        return '★'.repeat(Math.max(0, fullStars)) + (hasHalf ? '½' : '') + '☆'.repeat(Math.max(0, emptyStars));
    }
    // =========================================================
    // VIBE CONSTELLATION (D3 FORCE GRAPH)
    // =========================================================

    // renderConstellation() {
    //     if (!this.assetsLoaded) return;

    //     const container = document.getElementById('constellation-container');
    //     if (!container) return;

    //     // Stop previous simulation if exists
    //     if (this.constellationSimulation) {
    //         this.constellationSimulation.stop();
    //     }

    //     container.innerHTML = ''; // Clear SVG

    //     // Gather all books
    //     const storageKey = 'bibliodrift_library';
    //     const localLibrary = JSON.parse(StorageHelper.get(storageKey)) || {
    //         current: [],
    //         want: [],
    //         finished: []
    //     };

    //     let allBooks = [
    //         ...(localLibrary.current || []),
    //         ...(localLibrary.want || []),
    //         ...(localLibrary.finished || [])
    //     ];

    //     // Normalize book structure
    //     allBooks = allBooks.map(b => {
    //         if (b.volumeInfo) {
    //             return {
    //                 id: b.id,
    //                 title: b.volumeInfo.title || 'Untitled',
    //                 author: (b.volumeInfo.authors && b.volumeInfo.authors[0]) || 'Unknown',
    //                 cover: b.volumeInfo.imageLinks?.thumbnail || '',
    //                 description: b.volumeInfo.description || '',
    //                 rating: b.volumeInfo.averageRating || null,
    //                 moods: b.moods || [],
    //                 spineColor: b.spineColor
    //             };
    //         }
    //         return { ...b, moods: b.moods || [] };
    //     });

    //     // Apply Search Filter
    //     if (this.searchQuery) {
    //         allBooks = allBooks.filter(b => {
    //             const title = b.title.toLowerCase();
    //             const author = b.author.toLowerCase();
    //             const moods = b.moods.join(" ").toLowerCase();
    //             return title.includes(this.searchQuery) || author.includes(this.searchQuery) || moods.includes(this.searchQuery);
    //         });
    //     }

    //     // Empty state check
    //     const emptyState = document.getElementById('library-empty-state');
    //     if (allBooks.length === 0) {
    //         if (emptyState) emptyState.hidden = false;
    //         return;
    //     } else {
    //         if (emptyState) emptyState.hidden = true;
    //     }

    //     // Setup dimensions
    //     const width = container.clientWidth || 1000;
    //     const height = 600;

    //     // Colors for moods
    //     const moodColors = {
    //         'cozy': '#8d6e63',
    //         'dark': '#424242',
    //         'mysterious': '#5e35b1',
    //         'romantic': '#e91e63',
    //         'adventurous': '#ff5722',
    //         'melancholy': '#607d8b',
    //         'uplifting': '#4caf50',
    //         'default': '#d4af37' // accent-gold
    //     };

    //     const nodes = allBooks.map(b => {
    //         const primaryMood = (b.moods && b.moods[0]) ? b.moods[0].toLowerCase() : 'default';
    //         return {
    //             ...b,
    //             radius: 35, // Size of cover
    //             color: moodColors[primaryMood] || moodColors['default'],
    //             primaryMood: primaryMood
    //         };
    //     });

    //     // Create links between books that share the same primary mood
    //     const links = [];
    //     for (let i = 0; i < nodes.length; i++) {
    //         for (let j = i + 1; j < nodes.length; j++) {
    //             if (nodes[i].primaryMood !== 'default' && nodes[i].primaryMood === nodes[j].primaryMood) {
    //                 links.push({
    //                     source: nodes[i].id,
    //                     target: nodes[j].id,
    //                     value: 1
    //                 });
    //             }
    //         }
    //     }

    //     const svg = d3.select("#constellation-container").append("svg")
    //         .attr("width", "100%")
    //         .attr("height", height)
    //         .style("background", "linear-gradient(to bottom, #111, #1a1a1a)")
    //         .style("border-radius", "8px")
    //         .style("box-shadow", "inset 0 0 50px rgba(0,0,0,0.5)");

    //     // Add defs for cover images and glow filters
    //     const defs = svg.append("defs");

    //     // Glow filter
    //     const filter = defs.append("filter").attr("id", "glow");
    //     filter.append("feGaussianBlur").attr("stdDeviation", "3.5").attr("result", "coloredBlur");
    //     const feMerge = filter.append("feMerge");
    //     feMerge.append("feMergeNode").attr("in", "coloredBlur");
    //     feMerge.append("feMergeNode").attr("in", "SourceGraphic");

    //     // Patterns for covers
    //     nodes.forEach(node => {
    //         defs.append("pattern")
    //             .attr("id", "cover-" + node.id)
    //             .attr("patternUnits", "userSpaceOnUse")
    //             .attr("width", node.radius * 2)
    //             .attr("height", node.radius * 2)
    //             .append("image")
    //             .attr("href", node.cover || '../assets/images/biblioDrift_favicon.png')
    //             .attr("width", node.radius * 2)
    //             .attr("height", node.radius * 2)
    //             .attr("preserveAspectRatio", "xMidYMid slice");
    //     });

    //     // Initialize forces
    //     this.constellationSimulation = d3.forceSimulation(nodes)
    //         .force("link", d3.forceLink(links).id(d => d.id).distance(120).strength(0.3))
    //         .force("charge", d3.forceManyBody().strength(-300))
    //         .force("center", d3.forceCenter(width / 2, height / 2))
    //         .force("collide", d3.forceCollide().radius(d => d.radius + 10).iterations(2));

    //     // Draw links
    //     const link = svg.append("g")
    //         .attr("stroke", "rgba(255, 255, 255, 0.15)")
    //         .attr("stroke-width", 1.5)
    //         .selectAll("line")
    //         .data(links)
    //         .join("line");

    //     // Draw nodes
    //     const node = svg.append("g")
    //         .selectAll("circle")
    //         .data(nodes)
    //         .join("circle")
    //         .attr("r", d => d.radius)
    //         .attr("fill", d => `url(#cover-${d.id})`)
    //         .attr("stroke", d => d.color)
    //         .attr("stroke-width", 3)
    //         .style("filter", "url(#glow)")
    //         .style("cursor", "pointer")
    //         .call(d3.drag()
    //             .on("start", dragstarted)
    //             .on("drag", dragged)
    //             .on("end", dragended));

    //     // Interaction
    //     node.on("mouseover", (event, d) => {
    //         d3.select(event.currentTarget)
    //             .transition().duration(200)
    //             .attr("r", d.radius * 1.2)
    //             .attr("stroke-width", 4);
    //         this.showTooltip(event, d);
    //     })
    //         .on("mousemove", (event) => {
    //             this.moveTooltip(event);
    //         })
    //         .on("mouseout", (event, d) => {
    //             d3.select(event.currentTarget)
    //                 .transition().duration(200)
    //                 .attr("r", d.radius)
    //                 .attr("stroke-width", 3);
    //             this.hideTooltip();
    //         })
    //         .on("click", (event, d) => {
    //             this.openModal(d);
    //         });

    //     this.constellationSimulation.on("tick", () => {
    //         // Keep within bounds
    //         nodes.forEach(d => {
    //             d.x = Math.max(d.radius, Math.min(width - d.radius, d.x));
    //             d.y = Math.max(d.radius, Math.min(height - d.radius, d.y));
    //         });

    //         link
    //             .attr("x1", d => d.source.x)
    //             .attr("y1", d => d.source.y)
    //             .attr("x2", d => d.target.x)
    //             .attr("y2", d => d.target.y);

    //         node
    //             .attr("cx", d => d.x)
    //             .attr("cy", d => d.y);
    //     });

    //     // Drag functions
    //     const self = this;
    //     function dragstarted(event) {
    //         if (!event.active) self.constellationSimulation.alphaTarget(0.3).restart();
    //         event.subject.fx = event.subject.x;
    //         event.subject.fy = event.subject.y;
    //     }

    //     function dragged(event) {
    //         event.subject.fx = event.x;
    //         event.subject.fy = event.y;
    //         self.moveTooltip(event); // keep tooltip with it
    //     }

    //     function dragended(event) {
    //         if (!event.active) self.constellationSimulation.alphaTarget(0);
    //         event.subject.fx = null;
    //         event.subject.fy = null;
    //     }
    // }

    async loadAndRenderCollections() {
        const gridContainer = document.getElementById('collections-grid');
        if (!gridContainer) return;

        const user = typeof parseStoredUser === 'function' ? parseStoredUser() : null;
        if (!user) {
            gridContainer.innerHTML = `
                <div class="empty-state" style="grid-column: 1/-1; text-align: center; padding: 4rem 1rem;">
                    <i class="fa-solid fa-user-lock" style="font-size: 3rem; color: var(--text-muted); margin-bottom: 1rem;"></i>
                    <p style="font-size: 1.2rem; color: var(--text-main); margin-bottom: 1.5rem;">Join us to organize your books in custom collections.</p>
                    <a href="auth.html" class="btn-primary" style="text-decoration: none; padding: 0.6rem 1.5rem; border-radius: 20px; display: inline-flex; align-items: center; gap: 8px;">
                        <i class="fa-solid fa-key"></i> Sign In to Account
                    </a>
                </div>
            `;
            const detailView = document.getElementById('collection-detail-view');
            const gridView = document.getElementById('collections-grid-view');
            if (detailView) detailView.classList.add('hidden');
            if (gridView) gridView.classList.remove('hidden');
            return;
        }

        gridContainer.innerHTML = `
            <div style="grid-column: 1/-1; text-align: center; padding: 3rem;">
                <i class="fa-solid fa-spinner fa-spin" style="font-size: 2rem; color: var(--accent-gold);"></i>
                <p style="margin-top: 1rem; color: var(--text-muted);">Unfolding your collections...</p>
            </div>
        `;

        try {
            const collections = await window.CollectionAPI.getCollections(user.id);
            this.collections = collections;
            this.renderCollectionsGrid();
        } catch (err) {
            console.error('Failed to load collections', err);
            gridContainer.innerHTML = `
                <div class="empty-state" style="grid-column: 1/-1; text-align: center; padding: 3rem;">
                    <i class="fa-solid fa-triangle-exclamation" style="font-size: 2.5rem; color: #e53935; margin-bottom: 1rem;"></i>
                    <p style="color: var(--text-main);">Failed to retrieve custom collections.</p>
                    <button class="btn-secondary" onclick="window.bookshelfRenderer.loadAndRenderCollections()" style="margin-top: 1rem; border-radius: 20px;">
                        <i class="fa-solid fa-rotate-right"></i> Try Again
                    </button>
                </div>
            `;
        }
    }

    renderCollectionsGrid() {
        const gridContainer = document.getElementById('collections-grid');
        if (!gridContainer) return;

        gridContainer.innerHTML = '';

        // Dash-bordered "Create New" card
        const createCard = document.createElement('div');
        createCard.className = 'collection-folder-card';
        createCard.style.cssText = 'border: 2px dashed var(--glass-border); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; cursor: pointer; border-radius: 16px; padding: 1.5rem; transition: all 0.3s ease; text-align: center; background: none; box-sizing: border-box;';
        createCard.innerHTML = `
            <i class="fa-solid fa-folder-plus" style="font-size: 2.5rem; color: var(--text-muted); margin-bottom: 1rem; transition: transform 0.3s ease;"></i>
            <span style="font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--text-main); font-weight: bold;">New Collection</span>
            <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; margin-bottom: 0;">Organize a new theme shelf</p>
        `;
        createCard.onmouseover = () => {
            createCard.style.borderColor = 'var(--accent-gold)';
            createCard.style.background = 'var(--glass-bg)';
            createCard.querySelector('i').style.transform = 'scale(1.1)';
        };
        createCard.onmouseout = () => {
            createCard.style.borderColor = 'var(--glass-border)';
            createCard.style.background = 'none';
            createCard.querySelector('i').style.transform = 'scale(1)';
        };
        createCard.onclick = () => this.openCollectionModal();
        gridContainer.appendChild(createCard);

        if (this.collections.length === 0) {
            return;
        }

        this.collections.forEach(col => {
            const card = document.createElement('div');
            card.className = 'collection-folder-card';
            card.style.cssText = 'background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 16px; padding: 1.5rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; justify-content: space-between; min-height: 180px; box-sizing: border-box; position: relative; overflow: hidden;';

            const badgeBg = col.is_public ? 'var(--accent-gold)' : 'var(--text-muted)';
            const badgeColor = col.is_public ? '#000' : '#fff';

            card.innerHTML = `
                <div>
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem;">
                        <i class="fa-solid fa-folder" class="collection-icon-large" style="font-size: 2.5rem; color: var(--accent-gold); transition: transform 0.3s ease;"></i>
                        <span style="background: ${badgeBg}; color: ${badgeColor}; padding: 1px 6px; border-radius: 6px; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;">${col.is_public ? 'Public' : 'Private'}</span>
                    </div>
                    <h3 style="font-family: 'Playfair Display', serif; font-size: 1.3rem; margin: 0 0 0.5rem 0; color: var(--text-main); font-weight: bold;">${col.name}</h3>
                    <p style="color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">${col.description || 'No description provided.'}</p>
                </div>
                <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.05);">
                    <span style="font-size: 0.8rem; color: var(--text-muted); font-weight: 500;"><i class="fa-solid fa-book" style="margin-right: 4px;"></i> ${col.item_count} book${col.item_count !== 1 ? 's' : ''}</span>
                    <span style="font-size: 0.8rem; color: var(--accent-gold); font-weight: bold; display: flex; align-items: center; gap: 4px;">Open <i class="fa-solid fa-chevron-right" style="font-size: 0.7rem;"></i></span>
                </div>
            `;

            card.onmouseover = () => {
                card.style.transform = 'translateY(-5px) scale(1.02)';
                card.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.3)';
                card.style.borderColor = 'var(--accent-gold)';
                card.querySelector('.fa-folder').style.transform = 'rotate(-10deg) scale(1.1)';
            };
            card.onmouseout = () => {
                card.style.transform = 'none';
                card.style.boxShadow = 'none';
                card.style.borderColor = 'var(--glass-border)';
                card.querySelector('.fa-folder').style.transform = 'none';
            };

            card.onclick = () => this.openCollectionDetail(col.id);

            gridContainer.appendChild(card);
        });
    }

    async openCollectionDetail(collectionId) {
        const detailView = document.getElementById('collection-detail-view');
        const gridView = document.getElementById('collections-grid-view');
        const booksRow = document.getElementById('collection-books-row-3d');

        if (!detailView || !gridView || !booksRow) return;

        gridView.classList.add('hidden');
        detailView.classList.remove('hidden');

        booksRow.innerHTML = `
            <div style="text-align: center; width: 100%; padding: 4rem;">
                <i class="fa-solid fa-spinner fa-spin" style="font-size: 2rem; color: var(--accent-gold);"></i>
                <p style="margin-top: 1rem; color: var(--text-muted);">Browsing collection items...</p>
            </div>
        `;

        try {
            const collection = await window.CollectionAPI.getCollection(collectionId);
            this.selectedCollection = collection;

            // Populate header
            document.getElementById('selected-collection-name').textContent = collection.name;
            document.getElementById('selected-collection-desc').textContent = collection.description || 'No description provided.';

            const statusBadge = document.getElementById('selected-collection-status');
            if (statusBadge) {
                statusBadge.textContent = collection.is_public ? 'Public' : 'Private';
                statusBadge.style.background = collection.is_public ? 'var(--accent-gold)' : 'var(--text-muted)';
                statusBadge.style.color = collection.is_public ? '#000' : '#fff';
            }

            // Bind actions
            document.getElementById('back-to-collections-btn').onclick = () => this.closeCollectionDetail();
            document.getElementById('edit-collection-btn').onclick = () => this.openCollectionModal(collection);
            document.getElementById('delete-collection-btn').onclick = () => this.deleteCollection(collection.id);

            // Render books as 3D book spines
            booksRow.innerHTML = '';
            const items = collection.items || [];
            if (items.length === 0) {
                booksRow.innerHTML = `
                    <div style="text-align: center; width: 100%; padding: 5rem 1rem; color: var(--text-muted);">
                        <i class="fa-solid fa-book-open" style="font-size: 3rem; margin-bottom: 1rem; opacity: 0.5;"></i>
                        <p style="font-size: 1.1rem; margin: 0;">This collection is completely empty.</p>
                        <p style="font-size: 0.85rem; opacity: 0.8; margin-top: 0.5rem;">Explore books and add them to this collection!</p>
                    </div>
                `;
                return;
            }

            items.forEach((item, index) => {
                // Map CollectionItem schema back to 3D Spine-friendly schema
                const bookData = {
                    id: item.google_books_id,
                    title: item.title,
                    author: item.authors || 'Unknown Author',
                    cover: item.thumbnail || '',
                    description: 'Added on ' + new Date(item.added_at).toLocaleDateString(),
                    rating: 4.5,
                    ratingCount: 1,
                    categories: ['Collection Book'],
                    spineColor: '#3e2723',
                    textColor: '#fff',
                    progress: 0,
                    shelfType: 'collection',
                    reviews: []
                };

                const spine = this.createBookSpine(bookData, index, 'collection');

                // Add a hover option or delete handler specifically for collections
                const deleteIcon = document.createElement('div');
                deleteIcon.className = 'spine-finished-badge';
                deleteIcon.style.cssText = 'background: #e53935; color: white; top: auto; bottom: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;';
                deleteIcon.innerHTML = '<i class="fa-solid fa-trash-can" style="color: white; font-size: 0.8rem;"></i>';
                deleteIcon.title = 'Remove from Collection';
                deleteIcon.onclick = async (e) => {
                    e.stopPropagation(); // Prevent opening modal
                    if (confirm(`Remove "${bookData.title}" from this collection?`)) {
                        try {
                            await window.CollectionAPI.removeBookFromCollection(collectionId, item.book_id);
                            showToast(`Removed "${bookData.title}" successfully`, 'success');
                            this.openCollectionDetail(collectionId); // Reload
                        } catch (err) {
                            showToast(err.message, 'error');
                        }
                    }
                };
                spine.appendChild(deleteIcon);

                booksRow.appendChild(spine);
            });

        } catch (err) {
            console.error('Failed to load collection details', err);
            booksRow.innerHTML = `
                <div style="text-align: center; width: 100%; padding: 4rem;">
                    <i class="fa-solid fa-triangle-exclamation" style="font-size: 2.5rem; color: #e53935;"></i>
                    <p style="margin-top: 1rem; color: var(--text-main);">Failed to load collection books.</p>
                </div>
            `;
        }
    }

    closeCollectionDetail() {
        const detailView = document.getElementById('collection-detail-view');
        const gridView = document.getElementById('collections-grid-view');
        if (detailView && gridView) {
            detailView.classList.add('hidden');
            gridView.classList.remove('hidden');
            this.loadAndRenderCollections(); // Refresh counts
        }
    }

    openCollectionModal(collection = null) {
        const modal = document.getElementById('collection-modal');
        const titleEl = document.getElementById('collection-modal-title');
        const form = document.getElementById('collection-form');
        const nameInput = document.getElementById('collection-name-input');
        const descInput = document.getElementById('collection-desc-input');
        const publicInput = document.getElementById('collection-public-input');

        if (!modal || !form || !nameInput) return;

        if (collection) {
            titleEl.textContent = 'Edit Collection';
            nameInput.value = collection.name;
            descInput.value = collection.description || '';
            publicInput.checked = collection.is_public;
            form.dataset.collectionId = collection.id;
        } else {
            titleEl.textContent = 'Create Collection';
            nameInput.value = '';
            descInput.value = '';
            publicInput.checked = false;
            delete form.dataset.collectionId;
        }

        modal.showModal();

        // Close handlers
        document.getElementById('closeCollectionModalBtn').onclick = () => modal.close();

        // Save handler
        form.onsubmit = async (e) => {
            e.preventDefault();
            const user = parseStoredUser();
            if (!user) {
                showToast('Please sign in to perform this action', 'error');
                modal.close();
                return;
            }

            const name = nameInput.value.trim();
            const desc = descInput.value.trim();
            const isPublic = publicInput.checked;
            const collectionId = form.dataset.collectionId;

            const submitBtn = document.getElementById('collection-submit-btn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Saving...';

            try {
                if (collectionId) {
                    await window.CollectionAPI.updateCollection(collectionId, name, desc, isPublic);
                    showToast('Collection updated successfully', 'success');
                } else {
                    await window.CollectionAPI.createCollection(user.id, name, desc, isPublic);
                    showToast('Collection created successfully', 'success');
                }
                modal.close();
                if (collectionId) {
                    this.openCollectionDetail(collectionId);
                } else {
                    this.loadAndRenderCollections();
                }
            } catch (err) {
                showToast(err.message, 'error');
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = 'Save Collection';
            }
        };
    }

    async deleteCollection(collectionId) {
        if (confirm('Are you sure you want to delete this collection? This action cannot be undone.')) {
            try {
                await window.CollectionAPI.deleteCollection(collectionId);
                showToast('Collection deleted successfully', 'success');
                this.closeCollectionDetail();
            } catch (err) {
                showToast(err.message, 'error');
            }
        }
    }

    // Cleanup method for SPA unmount/navigation.
    destroy() {
        if (this.isDestroyed) {
            return;
        }

        this.isDestroyed = true;

        if (this.constellationSimulation) {
            this.constellationSimulation.stop();
            this.constellationSimulation = null;
        }
        if (this.constellationResizeHandler) {
            window.removeEventListener(
                'resize',
                this.constellationResizeHandler
            );
        }

        if (this.tooltipTimeout) {
            clearTimeout(this.tooltipTimeout);
            this.tooltipTimeout = null;
        }

        while (this.cleanupCallbacks.length > 0) {
            const cleanup = this.cleanupCallbacks.pop();
            try {
                cleanup();
            } catch (err) {
                console.warn('Cleanup listener failed', err);
            }
        }

        const constellationContainer = document.getElementById('constellation-container');
        if (constellationContainer) {
            constellationContainer.innerHTML = '';
        }

        if (this.modal && this.modal.classList.contains('active')) {
            this.closeModal();
        }

        if (this.liveRegion && this.liveRegion.parentNode) {
            this.liveRegion.parentNode.removeChild(this.liveRegion);
        }

        this.liveRegion = null;
        this.currentBook = null;
    }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    // Only initialize on library page
    if (document.getElementById('library-shelves')) {
        if (window.bookshelf3D && typeof window.bookshelf3D.destroy === 'function') {
            window.bookshelf3D.destroy();
        }

        const renderer = new BookshelfRenderer3D();
        window.bookshelf3D = renderer;
        window.bookshelfRenderer = renderer;

        window.addEventListener('pagehide', () => {
            if (window.bookshelf3D && typeof window.bookshelf3D.destroy === 'function') {
                window.bookshelf3D.destroy();
            }
        }, { once: true });
    }
});