script.js

// Navigation active link handling
document.addEventListener('DOMContentLoaded', function() {
    // Set active navigation link based on current page
    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
    const navLinks = document.querySelectorAll('.nav-link');
    
    navLinks.forEach(link => {
        const linkHref = link.getAttribute('href');
        if (linkHref === currentPage || (currentPage === '' && linkHref === 'index.html')) {
            link.classList.add('active');
        } else {
            link.classList.remove('active');
        }
    });

    // Mobile menu toggle
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const navLinksContainer = document.querySelector('.nav-links');
    
    if (mobileMenuToggle && navLinksContainer) {
        mobileMenuToggle.addEventListener('click', function() {
            this.classList.toggle('active');
            navLinksContainer.classList.toggle('active');
        });

        // Close menu when clicking on a link
        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                mobileMenuToggle.classList.remove('active');
                navLinksContainer.classList.remove('active');
            });
        });

        // Close menu when clicking outside
        document.addEventListener('click', function(e) {
            if (!mobileMenuToggle.contains(e.target) && !navLinksContainer.contains(e.target)) {
                mobileMenuToggle.classList.remove('active');
                navLinksContainer.classList.remove('active');
            }
        });
    }

    // Handle notification icon click
    const notificationIcon = document.querySelector('.notification-icon');
    if (notificationIcon) {
        notificationIcon.addEventListener('click', function() {
            showNotification('No new notifications');
        });
    }

    // Handle profile click - redirect to dashboard if logged in
    const userProfile = document.querySelector('.user-profile');
    if (userProfile) {
        userProfile.addEventListener('click', function() {
            const token = localStorage.getItem('token');
            if (token) {
                window.location.href = 'dashboard.html';
            } else {
                window.location.href = 'login.html';
            }
        });
    }

    // Check authentication and update UI
    updateAuthUI();

    // Register Page Functionality (Animal Registration only)
    // Only initialize on animal registration page, not user registration page
    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
    // Check if this is NOT the user registration page
    if (document.getElementById('registerForm') && 
        currentPage === 'register.html' && 
        !window.USER_REGISTRATION_PAGE) {
        initRegisterPage();
    }

    // Identify Page Functionality
    // Use setTimeout to ensure auth-guard has finished
    if (document.getElementById('identifyBtn')) {
        setTimeout(() => {
            // Check if still on identify page (not redirected by auth)
            if (window.location.pathname.includes('identify.html')) {
                initIdentifyPage();
            }
        }, 100);
    }

    // Animals List Page Functionality
    if (document.getElementById('animalsGrid')) {
        initAnimalsListPage();
    }
});

// Authentication Helper Functions
function updateAuthUI() {
    let user = null;
    if (window.localStorageAPI) {
        user = window.localStorageAPI.getCurrentUser();
    } else {
        // Fallback
        const userJson = localStorage.getItem('scanimal_current_user');
        user = userJson ? JSON.parse(userJson) : null;
    }
    
    const authButtons = document.getElementById('authButtons');
    const userMenu = document.getElementById('userMenu');
    const userNameDisplay = document.getElementById('userNameDisplay');

    if (user) {
        // User is logged in
        if (authButtons) authButtons.style.display = 'none';
        if (userMenu) userMenu.style.display = 'flex';
        if (userNameDisplay) userNameDisplay.textContent = user.name;
    } else {
        // User is not logged in
        if (authButtons) authButtons.style.display = 'flex';
        if (userMenu) userMenu.style.display = 'none';
    }
}

function getAuthToken() {
    if (window.localStorageAPI) {
        return localStorage.getItem('scanimal_token');
    }
    return localStorage.getItem('token');
}

function checkAuth() {
    if (window.localStorageAPI) {
        if (!window.localStorageAPI.isAuthenticated()) {
            const currentPage = window.location.pathname.split('/').pop();
            localStorage.setItem('redirectAfterLogin', currentPage);
            window.location.href = 'login.html';
            return false;
        }
        return true;
    }
    // Fallback
    const token = getAuthToken();
    if (!token) {
        const currentPage = window.location.pathname.split('/').pop();
        localStorage.setItem('redirectAfterLogin', currentPage);
        window.location.href = 'login.html';
        return false;
    }
    return true;
}

