console.log('[SCRIPT VERSION] 20250529-005 - Added CSS cache busting for consistent styling across domains');
console.log('[DEBUG] script.js loaded and running');

// alert('script.js loaded!'); // Remove alert after confirming script loads

// Global variables
let warranties = [];
let warrantiesLoaded = false; // Track if warranties have been loaded from API
let currentTabIndex = 0;
let tabContents = []; // Initialize as empty array
let editMode = false;
let currentWarrantyId = null;
let userPreferencePrefix = null; // <<< ADDED GLOBAL PREFIX VARIABLE
let isGlobalView = false; // Track if admin is viewing all users' warranties
let currentFilters = {
    status: 'all',
    tag: 'all',
    search: '',
    sortBy: 'expiration',
    vendor: 'all', // Added vendor filter
    warranty_type: 'all' // Added warranty type filter
};

// Tag related variables
let allTags = [];
let selectedTags = []; // Will hold objects with id, name, color

// Global variable for edit mode tags
let editSelectedTags = [];

// DOM Elements
const warrantyForm = document.getElementById('warrantyForm');
const settingsBtn = document.getElementById('settingsBtn');
const settingsMenu = document.getElementById('settingsMenu');
const darkModeToggle = document.getElementById('darkModeToggle');
const warrantiesList = document.getElementById('warrantiesList');
const refreshBtn = document.getElementById('refreshBtn');
const searchInput = document.getElementById('searchWarranties');
const clearSearchBtn = document.getElementById('clearSearch');
const statusFilter = document.getElementById('statusFilter');
const sortBySelect = document.getElementById('sortBy');
const vendorFilter = document.getElementById('vendorFilter'); // Added vendor filter select
const warrantyTypeFilter = document.getElementById('warrantyTypeFilter'); // Added warranty type filter select
const exportBtn = document.getElementById('exportBtn');
const gridViewBtn = document.getElementById('gridViewBtn');
const listViewBtn = document.getElementById('listViewBtn');
const tableViewBtn = document.getElementById('tableViewBtn');
const tableViewHeader = document.querySelector('.table-view-header');

// Admin view controls
const adminViewSwitcher = document.getElementById('adminViewSwitcher');
const personalViewBtn = document.getElementById('personalViewBtn');
const globalViewBtn = document.getElementById('globalViewBtn');
const warrantiesPanelTitle = document.getElementById('warrantiesPanelTitle');
const fileInput = document.getElementById('invoice');
const fileName = document.getElementById('fileName');
const manualInput = document.getElementById('manual');
const manualFileName = document.getElementById('manualFileName');
const otherDocumentInput = document.getElementById('otherDocument'); 
const otherDocumentFileName = document.getElementById('otherDocumentFileName'); 
const editModal = document.getElementById('editModal');
const deleteModal = document.getElementById('deleteModal');
const editWarrantyForm = document.getElementById('editWarrantyForm');
const saveWarrantyBtn = document.getElementById('saveWarrantyBtn');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
const loadingContainer = document.getElementById('loadingContainer');
const toastContainer = document.getElementById('toastContainer');

// CSV Import Elements
const importBtn = document.getElementById('importBtn');
const csvFileInput = document.getElementById('csvFileInput');
if (importBtn) {
    importBtn.classList.remove('import-btn');
    importBtn.classList.add('export-btn');
}

// Tag DOM Elements
const selectedTagsContainer = document.getElementById('selectedTags');
const tagSearch = document.getElementById('tagSearch');
const tagsList = document.getElementById('tagsList');
const manageTagsBtn = document.getElementById('manageTagsBtn');
const tagManagementModal = document.getElementById('tagManagementModal');
const newTagForm = document.getElementById('newTagForm');
const existingTagsContainer = document.getElementById('existingTags');

// --- Add near other DOM Element declarations ---
const isLifetimeCheckbox = document.getElementById('isLifetime');
const warrantyDurationFields = document.getElementById('warrantyDurationFields'); // New container
const warrantyDurationYearsInput = document.getElementById('warrantyDurationYears');
const warrantyDurationMonthsInput = document.getElementById('warrantyDurationMonths');
const warrantyDurationDaysInput = document.getElementById('warrantyDurationDays');

const editIsLifetimeCheckbox = document.getElementById('editIsLifetime');
const editWarrantyDurationFields = document.getElementById('editWarrantyDurationFields'); // New container
const editWarrantyDurationYearsInput = document.getElementById('editWarrantyDurationYears');
const editWarrantyDurationMonthsInput = document.getElementById('editWarrantyDurationMonths');
const editWarrantyDurationDaysInput = document.getElementById('editWarrantyDurationDays');

// Warranty Type DOM Elements
const warrantyTypeInput = document.getElementById('warrantyType');
const warrantyTypeCustomInput = document.getElementById('warrantyTypeCustom');
const editWarrantyTypeInput = document.getElementById('editWarrantyType');
const editWarrantyTypeCustomInput = document.getElementById('editWarrantyTypeCustom');

// Warranty method selection elements
const durationMethodRadio = document.getElementById('durationMethod');
const exactDateMethodRadio = document.getElementById('exactDateMethod');
const exactExpirationField = document.getElementById('exactExpirationField');
const exactExpirationDateInput = document.getElementById('exactExpirationDate');

const editDurationMethodRadio = document.getElementById('editDurationMethod');
const editExactDateMethodRadio = document.getElementById('editExactDateMethod');
const editExactExpirationField = document.getElementById('editExactExpirationField');
const editExactExpirationDateInput = document.getElementById('editExactExpirationDate');

// Add near other DOM Element declarations
const showAddWarrantyBtn = document.getElementById('showAddWarrantyBtn');
const addWarrantyModal = document.getElementById('addWarrantyModal');

// Currency dropdown elements
const currencySelect = document.getElementById('currency');
const editCurrencySelect = document.getElementById('editCurrency');
const serialNumbersContainer = document.getElementById('serialNumbersContainer'); // Ensure this is defined

/**
 * Get current user type (admin or user)
 * @returns {string} 'admin' or 'user'
 */
function getUserType() {
    try {
        const userInfo = JSON.parse(localStorage.getItem('user_info') || '{}');
        return userInfo.is_admin === true ? 'admin' : 'user';
    } catch (e) {
        console.error('Error determining user type:', e);
        return 'user'; // Default to user if we can't determine
    }
}

/**
 * Initialize view controls for all authenticated users
 */
async function initViewControls() {
    // Check if global view is enabled
    try {
        const response = await fetch('/api/settings/global-view-status', {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + (window.auth ? window.auth.getToken() : localStorage.getItem('auth_token')),
                'Content-Type': 'application/json'
            }
        });
        
        if (response.ok) {
            const result = await response.json();
            if (result.enabled && adminViewSwitcher) {
                // Global view is enabled, show view switcher
                adminViewSwitcher.style.display = 'flex';
                
                // Add event listeners for view buttons
                if (personalViewBtn) {
                    personalViewBtn.addEventListener('click', () => switchToPersonalView());
                }
                if (globalViewBtn) {
                    globalViewBtn.addEventListener('click', () => switchToGlobalView());
                }
                
                // Load and apply saved view scope preference
                const savedScope = loadViewScopePreference();
                if (savedScope === 'global') {
                    // Apply global view silently without saving preference again
                    isGlobalView = true;
                    personalViewBtn.classList.remove('active');
                    globalViewBtn.classList.add('active');
                    updateWarrantiesPanelTitle(true);
                } else {
                    // Apply personal view (default)
                    isGlobalView = false;
                    personalViewBtn.classList.add('active');
                    globalViewBtn.classList.remove('active');
                    updateWarrantiesPanelTitle(false);
                }
            } else if (adminViewSwitcher) {
                // Global view is disabled, hide view switcher
                adminViewSwitcher.style.display = 'none';
                
                // If currently in global view, switch back to personal view
                if (isGlobalView) {
                    isGlobalView = false;
                    updateWarrantiesPanelTitle(false);
                    // Reload warranties
                    await loadWarranties(true);
                    applyFilters();
                }
            }
        } else {
            console.error('Failed to check global view status');
            // Default to showing view switcher if check fails
            if (adminViewSwitcher) {
                adminViewSwitcher.style.display = 'flex';
                
                // Add event listeners for view buttons
                if (personalViewBtn) {
                    personalViewBtn.addEventListener('click', () => switchToPersonalView());
                }
                if (globalViewBtn) {
                    globalViewBtn.addEventListener('click', () => switchToGlobalView());
                }
            }
        }
    } catch (error) {
        console.error('Error checking global view status:', error);
        // Default to showing view switcher if check fails
        if (adminViewSwitcher) {
            adminViewSwitcher.style.display = 'flex';
            
            // Add event listeners for view buttons
            if (personalViewBtn) {
                personalViewBtn.addEventListener('click', () => switchToPersonalView());
            }
            if (globalViewBtn) {
                globalViewBtn.addEventListener('click', () => switchToGlobalView());
            }
        }
    }
}

/**
 * Switch to personal view (user's own warranties)
 */
async function switchToPersonalView() {
    if (!personalViewBtn || !globalViewBtn) return;
    
    isGlobalView = false;
    personalViewBtn.classList.add('active');
    globalViewBtn.classList.remove('active');
    
    // Save view preference
    saveViewScopePreference('personal');
    
    // Update title
    updateWarrantiesPanelTitle(false);
    
    // Reload warranties
    try {
        const token = window.auth.getToken();
        if (token) {
            await loadWarranties(true);
            applyFilters();
        }
    } catch (error) {
        console.error('Error switching to personal view:', error);
        showToast(window.t('messages.error_loading_personal_warranties'), 'error');
    }
}

/**
 * Switch to global view (all users' warranties) - available to all users
 */
async function switchToGlobalView() {
    if (!personalViewBtn || !globalViewBtn) return;
    
    // Check if global view is still enabled
    try {
        const response = await fetch('/api/settings/global-view-status', {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer ' + (window.auth ? window.auth.getToken() : localStorage.getItem('auth_token')),
                'Content-Type': 'application/json'
            }
        });
        
        if (response.ok) {
            const result = await response.json();
            if (!result.enabled) {
                showToast(window.t('messages.global_view_disabled'), 'error');
                return;
            }
        }
    } catch (error) {
        console.error('Error checking global view status:', error);
    }
    
    isGlobalView = true;
    personalViewBtn.classList.remove('active');
    globalViewBtn.classList.add('active');
    
    // Save view preference
    saveViewScopePreference('global');
    
    // Update title
    updateWarrantiesPanelTitle(true);
    
    // Reload warranties
    try {
        const token = window.auth.getToken();
        if (token) {
            await loadWarranties(true);
            applyFilters();
        }
    } catch (error) {
        console.error('Error switching to global view:', error);
        showToast(window.t('messages.error_loading_global_warranties'), 'error');
    }
}

/**
 * Update warranties panel title with proper translation
 * @param {boolean} isGlobal - Whether to show global or personal title
 */
function updateWarrantiesPanelTitle(isGlobal = false) {
    if (warrantiesPanelTitle) {
        if (window.i18next && window.i18next.t) {
            warrantiesPanelTitle.textContent = isGlobal ? 
                window.i18next.t('warranties.title_global') : 
                window.i18next.t('warranties.title');
        } else {
            warrantiesPanelTitle.textContent = isGlobal ? 'All Users\' Warranties' : 'Your Warranties';
        }
    }
}

/**
 * Get the appropriate localStorage key prefix based on user type
 * @returns {string} The prefix to use for localStorage keys
 */
function getPreferenceKeyPrefix() {
    return getUserType() === 'admin' ? 'admin_' : 'user_';
}

/**
 * Save view scope preference to localStorage
 * @param {string} scope - 'personal' or 'global'
 */
function saveViewScopePreference(scope) {
    try {
        const prefix = getPreferenceKeyPrefix();
        localStorage.setItem(`${prefix}viewScope`, scope);
        console.log(`Saved view scope preference: ${scope} with prefix: ${prefix}`);
    } catch (error) {
        console.error('Error saving view scope preference:', error);
    }
}

/**
 * Load view scope preference from localStorage
 * @returns {string} The saved preference ('personal', 'global', or 'personal' as default)
 */
function loadViewScopePreference() {
    try {
        const prefix = getPreferenceKeyPrefix();
        const savedScope = localStorage.getItem(`${prefix}viewScope`);
        console.log(`Loaded view scope preference: ${savedScope} with prefix: ${prefix}`);
        return savedScope || 'personal'; // Default to personal view
    } catch (error) {
        console.error('Error loading view scope preference:', error);
        return 'personal'; // Default to personal view on error
    }
}

// Theme Management - Simplified
function setTheme(isDark) {
    const theme = isDark ? 'dark' : 'light';
    console.log('Setting theme to:', theme);
    
    // 1. Apply theme attribute to document root
    document.documentElement.setAttribute('data-theme', theme);
        
    // 2. Save the single source of truth to localStorage
    localStorage.setItem('darkMode', isDark);
    
    // Update toggle state if the toggle exists on this page (e.g., in the header)
    const headerToggle = document.getElementById('darkModeToggle'); 
    if (headerToggle) {
        headerToggle.checked = isDark;
    }
}

// Initialization logic on DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
    // Register Service Worker
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('./sw.js')
                .then(registration => {
                    console.log('Service Worker registered with scope:', registration.scope);
                })
                .catch(error => {
                    console.error('Service Worker registration failed:', error);
                });
        });
    }

    // --- Search button click triggers search ---
    const searchBtn = document.getElementById('searchBtn');
    const searchInput = document.getElementById('searchWarranties');
    if (searchBtn && searchInput) {
        searchBtn.addEventListener('click', function(e) {
            e.preventDefault();
            currentFilters.search = searchInput.value.toLowerCase();
            applyFilters();
        });
    }
    // --- Ensure globalManageTagsBtn triggers modal and tag form is always initialized ---
    // (Redundant with setupUIEventListeners, but ensures modal is always ready)
    const globalManageTagsBtn = document.getElementById('globalManageTagsBtn');
    if (globalManageTagsBtn) {
        globalManageTagsBtn.addEventListener('click', async () => {
            if (!allTags || allTags.length === 0) {
                showLoadingSpinner();
                try {
                    await loadTags();
                } catch (error) {
                    console.error("Failed to load tags before opening modal:", error);
                    showToast("Could not load tags. Please try again.", "error");
                    hideLoadingSpinner();
                    return;
                }
                hideLoadingSpinner();
            }
            openTagManagementModal();
        });
    }
    console.log('[DEBUG] Registering authStateReady event handler');
    // ... other initialization ...

    // --- BEGIN REFACTORED TAG MODAL AND MAIN FORM TAG UI SETUP ---
    const globalTagManagementModal = document.getElementById('tagManagementModal');
    const globalNewTagForm = document.getElementById('newTagForm'); // Inside tagManagementModal
    const mainTagSearchInput = document.getElementById('tagSearch'); // For the main "Add Warranty" form's tag search
    const warrantyFormElement = document.getElementById('warrantyForm'); // The main add warranty form

    // 1. ALWAYS Initialize listeners for the global Tag Management Modal IF IT EXISTS
    if (globalTagManagementModal) {
        if (globalNewTagForm) {
            // Ensure the event listener is attached only once, or manage it if DOMContentLoaded could fire multiple times (not typical)
            // For simplicity, assuming DOMContentLoaded runs once per page load.
            globalNewTagForm.addEventListener('submit', (e) => {
                e.preventDefault();
                // Inline implementation for creating a new tag from the modal
                const tagNameInput = document.getElementById('newTagName');
                const tagColorInput = document.getElementById('newTagColor');
                const name = tagNameInput ? tagNameInput.value.trim() : '';
                const color = tagColorInput ? tagColorInput.value : '#808080';
                if (!name) {
                    showToast(window.t('messages.tag_name_required'), 'error');
                    return;
                }
                // Use the existing createTag function if available
                if (typeof createTag === 'function') {
                    createTag(name, color)
                        .then(() => {
                            if (tagNameInput) tagNameInput.value = '';
                            if (tagColorInput) tagColorInput.value = '#808080';
                            renderExistingTags && renderExistingTags();
                        })
                        .catch((err) => {
                            showToast((err && err.message) || window.t('messages.failed_to_create_tag'), 'error');
                        });
                } else {
                    showToast(window.t('messages.tag_creation_function_not_found'), 'error');
                }
            });
        }

        const closeButtons = globalTagManagementModal.querySelectorAll('[data-dismiss="modal"]');
        closeButtons.forEach(button => {
            button.addEventListener('click', (event) => {
                globalTagManagementModal.style.display = 'none';
                event.stopPropagation(); // This was the fix from before, ensuring it's applied
            });
        });
        console.log('Global Tag Management Modal listeners initialized directly in DOMContentLoaded.');
    }

    // 2. Initialize Tag functionality FOR THE MAIN ADD WARRANTY FORM (if its specific tag search input exists)
    // initTagFunctionality is now refactored to be specific to the main form's tag UI.
    if (mainTagSearchInput) {
        initTagFunctionality(); // Sets up main form tag search, its manage button, etc.
                                // Also calls loadTags() if needed for the main form.
    }
    // --- END REFACTORED TAG MODAL AND MAIN FORM TAG UI SETUP ---


    // Setup form submission (assuming addWarrantyForm exists - this is 'warrantyFormElement')
    // const form = document.getElementById('addWarrantyForm'); // Old selector
    if (warrantyFormElement) { // Use the variable defined above
        warrantyFormElement.addEventListener('submit', handleFormSubmit);
        // Initialize form tabs if the form exists
        // initFormTabs(); // This should be called when the ADD MODAL is SHOWN, not globally here.
                          // It's correctly in setupModalTriggers for the addWarrantyModal.
    }


    // Initialize theme toggle state *after* DOM is loaded
    // ... (theme toggle init logic remains) ...

    // Setup view switcher (assuming view switcher elements exist)
    if (document.getElementById('gridViewBtn')) {
        // setupViewSwitcher(); // Removed undefined function
        loadViewPreference(); // This is fine here, loads initial view preference.
    }

    // Setup filter controls (assuming filter controls exist)
    if (document.getElementById('filterControls')) {
        // setupFilterControls(); // Removed: function not defined
        // populateTagFilter(); // This should be called AFTER warranties (and their tags) are loaded.
                              // It's called in loadWarranties -> processAllWarranties or similar flow.
    }

    // Initialize modal interactions (general modal triggers like close buttons, backdrop)
    setupModalTriggers(); // This sets up general modal behaviors and specific triggers for add/edit.

    // Initialize form-specific lifetime checkbox handler FOR THE MAIN ADD FORM
    const lifetimeCheckbox = document.getElementById('isLifetime'); // Main form's checkbox
    if (lifetimeCheckbox) {
        lifetimeCheckbox.addEventListener('change', handleLifetimeChange);
        handleLifetimeChange({ target: lifetimeCheckbox }); // Initial check
    }

    // Initialize warranty method selection handlers
    if (durationMethodRadio && exactDateMethodRadio) {
        durationMethodRadio.addEventListener('change', handleWarrantyMethodChange);
        exactDateMethodRadio.addEventListener('change', handleWarrantyMethodChange);
        handleWarrantyMethodChange(); // Initial setup
    }

    if (editDurationMethodRadio && editExactDateMethodRadio) {
        editDurationMethodRadio.addEventListener('change', handleEditWarrantyMethodChange);
        editExactDateMethodRadio.addEventListener('change', handleEditWarrantyMethodChange);
        handleEditWarrantyMethodChange(); // Initial setup for edit form
    }

    // --- LOAD WARRANTIES AFTER AUTH ---
    let authStateHandled = false;

    async function runAuthenticatedTasks(isAuthenticated) { // Added isAuthenticated parameter
        if (!isAuthenticated) {
            console.log('[DEBUG] runAuthenticatedTasks: Called with isAuthenticated = false. Not running tasks yet.');
            // Do not set authStateHandled = true here, allow a subsequent call with true.
            return;
        }
        // If we reach here, isAuthenticated is true.
        if (authStateHandled) {
            console.log('[DEBUG] runAuthenticatedTasks: Tasks already handled (or in progress by another call).');
            return;
        }
        authStateHandled = true; // Set flag only when tasks are actually starting with isAuthenticated = true.
        console.log('[DEBUG] runAuthenticatedTasks: Executing with isAuthenticated = true.');

        // Set prefix
        userPreferencePrefix = getPreferenceKeyPrefix();
        console.log(`[runAuthenticatedTasks] Determined and stored global prefix: ${userPreferencePrefix}`);

        // Re-check auth status just before critical data loads
        const currentAuthStatus = window.auth && window.auth.isAuthenticated();
        console.log(`[runAuthenticatedTasks] Current auth status before loading prefs/warranties: ${currentAuthStatus}`);

        if (currentAuthStatus) {
            await loadAndApplyUserPreferences(true); // Pass true, as we've confirmed auth
            await loadTags(); // Ensure all available tags are loaded
            await loadCurrencies(); // Load currencies for dropdowns
            
            // Initialize Paperless-ngx integration
            await initPaperlessNgxIntegration();
            
            // Initialize view controls for all users
            initViewControls();

            if (document.getElementById('warrantiesList')) {
                console.log("[runAuthenticatedTasks] Loading warranty data...");
                await loadWarranties(true); // Pass true
                console.log('[DEBUG] After loadWarranties, warranties array:', warranties);
            } else {
                console.log("[runAuthenticatedTasks] Warranties list element not found.");
            }
        } else {
            console.warn("[runAuthenticatedTasks] Auth status became false before loading data. Aborting data load.");
            // Optionally, reset authStateHandled if we want to allow another attempt
            // authStateHandled = false; 
        }

        // Now that data and preferences are ready, apply view/currency and render via applyFilters
        console.log("[runAuthenticatedTasks] Applying preferences and rendering...");
        loadViewPreference(); // Sets currentView and UI classes/buttons
        updateCurrencySymbols(); // Update symbols
        
        // Apply filters using the loaded data and render the list
        if (document.getElementById('warrantiesList')) { 
            applyFilters(); 
        }
    }

    // Listener for the 'authStateReady' event
    window.addEventListener('authStateReady', async function handleAuthEvent(event) {
        console.log('[DEBUG] authStateReady event received in script.js. Detail:', event.detail);
        // Pass the isAuthenticated status from the event detail to runAuthenticatedTasks
        await runAuthenticatedTasks(event.detail && event.detail.isAuthenticated);
    }); // Removed { once: true } to allow re-evaluation if auth state changes

    // Proactive check after a brief delay to allow auth.js to initialize
    setTimeout(async () => {
        console.log('[DEBUG] Proactive auth check in script.js (after timeout).');
        if (window.auth) {
            // Pass the current authentication status to runAuthenticatedTasks
            await runAuthenticatedTasks(window.auth.isAuthenticated());
        } else {
            console.log('[DEBUG] Proactive check: window.auth not available. Event listener should handle it.');
            // Call with false if auth module isn't ready, to avoid tasks running prematurely.
            await runAuthenticatedTasks(false);
        }
    }, 500); // Delay
    // --- END LOAD WARRANTIES AFTER AUTH ---

    // updateCurrencySymbols(); // Call removed, rely on loadWarranties triggering render with correct symbol
});

// Initialize theme based on user preference or system preference
function initializeTheme() {
    // Only use the global darkMode key for theme persistence
    const savedTheme = localStorage.getItem('darkMode');
    if (savedTheme !== null) {
        setTheme(savedTheme === 'true');
    } else {
        setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
    }
}

// Variables
let currentView = 'grid'; // Default view
let expiringSoonDays = 30; // Default value, will be updated from user preferences

// API URL
const API_URL = '/api/warranties';

