script.js

// Settings management
const defaultSettings = {
    theme: 'light',
    searchEngine: 'duckduckgo',
    weatherUnit: 'fahrenheit',
    timeFormat: '12',
    categoriesPerRow: 'auto', // Can be 'auto' or number 1-10
    displayMode: 'icon' // Can be 'icon', 'text', or 'balanced'
};

// Search engines configuration
const searchEngines = {
    google: {
        name: 'Google',
        url: 'https://www.google.com/search?q=',
        placeholder: 'Search Google or type a URL...'
    },
    bing: {
        name: 'Bing',
        url: 'https://www.bing.com/search?q=',
        placeholder: 'Search Bing or type a URL...'
    },
    duckduckgo: {
        name: 'DuckDuckGo',
        url: 'https://duckduckgo.com/?q=',
        placeholder: 'Search DuckDuckGo or type a URL...'
    }
};

// Load links from JSON file
async function loadLinksFromFile() {
    try {
        const response = await fetch('./links.json?t=' + Date.now());
        const links = await response.json();
        return links;
    } catch (error) {
        console.error('Error loading links.json:', error);
        return {};
    }
}

// Load and save settings
function loadSettings() {
    const saved = localStorage.getItem('homePageSettings');
    return saved ? { ...defaultSettings, ...JSON.parse(saved) } : defaultSettings;
}

function saveSettings(settings) {
    localStorage.setItem('homePageSettings', JSON.stringify(settings));
    applySettings(settings);
}

function applySettings(settings) {
    // Apply theme
    document.documentElement.setAttribute('data-theme', settings.theme);
    
    // Apply display mode
    document.documentElement.setAttribute('data-display-mode', settings.displayMode);
    
    // Apply categories per row - handle auto sizing
    if (settings.categoriesPerRow === 'auto') {
        // Auto sizing based on screen width
        const screenWidth = window.innerWidth;
        let columns;
        if (screenWidth < 768) {
            columns = 1; // Mobile: always 1 column
        } else if (screenWidth < 1024) {
            columns = 2; // Tablet: 2 columns
        } else if (screenWidth < 1440) {
            columns = 3; // Desktop: 3 columns
        } else {
            columns = 4; // Large desktop: 4 columns
        }
        document.documentElement.style.setProperty('--categories-per-row', columns);
    } else {
        document.documentElement.style.setProperty('--categories-per-row', settings.categoriesPerRow);
    }
    
    // Update search bar placeholder
    const searchInput = document.getElementById('searchInput');
    const engine = searchEngines[settings.searchEngine];
    if (searchInput && engine) {
        searchInput.placeholder = engine.placeholder;
    }
}

// Load bookmark sections from JSON file
async function loadBookmarkSections() {
    try {
        // Show loading state
        const grids = document.querySelectorAll('[id$="Grid"]');
        grids.forEach(grid => {
            grid.innerHTML = '<div class="loading-placeholder">Loading...</div>';
        });
        
        const bookmarkSections = await loadLinksFromFile();
        
        Object.keys(bookmarkSections).forEach(sectionKey => {
            const gridElement = document.getElementById(sectionKey + 'Grid');
            
            if (gridElement && bookmarkSections[sectionKey]) {
                const links = bookmarkSections[sectionKey];
                const htmlContent = links.map(link => `
                    <a href="${link.url}" target="_blank" rel="noopener noreferrer" class="bookmark-tile" data-description="${link.description || link.name}">
                        <i class="${link.icon}"></i>
                        <span>${link.name}</span>
                    </a>
                `).join('');
                
                gridElement.innerHTML = htmlContent;
            } else if (gridElement) {
                gridElement.innerHTML = '<div class="error-placeholder">Failed to load links</div>';
            }
        });
    } catch (error) {
        console.error('Error loading bookmark sections:', error);
        // Show error state
        const grids = document.querySelectorAll('[id$="Grid"]');
        grids.forEach(grid => {
            grid.innerHTML = '<div class="error-placeholder">Failed to load links</div>';
        });
    }
}

// Settings sidebar functions
function toggleSettings() {
    const sidebar = document.getElementById('settingsSidebar');
    const arrow = document.getElementById('settingsArrow');
    const toggle = document.querySelector('.settings-toggle');
    
    sidebar.classList.toggle('open');
    const isOpen = sidebar.classList.contains('open');
    
    // Update ARIA attributes
    toggle.setAttribute('aria-expanded', isOpen);
    sidebar.setAttribute('aria-hidden', !isOpen);
    
    if (isOpen) {
        arrow.className = 'fas fa-chevron-right';
        loadSettingsIntoSidebar();
        // Focus management
        setTimeout(() => {
            const firstFocusable = sidebar.querySelector('select, button');
            if (firstFocusable) firstFocusable.focus();
        }, 150);
    } else {
        arrow.className = 'fas fa-chevron-left';
        toggle.focus();
    }
}

function loadSettingsIntoSidebar() {
    const settings = loadSettings();
    
    // Populate current settings
    document.getElementById('themeSelect').value = settings.theme;
    document.getElementById('searchEngineSelect').value = settings.searchEngine;
    document.getElementById('weatherUnitSelect').value = settings.weatherUnit;
    document.getElementById('timeFormatSelect').value = settings.timeFormat;
    document.getElementById('categoriesPerRowSelect').value = settings.categoriesPerRow;
    document.getElementById('displayModeSelect').value = settings.displayMode;
}