// Register Page Functions (Animal Registration)
function initRegisterPage() {
    // Check authentication - this is for animal registration page
    if (!checkAuth()) {
        return;
    }

    const form = document.getElementById('registerForm');
    if (!form) {
        console.error('Register form not found');
        return;
    }
    
    const photoInputs = document.querySelectorAll('.photo-input');
    if (photoInputs.length === 0) {
        console.error('Photo inputs not found');
        return;
    }

    // Handle photo uploads and previews
    photoInputs.forEach(input => {
        input.addEventListener('change', function(e) {
            const file = e.target.files[0];
            const photoNum = this.getAttribute('data-photo');
            const preview = document.getElementById(`preview${photoNum}`);
            
            if (file && preview) {
                // Validate file type
                if (!file.type.startsWith('image/')) {
                    alert('Please select an image file');
                    this.value = ''; // Clear input
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    if (preview) {
                        const imageData = e.target.result;
                        preview.src = imageData;
                        preview.classList.add('active');
                        preview.style.display = 'block';
                        preview.style.zIndex = '10';
                        preview.style.position = 'absolute';
                        preview.style.top = '0';
                        preview.style.left = '0';
                        preview.style.width = '100%';
                        preview.style.height = '100%';
                        preview.style.objectFit = 'cover';
                        preview.style.borderRadius = '8px';
                        preview.style.background = 'white';
                        
                        // Hide upload icon and text
                        const label = preview.parentElement;
                        if (label) {
                            const uploadIcon = label.querySelector('.upload-icon');
                            const uploadText = label.querySelector('.upload-text');
                            if (uploadIcon) {
                                uploadIcon.style.display = 'none';
                            }
                            if (uploadText) {
                                uploadText.style.display = 'none';
                            }
                        }
                        
                        // Force reflow to ensure display
                        void preview.offsetHeight;
                        console.log('Image preview displayed for photo', photoNum);
                    } else {
                        console.error('Preview element not found for photo', photoNum);
                    }
                };
                reader.onerror = function() {
                    console.error('Error reading file');
                    alert('Error reading image file. Please try again.');
                };
                reader.readAsDataURL(file);
            }
        });
    });

    // Handle form submission
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // Check authentication
        const token = getAuthToken();
        if (!token) {
            alert('Please login to register an animal.');
            window.location.href = 'login.html';
            return;
        }
        
        // Validate photos
        const photos = [];
        photoInputs.forEach(input => {
            if (input.files.length > 0) {
                photos.push(input.files[0]);
            }
        });

            if (photos.length < 1) {
                const errorDiv = document.createElement('div');
                errorDiv.className = 'error-message';
                errorDiv.textContent = 'Please upload at least 1 photo of the animal.';
                errorDiv.style.cssText = 'display: block; padding: 15px; margin-bottom: 20px; background-color: #ffebee; color: #c62828; border-radius: 5px; border-left: 4px solid #c62828;';
                form.insertBefore(errorDiv, form.firstChild);
                setTimeout(() => errorDiv.remove(), 5000);
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
                return;
            }

        // Show processing message
        const submitBtn = form.querySelector('.btn-generate');
        const originalText = submitBtn.textContent;
        submitBtn.disabled = true;
        submitBtn.textContent = 'Registering animal...';

        // Convert photos to base64
        if (!window.localStorageAPI || !window.localStorageAPI.filesToBase64) {
            alert('System error. Please refresh the page.');
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
            return;
        }
        
        window.localStorageAPI.filesToBase64(photos).then((base64Images) => {
            // Prepare animal data
            const animalTypeEl = document.getElementById('animalType');
            const genderEl = document.getElementById('gender');
            const colorEl = document.getElementById('color');
            
            if (!animalTypeEl || !genderEl || !colorEl) {
                alert('Form error. Please refresh the page.');
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
                return;
            }
            
            const animalData = {
                animalType: animalTypeEl.value,
                breed: document.getElementById('breed')?.value || '',
                gender: genderEl.value,
                color: colorEl.value,
                markings: document.getElementById('markings')?.value || '',
                description: document.getElementById('description')?.value || '',
                images: base64Images
            };

            // Validate required fields
            if (!animalData.animalType || !animalData.gender || !animalData.color) {
                const errorDiv = document.createElement('div');
                errorDiv.className = 'error-message';
                errorDiv.textContent = 'Please fill in all required fields (Animal Type, Gender, Color).';
                errorDiv.style.cssText = 'display: block; padding: 15px; margin-bottom: 20px; background-color: #ffebee; color: #c62828; border-radius: 5px; border-left: 4px solid #c62828;';
                form.insertBefore(errorDiv, form.firstChild);
                setTimeout(() => errorDiv.remove(), 5000);
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
                return;
            }
            
            // Register animal using localStorage API
            if (!window.localStorageAPI.registerAnimal) {
                alert('System error. Please refresh the page.');
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
                return;
            }
            
            const result = window.localStorageAPI.registerAnimal(animalData);

            if (result.success) {
                // Reset button
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
                
                // Show success popup with animal details
                showRegistrationSuccessPopup(result.animal, animalData);
                
                // Reset form
                form.reset();
                photoInputs.forEach(input => {
                    const photoNum = input.getAttribute('data-photo');
                    const preview = document.getElementById(`preview${photoNum}`);
                    if (preview) {
                        preview.src = '';
                        preview.classList.remove('active');
                        preview.style.display = 'none';
                        const label = preview.parentElement;
                        if (label) {
                            const uploadIcon = label.querySelector('.upload-icon');
                            const uploadText = label.querySelector('.upload-text');
                            if (uploadIcon) uploadIcon.style.display = 'block';
                            if (uploadText) uploadText.style.display = 'block';
                        }
                    }
                });
            } else {
                const errorDiv = document.createElement('div');
                errorDiv.className = 'error-message';
                errorDiv.textContent = result.message || 'Failed to register animal. Please try again.';
                errorDiv.style.cssText = 'display: block; padding: 15px; margin-bottom: 20px; background-color: #ffebee; color: #c62828; border-radius: 5px; border-left: 4px solid #c62828;';
                form.insertBefore(errorDiv, form.firstChild);
                setTimeout(() => errorDiv.remove(), 5000);
                submitBtn.disabled = false;
                submitBtn.textContent = originalText;
            }
        }).catch((error) => {
            console.error('Error processing images:', error);
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error-message';
            errorDiv.textContent = 'Error processing images. Please try again.';
            errorDiv.style.cssText = 'display: block; padding: 15px; margin-bottom: 20px; background-color: #ffebee; color: #c62828; border-radius: 5px; border-left: 4px solid #c62828;';
            form.insertBefore(errorDiv, form.firstChild);
            setTimeout(() => errorDiv.remove(), 5000);
            submitBtn.disabled = false;
            submitBtn.textContent = originalText;
        });
    });
}

function generateAnimalID(animalType) {
    const prefix = {
        'cow': 'PK-C',
        'buffalo': 'PK-B',
        'goat': 'PK-G'
    }[animalType] || 'PK-A';
    
    const year = new Date().getFullYear();
    const count = JSON.parse(localStorage.getItem('animals') || '[]').length + 1;
    const idNum = String(count).padStart(4, '0');
    
    return `${prefix}-${idNum}-${year}`;
}

// Extract image features for pattern matching
function extractImageFeatures(imageData, file) {
    // In a real application, this would use AI/ML to extract unique patterns
    // For demo purposes, we'll create a simplified feature vector
    return {
        size: file.size,
        type: file.type,
        timestamp: Date.now(),
        hash: simpleHash(imageData) // Simple hash for pattern matching
    };
}

