// ComSync Pro - Main Bootstrap Script
// Handles initialization, theme management, and navigation state

(function() {
  // State management
  const ComSyncState = {
    theme: 'dark',
    sidebarOpen: true,
    activePage: window.location.pathname,
    lastActivity: Date.now(),
    notifications: 3
  };

  // Storage utilities
  const Storage = {
    set: (key, value) => localStorage.setItem(`comsync_${key}`, JSON.stringify(value)),
    get: (key, defaultValue) => {
      const stored = localStorage.getItem(`comsync_${key}`);
      return stored ? JSON.parse(stored) : defaultValue;
    },
    update: (key, updates) => {
      const current = Storage.get(key, {});
      const updated = { ...current, ...updates };
      Storage.set(key, updated);
      return updated;
    }
  };

  // Initialize preferences
  function initPreferences() {
    ComSyncState.theme = Storage.get('theme', 'dark');
    ComSyncState.sidebarOpen = Storage.get('sidebarOpen', true);
    
    // Apply theme
    if (ComSyncState.theme === 'light') {
      document.body.classList.add('bg-gray-50');
      document.body.classList.add('text-gray-900');
      document.body.classList.remove('bg-gray-900');
      document.body.classList.remove('text-gray-100');
    }
    
    // Initialize theme toggle
    const themeToggle = document.getElementById('themeToggle');
    if (themeToggle) {
      themeToggle.addEventListener('click', () => toggleTheme());
    }
  }

  // Theme management
  window.toggleTheme = function() {
    const isDark = ComSyncState.theme === 'dark';
    ComSyncState.theme = isDark ? 'light' : 'dark';
    Storage.set('theme', ComSyncState.theme);
    
    if (ComSyncState.theme === 'light') {
      document.body.classList.add('bg-gray-50');
      document.body.classList.add('text-gray-900');
      document.body.classList.remove('bg-gray-900');
      document.body.classList.remove('text-gray-100');
      document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
      document.querySelector('[data-page="dashboard"]').classList.add('active');
    } else {
      document.body.classList.remove('bg-gray-50');
      document.body.classList.remove('text-gray-900');
      document.body.classList.add('bg-gray-900');
      document.body.classList.add('text-gray-100');
    }
    
    // Update Vanta.js background if available
    if (typeof VANTA !== 'undefined' && window.vantaInstance) {
      window.vantaInstance.setOptions({
        backgroundColor: ComSyncState.theme === 'dark' ? 0x111827 : 0xf9fafb,
        color: ComSyncState.theme === 'dark' ? 0x3a82ff : 0x818cf8
      });
    }
    
    // Update icons
    setTimeout(() => lucide.createIcons(), 100);
  };

  // Navigation state
  window.handleNavigation = function(targetPage) {
    ComSyncState.activePage = targetPage;
    Storage.set('activePage', targetPage);
    
    // Update active states
    document.querySelectorAll('.nav-link').forEach(link => {
      const href = link.getAttribute('href');
      if (href === '/' && targetPage === '/') {
        link.classList.add('active');
      } else if (targetPage.startsWith(href)) {
        link.classList.add('active');
      } else {
        link.classList.remove('active');
      }
    });
    
    // Add to history
    ComSyncState.lastActivity = Date.now();
  };

  // Initialize all components
  window.initComSync = function() {
    initPreferences();
    
    // Setup sidebar state
    const toggleSidebar = () => {
      ComSyncState.sidebarOpen = !ComSyncState.sidebarOpen;
      Storage.set('sidebarOpen', ComSyncState.sidebarOpen);
      document.body.style.setProperty('--sidebar-width', ComSyncState.sidebarOpen ? '256px' : '64px');
    };
    
    // Setup notifications
    const updateNotifications = () => {
      const badge = document.getElementById('notifBadge');
      if (badge && ComSyncState.notifications > 0) {
        badge.textContent = ComSyncState.notifications;
        badge.style.display = 'flex';
      }
    };
    
    updateNotifications();
    
    // Initialize theme button
    const themeBtn = document.getElementById('themeToggle');
    if (themeBtn) {
      themeBtn.addEventListener('click', window.toggleTheme);
    }
    
    // Add navigation handlers
    document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', function() {
        handleNavigation(this.getAttribute('href'));
      });
    });
    
    // Handle popstate for back/forward
    window.addEventListener('popstate', () => {
      handleNavigation(window.location.pathname);
    });
    
    // Initialize active page
    handleNavigation(window.location.pathname);
    
    console.log('ComSync Pro initialized successfully');
  };

  // Bootstrap on DOM ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', window.initComSync);
  } else {
    window.initComSync();
  }
})();