// Utility function to escape HTML
function escapeHtml(text) {
    if (typeof text !== 'string') return text;
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return text.replace(/[&<>"']/g, function(m) { return map[m]; });
}

// Form tab navigation variables (simplified)
let formTabs = []; // Changed from const to let, initialized as empty
// Removed const formTabsElements = document.querySelectorAll('.form-tab');
// Removed const formTabs = formTabsElements ? Array.from(formTabsElements) : [];
// Removed const tabContentsElements = document.querySelectorAll('.tab-content');
// Removed tabContents assignment here

// const nextButton = document.querySelector('.next-tab'); // Keep these if needed globally, otherwise might remove
// const prevButton = document.querySelector('.prev-tab'); // Keep these if needed globally, otherwise might remove

// --- Add near other DOM Element declarations ---
    // ... existing code ...
    // Add save button handler for notes modal (if not already present)
    const saveNotesBtn = document.getElementById('saveNotesBtn');
    if (saveNotesBtn) {
        saveNotesBtn.onclick = async function() {
            // Get the warranty ID being edited
            const warrantyId = notesModalWarrantyId;
            const notesValue = document.getElementById('notesModalTextarea').value;
            if (!warrantyId || !notesModalWarrantyObj) return;
            // Get auth token
            const token = localStorage.getItem('auth_token');
            if (!token) {
                showToast(window.t('messages.authentication_required'), 'error');
                return;
            }
            showLoadingSpinner();
            try {
                // Use FormData and send all required fields, just like the edit modal
                const formData = new FormData();
                formData.append('product_name', notesModalWarrantyObj.product_name);
                formData.append('purchase_date', (notesModalWarrantyObj.purchase_date || '').split('T')[0]);
                formData.append('is_lifetime', notesModalWarrantyObj.is_lifetime ? 'true' : 'false');
                if (!notesModalWarrantyObj.is_lifetime) {
                    // Append duration components instead of warranty_years
                    formData.append('warranty_duration_years', notesModalWarrantyObj.warranty_duration_years || 0);
                    formData.append('warranty_duration_months', notesModalWarrantyObj.warranty_duration_months || 0);
                    formData.append('warranty_duration_days', notesModalWarrantyObj.warranty_duration_days || 0);
                    
                    // If all duration fields are 0 but we have an expiration date, this was created with exact date method
                    const isExactDateWarranty = (notesModalWarrantyObj.warranty_duration_years || 0) === 0 &&
                                              (notesModalWarrantyObj.warranty_duration_months || 0) === 0 &&
                                              (notesModalWarrantyObj.warranty_duration_days || 0) === 0 &&
                                              notesModalWarrantyObj.expiration_date;
                    
                    if (isExactDateWarranty) {
                        // For exact date warranties, send the expiration date as exact_expiration_date
                        formData.append('exact_expiration_date', notesModalWarrantyObj.expiration_date.split('T')[0]);
                    }
                }
                if (notesModalWarrantyObj.product_url) {
                    formData.append('product_url', notesModalWarrantyObj.product_url);
                }
                if (notesModalWarrantyObj.purchase_price !== null && notesModalWarrantyObj.purchase_price !== undefined) {
                    formData.append('purchase_price', notesModalWarrantyObj.purchase_price);
                }
                if (notesModalWarrantyObj.vendor) {
                    formData.append('vendor', notesModalWarrantyObj.vendor);
                }
                if (notesModalWarrantyObj.warranty_type) {
                    formData.append('warranty_type', notesModalWarrantyObj.warranty_type);
                }
                if (notesModalWarrantyObj.serial_numbers && Array.isArray(notesModalWarrantyObj.serial_numbers)) {
                    notesModalWarrantyObj.serial_numbers.forEach(sn => {
                        if (sn && sn.trim() !== '') {
                            formData.append('serial_numbers[]', sn); // Use [] for arrays
                        }
                    });
                } else if (!formData.has('serial_numbers[]')) {
                    // Send empty array if none exist
                    // formData.append('serial_numbers[]', ''); // Sending empty string might not work as expected, better to not send if empty
                }
                if (notesModalWarrantyObj.tags && Array.isArray(notesModalWarrantyObj.tags)) {
                    const tagIds = notesModalWarrantyObj.tags.map(tag => tag.id);
                    formData.append('tag_ids', JSON.stringify(tagIds));
                } else {
                    formData.append('tag_ids', JSON.stringify([]));
                }
                formData.append('notes', notesValue);
                const response = await fetch(`/api/warranties/${warrantyId}`, {
                    method: 'PUT',
                    headers: {
                        'Authorization': 'Bearer ' + token
                    },
                    body: formData
                });
                if (!response.ok) {
                    const data = await response.json();
                    throw new Error(data.error || 'Failed to update notes');
                }
                hideLoadingSpinner();
                showToast(window.t('messages.notes_updated_successfully'), 'success');
                // Close the modal
                const notesModal = document.getElementById('notesModal');
                if (notesModal) notesModal.style.display = 'none';
                // Now reload warranties and re-render UI
                await loadWarranties();
                applyFilters();
            } catch (error) {
                hideLoadingSpinner();
                console.error('Error updating notes:', error);
                showToast(error.message || window.t('messages.failed_to_update_notes'), 'error');
            }
        };
    }

// Initialize form tabs
function initFormTabs() {
    console.log('Initializing form tabs...');
    // Use the modal context if available, otherwise query document
    const modalContext = document.getElementById('addWarrantyModal'); // Assuming this is the context
    const context = modalContext && modalContext.classList.contains('active') ? modalContext : document;

    const tabsContainer = context.querySelector('.form-tabs');
    // Re-query tabContents and formTabs within the correct context and update global variables
    const contentsElements = context.querySelectorAll('.tab-content');
    tabContents = contentsElements ? Array.from(contentsElements) : []; // Update global variable

    const tabsElements = tabsContainer ? tabsContainer.querySelectorAll('.form-tab') : [];
    formTabs = tabsElements ? Array.from(tabsElements) : []; // Update global variable

    const nextButton = context.querySelector('#nextTabBtn'); // Use context
    const prevButton = context.querySelector('#prevTabBtn'); // Use context
    const submitButton = context.querySelector('#submitWarrantyBtn'); // Use context

    // Use the updated global variables length for checks
    if (!tabsContainer || !tabContents.length || !formTabs.length || !nextButton || !prevButton || !submitButton) {
        console.warn('Form tab elements not found in the expected context. Skipping tab initialization.');
        return; // Don't proceed if elements aren't present
    }

    // Remove the local 'tabs' and 'contents' variables, use global ones now
    // let currentTabIndex = 0; // Already global
    // const tabs = tabsContainer.querySelectorAll('.form-tab'); // Use global formTabs
    // const contents = document.querySelectorAll('.tab-content'); // Use global tabContents

    // Remove the inner switchToTab and updateNavigationButtons functions as they are defined globally
    /*
    function switchToTab(index) {
        // ... removed inner function ...
    }

    function updateNavigationButtons() {
        // ... removed inner function ...
    }
    */

    // --- CLONE AND REPLACE NAV BUTTONS TO REMOVE OLD LISTENERS ---
    // Ensure buttons exist before cloning
    let nextButtonCloned = nextButton;
    let prevButtonCloned = prevButton;
    if (nextButton && prevButton) {
        nextButtonCloned = nextButton.cloneNode(true);
        prevButtonCloned = prevButton.cloneNode(true);
        nextButton.parentNode.replaceChild(nextButtonCloned, nextButton);
        prevButton.parentNode.replaceChild(prevButtonCloned, prevButton);
    } else {
        console.warn("Next/Prev buttons not found for cloning listeners.");
    }


    // ... (rest of initFormTabs, including event listeners, ensure element checks)
    // Make sure event listeners use the correct global functions and variables
    formTabs.forEach((tab, index) => { // Use global formTabs
        if (tab) { // Check if tab exists
            tab.addEventListener('click', () => {
                // Allow clicking only on previous tabs if valid, or current
                if (index < currentTabIndex) {
                    let canSwitch = true;
                    for (let i = 0; i < index; i++) {
                        // Ensure validateTab uses the correct global tabContents
                        if (!validateTab(i)) {
                            canSwitch = false;
                            break;
                        }
                    }
                    if (canSwitch) switchToTab(index); // Call global function
                } else if (index === currentTabIndex) {
                    // Clicking current tab does nothing
                } else {
                    // Try to navigate forward by clicking tab
                    // Ensure validateTab uses the correct global tabContents
                    if (validateTab(currentTabIndex)) {
                        // Mark current as completed
                        if(formTabs[currentTabIndex]) formTabs[currentTabIndex].classList.add('completed'); // Use global formTabs
                        switchToTab(index); // Call global function
                    } else {
                         // If current tab is invalid, show errors for it
                         showValidationErrors(currentTabIndex);
                    }
                }
            });
        }
    });

    if (nextButtonCloned) { // Check button exists
        nextButtonCloned.addEventListener('click', () => {
            // Ensure validateTab uses the correct global tabContents
            if (validateTab(currentTabIndex)) {
                if (formTabs[currentTabIndex]) formTabs[currentTabIndex].classList.add('completed'); // Use global formTabs
                // Use global formTabs length
                if (currentTabIndex < formTabs.length - 1) { // <-- Ensure this uses formTabs.length
                    switchToTab(currentTabIndex + 1); // Call global function
                }
            } else {
                // If current tab is invalid, show errors
                showValidationErrors(currentTabIndex);
            }
        });
    } else {
         console.warn("Cloned Next button not found, listener not added.");
    }

    if (prevButtonCloned) { // Check button exists
        prevButtonCloned.addEventListener('click', () => {
            if (currentTabIndex > 0) {
                switchToTab(currentTabIndex - 1);
            }
        });
    }

    // Initialize the first tab
    switchToTab(0);
}

// Switch to a specific tab
function switchToTab(index) {
    console.log(`Switching to tab ${index} from tab ${currentTabIndex}`);
    
    // Ensure index is within bounds
    if (index < 0 || index >= formTabs.length) {
        console.log(`Invalid tab index: ${index}, not switching`);
        return;
    }
    
    // Update summary FIRST if switching TO the summary tab
    if (index === formTabs.length - 1) {
        updateSummary();
    }
    
    // Update active tab
    formTabs.forEach(tab => tab.classList.remove('active'));
    tabContents.forEach(content => content.classList.remove('active'));
    
    formTabs[index].classList.add('active');
    tabContents[index].classList.add('active');
    
    // Update current tab index
    currentTabIndex = index;
    
    // Update progress indicator
    document.querySelector('.form-tabs').setAttribute('data-step', currentTabIndex);
    
    // Update completed tabs
    updateCompletedTabs();
    
    // Update navigation buttons
    updateNavigationButtons();
}

// Update navigation buttons based on current tab
function updateNavigationButtons() {
    const prevButton = document.querySelector('.prev-tab');
    const nextButton = document.querySelector('.next-tab');
    const submitButton = document.querySelector('button[type="submit"]');
    
    // Hide/show previous button
    prevButton.style.display = currentTabIndex === 0 ? 'none' : 'block';
    
    // Hide/show next button and submit button
    if (currentTabIndex === formTabs.length - 1) {
        nextButton.style.display = 'none';
        submitButton.style.display = 'block';
    } else {
        nextButton.style.display = 'block';
        submitButton.style.display = 'none';
    }
}

// Update completed tabs
function updateCompletedTabs() {
    formTabs.forEach((tab, index) => {
        if (index < currentTabIndex) {
            tab.classList.add('completed');
        } else {
            tab.classList.remove('completed');
        }
    });
}

// Validate a specific tab
function validateTab(tabIndex) {
    const tabContent = tabContents[tabIndex];
    const controls = tabContent.querySelectorAll('input, textarea, select');
    let isTabValid = true;

    controls.forEach(control => {
        // Clear previous validation state
        control.classList.remove('invalid');
        let validationMessageElement = control.nextElementSibling;
        if (validationMessageElement && validationMessageElement.classList.contains('validation-message')) {
            validationMessageElement.remove();
        }

        // Manual validation for required fields
        if (control.hasAttribute('required') && control.value.trim() === '') {
            isTabValid = false;
            control.classList.add('invalid');
            // Mark as invalid, message will be added by showValidationErrors
        } else if (!control.validity.valid) { // For other HTML5 validation issues (e.g., type mismatch)
            isTabValid = false;
            control.classList.add('invalid');
        }
    });
    return isTabValid;
}

// Show validation errors for a specific tab
function showValidationErrors(tabIndex) {
    const tabContent = tabContents[tabIndex];
    const controls = tabContent.querySelectorAll('input, textarea, select');
    let firstInvalidControl = null;
    let validationToast = document.querySelector('.validation-toast'); // Check for existing validation toast

    controls.forEach(control => {
        if (!control.validity.valid) {
            if (!firstInvalidControl) firstInvalidControl = control;
            control.classList.add('invalid');

            // Add or update validation message
            let validationMessageElement = control.nextElementSibling;
            if (!validationMessageElement || !validationMessageElement.classList.contains('validation-message')) {
                validationMessageElement = document.createElement('div');
                validationMessageElement.className = 'validation-message';
                control.parentNode.insertBefore(validationMessageElement, control.nextSibling);
            }
            if (control.hasAttribute('required') && control.value.trim() === '') {
                validationMessageElement.textContent = window.i18next ? window.i18next.t('messages.please_fill_out_this_field') : 'Please fill out this field.';
            } else {
                validationMessageElement.textContent = control.validationMessage || (window.i18next ? window.i18next.t('messages.field_is_invalid') : 'This field is invalid.');
            }
        } else {
            // Ensure invalid class is removed if somehow missed by validateTab (shouldn't happen)
            control.classList.remove('invalid');
            // Remove validation message if control is now valid
            let validationMessageElement = control.nextElementSibling;
            if (validationMessageElement && validationMessageElement.classList.contains('validation-message')) {
                validationMessageElement.remove();
            }
        }
    });

    // The browser will attempt to focus the first invalid field when form submission is prevented.
    // Switching to the tab containing the error (done by handleFormSubmit) is key.
    
    // Manage a single validation toast
    if (!validationToast) {
        validationToast = showToast(window.t('messages.correct_errors_in_tab'), 'error', 0); // 0 duration = persistent
        validationToast.classList.add('validation-toast'); // Add a class to identify it
    } else {
        // Update existing toast message if needed (optional)
        validationToast.querySelector('span').textContent = window.t('messages.correct_errors_in_tab');
    }
}

// Update summary tab with current form values
function updateSummary() {
    // Product information
    const summaryProductName = document.getElementById('summary-product-name');
    if (summaryProductName) {
        summaryProductName.textContent = 
            document.getElementById('productName')?.value || '-';
    }
    
    const summaryProductUrl = document.getElementById('summary-product-url');
    if (summaryProductUrl) {
        summaryProductUrl.textContent = 
            document.getElementById('productUrl')?.value || '-';
    }
    
    // Serial numbers
    const serialNumbers = [];
    document.querySelectorAll('input[name="serial_numbers[]"]').forEach(input => {
        if (input && input.value && input.value.trim()) {
            serialNumbers.push(input.value.trim());
        }
    });
    
    const serialNumbersContainer = document.getElementById('summary-serial-numbers');
    if (serialNumbersContainer) {
        if (serialNumbers.length > 0) {
            serialNumbersContainer.innerHTML = '<ul>' + 
                serialNumbers.map(sn => `<li>${sn}</li>`).join('') + 
                '</ul>';
        } else {
            serialNumbersContainer.textContent = 'None';
        }
    }
    
    // Warranty details
    const purchaseDateStr = document.getElementById('purchaseDate')?.value;
    const summaryPurchaseDate = document.getElementById('summary-purchase-date');
    if (summaryPurchaseDate) {
        if (purchaseDateStr) {
            // Use the same logic as formatDate to handle YYYY-MM-DD
            const parts = String(purchaseDateStr).split('-');
            let formattedDate = '-'; // Default
            if (parts.length === 3) {
                const year = parseInt(parts[0], 10);
                const month = parseInt(parts[1], 10) - 1; // JS months are 0-indexed
                const day = parseInt(parts[2], 10);
                const dateObj = new Date(Date.UTC(year, month, day));
                if (!isNaN(dateObj.getTime())) {
                    // Format manually (example: Jan 1, 2023)
                    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                    formattedDate = `${monthNames[month]} ${day}, ${year}`;
                }
            }
            summaryPurchaseDate.textContent = formattedDate;
        } else {
            summaryPurchaseDate.textContent = '-';
        }
    }
    
    // --- Handle Lifetime in Summary ---
    const isLifetime = isLifetimeCheckbox ? isLifetimeCheckbox.checked : false;
    const summaryWarrantyDuration = document.getElementById('summary-warranty-duration'); // Use new ID

    if (summaryWarrantyDuration) {
                if (isLifetime) {
            summaryWarrantyDuration.textContent = window.i18next ? window.i18next.t('warranties.lifetime') : 'Lifetime';
        } else {
            const years = parseInt(warrantyDurationYearsInput?.value || 0);
            const months = parseInt(warrantyDurationMonthsInput?.value || 0);
            const days = parseInt(warrantyDurationDaysInput?.value || 0);

            let durationParts = [];
            if (years > 0) {
                const yearText = window.i18next ? window.i18next.t('warranties.year', {count: years}) : `year${years !== 1 ? 's' : ''}`;
                durationParts.push(`${years} ${yearText}`);
            }
            if (months > 0) {
                const monthText = window.i18next ? window.i18next.t('warranties.month', {count: months}) : `month${months !== 1 ? 's' : ''}`;
                durationParts.push(`${months} ${monthText}`);
            }
            if (days > 0) {
                const dayText = window.i18next ? window.i18next.t('warranties.day', {count: days}) : `day${days !== 1 ? 's' : ''}`;
                durationParts.push(`${days} ${dayText}`);
            }

            summaryWarrantyDuration.textContent = durationParts.length > 0 ? durationParts.join(', ') : '-';
        }
    }
    
    // Warranty type - handle dropdown and custom input
    const warrantyTypeSelect = document.getElementById('warrantyType');
    const warrantyTypeCustom = document.getElementById('warrantyTypeCustom');
    const summaryWarrantyType = document.getElementById('summary-warranty-type');
    if (summaryWarrantyType) {
        let warrantyTypeText = 'Not specified';
        if (warrantyTypeSelect && warrantyTypeSelect.value) {
            if (warrantyTypeSelect.value === 'other' && warrantyTypeCustom && warrantyTypeCustom.value.trim()) {
                warrantyTypeText = warrantyTypeCustom.value.trim();
            } else if (warrantyTypeSelect.value !== 'other') {
                warrantyTypeText = warrantyTypeSelect.value;
            }
        }
        summaryWarrantyType.textContent = warrantyTypeText;
    }
    
    // Purchase price
    const purchasePrice = document.getElementById('purchasePrice')?.value;
    const currency = document.getElementById('currency')?.value;
    const summaryPurchasePrice = document.getElementById('summary-purchase-price');
    if (summaryPurchasePrice) {
        if (purchasePrice) {
            const symbol = getCurrencySymbol();
            const position = getCurrencyPosition();
            const amount = parseFloat(purchasePrice).toFixed(2);
            summaryPurchasePrice.innerHTML = formatCurrencyHTML(amount, symbol, position);
        } else {
            summaryPurchasePrice.textContent = 'Not specified';
        }
    }
    
    // Documents
    const productPhotoFile = document.getElementById('productPhoto')?.files[0];
    const summaryProductPhoto = document.getElementById('summary-product-photo');
    if (summaryProductPhoto) {
        summaryProductPhoto.textContent = productPhotoFile ? 
            productPhotoFile.name : 'No photo selected';
    }
    
    const invoiceFile = document.getElementById('invoice')?.files[0];
    const summaryInvoice = document.getElementById('summary-invoice');
    if (summaryInvoice) {
        summaryInvoice.textContent = invoiceFile ? 
            invoiceFile.name : 'No file selected';
    }
    
    const manualFile = document.getElementById('manual')?.files[0];
    const summaryManual = document.getElementById('summary-manual');
    if (summaryManual) {
        summaryManual.textContent = manualFile ? 
            manualFile.name : 'No file selected';
    }

    const otherDocumentFile = document.getElementById('otherDocument')?.files[0]; 
    const summaryOtherDocument = document.getElementById('summary-other-document'); 
    if (summaryOtherDocument) { 
        summaryOtherDocument.textContent = otherDocumentFile ? 
            otherDocumentFile.name : 'No file selected'; 
    } 
    
    // Tags
    const summaryTags = document.getElementById('summary-tags');
    if (summaryTags) {
        if (selectedTags && selectedTags.length > 0) {
            summaryTags.innerHTML = '';
            
            selectedTags.forEach(tag => {
                const tagElement = document.createElement('span');
                tagElement.className = 'tag';
                tagElement.style.backgroundColor = tag.color;
                tagElement.style.color = getContrastColor(tag.color);
                tagElement.textContent = tag.name;
                
                summaryTags.appendChild(tagElement);
            });
        } else {
            summaryTags.textContent = 'No tags selected';
        }
    }

    // Vendor/Retailer
    const vendor = document.getElementById('vendor');
    document.getElementById('summary-vendor').textContent = vendor && vendor.value ? vendor.value : '-';
}

// Add input event listeners to remove validation errors when user types
document.addEventListener('input', (e) => {
    if (e.target.hasAttribute('required') && e.target.classList.contains('invalid')) {
        if (e.target.value.trim()) {
            e.target.classList.remove('invalid');
            
            // Remove validation message if exists
            const validationMessage = e.target.nextElementSibling;
            if (validationMessage && validationMessage.classList.contains('validation-message')) {
                validationMessage.remove();
            }
        }
    }
});

// Function to reset the form and initialize serial number inputs
function resetForm() {
    // Reset the form
    warrantyForm.reset();
    
    // Reset serial numbers container
    serialNumbersContainer.innerHTML = '';
    
    // Add the first serial number input
    addSerialNumberInput();
    
    // Reset form tabs
    currentTabIndex = 0;
    switchToTab(0);
    
    // Clear any file input displays
    const productPhotoFileName = document.getElementById('productPhotoFileName');
    if (productPhotoFileName) productPhotoFileName.textContent = '';
    fileName.textContent = '';
    manualFileName.textContent = '';
    if (otherDocumentFileName) otherDocumentFileName.textContent = '';
    
    // Reset photo preview
    const productPhotoPreview = document.getElementById('productPhotoPreview');
    if (productPhotoPreview) {
        productPhotoPreview.style.display = 'none';
    } 
}

async function exportWarranties() {
    console.log('[EXPORT DEBUG] Starting export process');
    console.log('[EXPORT DEBUG] Total warranties in memory:', warranties.length);
    console.log('[EXPORT DEBUG] Current filters:', currentFilters);
    
    // Get filtered warranties
    let warrantiesToExport = [...warranties];
    console.log('[EXPORT DEBUG] Initial warranties to export:', warrantiesToExport.length);
    
    // Apply current filters
    if (currentFilters.search) {
        const searchTerm = currentFilters.search.toLowerCase();
        console.log('[EXPORT DEBUG] Applying search filter:', searchTerm);
        warrantiesToExport = warrantiesToExport.filter(warranty => {
            // Check if product name contains search term
            const productNameMatch = warranty.product_name.toLowerCase().includes(searchTerm);
            
            // Check if any tag name contains search term
            const tagMatch = warranty.tags && Array.isArray(warranty.tags) && 
                warranty.tags.some(tag => tag.name.toLowerCase().includes(searchTerm));
            
            // Check if vendor name contains search term
            const vendorMatch = warranty.vendor && warranty.vendor.toLowerCase().includes(searchTerm);
            
            // Return true if either product name, tag name, or vendor name matches
            return productNameMatch || tagMatch || vendorMatch;
        });
        console.log('[EXPORT DEBUG] After search filter:', warrantiesToExport.length);
    }
    
    if (currentFilters.status !== 'all') {
        console.log('[EXPORT DEBUG] Applying status filter:', currentFilters.status);
        warrantiesToExport = warrantiesToExport.filter(warranty => 
            warranty.status === currentFilters.status
        );
        console.log('[EXPORT DEBUG] After status filter:', warrantiesToExport.length);
    }
    
    // Apply tag filter
    if (currentFilters.tag !== 'all') {
        const tagId = parseInt(currentFilters.tag);
        console.log('[EXPORT DEBUG] Applying tag filter:', tagId);
        warrantiesToExport = warrantiesToExport.filter(warranty => 
            warranty.tags && Array.isArray(warranty.tags) &&
            warranty.tags.some(tag => tag.id === tagId)
        );
        console.log('[EXPORT DEBUG] After tag filter:', warrantiesToExport.length);
    }
    
    // Apply vendor filter
    if (currentFilters.vendor !== 'all') {
        console.log('[EXPORT DEBUG] Applying vendor filter:', currentFilters.vendor);
        warrantiesToExport = warrantiesToExport.filter(warranty => 
            (warranty.vendor || '').toLowerCase() === currentFilters.vendor.toLowerCase()
        );
        console.log('[EXPORT DEBUG] After vendor filter:', warrantiesToExport.length);
    }
    
    // Apply warranty type filter
    if (currentFilters.warranty_type !== 'all') {
        console.log('[EXPORT DEBUG] Applying warranty type filter:', currentFilters.warranty_type);
        warrantiesToExport = warrantiesToExport.filter(warranty => 
            (warranty.warranty_type || '').toLowerCase() === currentFilters.warranty_type.toLowerCase()
        );
        console.log('[EXPORT DEBUG] After warranty type filter:', warrantiesToExport.length);
    }
    
    console.log('[EXPORT DEBUG] Final warranties to export:', warrantiesToExport.length);
    console.log('[EXPORT DEBUG] Warranty IDs being exported:', warrantiesToExport.map(w => w.id));
    
    // Create CSV content
    let csvContent = "data:text/csv;charset=utf-8,";
    
    // Add headers - Updated for duration components
    csvContent += "ProductName,PurchaseDate,IsLifetime,WarrantyDurationYears,WarrantyDurationMonths,WarrantyDurationDays,ExpirationDate,Status,PurchasePrice,SerialNumber,ProductURL,Tags,Vendor\n";
    
    // Add data rows
    warrantiesToExport.forEach(warranty => {
        // Format serial numbers as comma-separated string
        const serialNumbers = Array.isArray(warranty.serial_numbers) 
            ? warranty.serial_numbers.filter(s => s).join(', ')
            : '';
        
        // Format tags as comma-separated string
        const tags = Array.isArray(warranty.tags)
            ? warranty.tags.map(tag => tag.name).join(', ')
            : '';
        
        // Format row data - Updated for duration components
        const row = [
            warranty.product_name || '',
            formatDateYYYYMMDD(new Date(warranty.purchase_date)),
            warranty.is_lifetime ? 'TRUE' : 'FALSE',
            warranty.warranty_duration_years || 0,
            warranty.warranty_duration_months || 0,
            warranty.warranty_duration_days || 0,
            warranty.is_lifetime ? '' : formatDateYYYYMMDD(new Date(warranty.expiration_date)), // Expiration date empty for lifetime
            warranty.status || '',
            warranty.purchase_price || '',
            serialNumbers,
            warranty.product_url || '',
            tags,
            warranty.vendor || ''
        ];
        
        // Add row to CSV content
        csvContent += row.map(field => `"${field.toString().replace(/"/g, '""')}"`).join(',') + '\n';
    });
    
    // Create a download link
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', `warranties_export_${formatDate(new Date())}.csv`);
    document.body.appendChild(link);
    
    // Trigger download
    link.click();
    
    // Clean up
    document.body.removeChild(link);
    
    // Show success notification
    showToast(window.t('messages.exported_warranties_successfully', {count: warrantiesToExport.length}), 'success');
}

// Switch view of warranties list
async function switchView(viewType, saveToApi = true) { // Added saveToApi parameter with default true
    console.log(`Switching to view: ${viewType}`);
    currentView = viewType;

    const prefix = getPreferenceKeyPrefix();
    const viewKey = `${prefix}defaultView`;
    const currentStoredValue = localStorage.getItem(viewKey);

    // Save to localStorage immediately for responsiveness
    if (currentStoredValue !== viewType) {
        localStorage.setItem(viewKey, viewType); 
        // Keep legacy keys for now if needed, but primary is viewKey
        localStorage.setItem(`${prefix}warrantyView`, viewType);
        localStorage.setItem('viewPreference', viewType); 
        console.log(`Saved view preference (${viewKey}) to localStorage: ${viewType}`);
    } else {
        console.log(`View preference (${viewKey}) already set to ${viewType} in localStorage.`);
    }

    // --- MODIFIED: Only save preference to API if saveToApi is true --- 
    if (saveToApi && window.auth && window.auth.isAuthenticated()) {
        const token = window.auth.getToken();
        if (token) {
            try {
                console.log(`Attempting to save view preference (${viewType}) to API...`);
                const response = await fetch('/api/auth/preferences', {
                    method: 'PUT',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ default_view: viewType }) // Send only the changed preference
                });

                if (response.ok) {
                    console.log('Successfully saved view preference to API.');
                } else {
                    const errorData = await response.json().catch(() => ({}));
                    console.warn(`Failed to save view preference to API: ${response.status}`, errorData.message || '');
                    // Optional: Show a non-intrusive warning toast?
                    // showToast('Failed to sync view preference with server.', 'warning'); 
                }
            } catch (error) {
                console.error('Error saving view preference to API:', error);
                // Optional: Show a non-intrusive warning toast?
                // showToast('Error syncing view preference with server.', 'error'); 
            }
        } else {
            console.warn('Cannot save view preference to API: No auth token found.');
        }
    } else if (!saveToApi) {
        console.log('Skipping API save as saveToApi is false (likely called from loadViewPreference).');
    } else {
        console.warn('Cannot save view preference to API: User not authenticated or auth module not loaded.');
    }
    // --- END MODIFIED: Save preference to API ---

    // Make sure warrantiesList exists before modifying classes
    if (warrantiesList) {
        warrantiesList.classList.remove('grid-view', 'list-view', 'table-view');
        warrantiesList.classList.add(`${viewType}-view`);
    }

    // Make sure view buttons exist
    if (gridViewBtn && listViewBtn && tableViewBtn) {
        gridViewBtn.classList.remove('active');
        listViewBtn.classList.remove('active');
        tableViewBtn.classList.remove('active');
        // Add active class to the correct button
        if (viewType === 'grid') gridViewBtn.classList.add('active');
        if (viewType === 'list') listViewBtn.classList.add('active');
        if (viewType === 'table') tableViewBtn.classList.add('active');
    }
    
    // Show/hide table header only if it exists
    if (tableViewHeader) {
        tableViewHeader.classList.toggle('visible', viewType === 'table');
    }

    // Re-render warranties only if warrantiesList exists AND warranties have been loaded from API
    if (warrantiesList && warrantiesLoaded) {
        renderWarranties(filterWarranties()); // Assuming filterWarranties() returns the correct array
    }
}

// Load view preference from localStorage
function loadViewPreference() {
    // Get the appropriate key prefix based on user type
    const prefix = getPreferenceKeyPrefix();
    let savedView = null;

    // --- BEGIN EDIT: Check keys in priority order ---
    const userSpecificView = localStorage.getItem(`${prefix}defaultView`);
    const generalView = localStorage.getItem('viewPreference');
    const legacyWarrantyView = localStorage.getItem(`${prefix}warrantyView`);

    if (userSpecificView) {
        savedView = userSpecificView;
        console.log(`Loaded view preference from ${prefix}defaultView:`, savedView);
    } else if (generalView) {
        savedView = generalView;
        console.log('Loaded view preference from viewPreference:', savedView);
    } else if (legacyWarrantyView) {
        savedView = legacyWarrantyView;
        console.log(`Loaded view preference from legacy ${prefix}warrantyView:`, savedView);
    }
    // --- END EDIT ---

    // Default to grid view if no preference is saved
    savedView = savedView || 'grid';

    console.log(`Applying view preference from loadViewPreference: ${savedView}`);
    // Switch view only if view buttons exist (implying it's the main page)
    if (gridViewBtn || listViewBtn || tableViewBtn) {
        switchView(savedView, false); // Pass false to prevent API save on initial load
    }
}

// Dark mode toggle
if (darkModeToggle) { // Add check for darkModeToggle
    darkModeToggle.addEventListener('change', (e) => {
        setTheme(e.target.checked);
    });
}

// Add event listener for adding new serial number inputs
// Add check for serialNumbersContainer before adding listener
if (serialNumbersContainer) {
    serialNumbersContainer.addEventListener('click', (e) => {
        if (e.target.closest('.add-serial-number')) {
            addSerialNumberInput();
        }
    });
}

// Add a serial number input field
function addSerialNumberInput(container = serialNumbersContainer) {
    // Check if the container exists before proceeding
    if (!container) {
        console.warn('Serial numbers container not found, cannot add input.');
        return;
    }

    const div = document.createElement('div');
    div.className = 'serial-number-input d-flex mb-2';
    
    // Create an input element
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'form-control';
    input.name = 'serial_numbers[]';
    input.placeholder = window.i18next ? window.i18next.t('warranties.enter_serial_number') : 'Enter serial number';
    console.log('i18next available for serial number placeholder:', !!window.i18next);
    if (window.i18next) {
        console.log('Translation for warranties.enter_serial_number:', window.i18next.t('warranties.enter_serial_number'));
    }
    
    // Check if this is the first serial number input
    const isFirstInput = container.querySelectorAll('.serial-number-input').length === 0;
    
    // Append input to the input group
    div.appendChild(input);
    
    // Only add remove button if this is not the first input
    if (!isFirstInput) {
        // Create a remove button
        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.className = 'btn btn-sm btn-danger remove-serial';
        removeButton.innerHTML = '<i class="fas fa-times"></i>';
        
        // Add event listener to remove button
        removeButton.addEventListener('click', function() {
            container.removeChild(div);
        });
        
        // Append remove button to the input group
        div.appendChild(removeButton);
    }
    
    // Insert the new input group before the add button
    const addButton = container.querySelector('.add-serial');
    if (addButton) {
        container.insertBefore(div, addButton);
    } else {
        container.appendChild(div);
        
        // Create and append an add button if it doesn't exist
        const addButton = document.createElement('button');
        addButton.type = 'button';
        addButton.className = 'btn btn-sm btn-secondary add-serial';
        addButton.innerHTML = '<i class="fas fa-plus"></i> ' + (window.i18next ? window.i18next.t('warranties.add_serial_number') : 'Add Serial Number');
        console.log('i18next available in addSerialNumberInput:', !!window.i18next);
        if (window.i18next) {
            console.log('Translation for warranties.add_serial_number:', window.i18next.t('warranties.add_serial_number'));
        }
        
        addButton.addEventListener('click', function() {
            addSerialNumberInput(container);
        });
        
        container.appendChild(addButton);
    }
}

// Functions
function showLoading() {
    let localLoadingContainer = window.loadingContainer || document.getElementById('loadingContainer');
    if (localLoadingContainer) {
        localLoadingContainer.classList.add('active');
        window.loadingContainer = localLoadingContainer; // Update global reference if found
    } else {
        console.error('WarrackerDebug: loadingContainer element not found by showLoading(). Ensure it exists in the HTML and script.js is loaded after it.');
    }
}

function hideLoading() {
    let localLoadingContainer = window.loadingContainer || document.getElementById('loadingContainer');
    if (localLoadingContainer) {
        localLoadingContainer.classList.remove('active');
        window.loadingContainer = localLoadingContainer; // Update global reference if found
    } else {
        console.error('WarrackerDebug: loadingContainer element not found by hideLoading().');
    }
}

function showToast(message, type = 'info', duration = 5000) {
    // Check if a toast with the same message and type already exists
    const existingToasts = document.querySelectorAll(`.toast.toast-${type}`);
    for (let i = 0; i < existingToasts.length; i++) {
        const span = existingToasts[i].querySelector('span');
        if (span && span.textContent === message) {
            return existingToasts[i]; // Don't create a new one
        }
    }

    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    
    const icon = document.createElement('i');
    switch (type) {
        case 'success':
            icon.className = 'fas fa-check-circle';
            break;
        case 'error':
            icon.className = 'fas fa-exclamation-circle';
            break;
        case 'warning':
            icon.className = 'fas fa-exclamation-triangle';
            break;
        default:
            icon.className = 'fas fa-info-circle';
    }
    
    const messageSpan = document.createElement('span');
    messageSpan.textContent = message;
    
    toast.appendChild(icon);
    toast.appendChild(messageSpan);
    
    toastContainer.appendChild(toast);
    
    // Add a method to remove the toast
    toast.remove = function() {
        toast.classList.add('toast-fade-out');
        setTimeout(() => {
            if (toast.parentNode) {
                toast.parentNode.removeChild(toast);
            }
        }, 300);
    };
    
    // Auto-hide toast after specified duration (if not 0)
    if (duration > 0) {
        setTimeout(() => {
            toast.remove();
        }, duration);
    }
    
    return toast;
}

// Update file name display when a file is selected
function updateFileName(event, inputId = 'invoice', outputId = 'fileName') {
    const file = event.target.files[0];
    const output = document.getElementById(outputId);
    
    if (file && output) {
        output.textContent = file.name;
    } else if (output) {
        output.textContent = '';
    }
    
    // Handle photo preview for product photo
    if (inputId === 'productPhoto' || inputId === 'editProductPhoto') {
        const previewId = inputId === 'productPhoto' ? 'productPhotoPreview' : 'editProductPhotoPreview';
        const imgId = inputId === 'productPhoto' ? 'productPhotoImg' : 'editProductPhotoImg';
        const preview = document.getElementById(previewId);
        const img = document.getElementById(imgId);
        
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            preview.style.display = 'none';
        }
    }
}

// Helper function to process warranty data
function processWarrantyData(warranty) {
    console.log('Processing warranty data:', warranty);
    
    // Create a copy of the warranty object to avoid modifying the original
    const processedWarranty = { ...warranty };
    
    // Ensure product_name exists
    if (!processedWarranty.product_name) {
        processedWarranty.product_name = 'Unnamed Product';
    }
    
    const today = new Date();
    today.setHours(0, 0, 0, 0); // Normalize today to midnight for accurate date comparisons

    // Parse purchase_date string (YYYY-MM-DD) into a UTC Date object
    let purchaseDateObj = null;
    if (processedWarranty.purchase_date) {
        const parts = String(processedWarranty.purchase_date).split('-');
        if (parts.length === 3) {
            const year = parseInt(parts[0], 10);
            const month = parseInt(parts[1], 10) - 1; // JS months are 0-indexed
            const day = parseInt(parts[2], 10);
            purchaseDateObj = new Date(Date.UTC(year, month, day));
            if (isNaN(purchaseDateObj.getTime())) {
                 purchaseDateObj = null; // Invalid date parsed
            }
        } else {
            // Fallback for unexpected formats, though backend should send YYYY-MM-DD
            purchaseDateObj = new Date(processedWarranty.purchase_date);
             if (isNaN(purchaseDateObj.getTime())) {
                 purchaseDateObj = null; 
            }
        }
    }
    processedWarranty.purchaseDate = purchaseDateObj;
    
    // Parse expiration_date similarly (assuming it's also YYYY-MM-DD)
    let expirationDateObj = null;
    if (processedWarranty.expiration_date) {
        const parts = String(processedWarranty.expiration_date).split('-');
        if (parts.length === 3) {
            const year = parseInt(parts[0], 10);
            const month = parseInt(parts[1], 10) - 1;
            const day = parseInt(parts[2], 10);
            expirationDateObj = new Date(Date.UTC(year, month, day));
             if (isNaN(expirationDateObj.getTime())) {
                 expirationDateObj = null;
            }
        } else {
            expirationDateObj = new Date(processedWarranty.expiration_date);
             if (isNaN(expirationDateObj.getTime())) {
                 expirationDateObj = null;
            }
        }
    }
    processedWarranty.expirationDate = expirationDateObj;

    // --- Lifetime Handling ---
    if (processedWarranty.is_lifetime) {
        processedWarranty.status = 'active';
        processedWarranty.statusText = window.i18next ? window.i18next.t('warranties.lifetime') : 'Lifetime';
        processedWarranty.daysRemaining = Infinity;
        // Ensure duration components are 0 for lifetime
        processedWarranty.warranty_duration_years = 0;
        processedWarranty.warranty_duration_months = 0;
        processedWarranty.warranty_duration_days = 0;
    } else if (processedWarranty.expirationDate && !isNaN(processedWarranty.expirationDate.getTime())) {
        // Existing logic for dated warranties
        const expirationDateOnly = new Date(processedWarranty.expirationDate);
        expirationDateOnly.setHours(0,0,0,0);

        const timeDiff = expirationDateOnly - today;
        const daysRemaining = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));
        processedWarranty.daysRemaining = daysRemaining;

        if (daysRemaining < 0) {
            processedWarranty.status = 'expired';
            processedWarranty.statusText = window.i18next ? window.i18next.t('warranties.expired') : 'Expired';
        } else if (daysRemaining < expiringSoonDays) {
            processedWarranty.status = 'expiring';
            const dayText = window.i18next ? 
                window.i18next.t('warranties.day', {count: daysRemaining}) :
                `day${daysRemaining !== 1 ? 's' : ''}`;
            processedWarranty.statusText = window.i18next ? 
                window.i18next.t('warranties.days_remaining', {days: daysRemaining, dayText: dayText}) :
                `${daysRemaining} day${daysRemaining !== 1 ? 's' : ''} remaining`;
        } else {
            processedWarranty.status = 'active';
            const dayText = window.i18next ? 
                window.i18next.t('warranties.day', {count: daysRemaining}) :
                `day${daysRemaining !== 1 ? 's' : ''}`;
            processedWarranty.statusText = window.i18next ? 
                window.i18next.t('warranties.days_remaining', {days: daysRemaining, dayText: dayText}) :
                `${daysRemaining} day${daysRemaining !== 1 ? 's' : ''} remaining`;
        }
        
        // Preserve original duration values to detect input method
        const originalYears = processedWarranty.warranty_duration_years || 0;
        const originalMonths = processedWarranty.warranty_duration_months || 0;
        const originalDays = processedWarranty.warranty_duration_days || 0;
        
        // Track the original input method based on duration values
        const wasExactDateMethod = originalYears === 0 && originalMonths === 0 && originalDays === 0;
        processedWarranty.original_input_method = wasExactDateMethod ? 'exact_date' : 'duration';
        
        // Calculate duration from dates if all duration components are 0 (exact date method was used)
        const hasNoDuration = originalYears === 0 && originalMonths === 0 && originalDays === 0;
        
        if (hasNoDuration && purchaseDateObj && processedWarranty.expirationDate) {
            console.log('[DEBUG] Calculating duration from dates for exact date warranty');
            const calculatedDuration = calculateDurationFromDates(
                purchaseDateObj.toISOString().split('T')[0], 
                processedWarranty.expirationDate.toISOString().split('T')[0]
            );
            if (calculatedDuration) {
                // Store calculated duration for display purposes
                processedWarranty.display_duration_years = calculatedDuration.years;
                processedWarranty.display_duration_months = calculatedDuration.months;
                processedWarranty.display_duration_days = calculatedDuration.days;
                console.log('[DEBUG] Calculated duration:', calculatedDuration);
                
                // Keep original values at 0 to preserve input method detection
                processedWarranty.warranty_duration_years = 0;
                processedWarranty.warranty_duration_months = 0;
                processedWarranty.warranty_duration_days = 0;
            }
        } else {
            // Use original duration values for display
            processedWarranty.display_duration_years = originalYears;
            processedWarranty.display_duration_months = originalMonths;
            processedWarranty.display_duration_days = originalDays;
        }
    } else {
        processedWarranty.status = 'unknown';
        processedWarranty.statusText = window.i18next ? window.i18next.t('warranties.unknown_status') : 'Unknown Status';
        processedWarranty.daysRemaining = null;
    }

    console.log('Processed warranty data result:', processedWarranty);
    return processedWarranty;
}

// Function to process all warranties in the array
function processAllWarranties() {
    console.log('Processing all warranties in array...');
    if (warranties && warranties.length > 0) {
        warranties = warranties.map(warranty => processWarrantyData(warranty));
    }
    console.log('Processed warranties:', warranties);
}

async function loadWarranties(isAuthenticated) { // Added isAuthenticated parameter
    // +++ REMOVED: Ensure Preferences are loaded FIRST (Now handled by authStateReady) +++
    // await loadAndApplyUserPreferences(); 
    // +++ Preferences Loaded +++
    
    try {
        console.log('[DEBUG] Entered loadWarranties, isAuthenticated:', isAuthenticated);
        
        // Reset the flag when starting to load warranties
        warrantiesLoaded = false;
        
        showLoading();
        
        // Fetch user preferences (including date format) before loading warranties
        // --- THIS INNER PREFERENCE FETCH IS NOW REDUNDANT, REMOVE/COMMENT OUT --- 
        /*
        try {
            const token = window.auth.getToken(); // Ensure token is retrieved here
            if (!token) throw new Error("No auth token found"); // Added error handling

            const prefsResponse = await fetch('/api/auth/preferences', {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            
            if (prefsResponse.ok) {
                const prefsData = await prefsResponse.json();
                console.log("Preferences fetched in loadWarranties:", prefsData);
                
                // Update expiringSoonDays
                if (prefsData && typeof prefsData.expiring_soon_days !== 'undefined') {
                    const oldValue = expiringSoonDays;
                    expiringSoonDays = prefsData.expiring_soon_days;
                    console.log('Updated expiring soon days from preferences:', expiringSoonDays);
                    // Reprocess logic moved below warranty fetch
                }

                // --- ADDED: Update dateFormat in localStorage --- 
                if (prefsData && typeof prefsData.date_format !== 'undefined') {
                    const oldDateFormat = localStorage.getItem('dateFormat');
                    localStorage.setItem('dateFormat', prefsData.date_format);
                    console.log(`Updated dateFormat in localStorage from API: ${prefsData.date_format}`);
                    // Trigger re-render if format changed and warranties already exist (though unlikely at this stage)
                    if (warranties && warranties.length > 0 && oldDateFormat !== prefsData.date_format) {
                        console.log('Date format changed, triggering re-render via applyFilters');
                        applyFilters(); // Re-render warranties with new format
                    }
                } else {
                     // If API doesn't return date_format, ensure localStorage has a default
                     if (!localStorage.getItem('dateFormat')) {
                         localStorage.setItem('dateFormat', 'MDY');
                         console.log('API did not return date_format, setting localStorage default to MDY');
                     }
                }
                // --- END ADDED SECTION ---

            } else {
                 // Handle failed preference fetch
                 console.warn('Failed to fetch preferences:', prefsResponse.status);
                 // Ensure a default date format exists if fetch fails
                 if (!localStorage.getItem('dateFormat')) {
                     localStorage.setItem('dateFormat', 'MDY');
                     console.log('Preferences fetch failed, setting localStorage default date format to MDY');
                 }
            }
        } catch (error) {
            console.error('Error loading preferences:', error);
            // Ensure a default date format exists on error
            if (!localStorage.getItem('dateFormat')) {
                localStorage.setItem('dateFormat', 'MDY');
                console.log('Error fetching preferences, setting localStorage default date format to MDY');
            }
            // Continue loading warranties even if preferences fail
        }
        */
        // --- END REDUNDANT PREFERENCE FETCH ---
        
        // Check saved view scope preference to determine which API endpoint to use
        const savedScope = loadViewScopePreference();
        const shouldUseGlobalView = savedScope === 'global';
        
        // Use the appropriate API endpoint based on saved preference
        const baseUrl = window.location.origin;
        const apiUrl = shouldUseGlobalView ? `${baseUrl}/api/warranties/global` : `${baseUrl}/api/warranties`;
        
        console.log(`[DEBUG] Using API endpoint based on saved preference '${savedScope}': ${apiUrl}`);
        
        // Check if auth is available and user is authenticated using the passed parameter
        if (!isAuthenticated) {
            console.log('[DEBUG] loadWarranties: Early return - User not authenticated based on passed parameter.');
            renderEmptyState(window.t('messages.login_to_view_warranties'));
            hideLoading();
            return;
        }
        // Get the auth token
        const token = window.auth.getToken();
        if (!token) {
            console.log('[DEBUG] Early return: No auth token available');
            renderEmptyState(window.t('messages.authentication_error_login_again'));
            hideLoading();
            return;
        }
        
        // Create request with auth header
        const options = {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        };
        
        console.log('Fetching warranties with auth token');
        const response = await fetch(apiUrl, options);
        if (!response.ok) {
            const errorData = await response.json().catch(() => ({ message: `HTTP error ${response.status}` }));
            console.error('Error loading warranties:', response.status, errorData);
            throw new Error(`Error loading warranties: ${errorData.message || response.status}`);
        }
        const data = await response.json();
        console.log('[DEBUG] Received warranties from server:', data);
        if (!Array.isArray(data)) {
            console.error('[DEBUG] API did not return an array! Data:', data);
        }
        
        // Update isGlobalView to match the loaded data
        isGlobalView = shouldUseGlobalView;
        console.log(`[DEBUG] Set isGlobalView to: ${isGlobalView}`);
        // Process each warranty to calculate status and days remaining
        warranties = Array.isArray(data) ? data.map(warranty => {
            const processed = processWarrantyData(warranty);
            console.log('[DEBUG] Processed warranty:', processed);
            return processed;
        }) : [];
        console.log('[DEBUG] Final warranties array:', warranties);
        console.log('[DEBUG] Total warranties loaded:', warranties.length);
        console.log('[DEBUG] Warranty IDs loaded:', warranties.map(w => w.id));
        
        // Set flag to indicate warranties have been loaded from API
        warrantiesLoaded = true;
        
        if (warranties.length === 0) {
            console.log('No warranties found, showing empty state');
            renderEmptyState(window.t('messages.no_warranties_found_add_first'));
        } else {
            console.log('Applying filters to display warranties');
            
            // Populate tag filter dropdown with tags from warranties
            populateTagFilter();
            populateVendorFilter(); // Added call to populate vendor filter
            populateWarrantyTypeFilter(); // Added call to populate warranty type filter
            
            // REMOVED: applyFilters(); // Now called from authStateReady after data and prefs are loaded
        }
    } catch (error) {
        console.error('[DEBUG] Error loading warranties:', error);
        warrantiesLoaded = false; // Reset flag on error
        renderEmptyState(window.t('messages.error_loading_warranties_try_again'));
    } finally {
        hideLoading();
    }
}

function renderEmptyState(message = 'No warranties yet. Add your first warranty to get started.') {
    warrantiesList.innerHTML = `
        <div class="empty-state">
            <i class="fas fa-box-open"></i>
            <h3>No warranties found</h3>
            <p>${message}</p>
        </div>
    `;
}

function formatDate(date) {
    // Input 'date' should now be a Date object created by processWarrantyData (or null)
    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
        return 'N/A';
    }

    // Get the user's preferred format from localStorage, default to MDY
    const formatPreference = localStorage.getItem('dateFormat') || 'MDY';

    // Manually extract UTC components to avoid timezone discrepancies
    const year = date.getUTCFullYear();
    const monthIndex = date.getUTCMonth(); // 0-indexed for month names array
    const day = date.getUTCDate();

    // Padded numeric values
    const monthPadded = (monthIndex + 1).toString().padStart(2, '0');
    const dayPadded = day.toString().padStart(2, '0');

    // Abbreviated month names
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    const monthAbbr = monthNames[monthIndex];

    switch (formatPreference) {
        case 'DMY':
            return `${dayPadded}/${monthPadded}/${year}`;
        case 'YMD':
            return `${year}-${monthPadded}-${dayPadded}`;
        case 'MDY_WORDS': // Added
            return `${monthAbbr} ${day}, ${year}`;
        case 'DMY_WORDS': // Added
            return `${day} ${monthAbbr} ${year}`;
        case 'YMD_WORDS': // Added
            return `${year} ${monthAbbr} ${day}`;
        case 'MDY':
        default:
            return `${monthPadded}/${dayPadded}/${year}`;
    }
}

function formatDateYYYYMMDD(date) {
    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
        return 'N/A';
    }

    const year = date.getUTCFullYear();
    const month = String(date.getUTCMonth() + 1).padStart(2, '0');
    const day = String(date.getUTCDate()).padStart(2, '0');

    return `${year}-${month}-${day}`;
}

/**
 * Calculate the age of a product from purchase date to now
 * @param {string|Date} purchaseDate - The purchase date
 * @returns {string} - Formatted age string (e.g., "2 years, 3 months", "6 months", "15 days")
 */
function calculateProductAge(purchaseDate) {
    if (!purchaseDate) return 'Unknown';
    
    const purchase = new Date(purchaseDate);
    const now = new Date();
    
    if (isNaN(purchase.getTime()) || purchase > now) {
        return 'Unknown';
    }
    
    // Calculate the difference
    let years = now.getFullYear() - purchase.getFullYear();
    let months = now.getMonth() - purchase.getMonth();
    let days = now.getDate() - purchase.getDate();
    
    // Adjust for negative days
    if (days < 0) {
        months--;
        const lastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
        days += lastMonth.getDate();
    }
    
    // Adjust for negative months
    if (months < 0) {
        years--;
        months += 12;
    }
    
    // Format the result
    const parts = [];
    if (years > 0) {
        const yearText = window.i18next ? window.i18next.t('warranties.year', {count: years}) : `year${years !== 1 ? 's' : ''}`;
        parts.push(`${years} ${yearText}`);
    }
    if (months > 0) {
        const monthText = window.i18next ? window.i18next.t('warranties.month', {count: months}) : `month${months !== 1 ? 's' : ''}`;
        parts.push(`${months} ${monthText}`);
    }
    if (days > 0 && years === 0) { // Only show days if less than a year old
        const dayText = window.i18next ? window.i18next.t('warranties.day', {count: days}) : `day${days !== 1 ? 's' : ''}`;
        parts.push(`${days} ${dayText}`);
    }
    
    if (parts.length === 0) {
        return 'Today'; // Purchased today
    }
    
    return parts.join(', ');
}