// Simple hash function for pattern matching
function simpleHash(str) {
    let hash = 0;
    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).toString(16);
}

// Compare image features for pattern matching
function compareImageFeatures(features1, features2) {
    // In real app, this would use advanced AI/ML algorithms
    // For demo, we use simplified comparison
    const sizeSimilarity = Math.abs(features1.size - features2.size) / Math.max(features1.size, features2.size);
    const hashSimilarity = features1.hash === features2.hash ? 1 : 
                          (features1.hash.substring(0, 8) === features2.hash.substring(0, 8) ? 0.7 : 0);
    
    // Combined similarity score (0-1)
    return (hashSimilarity * 0.8) + ((1 - sizeSimilarity) * 0.2);
}

// Identify Page Functions
function initIdentifyPage() {
    console.log('Initializing identify page...');
    
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const startCameraBtn = document.getElementById('startCamera');
    const capturePhotoBtn = document.getElementById('capturePhoto');
    const stopCameraBtn = document.getElementById('stopCamera');
    const uploadImageBtn = document.getElementById('uploadImage');
    const fileInput = document.getElementById('fileInput');
    const clearImageBtn = document.getElementById('clearImage');
    const identifyBtn = document.getElementById('identifyBtn');
    const statusText = document.getElementById('statusText');
    const resultsSection = document.getElementById('resultsSection');
    const previewImg = document.getElementById('previewImg');
    const uploadedPreview = document.getElementById('uploadedImagePreview');
    
    // Check if all required elements exist
    if (!video || !canvas || !startCameraBtn || !uploadImageBtn || !identifyBtn) {
        console.error('Required elements not found on identify page', {
            video: !!video,
            canvas: !!canvas,
            startCameraBtn: !!startCameraBtn,
            uploadImageBtn: !!uploadImageBtn,
            identifyBtn: !!identifyBtn
        });
        return;
    }
    
    console.log('All required elements found, setting up event listeners...');
    
    let stream = null;
    let currentImageData = null;
    let currentImageFeatures = null;
    const ctx = canvas.getContext('2d');

    // Start camera - works on all devices (desktop, mobile, tablet)
    if (startCameraBtn) {
        startCameraBtn.addEventListener('click', async function() {
            console.log('Start camera clicked');
            if (statusText) {
                statusText.textContent = 'Requesting camera access...';
                statusText.style.color = '';
            }
            
            try {
                // First try with back camera preference (for mobile)
                let constraints = { 
                    video: { 
                        facingMode: { ideal: 'environment' }
                    } 
                };
                
                try {
                    stream = await navigator.mediaDevices.getUserMedia(constraints);
                } catch (err1) {
                    // If that fails, try with any camera (for desktop)
                    console.log('Trying with any camera...');
                    constraints = { video: true };
                    stream = await navigator.mediaDevices.getUserMedia(constraints);
                }
                
                if (stream) {
                    video.srcObject = stream;
                    video.style.display = 'block';
                    video.play();
                    canvas.style.display = 'none';
                    if (uploadedPreview) uploadedPreview.style.display = 'none';
                    startCameraBtn.style.display = 'none';
                    if (capturePhotoBtn) capturePhotoBtn.style.display = 'inline-block';
                    if (stopCameraBtn) stopCameraBtn.style.display = 'inline-block';
                    identifyBtn.disabled = true;
                    if (statusText) {
                        statusText.textContent = 'Camera active - Position animal in frame and click Capture Photo';
                        statusText.style.color = '#4CAF50';
                    }
                }
            } catch (err) {
                // If camera fails, suggest using upload (works on all devices)
                if (statusText) {
                    statusText.textContent = 'Camera not available. Please use the "Upload Picture" button instead.';
                    statusText.style.color = '#c62828';
                }
                console.error('Camera error:', err);
                alert('Camera access denied or not available. Please use the "Upload Picture" button to upload an image from your device.');
                // Upload button remains available - it works on all devices
            }
        });
    }

    // Capture photo from camera
    if (capturePhotoBtn) {
        capturePhotoBtn.addEventListener('click', function() {
            if (video && video.videoWidth > 0 && video.videoHeight > 0) {
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                // Clear background image
                canvas.style.backgroundImage = 'none';
                ctx.drawImage(video, 0, 0);
                
                // Convert canvas to image data
                currentImageData = canvas.toDataURL('image/jpeg');
                
                // Create a file-like object for feature extraction
                const blob = dataURLtoBlob(currentImageData);
                const file = new File([blob], 'captured-photo.jpg', { type: 'image/jpeg' });
                currentImageFeatures = extractImageFeatures(currentImageData, file);
                
                // Display captured image
                if (previewImg) previewImg.src = currentImageData;
                if (uploadedPreview) uploadedPreview.style.display = 'block';
                if (video) video.style.display = 'none';
                if (canvas) canvas.style.display = 'none';
                
                // Enable identify button
                identifyBtn.disabled = false;
                if (clearImageBtn) clearImageBtn.style.display = 'inline-block';
                capturePhotoBtn.style.display = 'none';
                if (statusText) {
                    statusText.textContent = 'Photo captured - Ready to identify';
                    statusText.style.color = '';
                }
            }
        });
    }

    // Helper function to convert data URL to blob
    function dataURLtoBlob(dataurl) {
        const arr = dataurl.split(',');
        const mime = arr[0].match(/:(.*?);/)[1];
        const bstr = atob(arr[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while(n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    }

    // Stop camera
    if (stopCameraBtn) {
        stopCameraBtn.addEventListener('click', function() {
            if (stream) {
                stream.getTracks().forEach(track => track.stop());
                stream = null;
            }
            if (video) video.style.display = 'none';
            if (canvas) {
                canvas.style.display = 'block';
                canvas.style.backgroundImage = "url('/assets/pattern-img.png')";
                canvas.style.backgroundSize = 'cover';
                canvas.style.backgroundPosition = 'center';
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            if (uploadedPreview) uploadedPreview.style.display = 'none';
            if (startCameraBtn) startCameraBtn.style.display = 'inline-block';
            if (capturePhotoBtn) capturePhotoBtn.style.display = 'none';
            stopCameraBtn.style.display = 'none';
            identifyBtn.disabled = true;
            if (statusText) {
                statusText.textContent = 'Upload or capture an image to begin identification...';
                statusText.style.color = '';
            }
        });
    }

    // Upload image
    if (uploadImageBtn && fileInput) {
        uploadImageBtn.addEventListener('click', function() {
            console.log('Upload image clicked');
            fileInput.click();
        });
    }

    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            // Validate file type
            if (!file.type.startsWith('image/')) {
                if (statusText) {
                    statusText.textContent = 'Please select an image file (jpg, png, etc.)';
                    statusText.style.color = '#c62828';
                }
                fileInput.value = ''; // Clear input
                return;
            }
            
            // Validate file size (max 10MB)
            if (file.size > 10 * 1024 * 1024) {
                if (statusText) {
                    statusText.textContent = 'Image file is too large. Please use an image smaller than 10MB.';
                    statusText.style.color = '#c62828';
                }
                fileInput.value = ''; // Clear input
                return;
            }
            
            const reader = new FileReader();
            reader.onload = function(e) {
                currentImageData = e.target.result;
                currentImageFeatures = extractImageFeatures(currentImageData, file);
                
                // Display image
                if (previewImg) previewImg.src = currentImageData;
                if (uploadedPreview) uploadedPreview.style.display = 'block';
                if (canvas) {
                    canvas.style.display = 'none';
                    canvas.style.backgroundImage = 'none';
                }
                if (video) video.style.display = 'none';
                
                // Stop camera if running
                if (stream) {
                    stream.getTracks().forEach(track => track.stop());
                    stream = null;
                }
                
                // Enable identify button
                identifyBtn.disabled = false;
                if (clearImageBtn) clearImageBtn.style.display = 'inline-block';
                if (statusText) {
                    statusText.textContent = 'Image loaded - Ready to identify';
                    statusText.style.color = '';
                }
            };
            reader.onerror = function() {
                if (statusText) {
                    statusText.textContent = 'Error reading image file. Please try again.';
                    statusText.style.color = '#c62828';
                }
            };
            reader.readAsDataURL(file);
        }
    });

    // Clear image
    // Clear image button
    if (clearImageBtn) {
        clearImageBtn.addEventListener('click', function() {
            currentImageData = null;
            currentImageFeatures = null;
            if (previewImg) previewImg.src = '';
            if (uploadedPreview) uploadedPreview.style.display = 'none';
            if (canvas) {
                canvas.style.display = 'block';
                canvas.style.backgroundImage = "url('/assets/pattern-img.png')";
                canvas.style.backgroundSize = 'cover';
                canvas.style.backgroundPosition = 'center';
                // Clear canvas content
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            identifyBtn.disabled = true;
            clearImageBtn.style.display = 'none';
            if (resultsSection) resultsSection.style.display = 'none';
            if (statusText) {
                statusText.textContent = 'Upload or capture an image to begin identification...';
                statusText.style.color = '';
            }
            if (fileInput) fileInput.value = '';
        });
    }

    // Identify animal using pattern matching
    if (identifyBtn) {
        identifyBtn.addEventListener('click', async function() {
            console.log('Identify button clicked');
            if (!currentImageFeatures) {
                if (statusText) {
                    statusText.textContent = 'Please upload or capture an image first.';
                    statusText.style.color = '#c62828';
                }
                return;
            }

            identifyBtn.disabled = true;
            if (statusText) statusText.textContent = 'Analyzing image patterns...';
        
        // Pattern matching process using localStorage API
        setTimeout(() => {
            if (!window.localStorageAPI) {
                showNoMatchResults('System error. Please refresh the page.');
                identifyBtn.disabled = false;
                return;
            }
            
            const animals = window.localStorageAPI.getAnimals();
            
            if (animals.length === 0) {
                showNoMatchResults('No animals registered in database. Please register animals first.');
                identifyBtn.disabled = false;
                return;
            }

            // Pattern matching: Compare uploaded image with registered animal photos
            let bestMatch = null;
            let bestMatchScore = 0;
            const matchThreshold = 0.5; // 50% similarity threshold (lowered for better matching)

            animals.forEach(animal => {
                if (animal.images && animal.images.length > 0) {
                    // Compare with each image
                    animal.images.forEach(imageData => {
                        try {
                            // Extract features from stored base64 image
                            const file = new File([], 'stored-image.jpg', { type: 'image/jpeg' });
                            const storedFeatures = extractImageFeatures(imageData, file);
                            const similarity = compareImageFeatures(currentImageFeatures, storedFeatures);
                            if (similarity > bestMatchScore) {
                                bestMatchScore = similarity;
                                bestMatch = animal;
                            }
                        } catch (error) {
                            console.error('Error comparing images:', error);
                        }
                    });
                }
            });

            // Check if match is above threshold
            if (bestMatch && bestMatchScore >= matchThreshold) {
                showMatchResults(bestMatch, bestMatchScore);
            } else {
                showNoMatchResults(null, bestMatchScore);
            }
            
            identifyBtn.disabled = false;
        }, 1500);
    });

    function showMatchResults(animal, confidence) {
        if (!statusText || !resultsSection) {
            console.error('Status text or results section not found');
            return;
        }
        
        statusText.textContent = `Animal identified! (${Math.round(confidence * 100)}% confidence)`;
        statusText.style.color = '#4CAF50';
        resultsSection.style.display = 'block';
        
        // Get animal image (use first image if available - base64 from localStorage)
        const animalImage = animal.images && animal.images.length > 0 ? animal.images[0] : '';
        const imageDisplay = animalImage ? 
            `<img src="${animalImage}" alt="Animal photo" class="match-animal-image" style="max-width: 100%; border-radius: 10px; border: 3px solid #4CAF50;">` : 
            `<div class="match-animal-placeholder">${getEmojiForType(animal.animalType)}</div>`;
        
        resultsSection.innerHTML = `
            <div class="match-result-container">
                <div style="background: #e8f5e9; padding: 20px; border-radius: 10px; margin-bottom: 20px; text-align: center;">
                    <h3 style="color: #4CAF50; margin-bottom: 10px;">Your Animal Details Are Here</h3>
                    <p style="color: #666;">Animal ID: <strong style="color: #4CAF50; font-size: 18px;">${animal.animalId || animal._id}</strong></p>
                </div>
                
                <div class="match-result-header">
                    <h2 class="match-found-title">✅ Match Found!</h2>
                    <span class="confidence-badge">${Math.round(confidence * 100)}% Match</span>
                </div>
                
                <div class="match-result-card">
                    <div class="match-animal-image-container">
                        ${imageDisplay}
                    </div>
                    
                    <div class="match-status-banner">
                        <span class="match-status-text">Match Found!</span>
                    </div>
                    
                    <div class="match-details-grid">
                        <div class="match-detail-item">
                            <span class="detail-label">Animal ID</span>
                            <span class="detail-value">${animal.animalId || animal._id}</span>
                        </div>
                        <div class="match-detail-item">
                            <span class="detail-label">Type</span>
                            <span class="detail-value">${animal.animalType.charAt(0).toUpperCase() + animal.animalType.slice(1)}</span>
                        </div>
                        <div class="match-detail-item">
                            <span class="detail-label">Gender</span>
                            <span class="detail-value">${animal.gender.charAt(0).toUpperCase() + animal.gender.slice(1)}</span>
                        </div>
                        ${animal.breed ? `
                        <div class="match-detail-item">
                            <span class="detail-label">Breed</span>
                            <span class="detail-value">${animal.breed}</span>
                        </div>
                        ` : ''}
                        ${animal.color ? `
                        <div class="match-detail-item">
                            <span class="detail-label">Color</span>
                            <span class="detail-value">${animal.color}</span>
                        </div>
                        ` : ''}
                        <div class="match-detail-item">
                            <span class="detail-label">Owner</span>
                            <span class="detail-value">${animal.ownerId?.name || 'Unknown'}</span>
                        </div>
                        ${animal.markings ? `
                        <div class="match-detail-item" style="grid-column: 1 / -1;">
                            <span class="detail-label">Markings</span>
                            <span class="detail-value">${animal.markings}</span>
                        </div>
                        ` : ''}
                        <div class="match-detail-item">
                            <span class="detail-label">Registered</span>
                            <span class="detail-value">${new Date(animal.registeredAt).toLocaleDateString()}</span>
                        </div>
                    </div>
                    
                    <div class="verification-status">
                        <svg class="verified-icon" viewBox="0 0 24 24" fill="none">
                            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
                        </svg>
                        <span>Owner Verified</span>
                    </div>
                    
                    <div class="match-action-button">
                        <button onclick="window.searchAnimalById('${animal.animalId || animal._id}')" class="btn btn-primary btn-view-profile">View Full Details</button>
                    </div>
                </div>
                
                <div class="match-result-actions">
                    <button onclick="if(document.getElementById('clearImage')) document.getElementById('clearImage').click()" class="btn btn-secondary">Identify Another</button>
                </div>
            </div>
        `;
        
        identifyBtn.disabled = false;
    }
    
    function getEmojiForType(type) {
        const emojis = {
            'cow': '🐄',
            'buffalo': '🐃',
            'goat': '🐐'
        };
        return emojis[type] || '🐾';
    }

    function showNoMatchResults(customMessage, confidence) {
        statusText.textContent = 'No match found';
        resultsSection.style.display = 'block';
        
        let message = customMessage || 'No matching animal found in the database.';
        if (confidence !== undefined && confidence > 0) {
            message += ` Best match confidence was only ${Math.round(confidence * 100)}% (requires 60%+).`;
        }

        resultsSection.innerHTML = `
            <h2>✗ Animal Not Identified</h2>
            <div class="no-match-results">
                <div class="no-match-icon">⚠️</div>
                <p class="no-match-message">${message}</p>
                
                <div class="guidance-box">
                    <h3>What to do next:</h3>
                    <ul class="guidance-list">
                        <li>Ensure the photo is clear and shows the animal's face/nose clearly</li>
                        <li>Check that the animal is registered in the system</li>
                        <li>Try taking the photo from a different angle or with better lighting</li>
                        <li>Make sure there are no obstructions blocking the animal's face</li>
                        <li>If this is a new animal, <a href="register.html">register it first</a></li>
                    </ul>
                </div>

                <div class="photo-tips-box">
                    <h3>Photo Quality Tips:</h3>
                    <div class="tips-grid">
                        <div class="tip-item">
                            <strong>✓ Good:</strong> Clear, well-lit, focused on face
                        </div>
                        <div class="tip-item">
                            <strong>✗ Avoid:</strong> Blurry, too far, poor lighting
                        </div>
                        <div class="tip-item">
                            <strong>✓ Good:</strong> Face fills most of the frame
                        </div>
                        <div class="tip-item">
                            <strong>✗ Avoid:</strong> Obstructions, other animals in frame
                        </div>
                    </div>
                </div>

                <div class="no-match-actions">
                    <a href="register.html" class="btn btn-primary">Register New Animal</a>
                    <button onclick="document.getElementById('clearImage').click()" class="btn btn-secondary">Try Again</button>
                </div>
            </div>
        `;
            identifyBtn.disabled = false;
        });
    }
    
    // Search by Animal ID functionality
    const searchAnimalIdInput = document.getElementById('searchAnimalId');
    const searchByIdBtn = document.getElementById('searchByIdBtn');
    
    if (searchByIdBtn && searchAnimalIdInput) {
        searchByIdBtn.addEventListener('click', function() {
            const animalId = searchAnimalIdInput.value.trim();
            if (animalId) {
                window.searchAnimalById(animalId);
            } else {
                if (statusText) {
                    statusText.textContent = 'Please enter an Animal ID';
                    statusText.style.color = '#c62828';
                }
            }
        });
        
        // Allow Enter key to search
        searchAnimalIdInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchByIdBtn.click();
            }
        });
    }
    
    console.log('Identify page initialized successfully');
}