// Search functionality
function handleSearch(event) {
    if (event.key === 'Enter') {
        const query = event.target.value.trim();
        if (query) {
            const settings = loadSettings();
            const engine = searchEngines[settings.searchEngine];
            
            // Improved URL detection
            const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/i;
            const isUrl = urlRegex.test(query) || query.includes('localhost') || query.includes('127.0.0.1');
            
            if (isUrl) {
                const url = query.startsWith('http') ? query : 'https://' + query;
                window.open(url, '_blank', 'noopener,noreferrer');
            } else {
                // Search using selected engine
                window.open(engine.url + encodeURIComponent(query), '_blank', 'noopener,noreferrer');
            }
            
            event.target.value = '';
        }
    }
}

// Time display
function updateTime() {
    const now = new Date();
    const settings = loadSettings();
    const timeElement = document.getElementById('time');
    const dateElement = document.getElementById('date');
    
    if (timeElement) {
        const options = {
            hour: '2-digit',
            minute: '2-digit',
            hour12: settings.timeFormat === '12'
        };
        timeElement.textContent = now.toLocaleTimeString('en-US', options);
    }
    
    if (dateElement) {
        const options = {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        };
        dateElement.textContent = now.toLocaleDateString('en-US', options);
    }
}

// Weather functionality
async function updateWeather() {
    const settings = loadSettings();
    const temperatureElement = document.getElementById('temperature');
    const locationElement = document.getElementById('location');
    const weatherIcon = document.getElementById('weatherIcon');
    
    if (!temperatureElement || !locationElement || !weatherIcon) return;
    
    try {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(async (position) => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                
                try {
                    // Using mock weather data for demo
                    const mockWeather = {
                        temperature: 22,
                        location: 'Your Location',
                        condition: 'sunny'
                    };
                    
                    const temp = settings.weatherUnit === 'fahrenheit' 
                        ? Math.round(mockWeather.temperature * 9/5 + 32) 
                        : mockWeather.temperature;
                    const unit = settings.weatherUnit === 'fahrenheit' ? '°F' : '°C';
                    
                    temperatureElement.textContent = `${temp}${unit}`;
                    locationElement.textContent = mockWeather.location;
                    
                    // Update weather icon
                    switch (mockWeather.condition) {
                        case 'sunny':
                            weatherIcon.className = 'fas fa-sun';
                            break;
                        case 'cloudy':
                            weatherIcon.className = 'fas fa-cloud';
                            break;
                        case 'rain':
                            weatherIcon.className = 'fas fa-cloud-rain';
                            break;
                        case 'snow':
                            weatherIcon.className = 'fas fa-snowflake';
                            break;
                        default:
                            weatherIcon.className = 'fas fa-cloud-sun';
                    }
                } catch (error) {
                    console.error('Weather API error:', error);
                    showWeatherError(temperatureElement, locationElement, weatherIcon, 'Weather unavailable');
                }
            }, (error) => {
                // Location access denied or error
                console.error('Geolocation error:', error);
                showWeatherError(temperatureElement, locationElement, weatherIcon, 
                    error.code === 1 ? 'Location access denied' : 'Location unavailable');
            });
        } else {
            showWeatherError(temperatureElement, locationElement, weatherIcon, 'Geolocation not supported');
        }
    } catch (error) {
        console.error('Weather error:', error);
        showWeatherError(temperatureElement, locationElement, weatherIcon, 'Weather service unavailable');
    }
}

function showWeatherError(tempEl, locEl, iconEl, message) {
    if (tempEl) tempEl.textContent = '--°';
    if (locEl) locEl.textContent = message;
    if (iconEl) iconEl.className = 'fas fa-exclamation-triangle';
}

// Save settings from sidebar (called on change)
function saveSettingsFromSidebar() {
    const settings = {
        theme: document.getElementById('themeSelect').value,
        searchEngine: document.getElementById('searchEngineSelect').value,
        weatherUnit: document.getElementById('weatherUnitSelect').value,
        timeFormat: document.getElementById('timeFormatSelect').value,
        categoriesPerRow: document.getElementById('categoriesPerRowSelect').value,
        displayMode: document.getElementById('displayModeSelect').value
    };
    
    localStorage.setItem('homePageSettings', JSON.stringify(settings));
    applySettings(settings);
    
    // Refresh displays that depend on settings
    updateTime();
    updateWeather();
}

// Initialize everything when page loads
document.addEventListener('DOMContentLoaded', async function() {
    const settings = loadSettings();
    applySettings(settings);
    await loadBookmarkSections();
    updateTime();
    updateWeather();
    
    // Update time every minute
    setInterval(updateTime, 60000);
    
    // Update weather every 30 minutes
    setInterval(updateWeather, 1800000);
    
    // Add search functionality
    const searchInput = document.getElementById('searchInput');
    const searchBtn = document.getElementById('searchBtn');
    
    if (searchInput) {
        searchInput.addEventListener('keypress', handleSearch);
    }
    
    if (searchBtn) {
        searchBtn.addEventListener('click', function() {
            const event = { key: 'Enter', target: searchInput };
            handleSearch(event);
        });
    }
    
    // Keyboard shortcuts
    document.addEventListener('keydown', function(event) {
        // Ctrl/Cmd + K to focus search
        if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
            event.preventDefault();
            if (searchInput) searchInput.focus();
        }
        
        // Escape to close settings
        if (event.key === 'Escape') {
            const sidebar = document.getElementById('settingsSidebar');
            if (sidebar && sidebar.classList.contains('open')) {
                toggleSettings();
            }
        }
    });
    
    // Handle window resize for auto layout
    window.addEventListener('resize', function() {
        const currentSettings = loadSettings();
        if (currentSettings.categoriesPerRow === 'auto') {
            applySettings(currentSettings);
        }
    });
});