script.js

/**
 * Biology Flashcards Application
 * Main JavaScript file with all functionality
 */

// ============================================================================
// Card Manager Module
// ============================================================================

const CardManager = (function() {
    // Default card dataset - 6 diverse biology organisms
    const defaultCards = [
        {
            id: "elephant-african",
            title: "African Elephant",
            imageUrl: "https://images.unsplash.com/photo-1557050543-4d5f4e07ef46?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            taxonomy: {
                kingdom: "Animalia",
                phylum: "Chordata",
                class: "Mammalia"
            },
            details: {
                description: "The African elephant is the largest land animal on Earth, characterized by its long trunk, large ears, and tusks (which are actually elongated incisors).",
                habitat: "Savannas, grasslands, forests, and deserts across sub-Saharan Africa",
                diet: "Herbivorous - primarily grasses, but also leaves, bark, fruits, and roots",
                size: "Height: 3-4 meters (10-13 feet), Weight: 4,000-7,000 kg (8,800-15,400 lbs)",
                distribution: "Eastern, Southern, and Western Africa",
                conservation: "Vulnerable (IUCN Red List) - threatened by habitat loss and poaching",
                funFact: "Elephants can communicate using infrasound below the range of human hearing, which allows them to communicate over distances of up to 10 kilometers."
            },
            categories: ["animal", "mammal", "herbivore", "endangered", "large"],
            difficulty: "medium"
        },
        {
            id: "butterfly-monarch",
            title: "Monarch Butterfly",
            imageUrl: "https://images.unsplash.com/photo-1551085254-e96b210db58a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            taxonomy: {
                kingdom: "Animalia",
                phylum: "Arthropoda",
                class: "Insecta"
            },
            details: {
                description: "The monarch butterfly is known for its striking orange and black pattern and its incredible multi-generational migration across North America.",
                habitat: "Milkweed-rich fields, gardens, forests, and coastal areas",
                diet: "Nectar from flowers; caterpillars feed exclusively on milkweed leaves",
                size: "Wingspan: 8.9-10.2 cm (3.5-4 inches), Weight: 0.25-0.75 grams",
                distribution: "North America, with migratory populations reaching Central Mexico",
                conservation: "Near Threatened - population declines due to habitat loss and climate change",
                funFact: "Monarchs complete a multi-generational migration of up to 4,800 km (3,000 miles) each year, with no single butterfly making the entire round trip."
            },
            categories: ["animal", "insect", "pollinator", "migratory"],
            difficulty: "easy"
        },
        {
            id: "tree-sequoia",
            title: "Giant Sequoia",
            imageUrl: "https://images.unsplash.com/photo-1503435980610-a51f3ddfee50?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            taxonomy: {
                kingdom: "Plantae",
                phylum: "Tracheophyta",
                class: "Pinopsida"
            },
            details: {
                description: "The giant sequoia is the world's largest tree by volume, with some specimens over 3,000 years old and reaching heights of over 90 meters.",
                habitat: "Moist, well-drained soils on the western slopes of the Sierra Nevada mountains",
                diet: "Photosynthetic - converts sunlight, water, and carbon dioxide into energy",
                size: "Height: up to 95 meters (312 feet), Diameter: up to 11 meters (36 feet)",
                distribution: "Restricted to about 70 groves in the Sierra Nevada mountains of California",
                conservation: "Endangered - threatened by climate change, drought, and increased wildfires",
                funFact: "Giant sequoias have fire-resistant bark up to 60 cm (2 feet) thick and require periodic fires to open their cones and release seeds."
            },
            categories: ["plant", "tree", "conifer", "ancient", "large"],
            difficulty: "medium"
        },
        {
            id: "mushroom-amanita",
            title: "Fly Agaric Mushroom",
            imageUrl: "https://images.unsplash.com/photo-1572017932227-3c6c2c82b6e3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            taxonomy: {
                kingdom: "Fungi",
                phylum: "Basidiomycota",
                class: "Agaricomycetes"
            },
            details: {
                description: "The fly agaric is a iconic mushroom known for its bright red cap with white spots. It contains psychoactive compounds and has a long history in folklore.",
                habitat: "Forest floors in symbiotic relationship with birch, pine, and spruce trees",
                diet: "Mycorrhizal - forms symbiotic relationships with tree roots",
                size: "Cap diameter: 8-20 cm (3-8 inches), Stem height: 15-20 cm (6-8 inches)",
                distribution: "Temperate and boreal regions of the Northern Hemisphere",
                conservation: "Least Concern - widespread and common",
                funFact: "This mushroom is toxic and hallucinogenic. It was traditionally used by Siberian shamans and is famously depicted in fairy tales and video games (like Super Mario)."
            },
            categories: ["fungi", "mushroom", "toxic", "symbiotic"],
            difficulty: "hard"
        },
        {
            id: "shark-great-white",
            title: "Great White Shark",
            imageUrl: "https://images.unsplash.com/photo-1560279966-245c92c2ee91?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            taxonomy: {
                kingdom: "Animalia",
                phylum: "Chordata",
                class: "Chondrichthyes"
            },
            details: {
                description: "The great white shark is a large predatory fish known for its size, power, and portrayal in popular culture. It has a streamlined body and rows of serrated teeth.",
                habitat: "Coastal and offshore waters in temperate and subtropical oceans worldwide",
                diet: "Carnivorous - primarily seals, sea lions, small whales, fish, and carrion",
                size: "Length: 4-6 meters (13-20 feet), Weight: 680-1,100 kg (1,500-2,400 lbs)",
                distribution: "Found in most coastal and offshore waters with temperatures between 12-24°C",
                conservation: "Vulnerable - populations declining due to overfishing and bycatch",
                funFact: "Great white sharks can detect a single drop of blood in 100 liters (25 gallons) of water and can sense the electromagnetic fields produced by living animals."
            },
            categories: ["animal", "fish", "predator", "marine", "endangered"],
            difficulty: "medium"
        },
        {
            id: "plant-venus-flytrap",
            title: "Venus Flytrap",
            imageUrl: "https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
            taxonomy: {
                kingdom: "Plantae",
                phylum: "Tracheophyta",
                class: "Magnoliopsida"
            },
            details: {
                description: "The Venus flytrap is a carnivorous plant famous for its unique trapping mechanism. Its leaves have hinged lobes with trigger hairs that snap shut when touched.",
                habitat: "Nutrient-poor, acidic soils in subtropical wetlands of the Carolinas (USA)",
                diet: "Carnivorous - insects and arachnids; also photosynthetic",
                size: "Rosette diameter: 10-15 cm (4-6 inches), Trap size: 2.5-5 cm (1-2 inches)",
                distribution: "Endemic to a small region in North and South Carolina, USA",
                conservation: "Vulnerable - threatened by habitat loss, poaching, and fire suppression",
                funFact: "The Venus flytrap's trapping mechanism is one of the fastest movements in the plant kingdom. It can close its trap in about 100 milliseconds when triggered twice within 20 seconds."
            },
            categories: ["plant", "carnivorous", "insectivorous", "endangered"],
            difficulty: "easy"
        }
    ];

    // Current state
    let cards = [];
    let currentCardIndex = 0;
    let filteredCards = [];
    let activeFilters = {
        kingdom: null,
        phylum: null,
        class: null,
        search: ''
    };

    // Initialize - load cards from localStorage or use defaults
    function init() {
        const userCards = JSON.parse(localStorage.getItem('biologyCards_user') || '[]');
        cards = [...defaultCards, ...userCards];
        filteredCards = [...cards];
        currentCardIndex = 0;
        return cards;
    }

    // Get all cards (filtered if filters active)
    function getCards() {
        return filteredCards;
    }

    // Get current card
    function getCurrentCard() {
        return filteredCards[currentCardIndex] || null;
    }

    // Get card by index
    function getCard(index) {
        return filteredCards[index] || null;
    }

    // Get total number of cards
    function getTotalCards() {
        return filteredCards.length;
    }

    // Get current card index
    function getCurrentIndex() {
        return currentCardIndex;
    }

    // Navigate to next card
    function nextCard() {
        if (filteredCards.length === 0) return null;
        currentCardIndex = (currentCardIndex + 1) % filteredCards.length;
        return getCurrentCard();
    }

    // Navigate to previous card
    function prevCard() {
        if (filteredCards.length === 0) return null;
        currentCardIndex = (currentCardIndex - 1 + filteredCards.length) % filteredCards.length;
        return getCurrentCard();
    }

    // Jump to specific card index
    function jumpToCard(index) {
        if (index >= 0 && index < filteredCards.length) {
            currentCardIndex = index;
            return getCurrentCard();
        }
        return null;
    }

    // Shuffle cards
    function shuffle() {
        if (filteredCards.length === 0) return;

        // Fisher-Yates shuffle algorithm
        for (let i = filteredCards.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [filteredCards[i], filteredCards[j]] = [filteredCards[j], filteredCards[i]];
        }

        // Update current index to point to the same card if possible
        const currentCard = getCurrentCard();
        if (currentCard) {
            const newIndex = filteredCards.findIndex(card => card.id === currentCard.id);
            if (newIndex !== -1) {
                currentCardIndex = newIndex;
            } else {
                currentCardIndex = 0;
            }
        } else {
            currentCardIndex = 0;
        }

        return filteredCards;
    }

    // Reset to default order
    function resetOrder() {
        filteredCards = [...cards];
        currentCardIndex = 0;
        return filteredCards;
    }

    // Apply filters
    function applyFilters(filters) {
        activeFilters = { ...activeFilters, ...filters };

        filteredCards = cards.filter(card => {
            // Kingdom filter
            if (activeFilters.kingdom && card.taxonomy.kingdom !== activeFilters.kingdom) {
                return false;
            }

            // Phylum filter
            if (activeFilters.phylum && card.taxonomy.phylum !== activeFilters.phylum) {
                return false;
            }

            // Class filter
            if (activeFilters.class && card.taxonomy.class !== activeFilters.class) {
                return false;
            }

            // Search filter
            if (activeFilters.search) {
                const searchTerm = activeFilters.search.toLowerCase();
                const searchableText = [
                    card.title,
                    card.taxonomy.kingdom,
                    card.taxonomy.phylum,
                    card.taxonomy.class,
                    card.details.description,
                    card.details.habitat,
                    card.details.diet,
                    ...card.categories
                ].join(' ').toLowerCase();

                if (!searchableText.includes(searchTerm)) {
                    return false;
                }
            }

            return true;
        });

        // Reset to first card if current index is out of bounds
        if (currentCardIndex >= filteredCards.length) {
            currentCardIndex = filteredCards.length > 0 ? 0 : -1;
        }

        return filteredCards;
    }

    // Get available filter options
    function getFilterOptions() {
        const kingdoms = new Set();
        const phyla = new Set();
        const classes = new Set();

        cards.forEach(card => {
            kingdoms.add(card.taxonomy.kingdom);
            phyla.add(card.taxonomy.phylum);
            classes.add(card.taxonomy.class);
        });

        return {
            kingdoms: Array.from(kingdoms),
            phyla: Array.from(phyla),
            classes: Array.from(classes)
        };
    }

    // Add a new card (user-created)
    function addUserCard(cardData) {
        const newCard = {
            ...cardData,
            id: `user-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
        };

        cards.push(newCard);

        // Save to localStorage
        const userCards = cards.filter(card => card.id.startsWith('user-'));
        localStorage.setItem('biologyCards_user', JSON.stringify(userCards));

        // Reapply filters
        applyFilters(activeFilters);

        return newCard;
    }

    // Get user cards
    function getUserCards() {
        return cards.filter(card => card.id.startsWith('user-'));
    }

    // Reset to default cards only
    function resetToDefault() {
        cards = [...defaultCards];
        localStorage.removeItem('biologyCards_user');
        applyFilters(activeFilters);
        currentCardIndex = 0;
        return cards;
    }

    // Export user cards as JSON
    function exportUserCards() {
        const userCards = getUserCards();
        return JSON.stringify(userCards, null, 2);
    }

    // Import user cards from JSON
    function importUserCards(jsonString) {
        try {
            const importedCards = JSON.parse(jsonString);
            if (!Array.isArray(importedCards)) {
                throw new Error('Invalid format: expected an array of cards');
            }

            // Add imported cards
            importedCards.forEach(card => {
                if (card.id && card.title && card.taxonomy) {
                    cards.push(card);
                }
            });

            // Save to localStorage
            const userCards = cards.filter(card => card.id.startsWith('user-'));
            localStorage.setItem('biologyCards_user', JSON.stringify(userCards));

            // Reapply filters
            applyFilters(activeFilters);

            return importedCards.length;
        } catch (error) {
            console.error('Failed to import cards:', error);
            return 0;
        }
    }

    // Public API
    return {
        init,
        getCards,
        getCurrentCard,
        getCard,
        getTotalCards,
        getCurrentIndex,
        nextCard,
        prevCard,
        jumpToCard,
        shuffle,
        resetOrder,
        applyFilters,
        getFilterOptions,
        addUserCard,
        getUserCards,
        resetToDefault,
        exportUserCards,
        importUserCards
    };
})();

// ============================================================================
// UI Controller Module
// ============================================================================

const UIController = (function() {
    // DOM Elements
    const elements = {
        // Card display
        card: document.getElementById('card'),
        cardImage: document.getElementById('card-image'),
        cardTitle: document.getElementById('card-title'),
        tagKingdom: document.getElementById('tag-kingdom'),
        tagPhylum: document.getElementById('tag-phylum'),
        tagClass: document.getElementById('tag-class'),

        // Card back
        backTitle: document.getElementById('back-title'),
        infoDescription: document.getElementById('info-description'),
        infoHabitat: document.getElementById('info-habitat'),
        infoDiet: document.getElementById('info-diet'),
        infoSize: document.getElementById('info-size'),
        infoDistribution: document.getElementById('info-distribution'),
        infoConservation: document.getElementById('info-conservation'),
        funFact: document.getElementById('fun-fact'),

        // Controls
        prevBtn: document.getElementById('prev-btn'),
        nextBtn: document.getElementById('next-btn'),
        flipBtn: document.getElementById('flip-btn'),
        shuffleBtn: document.getElementById('shuffle-btn'),
        resetBtn: document.getElementById('reset-btn'),
        cardCounter: document.getElementById('card-counter'),
        progressBar: document.getElementById('progress-bar'),

        // Thumbnails
        cardThumbnails: document.getElementById('card-thumbnails')
    };

    // Initialize UI
    function init() {
        // Check if all required elements exist
        for (const [key, element] of Object.entries(elements)) {
            if (!element) {
                console.warn(`UI element not found: ${key}`);
            }
        }

        // Set up event listeners (will be connected by main app)
        console.log('UI Controller initialized');
    }

    // Update card display with current card data
    function updateCardDisplay(card) {
        if (!card) return;

        // Front side
        elements.cardTitle.textContent = card.title;
        elements.tagKingdom.textContent = `Kingdom: ${card.taxonomy.kingdom}`;
        elements.tagPhylum.textContent = `Phylum: ${card.taxonomy.phylum}`;
        elements.tagClass.textContent = `Class: ${card.taxonomy.class}`;

        // Update card image
        elements.cardImage.innerHTML = '';
        const img = document.createElement('img');
        img.src = card.imageUrl;
        img.alt = card.title;
        img.loading = 'lazy';
        img.onerror = function() {
            // Fallback if image fails to load
            this.parentElement.innerHTML = `
                <div class="image-placeholder">
                    <i class="fas fa-seedling"></i>
                    <span>${card.title}</span>
                </div>
            `;
        };
        elements.cardImage.appendChild(img);

        // Back side
        elements.backTitle.textContent = card.title;
        elements.infoDescription.textContent = card.details.description;
        elements.infoHabitat.textContent = card.details.habitat;
        elements.infoDiet.textContent = card.details.diet;
        elements.infoSize.textContent = card.details.size;
        elements.infoDistribution.textContent = card.details.distribution;
        elements.infoConservation.textContent = card.details.conservation;
        elements.funFact.textContent = card.details.funFact;

        // Update counter and progress
        const totalCards = CardManager.getTotalCards();
        const currentIndex = CardManager.getCurrentIndex();
        elements.cardCounter.textContent = `Card ${currentIndex + 1} of ${totalCards}`;

        // Update progress bar
        if (totalCards > 0) {
            const progress = ((currentIndex + 1) / totalCards) * 100;
            elements.progressBar.style.width = `${progress}%`;
        }
    }

    // Flip card animation
    function flipCard() {
        elements.card.classList.toggle('flipped');
    }

    // Check if card is flipped
    function isCardFlipped() {
        return elements.card.classList.contains('flipped');
    }

    // Reset card to front side
    function resetCardFlip() {
        elements.card.classList.remove('flipped');
    }

    // Update thumbnail navigation
    function updateThumbnails(cards, currentIndex) {
        elements.cardThumbnails.innerHTML = '';

        cards.forEach((card, index) => {
            const thumbnail = document.createElement('div');
            thumbnail.className = `thumbnail ${index === currentIndex ? 'active' : ''}`;
            thumbnail.dataset.index = index;

            thumbnail.innerHTML = `
                <div class="thumbnail-img">
                    <img src="${card.imageUrl}" alt="${card.title}" loading="lazy">
                </div>
                <div class="thumbnail-content">
                    <div class="thumbnail-title">${card.title}</div>
                    <div class="thumbnail-kingdom">${card.taxonomy.kingdom}</div>
                </div>
            `;

            thumbnail.addEventListener('click', () => {
                // This will be handled by the main app
                thumbnail.dispatchEvent(new CustomEvent('thumbnailClick', {
                    detail: { index },
                    bubbles: true
                }));
            });

            elements.cardThumbnails.appendChild(thumbnail);
        });
    }

    // Show notification message
    function showNotification(message, type = 'info') {
        // Create notification element
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.textContent = message;

        // Add to page
        document.body.appendChild(notification);

        // Remove after 3 seconds
        setTimeout(() => {
            notification.classList.add('fade-out');
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.parentNode.removeChild(notification);
                }
            }, 300);
        }, 3000);
    }

    // Get DOM elements (for event listeners)
    function getElements() {
        return elements;
    }

    // Public API
    return {
        init,
        updateCardDisplay,
        flipCard,
        isCardFlipped,
        resetCardFlip,
        updateThumbnails,
        showNotification,
        getElements
    };
})();

// ============================================================================
// Filter Controller Module
// ============================================================================

const FilterController = (function() {
    // DOM Elements
    const elements = {
        searchInput: document.getElementById('search-input'),
        searchClear: document.getElementById('search-clear'),
        kingdomFilter: document.getElementById('kingdom-filter'),
        phylumFilter: document.getElementById('phylum-filter'),
        classFilter: document.getElementById('class-filter'),
        clearFiltersBtn: document.getElementById('clear-filters'),
        activeFiltersContainer: document.getElementById('active-filters'),
        addCardBtn: document.getElementById('add-card-btn'),
        quizModeBtn: document.getElementById('quiz-mode-btn')
    };

    // Initialize filter controls
    function init() {
        populateFilterOptions();
        setupEventListeners();
        updateActiveFiltersDisplay();
        console.log('Filter Controller initialized');
    }

    // Populate dropdowns with available options
    function populateFilterOptions() {
        const options = CardManager.getFilterOptions();

        // Clear existing options (except first)
        while (elements.kingdomFilter.options.length > 1) {
            elements.kingdomFilter.remove(1);
        }
        while (elements.phylumFilter.options.length > 1) {
            elements.phylumFilter.remove(1);
        }
        while (elements.classFilter.options.length > 1) {
            elements.classFilter.remove(1);
        }

        // Add kingdom options
        options.kingdoms.sort().forEach(kingdom => {
            const option = document.createElement('option');
            option.value = kingdom;
            option.textContent = kingdom;
            elements.kingdomFilter.appendChild(option);
        });

        // Add phylum options
        options.phyla.sort().forEach(phylum => {
            const option = document.createElement('option');
            option.value = phylum;
            option.textContent = phylum;
            elements.phylumFilter.appendChild(option);
        });

        // Add class options
        options.classes.sort().forEach(className => {
            const option = document.createElement('option');
            option.value = className;
            option.textContent = className;
            elements.classFilter.appendChild(option);
        });
    }

    // Set up event listeners
    function setupEventListeners() {
        // Search input with debounce
        let searchTimeout;
        elements.searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                applyFilters();
            }, 300);
        });

        // Search clear button
        elements.searchClear.addEventListener('click', function() {
            elements.searchInput.value = '';
            applyFilters();
        });

        // Filter dropdowns
        elements.kingdomFilter.addEventListener('change', applyFilters);
        elements.phylumFilter.addEventListener('change', applyFilters);
        elements.classFilter.addEventListener('change', applyFilters);

        // Clear all filters button
        elements.clearFiltersBtn.addEventListener('click', clearAllFilters);

        // Add card button
        elements.addCardBtn.addEventListener('click', function() {
            CardCreation.openModal();
        });

        // Quiz mode button
        elements.quizModeBtn.addEventListener('click', function() {
            QuizEngine.startQuiz();
        });
    }

    // Apply current filters
    function applyFilters() {
        const filters = {
            kingdom: elements.kingdomFilter.value || null,
            phylum: elements.phylumFilter.value || null,
            class: elements.classFilter.value || null,
            search: elements.searchInput.value.trim()
        };

        CardManager.applyFilters(filters);
        updateActiveFiltersDisplay();

        // Notify main app to reload card
        if (typeof window.BiologyFlashcards !== 'undefined') {
            window.BiologyFlashcards.loadCard();
        }
    }

    // Clear all filters
    function clearAllFilters() {
        elements.searchInput.value = '';
        elements.kingdomFilter.value = '';
        elements.phylumFilter.value = '';
        elements.classFilter.value = '';

        applyFilters();
        UIController.showNotification('All filters cleared', 'info');
    }

    // Update active filters display
    function updateActiveFiltersDisplay() {
        const filters = CardManager.applyFilters;
        elements.activeFiltersContainer.innerHTML = '';

        const activeFilters = [];

        if (elements.searchInput.value.trim()) {
            activeFilters.push({
                type: 'search',
                label: `Search: "${elements.searchInput.value.trim()}"`,
                key: 'search'
            });
        }

        if (elements.kingdomFilter.value) {
            activeFilters.push({
                type: 'kingdom',
                label: `Kingdom: ${elements.kingdomFilter.value}`,
                key: 'kingdom'
            });
        }

        if (elements.phylumFilter.value) {
            activeFilters.push({
                type: 'phylum',
                label: `Phylum: ${elements.phylumFilter.value}`,
                key: 'phylum'
            });
        }

        if (elements.classFilter.value) {
            activeFilters.push({
                type: 'class',
                label: `Class: ${elements.classFilter.value}`,
                key: 'class'
            });
        }

        if (activeFilters.length === 0) {
            const noFiltersMsg = document.createElement('div');
            noFiltersMsg.textContent = 'No active filters';
            noFiltersMsg.style.color = '#999';
            noFiltersMsg.style.fontStyle = 'italic';
            elements.activeFiltersContainer.appendChild(noFiltersMsg);
            return;
        }

        activeFilters.forEach(filter => {
            const filterTag = document.createElement('div');
            filterTag.className = 'active-filter-tag';

            const label = document.createElement('span');
            label.textContent = filter.label;

            const removeBtn = document.createElement('button');
            removeBtn.className = 'remove-filter';
            removeBtn.innerHTML = '<i class="fas fa-times"></i>';
            removeBtn.title = `Remove ${filter.type} filter`;
            removeBtn.addEventListener('click', () => {
                removeFilter(filter.key);
            });

            filterTag.appendChild(label);
            filterTag.appendChild(removeBtn);
            elements.activeFiltersContainer.appendChild(filterTag);
        });
    }

    // Remove specific filter
    function removeFilter(filterKey) {
        switch(filterKey) {
            case 'search':
                elements.searchInput.value = '';
                break;
            case 'kingdom':
                elements.kingdomFilter.value = '';
                break;
            case 'phylum':
                elements.phylumFilter.value = '';
                break;
            case 'class':
                elements.classFilter.value = '';
                break;
        }

        applyFilters();
    }

    // Get DOM elements (for other modules)
    function getElements() {
        return elements;
    }

    // Public API
    return {
        init,
        applyFilters,
        clearAllFilters,
        updateActiveFiltersDisplay,
        getElements
    };
})();

// ============================================================================
// Card Creation Module
// ============================================================================

const CardCreation = (function() {
    // DOM Elements
    const elements = {
        modal: document.getElementById('card-creation-modal'),
        modalClose: document.getElementById('modal-close'),
        modalCancel: document.getElementById('modal-cancel'),
        form: document.getElementById('card-creation-form'),
        titleInput: document.getElementById('card-title-input'),
        imageUrlInput: document.getElementById('card-image-url'),
        imagePreview: document.getElementById('image-preview'),
        kingdomInput: document.getElementById('card-kingdom'),
        phylumInput: document.getElementById('card-phylum'),
        classInput: document.getElementById('card-class'),
        descriptionInput: document.getElementById('card-description'),
        habitatInput: document.getElementById('card-habitat'),
        dietInput: document.getElementById('card-diet'),
        sizeInput: document.getElementById('card-size'),
        distributionInput: document.getElementById('card-distribution'),
        conservationInput: document.getElementById('card-conservation'),
        funFactInput: document.getElementById('card-fun-fact'),
        categoriesInput: document.getElementById('card-categories'),
        difficultySelect: document.getElementById('card-difficulty')
    };

    // Initialize module
    function init() {
        setupEventListeners();
        console.log('Card Creation module initialized');
    }

    // Set up event listeners
    function setupEventListeners() {
        // Close modal buttons
        elements.modalClose.addEventListener('click', closeModal);
        elements.modalCancel.addEventListener('click', closeModal);

        // Close modal when clicking outside
        elements.modal.addEventListener('click', function(event) {
            if (event.target === elements.modal) {
                closeModal();
            }
        });

        // Image URL preview
        elements.imageUrlInput.addEventListener('input', updateImagePreview);

        // Form submission
        elements.form.addEventListener('submit', handleFormSubmit);

        // Keyboard shortcuts
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape' && elements.modal.classList.contains('active')) {
                closeModal();
            }
        });
    }

    // Open modal
    function openModal() {
        resetForm();
        elements.modal.classList.add('active');
        document.body.style.overflow = 'hidden';
        elements.titleInput.focus();
    }

    // Close modal
    function closeModal() {
        elements.modal.classList.remove('active');
        document.body.style.overflow = '';
    }

    // Reset form to default state
    function resetForm() {
        elements.form.reset();
        elements.imagePreview.innerHTML = `
            <div class="image-placeholder">
                <i class="fas fa-image"></i>
                <span>Image preview will appear here</span>
            </div>
        `;
        elements.difficultySelect.value = 'medium';
    }

    // Update image preview
    function updateImagePreview() {
        const url = elements.imageUrlInput.value.trim();
        if (!url) {
            elements.imagePreview.innerHTML = `
                <div class="image-placeholder">
                    <i class="fas fa-image"></i>
                    <span>Image preview will appear here</span>
                </div>
            `;
            return;
        }

        // Create new image to test loading
        const img = new Image();
        img.onload = function() {
            elements.imagePreview.innerHTML = '';
            const previewImg = document.createElement('img');
            previewImg.src = url;
            previewImg.alt = 'Image preview';
            elements.imagePreview.appendChild(previewImg);
        };
        img.onerror = function() {
            elements.imagePreview.innerHTML = `
                <div class="image-placeholder error">
                    <i class="fas fa-exclamation-triangle"></i>
                    <span>Unable to load image. Please check the URL.</span>
                </div>
            `;
        };
        img.src = url;
    }

    // Handle form submission
    function handleFormSubmit(event) {
        event.preventDefault();

        if (!validateForm()) {
            return;
        }

        // Gather form data
        const cardData = {
            title: elements.titleInput.value.trim(),
            imageUrl: elements.imageUrlInput.value.trim(),
            taxonomy: {
                kingdom: elements.kingdomInput.value.trim(),
                phylum: elements.phylumInput.value.trim(),
                class: elements.classInput.value.trim()
            },
            details: {
                description: elements.descriptionInput.value.trim(),
                habitat: elements.habitatInput.value.trim() || 'Not specified',
                diet: elements.dietInput.value.trim() || 'Not specified',
                size: elements.sizeInput.value.trim() || 'Not specified',
                distribution: elements.distributionInput.value.trim() || 'Not specified',
                conservation: elements.conservationInput.value.trim() || 'Not specified',
                funFact: elements.funFactInput.value.trim() || 'No fun fact available'
            },
            categories: elements.categoriesInput.value.trim()
                ? elements.categoriesInput.value.trim().split(',').map(cat => cat.trim()).filter(cat => cat)
                : [],
            difficulty: elements.difficultySelect.value
        };

        // Add card via CardManager
        try {
            const newCard = CardManager.addUserCard(cardData);

            // Close modal
            closeModal();

            // Show success notification
            UIController.showNotification(`Card "${newCard.title}" created successfully!`, 'success');

            // Refresh UI
            if (typeof window.BiologyFlashcards !== 'undefined') {
                window.BiologyFlashcards.loadCard();
            }

            // Update filters dropdowns
            FilterController.init?.();
        } catch (error) {
            console.error('Failed to create card:', error);
            UIController.showNotification('Failed to create card. Please try again.', 'error');
        }
    }

    // Validate form
    function validateForm() {
        const requiredFields = [
            { element: elements.titleInput, name: 'Organism Name' },
            { element: elements.imageUrlInput, name: 'Image URL' },
            { element: elements.kingdomInput, name: 'Kingdom' },
            { element: elements.phylumInput, name: 'Phylum' },
            { element: elements.classInput, name: 'Class' },
            { element: elements.descriptionInput, name: 'Description' }
        ];

        let isValid = true;
        const errors = [];

        requiredFields.forEach(field => {
            if (!field.element.value.trim()) {
                isValid = false;
                errors.push(`${field.name} is required`);
                field.element.style.borderColor = '#F44336';
            } else {
                field.element.style.borderColor = '#e0e0e0';
            }
        });

        // Validate URL format
        const url = elements.imageUrlInput.value.trim();
        if (url && !isValidUrl(url)) {
            isValid = false;
            errors.push('Please enter a valid URL for the image');
            elements.imageUrlInput.style.borderColor = '#F44336';
        }

        if (!isValid) {
            UIController.showNotification(`Please fix the following errors: ${errors.join(', ')}`, 'error');
        }

        return isValid;
    }

    // Helper: Validate URL
    function isValidUrl(string) {
        try {
            new URL(string);
            return true;
        } catch (_) {
            return false;
        }
    }

    // Public API
    return {
        init,
        openModal,
        closeModal
    };
})();

// ============================================================================
// Quiz Engine Module
// ============================================================================

const QuizEngine = (function() {
    // Quiz state
    let quizState = {
        isActive: false,
        score: 0,
        streak: 0,
        highestStreak: 0,
        currentQuestion: 0,
        totalQuestions: 10,
        timeLeft: 60,
        timerInterval: null,
        selectedOption: null,
        questions: [],
        results: []
    };

    // DOM Elements
    const elements = {
        quizModal: document.getElementById('quiz-modal'),
        quizResultsModal: document.getElementById('quiz-results-modal'),
        quizCloseBtn: document.getElementById('quiz-modal-close'),
        quizResultsCloseBtn: document.getElementById('quiz-results-close'),
        quizScore: document.getElementById('quiz-score'),
        quizStreak: document.getElementById('quiz-streak'),
        quizTimer: document.getElementById('quiz-timer'),
        quizQuestionCounter: document.getElementById('quiz-question-counter'),
        quizQuestionText: document.getElementById('quiz-question-text'),
        quizImageContainer: document.getElementById('quiz-image-container'),
        quizOptions: document.getElementById('quiz-options'),
        quizFeedback: document.getElementById('quiz-feedback'),
        quizProgressBar: document.getElementById('quiz-progress-bar'),
        quizNextBtn: document.getElementById('quiz-next-btn'),
        quizEndBtn: document.getElementById('quiz-end-btn'),
        quizRestartBtn: document.getElementById('quiz-restart-btn'),
        finalScore: document.getElementById('final-score'),
        correctAnswers: document.getElementById('correct-answers'),
        highestStreakElem: document.getElementById('highest-streak'),
        timeRemaining: document.getElementById('time-remaining'),
        performanceFill: document.getElementById('performance-fill'),
        performancePercentage: document.getElementById('performance-percentage'),
        breakdownList: document.getElementById('breakdown-list'),
        resultsRestartBtn: document.getElementById('results-restart-btn'),
        resultsCloseBtn: document.getElementById('results-close-btn'),
        resultsShareBtn: document.getElementById('results-share-btn')
    };

    // Initialize module
    function init() {
        setupEventListeners();
        console.log('Quiz Engine initialized');
    }

    // Set up event listeners
    function setupEventListeners() {
        // Quiz modal close button
        if (elements.quizCloseBtn) {
            elements.quizCloseBtn.addEventListener('click', closeQuiz);
        }

        // Quiz results close button
        if (elements.quizResultsCloseBtn) {
            elements.quizResultsCloseBtn.addEventListener('click', closeQuizResults);
        }

        // Quiz control buttons
        if (elements.quizNextBtn) {
            elements.quizNextBtn.addEventListener('click', nextQuestion);
        }

        if (elements.quizEndBtn) {
            elements.quizEndBtn.addEventListener('click', endQuiz);
        }

        if (elements.quizRestartBtn) {
            elements.quizRestartBtn.addEventListener('click', restartQuiz);
        }

        // Results modal buttons
        if (elements.resultsRestartBtn) {
            elements.resultsRestartBtn.addEventListener('click', restartQuiz);
        }

        if (elements.resultsCloseBtn) {
            elements.resultsCloseBtn.addEventListener('click', closeQuizResults);
        }

        if (elements.resultsShareBtn) {
            elements.resultsShareBtn.addEventListener('click', shareResults);
        }

        // Close modals when clicking outside
        if (elements.quizModal) {
            elements.quizModal.addEventListener('click', function(event) {
                if (event.target === elements.quizModal) {
                    closeQuiz();
                }
            });
        }

        if (elements.quizResultsModal) {
            elements.quizResultsModal.addEventListener('click', function(event) {
                if (event.target === elements.quizResultsModal) {
                    closeQuizResults();
                }
            });
        }

        // Keyboard shortcuts for quiz
        document.addEventListener('keydown', handleQuizKeyboardShortcuts);
    }

    // Start quiz
    function startQuiz() {
        if (CardManager.getTotalCards() < 4) {
            UIController.showNotification('Need at least 4 cards to start a quiz.', 'warning');
            return;
        }

        resetQuizState();
        generateQuestions();
        quizState.isActive = true;
        openQuiz();
        startTimer();
        showQuestion(0);
    }

    // Generate quiz questions
    function generateQuestions() {
        const cards = CardManager.getCards();
        if (cards.length < 4) {
            return;
        }

        quizState.questions = [];
        const usedCardIds = new Set();

        // Generate 10 questions
        for (let i = 0; i < quizState.totalQuestions; i++) {
            const questionType = Math.random() < 0.7 ? 'identification' : 'true_false';

            if (questionType === 'identification') {
                // Identification question: "Which organism is shown?"
                const correctCard = getRandomCard(cards, usedCardIds);
                usedCardIds.add(correctCard.id);

                // Get 3 incorrect options from other cards
                const incorrectOptions = [];
                while (incorrectOptions.length < 3) {
                    const randomCard = cards[Math.floor(Math.random() * cards.length)];
                    if (randomCard.id !== correctCard.id &&
                        !incorrectOptions.includes(randomCard.title)) {
                        incorrectOptions.push(randomCard.title);
                    }
                }

                // Combine and shuffle options
                const options = [correctCard.title, ...incorrectOptions];
                shuffleArray(options);

                quizState.questions.push({
                    type: 'identification',
                    imageUrl: correctCard.imageUrl,
                    correctAnswer: correctCard.title,
                    options: options,
                    cardId: correctCard.id
                });
            } else {
                // True/False question based on card details
                const card = getRandomCard(cards, usedCardIds);
                usedCardIds.add(card.id);

                // Randomly decide if statement is true or false
                const isTrue = Math.random() < 0.5;
                let statement = '';
                let correctAnswer = isTrue ? 'True' : 'False';

                // Pick a random fact type
                const factTypes = ['description', 'habitat', 'diet', 'size', 'distribution', 'conservation', 'funFact'];
                const factType = factTypes[Math.floor(Math.random() * factTypes.length)];
                const fact = card.details[factType];

                if (isTrue) {
                    statement = fact;
                } else {
                    // Generate a false statement by modifying the fact
                    statement = generateFalseStatement(fact, cards);
                }

                quizState.questions.push({
                    type: 'true_false',
                    statement: statement,
                    correctAnswer: correctAnswer,
                    options: ['True', 'False'],
                    cardId: card.id
                });
            }
        }
    }

    // Helper: Get random card not already used
    function getRandomCard(cards, usedCardIds) {
        const availableCards = cards.filter(card => !usedCardIds.has(card.id));
        if (availableCards.length === 0) {
            // Reset used cards if all have been used
            usedCardIds.clear();
            return cards[Math.floor(Math.random() * cards.length)];
        }
        return availableCards[Math.floor(Math.random() * availableCards.length)];
    }

    // Helper: Generate false statement
    function generateFalseStatement(fact, cards) {
        // Simple approach: take a fact from a different random card
        const randomCard = cards[Math.floor(Math.random() * cards.length)];
        const factTypes = ['description', 'habitat', 'diet', 'size', 'distribution', 'conservation', 'funFact'];
        const randomFactType = factTypes[Math.floor(Math.random() * factTypes.length)];
        return randomCard.details[randomFactType];
    }

    // Helper: Fisher-Yates shuffle
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    // Show question at index
    function showQuestion(index) {
        if (index < 0 || index >= quizState.questions.length) {
            return;
        }

        quizState.currentQuestion = index;
        quizState.selectedOption = null;
        const question = quizState.questions[index];

        // Update UI
        updateQuizStats();

        // Set question text based on type
        if (question.type === 'identification') {
            elements.quizQuestionText.textContent = 'Which organism is shown in the image?';

            // Set image
            elements.quizImageContainer.innerHTML = '';
            const img = document.createElement('img');
            img.src = question.imageUrl;
            img.alt = 'Organism image';
            img.onerror = function() {
                this.parentElement.innerHTML = `
                    <div class="image-placeholder">
                        <i class="fas fa-seedling"></i>
                        <span>Image not available</span>
                    </div>
                `;
            };
            elements.quizImageContainer.appendChild(img);
        } else {
            elements.quizQuestionText.textContent = `True or False: ${question.statement}`;

            // Clear image container for true/false questions
            elements.quizImageContainer.innerHTML = `
                <div class="image-placeholder">
                    <i class="fas fa-question-circle"></i>
                    <span>True/False Question</span>
                </div>
            `;
        }

        // Generate options
        renderOptions(question.options, question.correctAnswer);

        // Reset feedback and buttons
        elements.quizFeedback.className = 'quiz-feedback';
        elements.quizFeedback.innerHTML = '';
        elements.quizNextBtn.disabled = true;

        // Update progress bar
        const progress = ((index + 1) / quizState.totalQuestions) * 100;
        elements.quizProgressBar.style.width = `${progress}%`;
    }

    // Render options
    function renderOptions(options, correctAnswer) {
        elements.quizOptions.innerHTML = '';

        options.forEach((option, index) => {
            const optionElement = document.createElement('div');
            optionElement.className = 'quiz-option';
            optionElement.textContent = option;
            optionElement.dataset.option = option;

            optionElement.addEventListener('click', () => {
                if (quizState.selectedOption !== null) return; // Already selected
                selectOption(optionElement, option, correctAnswer);
            });

            elements.quizOptions.appendChild(optionElement);
        });
    }

    // Handle option selection
    function selectOption(optionElement, selectedOption, correctAnswer) {
        quizState.selectedOption = selectedOption;
        const isCorrect = selectedOption === correctAnswer;

        // Mark selected option
        optionElement.classList.add('selected');

        // Mark correct/incorrect
        const allOptions = elements.quizOptions.querySelectorAll('.quiz-option');
        allOptions.forEach(opt => {
            opt.classList.add('disabled');
            if (opt.dataset.option === correctAnswer) {
                opt.classList.add('correct');
            } else if (opt.dataset.option === selectedOption && !isCorrect) {
                opt.classList.add('incorrect');
            }
        });

        // Update score and streak
        if (isCorrect) {
            quizState.score += 10;
            quizState.streak++;
            if (quizState.streak > quizState.highestStreak) {
                quizState.highestStreak = quizState.streak;
            }
            showFeedback(true, 'Correct! Well done.');
        } else {
            quizState.streak = 0;
            showFeedback(false, `Incorrect. The correct answer is: ${correctAnswer}`);
        }

        // Record result
        quizState.results.push({
            questionIndex: quizState.currentQuestion,
            questionType: quizState.questions[quizState.currentQuestion].type,
            selectedOption: selectedOption,
            correctAnswer: correctAnswer,
            isCorrect: isCorrect
        });

        // Enable next button
        elements.quizNextBtn.disabled = false;
        updateQuizStats();
    }

    // Show feedback
    function showFeedback(isCorrect, message) {
        elements.quizFeedback.className = `quiz-feedback ${isCorrect ? 'correct' : 'incorrect'}`;
        elements.quizFeedback.innerHTML = `<p>${message}</p>`;
    }

    // Move to next question
    function nextQuestion() {
        if (quizState.currentQuestion < quizState.totalQuestions - 1) {
            showQuestion(quizState.currentQuestion + 1);
        } else {
            endQuiz();
        }
    }

    // End quiz and show results
    function endQuiz() {
        quizState.isActive = false;
        clearInterval(quizState.timerInterval);
        closeQuiz();
        showResults();
    }

    // Restart quiz
    function restartQuiz() {
        closeQuizResults();
        startQuiz();
    }

    // Start timer
    function startTimer() {
        clearInterval(quizState.timerInterval);
        quizState.timeLeft = 60;
        updateTimerDisplay();

        quizState.timerInterval = setInterval(() => {
            quizState.timeLeft--;
            updateTimerDisplay();

            if (quizState.timeLeft <= 0) {
                clearInterval(quizState.timerInterval);
                endQuiz();
            }
        }, 1000);
    }

    // Update timer display
    function updateTimerDisplay() {
        if (elements.quizTimer) {
            elements.quizTimer.textContent = quizState.timeLeft;
        }
    }

    // Update all quiz stats
    function updateQuizStats() {
        if (elements.quizScore) {
            elements.quizScore.textContent = quizState.score;
        }
        if (elements.quizStreak) {
            elements.quizStreak.textContent = quizState.streak;
        }
        if (elements.quizQuestionCounter) {
            elements.quizQuestionCounter.textContent =
                `${quizState.currentQuestion + 1}/${quizState.totalQuestions}`;
        }
    }

    // Show results modal
    function showResults() {
        const correctCount = quizState.results.filter(r => r.isCorrect).length;
        const percentage = Math.round((correctCount / quizState.totalQuestions) * 100);

        // Update results display
        elements.finalScore.textContent = quizState.score;
        elements.correctAnswers.textContent = `${correctCount}/${quizState.totalQuestions}`;
        elements.highestStreakElem.textContent = quizState.highestStreak;
        elements.timeRemaining.textContent = `${quizState.timeLeft}s`;
        elements.performanceFill.style.width = `${percentage}%`;
        elements.performancePercentage.textContent = `${percentage}%`;

        // Generate breakdown list
        elements.breakdownList.innerHTML = '';
        quizState.questions.forEach((question, index) => {
            const result = quizState.results[index];
            const breakdownItem = document.createElement('div');
            breakdownItem.className = `breakdown-item ${result?.isCorrect ? 'correct' : 'incorrect'}`;

            const questionText = question.type === 'identification'
                ? 'Organism Identification'
                : 'True/False Statement';

            const resultText = result?.isCorrect ? 'Correct' : 'Incorrect';

            breakdownItem.innerHTML = `
                <div class="breakdown-question">Question ${index + 1}: ${questionText}</div>
                <div class="breakdown-result ${result?.isCorrect ? 'correct' : 'incorrect'}">
                    ${resultText}
                </div>
            `;

            elements.breakdownList.appendChild(breakdownItem);
        });

        // Show results modal
        elements.quizResultsModal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    // Open quiz modal
    function openQuiz() {
        elements.quizModal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }

    // Close quiz modal
    function closeQuiz() {
        if (quizState.isActive) {
            if (confirm('Are you sure you want to end the quiz? Your progress will be lost.')) {
                quizState.isActive = false;
                clearInterval(quizState.timerInterval);
                elements.quizModal.classList.remove('active');
                document.body.style.overflow = '';
            }
        } else {
            elements.quizModal.classList.remove('active');
            document.body.style.overflow = '';
        }
    }

    // Close quiz results modal
    function closeQuizResults() {
        elements.quizResultsModal.classList.remove('active');
        document.body.style.overflow = '';
    }

    // Share results (placeholder)
    function shareResults() {
        const correctCount = quizState.results.filter(r => r.isCorrect).length;
        const percentage = Math.round((correctCount / quizState.totalQuestions) * 100);
        const message = `I scored ${quizState.score} points (${correctCount}/${quizState.totalQuestions} correct) in the Biology Flashcards Quiz!`;

        if (navigator.share) {
            navigator.share({
                title: 'Biology Flashcards Quiz Results',
                text: message,
                url: window.location.href
            });
        } else {
            // Fallback to clipboard
            navigator.clipboard.writeText(message).then(() => {
                UIController.showNotification('Results copied to clipboard!', 'success');
            });
        }
    }

    // Handle keyboard shortcuts for quiz
    function handleQuizKeyboardShortcuts(event) {
        if (!quizState.isActive || !elements.quizModal.classList.contains('active')) {
            return;
        }

        // Don't trigger if user is typing
        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
            return;
        }

        // Number keys 1-4 for selecting options
        if (event.key >= '1' && event.key <= '4' && quizState.selectedOption === null) {
            const optionIndex = parseInt(event.key) - 1;
            const options = elements.quizOptions.querySelectorAll('.quiz-option');
            if (optionIndex < options.length) {
                const option = options[optionIndex];
                const selectedOption = option.dataset.option;
                const correctAnswer = quizState.questions[quizState.currentQuestion].correctAnswer;
                selectOption(option, selectedOption, correctAnswer);
            }
        }

        // Space or Enter for next question
        if ((event.key === ' ' || event.key === 'Enter') && !elements.quizNextBtn.disabled) {
            event.preventDefault();
            nextQuestion();
        }

        // Escape to close quiz
        if (event.key === 'Escape') {
            event.preventDefault();
            closeQuiz();
        }
    }

    // Reset quiz state
    function resetQuizState() {
        quizState = {
            isActive: false,
            score: 0,
            streak: 0,
            highestStreak: 0,
            currentQuestion: 0,
            totalQuestions: 10,
            timeLeft: 60,
            timerInterval: null,
            selectedOption: null,
            questions: [],
            results: []
        };
    }

    // Public API
    return {
        init,
        startQuiz
    };
})();

// ============================================================================
// Main Application
// ============================================================================

const BiologyFlashcards = (function() {
    // App state
    let isInitialized = false;

    // Initialize the application
    function init() {
        if (isInitialized) return;

        // Initialize modules
        CardManager.init();
        UIController.init();
        FilterController.init();
        CardCreation.init();
        QuizEngine.init();

        // Set up event listeners
        setupEventListeners();

        // Load and display first card
        loadCard();

        // Set up keyboard shortcuts
        setupKeyboardShortcuts();

        isInitialized = true;
        console.log('Biology Flashcards initialized');
    }

    // Load current card and update UI
    function loadCard() {
        const card = CardManager.getCurrentCard();
        if (card) {
            UIController.updateCardDisplay(card);

            // Update thumbnails
            const cards = CardManager.getCards();
            const currentIndex = CardManager.getCurrentIndex();
            UIController.updateThumbnails(cards, currentIndex);
        } else {
            // No cards available
            UIController.showNotification('No cards available. Try changing filters or adding cards.', 'warning');
        }
    }

    // Set up event listeners
    function setupEventListeners() {
        const elements = UIController.getElements();

        // Navigation buttons
        elements.prevBtn.addEventListener('click', goToPrevCard);
        elements.nextBtn.addEventListener('click', goToNextCard);
        elements.flipBtn.addEventListener('click', flipCurrentCard);
        elements.shuffleBtn.addEventListener('click', shuffleCards);
        elements.resetBtn.addEventListener('click', resetCardOrder);

        // Card click to flip
        elements.card.addEventListener('click', flipCurrentCard);

        // Thumbnail clicks (delegated)
        elements.cardThumbnails.addEventListener('thumbnailClick', function(event) {
            const index = event.detail.index;
            jumpToCard(index);
        });
    }

    // Set up keyboard shortcuts
    function setupKeyboardShortcuts() {
        document.addEventListener('keydown', function(event) {
            // Don't trigger if user is typing in an input field
            if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
                return;
            }

            switch(event.key) {
                case 'ArrowLeft':
                    event.preventDefault();
                    goToPrevCard();
                    break;
                case 'ArrowRight':
                    event.preventDefault();
                    goToNextCard();
                    break;
                case ' ':
                case 'f':
                case 'F':
                    event.preventDefault();
                    flipCurrentCard();
                    break;
                case 's':
                case 'S':
                    event.preventDefault();
                    shuffleCards();
                    break;
                case 'r':
                case 'R':
                    event.preventDefault();
                    resetCardOrder();
                    break;
                case 'Home':
                    event.preventDefault();
                    jumpToCard(0);
                    break;
                case 'End':
                    event.preventDefault();
                    const totalCards = CardManager.getTotalCards();
                    jumpToCard(totalCards - 1);
                    break;
            }
        });
    }

    // Navigation functions
    function goToPrevCard() {
        const card = CardManager.prevCard();
        if (card) {
            UIController.resetCardFlip();
            loadCard();
        }
    }

    function goToNextCard() {
        const card = CardManager.nextCard();
        if (card) {
            UIController.resetCardFlip();
            loadCard();
        }
    }

    function jumpToCard(index) {
        const card = CardManager.jumpToCard(index);
        if (card) {
            UIController.resetCardFlip();
            loadCard();
        }
    }

    function flipCurrentCard() {
        UIController.flipCard();
    }

    function shuffleCards() {
        CardManager.shuffle();
        UIController.resetCardFlip();
        loadCard();
        UIController.showNotification('Cards shuffled!', 'success');
    }

    function resetCardOrder() {
        CardManager.resetOrder();
        UIController.resetCardFlip();
        loadCard();
        UIController.showNotification('Card order reset', 'info');
    }

    // Public API
    return {
        init,
        loadCard,
        goToPrevCard,
        goToNextCard,
        jumpToCard,
        flipCurrentCard,
        shuffleCards,
        resetCardOrder
    };
})();

// ============================================================================
// Initialize on page load
// ============================================================================

document.addEventListener('DOMContentLoaded', function() {
    BiologyFlashcards.init();

    // Add notification styles if not already in CSS
    if (!document.querySelector('style[data-notifications]')) {
        const style = document.createElement('style');
        style.setAttribute('data-notifications', 'true');
        style.textContent = `
            .notification {
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 12px 20px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                z-index: 1000;
                animation: slideIn 0.3s ease;
                max-width: 300px;
            }
            .notification-info {
                background: #2196F3;
            }
            .notification-success {
                background: #4CAF50;
            }
            .notification-warning {
                background: #FF9800;
            }
            .notification-error {
                background: #F44336;
            }
            .notification.fade-out {
                opacity: 0;
                transform: translateX(100px);
                transition: opacity 0.3s, transform 0.3s;
            }
            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateX(100px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        `;
        document.head.appendChild(style);
    }
});

// ============================================================================
// Export modules for debugging (optional)
// ============================================================================

if (typeof window !== 'undefined') {
    window.BiologyFlashcards = BiologyFlashcards;
    window.CardManager = CardManager;
    window.UIController = UIController;
}