// Animals List Page Functions
function initAnimalsListPage() {
    const searchInput = document.getElementById('searchInput');
    const filterSelect = document.getElementById('filterType');
    const animalsGrid = document.getElementById('animalsGrid');
    const emptyState = document.getElementById('emptyState');
    
    if (!animalsGrid) {
        console.error('Animals grid not found');
        return;
    }

    let allAnimals = [];

    // Load animals from localStorage
    function loadAnimals() {
        if (window.localStorageAPI) {
            allAnimals = window.localStorageAPI.getAnimals();
            console.log('Loaded animals from localStorage:', allAnimals.length);
            if (allAnimals.length === 0) {
                console.log('No animals found in localStorage');
                showEmptyState();
            } else {
                displayAnimals();
            }
        } else {
            console.error('localStorage API not loaded');
            showEmptyState();
        }
    }

    // Display animals with filters
    function displayAnimals() {
        const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
        const filterType = filterSelect ? filterSelect.value : '';

        let filteredAnimals = [...allAnimals];

        // Filter by search term
        if (searchTerm) {
            filteredAnimals = filteredAnimals.filter(animal => {
                const animalId = animal.animalId || animal._id;
                const ownerName = animal.ownerId?.name || '';
                return animalId.toLowerCase().includes(searchTerm) ||
                       ownerName.toLowerCase().includes(searchTerm) ||
                       (animal.animalType && animal.animalType.toLowerCase().includes(searchTerm));
            });
        }

        // Filter by type
        if (filterType) {
            filteredAnimals = filteredAnimals.filter(animal => animal.animalType === filterType);
        }

        // Display animals
        if (filteredAnimals.length === 0) {
            showEmptyState();
        } else {
            if (animalsGrid) {
                animalsGrid.style.display = 'grid';
                animalsGrid.innerHTML = filteredAnimals.map(animal => createAnimalCard(animal)).join('');
            }
            if (emptyState) emptyState.style.display = 'none';
            console.log('Displayed', filteredAnimals.length, 'animals');
        }
    }

    function showEmptyState() {
        animalsGrid.style.display = 'none';
        if (emptyState) emptyState.style.display = 'block';
    }

    // Create animal card HTML with full details
    function createAnimalCard(animal) {
        const animalId = animal.animalId || animal._id;
        // Use base64 image from localStorage
        const imageUrl = animal.images && animal.images.length > 0 ? animal.images[0] : '';
        
        return `
            <div class="animal-card">
                <div class="animal-image" style="${imageUrl ? `background-image: url('${imageUrl}'); background-size: cover; background-position: center;` : `background: linear-gradient(135deg, #${getColorForType(animal.animalType)}, #${getColorForType(animal.animalType, true)}); display: flex; align-items: center; justify-content: center; color: white; font-size: 48px;`}">
                    ${!imageUrl ? getEmojiForType(animal.animalType) : ''}
                </div>
                <div class="animal-card-content">
                    <div class="animal-id" style="font-weight: bold; color: #4CAF50; font-size: 16px;">${animalId}</div>
                    <div class="animal-type" style="font-size: 18px; margin: 8px 0;">${animal.animalType ? animal.animalType.charAt(0).toUpperCase() + animal.animalType.slice(1) : 'Unknown'}</div>
                    <div style="display: grid; gap: 8px; margin: 15px 0; font-size: 14px; color: #666;">
                        <div><strong>Gender:</strong> ${animal.gender ? animal.gender.charAt(0).toUpperCase() + animal.gender.slice(1) : 'N/A'}</div>
                        ${animal.breed ? `<div><strong>Breed:</strong> ${animal.breed}</div>` : ''}
                        ${animal.color ? `<div><strong>Color:</strong> ${animal.color}</div>` : ''}
                        <div><strong>Owner:</strong> ${animal.ownerId?.name || 'Unknown'}</div>
                        <div><strong>Registered:</strong> ${new Date(animal.registeredAt).toLocaleDateString()}</div>
                    </div>
                    <div class="animal-card-actions">
                        <button class="btn-view-details" onclick="window.viewAnimalDetails('${animal._id}')">View Full Details</button>
                    </div>
                </div>
            </div>
        `;
    }

    function getEmojiForType(type) {
        const emojis = {
            'cow': '🐄',
            'buffalo': '🐃',
            'goat': '🐐',
            'other': '🐾'
        };
        return emojis[type] || '🐾';
    }

    function getColorForType(type, dark = false) {
        const colors = {
            'cow': dark ? '8B4513' : 'DEB887',
            'buffalo': dark ? '2F2F2F' : '696969',
            'goat': dark ? '8B7355' : 'D2B48C',
            'other': dark ? '666666' : 'CCCCCC'
        };
        return colors[type] || 'CCCCCC';
    }

    // Event listeners
    if (searchInput) {
        searchInput.addEventListener('input', displayAnimals);
    }
    if (filterSelect) {
        filterSelect.addEventListener('change', displayAnimals);
    }

    // Initial load
    loadAnimals();
}

// View animal details - Make it globally accessible
window.viewAnimalDetails = function(animalId) {
    if (!window.localStorageAPI) {
        alert('System error. Please refresh the page.');
        return;
    }
    
    const animal = window.localStorageAPI.getAnimalById(animalId);
    if (animal) {
        showAnimalDetailsPopup(animal);
    } else {
        // Try finding by _id if getAnimalById didn't work
        const animals = window.localStorageAPI.getAnimals();
        const foundAnimal = animals.find(a => a._id === animalId);
        if (foundAnimal) {
            showAnimalDetailsPopup(foundAnimal);
        } else {
            alert('Animal not found');
        }
    }
};

// Search animal by ID - Make it globally accessible
window.searchAnimalById = function(animalId) {
    if (!window.localStorageAPI) {
        alert('System error. Please refresh the page.');
        return;
    }
    
    if (!animalId || animalId.trim() === '') {
        alert('Please enter an Animal ID');
        return;
    }
    
    const animals = window.localStorageAPI.getAnimals();
    const animal = animals.find(a => 
        (a.animalId && a.animalId.toString().toLowerCase() === animalId.toString().toLowerCase()) || 
        (a._id && a._id.toString().toLowerCase() === animalId.toString().toLowerCase())
    );
    
    if (animal) {
        showAnimalDetailsPopup(animal);
    } else {
        // Show error message in a better way
        const errorMsg = document.createElement('div');
        errorMsg.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: #f44336;
            color: white;
            padding: 15px 20px;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            z-index: 10001;
            animation: slideIn 0.3s ease;
        `;
        errorMsg.textContent = `Animal not found with ID: ${animalId}`;
        document.body.appendChild(errorMsg);
        
        setTimeout(() => {
            errorMsg.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => errorMsg.remove(), 300);
        }, 3000);
    }
};