/**
 * Calculate the age of a product in days for sorting purposes
 * @param {string|Date} purchaseDate - The purchase date
 * @returns {number} - Age in days (0 if invalid date)
 */
function calculateProductAgeInDays(purchaseDate) {
    if (!purchaseDate) return 0;
    
    const purchase = new Date(purchaseDate);
    const now = new Date();
    
    if (isNaN(purchase.getTime()) || purchase > now) {
        return 0;
    }
    
    // Calculate difference in milliseconds and convert to days
    const diffTime = now.getTime() - purchase.getTime();
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
    
    return diffDays;
}

async function renderWarranties(warrantiesToRender) {
    console.log('renderWarranties called with:', warrantiesToRender);

    // Guard clause: If the main warrantiesList element doesn't exist on the current page, exit.
    // This can happen if saveWarranty -> applyFilters -> renderWarranties is called from a page
    // that doesn't have the main list view (e.g., the status page).
    if (!warrantiesList) {
        console.warn('renderWarranties: warrantiesList element not found. Aborting render. This might be normal if not on the main warranties page.');
        return;
    }

    if (!warrantiesToRender || warrantiesToRender.length === 0) {
        renderEmptyState(); // renderEmptyState should also check for warrantiesList or its specific container
        return;
    }
    
    const today = new Date();
    const globalSymbol = getCurrencySymbol(); // Get the global symbol as fallback
    
    warrantiesList.innerHTML = '';
    
    // Apply sorting based on current sort selection
    const sortedWarranties = [...warrantiesToRender].sort((a, b) => {
        switch (currentFilters.sortBy) {
            case 'name':
                return (a.product_name || '').toLowerCase().localeCompare((b.product_name || '').toLowerCase());
            case 'purchase':
                return new Date(b.purchase_date || 0) - new Date(a.purchase_date || 0);
            case 'age': // Added age sorting
                return calculateProductAgeInDays(b.purchase_date) - calculateProductAgeInDays(a.purchase_date); // Oldest first
            case 'vendor': // Added vendor sorting
                return (a.vendor || '').toLowerCase().localeCompare((b.vendor || '').toLowerCase());
            case 'warranty_type': // Added warranty type sorting
                return (a.warranty_type || '').toLowerCase().localeCompare((b.warranty_type || '').toLowerCase());
            case 'expiration':
            default:
                const dateA = new Date(a.expiration_date || 0);
                const dateB = new Date(b.expiration_date || 0);
                
                const isExpiredA = dateA < today;
                const isExpiredB = dateB < today;
                
                if (isExpiredA && !isExpiredB) return 1;
                if (!isExpiredA && isExpiredB) return -1;
                
                // Both active or both expired, sort by date
                return dateA - dateB;
        }
    });
    
    console.log('Sorted warranties:', sortedWarranties);
    
    // Update the container class based on current view
    warrantiesList.className = `warranties-list ${currentView}-view`;
    
    // Show/hide table header for table view
    if (tableViewHeader) {
        tableViewHeader.classList.toggle('visible', currentView === 'table');
    }
    
    // Update view buttons to reflect current view
    if (gridViewBtn && listViewBtn && tableViewBtn) {
        gridViewBtn.classList.toggle('active', currentView === 'grid');
        listViewBtn.classList.toggle('active', currentView === 'list');
        tableViewBtn.classList.toggle('active', currentView === 'table');
    }
    
    sortedWarranties.forEach(warranty => {
        // --- Use processed data ---
        const purchaseDate = warranty.purchaseDate;
        const expirationDate = warranty.expirationDate;
        const isLifetime = warranty.is_lifetime;
        const statusClass = warranty.status || 'unknown';
        const statusText = warranty.statusText || 'Unknown Status';
        // Format warranty duration text
        let warrantyDurationText = window.i18next ? window.i18next.t('warranties.na') : 'N/A';
        if (isLifetime) {
            warrantyDurationText = window.i18next ? window.i18next.t('warranties.lifetime') : 'Lifetime';
        } else {
            // Use display_duration values if available, otherwise fall back to warranty_duration values
            const years = warranty.display_duration_years !== undefined ? warranty.display_duration_years : (warranty.warranty_duration_years || 0);
            const months = warranty.display_duration_months !== undefined ? warranty.display_duration_months : (warranty.warranty_duration_months || 0);
            const days = warranty.display_duration_days !== undefined ? warranty.display_duration_days : (warranty.warranty_duration_days || 0);
            
            // If all duration fields are 0 but we have expiration date, calculate from dates
            if (years === 0 && months === 0 && days === 0 && warranty.expiration_date && warranty.purchase_date) {
                const calculatedDuration = calculateDurationFromDates(warranty.purchase_date, warranty.expiration_date);
                if (calculatedDuration) {
                    let parts = [];
                    if (calculatedDuration.years > 0) {
                        const yearText = window.i18next ? window.i18next.t('warranties.year', {count: calculatedDuration.years}) : `year${calculatedDuration.years !== 1 ? 's' : ''}`;
                        parts.push(`${calculatedDuration.years} ${yearText}`);
                    }
                    if (calculatedDuration.months > 0) {
                        const monthText = window.i18next ? window.i18next.t('warranties.month', {count: calculatedDuration.months}) : `month${calculatedDuration.months !== 1 ? 's' : ''}`;
                        parts.push(`${calculatedDuration.months} ${monthText}`);
                    }
                    if (calculatedDuration.days > 0) {
                        const dayText = window.i18next ? window.i18next.t('warranties.day', {count: calculatedDuration.days}) : `day${calculatedDuration.days !== 1 ? 's' : ''}`;
                        parts.push(`${calculatedDuration.days} ${dayText}`);
                    }
                    if (parts.length > 0) {
                        warrantyDurationText = parts.join(', ');
                    }
                }
            } else {
                // Use the stored/calculated duration fields
                let parts = [];
                if (years > 0) {
                    const yearText = window.i18next ? window.i18next.t('warranties.year', {count: years}) : `year${years !== 1 ? 's' : ''}`;
                    parts.push(`${years} ${yearText}`);
                }
                if (months > 0) {
                    const monthText = window.i18next ? window.i18next.t('warranties.month', {count: months}) : `month${months !== 1 ? 's' : ''}`;
                    parts.push(`${months} ${monthText}`);
                }
                if (days > 0) {
                    const dayText = window.i18next ? window.i18next.t('warranties.day', {count: days}) : `day${days !== 1 ? 's' : ''}`;
                    parts.push(`${days} ${dayText}`);
                }
                if (parts.length > 0) {
                    warrantyDurationText = parts.join(', ');
                }
            }
        }
        const expirationDateText = isLifetime ? (window.i18next ? window.i18next.t('warranties.lifetime') : 'Lifetime') : formatDate(expirationDate);
        
        // Calculate product age
        const productAge = calculateProductAge(warranty.purchase_date);
        
        // Make sure serial numbers array exists and is valid
        const validSerialNumbers = Array.isArray(warranty.serial_numbers) 
            ? warranty.serial_numbers.filter(sn => sn && typeof sn === 'string' && sn.trim() !== '')
            : [];
        // Prepare user info HTML for global view
        let userInfoHtml = '';
        if (isGlobalView && warranty.user_display_name) {
            const ownerLabel = window.i18next ? window.i18next.t('warranties.owner') : 'Owner';
            userInfoHtml = `<div><strong>${ownerLabel}:</strong> <span>${warranty.user_display_name}</span></div>`;
        }
        
        // Prepare tags HTML
        const tagsHtml = warranty.tags && warranty.tags.length > 0 
            ? `<div class="tags-row">
                ${warranty.tags.map(tag => 
                    `<span class="tag" style="background-color: ${tag.color}; color: ${getContrastColor(tag.color)}">
                        ${tag.name}
                    </span>`
                ).join('')}
              </div>`
            : '';
        // Add notes display button if present
        let notesHtml = '';
        const hasNotes = warranty.notes && warranty.notes.trim() !== '';
        // Remove the button, and instead prepare a notes link for document-links-row
        let notesLinkHtml = '';
        if (hasNotes) {
            const notesLabel = window.i18next ? window.i18next.t('warranties.notes') : 'Notes';
            notesLinkHtml = `<a href="#" class="notes-link" data-id="${warranty.id}" title="View Notes"><i class='fas fa-sticky-note'></i> ${notesLabel}</a>`;
        }
        
        const hasDocuments = warranty.product_url || warranty.invoice_path || warranty.manual_path || warranty.other_document_path || hasNotes;
        
        // Get current user ID to check warranty ownership
        const currentUserId = (() => {
            try {
                const userInfo = JSON.parse(localStorage.getItem('user_info') || '{}');
                return userInfo.id;
            } catch (e) {
                return null;
            }
        })();
        
        // Check if current user can edit/delete this warranty
        // Allow if: not in global view, user owns the warranty, or user is admin
        const isAdmin = getUserType() === 'admin';
        const canEdit = !isGlobalView || (warranty.user_id === currentUserId) || isAdmin;
        
        // Generate action buttons HTML based on permissions
        const actionButtonsHtml = canEdit ? `
            <button class="action-btn edit-btn" title="Edit" data-id="${warranty.id}">
                <i class="fas fa-edit"></i>
            </button>
            <button class="action-btn delete-btn" title="Delete" data-id="${warranty.id}">
                <i class="fas fa-trash"></i>
            </button>
        ` : `
            <span class="action-btn-placeholder" title="View only - not your warranty">
                <i class="fas fa-eye" style="color: #666;"></i>
            </span>
        `;

        const cardElement = document.createElement('div');
        cardElement.className = `warranty-card ${statusClass === 'expired' ? 'expired' : statusClass === 'expiring' ? 'expiring-soon' : 'active'}`;
        
        if (currentView === 'grid') {
            // Grid view HTML structure
            const photoThumbnailHtml = warranty.product_photo_path && warranty.product_photo_path !== 'null' ? `
                <div class="product-photo-thumbnail">
                    <a href="#" onclick="openSecureFile('${warranty.product_photo_path}'); return false;" title="Click to view full size image">
                        <img data-secure-src="/api/secure-file/${warranty.product_photo_path.replace('uploads/', '')}" alt="Product Photo" 
                             style="width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 2px solid var(--border-color); cursor: pointer;"
                             onerror="this.style.display='none'" class="secure-image">
                    </a>
                </div>
            ` : '';
            
            cardElement.innerHTML = `
                <div class="product-name-header">
                    <h3 class="warranty-title" title="${warranty.product_name || 'Unnamed Product'}">${warranty.product_name || 'Unnamed Product'}</h3>
                    <div class="warranty-actions">
                        ${actionButtonsHtml}
                    </div>
                </div>
                <div class="warranty-content">
                    ${photoThumbnailHtml}
                    <div class="warranty-info">
                        ${userInfoHtml}
                        <div><i class="fas fa-calendar"></i> ${window.i18next ? window.i18next.t('warranties.age') : 'Age'}: <span>${productAge}</span></div>
                        <div><i class="fas fa-file-alt"></i> ${window.i18next ? window.i18next.t('warranties.warranty') : 'Warranty'}: <span>${warrantyDurationText}</span></div>
                        <div><i class="fas fa-wrench"></i> ${window.i18next ? window.i18next.t('warranties.warranty_ends') : 'Warranty Ends'}: <span>${expirationDateText}</span></div>
                        ${warranty.purchase_price ? `<div><i class="fas fa-coins"></i> ${window.i18next ? window.i18next.t('warranties.price') : 'Price'}: <span>${formatCurrencyHTML(warranty.purchase_price, warranty.currency ? getCurrencySymbolByCode(warranty.currency) : getCurrencySymbol(), getCurrencyPosition())}</span></div>` : ''}
                        ${validSerialNumbers.length > 0 ? `
                            <div><i class="fas fa-barcode"></i> ${window.i18next ? window.i18next.t('warranties.serial_number') : 'Serial Number'}: <span>${validSerialNumbers[0]}</span></div>
                            ${validSerialNumbers.length > 1 ? `
                                <div style="margin-left: 28px;">
                                    <ul style="margin-top: 5px;">
                                        ${validSerialNumbers.slice(1).map(sn => `<li>${sn}</li>`).join('')}
                                    </ul>
                                </div>
                            ` : ''}
                        ` : ''}
                        ${warranty.vendor ? `<div><i class="fas fa-store"></i> ${window.i18next ? window.i18next.t('warranties.vendor') : 'Vendor'}: <span>${warranty.vendor}</span></div>` : ''}
                        ${warranty.warranty_type ? `<div><i class="fas fa-shield-alt"></i> ${window.i18next ? window.i18next.t('warranties.type') : 'Type'}: <span>${warranty.warranty_type}</span></div>` : ''}
                    </div>
                </div>
                ${hasDocuments ? `
                <div class="document-links-row">
                    <div class="document-links-inner-container">
                        ${warranty.product_url ? `
                            <a href="${warranty.product_url}" class="product-link" target="_blank">
                                <i class="fas fa-globe"></i> ${window.i18next ? window.i18next.t('warranties.product_website') : 'Product Website'}
                            </a>
                        ` : ''}
                        ${generateDocumentLink(warranty, 'invoice')}
                        ${generateDocumentLink(warranty, 'manual')}
                        ${generateDocumentLink(warranty, 'other')}
                        ${notesLinkHtml}
                    </div>
                </div>
                ` : ''}
                ${tagsHtml}
                <div class="warranty-status-row status-${statusClass}">
                    <span>${statusText}</span>
                </div>
            `;
        } else if (currentView === 'list') {
            // List view HTML structure
            const photoThumbnailHtml = warranty.product_photo_path && warranty.product_photo_path !== 'null' ? `
                <div class="product-photo-thumbnail">
                    <a href="#" onclick="openSecureFile('${warranty.product_photo_path}'); return false;" title="Click to view full size image">
                        <img data-secure-src="/api/secure-file/${warranty.product_photo_path.replace('uploads/', '')}" alt="Product Photo" 
                             style="width: 180px; height: 180px; object-fit: cover; border-radius: 6px; border: 2px solid var(--border-color); cursor: pointer;"
                             onerror="this.style.display='none'" class="secure-image">
                    </a>
                </div>
            ` : '';
            
            cardElement.innerHTML = `
                <div class="product-name-header">
                    <h3 class="warranty-title" title="${warranty.product_name || 'Unnamed Product'}">${warranty.product_name || 'Unnamed Product'}</h3>
                    <div class="warranty-actions">
                        ${actionButtonsHtml}
                    </div>
                </div>
                <div class="warranty-content">
                    ${photoThumbnailHtml}
                    <div class="warranty-info">
                        ${userInfoHtml}
                        <div><i class="fas fa-calendar"></i> ${window.i18next ? window.i18next.t('warranties.age') : 'Age'}: <span>${productAge}</span></div>
                        <div><i class="fas fa-file-alt"></i> ${window.i18next ? window.i18next.t('warranties.warranty') : 'Warranty'}: <span>${warrantyDurationText}</span></div>
                        <div><i class="fas fa-wrench"></i> ${window.i18next ? window.i18next.t('warranties.warranty_ends') : 'Warranty Ends'}: <span>${expirationDateText}</span></div>
                        ${warranty.purchase_price ? `<div><i class="fas fa-coins"></i> ${window.i18next ? window.i18next.t('warranties.price') : 'Price'}: <span>${formatCurrencyHTML(warranty.purchase_price, warranty.currency ? getCurrencySymbolByCode(warranty.currency) : getCurrencySymbol(), getCurrencyPosition())}</span></div>` : ''}
                        ${validSerialNumbers.length > 0 ? `
                            <div><i class="fas fa-barcode"></i> ${window.i18next ? window.i18next.t('warranties.serial_number') : 'Serial Number'}: <span>${validSerialNumbers[0]}</span></div>
                            ${validSerialNumbers.length > 1 ? `
                                <div style="margin-left: 28px;">
                                    <ul style="margin-top: 5px;">
                                        ${validSerialNumbers.slice(1).map(sn => `<li>${sn}</li>`).join('')}
                                    </ul>
                                </div>
                            ` : ''}
                        ` : ''}
                        ${warranty.vendor ? `<div><i class="fas fa-store"></i> ${window.i18next ? window.i18next.t('warranties.vendor') : 'Vendor'}: <span>${warranty.vendor}</span></div>` : ''}
                        ${warranty.warranty_type ? `<div><i class="fas fa-shield-alt"></i> ${window.i18next ? window.i18next.t('warranties.type') : 'Type'}: <span>${warranty.warranty_type}</span></div>` : ''}
                    </div>
                </div>
                ${hasDocuments ? `
                <div class="document-links-row">
                    <div class="document-links-inner-container">
                        ${warranty.product_url ? `
                            <a href="${warranty.product_url}" class="product-link" target="_blank">
                                <i class="fas fa-globe"></i> ${window.i18next ? window.i18next.t('warranties.product_website') : 'Product Website'}
                            </a>
                        ` : ''}
                        ${generateDocumentLink(warranty, 'invoice')}
                        ${generateDocumentLink(warranty, 'manual')}
                        ${generateDocumentLink(warranty, 'other')}
                        ${notesLinkHtml}
                    </div>
                </div>
                ` : ''}
                ${tagsHtml}
                <div class="warranty-status-row status-${statusClass}">
                    <span>${statusText}</span>
                </div>
            `;
        } else if (currentView === 'table') {
            // Table view HTML structure
            const photoThumbnailHtml = warranty.product_photo_path && warranty.product_photo_path !== 'null' ? `
                <div class="product-photo-thumbnail">
                    <a href="#" onclick="openSecureFile('${warranty.product_photo_path}'); return false;" title="Click to view full size image">
                        <img data-secure-src="/api/secure-file/${warranty.product_photo_path.replace('uploads/', '')}" alt="Product Photo" 
                             style="width: 55px; height: 55px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-color); cursor: pointer;"
                             onerror="this.style.display='none'" class="secure-image">
                    </a>
                </div>
            ` : '';
            
            cardElement.innerHTML = `
                <div class="product-name-header">
                    <h3 class="warranty-title" title="${warranty.product_name || 'Unnamed Product'}">${warranty.product_name || 'Unnamed Product'}</h3>
                    <div class="warranty-actions">
                        ${actionButtonsHtml}
                    </div>
                </div>
                <div class="warranty-content">
                    ${photoThumbnailHtml}
                    <div class="warranty-info">
                        ${userInfoHtml}
                        <div><i class="fas fa-calendar"></i> ${window.i18next ? window.i18next.t('warranties.age') : 'Age'}: <span>${productAge}</span></div>
                        <div><i class="fas fa-file-alt"></i> ${window.i18next ? window.i18next.t('warranties.warranty') : 'Warranty'}: <span>${warrantyDurationText}</span></div>
                        <div><i class="fas fa-wrench"></i> ${window.i18next ? window.i18next.t('warranties.warranty_ends') : 'Warranty Ends'}: <span>${expirationDateText}</span></div>
                        ${warranty.purchase_price ? `<div><i class="fas fa-coins"></i> ${window.i18next ? window.i18next.t('warranties.price') : 'Price'}: <span>${formatCurrencyHTML(warranty.purchase_price, warranty.currency ? getCurrencySymbolByCode(warranty.currency) : getCurrencySymbol(), getCurrencyPosition())}</span></div>` : ''}
                        ${validSerialNumbers.length > 0 ? `
                            <div><i class="fas fa-barcode"></i> ${window.i18next ? window.i18next.t('warranties.serial_number') : 'Serial Number'}: <span>${validSerialNumbers[0]}</span></div>
                            ${validSerialNumbers.length > 1 ? `
                                <div style="margin-left: 28px;">
                                    <ul style="margin-top: 5px;">
                                        ${validSerialNumbers.slice(1).map(sn => `<li>${sn}</li>`).join('')}
                                    </ul>
                                </div>
                            ` : ''}
                        ` : ''}
                        ${warranty.vendor ? `<div><i class="fas fa-store"></i> ${window.i18next ? window.i18next.t('warranties.vendor') : 'Vendor'}: <span>${warranty.vendor}</span></div>` : ''}
                        ${warranty.warranty_type ? `<div><i class="fas fa-shield-alt"></i> ${window.i18next ? window.i18next.t('warranties.type') : 'Type'}: <span>${warranty.warranty_type}</span></div>` : ''}
                    </div>
                </div>
                <div class="warranty-status-row status-${statusClass}">
                    <span>${statusText}</span>
                </div>
                ${hasDocuments ? `
                <div class="document-links-row">
                    <div class="document-links-inner-container">
                        ${warranty.product_url ? `
                            <a href="${warranty.product_url}" class="product-link" target="_blank">
                                <i class="fas fa-globe"></i> ${window.i18next ? window.i18next.t('warranties.product_website') : 'Product Website'}
                            </a>
                        ` : ''}
                        ${generateDocumentLink(warranty, 'invoice')}
                        ${generateDocumentLink(warranty, 'manual')}
                        ${generateDocumentLink(warranty, 'other')}
                        ${notesLinkHtml}
                    </div>
                </div>
                ` : ''}
                ${tagsHtml}
            `;
        }
        
        // Add event listeners
        warrantiesList.appendChild(cardElement);
        
        // Add event listeners only if user can edit (buttons exist)
        if (canEdit) {
            // Edit button event listener
            const editBtn = cardElement.querySelector('.edit-btn');
            if (editBtn) {
                editBtn.addEventListener('click', async () => {
                    console.log('[DEBUG] Edit button clicked for warranty ID:', warranty.id);
                    // Find the current warranty data instead of using the potentially stale warranty object
                    const currentWarranty = warranties.find(w => w.id === warranty.id);
                    console.log('[DEBUG] Found current warranty:', currentWarranty ? 'Yes' : 'No', currentWarranty?.notes);
                    if (currentWarranty) {
                        await openEditModal(currentWarranty);
                    } else {
                        showToast(window.t('messages.warranty_not_found_refresh'), 'error');
                    }
                });
            }
            
            // Delete button event listener
            const deleteBtn = cardElement.querySelector('.delete-btn');
            if (deleteBtn) {
                deleteBtn.addEventListener('click', () => {
                    openDeleteModal(warranty.id, warranty.product_name);
                });
            }
        }
        // View notes button event listener
        const notesLink = cardElement.querySelector('.notes-link');
        if (notesLink) {
            notesLink.addEventListener('click', (e) => {
                e.preventDefault();
                // Find the current warranty data instead of using the potentially stale warranty object
                const currentWarranty = warranties.find(w => w.id === warranty.id);
                if (currentWarranty) {
                    showNotesModal(currentWarranty.notes, currentWarranty);
                } else {
                    showToast(window.t('messages.warranty_not_found_refresh'), 'error');
                }
            });
        }
    });
    
    // Load secure images with authentication after rendering
    loadSecureImages();

    // Improved: Align card heights after all images have loaded
    if (currentView === 'grid') {
        const cards = warrantiesList.querySelectorAll('.warranty-card');
        if (cards.length > 0) {
            const images = warrantiesList.querySelectorAll('.secure-image');
            let loadedCount = 0;
            const totalImages = images.length;

            const alignHeights = () => {
                let maxHeight = 0;
                cards.forEach(card => {
                    card.style.minHeight = ''; // Reset
                    const height = card.getBoundingClientRect().height;
                    if (height > maxHeight) maxHeight = height;
                });
                cards.forEach(card => {
                    card.style.minHeight = `${maxHeight}px`;
                });
            };

            if (totalImages === 0) {
                alignHeights(); // No images, align immediately
            } else {
                images.forEach(img => {
                    if (img.complete) {
                        loadedCount++;
                        if (loadedCount === totalImages) alignHeights();
                    } else {
                        img.addEventListener('load', () => {
                            loadedCount++;
                            if (loadedCount === totalImages) alignHeights();
                        });
                        img.addEventListener('error', () => {
                            loadedCount++;
                            if (loadedCount === totalImages) alignHeights();
                        });
                    }
                });
            }
        }
    }

    // Update the timeline chart if on the status page or appropriate
    if (typeof updateTimelineChart === 'function') {
        updateTimelineChart();
    }

    console.log('Warranties rendered successfully');
}

function filterWarranties() {
    const searchTerm = searchInput ? searchInput.value.toLowerCase() : ''; // Add null check for searchInput

    // Show or hide the clear search button if it exists
    if (clearSearchBtn) {
        clearSearchBtn.style.display = searchTerm ? 'flex' : 'none';
    }

    if (!searchTerm) {
        return warranties; // Return the full list if no search term
        // REMOVED: renderWarranties(); 
        // REMOVED: return;
    }

    const filtered = warranties.filter(warranty => {
        // Check product name
        if (warranty.product_name && warranty.product_name.toLowerCase().includes(searchTerm)) { // Add null check
            return true;
        }

        // Check tags
        if (warranty.tags && Array.isArray(warranty.tags)) {
            if (warranty.tags.some(tag => tag.name && tag.name.toLowerCase().includes(searchTerm))) {
                return true;
            }
        }

        // Check notes
        if (warranty.notes && warranty.notes.toLowerCase().includes(searchTerm)) {
            return true;
        }

        // Check vendor
        if (warranty.vendor && warranty.vendor.toLowerCase().includes(searchTerm)) {
            return true;
        }

        // Check if any serial number contains search term
        if (warranty.serial_numbers && Array.isArray(warranty.serial_numbers)) {
            if (warranty.serial_numbers.some(sn => sn && sn.toLowerCase().includes(searchTerm))) {
                return true;
            }
        }

        return false;
    });

    // REMOVED: Add visual feedback if no results found
    // REMOVED: if (filtered.length === 0) {
    // REMOVED:     renderEmptyState(`No matches found for "${searchTerm}". Try a different search term.`);
    // REMOVED: } else {
    // REMOVED:     renderWarranties(filtered);
    // REMOVED: }

    return filtered; // Return the filtered list
}

function applyFilters() {
    console.log('[FILTER DEBUG] Applying filters with:', currentFilters);
    console.log('[FILTER DEBUG] Total warranties before filtering:', warranties.length);
    
    // Filter warranties based on currentFilters
    const filtered = warranties.filter(warranty => {
        // Status filter
        if (currentFilters.status !== 'all' && warranty.status !== currentFilters.status) {
            return false;
        }
        
        // Tag filter
        if (currentFilters.tag !== 'all') {
            const tagId = parseInt(currentFilters.tag);
            const hasTag = warranty.tags && Array.isArray(warranty.tags) &&
                warranty.tags.some(tag => tag.id === tagId);
            if (!hasTag) {
                return false;
            }
        }

        // Vendor filter
        if (currentFilters.vendor !== 'all' && (warranty.vendor || '').toLowerCase() !== currentFilters.vendor.toLowerCase()) {
            return false;
        }
        
        // Warranty type filter
        if (currentFilters.warranty_type !== 'all' && (warranty.warranty_type || '').toLowerCase() !== currentFilters.warranty_type.toLowerCase()) {
            return false;
        }
        
        // Search filter
        if (currentFilters.search) {
            const searchTerm = currentFilters.search.toLowerCase();
            // Check if product name contains search term
            const productNameMatch = warranty.product_name.toLowerCase().includes(searchTerm);
            // Check if any tag name contains search term
            const tagMatch = warranty.tags && Array.isArray(warranty.tags) && 
                warranty.tags.some(tag => tag.name.toLowerCase().includes(searchTerm));
            // Check if notes contains search term
            const notesMatch = warranty.notes && warranty.notes.toLowerCase().includes(searchTerm);
            // Check if vendor contains search term
            const vendorMatch = warranty.vendor && warranty.vendor.toLowerCase().includes(searchTerm);
            // Check if any serial number contains search term
            const serialNumberMatch = warranty.serial_numbers && Array.isArray(warranty.serial_numbers) &&
                warranty.serial_numbers.some(sn => sn && sn.toLowerCase().includes(searchTerm));
            // Return true if any match
            if (!productNameMatch && !tagMatch && !notesMatch && !vendorMatch && !serialNumberMatch) {
                return false;
            }
        }
        
        return true;
    });
    
    console.log('[FILTER DEBUG] Filtered warranties:', filtered.length);
    console.log('[FILTER DEBUG] Filtered warranty IDs:', filtered.map(w => w.id));
    
    // Render the filtered warranties
    renderWarranties(filtered);
}

