import "../css/app.css";

// EuchreCamp Application JavaScript

// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
  initBottomNav();
  initOfflineSupport();
  initThemePreference();
});

// Bottom Navigation Active State
function initBottomNav() {
  const currentPath = window.location.pathname;
  const navItems = document.querySelectorAll('.bottom-nav-item');
  
  navItems.forEach(item => {
    if (item.getAttribute('href') === currentPath) {
      item.classList.add('active');
    }
  });
}

// Offline Support with Local Storage
function initOfflineSupport() {
  // Cache recent data for offline access
  if ('caches' in window) {
    // Listen for online/offline events
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    
    // Check initial state
    if (!navigator.onLine) {
      handleOffline();
    }
  }
}

function handleOnline() {
  console.log('App is online');
  // Clear any offline indicators
  document.body.classList.remove('offline');
  
  // Sync any pending changes
  syncPendingChanges();
}

function handleOffline() {
  console.log('App is offline');
  // Add offline indicator to body
  document.body.classList.add('offline');
  
  // Show offline notification
  showOfflineNotification();
}

function showOfflineNotification() {
  // Create or update offline notification
  let notification = document.getElementById('offline-notification');
  if (!notification) {
    notification = document.createElement('div');
    notification.id = 'offline-notification';
    notification.className = 'offline-notification';
    notification.innerHTML = `
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20" height="20">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
      </svg>
      <span>Offline Mode - Some features may be limited</span>
    `;
    document.body.appendChild(notification);
  }
}

function syncPendingChanges() {
  // Implement sync logic here
  // This would sync any locally stored changes to the server
  console.log('Syncing pending changes...');
}

// Theme Preference
function initThemePreference() {
  // Check for saved theme preference
  const savedTheme = localStorage.getItem('euchrecamp-theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  }
}

// Utility Functions
function saveToLocalStorage(key, data) {
  try {
    localStorage.setItem(`euchrecamp-${key}`, JSON.stringify(data));
    return true;
  } catch (e) {
    console.error('Error saving to localStorage:', e);
    return false;
  }
}

function getFromLocalStorage(key) {
  try {
    const data = localStorage.getItem(`euchrecamp-${key}`);
    return data ? JSON.parse(data) : null;
  } catch (e) {
    console.error('Error reading from localStorage:', e);
    return null;
  }
}

function clearLocalStorage(key) {
  try {
    localStorage.removeItem(`euchrecamp-${key}`);
    return true;
  } catch (e) {
    console.error('Error clearing localStorage:', e);
    return false;
  }
}