// Show animal details popup
function showAnimalDetailsPopup(animal) {
    // Create popup overlay
    const overlay = document.createElement('div');
    overlay.className = 'popup-overlay';
    overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    `;
    
    // Create popup content
    const popup = document.createElement('div');
    popup.className = 'animal-details-popup';
    popup.style.cssText = `
        background: white;
        border-radius: 15px;
        padding: 40px;
        max-width: 700px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease;
        position: relative;
    `;
    
    // Animal images gallery
    const imagesHTML = animal.images && animal.images.length > 0 ? `
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 25px;">
            ${animal.images.map(img => `
                <img src="${img}" alt="Animal photo" style="width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 2px solid #e0e0e0;">
            `).join('')}
        </div>
    ` : '';
    
    popup.innerHTML = `
        <div style="text-align: center; margin-bottom: 30px;">
            <h2 style="color: #333; margin-bottom: 10px; font-size: 28px;">Animal Details</h2>
            <p style="color: #666; font-size: 16px;">Animal ID: <strong style="color: #4CAF50; font-size: 20px;">${animal.animalId || animal._id}</strong></p>
        </div>
        
        ${imagesHTML}
        
        <div style="background: #f8f9fa; padding: 25px; border-radius: 10px; margin-bottom: 25px;">
            <h3 style="color: #333; margin-bottom: 20px; font-size: 20px; border-bottom: 2px solid #4CAF50; padding-bottom: 10px;">Complete Information</h3>
            <div style="display: grid; gap: 15px;">
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Animal ID:</strong>
                    <span style="color: #4CAF50; font-weight: bold; font-size: 16px;">${animal.animalId || animal._id}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Type:</strong>
                    <span style="color: #333;">${animal.animalType.charAt(0).toUpperCase() + animal.animalType.slice(1)}</span>
                </div>
                ${animal.breed ? `
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Breed:</strong>
                    <span style="color: #333;">${animal.breed}</span>
                </div>
                ` : ''}
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Gender:</strong>
                    <span style="color: #333;">${animal.gender.charAt(0).toUpperCase() + animal.gender.slice(1)}</span>
                </div>
                ${animal.color ? `
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Color:</strong>
                    <span style="color: #333;">${animal.color}</span>
                </div>
                ` : ''}
                ${animal.markings ? `
                <div style="padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Markings/Description:</strong>
                    <p style="color: #333; margin-top: 8px;">${animal.markings}</p>
                </div>
                ` : ''}
                ${animal.description ? `
                <div style="padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Additional Notes:</strong>
                    <p style="color: #333; margin-top: 8px;">${animal.description}</p>
                </div>
                ` : ''}
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Owner Name:</strong>
                    <span style="color: #333;">${animal.ownerId?.name || 'Unknown'}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Owner Email:</strong>
                    <span style="color: #333;">${animal.ownerId?.email || 'N/A'}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Registered Date:</strong>
                    <span style="color: #333;">${new Date(animal.registeredAt).toLocaleDateString()}</span>
                </div>
            </div>
        </div>
        
        <div style="display: flex; gap: 15px; justify-content: center;">
            <button id="closeDetailsBtn" class="btn btn-secondary" style="padding: 12px 30px;">Close</button>
        </div>
    `;
    
    overlay.appendChild(popup);
    document.body.appendChild(overlay);
    
    // Close popup handler
    document.getElementById('closeDetailsBtn').addEventListener('click', () => {
        overlay.style.animation = 'fadeOut 0.3s ease';
        setTimeout(() => overlay.remove(), 300);
    });
    
    // Close on overlay click
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
            overlay.style.animation = 'fadeOut 0.3s ease';
            setTimeout(() => overlay.remove(), 300);
        }
    });
}

// Show registration success popup
function showRegistrationSuccessPopup(animal, animalData) {
    // Create popup overlay
    const overlay = document.createElement('div');
    overlay.className = 'popup-overlay';
    overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.3s ease;
    `;
    
    // Create popup content
    const popup = document.createElement('div');
    popup.className = 'registration-success-popup';
    popup.style.cssText = `
        background: white;
        border-radius: 15px;
        padding: 40px;
        max-width: 600px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease;
        position: relative;
    `;
    
    // Animal image preview
    const animalImage = animal.images && animal.images.length > 0 ? animal.images[0] : '';
    const imageDisplay = animalImage ? 
        `<div style="text-align: center; margin-bottom: 20px;">
            <img src="${animalImage}" alt="Animal" style="max-width: 200px; max-height: 200px; border-radius: 10px; border: 3px solid #4CAF50;">
        </div>` : '';
    
    popup.innerHTML = `
        <div style="text-align: center; margin-bottom: 30px; background: linear-gradient(135deg, #2d5016 0%, #4a7c2a 100%); padding: 30px; border-radius: 15px; color: white;">
            <div style="width: 100px; height: 100px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 4px solid white;">
                <svg style="width: 60px; height: 60px; color: white;" viewBox="0 0 24 24" fill="none">
                    <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor"/>
                </svg>
            </div>
            <h2 style="color: white; margin-bottom: 10px; font-size: 32px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">Animal Registered Successfully!</h2>
            <p style="color: rgba(255, 255, 255, 0.95); font-size: 18px; font-weight: 500;">Your animal has been registered in the secure system</p>
        </div>
        
        ${imageDisplay}
        
        <div style="background: linear-gradient(135deg, #f0f8f0 0%, #ffffff 100%); padding: 25px; border-radius: 10px; margin-bottom: 25px; border: 2px solid #4a7c2a;">
            <h3 style="color: #2d5016; margin-bottom: 20px; font-size: 22px; border-bottom: 3px solid #4a7c2a; padding-bottom: 10px; font-weight: bold;">Animal Details</h3>
            <div style="display: grid; gap: 15px;">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; background: white; border-radius: 8px; border-left: 4px solid #4a7c2a; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                    <strong style="color: #2d5016; font-size: 16px;">Unique Animal ID:</strong>
                    <span style="color: #2d5016; font-weight: bold; font-size: 20px; background: linear-gradient(135deg, #4a7c2a 0%, #6ba644 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">${animal.animalId}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                    <strong style="color: #2d5016;">Type:</strong>
                    <span style="color: #333; font-weight: 500;">${animal.animalType.charAt(0).toUpperCase() + animal.animalType.slice(1)}</span>
                </div>
                <div style="display: flex; justify-content: space-between; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
                    <strong style="color: #2d5016;">Gender:</strong>
                    <span style="color: #333; font-weight: 500;">${animal.gender.charAt(0).toUpperCase() + animal.gender.slice(1)}</span>
                </div>
                ${animal.breed ? `
                <div style="display: flex; justify-content: space-between; padding: 10px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Breed:</strong>
                    <span style="color: #333;">${animal.breed}</span>
                </div>
                ` : ''}
                ${animal.color ? `
                <div style="display: flex; justify-content: space-between; padding: 10px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Color:</strong>
                    <span style="color: #333;">${animal.color}</span>
                </div>
                ` : ''}
                ${animal.markings ? `
                <div style="padding: 10px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Markings:</strong>
                    <p style="color: #333; margin-top: 5px;">${animal.markings}</p>
                </div>
                ` : ''}
                <div style="display: flex; justify-content: space-between; padding: 10px; background: white; border-radius: 5px;">
                    <strong style="color: #666;">Registered:</strong>
                    <span style="color: #333;">${new Date(animal.registeredAt).toLocaleDateString()}</span>
                </div>
            </div>
        </div>
        
        <div style="display: flex; gap: 15px; justify-content: center;">
            <button id="viewAnimalsBtn" class="btn btn-primary" style="padding: 12px 30px;">View in Animals List</button>
            <button id="closePopupBtn" class="btn btn-secondary" style="padding: 12px 30px;">Close</button>
        </div>
    `;
    
    overlay.appendChild(popup);
    document.body.appendChild(overlay);
    
    // Close popup handlers - use setTimeout to ensure DOM is ready
    setTimeout(() => {
        const closeBtn = document.getElementById('closePopupBtn');
        const viewBtn = document.getElementById('viewAnimalsBtn');
        
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                overlay.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => overlay.remove(), 300);
            });
        }
        
        if (viewBtn) {
            viewBtn.addEventListener('click', () => {
                overlay.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => {
                    overlay.remove();
                    // Update statistics before redirecting
                    if (window.location.pathname.includes('index.html') || window.location.pathname === '/') {
                        if (typeof updateHomePageStatistics === 'function') {
                            updateHomePageStatistics();
                        }
                    }
                    window.location.href = 'animals-list.html';
                }, 300);
            });
        }
        
        // Close on overlay click
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                overlay.style.animation = 'fadeOut 0.3s ease';
                setTimeout(() => overlay.remove(), 300);
            }
        });
    }, 100);
}

// Update homepage statistics
function updateHomePageStatistics() {
    if (window.localStorageAPI) {
        const animals = window.localStorageAPI.getAnimals();
        const users = window.localStorageAPI.getUsers();
        
        const animalsCountEl = document.getElementById('totalAnimalsCount');
        const usersCountEl = document.getElementById('totalUsersCount');
        
        if (animalsCountEl) animalsCountEl.textContent = animals.length.toLocaleString();
        if (usersCountEl) usersCountEl.textContent = users.length.toLocaleString();
    }
}

// Add CSS animations for popup
if (!document.getElementById('popup-animations')) {
    const popupStyle = document.createElement('style');
    popupStyle.id = 'popup-animations';
    popupStyle.textContent = `
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        @keyframes slideUp {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    `;
    document.head.appendChild(popupStyle);
}

// Initialize auth UI on page load
updateAuthUI();

// Show notification
function showNotification(message) {
    // Create notification element
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 80px;
        right: 20px;
        background: #4CAF50;
        color: white;
        padding: 15px 20px;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        animation: slideIn 0.3s ease;
    `;
    notification.textContent = message;
    document.body.appendChild(notification);

    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// Add CSS animations
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);