async function openEditModal(warranty) {
    // Close any existing modals first
    closeModals();
    
    currentWarrantyId = warranty.id;
    
    // Load currencies for the dropdown and wait for it to complete
    await loadCurrencies();
    
    console.log('[DEBUG] Opening edit modal for warranty:', warranty.id, 'with notes:', warranty.notes);
    
    // Populate form fields
    document.getElementById('editProductName').value = warranty.product_name;
    document.getElementById('editProductUrl').value = warranty.product_url || '';
    document.getElementById('editPurchaseDate').value = warranty.purchase_date.split('T')[0];
    // Populate new duration fields
    document.getElementById('editWarrantyDurationYears').value = warranty.warranty_duration_years || 0;
    document.getElementById('editWarrantyDurationMonths').value = warranty.warranty_duration_months || 0;
    document.getElementById('editWarrantyDurationDays').value = warranty.warranty_duration_days || 0;
    
    document.getElementById('editPurchasePrice').value = warranty.purchase_price || '';
    
    // Set currency dropdown
    const editCurrencySelect = document.getElementById('editCurrency');
    if (editCurrencySelect && warranty.currency) {
        editCurrencySelect.value = warranty.currency;
    }
    document.getElementById('editVendor').value = warranty.vendor || '';
    
    // Handle warranty type - check if it's a predefined option or custom
    const editWarrantyTypeSelect = document.getElementById('editWarrantyType');
    const editWarrantyTypeCustom = document.getElementById('editWarrantyTypeCustom');
    if (editWarrantyTypeSelect && warranty.warranty_type) {
        // Check if the warranty type exists as an option in the dropdown
        const options = Array.from(editWarrantyTypeSelect.options);
        const matchingOption = options.find(option => option.value === warranty.warranty_type);
        
        if (matchingOption) {
            // It's a predefined option
            editWarrantyTypeSelect.value = warranty.warranty_type;
            if (editWarrantyTypeCustom) editWarrantyTypeCustom.style.display = 'none';
        } else {
            // It's a custom value
            editWarrantyTypeSelect.value = 'other';
            if (editWarrantyTypeCustom) {
                editWarrantyTypeCustom.style.display = 'block';
                editWarrantyTypeCustom.value = warranty.warranty_type;
            }
        }
    } else if (editWarrantyTypeSelect) {
        editWarrantyTypeSelect.value = '';
        if (editWarrantyTypeCustom) editWarrantyTypeCustom.style.display = 'none';
    }
    
    // Clear existing serial number inputs
    const editSerialNumbersContainer = document.getElementById('editSerialNumbersContainer');
    editSerialNumbersContainer.innerHTML = '';

    // Normalize serial_numbers to array of strings if needed
    if (Array.isArray(warranty.serial_numbers) && warranty.serial_numbers.length > 0 && typeof warranty.serial_numbers[0] === 'object') {
        warranty.serial_numbers = warranty.serial_numbers
            .map(snObj => snObj && snObj.serial_number)
            .filter(sn => typeof sn === 'string' && sn.trim() !== '');
    }

    // Add event listener for adding new serial number inputs in edit modal
    editSerialNumbersContainer.addEventListener('click', (e) => {
        if (e.target.closest('.add-serial-number')) {
            addSerialNumberInput(editSerialNumbersContainer);
        }
    });

    const validSerialNumbers = Array.isArray(warranty.serial_numbers)
        ? warranty.serial_numbers.filter(sn => sn && typeof sn === 'string' && sn.trim() !== '')
        : [];

    if (validSerialNumbers.length === 0) {
        // Add a single empty input if there are no serial numbers
        addSerialNumberInput(editSerialNumbersContainer);
    } else {
        // Add the first serial number with an "Add Another" button only (no remove button)
        const firstInput = document.createElement('div');
        firstInput.className = 'serial-number-input';
        firstInput.innerHTML = `
            <input type="text" name="serial_numbers[]" class="form-control" placeholder="${i18next.t('warranties.enter_serial_number')}" value="${validSerialNumbers[0]}">
            <button type="button" class="btn btn-sm btn-primary add-serial-number">
                <i class="fas fa-plus"></i> ${i18next.t('warranties.add_serial_number')}
            </button>
        `;

        // Add event listener for the Add button
        firstInput.querySelector('.add-serial-number').addEventListener('click', function(e) {
            e.stopPropagation(); // Stop event from bubbling up
            addSerialNumberInput(editSerialNumbersContainer);
        });

        editSerialNumbersContainer.appendChild(firstInput);

        // Add the rest of the serial numbers with "Remove" buttons
        for (let i = 1; i < validSerialNumbers.length; i++) {
            const newInput = document.createElement('div');
            newInput.className = 'serial-number-input';
            newInput.innerHTML = `
                <input type="text" name="serial_numbers[]" class="form-control" placeholder="${i18next.t('warranties.enter_serial_number')}" value="${validSerialNumbers[i]}">
                <button type="button" class="btn btn-sm btn-danger remove-serial-number">
                    <i class="fas fa-minus"></i> ${i18next.t('actions.delete')}
                </button>
            `;

            // Add remove button functionality
            newInput.querySelector('.remove-serial-number').addEventListener('click', function() {
                this.parentElement.remove();
            });

            editSerialNumbersContainer.appendChild(newInput);
        }
    }
    
    // Show current invoice if exists
    const currentInvoiceElement = document.getElementById('currentInvoice');
    const deleteInvoiceBtn = document.getElementById('deleteInvoiceBtn');
    if (currentInvoiceElement && deleteInvoiceBtn) {
        const hasLocalInvoice = warranty.invoice_path && warranty.invoice_path !== 'null';
        const hasPaperlessInvoice = warranty.paperless_invoice_id && warranty.paperless_invoice_id !== null;
        
        if (hasLocalInvoice) {
            currentInvoiceElement.innerHTML = `
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_invoice')}: 
                    <a href="#" class="view-document-link" onclick="openSecureFile('${warranty.invoice_path}'); return false;">View</a>
                    (${i18next.t('warranties.upload_new_file_replace')})
                </span>
            `;
            deleteInvoiceBtn.style.display = '';
        } else if (hasPaperlessInvoice) {
            currentInvoiceElement.innerHTML = `
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_invoice')}: 
                    <a href="#" class="view-document-link" onclick="openPaperlessDocument(${warranty.paperless_invoice_id}); return false;">View</a>
                    <i class="fas fa-cloud" style="color: #4dabf7; margin-left: 4px; font-size: 0.8em;" title="Stored in Paperless-ngx"></i> (${i18next.t('warranties.upload_new_file_replace')})
                </span>
            `;
            deleteInvoiceBtn.style.display = '';
        } else {
            currentInvoiceElement.innerHTML = `<span>${i18next.t('warranties.no_invoice_uploaded')}</span>`;
            deleteInvoiceBtn.style.display = 'none';
        }
        // Reset delete state
        deleteInvoiceBtn.dataset.delete = 'false';
        deleteInvoiceBtn.onclick = function() {
            deleteInvoiceBtn.dataset.delete = 'true';
            currentInvoiceElement.innerHTML = `<span class="text-danger">${i18next.t('warranties.invoice_will_be_deleted')}</span>`;
            deleteInvoiceBtn.style.display = 'none';
        };
    }
    // Show current manual if exists
    const currentManualElement = document.getElementById('currentManual');
    const deleteManualBtn = document.getElementById('deleteManualBtn');
    if (currentManualElement && deleteManualBtn) {
        const hasLocalManual = warranty.manual_path && warranty.manual_path !== 'null';
        const hasPaperlessManual = warranty.paperless_manual_id && warranty.paperless_manual_id !== null;
        
        if (hasLocalManual) {
            currentManualElement.innerHTML = `
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_manual')}: 
                    <a href="#" class="view-document-link" onclick="openSecureFile('${warranty.manual_path}'); return false;">View</a>
                    (${i18next.t('warranties.upload_new_file_replace')})
                </span>
            `;
            deleteManualBtn.style.display = '';
        } else if (hasPaperlessManual) {
            currentManualElement.innerHTML = `
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_manual')}: 
                    <a href="#" class="view-document-link" onclick="openPaperlessDocument(${warranty.paperless_manual_id}); return false;">View</a>
                    <i class="fas fa-cloud" style="color: #4dabf7; margin-left: 4px; font-size: 0.8em;" title="Stored in Paperless-ngx"></i> (${i18next.t('warranties.upload_new_file_replace')})
                </span>
            `;
            deleteManualBtn.style.display = '';
        } else {
            currentManualElement.innerHTML = `<span>${i18next.t('warranties.no_manual_uploaded')}</span>`;
            deleteManualBtn.style.display = 'none';
        }
        // Reset delete state
        deleteManualBtn.dataset.delete = 'false';
        deleteManualBtn.onclick = function() {
            deleteManualBtn.dataset.delete = 'true';
            currentManualElement.innerHTML = `<span class="text-danger">${i18next.t('warranties.manual_will_be_deleted')}</span>`;
            deleteManualBtn.style.display = 'none';
        };
    }

    // Show current product photo if exists
    const currentProductPhotoElement = document.getElementById('currentProductPhoto');
    const deleteProductPhotoBtn = document.getElementById('deleteProductPhotoBtn');
    if (currentProductPhotoElement && deleteProductPhotoBtn) {
        const hasLocalPhoto = warranty.product_photo_path && warranty.product_photo_path !== 'null';
        const hasPaperlessPhoto = warranty.paperless_photo_id && warranty.paperless_photo_id !== null;
        
        if (hasLocalPhoto) {
            currentProductPhotoElement.innerHTML = `
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_photo')}: 
                    <img data-secure-src="/api/secure-file/${warranty.product_photo_path.replace('uploads/', '')}" alt="Current Photo" class="secure-image" 
                         style="max-width: 100px; max-height: 100px; object-fit: cover; border-radius: 8px; margin-left: 10px; border: 2px solid var(--border-color);"
                         onerror="this.style.display='none'">
                    <br><small>(${i18next.t('warranties.upload_new_photo_replace')})</small>
                </span>
            `;
            deleteProductPhotoBtn.style.display = '';
        } else if (hasPaperlessPhoto) {
            currentProductPhotoElement.innerHTML = `
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_photo')}: 
                    <a href="#" class="view-document-link" onclick="openPaperlessDocument(${warranty.paperless_photo_id}); return false;">View</a>
                    <i class="fas fa-cloud" style="color: #4dabf7; margin-left: 4px; font-size: 0.8em;" title="Stored in Paperless-ngx"></i>
                    <br><small>(${i18next.t('warranties.upload_new_photo_replace')})</small>
                </span>
            `;
            deleteProductPhotoBtn.style.display = '';
        } else {
            currentProductPhotoElement.innerHTML = `<span>${i18next.t('warranties.no_photo_uploaded')}</span>`;
            deleteProductPhotoBtn.style.display = 'none';
        }
        // Reset delete state
        deleteProductPhotoBtn.dataset.delete = 'false';
        deleteProductPhotoBtn.onclick = function() {
            deleteProductPhotoBtn.dataset.delete = 'true';
            currentProductPhotoElement.innerHTML = `<span class="text-danger">${i18next.t('warranties.photo_will_be_deleted')}</span>`;
            deleteProductPhotoBtn.style.display = 'none';
        };
    }
    
    // Show current other document if exists
    const currentOtherDocumentElement = document.getElementById('currentOtherDocument'); 
    const deleteOtherDocumentBtn = document.getElementById('deleteOtherDocumentBtn'); 
    if (currentOtherDocumentElement && deleteOtherDocumentBtn) { 
        const hasLocalOther = warranty.other_document_path && warranty.other_document_path !== 'null';
        const hasPaperlessOther = warranty.paperless_other_id && warranty.paperless_other_id !== null;
        
        if (hasLocalOther) { 
            currentOtherDocumentElement.innerHTML = ` 
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_other_document')}: 
                    <a href="#" class="view-document-link" onclick="openSecureFile('${warranty.other_document_path}'); return false;">View</a>
                    (${i18next.t('warranties.upload_new_file_replace')})
                </span>
            `; 
            deleteOtherDocumentBtn.style.display = ''; 
        } else if (hasPaperlessOther) {
            currentOtherDocumentElement.innerHTML = ` 
                <span class="text-success">
                    <i class="fas fa-check-circle"></i> ${i18next.t('warranties.current_other_document')}: 
                    <a href="#" class="view-document-link" onclick="openPaperlessDocument(${warranty.paperless_other_id}); return false;">View</a>
                    <i class="fas fa-cloud" style="color: #4dabf7; margin-left: 4px; font-size: 0.8em;" title="Stored in Paperless-ngx"></i> (${i18next.t('warranties.upload_new_file_replace')})
                </span>
            `; 
            deleteOtherDocumentBtn.style.display = ''; 
        } else { 
            currentOtherDocumentElement.innerHTML = `<span>${i18next.t('warranties.no_other_document_uploaded')}</span>`; 
            deleteOtherDocumentBtn.style.display = 'none'; 
        } 
        // Reset delete state
        deleteOtherDocumentBtn.dataset.delete = 'false'; 
        deleteOtherDocumentBtn.onclick = function() { 
            deleteOtherDocumentBtn.dataset.delete = 'true'; 
            currentOtherDocumentElement.innerHTML = `<span class="text-danger">${i18next.t('warranties.other_document_will_be_deleted')}</span>`; 
            deleteOtherDocumentBtn.style.display = 'none'; 
        }; 
    } 
    
    // Reset file inputs
    document.getElementById('editProductPhoto').value = '';
    document.getElementById('editInvoice').value = '';
    document.getElementById('editManual').value = '';
    document.getElementById('editOtherDocument').value = ''; 
    document.getElementById('editProductPhotoFileName').textContent = '';
    document.getElementById('editFileName').textContent = '';
    document.getElementById('editManualFileName').textContent = '';
    document.getElementById('editOtherDocumentFileName').textContent = '';
    
    // Reset photo preview
    const editPhotoPreview = document.getElementById('editProductPhotoPreview');
    if (editPhotoPreview) {
        editPhotoPreview.style.display = 'none';
    } 
    
    // Set storage options based on current document storage
    if (paperlessNgxEnabled) {
        // Set product photo storage option
        const editProductPhotoStorageRadios = document.getElementsByName('editProductPhotoStorage');
        if (editProductPhotoStorageRadios.length > 0) {
            const isPaperlessPhoto = warranty.paperless_photo_id && warranty.paperless_photo_id !== null;
            editProductPhotoStorageRadios.forEach(radio => {
                radio.checked = isPaperlessPhoto ? (radio.value === 'paperless') : (radio.value === 'local');
            });
        }
        
        // Set invoice storage option
        const editInvoiceStorageRadios = document.getElementsByName('editInvoiceStorage');
        if (editInvoiceStorageRadios.length > 0) {
            const isPaperlessInvoice = warranty.paperless_invoice_id && warranty.paperless_invoice_id !== null;
            editInvoiceStorageRadios.forEach(radio => {
                radio.checked = isPaperlessInvoice ? (radio.value === 'paperless') : (radio.value === 'local');
            });
        }
        
        // Set manual storage option
        const editManualStorageRadios = document.getElementsByName('editManualStorage');
        if (editManualStorageRadios.length > 0) {
            const isPaperlessManual = warranty.paperless_manual_id && warranty.paperless_manual_id !== null;
            editManualStorageRadios.forEach(radio => {
                radio.checked = isPaperlessManual ? (radio.value === 'paperless') : (radio.value === 'local');
            });
        }
        
        // Set other document storage option
        const editOtherDocumentStorageRadios = document.getElementsByName('editOtherDocumentStorage');
        if (editOtherDocumentStorageRadios.length > 0) {
            const isPaperlessOther = warranty.paperless_other_id && warranty.paperless_other_id !== null;
            editOtherDocumentStorageRadios.forEach(radio => {
                radio.checked = isPaperlessOther ? (radio.value === 'paperless') : (radio.value === 'local');
            });
        }
        
        console.log('[Edit Modal] Storage options set based on current document storage:', {
            photo: warranty.paperless_photo_id ? 'paperless' : 'local',
            invoice: warranty.paperless_invoice_id ? 'paperless' : 'local',
            manual: warranty.paperless_manual_id ? 'paperless' : 'local',
            other: warranty.paperless_other_id ? 'paperless' : 'local'
        });
    }
    
    // Initialize file input event listeners
    const editProductPhotoInput = document.getElementById('editProductPhoto');
    if (editProductPhotoInput) {
        editProductPhotoInput.addEventListener('change', function(event) {
            updateFileName(event, 'editProductPhoto', 'editProductPhotoFileName');
        });
    }
    
    const editInvoiceInput = document.getElementById('editInvoice');
    if (editInvoiceInput) {
        editInvoiceInput.addEventListener('change', function(event) {
            updateFileName(event, 'editInvoice', 'editFileName');
        });
    }
    
    const editManualInput = document.getElementById('editManual');
    if (editManualInput) {
        editManualInput.addEventListener('change', function(event) {
            updateFileName(event, 'editManual', 'editManualFileName');
        });
    }

    const editOtherDocumentInput = document.getElementById('editOtherDocument'); 
    if (editOtherDocumentInput) { 
        editOtherDocumentInput.addEventListener('change', function(event) { 
            updateFileName(event, 'editOtherDocument', 'editOtherDocumentFileName'); 
        }); 
    } 
    
    // Show edit modal
    const modalBackdrop = document.getElementById('editModal');
    if (modalBackdrop) {
        modalBackdrop.classList.add('active'); // Add active class to display as flex
    }
    
    // Reset tabs to first tab
    const editTabBtns = document.querySelectorAll('.edit-tab-btn');
    editTabBtns.forEach(btn => btn.classList.remove('active'));
    document.querySelector('.edit-tab-btn[data-tab="edit-product-info"]').classList.add('active');
    
    // Reset tab content
    document.querySelectorAll('.edit-tab-content').forEach(content => content.classList.remove('active'));
    document.getElementById('edit-product-info').classList.add('active');
    
    // Initialize edit mode tags
    editSelectedTags = [];
    
    // If warranty has tags, populate editSelectedTags
    if (warranty.tags && Array.isArray(warranty.tags)) {
        editSelectedTags = warranty.tags.map(tag => ({
            id: tag.id,
            name: tag.name,
            color: tag.color
        }));
    }
    
    // Render selected tags using the helper function
    renderEditSelectedTags();
    
    // Set up tag search in edit mode
    const editTagSearch = document.getElementById('editTagSearch');
    const editTagsList = document.getElementById('editTagsList');
    
    if (editTagSearch && editTagsList) {
        // Add event listeners for tag search
        editTagSearch.addEventListener('focus', () => {
            renderEditTagsList();
            editTagsList.classList.add('show');
        });
        
        editTagSearch.addEventListener('input', () => {
            renderEditTagsList(editTagSearch.value);
        });
        
        // Add event listener to close dropdown when clicking outside
        document.addEventListener('click', (e) => {
            if (!editTagSearch.contains(e.target) && !editTagsList.contains(e.target)) {
                editTagsList.classList.remove('show');
            }
        });
    }
    
    // Set up manage tags button in edit mode
    const editManageTagsBtn = document.getElementById('editManageTagsBtn');
    if (editManageTagsBtn) {
        editManageTagsBtn.addEventListener('click', (e) => {
            e.preventDefault();
            openTagManagementModal();
        });
    }
    
    // Validate all tabs to update completion indicators
    validateEditTab('edit-product-info');
    validateEditTab('edit-warranty-details');
    validateEditTab('edit-documents');
    validateEditTab('edit-tags');
    
    // Add input event listeners to update validation status
    document.querySelectorAll('#editWarrantyForm input').forEach(input => {
        input.addEventListener('input', function() {
            // Find the tab this input belongs to
            const tabContent = this.closest('.edit-tab-content');
            if (tabContent) {
                validateEditTab(tabContent.id);
            }
        });
    });

    // --- Set Lifetime Checkbox and Toggle Duration Fields ---
    if (editIsLifetimeCheckbox && editWarrantyDurationFields) {
        editIsLifetimeCheckbox.checked = warranty.is_lifetime || false;
        handleEditLifetimeChange(); // Call handler to set initial state

        // Remove previous listener if exists
        editIsLifetimeCheckbox.removeEventListener('change', handleEditLifetimeChange);
        // Add new listener
        editIsLifetimeCheckbox.addEventListener('change', handleEditLifetimeChange);

        // Set duration values only if NOT lifetime
        if (!warranty.is_lifetime) {
            document.getElementById('editWarrantyDurationYears').value = warranty.warranty_duration_years || 0;
            document.getElementById('editWarrantyDurationMonths').value = warranty.warranty_duration_months || 0;
            document.getElementById('editWarrantyDurationDays').value = warranty.warranty_duration_days || 0;
        } else {
            document.getElementById('editWarrantyDurationYears').value = '';
            document.getElementById('editWarrantyDurationMonths').value = '';
            document.getElementById('editWarrantyDurationDays').value = '';
        }
    } else {
        console.error("Lifetime warranty elements or duration fields not found in edit form");
    }

    // --- Set Warranty Method Selection ---
    if (editDurationMethodRadio && editExactDateMethodRadio && editExactExpirationDateInput) {
        console.log('[DEBUG Edit Modal] Warranty method detection:', {
            originalInputMethod: warranty.original_input_method,
            isLifetime: warranty.is_lifetime,
            expirationDate: warranty.expiration_date,
            warrantyDurationYears: warranty.warranty_duration_years,
            warrantyDurationMonths: warranty.warranty_duration_months,
            warrantyDurationDays: warranty.warranty_duration_days
        });
        
        // Use the original input method if available, otherwise fall back to previous logic
        if (!warranty.is_lifetime) {
            if (warranty.original_input_method === 'exact_date') {
                // Use exact date method
                editExactDateMethodRadio.checked = true;
                editDurationMethodRadio.checked = false;
                editExactExpirationDateInput.value = warranty.expiration_date.split('T')[0];
                console.log('[DEBUG Edit Modal] Selected exact date method based on original_input_method');
            } else {
                // Use duration method (either explicitly set or fallback)
                editDurationMethodRadio.checked = true;
                editExactDateMethodRadio.checked = false;
                editExactExpirationDateInput.value = '';
                console.log('[DEBUG Edit Modal] Selected duration method based on original_input_method or fallback');
            }
        }
        
        // Set up event listeners for warranty method change
        editDurationMethodRadio.removeEventListener('change', handleEditWarrantyMethodChange);
        editExactDateMethodRadio.removeEventListener('change', handleEditWarrantyMethodChange);
        editDurationMethodRadio.addEventListener('change', handleEditWarrantyMethodChange);
        editExactDateMethodRadio.addEventListener('change', handleEditWarrantyMethodChange);
        
        console.log('[DEBUG Edit Modal] Event listeners attached to warranty method radio buttons');
        console.log('[DEBUG Edit Modal] Initial radio states:', {
            durationChecked: editDurationMethodRadio.checked,
            exactDateChecked: editExactDateMethodRadio.checked
        });
        
        // Call handler to set initial state
        handleEditWarrantyMethodChange();
    }

    // Set notes
    const notesInput = document.getElementById('editNotes');
    if (notesInput) {
        notesInput.value = warranty.notes || '';
    }
    
    // Update currency symbols and positioning for the edit form
    const symbol = getCurrencySymbol();
    const position = getCurrencyPosition();
    updateFormCurrencyPosition(symbol, position);
    
    // Trigger currency positioning after modal is visible
    setTimeout(() => {
        if (position === 'right') {
            const editPriceInput = document.getElementById('editPurchasePrice');
            const editCurrencySymbol = document.getElementById('editCurrencySymbol');
            if (editPriceInput && editCurrencySymbol) {
                // Force update the currency position now that modal is visible
                const wrapper = editPriceInput.closest('.price-input-wrapper');
                if (wrapper && wrapper.classList.contains('currency-right')) {
                    const updateEvent = new Event('focus');
                    editPriceInput.dispatchEvent(updateEvent);
                    const blurEvent = new Event('blur');
                    editPriceInput.dispatchEvent(blurEvent);
                }
            }
        }
    }, 200);
    
    // Load secure images with authentication for the edit modal
    setTimeout(() => loadSecureImages(), 100); // Small delay to ensure DOM is updated
}

function openDeleteModal(warrantyId, productName) {
    currentWarrantyId = warrantyId;
    
    const deleteProductNameElement = document.getElementById('deleteProductName');
    if (deleteProductNameElement) {
        deleteProductNameElement.textContent = productName || '';
    }
    
    const deleteModal = document.getElementById('deleteModal');
    if (deleteModal) {
        deleteModal.classList.add('active');
    }
}

// Function to close all modals
function closeModals() {
    document.querySelectorAll('.modal-backdrop').forEach(modal => {
        modal.classList.remove('active');
    });
}

// Validate file size before upload
function validateFileSize(formData, maxSizeMB = 32) {
    let totalSize = 0;
    
    // Check file sizes
    if (formData.has('invoice') && formData.get('invoice').size > 0) {
        totalSize += formData.get('invoice').size;
    }
    
    if (formData.has('manual') && formData.get('manual').size > 0) {
        totalSize += formData.get('manual').size;
    }

    if (formData.has('other_document') && formData.get('other_document').size > 0) { 
        totalSize += formData.get('other_document').size; 
    }
    
    // Convert bytes to MB for comparison and display
    const totalSizeMB = totalSize / (1024 * 1024);
    console.log(`Total upload size: ${totalSizeMB.toFixed(2)} MB`);
    
    // Check if total size exceeds limit
    if (totalSizeMB > maxSizeMB) {
        return {
            valid: false,
            message: `Total file size (${totalSizeMB.toFixed(2)} MB) exceeds the maximum allowed size of ${maxSizeMB} MB. Please reduce file sizes.`
        };
    }
    
    return {
        valid: true
    };
}

// Submit form function - event handler for form submit
async function handleFormSubmit(event) { // Made async to properly await paperless uploads
    event.preventDefault();
    
    const isLifetime = isLifetimeCheckbox.checked;
    const isDurationMethod = durationMethodRadio && durationMethodRadio.checked;
    const years = parseInt(warrantyDurationYearsInput.value || 0);
    const months = parseInt(warrantyDurationMonthsInput.value || 0);
    const days = parseInt(warrantyDurationDaysInput.value || 0);
    const exactDate = exactExpirationDateInput ? exactExpirationDateInput.value : '';

    // --- Updated Lifetime and Method Check ---
    if (!isLifetime) {
        if (isDurationMethod) {
            // Validate duration fields
            if (years === 0 && months === 0 && days === 0) {
                showValidationErrors(1);
                switchToTab(1); // Switch to warranty details tab
                // Optionally focus the first duration input
                if (warrantyDurationYearsInput) warrantyDurationYearsInput.focus();
                // Add invalid class to the container or individual inputs if needed
                if (warrantyDurationFields) warrantyDurationFields.classList.add('invalid-duration'); // Example
                return;
            }
        } else {
            // Validate exact expiration date
            if (!exactDate) {
                showValidationErrors(1);
                switchToTab(1); // Switch to warranty details tab
                if (exactExpirationDateInput) exactExpirationDateInput.focus();
                return;
            }
            
            // Validate that expiration date is in the future relative to purchase date
            const purchaseDate = document.getElementById('purchaseDate').value;
            if (purchaseDate && exactDate <= purchaseDate) {
                showToast(window.t('messages.expiration_date_after_purchase_date'), 'error');
                switchToTab(1);
                if (exactExpirationDateInput) exactExpirationDateInput.focus();
                return;
            }
        }
    }
    
    // Remove invalid duration class if validation passes
    if (warrantyDurationFields) warrantyDurationFields.classList.remove('invalid-duration');
    
    // Validate all tabs
    for (let i = 0; i < tabContents.length; i++) {
        if (!validateTab(i)) {
            // Switch to the first invalid tab
            switchToTab(i);
            showValidationErrors(i);
            return;
        }
    }
    
    // Create form data object
    const formData = new FormData(warrantyForm);
    
    // Handle warranty type - use custom value if "other" is selected
    const warrantyTypeSelect = document.getElementById('warrantyType');
    const warrantyTypeCustom = document.getElementById('warrantyTypeCustom');
    if (warrantyTypeSelect && warrantyTypeSelect.value === 'other' && warrantyTypeCustom && warrantyTypeCustom.value.trim()) {
        formData.set('warranty_type', warrantyTypeCustom.value.trim());
    }
    
    // Debug: Log all form data entries
    console.log('=== DEBUG: Form Data Contents ===');
    for (let [key, value] of formData.entries()) {
        console.log(`${key}: ${value}`);
    }
    console.log('=== END DEBUG ===');
    
    // Product URL handling
    let productUrlValue = formData.get('product_url');
    if (productUrlValue && typeof productUrlValue === 'string') {
        productUrlValue = productUrlValue.trim();
        if (productUrlValue && !productUrlValue.startsWith('http://') && !productUrlValue.startsWith('https://')) {
            formData.set('product_url', 'https://' + productUrlValue);
        } else if (productUrlValue) {
            // Ensure trimmed value is set back if it was already valid
            formData.set('product_url', productUrlValue);
        }
    }
    
    // Remove old warranty_years if it exists in formData (it shouldn't if HTML is correct)
    formData.delete('warranty_years'); 
    
    // Append new duration fields (already handled by FormData constructor if names match)
    // formData.append('warranty_duration_years', years);
    // formData.append('warranty_duration_months', months);
    // formData.append('warranty_duration_days', days);
    
    // Add serial numbers to form data (using correct name 'serial_numbers[]')
    const serialInputs = document.querySelectorAll('#serialNumbersContainer input[name="serial_numbers[]"]');
    // Clear existing serial_numbers[] from formData before appending new ones
    formData.delete('serial_numbers[]'); 
    serialInputs.forEach(input => {
        if (input.value.trim()) {
            formData.append('serial_numbers[]', input.value.trim()); // Use [] for arrays
        }
    });
    
    // Add tag IDs to form data as JSON string
    if (selectedTags && selectedTags.length > 0) {
        const tagIds = selectedTags.map(tag => tag.id);
        formData.append('tag_ids', JSON.stringify(tagIds));
    } else {
        formData.append('tag_ids', JSON.stringify([])); // Send empty array if no tags
    }
    
    // --- Ensure is_lifetime is correctly added ---
    // FormData already includes it if the checkbox is checked. If not checked, it's omitted.
    // We need to explicitly add 'false' if it's not checked.
    if (!isLifetimeCheckbox.checked) {
        formData.append('is_lifetime', 'false');
        
        // Add warranty method and exact expiration date if using exact date method
        if (!isDurationMethod && exactDate) {
            formData.append('exact_expiration_date', exactDate);
            // Ensure duration fields are 0 when using exact date
            formData.set('warranty_duration_years', '0');
            formData.set('warranty_duration_months', '0');
            formData.set('warranty_duration_days', '0');
        }
    } else {
        // Ensure duration fields are 0 if lifetime is checked
        formData.set('warranty_duration_years', '0');
        formData.set('warranty_duration_months', '0');
        formData.set('warranty_duration_days', '0');
    }

    // Add other_document file (always, as no storage selection for this)
    const otherDocumentFile = document.getElementById('otherDocument').files[0];
    if (otherDocumentFile) {
        formData.append('other_document', otherDocumentFile);
    }

    // --- Only append invoice/manual files to FormData if storage is 'local' ---
    const invoiceFile = document.getElementById('invoice')?.files[0];
    const manualFile = document.getElementById('manual')?.files[0];
    let invoiceStorage = 'local';
    let manualStorage = 'local';
    const invoiceStorageRadio = document.querySelector('input[name="invoiceStorage"]:checked');
    const manualStorageRadio = document.querySelector('input[name="manualStorage"]:checked');
    if (invoiceStorageRadio) invoiceStorage = invoiceStorageRadio.value;
    if (manualStorageRadio) manualStorage = manualStorageRadio.value;
    formData.set('invoiceStorage', invoiceStorage);
    formData.set('manualStorage', manualStorage);
    console.log('[DEBUG] Invoice storage:', invoiceStorage, 'Manual storage:', manualStorage);
    console.log('[DEBUG] Invoice file:', invoiceFile);
    console.log('[DEBUG] Manual file:', manualFile);
    if (invoiceStorage === 'local' && invoiceFile) {
        console.log('[DEBUG] Appending invoice file to FormData (local storage)');
        formData.append('invoice', invoiceFile);
    }
    if (manualStorage === 'local' && manualFile) {
        console.log('[DEBUG] Appending manual file to FormData (local storage)');
        formData.append('manual', manualFile);
    }
    if (invoiceStorage === 'paperless') {
        console.log('[DEBUG] Invoice should be uploaded to Paperless-ngx');
    }
    if (manualStorage === 'paperless') {
        console.log('[DEBUG] Manual should be uploaded to Paperless-ngx');
    }

    // Add selected Paperless documents (for linking existing docs, not uploads)
    const selectedPaperlessProductPhoto = document.getElementById('selectedPaperlessProductPhoto');
    const selectedPaperlessInvoice = document.getElementById('selectedPaperlessInvoice');
    const selectedPaperlessManual = document.getElementById('selectedPaperlessManual');
    const selectedPaperlessOtherDocument = document.getElementById('selectedPaperlessOtherDocument');
    if (selectedPaperlessProductPhoto && selectedPaperlessProductPhoto.value) {
        formData.append('paperless_photo_id', selectedPaperlessProductPhoto.value);
    }
    if (selectedPaperlessInvoice && selectedPaperlessInvoice.value) {
        formData.append('paperless_invoice_id', selectedPaperlessInvoice.value);
    }
    if (selectedPaperlessManual && selectedPaperlessManual.value) {
        formData.append('paperless_manual_id', selectedPaperlessManual.value);
    }
    if (selectedPaperlessOtherDocument && selectedPaperlessOtherDocument.value) {
        formData.append('paperless_other_id', selectedPaperlessOtherDocument.value);
    }
    
    // Show loading spinner
    showLoadingSpinner();
    
    try {
        // Process Paperless-ngx uploads if enabled
        const paperlessUploads = await processPaperlessNgxUploads(formData);
        
        // Add Paperless-ngx document IDs to form data
        Object.keys(paperlessUploads).forEach(key => {
            formData.append(key, paperlessUploads[key]);
        });
        
        // Send the form data to the server
        const response = await fetch('/api/warranties', {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('auth_token')
            },
            body: formData
        });

        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || 'Failed to add warranty');
        }

        const data = await response.json();
        hideLoadingSpinner();
        showToast(window.t('messages.warranty_added_successfully'), 'success');
        
        // Store the new warranty ID for auto-linking
        const newWarrantyId = data.id;

        // --- Store file info and storage type before upload for auto-link logic ---
        const invoiceFileInput = document.getElementById('invoice');
        const manualFileInput = document.getElementById('manual');
        const invoiceFilePre = invoiceFileInput?.files[0];
        const manualFilePre = manualFileInput?.files[0];
        const invoiceStoragePre = formData.get('invoiceStorage');
        const manualStoragePre = formData.get('manualStorage');

        // Auto-link any documents that were uploaded to Paperless-ngx (match edit modal behavior)
        const autoLinkTypes = [];
        const fileInfo = {};
        if (invoiceStoragePre === 'paperless' && invoiceFilePre) {
            autoLinkTypes.push('invoice');
            fileInfo.invoice = invoiceFilePre.name;
        }
        if (manualStoragePre === 'paperless' && manualFilePre) {
            autoLinkTypes.push('manual');
            fileInfo.manual = manualFilePre.name;
        }
        // Other document does not have a storage option, so skip unless you add support
        // If you want to support auto-linking for 'other', add logic here
        console.log('[Auto-Link DEBUG] newWarrantyId:', newWarrantyId, 'autoLinkTypes:', autoLinkTypes, 'fileInfo:', fileInfo, 'invoiceStorage:', invoiceStoragePre, 'manualStorage:', manualStoragePre);
        if (autoLinkTypes.length > 0 && newWarrantyId) {
            console.log('[Auto-Link] Starting automatic document linking after warranty creation (Paperless-ngx uploads only)', autoLinkTypes, fileInfo);
            setTimeout(() => {
                console.log('[Auto-Link DEBUG] Calling autoLinkRecentDocuments with:', newWarrantyId, autoLinkTypes, fileInfo);
                autoLinkRecentDocuments(newWarrantyId, autoLinkTypes, 10, 10000, fileInfo);
            }, 3000); // Wait 3 seconds for Paperless-ngx to process the documents
        }

        // Close and reset the modal on success
        if (addWarrantyModal) {
            addWarrantyModal.classList.remove('active');
        }
        resetAddWarrantyWizard(); // Reset the wizard form

        try {
            await loadWarranties(true);
            console.log('Warranties reloaded after adding new warranty');
            applyFilters();
            
            // Load secure images for the new cards
            setTimeout(() => {
                console.log('Loading secure images for new warranty cards');
                loadSecureImages();
            }, 200);
        } catch (error) {
            console.error('Error reloading warranties after adding:', error);
        }
    } catch (error) {
        hideLoadingSpinner();
        console.error('Error adding warranty:', error);
        showToast(error.message || window.t('messages.failed_to_add_warranty'), 'error');
    }
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    // Initialize the warranty form *only* if the form element exists
    if (warrantyForm) {
        initWarrantyForm();
    }
    
    // Load warranties (might need checks if warrantiesList doesn't always exist)
    if (warrantiesList) { 
        // REMOVED: loadWarranties(); // Now called after authStateReady
        // REMOVED: loadViewPreference(); // Now called after authStateReady
        loadTags(); // Load tags for the form
        initTagFunctionality(); // Initialize tag search/selection
    }
    
    // Initialize theme (should be safe on all pages)
    initializeTheme();
    
    // Set up event listeners for other UI controls (should contain checks)
    setupUIEventListeners();
    setupModalTriggers(); // Add the new modal listeners
    
    // Check if user is logged in and update UI
    // checkLoginStatus(); // Removed undefined function
    
    // Setup form submission
    const form = document.getElementById('addWarrantyForm');
    if (form) {
        form.addEventListener('submit', handleFormSubmit); // Use renamed handler
    }
    
    // Setup settings menu toggle
    // setupSettingsMenu(); // Removed: function not defined, handled by auth.js
    
    // Initialize theme toggle state *after* DOM is loaded
    // Find the header toggle (assuming ID 'darkModeToggle')
    const headerToggle = document.getElementById('darkModeToggle'); 
    if (headerToggle) {
        // Set initial state based on theme applied by theme-loader.js
        const currentTheme = document.documentElement.getAttribute('data-theme');
        headerToggle.checked = currentTheme === 'dark';
        
        // Add listener to update theme when toggled
        headerToggle.addEventListener('change', function() {
            setTheme(this.checked);
        });
    }
    
    // REMOVE any direct calls to initializeTheme() from here or globally
    // initializeTheme(); 

    // Setup view switcher
    // setupViewSwitcher(); // Removed undefined function
    
    // Setup filter controls
    // setupFilterControls(); // Removed: function not defined
    
    // Setup form tabs and navigation
    // initFormTabs(); // <-- Remove this line from DOMContentLoaded
    
    // Initialize modal interactions
    // initializeModals(); // Removed: function not defined, handled by setupModalTriggers
    
    // Load preferences (if needed for things other than theme)
    // loadPreferences(); // Consider if needed

    // REMOVED: updateCurrencySymbols(); // Now called after authStateReady
});

// Add this function to handle edit tab functionality
function initEditTabs() {
    const editTabBtns = document.querySelectorAll('.edit-tab-btn');
    
    editTabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // Remove active class from all tabs
            editTabBtns.forEach(b => b.classList.remove('active'));
            
            // Add active class to clicked tab
            btn.classList.add('active');
            
            // Hide all tab content
            document.querySelectorAll('.edit-tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            // Show the selected tab content
            const tabId = btn.getAttribute('data-tab');
            document.getElementById(tabId).classList.add('active');
        });
    });
}

// Update validateEditTabs function
function validateEditTab(tabId) {
    const tab = document.getElementById(tabId);
    if (!tab) {
        console.warn('validateEditTab: Could not find tab with ID:', tabId);
        return false; // Or true, depending on desired behavior for missing tabs
    }
    let isTabValid = true;

    // Get all relevant form controls within the tab
    const controls = tab.querySelectorAll('input, textarea, select');

    controls.forEach(control => {
        // Check the native HTML5 validity state
        if (!control.validity.valid) {
            isTabValid = false;
            control.classList.add('invalid');
            // Optionally, you could add logic here to display specific messages
            // or rely on browser default behavior if the form is submitted.
        } else {
            control.classList.remove('invalid');
        }
    });

    // Update the tab button to show completion status
    const tabBtn = document.querySelector(`.edit-tab-btn[data-tab="${tabId}"]`);
    if (tabBtn) {
        if (isTabValid) {
            tabBtn.classList.add('completed');
        } else {
            tabBtn.classList.remove('completed');
        }
    }
    return isTabValid;
}

// Add this function for secure file access
function openSecureFile(filePath) {
    console.log(`[openSecureFile] Opening file: ${filePath}`);
    
    // Get the file name from the path, handling both uploads/ prefix and direct filenames
    let fileName = filePath;
    if (filePath.startsWith('uploads/')) {
        fileName = filePath.substring(8); // Remove 'uploads/' prefix
    } else if (filePath.startsWith('/uploads/')) {
        fileName = filePath.substring(9); // Remove '/uploads/' prefix
    }
    
    console.log(`[openSecureFile] Processed filename: ${fileName}`);
    
    const token = auth.getToken();
    
    if (!token) {
        showToast(window.t('messages.login_to_access_files'), 'error');
        return false;
    }
    
    // Enhanced fetch with retry logic and better error handling
    const fetchWithRetry = async (url, options, retries = 2) => {
        for (let i = 0; i <= retries; i++) {
            try {
                console.log(`[openSecureFile] Attempt ${i + 1} to fetch: ${url}`);
                const response = await fetch(url, options);
                
                if (!response.ok) {
                    if (response.status === 401) {
                        throw new Error('Authentication error. Please log in again.');
                    } else if (response.status === 403) {
                        throw new Error('You are not authorized to access this file.');
                    } else if (response.status === 404) {
                        throw new Error('File not found. It may have been deleted.');
                    } else {
                        throw new Error(`Server error: ${response.status} ${response.statusText}`);
                    }
                }

                // Check if response has content-length header
                const contentLength = response.headers.get('content-length');
                console.log(`[openSecureFile] Response Content-Length: ${contentLength}`);
                
                // Convert to blob with error handling
                const blob = await response.blob();
                console.log(`[openSecureFile] Blob size: ${blob.size} bytes`);
                
                // Verify blob size matches content-length if available
                if (contentLength && parseInt(contentLength) !== blob.size) {
                    console.warn(`[openSecureFile] Content-Length mismatch: header=${contentLength}, blob=${blob.size}`);
                    if (i < retries) {
                        console.log(`[openSecureFile] Retrying due to content-length mismatch...`);
                        await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retry
                        continue;
                    } else {
                        console.error(`[openSecureFile] Final attempt failed with content-length mismatch`);
                    }
                }
                
                return blob;
                
            } catch (error) {
                console.error(`[openSecureFile] Attempt ${i + 1} failed:`, error);
                
                // If this is a content-length mismatch or network error, retry
                if (i < retries && (
                    error.message.includes('content-length') ||
                    error.message.includes('Failed to fetch') ||
                    error.name === 'TypeError'
                )) {
                    console.log(`[openSecureFile] Retrying after error: ${error.message}`);
                    await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1))); // Exponential backoff
                    continue;
                }
                
                throw error;
            }
        }
    };

    fetchWithRetry(`/api/secure-file/${fileName}`, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${token}`,
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            'Pragma': 'no-cache'
        }
    })
    .then(blob => {
        console.log(`[openSecureFile] Successfully received blob of size: ${blob.size}`);
        
        // Create a URL for the blob
        const blobUrl = window.URL.createObjectURL(blob);
        
        // Open in new tab
        const newWindow = window.open(blobUrl, '_blank');
        
        // Clean up the blob URL after a delay to prevent memory leaks
        setTimeout(() => {
            window.URL.revokeObjectURL(blobUrl);
        }, 10000); // Clean up after 10 seconds
        
        // Check if window was blocked by popup blocker
        if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined') {
            showToast(window.t('messages.popup_blocked'), 'warning');
            window.URL.revokeObjectURL(blobUrl); // Clean up immediately if blocked
        }
    })
    .catch(error => {
        console.error('Error fetching file:', error);
        
        // Provide more specific error messages
        let errorMessage = 'Error opening file';
        if (error.message.includes('Authentication')) {
            errorMessage = 'Authentication error. Please refresh and try again.';
        } else if (error.message.includes('authorized')) {
            errorMessage = 'You are not authorized to access this file.';
        } else if (error.message.includes('not found')) {
            errorMessage = 'File not found. It may have been deleted.';
        } else if (error.message.includes('Failed to fetch') || error.name === 'TypeError') {
            errorMessage = 'Network error. Please check your connection and try again.';
        } else {
            errorMessage = `Error opening file: ${error.message}`;
        }
        
        showToast(errorMessage, 'error');
    });
    
    return false;
}

/**
 * Open a Paperless-ngx document by ID
 */

/**
 * Generate document link HTML for both local and Paperless-ngx documents
 */
function generateDocumentLink(warranty, docType) {
    const docConfig = {
        invoice: {
            localPath: warranty.invoice_path,
            paperlessId: warranty.paperless_invoice_id,
            icon: 'fas fa-file-invoice',
            label: 'Invoice',
            className: 'invoice-link'
        },
        manual: {
            localPath: warranty.manual_path,
            paperlessId: warranty.paperless_manual_id,
            icon: 'fas fa-book',
            label: 'Manual',
            className: 'manual-link'
        },
        other: {
            localPath: warranty.other_document_path,
            paperlessId: warranty.paperless_other_id,
            icon: 'fas fa-file-alt',
            label: 'Files',
            className: 'other-document-link'
        },
        photo: {
            localPath: warranty.product_photo_path,
            paperlessId: warranty.paperless_photo_id,
            icon: 'fas fa-image',
            label: 'Photo',
            className: 'photo-link'
        }
    };
    
    const config = docConfig[docType];
    if (!config) return '';
    
    const hasLocal = config.localPath && config.localPath !== 'null';
    const hasPaperless = config.paperlessId && config.paperlessId !== null;

    
    if (hasLocal) {
        return `<a href="#" onclick="openSecureFile('${config.localPath}'); return false;" class="${config.className}">
            <i class="${config.icon}"></i> ${config.label}
        </a>`;
    } else if (hasPaperless) {
        return `<a href="#" onclick="openPaperlessDocument(${config.paperlessId}); return false;" class="${config.className}">
            <i class="${config.icon}"></i> ${config.label} <i class="fas fa-cloud" style="color: #4dabf7; margin-left: 4px; font-size: 0.8em;" title="Stored in Paperless-ngx"></i>
        </a>`;
    }
    
    return '';
}

// Initialize the warranty form and all its components
function initWarrantyForm() {
    // Initialize form tabs
    if (formTabs && tabContents) {
        initFormTabs();
    }
    
    // Initialize serial number inputs
    addSerialNumberInput();
    
    // Initialize file input display
    if (document.getElementById('productPhoto')) {
        document.getElementById('productPhoto').addEventListener('change', function(event) {
            updateFileName(event, 'productPhoto', 'productPhotoFileName');
        });
    }
    
    if (document.getElementById('invoice')) {
        document.getElementById('invoice').addEventListener('change', function(event) {
            updateFileName(event, 'invoice', 'fileName');
        });
    }
    
    if (document.getElementById('manual')) {
        document.getElementById('manual').addEventListener('change', function(event) {
            updateFileName(event, 'manual', 'manualFileName');
        });
    }

    if (document.getElementById('otherDocument')) { 
        document.getElementById('otherDocument').addEventListener('change', function(event) { 
            updateFileName(event, 'otherDocument', 'otherDocumentFileName'); 
        }); 
    } 
    
    // Initialize tag functionality
    initTagFunctionality();
    
    // Form submission
    if (warrantyForm) {
        warrantyForm.addEventListener('submit', handleFormSubmit); // Use renamed handler
    }

    // Initialize lifetime checkbox listener
    if (isLifetimeCheckbox && warrantyDurationFields) { // Check for new container
        isLifetimeCheckbox.addEventListener('change', handleLifetimeChange);
        handleLifetimeChange(); // Initial check
    } else {
        console.error("Lifetime warranty elements or duration fields not found in add form");
    }
}

// Initialize tag functionality
function initTagFunctionality() {
    // This function now ONLY sets up listeners for the main "Add Warranty" form's tag interface.
    // Assumes globalTagManagementModal listeners (new tag form, close buttons) are set up separately if the modal exists.

    // Get main form tag elements
    const mainFormTagSearch = document.getElementById('tagSearch');
    const mainFormTagsList = document.getElementById('tagsList'); // Dropdown for search in main form
    const mainFormManageTagsBtn = document.getElementById('manageTagsBtn'); // "Manage Tags" button in main form
    const mainFormSelectedTagsContainer = document.getElementById('selectedTags'); // Container for selected tags in main form

    // Skip if main form specific tag elements don't exist
    if (!mainFormTagSearch || !mainFormTagsList || !mainFormManageTagsBtn || !mainFormSelectedTagsContainer) {
        console.log('Main form tag UI elements (tagSearch, tagsList, manageTagsBtn, or selectedTagsContainer) not found, skipping main form tag UI initialization.');
        return;
    }

    console.log('Initializing main form tag UI functionality (search, selection, manage button).');

    // Load allTags if not already loaded (needed for search suggestions in the main form)
    if (allTags.length === 0) {
        loadTags(); // loadTags is async
    }

    mainFormTagSearch.addEventListener('focus', () => {
        renderTagsList(); // Renders suggestions into mainFormTagsList based on allTags
        mainFormTagsList.classList.add('show');
    });

    mainFormTagSearch.addEventListener('input', () => {
        renderTagsList(mainFormTagSearch.value); // Filters suggestions
    });

    // Hide main form's tag suggestion dropdown when clicking outside
    document.addEventListener('click', (e) => {
        // Check if mainFormTagSearch and mainFormTagsList are still valid (e.g. not removed from DOM)
        if (mainFormTagSearch && mainFormTagsList && 
            !mainFormTagSearch.contains(e.target) && 
            !mainFormTagsList.contains(e.target)) {
            mainFormTagsList.classList.remove('show');
        }
    });

    // "Manage Tags" button in the main form opens the global tagManagementModal
    mainFormManageTagsBtn.addEventListener('click', (e) => {
        e.preventDefault();
        openTagManagementModal(); // This function shows the global modal
    });

    // Initial rendering of selected tags for the main form (if any are pre-selected or loaded)
    renderSelectedTags(); // Renders into mainFormSelectedTagsContainer
}

// Function to load all tags
async function loadTags() {
    console.log('[script.js] loadTags() called. Current page:', window.location.pathname);
    
    // Check if tags are already loaded and reasonably populated
    if (allTags && allTags.length > 0) {
        console.log('[script.js] Tags already loaded in allTags global. Skipping fetch. Count:', allTags.length);
        // Optionally, re-dispatch the event if other components might need it on subsequent (though now less likely) calls
        // document.dispatchEvent(new CustomEvent('allTagsLoaded', { detail: allTags }));
        return;
    }

    try {
        const token = auth.getToken();
        if (!token) {
            console.warn('[script.js] No token available for loadTags. User might not be authenticated yet.');
            allTags = []; // Ensure allTags is empty if we can't load
            return;
        }
        const response = await fetch('/api/tags', {
            headers: { 'Authorization': `Bearer ${token}` }
        });
        if (!response.ok) {
            const errorText = await response.text();
            console.error('[script.js] Failed to load tags:', response.status, errorText);
            allTags = []; // Default to empty on error
            return;
        }
        const fetchedTags = await response.json();
        // Assuming fetchedTags is an array of {id, name, color, ...} as expected by other functions
        allTags = fetchedTags;
        console.log('[script.js] All tags loaded into global allTags variable:', allTags.length, 'tags. Sample:', allTags.slice(0,2));
        // Dispatch event for any components that might be waiting for tags (e.g., Tagify instances)
        document.dispatchEvent(new CustomEvent('allTagsLoaded', { detail: allTags }));

    } catch (error) {
        console.error('[script.js] Error in loadTags():', error);
        allTags = []; // Default to empty on critical error
    }
}

// Render the tags dropdown list
function renderTagsList(searchTerm = '') {
    if (!tagsList) return;
    
    tagsList.innerHTML = '';
    
    // Filter tags based on search term
    const filteredTags = allTags.filter(tag => 
        !searchTerm || tag.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    
    // Add option to create new tag if search term is provided and not in list
    if (searchTerm && !filteredTags.some(tag => tag.name.toLowerCase() === searchTerm.toLowerCase())) {
        const createOption = document.createElement('div');
        createOption.className = 'tag-option create-tag';
        createOption.innerHTML = `<i class="fas fa-plus"></i> Create "${searchTerm}"`;
        createOption.addEventListener('click', () => {
            createTag(searchTerm).then(newTag => {
                // Add the new tag to selectedTags
                selectedTags.push(newTag);
                renderSelectedTags();
                renderTagsList(''); // Clear search and refresh list
            });
            tagsList.classList.remove('show');
        });
        tagsList.appendChild(createOption);
    }
    
    // Add existing tags to dropdown
    filteredTags.forEach(tag => {
        const option = document.createElement('div');
        option.className = 'tag-option';
        
        // Check if tag is already selected
        const isSelected = selectedTags.some(selected => selected.id === tag.id);
        
        option.innerHTML = `
            <span class="tag-color" style="background-color: ${tag.color}"></span>
            ${tag.name}
            <span class="tag-status">${isSelected ? '<i class="fas fa-check"></i>' : ''}</span>
        `;
        
        option.addEventListener('click', () => {
            if (isSelected) {
                // Remove tag if already selected
                selectedTags = selectedTags.filter(selected => selected.id !== tag.id);
            } else {
                // Add tag if not selected
                selectedTags.push({
                    id: tag.id,
                    name: tag.name,
                    color: tag.color
                });
            }
            
            renderSelectedTags();
            renderTagsList(searchTerm);
        });
        
        tagsList.appendChild(option);
    });
    
    // Show the dropdown
    tagsList.classList.add('show');
}

// Update renderEditTagsList to add new tag to editSelectedTags after creation
function renderEditTagsList(searchTerm = '') {
    const editTagsList = document.getElementById('editTagsList');
    if (!editTagsList) return;
    editTagsList.innerHTML = '';
    // Filter tags based on search term
    const filteredTags = allTags.filter(tag => 
        !searchTerm || tag.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    // Add option to create new tag if search term is provided and not in list
    if (searchTerm && !filteredTags.some(tag => tag.name.toLowerCase() === searchTerm.toLowerCase())) {
        const createOption = document.createElement('div');
        createOption.className = 'tag-option create-tag';
        createOption.innerHTML = `<i class="fas fa-plus"></i> Create "${searchTerm}"`;
        createOption.addEventListener('click', () => {
            createTag(searchTerm).then(newTag => {
                // Add the new tag to editSelectedTags
                editSelectedTags.push(newTag);
                renderEditSelectedTags();
                renderEditTagsList(''); // Clear search and refresh list
            });
            editTagsList.classList.remove('show');
        });
        editTagsList.appendChild(createOption);
    }
    // Add existing tags to dropdown
    filteredTags.forEach(tag => {
        const option = document.createElement('div');
        option.className = 'tag-option';
        
        // Check if tag is already selected
        const isSelected = editSelectedTags.some(selected => selected.id === tag.id);
        
        option.innerHTML = `
            <span class="tag-color" style="background-color: ${tag.color}"></span>
            ${tag.name}
            <span class="tag-status">${isSelected ? '<i class="fas fa-check"></i>' : ''}</span>
        `;
        
        option.addEventListener('click', () => {
            if (isSelected) {
                // Remove tag if already selected
                editSelectedTags = editSelectedTags.filter(selected => selected.id !== tag.id);
            } else {
                // Add tag if not selected
                editSelectedTags.push({
                    id: tag.id,
                    name: tag.name,
                    color: tag.color
                });
            }
            
            // Use our helper function to render selected tags
            renderEditSelectedTags();
            
            renderEditTagsList(searchTerm);
        });
        
        editTagsList.appendChild(option);
    });
    
    // Show the dropdown
    editTagsList.classList.add('show');
}

// Render the selected tags
function renderSelectedTags() {
    if (!selectedTagsContainer) return;
    
    selectedTagsContainer.innerHTML = '';
    
    if (selectedTags.length === 0) {
        const placeholder = document.createElement('span');
        placeholder.className = 'no-tags-selected';
        placeholder.textContent = 'No tags selected';
        selectedTagsContainer.appendChild(placeholder);
        return;
    }
    
    selectedTags.forEach(tag => {
        const tagElement = document.createElement('span');
        tagElement.className = 'tag';
        tagElement.style.backgroundColor = tag.color;
        tagElement.style.color = getContrastColor(tag.color);
        
        tagElement.innerHTML = `
            ${tag.name}
            <span class="remove-tag" data-id="${tag.id}">&times;</span>
        `;
        
        // Add event listener for removing tag
        tagElement.querySelector('.remove-tag').addEventListener('click', (e) => {
            e.stopPropagation();
            selectedTags = selectedTags.filter(t => t.id !== tag.id);
            renderSelectedTags();
            
            // Update summary if needed
            if (document.getElementById('summary-tags')) {
                updateSummary();
            }
        });
        
        selectedTagsContainer.appendChild(tagElement);
    });
}

// Helper function to render the edit selected tags
function renderEditSelectedTags() {
    const editSelectedTagsContainer = document.getElementById('editSelectedTags');
    if (!editSelectedTagsContainer) return;
    
    editSelectedTagsContainer.innerHTML = '';
    
    if (editSelectedTags.length > 0) {
        editSelectedTags.forEach(tag => {
            const tagElement = document.createElement('span');
            tagElement.className = 'tag';
            tagElement.style.backgroundColor = tag.color;
            tagElement.style.color = getContrastColor(tag.color);
            
            tagElement.innerHTML = `
                ${tag.name}
                <span class="remove-tag" data-id="${tag.id}">&times;</span>
            `;
            
            // Add event listener for removing tag
            const removeButton = tagElement.querySelector('.remove-tag');
            removeButton.addEventListener('click', (e) => {
                e.stopPropagation();
                e.preventDefault(); // Add this to prevent default action
                
                // Prevent the event from bubbling up to parent elements
                if (e.cancelBubble !== undefined) {
                    e.cancelBubble = true;
                }
                
                editSelectedTags = editSelectedTags.filter(t => t.id !== tag.id);
                
                // Re-render just the tags
                renderEditSelectedTags();
                return false; // Add return false for older browsers
            });
            
            editSelectedTagsContainer.appendChild(tagElement);
        });
    } else {
        const placeholder = document.createElement('span');
        placeholder.className = 'no-tags-selected';
        placeholder.textContent = 'No tags selected';
        editSelectedTagsContainer.appendChild(placeholder);
    }
}

// Update createTag to return a Promise
function createTag(name) {
    return new Promise((resolve, reject) => {
        // Enhanced auth manager availability check
        if (!window.auth) {
            console.error('[createTag] Auth manager not available');
            reject(new Error('Authentication system not ready. Please try again.'));
            return;
        }
        
        // Use auth manager's getToken method instead of directly accessing localStorage
        const token = window.auth.getToken();
        console.log('[createTag] Debug info:', {
            hasToken: !!token,
            tokenLength: token ? token.length : 0,
            hasUserInfo: !!localStorage.getItem('user_info'),
            authManagerAvailable: !!window.auth,
            isAuthenticated: window.auth.isAuthenticated(),
            tokenSource: 'auth.getToken()'
        });
        
        if (!token) {
            console.error('[createTag] No authentication token found');
            reject(new Error('No authentication token found. Please try logging in again.'));
            return;
        }
        // Generate a random color for the tag
        const color = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
        fetch('/api/tags', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + token
            },
            body: JSON.stringify({
                name: name,
                color: color
            })
        })
        .then(response => {
            if (!response.ok) {
                // Enhanced error handling to capture specific error details
                return response.json().then(errorData => {
                    console.error('[createTag] API Error Response:', {
                        status: response.status,
                        statusText: response.statusText,
                        errorData: errorData
                    });
                    
                    if (response.status === 409) {
                        reject(new Error('A tag with this name already exists'));
                        return;
                    }
                    if (response.status === 401) {
                        reject(new Error('Authentication failed. Please try logging in again.'));
                        return;
                    }
                    if (response.status === 403) {
                        reject(new Error('Permission denied. You may not have access to create tags.'));
                        return;
                    }
                    
                    const errorMsg = errorData?.error || errorData?.message || 'Failed to create tag';
                    reject(new Error(errorMsg));
                }).catch(() => {
                    // If response body is not JSON or is empty
                    console.error('[createTag] Non-JSON error response:', response.status, response.statusText);
                    reject(new Error(`Failed to create tag (${response.status})`));
                });
            }
            return response.json();
        })
        .then(data => {
            if (!data) return;
            const newTag = {
                id: data.id,
                name: data.name,
                color: data.color
            };
            allTags.push(newTag);
            renderExistingTags();
            populateTagFilter();
            showToast(window.t('messages.tag_created_successfully'), 'success');
            resolve(newTag);
        })
        .catch(error => {
            console.error('Error creating tag:', error);
            showToast(error.message || window.t('messages.failed_to_create_tag'), 'error');
            reject(error);
        });
    });
}

// Helper function to determine text color based on background color
function getContrastColor(hexColor) {
    // Convert hex to RGB
    const r = parseInt(hexColor.substr(1, 2), 16);
    const g = parseInt(hexColor.substr(3, 2), 16);
    const b = parseInt(hexColor.substr(5, 2), 16);
    
    // Calculate luminance
    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
    
    // Return black or white depending on luminance
    return (yiq >= 128) ? '#000000' : '#ffffff';
}

// Open tag management modal
function openTagManagementModal() {
    if (!tagManagementModal) return;
    
    // Populate existing tags
    renderExistingTags();
    
    // Show modal
    tagManagementModal.classList.add('active');
}

// Render existing tags in the management modal
function renderExistingTags() {
    if (!existingTagsContainer) return;
    
    existingTagsContainer.innerHTML = '';
    
    if (allTags.length === 0) {
        existingTagsContainer.innerHTML = '<div class="no-tags">No tags created yet</div>';
        return;
    }
    
    allTags.forEach(tag => {
        const tagElement = document.createElement('div');
        tagElement.className = 'existing-tag';
        
        tagElement.innerHTML = `
            <div class="existing-tag-info">
                <div class="existing-tag-color" style="background-color: ${tag.color}"></div>
                <div class="existing-tag-name">${tag.name}</div>
            </div>
            <div class="existing-tag-actions">
                <button class="btn btn-sm btn-secondary edit-tag" data-id="${tag.id}">
                    <i class="fas fa-edit"></i>
                </button>
                <button class="btn btn-sm btn-danger delete-tag" data-id="${tag.id}">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
        
        // Add event listeners for edit and delete
        tagElement.querySelector('.edit-tag').addEventListener('click', () => {
            editTag(tag);
        });
        
        tagElement.querySelector('.delete-tag').addEventListener('click', () => {
            deleteTag(tag.id);
        });
        
        existingTagsContainer.appendChild(tagElement);
    });
}

// Edit a tag
function editTag(tag) {
    const tagInfoElement = document.querySelector(`.existing-tag .existing-tag-info:has(+ .existing-tag-actions button[data-id="${tag.id}"])`);
    
    if (!tagInfoElement) {
        // Alternative selector for browsers that don't support :has
        const tagElement = document.querySelector(`.existing-tag`);
        const buttons = tagElement?.querySelectorAll(`.existing-tag-actions button[data-id="${tag.id}"]`);
        if (buttons?.length > 0) {
            const parent = buttons[0].closest('.existing-tag');
            if (parent) {
                const infoElement = parent.querySelector('.existing-tag-info');
                if (infoElement) {
                    tagInfoElement = infoElement;
                }
            }
        }
        
        if (!tagInfoElement) return;
    }
    
    const originalHTML = tagInfoElement.innerHTML;
    
    tagInfoElement.innerHTML = `
        <input type="text" class="form-control edit-tag-name" value="${tag.name}" style="width: 60%;">
        <input type="color" class="edit-tag-color" value="${tag.color}" style="width: 40px; height: 38px;">
        <button class="btn btn-sm btn-primary save-edit" data-id="${tag.id}">Save</button>
        <button class="btn btn-sm btn-secondary cancel-edit">Cancel</button>
    `;
    
    // Add event listeners
    tagInfoElement.querySelector('.save-edit').addEventListener('click', () => {
        const newName = tagInfoElement.querySelector('.edit-tag-name').value.trim();
        const newColor = tagInfoElement.querySelector('.edit-tag-color').value;
        
        if (!newName) {
            showToast(window.t('messages.tag_name_required'), 'error');
            return;
        }
        
        updateTag(tag.id, newName, newColor);
    });
    
    tagInfoElement.querySelector('.cancel-edit').addEventListener('click', () => {
        // Restore original HTML
        tagInfoElement.innerHTML = originalHTML;
    });
}

// Update a tag
function updateTag(id, name, color) {
    const token = window.auth ? window.auth.getToken() : localStorage.getItem('auth_token');
    if (!token) {
        console.error('No authentication token found');
        return;
    }
    
    fetch(`/api/tags/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token
        },
        body: JSON.stringify({
            name: name,
            color: color
        })
    })
    .then(response => {
        if (!response.ok) {
            if (response.status === 409) {
                throw new Error('A tag with this name already exists');
            }
            throw new Error('Failed to update tag');
        }
        return response.json();
    })
    .then(data => {
        // Update tag in allTags array
        const index = allTags.findIndex(tag => tag.id === id);
        if (index !== -1) {
            allTags[index].name = name;
            allTags[index].color = color;
        }
        
        // Update tag in selectedTags if present
        const selectedIndex = selectedTags.findIndex(tag => tag.id === id);
        if (selectedIndex !== -1) {
            selectedTags[selectedIndex].name = name;
            selectedTags[selectedIndex].color = color;
        }
        
        // Update tag in editSelectedTags if present
        const editSelectedIndex = editSelectedTags.findIndex(tag => tag.id === id);
        if (editSelectedIndex !== -1) {
            editSelectedTags[editSelectedIndex].name = name;
            editSelectedTags[editSelectedIndex].color = color;
        }
        
        // Update tags in warranties array
        warranties.forEach(warranty => {
            if (warranty.tags && Array.isArray(warranty.tags)) {
                warranty.tags.forEach(tag => {
                    if (tag.id === id) {
                        tag.name = name;
                        tag.color = color;
                    }
                });
            }
        });
        
        // Rerender existing tags and selected tags
        renderExistingTags();
        renderSelectedTags();
        renderEditSelectedTags();
        
        // Update summary if needed
        if (document.getElementById('summary-tags')) {
            updateSummary();
        }
        
        // Update tag filter dropdown
        populateTagFilter();
        
        // Re-render warranty cards to show updated tag colors
        renderWarranties(warranties);
        
        showToast(window.t('messages.tag_updated_successfully'), 'success');
    })
    .catch(error => {
        console.error('Error updating tag:', error);
        showToast(error.message || window.t('messages.failed_to_update_tag'), 'error');
    });
}

// Delete a tag
function deleteTag(id) {
    if (!confirm('Are you sure you want to delete this tag? It will be removed from all warranties.')) {
        return;
    }
    
    const token = localStorage.getItem('auth_token');
    if (!token) {
        console.error('No authentication token found');
        showToast(window.t('messages.authentication_required'), 'error'); // Added toast for better feedback
        return;
    }
    
    showLoadingSpinner(); // Show loading indicator
    
    fetch(`/api/tags/${id}`, { // Use the correct URL with tag ID
        method: 'DELETE', // Use DELETE method
        headers: {
            'Authorization': 'Bearer ' + token
        }
    })
    .then(response => {
        if (!response.ok) {
            // Log the status for debugging the 405 error
            console.error(`Failed to delete tag. Status: ${response.status} ${response.statusText}`);
            // Try to get error message from response body
            return response.json().then(errData => {
                throw new Error(errData.error || errData.message || 'Failed to delete tag');
            }).catch(() => {
                // If response body is not JSON or empty
                throw new Error(`Failed to delete tag. Status: ${response.status}`);
            });
        }
        return response.json();
    })
    .then(data => {
        // Remove tag from allTags array
        allTags = allTags.filter(tag => tag.id !== id);
        
        // Remove tag from selectedTags if present (in both add and edit modes)
        selectedTags = selectedTags.filter(tag => tag.id !== id);
        editSelectedTags = editSelectedTags.filter(tag => tag.id !== id);
        
        // Remove tag from warranties array
        warranties.forEach(warranty => {
            if (warranty.tags && Array.isArray(warranty.tags)) {
                warranty.tags = warranty.tags.filter(tag => tag.id !== id);
            }
        });
        
        // --- FIX: Re-render UI elements ---
        renderExistingTags(); // Update the list in the modal
        renderSelectedTags(); // Update selected tags in the add form
        renderEditSelectedTags(); // Update selected tags in the edit form
        populateTagFilter(); // Update the filter dropdown on the main page
        renderWarranties(warranties); // Update warranty cards to remove deleted tag
        // --- END FIX ---
        
        showToast(window.t('messages.tag_deleted_successfully'), 'success');
    })
    .catch(error => {
        console.error('Error deleting tag:', error);
        showToast(error.message || window.t('messages.failed_to_delete_tag'), 'error'); // Show specific error message
    })
    .finally(() => {
        hideLoadingSpinner(); // Hide loading indicator
    });
}

// Set up event listeners for UI controls
function setupUIEventListeners() {
    // --- Global Manage Tags Button ---
    const globalManageTagsBtn = document.getElementById('globalManageTagsBtn');
    if (globalManageTagsBtn) {
        globalManageTagsBtn.addEventListener('click', async () => {
            // Ensure allTags are loaded before opening the modal
            if (!allTags || allTags.length === 0) {
                showLoadingSpinner();
                try {
                    await loadTags();
                } catch (error) {
                    console.error("Failed to load tags before opening modal:", error);
                    showToast("Could not load tags. Please try again.", "error");
                    hideLoadingSpinner();
                    return;
                }
                hideLoadingSpinner();
            }
            openTagManagementModal();
        });
    }
    // Initialize edit tabs
    initEditTabs();
    
    // Close modals when clicking outside or on close button
    document.querySelectorAll('.modal-backdrop, [data-dismiss="modal"]').forEach(element => {
        element.addEventListener('click', (e) => {
            // Check if the click is on the backdrop itself OR a dismiss button
            if (e.target === element || e.target.matches('[data-dismiss="modal"]')) {
                // Find the closest modal backdrop to the element clicked
                const modalToClose = e.target.closest('.modal-backdrop');

                if (modalToClose) {
                    // *** MODIFIED CHECK ***
                    // If the click target is the backdrop itself (not a dismiss button)
                    // AND the modal is the 'addWarrantyModal' or 'editModal', then DO NOTHING.
                    if ((modalToClose.id === 'addWarrantyModal' || modalToClose.id === 'editModal') && e.target === modalToClose) {
                        return; // Ignore backdrop click for addWarrantyModal and editModal
                    }
                    // *** END MODIFIED CHECK ***

                    // Otherwise, close the modal (handles other modals' backdrop clicks and all dismiss buttons)
                    modalToClose.classList.remove('active');

                    // Reset forms only when closing the respective modal
                    if (modalToClose.id === 'editModal') {
                        // Optional: Add any edit form reset logic here if needed
                        console.log('Edit modal closed, reset logic (if any) can go here.');
                    } else if (modalToClose.id === 'addWarrantyModal') {
                        // This reset will now only trigger if closed via dismiss button
                        resetAddWarrantyWizard();
                    }
                    // Add similar reset logic for other modals like deleteModal if needed
                    // else if (modalToClose.id === 'deleteModal') { ... }
                }
            }
        });
    });

    // Prevent modal content clicks from closing the modal
    document.querySelectorAll('.modal').forEach(modal => {
        modal.addEventListener('click', (e) => {
            e.stopPropagation();
        });
    });
    
    // Filter event listeners
    const searchInput = document.getElementById('searchWarranties');
    const clearSearchBtn = document.getElementById('clearSearch');
    const statusFilter = document.getElementById('statusFilter');
    const tagFilter = document.getElementById('tagFilter');
    const sortBySelect = document.getElementById('sortBy');
    const vendorFilter = document.getElementById('vendorFilter'); // Added vendor filter select
    
    if (searchInput) {
        // Debounce logic: only apply filters after user stops typing for 300ms
        let searchDebounceTimeout;
        searchInput.addEventListener('input', () => {
            currentFilters.search = searchInput.value.toLowerCase();
            // Show/hide clear button based on search input
            if (clearSearchBtn) {
                clearSearchBtn.style.display = searchInput.value ? 'flex' : 'none';
            }
            // Add visual feedback class to search box when active
            if (searchInput.value) {
                searchInput.parentElement.classList.add('active-search');
            } else {
                searchInput.parentElement.classList.remove('active-search');
            }
            // Debounce applyFilters
            if (searchDebounceTimeout) clearTimeout(searchDebounceTimeout);
            searchDebounceTimeout = setTimeout(() => {
                applyFilters();
            }, 300);
        });
    }
    
    if (clearSearchBtn) {
        clearSearchBtn.addEventListener('click', () => {
            if (searchInput) {
                searchInput.value = '';
                currentFilters.search = '';
                clearSearchBtn.style.display = 'none';
                searchInput.parentElement.classList.remove('active-search');
                searchInput.focus();
                applyFilters();
            }
        });
    }
    
    if (statusFilter) {
        statusFilter.addEventListener('change', () => {
            currentFilters.status = statusFilter.value;
            applyFilters();
        });
    }
    
    if (tagFilter) {
        tagFilter.addEventListener('change', () => {
            currentFilters.tag = tagFilter.value;
            applyFilters();
        });
    }
    
    if (vendorFilter) { // Added event listener for vendor filter
        vendorFilter.addEventListener('change', () => {
            currentFilters.vendor = vendorFilter.value;
            applyFilters();
        });
    }
    
    if (warrantyTypeFilter) { // Added event listener for warranty type filter
        warrantyTypeFilter.addEventListener('change', () => {
            currentFilters.warranty_type = warrantyTypeFilter.value;
            applyFilters();
        });
    }
    
    if (sortBySelect) {
        sortBySelect.addEventListener('change', () => {
            currentFilters.sortBy = sortBySelect.value;
            applyFilters();
        });
    }
    
    // View switcher event listeners
    const gridViewBtn = document.getElementById('gridViewBtn');
    const listViewBtn = document.getElementById('listViewBtn');
    const tableViewBtn = document.getElementById('tableViewBtn');
    
    if (gridViewBtn) gridViewBtn.addEventListener('click', () => switchView('grid'));
    if (listViewBtn) listViewBtn.addEventListener('click', () => switchView('list'));
    if (tableViewBtn) tableViewBtn.addEventListener('click', () => switchView('table'));
    
    // Export button event listener
    const exportBtn = document.getElementById('exportBtn');
    if (exportBtn) exportBtn.addEventListener('click', exportWarranties);
    
    // Import button event listener
    if (importBtn && csvFileInput) {
        importBtn.addEventListener('click', () => {
            csvFileInput.click(); // Trigger hidden file input
        });
        csvFileInput.addEventListener('change', (event) => {
            if (event.target.files && event.target.files.length > 0) {
                handleImport(event.target.files[0]);
            }
        });
    }
    
    // Refresh button
    const refreshBtn = document.getElementById('refreshBtn');
    if (refreshBtn) refreshBtn.addEventListener('click', loadWarranties);
    
    // Warranty Type dropdown handlers for custom option
    if (warrantyTypeInput && warrantyTypeCustomInput) {
        warrantyTypeInput.addEventListener('change', () => {
            if (warrantyTypeInput.value === 'other') {
                warrantyTypeCustomInput.style.display = 'block';
                warrantyTypeCustomInput.focus();
            } else {
                warrantyTypeCustomInput.style.display = 'none';
                warrantyTypeCustomInput.value = '';
            }
            updateSummary(); // Update summary when warranty type changes
        });
        
        // Also update summary when custom warranty type changes
        warrantyTypeCustomInput.addEventListener('input', updateSummary);
    }
    
    if (editWarrantyTypeInput && editWarrantyTypeCustomInput) {
        editWarrantyTypeInput.addEventListener('change', () => {
            if (editWarrantyTypeInput.value === 'other') {
                editWarrantyTypeCustomInput.style.display = 'block';
                editWarrantyTypeCustomInput.focus();
            } else {
                editWarrantyTypeCustomInput.style.display = 'none';
                editWarrantyTypeCustomInput.value = '';
            }
        });
    }
    
    // Save warranty changes
    const saveWarrantyBtn = document.getElementById('saveWarrantyBtn');
    if (saveWarrantyBtn) {
        let functionToAttachOnClick = saveWarranty; // Default to the original saveWarranty from script.js

        // Check if the observer setup function from status.js is available
        if (typeof window.setupSaveWarrantyObserver === 'function') {
            console.log('[script.js] window.setupSaveWarrantyObserver (from status.js) was FOUND. Attempting to wrap local saveWarranty function.');
            try {
                // Call the observer setup function, passing it the original saveWarranty from this script.
                // The observer setup function is expected to return a new function that wraps the original.
                functionToAttachOnClick = window.setupSaveWarrantyObserver(saveWarranty);
                
                // Optional: A flag to let status.js know that script.js has handled the wrapping.
                // This can be useful if status.js has any fallback/polling logic to prevent double-wrapping.
                window.saveWarrantyObserverAttachedByScriptJS = true; 
                console.log('[script.js] Local saveWarranty function has been successfully WRAPPED by the observer from status.js.');
            } catch (e) {
                console.error('[script.js] An error occurred while trying to wrap saveWarranty with the observer from status.js:', e);
                // If an error occurs during wrapping, functionToAttachOnClick will remain the original saveWarranty.
            }
        } else {
            console.log('[script.js] window.setupSaveWarrantyObserver (from status.js) was NOT FOUND. Using the original saveWarranty function for the button.');
        }

        // Add the event listener using the (potentially) wrapped function.
        saveWarrantyBtn.addEventListener('click', () => {
            console.log('[script.js] Save button (saveWarrantyBtn) clicked. Invoking the determined save function (functionToAttachOnClick).');
            if (typeof functionToAttachOnClick === 'function') {
                functionToAttachOnClick(); // Execute the determined save function
            } else {
                console.error('[script.js] CRITICAL: functionToAttachOnClick is not a function when save button was clicked!');
            }
        });

    } else {
        console.warn('[script.js] saveWarrantyBtn DOM element not found. Cannot attach click listener.');
    }
    
    // Confirm delete button
    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
    if (confirmDeleteBtn) confirmDeleteBtn.addEventListener('click', deleteWarranty);
    
    // Load saved view preference
    // loadViewPreference(); // Disabled: now called after authStateReady
}

// Function to show loading spinner
function showLoadingSpinner() {
    if (loadingContainer) {
        loadingContainer.style.display = 'flex';
    }
}

// Function to hide loading spinner
function hideLoadingSpinner() {
    if (loadingContainer) {
        loadingContainer.style.display = 'none';
    }
}

// Paperless upload loading functions
function showPaperlessUploadLoading(documentType) {
    // Create or show the Paperless upload overlay
    let overlay = document.getElementById('paperless-upload-overlay');
    if (!overlay) {
        overlay = document.createElement('div');
        overlay.id = 'paperless-upload-overlay';
        overlay.innerHTML = `
            <div class="paperless-upload-modal">
                <div class="paperless-upload-content">
                    <div class="paperless-upload-spinner"></div>
                    <h3>Uploading to Paperless-ngx</h3>
                    <p id="paperless-upload-status">Uploading document...</p>
                    <div class="paperless-upload-progress">
                        <div class="paperless-upload-progress-bar" id="paperless-progress-bar"></div>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(overlay);
        
        // Add CSS styles
        const style = document.createElement('style');
        style.textContent = `
            #paperless-upload-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.7);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10000;
                backdrop-filter: blur(2px);
            }
            
            .paperless-upload-modal {
                background: var(--card-bg, #fff);
                border-radius: 12px;
                padding: 2rem;
                max-width: 400px;
                width: 90%;
                text-align: center;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                border: 1px solid var(--border-color, #ddd);
            }
            
            .paperless-upload-content h3 {
                margin: 1rem 0 0.5rem 0;
                color: var(--text-color, #333);
                font-size: 1.2rem;
            }
            
            .paperless-upload-content p {
                margin: 0.5rem 0 1.5rem 0;
                color: var(--text-secondary, #666);
                font-size: 0.9rem;
            }
            
            .paperless-upload-spinner {
                width: 40px;
                height: 40px;
                border: 4px solid var(--border-color, #ddd);
                border-top: 4px solid var(--primary-color, #007bff);
                border-radius: 50%;
                animation: paperless-spin 1s linear infinite;
                margin: 0 auto 1rem auto;
            }
            
            @keyframes paperless-spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
            .paperless-upload-progress {
                width: 100%;
                height: 6px;
                background: var(--border-color, #ddd);
                border-radius: 3px;
                overflow: hidden;
                margin-top: 1rem;
            }
            
            .paperless-upload-progress-bar {
                height: 100%;
                background: linear-gradient(90deg, var(--primary-color, #007bff), var(--success-color, #28a745));
                border-radius: 3px;
                width: 0%;
                transition: width 0.3s ease;
                animation: paperless-progress-pulse 2s ease-in-out infinite;
            }
            
            @keyframes paperless-progress-pulse {
                0%, 100% { opacity: 1; }
                50% { opacity: 0.7; }
            }
        `;
        document.head.appendChild(style);
    }
    
    overlay.style.display = 'flex';
    
    // Update status text
    const statusEl = document.getElementById('paperless-upload-status');
    if (statusEl) {
        statusEl.textContent = `Uploading ${documentType} to Paperless-ngx...`;
    }
    
    // Animate progress bar
    const progressBar = document.getElementById('paperless-progress-bar');
    if (progressBar) {
        progressBar.style.width = '30%';
        setTimeout(() => {
            progressBar.style.width = '60%';
        }, 1000);
        setTimeout(() => {
            progressBar.style.width = '80%';
        }, 2000);
    }
}

function updatePaperlessUploadStatus(message, isProcessing = false) {
    const statusEl = document.getElementById('paperless-upload-status');
    const progressBar = document.getElementById('paperless-progress-bar');
    
    if (statusEl) {
        statusEl.textContent = message;
    }
    
    if (isProcessing && progressBar) {
        progressBar.style.width = '90%';
    }
}

function hidePaperlessUploadLoading() {
    const overlay = document.getElementById('paperless-upload-overlay');
    if (overlay) {
        // Complete the progress bar first
        const progressBar = document.getElementById('paperless-progress-bar');
        if (progressBar) {
            progressBar.style.width = '100%';
        }
        
        // Hide after a short delay to show completion
        setTimeout(() => {
            overlay.style.display = 'none';
            // Reset progress bar for next use
            if (progressBar) {
                progressBar.style.width = '0%';
            }
        }, 500);
    }
}

// Delete warranty function
function deleteWarranty() {
    if (!currentWarrantyId) {
        showToast(window.t('messages.no_warranty_selected_for_deletion'), 'error');
        return;
    }
    
    const token = localStorage.getItem('auth_token');
    if (!token) {
        showToast('Authentication required', 'error');
        return;
    }
    
    showLoadingSpinner();
    
    fetch(`/api/warranties/${currentWarrantyId}`, {
        method: 'DELETE',
        headers: {
            'Authorization': 'Bearer ' + token
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Failed to delete warranty');
        }
        return response.json();
    })
    .then(data => {
        hideLoadingSpinner();
        showToast('Warranty deleted successfully', 'success');
        closeModals();

        // --- BEGIN FIX: Update UI immediately ---
        // Remove the deleted warranty from the global array
        const deletedId = currentWarrantyId; // Store ID before resetting
        warranties = warranties.filter(warranty => warranty.id !== deletedId);
        currentWarrantyId = null; // Reset current ID

        // Re-render the list using the updated local array
        applyFilters();
        // --- END FIX ---
    })
    .catch(error => {
        hideLoadingSpinner();
        console.error('Error deleting warranty:', error);
        showToast('Failed to delete warranty', 'error');
    });
}

// Save warranty updates
function saveWarranty() {
    console.log("[script.js] CORE saveWarranty (original from script.js) EXECUTING.");
    if (!currentWarrantyId) {
        showToast(window.t('messages.no_warranty_selected_for_update'), 'error');
        return;
    }
    
    // --- Get form values ---
    const productName = document.getElementById('editProductName').value.trim();
    const purchaseDate = document.getElementById('editPurchaseDate').value;
    const isLifetime = document.getElementById('editIsLifetime').checked;
    const isDurationMethod = editDurationMethodRadio && editDurationMethodRadio.checked;
    // Get new duration values
    const years = parseInt(document.getElementById('editWarrantyDurationYears').value || 0);
    const months = parseInt(document.getElementById('editWarrantyDurationMonths').value || 0);
    const days = parseInt(document.getElementById('editWarrantyDurationDays').value || 0);
    const exactDate = editExactExpirationDateInput ? editExactExpirationDateInput.value : '';
    
    // Basic validation
    if (!productName) {
        showToast(window.t('messages.product_name_required'), 'error');
        return;
    }
    
    if (!purchaseDate) {
        showToast(window.t('messages.purchase_date_required'), 'error');
        return;
    }
    
    // --- Updated Validation ---
    if (!isLifetime) {
        if (isDurationMethod) {
            // Validate duration fields
            if (years === 0 && months === 0 && days === 0) {
                showToast(window.t('messages.warranty_duration_required'), 'error');
                // Optional: focus the years input again
                const yearsInput = document.getElementById('editWarrantyDurationYears');
                if (yearsInput) { // Check if element exists
                    yearsInput.focus();
                    // Add invalid class to container or inputs
                    if (editWarrantyDurationFields) editWarrantyDurationFields.classList.add('invalid-duration');
                }
                return;
            }
        } else {
            // Validate exact expiration date
            if (!exactDate) {
                showToast(window.t('messages.exact_expiration_date_required'), 'error');
                if (editExactExpirationDateInput) editExactExpirationDateInput.focus();
                return;
            }
            
            // Validate that expiration date is in the future relative to purchase date
            if (purchaseDate && exactDate <= purchaseDate) {
                showToast(window.t('messages.expiration_date_after_purchase_date'), 'error');
                if (editExactExpirationDateInput) editExactExpirationDateInput.focus();
                return;
            }
        }
    }
    
    // Remove invalid duration class if validation passes
    if (editWarrantyDurationFields) editWarrantyDurationFields.classList.remove('invalid-duration');
    // --- End Updated Validation ---
    
    // Create form data
    const formData = new FormData();
    formData.append('product_name', productName);
    formData.append('purchase_date', purchaseDate);
    
    // Optional fields
    let productUrl = document.getElementById('editProductUrl').value.trim();
    if (productUrl) {
        if (!productUrl.startsWith('http://') && !productUrl.startsWith('https://')) {
            productUrl = 'https://' + productUrl;
        }
        formData.append('product_url', productUrl);
    }
    
    const purchasePrice = document.getElementById('editPurchasePrice').value;
    const currency = document.getElementById('editCurrency').value;
    if (purchasePrice) {
        formData.append('purchase_price', purchasePrice);
    }
    if (currency) {
        formData.append('currency', currency);
    }
    
    // Serial numbers (use correct name 'serial_numbers[]')
    const serialInputs = document.querySelectorAll('#editSerialNumbersContainer input[name="serial_numbers[]"]');
    // Clear existing before appending
    formData.delete('serial_numbers[]'); 
    serialInputs.forEach(input => {
        if (input.value.trim()) {
            formData.append('serial_numbers[]', input.value.trim()); // Use []
        }
    });
    
    // Tags - add tag IDs as JSON string
    if (editSelectedTags && editSelectedTags.length > 0) {
        const tagIds = editSelectedTags.map(tag => tag.id);
        formData.append('tag_ids', JSON.stringify(tagIds));
    } else {
        // Send empty array to clear tags
        formData.append('tag_ids', JSON.stringify([]));
    }
    
    // Files
    const invoiceFile = document.getElementById('editInvoice').files[0];
    if (invoiceFile) {
        formData.append('invoice', invoiceFile);
    }
    
    const manualFile = document.getElementById('editManual').files[0];
    if (manualFile) {
        formData.append('manual', manualFile);
    }

    const otherDocumentFile = document.getElementById('editOtherDocument').files[0]; 
    if (otherDocumentFile) { 
        formData.append('other_document', otherDocumentFile); 
    } 
    
    // Product photo
    const productPhotoFile = document.getElementById('editProductPhoto').files[0];
    if (productPhotoFile) {
        formData.append('product_photo', productPhotoFile);
    }
    
    // Document deletion flags
    const deleteInvoiceBtn = document.getElementById('deleteInvoiceBtn');
    if (deleteInvoiceBtn && deleteInvoiceBtn.dataset.delete === 'true') {
        formData.append('delete_invoice', 'true');
    }
    const deleteManualBtn = document.getElementById('deleteManualBtn');
    if (deleteManualBtn && deleteManualBtn.dataset.delete === 'true') {
        formData.append('delete_manual', 'true');
    }
    const deleteOtherDocumentBtn = document.getElementById('deleteOtherDocumentBtn'); 
    if (deleteOtherDocumentBtn && deleteOtherDocumentBtn.dataset.delete === 'true') { 
        formData.append('delete_other_document', 'true'); 
    }
    const deleteProductPhotoBtn = document.getElementById('deleteProductPhotoBtn');
    if (deleteProductPhotoBtn && deleteProductPhotoBtn.dataset.delete === 'true') {
        formData.append('delete_product_photo', 'true');
    } 
    
    // --- Append is_lifetime and duration components ---
    formData.append('is_lifetime', isLifetime.toString());
    if (!isLifetime) {
        if (isDurationMethod) {
            formData.append('warranty_duration_years', years);
            formData.append('warranty_duration_months', months);
            formData.append('warranty_duration_days', days);
        } else {
            // Using exact date method
            formData.append('exact_expiration_date', exactDate);
            // Ensure duration fields are 0 when using exact date
            formData.append('warranty_duration_years', 0);
            formData.append('warranty_duration_months', 0);
            formData.append('warranty_duration_days', 0);
        }
    } else {
        // Ensure duration is 0 if lifetime
        formData.append('warranty_duration_years', 0);
        formData.append('warranty_duration_months', 0);
        formData.append('warranty_duration_days', 0);
    }
    // Add notes
    const notes = document.getElementById('editNotes').value;
    if (notes && notes.trim() !== '') {
        formData.append('notes', notes);
    } else {
        // Explicitly clear notes if empty
        formData.append('notes', '');
    }
    
    // Add vendor/retailer to form data
    const editVendorInput = document.getElementById('editVendor'); // Use the correct ID
    formData.append('vendor', editVendorInput ? editVendorInput.value.trim() : ''); // Use the correct variable
    
    // Add warranty type to form data - handle custom type
    const editWarrantyTypeInput = document.getElementById('editWarrantyType');
    const editWarrantyTypeCustomInput = document.getElementById('editWarrantyTypeCustom');
    let warrantyTypeValue = '';
    if (editWarrantyTypeInput) {
        if (editWarrantyTypeInput.value === 'other' && editWarrantyTypeCustomInput && editWarrantyTypeCustomInput.value.trim()) {
            warrantyTypeValue = editWarrantyTypeCustomInput.value.trim();
        } else {
            warrantyTypeValue = editWarrantyTypeInput.value.trim();
        }
    }
    formData.append('warranty_type', warrantyTypeValue);
    
    // Add selected Paperless documents for edit form
    const selectedEditPaperlessProductPhoto = document.getElementById('selectedEditPaperlessProductPhoto');
    const selectedEditPaperlessInvoice = document.getElementById('selectedEditPaperlessInvoice');
    const selectedEditPaperlessManual = document.getElementById('selectedEditPaperlessManual');
    const selectedEditPaperlessOtherDocument = document.getElementById('selectedEditPaperlessOtherDocument');
    
    if (selectedEditPaperlessProductPhoto && selectedEditPaperlessProductPhoto.value) {
        formData.append('paperless_photo_id', selectedEditPaperlessProductPhoto.value);
    }
    if (selectedEditPaperlessInvoice && selectedEditPaperlessInvoice.value) {
        formData.append('paperless_invoice_id', selectedEditPaperlessInvoice.value);
    }
    if (selectedEditPaperlessManual && selectedEditPaperlessManual.value) {
        formData.append('paperless_manual_id', selectedEditPaperlessManual.value);
    }
    if (selectedEditPaperlessOtherDocument && selectedEditPaperlessOtherDocument.value) {
        formData.append('paperless_other_id', selectedEditPaperlessOtherDocument.value);
    }
    
    // DEBUG: Log what we're sending to the backend
    console.log('[DEBUG saveWarranty] Form data being sent:');
    console.log('[DEBUG saveWarranty] isLifetime:', isLifetime);
    console.log('[DEBUG saveWarranty] isDurationMethod:', isDurationMethod);
    console.log('[DEBUG saveWarranty] exactDate:', exactDate);
    console.log('[DEBUG saveWarranty] years/months/days:', years, months, days);
    
    // Log all form data entries
    for (let [key, value] of formData.entries()) {
        console.log(`[DEBUG saveWarranty] FormData: ${key} = ${value}`);
    }
    
    // Get auth token
    const token = localStorage.getItem('auth_token');
    if (!token) {
        showToast('Authentication required', 'error');
        return;
    }
    
    showLoadingSpinner();
    
    // Process Paperless-ngx uploads if enabled
    processEditPaperlessNgxUploads(formData)
        .then(paperlessUploads => {
            // Add Paperless-ngx document IDs to form data
            Object.keys(paperlessUploads).forEach(key => {
                formData.append(key, paperlessUploads[key]);
            });
            
            // Send request
            return fetch(`/api/warranties/${currentWarrantyId}`, {
                method: 'PUT',
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                body: formData
            });
        })
        .then(response => {
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.error || 'Failed to update warranty');
                });
            }
            return response.json();
        })
        .then(data => {
            hideLoadingSpinner();
            showToast('Warranty updated successfully', 'success');
            closeModals();
        
        // Always reload from server to ensure we get the latest data including product photo paths
        console.log('Reloading warranties after edit to ensure latest data including product photos');
        loadWarranties(true).then(() => {
            console.log('Warranties reloaded after editing warranty');
            applyFilters();
            // Load secure images for the updated cards - additional call to ensure they load
            setTimeout(() => {
                console.log('Loading secure images for updated warranty cards');
                loadSecureImages();
            }, 200); // Slightly longer delay to ensure everything is rendered
            
            // Always close the notes modal if open, to ensure UI is in sync
            const notesModal = document.getElementById('notesModal');
            if (notesModal && notesModal.style.display === 'block') {
                notesModal.style.display = 'none';
            }
            
            console.log('Warranty updated and reloaded from server');
            
            // Auto-link any documents that were uploaded to Paperless-ngx
            if ((invoiceFile || manualFile || otherDocumentFile) && currentWarrantyId) {
                console.log('[Auto-Link] Starting automatic document linking after warranty update');
                
                // Collect filename information for intelligent searching
                const fileInfo = {};
                if (invoiceFile) fileInfo.invoice = invoiceFile.name;
                if (manualFile) fileInfo.manual = manualFile.name;
                if (otherDocumentFile) fileInfo.other = otherDocumentFile.name;
                
                setTimeout(() => {
                    autoLinkRecentDocuments(currentWarrantyId, ['invoice', 'manual', 'other'], 10, 10000, fileInfo);
                }, 3000); // Wait 3 seconds for Paperless-ngx to process the documents
            }
        }).catch(error => {
            console.error('Error reloading warranties after edit:', error);
        });
    })
    .catch(error => {
        hideLoadingSpinner();
        console.error('Error updating warranty:', error);
        showToast(error.message || 'Failed to update warranty', 'error');
    });
}

// Function to populate tag filter dropdown
function populateTagFilter() {
    const tagFilter = document.getElementById('tagFilter');
    if (!tagFilter) return;
    
    // Clear existing options (except "All Tags")
    while (tagFilter.options.length > 1) {
        tagFilter.remove(1);
    }
    
    // Create a Set to store unique tag names
    const uniqueTags = new Set();
    
    // Collect all unique tags from warranties
    warranties.forEach(warranty => {
        if (warranty.tags && Array.isArray(warranty.tags)) {
            warranty.tags.forEach(tag => {
                uniqueTags.add(JSON.stringify({id: tag.id, name: tag.name, color: tag.color}));
            });
        }
    });
    
    // Sort tags alphabetically by name
    const sortedTags = Array.from(uniqueTags)
        .map(tagJson => JSON.parse(tagJson))
        .sort((a, b) => a.name.localeCompare(b.name));
    
    // Add options to the dropdown
    // Add options to the dropdown
    sortedTags.forEach(tag => {
        const option = document.createElement('option');
        option.value = tag.id;
        option.textContent = tag.name; // Reverted to textContent
        // Apply background color directly for now, acknowledging potential contrast issues
        // option.style.backgroundColor = tag.color; // Removed to prevent individual option background colors
        tagFilter.appendChild(option);
    });
}

// Function to populate vendor filter dropdown
function populateVendorFilter() {
    const vendorFilterElement = document.getElementById('vendorFilter');
    if (!vendorFilterElement) return;

    // Clear existing options (except "All Vendors")
    while (vendorFilterElement.options.length > 1) {
        vendorFilterElement.remove(1);
    }

    // Create a Set to store unique vendor names (case-insensitive)
    const uniqueVendors = new Set();

    // Collect all unique, non-empty vendors from warranties
    warranties.forEach(warranty => {
        if (warranty.vendor && warranty.vendor.trim() !== '') {
            uniqueVendors.add(warranty.vendor.trim().toLowerCase());
        }
    });

    // Sort vendors alphabetically (after converting back to original case for display if needed, or just use lowercase)
    // For simplicity, we'll sort the lowercase versions and display them as is.
    // If original casing is important, a map could be used to store original values.
    const sortedVendors = Array.from(uniqueVendors).sort((a, b) => a.localeCompare(b));

    // Add options to the dropdown
    sortedVendors.forEach(vendor => {
        const option = document.createElement('option');
        option.value = vendor; // Use lowercase for value consistency
        // Capitalize first letter for display
        option.textContent = vendor.charAt(0).toUpperCase() + vendor.slice(1);
        vendorFilterElement.appendChild(option);
    });
}

// Function to populate warranty type filter dropdown
function populateWarrantyTypeFilter() {
    const warrantyTypeFilterElement = document.getElementById('warrantyTypeFilter');
    if (!warrantyTypeFilterElement) return;

    // Clear existing options (except "All Types")
    while (warrantyTypeFilterElement.options.length > 1) {
        warrantyTypeFilterElement.remove(1);
    }

    // Create a Set to store unique warranty types (case-insensitive)
    const uniqueWarrantyTypes = new Set();

    // Collect all unique, non-empty warranty types from warranties
    warranties.forEach(warranty => {
        if (warranty.warranty_type && warranty.warranty_type.trim() !== '') {
            uniqueWarrantyTypes.add(warranty.warranty_type.trim().toLowerCase());
        }
    });

    // Sort warranty types alphabetically
    const sortedWarrantyTypes = Array.from(uniqueWarrantyTypes).sort((a, b) => a.localeCompare(b));

    // Add options to the dropdown
    sortedWarrantyTypes.forEach(warrantyType => {
        const option = document.createElement('option');
        option.value = warrantyType; // Use lowercase for value consistency
        // Capitalize first letter for display
        option.textContent = warrantyType.charAt(0).toUpperCase() + warrantyType.slice(1);
        warrantyTypeFilterElement.appendChild(option);
    });
}

// --- Updated Function ---
function handleLifetimeChange(event) {
    const checkbox = event ? event.target : isLifetimeCheckbox;
    const durationFields = warrantyDurationFields; // Use new container ID
    const yearsInput = warrantyDurationYearsInput;
    const monthsInput = warrantyDurationMonthsInput;
    const daysInput = warrantyDurationDaysInput;
    const warrantyEntryMethod = document.getElementById('warrantyEntryMethod');

    if (!checkbox || !durationFields || !yearsInput || !monthsInput || !daysInput) {
        console.error("Lifetime or duration elements not found in add form");
        return;
    }

    if (checkbox.checked) {
        // Hide warranty method selection and both input methods
        if (warrantyEntryMethod) warrantyEntryMethod.style.display = 'none';
        durationFields.style.display = 'none';
        if (exactExpirationField) exactExpirationField.style.display = 'none';
        
        // Clear and make fields not required
        yearsInput.required = false;
        monthsInput.required = false;
        daysInput.required = false;
        yearsInput.value = '';
        monthsInput.value = '';
        daysInput.value = '';
        if (exactExpirationDateInput) exactExpirationDateInput.value = '';
    } else {
        // Show warranty method selection
        if (warrantyEntryMethod) warrantyEntryMethod.style.display = 'block';
        
        // Call method change handler to show appropriate fields
        handleWarrantyMethodChange();
    }
}

// --- Updated Function ---
function handleEditLifetimeChange(event) {
    const checkbox = event ? event.target : editIsLifetimeCheckbox;
    const durationFields = editWarrantyDurationFields; // Use new container ID
    const yearsInput = editWarrantyDurationYearsInput;
    const monthsInput = editWarrantyDurationMonthsInput;
    const daysInput = editWarrantyDurationDaysInput;
    const editWarrantyEntryMethod = document.getElementById('editWarrantyEntryMethod');

    if (!checkbox || !durationFields || !yearsInput || !monthsInput || !daysInput) {
        console.error("Lifetime or duration elements not found in edit form");
        return;
    }

    if (checkbox.checked) {
        // Hide warranty method selection and both input methods
        if (editWarrantyEntryMethod) editWarrantyEntryMethod.style.display = 'none';
        durationFields.style.display = 'none';
        if (editExactExpirationField) editExactExpirationField.style.display = 'none';
        
        // Clear and make fields not required
        yearsInput.required = false;
        monthsInput.required = false;
        daysInput.required = false;
        yearsInput.value = '';
        monthsInput.value = '';
        daysInput.value = '';
        if (editExactExpirationDateInput) editExactExpirationDateInput.value = '';
    } else {
        // Show warranty method selection
        if (editWarrantyEntryMethod) editWarrantyEntryMethod.style.display = 'block';
        
        // Call method change handler to show appropriate fields
        handleEditWarrantyMethodChange();
    }
}

// --- Add this function to reset the wizard ---
function resetAddWarrantyWizard() {
    console.log('Resetting Add Warranty Wizard...');
    // Reset the form fields
    if (warrantyForm) {
        warrantyForm.reset();
        
        // Explicitly set storage options to 'local'
        const storageTypes = ['invoice', 'manual'];
        storageTypes.forEach(type => {
            const localRadio = document.querySelector(`input[name="${type}Storage"][value="local"]`);
            if (localRadio) {
                localRadio.checked = true;
            }
        });
    }

    // Reset serial numbers container (remove all but the first input structure)
    if (serialNumbersContainer) {
        serialNumbersContainer.innerHTML = ''; // Clear it
        addSerialNumberInput(); // Add the initial input back
    }

    // Reset file input displays
    if (fileName) fileName.textContent = '';
    if (manualFileName) manualFileName.textContent = '';
    if (otherDocumentFileName) otherDocumentFileName.textContent = ''; 

    // Clear Paperless document selections (only for invoice and manual)
    clearPaperlessSelection('invoice');
    clearPaperlessSelection('manual');

    // Reset selected tags
    selectedTags = [];
    console.log('Resetting Add Warranty Wizard...');
    
    // No need to reset the form again as we already did it above

    // Reset serial numbers container (remove all but the first input structure)
    if (serialNumbersContainer) {
        serialNumbersContainer.innerHTML = ''; // Clear it
        addSerialNumberInput(); // Add the initial input back
    }

    // Reset file input displays
    if (fileName) fileName.textContent = '';
    if (manualFileName) manualFileName.textContent = '';
    if (otherDocumentFileName) otherDocumentFileName.textContent = ''; 

    // Reset selected tags
    selectedTags = [];
    renderSelectedTags(); // Update the display

    // Reset tabs to the first one
    // Use the globally defined tabContents if available
    const tabs = addWarrantyModal?.querySelectorAll('.form-tab');
    const contents = addWarrantyModal?.querySelectorAll('.tab-content');
    if (tabs && contents && tabs.length > 0 && contents.length > 0) {
      currentTabIndex = 0;
      switchToTab(0); // Use the existing function to switch
    } else {
       console.warn("Could not find tabs/contents inside addWarrantyModal to reset.");
    }

    // Clear any validation states
    addWarrantyModal?.querySelectorAll('.invalid').forEach(el => el.classList.remove('invalid'));
    addWarrantyModal?.querySelectorAll('.validation-message').forEach(el => el.remove());

    // Reset lifetime checkbox state if needed (ensure handler runs)
    if (isLifetimeCheckbox) {
         isLifetimeCheckbox.checked = false; // Explicitly uncheck
         handleLifetimeChange({ target: isLifetimeCheckbox }); // Trigger handler to reset visibility/required state
    }
}

// --- Modify setupUIEventListeners or add this within DOMContentLoaded ---
function setupModalTriggers() {
    // Show Add Warranty Modal
    if (showAddWarrantyBtn && addWarrantyModal) {
        showAddWarrantyBtn.addEventListener('click', () => {
            resetAddWarrantyWizard(); // Reset before showing
            addWarrantyModal.classList.add('active');
            initFormTabs(); // Initialize tabs only when modal is shown
            switchToTab(0); // Ensure the first tab content is displayed correctly after reset
            
            // Set currency dropdown to user's preferred currency after form reset
            const preferredCurrencyCode = getCurrencyCode();
            if (currencySelect && preferredCurrencyCode) {
                currencySelect.value = preferredCurrencyCode;
                console.log(`[Modal Open] Set currency dropdown to user preference: ${preferredCurrencyCode}`);
            }
            
            // Update currency symbols and positioning for the add form
            const symbol = getCurrencySymbol();
            const position = getCurrencyPosition();
            updateFormCurrencyPosition(symbol, position);
            
            // Trigger currency positioning after modal is visible
            setTimeout(() => {
                if (position === 'right') {
                    const addPriceInput = document.getElementById('purchasePrice');
                    const addCurrencySymbol = document.getElementById('addCurrencySymbol');
                    if (addPriceInput && addCurrencySymbol) {
                        // Force update the currency position now that modal is visible
                        const wrapper = addPriceInput.closest('.price-input-wrapper');
                        if (wrapper && wrapper.classList.contains('currency-right')) {
                            const updateEvent = new Event('focus');
                            addPriceInput.dispatchEvent(updateEvent);
                            const blurEvent = new Event('blur');
                            addPriceInput.dispatchEvent(blurEvent);
                        }
                    }
                }
            }, 200);
        });
    }

    // Hide Add Warranty Modal (using existing close logic)
    if (addWarrantyModal) {
        // Close button inside modal
        const closeBtn = addWarrantyModal.querySelector('.close-btn');
        if (closeBtn) {
            closeBtn.addEventListener('click', () => {
                addWarrantyModal.classList.remove('active');
                resetAddWarrantyWizard(); // Reset on close
            });
        }
        // REMOVED: Backdrop click listener
        /*
        addWarrantyModal.addEventListener('click', (e) => {
            if (e.target === addWarrantyModal) {
                addWarrantyModal.classList.remove('active');
                resetAddWarrantyWizard(); // Reset on close
            }
        });
        */
        // Optional: Cancel button in footer if you add one
        // ... (cancel button logic remains unchanged)
    }

    // --- Edit Modal Triggers (Keep existing logic) ---
    // Close edit/delete modals when clicking outside or on close button
    document.querySelectorAll('#editModal, #deleteModal, [data-dismiss="modal"]').forEach(element => {
        element.addEventListener('click', (e) => {
            // Check if the click is on the backdrop itself OR a dismiss button
            if (e.target === element || e.target.matches('[data-dismiss="modal"]')) {
                 // Find the closest modal backdrop to the element clicked
                const modalToClose = e.target.closest('.modal-backdrop');
                if (modalToClose) {
                    // *** ADD CHECK: Do NOT close addWarrantyModal or editModal via this general listener for backdrop clicks ***
                    if ((modalToClose.id === 'addWarrantyModal' || modalToClose.id === 'editModal') && e.target === modalToClose) {
                        return; // Ignore backdrop clicks for the add and edit modals here
                    }
                    // *** END ADD CHECK ***

                    modalToClose.classList.remove('active');
                    // Reset edit form state if closing edit modal
                    if (modalToClose.id === 'editModal') {
                        // Optional: Add any edit form reset logic here if needed
                    }
                }
            }
        });
    });

    // Prevent modal content clicks from closing the modal (Keep for all modals)
    document.querySelectorAll('.modal').forEach(modal => {
        modal.addEventListener('click', (e) => {
            e.stopPropagation();
        });
    });
}

// --- CSV Import Functionality ---

async function handleImport(file) {
    if (!file) {
        showToast('No file selected.', 'warning');
        return;
    }

    if (!file.name.toLowerCase().endsWith('.csv')) {
        showToast('Invalid file type. Please select a .csv file.', 'error');
        return;
    }

    // Show loading indicator
    showLoadingSpinner();

    const formData = new FormData();
    formData.append('csv_file', file);

    try {
        // const token = localStorage.getItem('token'); // Incorrect key
        const token = localStorage.getItem('auth_token'); // Correct key used elsewhere
        if (!token) {
            showToast('Authentication error. Please log in again.', 'error');
            hideLoadingSpinner();
            // Maybe redirect to login: window.location.href = '/login.html';
            return;
        }

        const response = await fetch('/api/warranties/import', {
            method: 'POST',
            headers: {
                // Content-Type is automatically set by browser when using FormData
                'Authorization': `Bearer ${token}`
            },
            body: formData
        });

        hideLoadingSpinner();
        const result = await response.json();

        if (response.ok) {
            const { success_count, failure_count, errors } = result;
            let message = `${success_count} warranties imported successfully.`;
            if (failure_count > 0) {
                message += ` ${failure_count} rows failed.`;
                // Log detailed errors to the console for now
                console.warn('Import errors:', errors);
                // Consider showing errors in a modal or separate report later
            }
            showToast(message, 'success');

            // ***** FIX: Reload the tags list *****
            console.log("Import successful, reloading tags...");
            await loadTags(); // Fetch the updated list of all tags
            // ***** END FIX *****

            // Add a small delay to ensure backend has processed the data
            await new Promise(resolve => setTimeout(resolve, 500));
            
            // Await the warranties load to ensure UI is updated
            await loadWarranties(true);
            
            // Force a UI refresh by reapplying filters
            applyFilters();
        } else {
            showToast(`Import failed: ${result.error || 'Unknown error'}`, 'error');
            if (result.errors) {
                 console.error('Detailed import errors:', result.errors);
            }
        }

    } catch (error) {
        hideLoadingSpinner();
        console.error('Error during file import:', error);
        showToast('An error occurred during import. Check console for details.', 'error');
    } finally {
        // Reset the file input so the user can select the same file again if needed
        if (csvFileInput) {
            csvFileInput.value = '';
        }
    }
}

// --- End CSV Import Functionality ---

// --- Add Storage Event Listener for Real-time Sync ---
window.addEventListener('storage', (event) => {
    const currentPrefix = getPreferenceKeyPrefix(); // Re-calculate prefix
    const viewKeysToWatch = [
        `${currentPrefix}defaultView`,
        'viewPreference',
        `${currentPrefix}warrantyView`,
        // Add `${currentPrefix}viewPreference` if still used/relevant
        `${currentPrefix}viewPreference` 
    ];

    // Check for view preference changes
    if (viewKeysToWatch.includes(event.key) && event.newValue) {
        console.log(`Storage event detected for view preference (${event.key}). New value: ${event.newValue}`);
        // Check if the new value is different from the current view to avoid loops
        if (event.newValue !== currentView) {
             // Ensure view buttons exist before switching (we're on the main page)
             if (gridViewBtn || listViewBtn || tableViewBtn) {
                 switchView(event.newValue, false); // Apply change, don't re-save to API
             }
        } else {
             console.log('Storage event value matches current view, ignoring.');
        }
    }

    // --- Added: Check for date format changes ---
    if (event.key === 'dateFormat' && event.newValue) {
        console.log(`Storage event detected for dateFormat. New value: ${event.newValue}`);
        // Re-apply filters to re-render warranties with the new date format
        if (warrantiesList) { // Only apply if the warranty list exists on the page
             applyFilters();
             showToast('Date format updated.', 'info'); // Optional: Notify user
        }
    }
    // --- End Added Check ---

    // --- Added: Check for currency symbol changes ---
    if (event.key === `${currentPrefix}currencySymbol` && event.newValue) {
        console.log(`Storage event detected for ${currentPrefix}currencySymbol. New value: ${event.newValue}`);
        if (warrantiesList) { // Only apply if on the main page
            updateCurrencySymbols(); // Update symbols outside cards (e.g., in forms if they exist)
            applyFilters(); // Re-render cards to update symbols inside them
            showToast('Currency symbol updated.', 'info'); // Optional: Notify user
        }
    }
    // --- End Added Check ---
});
// --- End Storage Event Listener ---

// Add modal HTML to the end of the body if not present
if (!document.getElementById('notesModal')) {
    const notesModal = document.createElement('div');
    notesModal.id = 'notesModal';
    notesModal.className = 'modal-backdrop';
    notesModal.innerHTML = `
        <div class="modal" style="max-width: 500px;">
            <div class="modal-header">
                <h3 class="modal-title">Warranty Notes</h3>
                <button class="close-btn" id="closeNotesModal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="notesModalContent" style="white-space: pre-line;"></div>
                <textarea id="notesModalTextarea" style="display:none;width:100%;min-height:100px;"></textarea>
            </div>
            <div class="modal-footer" id="notesModalFooter">
                <button class="btn btn-secondary" id="editNotesBtn">Edit Notes</button>
                <button class="btn btn-info" id="editWarrantyBtn">Edit Warranty</button>
                <button class="btn btn-primary" id="saveNotesBtn" style="display:none;">Save</button>
                <button class="btn btn-danger" id="cancelEditNotesBtn" style="display:none;">Cancel</button>
            </div>
        </div>
    `;
    document.body.appendChild(notesModal);
    document.getElementById('closeNotesModal').addEventListener('click', () => {
        notesModal.classList.remove('active');
    });
    
    // Add event listener for Edit Warranty button
    document.getElementById('editWarrantyBtn').addEventListener('click', async () => {
        // Find the current warranty data from the global array
        const currentWarranty = warranties.find(w => w.id === notesModalWarrantyId);
        if (currentWarranty) {
            console.log('[DEBUG] Edit Warranty button clicked, opening edit modal with warranty:', currentWarranty.id, 'notes:', currentWarranty.notes);
            // Close the notes modal first
            notesModal.classList.remove('active');
            // Open the edit modal with current data
            await openEditModal(currentWarranty);
        } else {
            showToast(window.t('messages.warranty_not_found_refresh'), 'error');
        }
    });
}

// Add global to track which warranty is being edited in the notes modal
let notesModalWarrantyId = null;
let notesModalWarrantyObj = null;

function showNotesModal(notes, warrantyOrId = null) {
    const notesModal = document.getElementById('notesModal');
    const notesModalContent = document.getElementById('notesModalContent');
    const notesModalTextarea = document.getElementById('notesModalTextarea');
    const editBtn = document.getElementById('editNotesBtn');
    const saveBtn = document.getElementById('saveNotesBtn');
    const cancelBtn = document.getElementById('cancelEditNotesBtn');

    // Support both (notes, warrantyObj) and (notes, id) for backward compatibility
    if (typeof warrantyOrId === 'object' && warrantyOrId !== null) {
        notesModalWarrantyId = warrantyOrId.id;
        notesModalWarrantyObj = warrantyOrId;
    } else {
        notesModalWarrantyId = warrantyOrId;
        // Try to find the warranty object from global warranties array
        notesModalWarrantyObj = warranties.find(w => w.id === notesModalWarrantyId) || null;
    }

    // Show note content, hide textarea and edit controls
    notesModalContent.style.display = '';
    notesModalContent.textContent = notes;
    notesModalTextarea.style.display = 'none';
    editBtn.style.display = '';
    saveBtn.style.display = 'none';
    cancelBtn.style.display = 'none';

    // Edit button handler
    editBtn.onclick = function() {
        notesModalContent.style.display = 'none';
        notesModalTextarea.style.display = '';
        // Use the current content from the modal display instead of the stale notes parameter
        notesModalTextarea.value = notesModalContent.textContent;
        editBtn.style.display = 'none';
        saveBtn.style.display = '';
        cancelBtn.style.display = '';
        notesModalTextarea.focus();
    };
    // Save button handler
    saveBtn.onclick = async function() {
        const newNote = notesModalTextarea.value.trim(); // Trim the note
        if (!notesModalWarrantyId || !notesModalWarrantyObj) {
            showToast('No warranty selected for note update', 'error');
            return;
        }

        // Frontend check for invalid duration before attempting to save notes
        if (!notesModalWarrantyObj.is_lifetime &&
            (parseInt(notesModalWarrantyObj.warranty_duration_years) || 0) === 0 &&
            (parseInt(notesModalWarrantyObj.warranty_duration_months) || 0) === 0 &&
            (parseInt(notesModalWarrantyObj.warranty_duration_days) || 0) === 0 &&
            !notesModalWarrantyObj.expiration_date) {
            showToast('Cannot save notes: The warranty has an invalid duration. Please edit the full warranty details to set a valid duration first.', 'error', 7000); // Longer toast duration
            return; // Prevent API call
        }

        // Save note via API, sending all required fields
        try {
            showLoadingSpinner();
            const token = localStorage.getItem('auth_token');
            const formData = new FormData();
            // --- Populate with existing data to avoid clearing fields ---
            formData.append('product_name', notesModalWarrantyObj.product_name);
            formData.append('purchase_date', (notesModalWarrantyObj.purchase_date || '').split('T')[0]);
            formData.append('is_lifetime', notesModalWarrantyObj.is_lifetime ? 'true' : 'false');
            if (!notesModalWarrantyObj.is_lifetime) {
                // Append duration components instead of warranty_years
                formData.append('warranty_duration_years', notesModalWarrantyObj.warranty_duration_years || 0);
                formData.append('warranty_duration_months', notesModalWarrantyObj.warranty_duration_months || 0);
                formData.append('warranty_duration_days', notesModalWarrantyObj.warranty_duration_days || 0);
                
                // If all duration fields are 0 but we have an expiration date, this was created with exact date method
                const isExactDateWarranty = (notesModalWarrantyObj.warranty_duration_years || 0) === 0 &&
                                          (notesModalWarrantyObj.warranty_duration_months || 0) === 0 &&
                                          (notesModalWarrantyObj.warranty_duration_days || 0) === 0 &&
                                          notesModalWarrantyObj.expiration_date;
                
                if (isExactDateWarranty) {
                    // For exact date warranties, send the expiration date as exact_expiration_date
                    formData.append('exact_expiration_date', notesModalWarrantyObj.expiration_date.split('T')[0]);
                }
            }
            if (notesModalWarrantyObj.product_url) {
                formData.append('product_url', notesModalWarrantyObj.product_url);
            }
            if (notesModalWarrantyObj.purchase_price !== null && notesModalWarrantyObj.purchase_price !== undefined) { // Check for null/undefined
                formData.append('purchase_price', notesModalWarrantyObj.purchase_price);
            }
            // Correctly append serial numbers
            if (notesModalWarrantyObj.serial_numbers && Array.isArray(notesModalWarrantyObj.serial_numbers)) {
                notesModalWarrantyObj.serial_numbers.forEach(sn => {
                    // Ensure sn is treated as a string before trim, and append with [] for array
                    if (sn && String(sn).trim() !== '') {
                        formData.append('serial_numbers[]', String(sn).trim());
                    }
                });
            }
            // If notesModalWarrantyObj.serial_numbers is empty or not an array, 
            // no 'serial_numbers[]' fields will be appended, which is typically interpreted as an empty list by backends.

            if (notesModalWarrantyObj.tags && Array.isArray(notesModalWarrantyObj.tags)) {
                const tagIds = notesModalWarrantyObj.tags.map(tag => tag.id);
                formData.append('tag_ids', JSON.stringify(tagIds));
            }
            // Send empty array if no tags exist or are provided
            else {
                 formData.append('tag_ids', JSON.stringify([]));
            }
            // --- End Populate ---

            formData.append('notes', newNote); // Append the potentially empty, trimmed note

            // Add vendor/retailer to form data
            const editVendorOrRetailer = document.getElementById('editVendorOrRetailer');
            formData.append('vendor', editVendorOrRetailer ? editVendorOrRetailer.value.trim() : '');

            const response = await fetch(`/api/warranties/${notesModalWarrantyId}`, { // Added await and response handling
                method: 'PUT',
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                body: formData
            });

            if (!response.ok) { // Check if the API call was successful
                 const errorData = await response.json().catch(() => ({})); // Try to parse error, default to empty object
                 throw new Error(errorData.error || `Failed to update note (Status: ${response.status})`);
            }


            hideLoadingSpinner();
            showToast('Note updated', 'success');

            // Update the warranty in the global warranties array immediately
            const warrantyIndex = warranties.findIndex(w => w.id === notesModalWarrantyId);
            if (warrantyIndex !== -1) {
                warranties[warrantyIndex].notes = newNote;
            }

            // --- Updated UI logic ---
             if (newNote === '') {
                // If the note is now empty, close the modal
                document.getElementById('notesModal').classList.remove('active');
            } else {
                // If note is not empty, update the view and stay in the modal
                notesModalContent.textContent = newNote;
                notesModalContent.style.display = '';
                notesModalTextarea.style.display = 'none';
                editBtn.style.display = '';
                saveBtn.style.display = 'none';
                cancelBtn.style.display = 'none';
                 // Update the local warranty object's notes
                 if (notesModalWarrantyObj) {
                    notesModalWarrantyObj.notes = newNote;
                }
            }
             // --- End Updated UI logic ---

            // Refresh warranties list and THEN update UI
            await loadWarranties(true); // Wait for data refresh
            applyFilters(); // Re-render the list with updated data

        } catch (e) {
            hideLoadingSpinner();
            console.error("Error updating note:", e); // Log the error
            showToast(e.message || 'Failed to update note', 'error'); // Show specific error if available
        }
    };
    // Cancel button handler
    cancelBtn.onclick = function() {
        notesModalContent.style.display = '';
        notesModalTextarea.style.display = 'none';
        editBtn.style.display = '';
        saveBtn.style.display = 'none';
        cancelBtn.style.display = 'none';
    };
    notesModal.classList.add('active');
}

// Utility to get currency symbol from preferences/localStorage
function getCurrencySymbol() {
    // Use the global prefix determined after auth ready
    let prefix = userPreferencePrefix; // Use let to allow default override
     if (!prefix) {
         console.warn('[getCurrencySymbol] User preference prefix not set yet, defaulting prefix to user_');
         prefix = 'user_'; // Default prefix if called too early
    }
    console.log(`[getCurrencySymbol] Using determined prefix: ${prefix}`);
    let symbol = '$'; // Default value

    const rawValue = localStorage.getItem(`${prefix}currencySymbol`);
    console.log(`[getCurrencySymbol Debug] Raw value read from localStorage key '${prefix}currencySymbol':`, rawValue);
    // +++ END ADDED LOG +++

    // --- Priority 1: Load from individual key --- (Saved by settings-new.js)
    const individualSymbol = rawValue; // Use the already read value
    if (individualSymbol) { // Check uses the already read value
        symbol = individualSymbol;
        console.log(`[getCurrencySymbol] Loaded symbol from individual key (${prefix}currencySymbol): ${symbol}`);
        return symbol;
    }

    // --- Priority 2: Load from preferences object (Legacy/Fallback) ---
    try {
        const prefsString = localStorage.getItem(`${prefix}preferences`);
        console.log(`[getCurrencySymbol] Read prefsString for ${prefix}preferences:`, prefsString);
        if (prefsString) {
            const prefs = JSON.parse(prefsString);
            if (prefs && prefs.currency_symbol) {
                symbol = prefs.currency_symbol;
                console.log(`[getCurrencySymbol] Loaded symbol from object key (${prefix}preferences): ${symbol}`);
            }
        }
    } catch (e) {
        console.error(`Error reading ${prefix}preferences from localStorage:`, e);
        // Keep the default '$' symbol in case of error parsing the object
    }

    console.log(`[getCurrencySymbol] Returning symbol (default or from object): ${symbol}`);
    return symbol;
}

// Function to get user's preferred currency code
function getCurrencyCode() {
    // Use the global prefix determined after auth ready
    let prefix = userPreferencePrefix;
    if (!prefix) {
        console.warn('[getCurrencyCode] User preference prefix not set yet, defaulting prefix to user_');
        prefix = 'user_';
    }
    console.log(`[getCurrencyCode] Using determined prefix: ${prefix}`);
    
    // Default to USD
    let currencyCode = 'USD';
    
    // Try to get currency code from localStorage
    const rawValue = localStorage.getItem(`${prefix}currencyCode`);
    console.log(`[getCurrencyCode Debug] Raw value read from localStorage key '${prefix}currencyCode':`, rawValue);
    
    if (rawValue) {
        currencyCode = rawValue;
        console.log(`[getCurrencyCode] Loaded currency code from individual key (${prefix}currencyCode): ${currencyCode}`);
        return currencyCode;
    }
    
    // Fallback: Try to derive currency code from symbol
    const symbol = getCurrencySymbol();
    const symbolToCurrencyMap = {
        '$': 'USD', '€': 'EUR', '£': 'GBP', '¥': 'JPY', '₹': 'INR', '₩': 'KRW',
        'CHF': 'CHF', 'C$': 'CAD', 'A$': 'AUD', 'kr': 'SEK', 'zł': 'PLN', 
        'Kč': 'CZK', 'Ft': 'HUF', '₽': 'RUB', 'R$': 'BRL', '₦': 'NGN',
        '₪': 'ILS', '₺': 'TRY', '₨': 'PKR', '৳': 'BDT', '฿': 'THB',
        '₫': 'VND', 'RM': 'MYR', 'S$': 'SGD', 'Rp': 'IDR', '₱': 'PHP',
        'NT$': 'TWD', 'HK$': 'HKD', '₮': 'MNT', '₸': 'KZT', '₼': 'AZN',
        '₾': 'GEL', '₴': 'UAH', 'NZ$': 'NZD'
    };
    
    if (symbolToCurrencyMap[symbol]) {
        currencyCode = symbolToCurrencyMap[symbol];
        console.log(`[getCurrencyCode] Derived currency code from symbol '${symbol}': ${currencyCode}`);
    } else {
        console.log(`[getCurrencyCode] Could not derive currency code from symbol '${symbol}', using default: ${currencyCode}`);
    }
    
    return currencyCode;
}

// Function to load currencies from API and populate dropdowns
async function loadCurrencies() {
    try {
        const response = await fetch('/api/currencies');
        if (!response.ok) {
            throw new Error('Failed to fetch currencies');
        }
        
        const currencies = await response.json();
        
        // Get user's preferred currency code for default selection
        const preferredCurrencyCode = getCurrencyCode();
        
        // Populate add warranty currency dropdown
        if (currencySelect) {
            currencySelect.innerHTML = '';
            currencies.forEach(currency => {
                const option = document.createElement('option');
                option.value = currency.code;
                option.textContent = `${currency.code} - ${currency.name} (${currency.symbol})`;
                currencySelect.appendChild(option);
            });
            
            // Set default selection to user's preferred currency
            console.log(`[loadCurrencies] Preferred currency code: ${preferredCurrencyCode}`);
            console.log(`[loadCurrencies] Available currency options:`, Array.from(currencySelect.options).map(opt => opt.value));
            
            if (preferredCurrencyCode) {
                // Use setTimeout to ensure DOM is fully updated
                setTimeout(() => {
                    currencySelect.value = preferredCurrencyCode;
                    console.log(`[loadCurrencies] Set add warranty currency default to: ${preferredCurrencyCode}`);
                    console.log(`[loadCurrencies] Current selected value: ${currencySelect.value}`);
                    
                    // Trigger change event to update any dependent UI
                    const changeEvent = new Event('change', { bubbles: true });
                    currencySelect.dispatchEvent(changeEvent);
                }, 10);
            } else {
                console.log(`[loadCurrencies] No preferred currency code found, keeping default USD`);
            }
        }
        
        // Populate edit warranty currency dropdown
        if (editCurrencySelect) {
            editCurrencySelect.innerHTML = '';
            currencies.forEach(currency => {
                const option = document.createElement('option');
                option.value = currency.code;
                option.textContent = `${currency.code} - ${currency.name} (${currency.symbol})`;
                editCurrencySelect.appendChild(option);
            });
        }
        
        console.log('Currencies loaded successfully');
    } catch (error) {
        console.error('Error loading currencies:', error);
        // Fallback to USD if loading fails
        if (currencySelect) {
            currencySelect.innerHTML = '<option value="USD">USD - US Dollar ($)</option>';
        }
        if (editCurrencySelect) {
            editCurrencySelect.innerHTML = '<option value="USD">USD - US Dollar ($)</option>';
        }
    }
}

function getCurrencySymbolByCode(currencyCode) {
    const currencyMap = {
        'USD': '$', 'EUR': '€', 'GBP': '£', 'JPY': '¥', 'CNY': '¥', 'INR': '₹', 'KRW': '₩',
        'CHF': 'CHF', 'CAD': 'C$', 'AUD': 'A$', 'SEK': 'kr', 'NOK': 'kr', 'DKK': 'kr',
        'PLN': 'zł', 'CZK': 'Kč', 'HUF': 'Ft', 'BGN': 'лв', 'RON': 'lei', 'HRK': 'kn',
        'RUB': '₽', 'BRL': 'R$', 'MXN': '$', 'ARS': '$', 'CLP': '$', 'COP': '$',
        'PEN': 'S/', 'VES': 'Bs', 'ZAR': 'R', 'EGP': '£', 'NGN': '₦', 'KES': 'KSh',
        'GHS': '₵', 'MAD': 'DH', 'TND': 'DT', 'AED': 'AED', 'SAR': 'SR', 'QAR': 'QR',
        'KWD': 'KD', 'BHD': 'BD', 'OMR': 'OR', 'JOD': 'JD', 'LBP': 'LL', 'ILS': '₪',
        'TRY': '₺', 'IRR': '﷼', 'PKR': '₨', 'BDT': '৳', 'LKR': 'Rs', 'NPR': 'Rs',
        'BTN': 'Nu', 'MMK': 'K', 'THB': '฿', 'VND': '₫', 'LAK': '₭', 'KHR': '៛',
        'MYR': 'RM', 'SGD': 'S$', 'IDR': 'Rp', 'PHP': '₱', 'TWD': 'NT$', 'HKD': 'HK$',
        'MOP': 'MOP', 'KPW': '₩', 'MNT': '₮', 'KZT': '₸', 'UZS': 'soʻm', 'TJS': 'SM',
        'KGS': 'с', 'TMT': 'T', 'AFN': '؋', 'AMD': '֏', 'AZN': '₼', 'GEL': '₾',
        'MDL': 'L', 'UAH': '₴', 'BYN': 'Br', 'RSD': 'дин', 'MKD': 'ден', 'ALL': 'L',
        'BAM': 'KM', 'ISK': 'kr', 'FJD': 'FJ$', 'PGK': 'K', 'SBD': 'SI$', 'TOP': 'T$',
        'VUV': 'VT', 'WST': 'WS$', 'XPF': '₣', 'NZD': 'NZ$'
    };
    return currencyMap[currencyCode] || currencyCode;
}

function getCurrencyPosition() {
    let prefix = userPreferencePrefix;
    if (!prefix) {
        console.warn('[getCurrencyPosition] User preference prefix not set yet, defaulting prefix to user_');
        prefix = 'user_';
    }
    
    let position = 'left'; // Default position
    const rawValue = localStorage.getItem(`${prefix}currencyPosition`);
    console.log(`[getCurrencyPosition] Raw value from localStorage (${prefix}currencyPosition):`, rawValue);
    
    if (rawValue) {
        position = rawValue;
        console.log(`[getCurrencyPosition] Loaded position from localStorage: ${position}`);
    } else {
        console.log(`[getCurrencyPosition] No position found, using default: ${position}`);
    }
    
    return position;
}

function formatCurrencyHTML(amount, symbol, position) {
    const formattedAmount = parseFloat(amount).toFixed(2);
    
    if (position === 'right') {
        return `<span>${formattedAmount}</span><span class="currency-symbol currency-right">${symbol}</span>`;
    } else {
        return `<span class="currency-symbol">${symbol}</span><span>${formattedAmount}</span>`;
    }
}

function updateCurrencySymbols() {
    const symbol = getCurrencySymbol();
    const position = getCurrencyPosition();
    console.log(`Updating currency symbols to: ${symbol}, position: ${position}`);
    
    // Update all currency symbols
    const elements = document.querySelectorAll('.currency-symbol');
    console.log(`Found ${elements.length} elements with class 'currency-symbol'.`);
    elements.forEach(el => {
        el.textContent = symbol;
    });
    
    // Update form currency positioning
    updateFormCurrencyPosition(symbol, position);
}

function updateFormCurrencyPosition(symbol, position) {
    // Handle add warranty form
    const addPriceWrapper = document.getElementById('addPriceInputWrapper');
    const addCurrencySymbol = document.getElementById('addCurrencySymbol');
    const addPriceInput = document.getElementById('purchasePrice');
    
    if (addPriceWrapper && addCurrencySymbol) {
        addCurrencySymbol.textContent = symbol;
        if (position === 'right') {
            addPriceWrapper.classList.add('currency-right');
            // Set up dynamic positioning for right-aligned currency
            if (addPriceInput) {
                setupDynamicCurrencyPosition(addPriceInput, addCurrencySymbol);
            }
        } else {
            addPriceWrapper.classList.remove('currency-right');
            // Reset any dynamic positioning
            if (addCurrencySymbol) {
                addCurrencySymbol.style.right = '';
            }
        }
        console.log(`Updated add form currency position: ${position}`);
    }
    
    // Handle edit warranty form
    const editPriceWrapper = document.getElementById('editPriceInputWrapper');
    const editCurrencySymbol = document.getElementById('editCurrencySymbol');
    const editPriceInput = document.getElementById('editPurchasePrice');
    
    if (editPriceWrapper && editCurrencySymbol) {
        editCurrencySymbol.textContent = symbol;
        if (position === 'right') {
            editPriceWrapper.classList.add('currency-right');
            // Set up dynamic positioning for right-aligned currency
            if (editPriceInput) {
                setupDynamicCurrencyPosition(editPriceInput, editCurrencySymbol);
            }
        } else {
            editPriceWrapper.classList.remove('currency-right');
            // Reset any dynamic positioning
            if (editCurrencySymbol) {
                editCurrencySymbol.style.right = '';
            }
        }
        console.log(`Updated edit form currency position: ${position}`);
    }
}

function setupDynamicCurrencyPosition(input, currencySymbol) {
    if (!input || !currencySymbol) return;
    
    function updatePosition() {
        const wrapper = input.closest('.price-input-wrapper');
        if (!wrapper || !wrapper.classList.contains('currency-right')) return;
        
        // Wait for elements to be fully rendered
        if (wrapper.offsetWidth === 0) {
            setTimeout(updatePosition, 50);
            return;
        }
        
        // Get the input value or placeholder
        const text = input.value || input.placeholder || '0.00';
        
        // Create a temporary element to measure text width
        const tempSpan = document.createElement('span');
        tempSpan.style.visibility = 'hidden';
        tempSpan.style.position = 'absolute';
        tempSpan.style.fontSize = window.getComputedStyle(input).fontSize;
        tempSpan.style.fontFamily = window.getComputedStyle(input).fontFamily;
        tempSpan.style.fontWeight = window.getComputedStyle(input).fontWeight;
        tempSpan.style.letterSpacing = window.getComputedStyle(input).letterSpacing;
        tempSpan.textContent = text;
        
        document.body.appendChild(tempSpan);
        const textWidth = tempSpan.offsetWidth;
        document.body.removeChild(tempSpan);
        
        // Calculate position: input padding + text width + small gap
        const inputPaddingLeft = parseInt(window.getComputedStyle(input).paddingLeft) || 12;
        const gap = 4; // Small gap between text and currency symbol
        const wrapperWidth = wrapper.offsetWidth;
        const rightPosition = Math.max(8, wrapperWidth - inputPaddingLeft - textWidth - gap - 20);
        
        currencySymbol.style.right = rightPosition + 'px';
        console.log(`[Dynamic Currency] Positioned currency symbol at ${rightPosition}px from right for text: "${text}"`);
    }
    
    // Update position on various events
    input.addEventListener('input', updatePosition);
    input.addEventListener('focus', updatePosition);
    input.addEventListener('blur', updatePosition);
    
    // Initial positioning with better timing
    // Use requestAnimationFrame to ensure DOM is ready
    requestAnimationFrame(() => {
        updatePosition();
        // Also set up additional fallback timers
        setTimeout(updatePosition, 100);
        setTimeout(updatePosition, 300);
    });
}

// If you want to update currency symbols live when storage changes (e.g. settings page open in another tab):
window.addEventListener('storage', function(e) {
    const prefix = getPreferenceKeyPrefix();
    // Only update if the main preferences object for the current user type changed
    if (e.key === `${prefix}preferences`) {
        console.log(`Storage event detected for ${prefix}preferences. Updating currency symbols.`);
        updateCurrencySymbols();
    }
    // Also update when currency position changes
    if (e.key === `${prefix}currencyPosition`) {
        console.log(`Storage event detected for ${prefix}currencyPosition. Re-rendering warranties to update currency position.`);
        // Update forms immediately
        const symbol = getCurrencySymbol();
        const position = getCurrencyPosition();
        updateFormCurrencyPosition(symbol, position);
        // Re-render warranties to apply new currency position
        if (typeof processAllWarranties === 'function') {
            processAllWarranties();
        }
    }
});

// +++ NEW FUNCTION TO LOAD PREFS AND SAVE TO LOCALSTORAGE +++
async function loadAndApplyUserPreferences(isAuthenticated) { // Added isAuthenticated parameter
    // Use the global prefix determined after auth ready
    let prefix = userPreferencePrefix; // <<< CHANGED const to let
    if (!prefix) {
         console.error('[Prefs Loader] Cannot load preferences: User preference prefix not set yet. Defaulting to user_');
         // Setting a default might be risky if the user *is* admin but prefix wasn't set in time.
         // Consider how authStateReady ensures prefix is set before this runs.
         // For now, let's try defaulting, but this might need review.
         prefix = 'user_'; 
    }
    console.log(`[Prefs Loader] Attempting to load preferences using prefix: ${prefix}, isAuthenticated: ${isAuthenticated}`);
    
    if (isAuthenticated && window.auth) { // Use passed isAuthenticated and check if window.auth exists
        const token = window.auth.getToken(); // Still need token for the API call
        if (!token) {
            console.error('[Prefs Loader] Cannot load preferences: No auth token found, even though isAuthenticated was true.');
            return; // Exit if no token
        }
        
        try {
            console.log('[Prefs Loader] Fetching /api/auth/preferences with token.');
            const response = await fetch('/api/auth/preferences', {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });

            if (response.ok) {
                const apiPrefs = await response.json();
                console.log('[Prefs Loader] Preferences loaded from API:', apiPrefs);

                // Save relevant prefs to localStorage
                if (apiPrefs.currency_symbol) {
                    localStorage.setItem(`${prefix}currencySymbol`, apiPrefs.currency_symbol);
                    console.log(`[Prefs Loader] Saved ${prefix}currencySymbol: ${apiPrefs.currency_symbol}`);
                }
                if (apiPrefs.currency_position) {
                    localStorage.setItem(`${prefix}currencyPosition`, apiPrefs.currency_position);
                    console.log(`[Prefs Loader] Saved ${prefix}currencyPosition: ${apiPrefs.currency_position}`);
                }
                if (apiPrefs.default_view) {
                    localStorage.setItem(`${prefix}defaultView`, apiPrefs.default_view);
                     console.log(`[Prefs Loader] Saved ${prefix}defaultView: ${apiPrefs.default_view}`);
                }
                if (apiPrefs.expiring_soon_days !== undefined) {
                    localStorage.setItem(`${prefix}expiringSoonDays`, apiPrefs.expiring_soon_days);
                    // Also update the global variable used by processWarrantyData
                    expiringSoonDays = apiPrefs.expiring_soon_days;
                    console.log(`[Prefs Loader] Saved ${prefix}expiringSoonDays: ${apiPrefs.expiring_soon_days}`);
                    console.log(`[Prefs Loader] Updated global expiringSoonDays variable to: ${expiringSoonDays}`);
                }
                if (apiPrefs.date_format) {
                    localStorage.setItem('dateFormat', apiPrefs.date_format);
                    console.log(`[Prefs Loader] Saved dateFormat: ${apiPrefs.date_format}`);
                }
                
                // Optionally trigger immediate UI updates if needed, although renderWarranties will use these new values
                // updateCurrencySymbols(); 

            } else {
                const errorData = await response.json().catch(() => ({}));
                console.warn(`[Prefs Loader] Failed to load preferences from API: ${response.status}`, errorData.message || '');
                // Set defaults in localStorage maybe?
                if (!localStorage.getItem('dateFormat')) localStorage.setItem('dateFormat', 'MDY');
                if (!localStorage.getItem(`${prefix}currencySymbol`)) localStorage.setItem(`${prefix}currencySymbol`, '$');
                // etc.
            }
        } catch (error) {
            console.error('[Prefs Loader] Error fetching/applying preferences from API:', error);
            // Set defaults in localStorage on error?
            if (!localStorage.getItem('dateFormat')) localStorage.setItem('dateFormat', 'MDY');
            if (!localStorage.getItem(`${prefix}currencySymbol`)) localStorage.setItem(`${prefix}currencySymbol`, '$');
            // etc.
        }
    } else {
        console.warn('[Prefs Loader] Cannot load preferences: User not authenticated or auth module not available.');
        // Apply defaults if not authenticated?
         if (!localStorage.getItem('dateFormat')) localStorage.setItem('dateFormat', 'MDY');
         if (!localStorage.getItem(`${prefix}currencySymbol`)) localStorage.setItem(`${prefix}currencySymbol`, '$');
         // etc.
    }
}
// +++ END NEW FUNCTION +++

// Warranty method change handlers
function handleWarrantyMethodChange() {
    console.log('[DEBUG] handleWarrantyMethodChange called');
    const isLifetime = isLifetimeCheckbox && isLifetimeCheckbox.checked;
    const isDurationMethod = durationMethodRadio && durationMethodRadio.checked;
    
    console.log('[DEBUG] isLifetime:', isLifetime, 'isDurationMethod:', isDurationMethod);
    console.log('[DEBUG] Elements found:', {
        warrantyDurationFields: !!warrantyDurationFields,
        exactExpirationField: !!exactExpirationField,
        exactExpirationDateInput: !!exactExpirationDateInput
    });
    
    if (isLifetime) {
        // Hide both methods when lifetime is selected
        console.log('[DEBUG] Lifetime selected, hiding both methods');
        if (warrantyDurationFields) warrantyDurationFields.style.display = 'none';
        if (exactExpirationField) exactExpirationField.style.display = 'none';
        return;
    }
    
    if (isDurationMethod) {
        console.log('[DEBUG] Duration method selected');
        if (warrantyDurationFields) warrantyDurationFields.style.display = 'block';
        if (exactExpirationField) exactExpirationField.style.display = 'none';
        // Clear exact date when switching to duration
        if (exactExpirationDateInput) exactExpirationDateInput.value = '';
    } else {
        console.log('[DEBUG] Exact date method selected');
        if (warrantyDurationFields) warrantyDurationFields.style.display = 'none';
        if (exactExpirationField) exactExpirationField.style.display = 'block';
        // Clear duration fields when switching to exact date
        if (warrantyDurationYearsInput) warrantyDurationYearsInput.value = '';
        if (warrantyDurationMonthsInput) warrantyDurationMonthsInput.value = '';
        if (warrantyDurationDaysInput) warrantyDurationDaysInput.value = '';
    }
}

function handleEditWarrantyMethodChange() {
    console.log('[DEBUG] handleEditWarrantyMethodChange called');
    const isLifetime = editIsLifetimeCheckbox && editIsLifetimeCheckbox.checked;
    const isDurationMethod = editDurationMethodRadio && editDurationMethodRadio.checked;
    
    console.log('[DEBUG Edit] isLifetime:', isLifetime, 'isDurationMethod:', isDurationMethod);
    console.log('[DEBUG Edit] Radio button states:', {
        editDurationMethodRadio: editDurationMethodRadio ? editDurationMethodRadio.checked : 'element not found',
        editExactDateMethodRadio: editExactDateMethodRadio ? editExactDateMethodRadio.checked : 'element not found'
    });
    console.log('[DEBUG Edit] Elements found:', {
        editWarrantyDurationFields: !!editWarrantyDurationFields,
        editExactExpirationField: !!editExactExpirationField,
        editExactExpirationDateInput: !!editExactExpirationDateInput
    });
    
    if (isLifetime) {
        // Hide both methods when lifetime is selected
        console.log('[DEBUG Edit] Lifetime selected, hiding both methods');
        if (editWarrantyDurationFields) editWarrantyDurationFields.style.display = 'none';
        if (editExactExpirationField) editExactExpirationField.style.display = 'none';
        return;
    }
    
    if (isDurationMethod) {
        console.log('[DEBUG Edit] Duration method selected');
        if (editWarrantyDurationFields) {
            editWarrantyDurationFields.style.display = 'block';
            console.log('[DEBUG Edit] Set duration fields to block');
        }
        if (editExactExpirationField) {
            editExactExpirationField.style.display = 'none';
            console.log('[DEBUG Edit] Set exact date field to none');
        }
        // Clear exact date when switching to duration
        if (editExactExpirationDateInput) editExactExpirationDateInput.value = '';
    } else {
        console.log('[DEBUG Edit] Exact date method selected');
        if (editWarrantyDurationFields) {
            editWarrantyDurationFields.style.display = 'none';
            console.log('[DEBUG Edit] Set duration fields to none');
        }
        if (editExactExpirationField) {
            editExactExpirationField.style.display = 'block';
            console.log('[DEBUG Edit] Set exact date field to block');
        }
        // Clear duration fields when switching to exact date
        if (editWarrantyDurationYearsInput) editWarrantyDurationYearsInput.value = '';
        if (editWarrantyDurationMonthsInput) editWarrantyDurationMonthsInput.value = '';
        if (editWarrantyDurationDaysInput) editWarrantyDurationDaysInput.value = '';
    }
}

// Function to calculate duration between two dates
function calculateDurationFromDates(startDate, endDate) {
    if (!startDate || !endDate) return null;
    
    try {
        const start = new Date(startDate);
        const end = new Date(endDate);
        
        if (isNaN(start.getTime()) || isNaN(end.getTime())) return null;
        
        let years = end.getFullYear() - start.getFullYear();
        let months = end.getMonth() - start.getMonth();
        let days = end.getDate() - start.getDate();
        
        // Adjust for negative days
        if (days < 0) {
            months--;
            const prevMonth = new Date(end.getFullYear(), end.getMonth(), 0);
            days += prevMonth.getDate();
        }
        
        // Adjust for negative months
        if (months < 0) {
            years--;
            months += 12;
        }
        
        return { years, months, days };
    } catch (error) {
        console.error('Error calculating duration:', error);
        return null;
    }
}

/**
 * Load secure images with authentication
 */
async function loadSecureImages() {
    const token = localStorage.getItem('auth_token');
    if (!token) {
        console.log('[DEBUG] No auth token available for secure image loading');
        return;
    }

    // Also find images that may already have src but need to be refreshed
    const secureImages = document.querySelectorAll('img.secure-image[data-secure-src]');
    console.log(`[DEBUG] Found ${secureImages.length} secure images to load/refresh`);

    for (const img of secureImages) {
        try {
            const secureUrl = img.getAttribute('data-secure-src');
            console.log(`[DEBUG] Loading secure image: ${secureUrl}`);
            
            // Clean up existing blob URL if present
            const existingBlobUrl = img.getAttribute('data-blob-url');
            if (existingBlobUrl) {
                URL.revokeObjectURL(existingBlobUrl);
                img.removeAttribute('data-blob-url');
            }
            
            const response = await fetch(secureUrl, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });

            if (response.ok) {
                const blob = await response.blob();
                const blobUrl = URL.createObjectURL(blob);
                img.src = blobUrl;
                
                // Clean up blob URL when image is removed from DOM
                img.addEventListener('load', () => {
                    console.log(`[DEBUG] Secure image loaded successfully: ${secureUrl}`);
                }, { once: true });
                
                // Store blob URL for cleanup
                img.setAttribute('data-blob-url', blobUrl);
            } else {
                console.error(`[DEBUG] Failed to load secure image: ${secureUrl}, status: ${response.status}`);
                img.style.display = 'none';
            }
        } catch (error) {
            console.error(`[DEBUG] Error loading secure image:`, error);
            img.style.display = 'none';
        }
    }
}

// ============================================================================
// Paperless-ngx Integration Functions
// ============================================================================

// Global variable to store Paperless-ngx enabled state
let paperlessNgxEnabled = false;

/**
 * Check if Paperless-ngx integration is enabled
 */
async function checkPaperlessNgxStatus() {
    try {
        const token = localStorage.getItem('auth_token');
        if (!token) return false;

        const response = await fetch('/api/admin/settings', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });

        if (response.ok) {
            const settings = await response.json();
            paperlessNgxEnabled = settings.paperless_enabled === 'true';
            window.paperlessNgxEnabled = paperlessNgxEnabled; // Set global variable
            console.log('[Paperless-ngx] Integration status:', paperlessNgxEnabled);
            return paperlessNgxEnabled;
        }
    } catch (error) {
        console.error('[Paperless-ngx] Error checking status:', error);
    }
    return false;
}

/**
 * Initialize Paperless-ngx integration UI
 */
async function initPaperlessNgxIntegration() {
    // Check if Paperless-ngx is enabled
    const isEnabled = await checkPaperlessNgxStatus();
    
    if (isEnabled) {
        // Show the info alert
        const infoAlert = document.getElementById('paperlessInfoAlert');
        if (infoAlert) {
            infoAlert.style.display = 'block';
        }
        
        // Show storage selection options for add modal (only invoice and manual)
        const storageSelections = [
            'invoiceStorageSelection',
            'manualStorageSelection'
        ];
        
        storageSelections.forEach(id => {
            const element = document.getElementById(id);
            if (element) {
                element.style.display = 'block';
            }
        });
        
        // Show storage selection options for edit modal (only invoice and manual)
        const editStorageSelections = [
            'editInvoiceStorageSelection',
            'editManualStorageSelection'
        ];
        
        editStorageSelections.forEach(id => {
            const element = document.getElementById(id);
            if (element) {
                element.style.display = 'block';
            }
        });
        
        // Show Paperless browse sections
        console.log('[Paperless-ngx] Calling togglePaperlessBrowseSections...');
        togglePaperlessBrowseSections();
        
        console.log('[Paperless-ngx] UI elements initialized and shown');
    } else {
        console.log('[Paperless-ngx] Integration disabled, hiding UI elements');
        
        // Hide Paperless browse sections
        console.log('[Paperless-ngx] Calling togglePaperlessBrowseSections (disabled)...');
        togglePaperlessBrowseSections();
    }
}

/**
 * Get selected storage option for a document type
 * @param {string} documentType - The document type (productPhoto, invoice, manual, otherDocument)
 * @param {boolean} isEdit - Whether this is for the edit modal
 * @returns {string} - 'local' or 'paperless'
 */
function getStorageOption(documentType, isEdit = false) {
    // Only allow Paperless-ngx storage for invoices and manuals
    const paperlessAllowedTypes = ['invoice', 'manual'];
    
    if (!paperlessAllowedTypes.includes(documentType)) {
        return 'local'; // Force local storage for productPhoto and otherDocument
    }
    
    const prefix = isEdit ? 'edit' : '';
    const capitalizedType = documentType.charAt(0).toUpperCase() + documentType.slice(1);
    const name = `${prefix}${capitalizedType}Storage`;
    const radio = document.querySelector(`input[name="${name}"]:checked`);
    return radio ? radio.value : 'local';
}

/**
 * Upload file to Paperless-ngx
 * @param {File} file - The file to upload
 * @param {string} documentType - The type of document for tagging
 * @returns {Promise<Object>} - Upload result with document ID
 */
async function uploadToPaperlessNgx(file, documentType) {
    try {
        const token = localStorage.getItem('auth_token');
        if (!token) {
            throw new Error('Authentication token not available');
        }

        // Show upload loading screen
        showPaperlessUploadLoading(documentType);

        const formData = new FormData();
        formData.append('file', file);
        formData.append('document_type', documentType);
        formData.append('title', `Warracker ${documentType} - ${file.name}`);
        
        // Add tags for organization
        const tags = ['warracker', documentType];
        formData.append('tags', tags.join(','));
        
        console.log('[Paperless-ngx] Upload FormData contents:');
        console.log('  - file:', file.name, '(' + file.size + ' bytes, ' + file.type + ')');
        console.log('  - document_type:', documentType);
        console.log('  - title:', `Warracker ${documentType} - ${file.name}`);
        console.log('  - tags:', tags.join(','));

        updatePaperlessUploadStatus('Uploading file to Paperless-ngx...');

        const response = await fetch('/api/paperless/upload', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`
            },
            body: formData
        });

        if (!response.ok) {
            let errorMessage = 'Failed to upload to Paperless-ngx';
            try {
                const errorData = await response.json();
                errorMessage = errorData.error || errorData.message || errorMessage;
                console.error('[Paperless-ngx] Server error details:', errorData);
            } catch (parseError) {
                console.error('[Paperless-ngx] Could not parse error response:', parseError);
                errorMessage = `HTTP ${response.status}: ${response.statusText}`;
            }
            hidePaperlessUploadLoading();
            throw new Error(errorMessage);
        }

        const result = await response.json();
        console.log('[Paperless-ngx] Upload successful:', result);
        
        // Update status based on result
        if (result.document_id) {
            updatePaperlessUploadStatus('Document uploaded and ready!');
        } else {
            updatePaperlessUploadStatus('Document uploaded, processing...', true);
        }
        
        return {
            success: true,
            document_id: result.document_id,
            message: result.message,
            error: result.error  // Add this
        };
        
    } catch (error) {
        console.error('[Paperless-ngx] Upload error:', error);
        hidePaperlessUploadLoading();
        return {
            success: false,
            error: error.message
        };
    }
}

/**
 * Handle warranty form submission with Paperless-ngx integration
 * This extends the existing saveWarranty function
 */
async function processPaperlessNgxUploads(formData) {
    if (!paperlessNgxEnabled) {
        return {}; // Return empty object if not enabled
    }

    const uploads = {};
    // Only process invoice and manual for Paperless-ngx uploads
    const documentTypes = ['invoice', 'manual'];
    
    for (const docType of documentTypes) {
        // Use storage option from formData, not DOM
        const storageKey = docType + 'Storage';
        const storageOption = formData.get(storageKey) || 'local';
        const fileInput = document.getElementById(docType);
        const file = fileInput?.files[0];
        console.log(`[DEBUG][processPaperlessNgxUploads] docType:`, docType, '| storageOption (from formData):', storageOption, '| file:', file);
        if (storageOption === 'paperless') {
            if (file) {
                console.log(`[Paperless-ngx] Uploading ${docType} to Paperless-ngx`);
                // Upload to Paperless-ngx
                const uploadResult = await uploadToPaperlessNgx(file, docType);
                console.log(`[DEBUG][processPaperlessNgxUploads] uploadResult for ${docType}:`, uploadResult);
                if (uploadResult.success || (uploadResult.error && uploadResult.error.includes("duplicate") && uploadResult.document_id)) {
                    // Map frontend document types to database column names
                    const fieldMapping = {
                        'productPhoto': 'paperless_photo_id',
                        'invoice': 'paperless_invoice_id', 
                        'manual': 'paperless_manual_id',
                        'otherDocument': 'paperless_other_id'
                    };
                    const dbField = fieldMapping[docType];
                    if (dbField && uploadResult.document_id) {
                        uploads[dbField] = uploadResult.document_id;
                        console.log(`[Paperless-ngx] ${docType} uploaded/linked successfully, ID: ${uploadResult.document_id}, stored as: ${dbField}`);
                        // Hide loading screen immediately for direct uploads
                        hidePaperlessUploadLoading();
                        if (uploadResult.error && uploadResult.error.includes("duplicate")) {
                            showToast("Duplicate document detected in Paperless-ngx. Linked to existing document.", 'info');
                        }
                    } else if (dbField && !uploadResult.document_id) {
                        console.log(`[Paperless-ngx] ${docType} uploaded successfully but no document ID received (async processing). Not storing reference.`);
                        // Don't hide loading screen yet - auto-link will handle it
                        updatePaperlessUploadStatus('Document processing, searching for link...', true);
                    }
                    // ALWAYS remove the file from FormData since it's been uploaded to Paperless-ngx
                    // This prevents the backend from also saving it locally
                    if (formData.has(docType)) {
                        formData.delete(docType);
                        console.log(`[Paperless-ngx] Removed ${docType} from FormData to prevent local storage`);
                    }
                } else {
                    console.error(`[Paperless-ngx] Failed to upload ${docType} to Paperless-ngx:`, uploadResult.error);
                    throw new Error(`Failed to upload ${docType} to Paperless-ngx: ${uploadResult.error}`);
                }
            } else {
                console.log(`[DEBUG][processPaperlessNgxUploads] No file found for ${docType} with paperless storage option.`);
            }
        } else {
            console.log(`[DEBUG][processPaperlessNgxUploads] Skipping ${docType}, storageOption is not paperless.`);
        }
    }
    
    return uploads;
}

/**
 * Handle warranty edit form submission with Paperless-ngx integration
 * This extends the existing edit warranty functionality
 */
async function processEditPaperlessNgxUploads(formData) {
    if (!paperlessNgxEnabled) {
        return {}; // Return empty object if not enabled
    }

    const uploads = {};
    // Only process invoice and manual for Paperless-ngx uploads
    const documentTypes = ['invoice', 'manual'];
    
    for (const docType of documentTypes) {
        const storageOption = getStorageOption(docType, true); // true for edit modal
        
        if (storageOption === 'paperless') {
            const fileInput = document.getElementById(`edit${docType.charAt(0).toUpperCase() + docType.slice(1)}`);
            const file = fileInput?.files[0];
            
            if (file) {
                console.log(`[Paperless-ngx] Uploading ${docType} to Paperless-ngx (edit mode)`);
                
                // Upload to Paperless-ngx
                const uploadResult = await uploadToPaperlessNgx(file, docType);
                
                if (uploadResult.success || (uploadResult.error && uploadResult.error.includes("duplicate") && uploadResult.document_id)) {
                    // Map frontend document types to database column names
                    const fieldMapping = {
                        'productPhoto': 'paperless_photo_id',
                        'invoice': 'paperless_invoice_id', 
                        'manual': 'paperless_manual_id',
                        'otherDocument': 'paperless_other_id'
                    };
                    
                    const dbField = fieldMapping[docType];
                    if (dbField && uploadResult.document_id) {
                        uploads[dbField] = uploadResult.document_id;
                        console.log(`[Paperless-ngx] ${docType} uploaded/linked successfully (edit), ID: ${uploadResult.document_id}, stored as: ${dbField}`);
                        // Hide loading screen immediately for direct uploads
                        hidePaperlessUploadLoading();
                        if (uploadResult.error && uploadResult.error.includes("duplicate")) {
                            showToast("Duplicate document detected in Paperless-ngx. Linked to existing document.", 'info');
                        }
                    } else if (dbField && !uploadResult.document_id) {
                        console.log(`[Paperless-ngx] ${docType} uploaded successfully (edit) but no document ID received (async processing). Not storing reference.`);
                        // Don't hide loading screen yet - auto-link will handle it
                        updatePaperlessUploadStatus('Document processing, searching for link...', true);
                    }
                    
                    // ALWAYS remove the file from FormData since it's been uploaded to Paperless-ngx
                    // This prevents the backend from also saving it locally
                    // Note: In edit mode, the form field names don't have 'edit' prefix in FormData
                    if (formData.has(docType)) {
                        formData.delete(docType);
                        console.log(`[Paperless-ngx] Removed ${docType} from FormData to prevent local storage`);
                    }
                } else {
                    throw new Error(`Failed to upload ${docType} to Paperless-ngx: ${uploadResult.error}`);
                }
            }
        }
    }
    
    return uploads;
}

// Initialize Paperless-ngx integration when the page loads
document.addEventListener('DOMContentLoaded', function() {
    // Initialize after a short delay to ensure other components are loaded
    setTimeout(() => {
        initPaperlessNgxIntegration();
    }, 1000);
});

/**
 * Debug Paperless-ngx configuration
 */
async function debugPaperlessConfiguration() {
    try {
        const token = localStorage.getItem('auth_token');
        if (!token) {
            console.error('[Paperless Debug] No auth token found');
            return null;
        }

        console.log('[Paperless Debug] Checking configuration...');
        
        const response = await fetch('/api/paperless/debug', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });

        if (!response.ok) {
            console.error('[Paperless Debug] Debug endpoint failed:', response.status, response.statusText);
            const errorText = await response.text();
            console.error('[Paperless Debug] Error response:', errorText);
            return null;
        }

        const result = await response.json();
        console.log('[Paperless Debug] Configuration:', result);
        
        return result;
    } catch (error) {
        console.error('[Paperless Debug] Error:', error);
        return null;
    }
}

/**
 * Open a Paperless-ngx document either in Warracker interface or in Paperless-ngx directly
 */
async function openPaperlessDocument(paperlessId) {
    console.log(`[openPaperlessDocument] Opening Paperless document: ${paperlessId}`);
    
    // First, debug the Paperless configuration
    const debugInfo = await debugPaperlessConfiguration();
    if (debugInfo) {
        console.log('[openPaperlessDocument] Debug info:', debugInfo);
        
        if (!debugInfo.paperless_enabled || debugInfo.paperless_enabled === 'false') {
            showToast('Paperless-ngx integration is not enabled', 'error');
            return;
        }
        
        if (!debugInfo.paperless_handler_available) {
            showToast('Paperless-ngx is not properly configured. Please check the settings.', 'error');
            console.error('[openPaperlessDocument] Paperless handler not available');
            if (debugInfo.paperless_handler_error) {
                console.error('[openPaperlessDocument] Handler error:', debugInfo.paperless_handler_error);
            }
            return;
        }
        
        if (debugInfo.test_connection_result && !debugInfo.test_connection_result.success) {
            showToast(`Paperless-ngx connection failed: ${debugInfo.test_connection_result.message || debugInfo.test_connection_result.error}`, 'error');
            return;
        }
    }
    
    const token = localStorage.getItem('auth_token');
    if (!token) {
        console.error('[openPaperlessDocument] No auth token available');
        showToast('Authentication required', 'error');
        return;
    }
    
    // Check user preference for viewing documents
    const viewInApp = await getUserPaperlessViewPreference();
    console.log(`[openPaperlessDocument] User preference view in app: ${viewInApp}`);
    
    if (viewInApp) {
        // Open document in Warracker interface
        console.log(`[openPaperlessDocument] Opening document ${paperlessId} in Warracker interface`);
        const documentUrl = `/api/paperless-file/${paperlessId}?token=${encodeURIComponent(token)}`;
        
        const newTab = window.open(documentUrl, '_blank');
        if (!newTab) {
            showToast('Please allow popups to view documents', 'warning');
        } else {
            showToast('Opening document in Warracker...', 'info');
        }
        return;
    }
    
    // Default behavior: open in Paperless-ngx interface
    try {
        // Get the Paperless-ngx base URL
        const response = await fetch('/api/paperless/url', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            const errorText = await response.text();
            console.error('[openPaperlessDocument] URL endpoint failed:', response.status, errorText);
            throw new Error(`Failed to get Paperless-ngx URL: ${response.status}`);
        }
        
        const result = await response.json();
        if (!result.success) {
            throw new Error(result.message || 'Failed to get Paperless-ngx URL');
        }
        
        // Construct the direct link to the document in Paperless-ngx
        const paperlessUrl = result.url.replace(/\/$/, ''); // Remove trailing slash
        const documentUrl = `${paperlessUrl}/documents/${paperlessId}/details`;
        
        console.log(`[openPaperlessDocument] Opening Paperless-ngx document at: ${documentUrl}`);
        
        // Open the document directly in Paperless-ngx interface
        const newTab = window.open(documentUrl, '_blank');
        if (!newTab) {
            showToast('Please allow popups to view documents in Paperless-ngx', 'warning');
        } else {
            showToast('Opening document in Paperless-ngx...', 'info');
        }
        
    } catch (error) {
        console.error('Error opening Paperless document:', error);
        showToast(`Error opening document: ${error.message}`, 'error');
        
        // Try to determine the base URL from debug info for fallback
        if (debugInfo && debugInfo.paperless_url) {
            const fallbackUrl = `${debugInfo.paperless_url.replace(/\/$/, '')}/documents/${paperlessId}/details`;
            console.log(`[openPaperlessDocument] Trying fallback URL: ${fallbackUrl}`);
            
            const fallbackTab = window.open(fallbackUrl, '_blank');
            if (fallbackTab) {
                showToast('Opened with fallback URL - please check if Paperless-ngx is accessible', 'warning');
            }
        } else {
            // Last resort fallback
            const genericFallbackUrl = `${window.location.protocol}//${window.location.hostname}:8000/documents/${paperlessId}/details`;
            console.log(`[openPaperlessDocument] Trying generic fallback URL: ${genericFallbackUrl}`);
            
            const genericTab = window.open(genericFallbackUrl, '_blank');
            if (genericTab) {
                showToast('Opened with generic fallback URL', 'warning');
            }
        }
    }
}

/**
 * Get user preference for viewing Paperless documents in app
 */
async function getUserPaperlessViewPreference() {
    // First check localStorage
    const prefix = getPreferenceKeyPrefix();
    const localPreference = localStorage.getItem(`${prefix}paperlessViewInApp`);
    if (localPreference !== null) {
        return localPreference === 'true';
    }
    
    // If not in localStorage, check API
    if (window.auth && window.auth.isAuthenticated && window.auth.isAuthenticated()) {
        try {
            const response = await fetch('/api/auth/preferences', {
                headers: {
                    'Authorization': `Bearer ${window.auth.getToken()}`
                }
            });
            if (response.ok) {
                const prefs = await response.json();
                return prefs.paperless_view_in_app || false;
            }
        } catch (e) {
            console.warn('Failed to load preferences from API:', e);
        }
    }
    
    // Default to false (open in Paperless-ngx)
    return false;
}

/**
 * Debug function to test Paperless document status
 */
async function debugPaperlessDocument(paperlessId) {
    console.log(`[debugPaperlessDocument] Debugging Paperless document: ${paperlessId}`);
    
    const token = auth.getToken();
    if (!token) {
        console.error('[debugPaperlessDocument] No auth token available');
        return;
    }
    
    try {
        const response = await fetch(`/api/paperless/debug-document/${paperlessId}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            const errorText = await response.text();
            console.error(`[debugPaperlessDocument] HTTP ${response.status}: ${errorText}`);
            return;
        }
        
        const debugInfo = await response.json();
        console.log(`[debugPaperlessDocument] Debug info for document ${paperlessId}:`, debugInfo);
        
        // Show debug info in a more readable format
        let debugMessage = `Debug info for Paperless document ${paperlessId}:\n\n`;
        debugMessage += `Document exists: ${debugInfo.document_exists}\n`;
        debugMessage += `Database references: ${debugInfo.database_references?.length || 0}\n\n`;
        
        debugMessage += 'Endpoint test results:\n';
        for (const [endpoint, result] of Object.entries(debugInfo.endpoints_tested || {})) {
            debugMessage += `- ${endpoint}: ${result.success ? 'SUCCESS' : 'FAILED'} (${result.status_code || result.error})\n`;
        }
        
        if (debugInfo.recent_documents && Array.isArray(debugInfo.recent_documents)) {
            debugMessage += `\nDocument in recent list: ${debugInfo.document_in_recent}\n`;
            debugMessage += `Recent documents: ${debugInfo.recent_documents.map(d => `${d.id}: ${d.title}`).join(', ')}\n`;
        }
        
        alert(debugMessage);
        
    } catch (error) {
        console.error('Error debugging Paperless document:', error);
        alert(`Debug failed: ${error.message}`);
    }
}

/**
 * Clean up invalid Paperless-ngx document references
 */
async function cleanupInvalidPaperlessDocuments() {
    console.log('[cleanupInvalidPaperlessDocuments] Starting cleanup...');
    
    const token = auth.getToken();
    if (!token) {
        console.error('[cleanupInvalidPaperlessDocuments] No auth token available');
        return;
    }
    
    try {
        const response = await fetch('/api/paperless/cleanup-invalid', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            const errorText = await response.text();
            console.error(`[cleanupInvalidPaperlessDocuments] HTTP ${response.status}: ${errorText}`);
            return;
        }
        
        const result = await response.json();
        console.log('[cleanupInvalidPaperlessDocuments] Cleanup result:', result);
        
        // Show result to user
        let message = result.message || 'Cleanup completed';
        if (result.details) {
            message += `\n\nDetails:\n`;
            message += `- Documents checked: ${result.details.checked}\n`;
            message += `- Invalid documents found: ${result.details.invalid_found}\n`;
            message += `- References cleaned up: ${result.details.cleaned_up}\n`;
            
            if (result.details.errors && result.details.errors.length > 0) {
                message += `\nErrors:\n${result.details.errors.join('\n')}`;
            }
        }
        
        alert(message);
        
        // Reload warranties to reflect changes
        if (result.details && result.details.cleaned_up > 0) {
            console.log('[cleanupInvalidPaperlessDocuments] Reloading warranties after cleanup...');
            await loadWarranties(true);
        }
        
    } catch (error) {
        console.error('Error cleaning up Paperless documents:', error);
        alert(`Cleanup failed: ${error.message}`);
    }
}

/**
 * Search for and link a Paperless document by title
 * Used when documents were uploaded with async processing and we lost the document ID
 */
async function searchAndLinkPaperlessDocument(warrantyId, documentType, searchTitle) {
    try {
        console.log(`[Paperless-ngx] Searching for document: ${searchTitle}`);
        
        const response = await fetch('/api/paperless-search-and-link', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
            },
            body: JSON.stringify({
                warranty_id: warrantyId,
                document_type: documentType,
                search_title: searchTitle
            })
        });
        
        const result = await response.json();
        
        if (result.success) {
            console.log(`[Paperless-ngx] Document linked successfully: ID ${result.document_id}`);
            showToast('Document linked successfully! Refreshing...', 'success');
            
            // Reload warranties to show the updated document links
            setTimeout(async () => {
                console.log('🔄 [Search&Link] Reloading warranties to show updated document links...');
                await loadWarranties(true);  // Pass isAuthenticated parameter
                
                // Force re-render of the warranty cards
                applyFilters();
                
                // Also reload secure images to update cloud icons
                await loadSecureImages();
                
                console.log('✅ [Search&Link] Warranties reloaded and UI updated');
            }, 1000);
            
            return { success: true, document_id: result.document_id };
        } else {
            console.error(`[Paperless-ngx] Failed to link document: ${result.message}`);
            showToast(`Failed to link document: ${result.message}`, 'error');
            return { success: false, message: result.message };
        }
    } catch (error) {
        console.error(`[Paperless-ngx] Error searching for document:`, error);
        showToast('Error searching for document', 'error');
        return { success: false, message: error.message };
    }
}

/**
 * Automatically search for and link recently uploaded documents
 * This handles the case where Paperless-ngx async processing returns task_id instead of document_id
 */
async function autoLinkRecentDocuments(warrantyId, documentTypes = ['invoice', 'manual'], maxRetries = 10, retryDelay = 10000, fileInfo = {}) {
    console.log(`[Auto-Link] Starting automatic document linking for warranty ${warrantyId}`);
    
    const token = auth.getToken();
    if (!token) {
        console.error('[Auto-Link] No auth token available');
        return;
    }
    
    let attempt = 0;
    let linkedDocuments = [];
    
    const tryLinking = async () => {
        attempt++;
        console.log(`[Auto-Link] Attempt ${attempt}/${maxRetries} for warranty ${warrantyId}`);
        
        try {
            // First check if Paperless-ngx is properly configured
            const debugInfo = await debugPaperlessConfiguration();
            if (!debugInfo) {
                console.error('[Auto-Link] Could not get Paperless debug info');
                return;
            }
            
            if (!debugInfo.paperless_enabled || debugInfo.paperless_enabled === 'false') {
                console.log('[Auto-Link] Paperless-ngx integration is not enabled, skipping auto-link');
                return;
            }
            
            if (!debugInfo.paperless_handler_available) {
                console.error('[Auto-Link] Paperless handler not available:', debugInfo.paperless_handler_error || 'Unknown error');
                return;
            }
            
            if (debugInfo.test_connection_result && !debugInfo.test_connection_result.success) {
                console.error('[Auto-Link] Paperless connection test failed:', debugInfo.test_connection_result.message || debugInfo.test_connection_result.error);
                return;
            }
            
            console.log(`[Auto-Link] Using intelligent filename-based search. File info:`, fileInfo);
            
            // Strategy 1: Search by exact filename (most reliable)
            let candidateDocuments = [];
            
            for (const [docType, filename] of Object.entries(fileInfo)) {
                if (!documentTypes.includes(docType)) continue;
                
                console.log(`[Auto-Link] Searching for ${docType} with filename: "${filename}"`);
                
                // Remove file extension for searching
                const baseFilename = filename.replace(/\.[^/.]+$/, '');
                
                // Try multiple search strategies
                const searchQueries = [
                    filename,                                    // Exact filename with extension
                    baseFilename,                               // Filename without extension
                    `"${filename}"`,                            // Quoted exact match
                    `"${baseFilename}"`,                        // Quoted base filename
                    `Warracker ${docType} - ${baseFilename}`    // Warracker format
                ];
                
                for (const query of searchQueries) {
                    try {
                        console.log(`[Auto-Link] Trying search query: "${query}"`);
                        
                        const response = await fetch(`/api/paperless/search?ordering=-created&query=${encodeURIComponent(query)}`, {
                            method: 'GET',
                            headers: {
                                'Authorization': `Bearer ${token}`,
                                'Content-Type': 'application/json'
                            }
                        });
                        
                        if (response.ok) {
                            const result = await response.json();
                            const docs = result.results || [];
                            
                            console.log(`[Auto-Link] Query "${query}" found ${docs.length} documents`);
                            
                            if (docs.length > 0) {
                                // Filter for recent documents (last 24 hours)
                                const oneDayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
                                const recentDocs = docs.filter(doc => {
                                    try {
                                        const docDate = new Date(doc.created);
                                        return docDate > oneDayAgo;
                                    } catch {
                                        return true; // Include if we can't parse the date
                                    }
                                });
                                
                                if (recentDocs.length > 0) {
                                    console.log(`[Auto-Link] Found ${recentDocs.length} recent documents for ${docType}`);
                                    candidateDocuments.push({
                                        docType,
                                        filename,
                                        documents: recentDocs,
                                        searchQuery: query
                                    });
                                    break; // Found documents, no need to try other queries for this file
                                } else if (docs.length > 0) {
                                    // If no recent docs but we found some documents, include them anyway
                                    console.log(`[Auto-Link] Found ${docs.length} older documents for ${docType}, including them anyway`);
                                    candidateDocuments.push({
                                        docType,
                                        filename,
                                        documents: docs.slice(0, 3), // Take up to 3 most recent
                                        searchQuery: query
                                    });
                                    break;
                                }
                            }
                        }
                    } catch (error) {
                        console.error(`[Auto-Link] Error searching with query "${query}":`, error);
                    }
                }
            }
            
            // Strategy 2: Fallback to Warracker tag search if filename search fails
            if (candidateDocuments.length === 0) {
                console.log('[Auto-Link] No documents found by filename, trying Warracker tag search...');
                
                const response = await fetch('/api/paperless/search?ordering=-created&created__gte=' + 
                    new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(), {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const searchResult = await response.json();
                    let recentDocs = searchResult.results || [];
                    
                    // Filter for Warracker documents
                    const warrackerDocs = recentDocs.filter(doc => 
                        doc.title && doc.title.includes('Warracker')
                    );
                    
                    console.log(`[Auto-Link] Found ${warrackerDocs.length} Warracker documents from last 2 hours`);
                    
                    // Group by document type
                    for (const docType of documentTypes) {
                        const typeDocs = warrackerDocs.filter(doc => 
                            doc.title && doc.title.includes(docType)
                        );
                        
                        if (typeDocs.length > 0) {
                            candidateDocuments.push({
                                docType,
                                filename: fileInfo[docType] || `${docType} document`,
                                documents: typeDocs,
                                searchQuery: `Warracker ${docType}`
                            });
                        }
                    }
                }
            }
            
            // Debug: Show what candidate documents we found
            if (candidateDocuments.length > 0) {
                console.log('[Auto-Link] Candidate documents found:');
                candidateDocuments.forEach(candidate => {
                    console.log(`   ${candidate.docType}: ${candidate.documents.length} documents found with query "${candidate.searchQuery}"`);
                    candidate.documents.forEach((doc, i) => {
                        console.log(`     ${i+1}. ID: ${doc.id}, Title: "${doc.title}", Created: ${doc.created}`);
                    });
                });
            }
            
            // Try to link the best candidate for each document type
            for (const candidate of candidateDocuments) {
                // Use the most recent document (first in the ordered list)
                const doc = candidate.documents[0];
                
                console.log(`[Auto-Link] Attempting to link ${candidate.docType}: ${doc.title} (ID: ${doc.id})`);
                
                try {
                    const linkResponse = await fetch('/api/paperless-search-and-link', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
                        },
                        body: JSON.stringify({
                            warranty_id: warrantyId,
                            document_type: candidate.docType,
                            search_title: doc.title.replace('Warracker ' + candidate.docType + ' - ', '')
                        })
                    });
                    
                    const linkResult = await linkResponse.json();
                    
                    if (linkResult.success) {
                        console.log(`[Auto-Link] Successfully linked ${candidate.docType}: ${doc.title}`);
                        linkedDocuments.push({ 
                            type: candidate.docType, 
                            title: doc.title, 
                            id: doc.id,
                            filename: candidate.filename
                        });
                    } else {
                        console.log(`[Auto-Link] Failed to link ${candidate.docType}: ${linkResult.message}`);
                    }
                } catch (error) {
                    console.error(`[Auto-Link] Error linking ${candidate.docType}:`, error);
                }
            }
            
            // If we found and linked documents, we're done
            if (linkedDocuments.length > 0) {
                console.log(`[Auto-Link] Successfully linked ${linkedDocuments.length} documents:`, linkedDocuments);
                
                // Update loading screen to show success
                updatePaperlessUploadStatus('Documents linked successfully!');
                
                // Show success message with filenames
                const docInfo = linkedDocuments.map(d => `${d.type} (${d.filename || d.title})`).join(', ');
                showToast(`Automatically linked ${linkedDocuments.length} document(s): ${docInfo}`, 'success');
                
                // Reload warranties to show the updated document links
                setTimeout(async () => {
                    console.log('🔄 [Auto-Link] Reloading warranties to show updated document links...');
                    await loadWarranties(true);  // Pass isAuthenticated parameter
                    
                    // Force re-render of the warranty cards
                    applyFilters();
                    
                    // Also reload secure images to update cloud icons
                    await loadSecureImages();
                    
                    console.log('✅ [Auto-Link] Warranties reloaded and UI updated');
                    
                    // Hide loading screen after successful completion
                    hidePaperlessUploadLoading();
                }, 1000);
                
                return true;
            }
            
            // If no documents found and we have retries left, try again
            if (attempt < maxRetries) {
                console.log(`[Auto-Link] No documents found, retrying in ${retryDelay}ms...`);
                updatePaperlessUploadStatus(`Searching for documents (attempt ${attempt + 1}/${maxRetries})...`, true);
                setTimeout(tryLinking, retryDelay);
            } else {
                console.log(`[Auto-Link] No documents found after ${maxRetries} attempts`);
                updatePaperlessUploadStatus('Document uploaded but could not auto-link');
                showToast('Document uploaded to Paperless-ngx but could not be automatically linked. You can manually link it later.', 'warning');
                // Hide loading screen after failed auto-link
                setTimeout(() => {
                    hidePaperlessUploadLoading();
                }, 2000);
            }
            
        } catch (error) {
            console.error(`[Auto-Link] Error in attempt ${attempt}:`, error);
            
            if (attempt < maxRetries) {
                console.log(`[Auto-Link] Retrying in ${retryDelay}ms...`);
                updatePaperlessUploadStatus(`Error occurred, retrying (${attempt + 1}/${maxRetries})...`, true);
                setTimeout(tryLinking, retryDelay);
            } else {
                updatePaperlessUploadStatus('Upload completed with errors');
                showToast('Document uploaded but auto-linking failed due to errors. You can manually link it later.', 'warning');
                // Hide loading screen after final error
                setTimeout(() => {
                    hidePaperlessUploadLoading();
                }, 2000);
            }
        }
    };
    
    // Start the linking process
    tryLinking();
}

// Make debug and cleanup functions available globally for console testing
window.debugPaperlessDocument = debugPaperlessDocument;
window.cleanupInvalidPaperlessDocuments = cleanupInvalidPaperlessDocuments;
window.searchAndLinkPaperlessDocument = searchAndLinkPaperlessDocument;
window.autoLinkRecentDocuments = autoLinkRecentDocuments;

// Helper function to manually link a specific document by title
window.manualLinkDocument = async function(warrantyId, documentType, titleSearchTerm) {
    console.log(`🔗 Manually linking document for warranty ${warrantyId}`);
    console.log(`   Document type: ${documentType}`);
    console.log(`   Searching for title containing: "${titleSearchTerm}"`);
    
    const token = auth.getToken();
    if (!token) {
        console.error('❌ No auth token available');
        return;
    }
    
    try {
        // Search for documents containing the search term
        const response = await fetch(`/api/paperless/search?ordering=-created&query=${encodeURIComponent(titleSearchTerm)}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            console.error(`❌ Search failed: ${response.status}`);
            return;
        }
        
        const result = await response.json();
        const docs = result.results || [];
        
        console.log(`📄 Found ${docs.length} documents matching "${titleSearchTerm}"`);
        
        if (docs.length === 0) {
            console.log('❌ No documents found. The document might still be processing in Paperless-ngx.');
            return;
        }
        
        // Show all matching documents
        docs.forEach((doc, index) => {
            console.log(`   ${index + 1}. ID: ${doc.id}, Title: "${doc.title}", Created: ${doc.created}`);
        });
        
        // Try to link the first matching document
        const docToLink = docs[0];
        console.log(`🔗 Attempting to link document ID ${docToLink.id}: "${docToLink.title}"`);
        
        const linkResponse = await fetch('/api/paperless-search-and-link', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({
                warranty_id: warrantyId,
                document_type: documentType,
                search_title: docToLink.title.replace('Warracker ' + documentType + ' - ', '')
            })
        });
        
        const linkResult = await linkResponse.json();
        
        if (linkResult.success) {
            console.log(`✅ Successfully linked ${documentType}: ${docToLink.title}`);
            showToast(`Document linked successfully: ${documentType}`, 'success');
            
            // Reload warranties to show the updated document links
            setTimeout(async () => {
                console.log('🔄 Reloading warranties to show updated document links...');
                await loadWarranties(true);  // Pass isAuthenticated parameter
                
                // Force re-render of the warranty cards
                applyFilters();
                
                // Also reload secure images to update cloud icons
                await loadSecureImages();
                
                console.log('✅ Warranties reloaded and UI updated');
            }, 1000);
        } else {
            console.error(`❌ Failed to link ${documentType}: ${linkResult.message}`);
        }
        
        return docToLink;
        
    } catch (error) {
        console.error('❌ Error in manual linking:', error);
    }
};

// Helper function to search for documents in Paperless-ngx (debug function)
window.debugSearchPaperlessDocuments = async function(searchTerm = 'Warracker', limit = 10) {
    console.log(`🔍 Searching for documents containing: "${searchTerm}"`);
    
    const token = auth.getToken();
    if (!token) {
        console.error('❌ No auth token available');
        return;
    }
    
    try {
        const response = await fetch(`/api/paperless/search?ordering=-created&query=${encodeURIComponent(searchTerm)}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            console.error(`❌ Search failed: ${response.status}`);
            return;
        }
        
        const result = await response.json();
        const docs = result.results || [];
        
        console.log(`📄 Found ${docs.length} documents:`);
        docs.slice(0, limit).forEach((doc, index) => {
            console.log(`   ${index + 1}. ID: ${doc.id}, Title: "${doc.title}", Created: ${doc.created}`);
        });
        
        if (docs.length > limit) {
            console.log(`   ... and ${docs.length - limit} more documents`);
        }
        
        return docs;
    } catch (error) {
        console.error('❌ Error searching documents:', error);
    }
};

// Helper function for users to debug Paperless-ngx configuration
window.debugPaperlessSetup = async function() {
    console.log('🔍 Debugging Paperless-ngx setup...');
    
    const debugInfo = await debugPaperlessConfiguration();
    if (!debugInfo) {
        console.error('❌ Could not get debug information');
        return;
    }
    
    console.log('📋 Paperless-ngx Configuration:');
    console.log(`   Enabled: ${debugInfo.paperless_enabled}`);
    console.log(`   URL: ${debugInfo.paperless_url || 'Not set'}`);
    console.log(`   API Token Set: ${debugInfo.paperless_api_token_set}`);
    console.log(`   Handler Available: ${debugInfo.paperless_handler_available}`);
    
    if (debugInfo.paperless_handler_error) {
        console.error(`   Handler Error: ${debugInfo.paperless_handler_error}`);
    }
    
    if (debugInfo.test_connection_result) {
        console.log(`   Connection Test: ${debugInfo.test_connection_result.success ? '✅ Success' : '❌ Failed'}`);
        console.log(`   Message: ${debugInfo.test_connection_result.message || debugInfo.test_connection_result.error}`);
    }
    
    // Provide recommendations
    console.log('\n💡 Recommendations:');
    
    if (!debugInfo.paperless_enabled || debugInfo.paperless_enabled === 'false') {
        console.log('   - Enable Paperless-ngx integration in Settings');
    }
    
    if (!debugInfo.paperless_url) {
        console.log('   - Set Paperless-ngx URL in Settings (e.g., http://paperless:8000)');
    }
    
    if (!debugInfo.paperless_api_token_set) {
        console.log('   - Set API token in Settings (generate from Paperless-ngx → Settings → API Tokens)');
    }
    
    if (debugInfo.test_connection_result && !debugInfo.test_connection_result.success) {
        console.log('   - Check if Paperless-ngx is running and accessible');
        console.log('   - Verify URL and API token are correct');
        console.log('   - Check network connectivity between Warracker and Paperless-ngx');
    }
    
    return debugInfo;
};

// ===== PAPERLESS DOCUMENT BROWSER FUNCTIONALITY =====

// Global variables for paperless browser
let currentPaperlessDocuments = [];
let selectedPaperlessDocument = null;
let currentPaperlessPage = 1;
let totalPaperlessPages = 1;
let currentDocumentType = '';
let paperlessSearchQuery = '';

/**
 * Open the Paperless document browser modal
 * @param {string} documentType - Type of document being selected (invoice, manual, product_photo, other_document)
 */
function openPaperlessBrowser(documentType) {
    currentDocumentType = documentType;
    selectedPaperlessDocument = null;
    
    // Reset pagination state
    currentPaperlessPage = 1;
    totalPaperlessPages = 1;
    paperlessSearchQuery = '';
    
    // Show the modal
    const modal = document.getElementById('paperlessBrowserModal');
    modal.classList.add('active');
    
    // Reset search and filters
    document.getElementById('paperlessSearchInput').value = '';
    document.getElementById('paperlessTypeFilter').value = '';
    document.getElementById('paperlessTagFilter').value = '';
    
    // Load documents
    loadAllPaperlessDocuments();
    
    // Load tags for filter
    loadPaperlessTags();
    
    // Hide select button initially
    const selectBtn = document.getElementById('selectPaperlessDocBtn');
    if (selectBtn) {
        selectBtn.style.display = 'none';
    }
}

/**
 * Load all Paperless documents
 */
async function loadAllPaperlessDocuments() {
    try {
        showPaperlessLoading();
        
        const params = new URLSearchParams();
        const offset = (currentPaperlessPage - 1) * 25;
        params.append('limit', '25');
        params.append('offset', offset.toString());
        
        const response = await fetch(`/api/paperless/search?${params.toString()}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        currentPaperlessDocuments = data.results || [];
        totalPaperlessPages = Math.ceil(data.count / 25) || 1;
        
        renderPaperlessDocuments();
        updatePaperlessPagination();
        
    } catch (error) {
        console.error('Error loading Paperless documents:', error);
        showPaperlessError('Failed to load documents from Paperless-ngx');
    }
}

/**
 * Search Paperless documents
 */
async function searchPaperlessDocuments() {
    const searchInput = document.getElementById('paperlessSearchInput');
    const typeFilter = document.getElementById('paperlessTypeFilter');
    const tagFilter = document.getElementById('paperlessTagFilter');
    
    paperlessSearchQuery = searchInput.value.trim();
    
    try {
        showPaperlessLoading();
        
        const params = new URLSearchParams();
        if (paperlessSearchQuery) {
            params.append('query', paperlessSearchQuery);
        }
        if (typeFilter.value) {
            params.append('document_type', typeFilter.value);
        }
        if (tagFilter.value) {
            params.append('tags__id__in', tagFilter.value);
        }
        
        // Add pagination
        const offset = (currentPaperlessPage - 1) * 25;
        params.append('limit', '25');
        params.append('offset', offset.toString());
        
        const response = await fetch(`/api/paperless/search?${params.toString()}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        currentPaperlessDocuments = data.results || [];
        totalPaperlessPages = Math.ceil(data.count / 25) || 1;
        
        renderPaperlessDocuments();
        updatePaperlessPagination();
        
    } catch (error) {
        console.error('Error searching Paperless documents:', error);
        showPaperlessError('Failed to search documents');
    }
}

/**
 * Load Paperless tags for filter dropdown
 */
async function loadPaperlessTags() {
    try {
        const response = await fetch('/api/paperless/tags', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('auth_token')}`,
                'Content-Type': 'application/json'
            }
        });
        
        if (response.ok) {
            const data = await response.json();
            const tagFilter = document.getElementById('paperlessTagFilter');
            
            // Clear existing options except the first one
            tagFilter.innerHTML = '<option value="">All Tags</option>';
            
            // Add tag options
            if (data.results) {
                data.results.forEach(tag => {
                    const option = document.createElement('option');
                    option.value = tag.id;
                    option.textContent = tag.name;
                    tagFilter.appendChild(option);
                });
            }
        }
    } catch (error) {
        console.error('Error loading Paperless tags:', error);
    }
}

/**
 * Render the list of Paperless documents
 */
function renderPaperlessDocuments() {
    const container = document.getElementById('paperlessDocumentsList');
    
    if (currentPaperlessDocuments.length === 0) {
        container.innerHTML = `
            <div class="no-documents-message">
                <i class="fas fa-file-alt"></i>
                <h4>No documents found</h4>
                <p>Try adjusting your search terms or filters.</p>
            </div>
        `;
        return;
    }
    
    const documentsHtml = currentPaperlessDocuments.map(doc => {
        const createdDate = new Date(doc.created).toLocaleDateString();
        const fileType = doc.mime_type || 'Unknown';
        const tags = doc.tags || [];
        
        return `
            <div class="paperless-document-item" data-id="${doc.id}" onclick="selectPaperlessDocument(${doc.id})">
                <div class="document-title">${escapeHtml(doc.title)}</div>
                <div class="document-meta">
                    <span><i class="fas fa-calendar"></i> ${createdDate}</span>
                    <span><i class="fas fa-file"></i> ${fileType}</span>
                    ${doc.correspondent ? `<span><i class="fas fa-user"></i> ${escapeHtml(doc.correspondent)}</span>` : ''}
                </div>
                ${tags.length > 0 ? `
                    <div class="document-tags">
                        ${tags.map(tag => `<span class="document-tag">${escapeHtml(tag)}</span>`).join('')}
                    </div>
                ` : ''}
            </div>
        `;
    }).join('');
    
    container.innerHTML = documentsHtml;
}

/**
 * Select a Paperless document
 * @param {number} documentId - ID of the document to select
 */
function selectPaperlessDocument(documentId) {
    // Remove previous selection
    document.querySelectorAll('.paperless-document-item').forEach(item => {
        item.classList.remove('selected');
    });
    
    // Add selection to clicked item
    const selectedItem = document.querySelector(`[data-id="${documentId}"]`);
    if (selectedItem) {
        selectedItem.classList.add('selected');
        selectedPaperlessDocument = currentPaperlessDocuments.find(doc => doc.id === documentId);
        
        // Show select button
        const selectBtn = document.getElementById('selectPaperlessDocBtn');
        selectBtn.style.display = 'inline-block';
        selectBtn.onclick = () => confirmPaperlessSelection();
    }
}

/**
 * Confirm the selection of a Paperless document
 */
function confirmPaperlessSelection() {
    if (!selectedPaperlessDocument) return;
    
    // Update the UI to show the selected document
    updatePaperlessSelectionUI();
    
    // Close the modal
    closePaperlessBrowser();
}

/**
 * Update the UI to show the selected Paperless document
 */
function updatePaperlessSelectionUI() {
    if (!selectedPaperlessDocument || !currentDocumentType) return;
    
    const docName = selectedPaperlessDocument.title;
    const docId = selectedPaperlessDocument.id;
    
    // Map document types to their UI elements (only for invoice and manual)
    const typeMapping = {
        'invoice': {
            selectedDiv: 'selectedInvoiceFromPaperless',
            hiddenInput: 'selectedPaperlessInvoice'
        },
        'manual': {
            selectedDiv: 'selectedManualFromPaperless',
            hiddenInput: 'selectedPaperlessManual'
        },
        // Edit modal versions
        'edit_invoice': {
            selectedDiv: 'selectedEditInvoiceFromPaperless',
            hiddenInput: 'selectedEditPaperlessInvoice'
        },
        'edit_manual': {
            selectedDiv: 'selectedEditManualFromPaperless',
            hiddenInput: 'selectedEditPaperlessManual'
        }
    };
    
    const mapping = typeMapping[currentDocumentType];
    if (!mapping) return;
    
    // Show the selected document
    const selectedDiv = document.getElementById(mapping.selectedDiv);
    if (selectedDiv) {
        selectedDiv.style.display = 'flex';
        selectedDiv.querySelector('.selected-doc-name').textContent = docName;
    }
    
    // Create or update hidden input to store the document ID
    let hiddenInput = document.getElementById(mapping.hiddenInput);
    if (!hiddenInput) {
        hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.id = mapping.hiddenInput;
        hiddenInput.name = mapping.hiddenInput;
        document.body.appendChild(hiddenInput);
    }
    hiddenInput.value = docId;
}

/**
 * Clear the Paperless document selection
 * @param {string} documentType - Type of document to clear
 */
function clearPaperlessSelection(documentType) {
    const typeMapping = {
        'invoice': {
            selectedDiv: 'selectedInvoiceFromPaperless',
            hiddenInput: 'selectedPaperlessInvoice'
        },
        'manual': {
            selectedDiv: 'selectedManualFromPaperless',
            hiddenInput: 'selectedPaperlessManual'
        },
        // Edit modal versions
        'edit_invoice': {
            selectedDiv: 'selectedEditInvoiceFromPaperless',
            hiddenInput: 'selectedEditPaperlessInvoice'
        },
        'edit_manual': {
            selectedDiv: 'selectedEditManualFromPaperless',
            hiddenInput: 'selectedEditPaperlessManual'
        }
    };
    
    const mapping = typeMapping[documentType];
    if (!mapping) return;
    
    // Hide the selected document display
    const selectedDiv = document.getElementById(mapping.selectedDiv);
    if (selectedDiv) {
        selectedDiv.style.display = 'none';
    }
    
    // Clear the hidden input
    const hiddenInput = document.getElementById(mapping.hiddenInput);
    if (hiddenInput) {
        hiddenInput.value = '';
    }
}

/**
 * Close the Paperless browser modal
 */
function closePaperlessBrowser() {
    const modal = document.getElementById('paperlessBrowserModal');
    modal.classList.remove('active');
    
    // Reset state
    selectedPaperlessDocument = null;
    currentDocumentType = '';
    
    // Hide select button
    const selectBtn = document.getElementById('selectPaperlessDocBtn');
    selectBtn.style.display = 'none';
}

/**
 * Change page in Paperless document browser
 * @param {number} direction - Direction to change page (-1 for previous, 1 for next)
 */
function changePage(direction) {
    const newPage = currentPaperlessPage + direction;
    if (newPage < 1 || newPage > totalPaperlessPages) return;
    
    currentPaperlessPage = newPage;
    
    // Check if we have any active filters
    const searchInput = document.getElementById('paperlessSearchInput');
    const typeFilter = document.getElementById('paperlessTypeFilter');
    const tagFilter = document.getElementById('paperlessTagFilter');
    
    const hasFilters = (searchInput && searchInput.value.trim()) || 
                      (typeFilter && typeFilter.value) || 
                      (tagFilter && tagFilter.value);
    
    if (hasFilters) {
        searchPaperlessDocuments();
    } else {
        loadAllPaperlessDocuments();
    }
}

/**
 * Update pagination controls
 */
function updatePaperlessPagination() {
    const paginationDiv = document.getElementById('paperlessPagination');
    const prevBtn = document.getElementById('prevPageBtn');
    const nextBtn = document.getElementById('nextPageBtn');
    const pageInfo = document.getElementById('pageInfo');
    
    if (totalPaperlessPages <= 1) {
        paginationDiv.style.display = 'none';
        return;
    }
    
    paginationDiv.style.display = 'flex';
    prevBtn.disabled = currentPaperlessPage <= 1;
    nextBtn.disabled = currentPaperlessPage >= totalPaperlessPages;
    pageInfo.textContent = `Page ${currentPaperlessPage} of ${totalPaperlessPages}`;
}

/**
 * Show loading state in Paperless browser
 */
function showPaperlessLoading() {
    const container = document.getElementById('paperlessDocumentsList');
    container.innerHTML = `
        <div class="loading-message" style="text-align: center; padding: 40px;">
            <i class="fas fa-spinner fa-spin"></i> Loading documents...
        </div>
    `;
}

/**
 * Show error message in Paperless browser
 * @param {string} message - Error message to display
 */
function showPaperlessError(message) {
    const container = document.getElementById('paperlessDocumentsList');
    container.innerHTML = `
        <div class="no-documents-message">
            <i class="fas fa-exclamation-triangle"></i>
            <h4>Error</h4>
            <p>${escapeHtml(message)}</p>
        </div>
    `;
}

/**
 * Show/hide Paperless browse sections based on Paperless-ngx availability
 */
function togglePaperlessBrowseSections() {
    const paperlessEnabled = window.paperlessNgxEnabled || false;
    console.log('[togglePaperlessBrowseSections] Paperless enabled:', paperlessEnabled);
    
    // List of paperless browse section IDs (only for invoice and manual)
    const browseSectionIds = [
        'invoicePaperlessBrowse', 
        'manualPaperlessBrowse',
        'editInvoicePaperlessBrowse',
        'editManualPaperlessBrowse'
    ];
    
    let foundSections = 0;
    browseSectionIds.forEach(id => {
        const section = document.getElementById(id);
        if (section) {
            foundSections++;
            section.style.display = paperlessEnabled ? 'block' : 'none';
            console.log(`[togglePaperlessBrowseSections] ${id}: ${paperlessEnabled ? 'shown' : 'hidden'}`);
        } else {
            console.warn(`[togglePaperlessBrowseSections] Section not found: ${id}`);
        }
    });
    
    console.log(`[togglePaperlessBrowseSections] Found ${foundSections} of ${browseSectionIds.length} sections`);
}

// Initialize Paperless browser functionality when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    // Add event listeners for modal close buttons
    const paperlessModal = document.getElementById('paperlessBrowserModal');
    if (paperlessModal) {
        // Close on backdrop click
        paperlessModal.addEventListener('click', function(e) {
            if (e.target === paperlessModal) {
                closePaperlessBrowser();
            }
        });
        
        // Close on close button click
        const closeBtn = paperlessModal.querySelector('.close-btn');
        if (closeBtn) {
            closeBtn.addEventListener('click', closePaperlessBrowser);
        }
        
        // Close on cancel button click - but only the Cancel button, not all secondary buttons
        const cancelBtn = paperlessModal.querySelector('.modal-footer .btn-secondary');
        if (cancelBtn) {
            cancelBtn.addEventListener('click', closePaperlessBrowser);
        }
    }
    
    // Add event listeners for search and filters
    const searchInput = document.getElementById('paperlessSearchInput');
    if (searchInput) {
        // Search on Enter key
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                currentPaperlessPage = 1; // Reset to first page
                searchPaperlessDocuments();
            }
        });
        
        // Search on input change (with debounce)
        let searchTimeout;
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                currentPaperlessPage = 1; // Reset to first page
                searchPaperlessDocuments();
            }, 500);
        });
    }
    
    // Add event listeners for filter dropdowns
    const typeFilter = document.getElementById('paperlessTypeFilter');
    if (typeFilter) {
        typeFilter.addEventListener('change', function() {
            currentPaperlessPage = 1; // Reset to first page
            searchPaperlessDocuments();
        });
    }
    
    const tagFilter = document.getElementById('paperlessTagFilter');
    if (tagFilter) {
        tagFilter.addEventListener('change', function() {
            currentPaperlessPage = 1; // Reset to first page
            searchPaperlessDocuments();
        });
    }
    
    // Add event listener for search button
    const searchBtn = document.getElementById('paperlessSearchBtn');
    if (searchBtn) {
        searchBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            currentPaperlessPage = 1; // Reset to first page
            searchPaperlessDocuments();
        });
    }
    
    // Add event listener for "Show All" button
    const showAllBtn = document.getElementById('paperlessShowAllBtn');
    if (showAllBtn) {
        showAllBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Clear all filters
            if (searchInput) searchInput.value = '';
            if (typeFilter) typeFilter.value = '';
            if (tagFilter) tagFilter.value = '';
            
            // Reset page and load all documents
            currentPaperlessPage = 1;
            paperlessSearchQuery = '';
            loadAllPaperlessDocuments();
        });
    }
    
    // Toggle browse sections will be handled by initPaperlessNgxIntegration()
    // togglePaperlessBrowseSections();
});

// Make functions available globally
window.openPaperlessBrowser = openPaperlessBrowser;
window.loadAllPaperlessDocuments = loadAllPaperlessDocuments;
window.selectPaperlessDocument = selectPaperlessDocument;
window.clearPaperlessSelection = clearPaperlessSelection;
window.changePage = changePage;

// ===== END PAPERLESS BROWSER FUNCTIONALITY =====