popup.js

// Popup script for Substack Notification Filter settings

// Firefox compatibility - use browser API if chrome API not available
const storageAPI = typeof browser !== 'undefined' ? browser : chrome;

// Common slur blocklist - automatically filtered when enabled
const COMMON_SLURS = [
  'retard', 'retarded',
  'fag', 'faggot', 'tranny',
  'nigger', 'nigga', 'negro',
  'kike', 'spic', 'chink',
  'gook', 'wetback', 'raghead',
  'coon', 'porch monkey'
];

// Dark mode management
async function initDarkMode() {
  const result = await storageAPI.storage.local.get(['darkMode']);
  const darkModeSetting = result.darkMode; // 'auto', 'light', or 'dark'

  applyDarkMode(darkModeSetting || 'auto');
  updateDarkModeButton(darkModeSetting || 'auto');
}

function applyDarkMode(mode) {
  const body = document.body;

  if (mode === 'dark') {
    body.classList.add('dark-mode');
    body.classList.remove('light-mode');
  } else if (mode === 'light') {
    body.classList.add('light-mode');
    body.classList.remove('dark-mode');
  } else {
    // Auto mode - remove both classes to let CSS media query handle it
    body.classList.remove('dark-mode', 'light-mode');
  }
}

function updateDarkModeButton(mode) {
  const button = document.getElementById('darkModeToggle');

  if (mode === 'dark') {
    button.textContent = '☀️';
    button.title = 'Switch to light mode';
  } else if (mode === 'light') {
    button.textContent = '🌙';
    button.title = 'Switch to auto mode';
  } else {
    // Auto mode - show icon based on system preference
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    button.textContent = prefersDark ? '☀️' : '🌙';
    button.title = 'Dark mode: Auto (follows system)';
  }
}

// Dark mode toggle handler
document.addEventListener('DOMContentLoaded', () => {
  const button = document.getElementById('darkModeToggle');

  button.addEventListener('click', async () => {
    const result = await storageAPI.storage.local.get(['darkMode']);
    const currentMode = result.darkMode || 'auto';

    // Cycle: auto -> light -> dark -> auto
    let newMode;
    if (currentMode === 'auto') {
      newMode = 'light';
    } else if (currentMode === 'light') {
      newMode = 'dark';
    } else {
      newMode = 'auto';
    }

    await storageAPI.storage.local.set({ darkMode: newMode });
    applyDarkMode(newMode);
    updateDarkModeButton(newMode);
  });
});

// Load saved settings on popup open
document.addEventListener('DOMContentLoaded', async () => {
  await initDarkMode();
  await loadSettings();
  await loadStats();
});

// Load settings from storage
async function loadSettings() {
  try {
    const result = await storageAPI.storage.local.get(['filters', 'followedUsers', 'whitelistedUsers']);

    if (result.filters) {
      document.getElementById('enabled').checked = result.filters.enabled !== false;
      document.getElementById('useCommonSlurs').checked = result.filters.useCommonSlurs || false;
      document.getElementById('keywords').value = (result.filters.keywords || []).join('\n');
      document.getElementById('minLikes').value = result.filters.minLikes || 0;
      document.getElementById('requireFollowed').checked = result.filters.requireFollowed || false;
      document.getElementById('filterLevel').value = result.filters.filterLevel || 'custom';
      document.getElementById('filterReplies').checked = result.filters.filterReplies || false;
      document.getElementById('filterLikes').checked = result.filters.filterLikes || false;
      document.getElementById('filterRestacks').checked = result.filters.filterRestacks || false;
    }

    if (result.followedUsers) {
      document.getElementById('followedUsers').value = result.followedUsers.join('\n');
    }

    if (result.whitelistedUsers) {
      document.getElementById('whitelistedUsers').value = result.whitelistedUsers.join('\n');
    }
  } catch (error) {
    console.error('Error loading settings:', error);
    showStatus('Error loading settings', 'error');
  }
}

// Filter level preset handler
document.getElementById('filterLevel').addEventListener('change', (e) => {
  const level = e.target.value;
  if (level === 'mild') {
    document.getElementById('minLikes').value = 0;
    document.getElementById('requireFollowed').checked = false;
  } else if (level === 'moderate') {
    document.getElementById('minLikes').value = 5;
    document.getElementById('requireFollowed').checked = false;
  } else if (level === 'strict') {
    document.getElementById('minLikes').value = 10;
    document.getElementById('requireFollowed').checked = true;
  }
  // 'custom' does nothing, user sets their own values
});

// Load statistics
async function loadStats() {
  try {
    const result = await storageAPI.storage.local.get(['stats']);
    
    if (result.stats) {
      document.getElementById('stat-total').textContent = result.stats.totalNotifications || 0;
      document.getElementById('stat-filtered').textContent = result.stats.filteredCount || 0;
      const visible = (result.stats.totalNotifications || 0) - (result.stats.filteredCount || 0);
      document.getElementById('stat-visible').textContent = visible;
    }
  } catch (error) {
    console.error('Error loading stats:', error);
  }
}

// Save settings
document.getElementById('save').addEventListener('click', async () => {
  const useCommonSlurs = document.getElementById('useCommonSlurs').checked;

  let keywords = document.getElementById('keywords').value
    .split('\n')
    .map(k => k.trim())
    .filter(k => k.length > 0);

  // Combine with common slurs if enabled
  if (useCommonSlurs) {
    keywords = [...new Set([...keywords, ...COMMON_SLURS])]; // Remove duplicates
  }

  const followedUsers = document.getElementById('followedUsers').value
    .split('\n')
    .map(u => u.trim().toLowerCase().replace(/^@/, '')) // Remove @ symbol if present
    .filter(u => u.length > 0);

  const whitelistedUsers = document.getElementById('whitelistedUsers').value
    .split('\n')
    .map(u => u.trim().toLowerCase().replace(/^@/, '')) // Remove @ symbol if present
    .filter(u => u.length > 0);

  const filters = {
    enabled: document.getElementById('enabled').checked,
    useCommonSlurs: useCommonSlurs,
    keywords: keywords,
    minLikes: parseInt(document.getElementById('minLikes').value) || 0,
    requireFollowed: document.getElementById('requireFollowed').checked,
    filterLevel: document.getElementById('filterLevel').value,
    filterReplies: document.getElementById('filterReplies').checked,
    filterLikes: document.getElementById('filterLikes').checked,
    filterRestacks: document.getElementById('filterRestacks').checked
  };

  try {
    await storageAPI.storage.local.set({ filters, followedUsers, whitelistedUsers });
    showStatus('Settings saved successfully!', 'success');

    // Reload activity tabs
    const tabs = await storageAPI.tabs.query({ url: 'https://substack.com/activity*' });
    tabs.forEach(tab => {
      storageAPI.tabs.reload(tab.id);
    });

    // Reload stats after a moment
    setTimeout(loadStats, 500);
  } catch (error) {
    console.error('Error saving settings:', error);
    showStatus('Error saving settings', 'error');
  }
});

// Reset to defaults
document.getElementById('reset').addEventListener('click', async () => {
  if (!confirm('Reset all settings to defaults?')) return;

  const defaultFilters = {
    enabled: true,
    keywords: [],
    minLikes: 0,
    requireFollowed: false
  };

  try {
    await storageAPI.storage.local.set({ filters: defaultFilters, followedUsers: [] });
    await loadSettings();
    showStatus('Settings reset to defaults', 'success');
  } catch (error) {
    console.error('Error resetting settings:', error);
    showStatus('Error resetting settings', 'error');
  }
});

// Show status message
function showStatus(message, type) {
  const statusEl = document.getElementById('status');
  statusEl.textContent = message;
  statusEl.className = `status ${type}`;
  statusEl.style.display = 'block';

  setTimeout(() => {
    statusEl.style.display = 'none';
  }, 3000);
}

// Export settings
document.getElementById('export').addEventListener('click', async () => {
  try {
    const result = await storageAPI.storage.local.get(['filters', 'followedUsers']);
    const exportData = {
      version: '0.2.0',
      exportDate: new Date().toISOString(),
      filters: result.filters || {},
      followedUsers: result.followedUsers || []
    };

    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `substack-filter-settings-${new Date().toISOString().split('T')[0]}.json`;
    a.click();
    URL.revokeObjectURL(url);

    showStatus('Settings exported successfully!', 'success');
  } catch (error) {
    console.error('Error exporting settings:', error);
    showStatus('Error exporting settings', 'error');
  }
});

// Import settings
document.getElementById('import').addEventListener('click', () => {
  document.getElementById('importFile').click();
});

document.getElementById('importFile').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  try {
    const text = await file.text();
    const importData = JSON.parse(text);

    if (!importData.filters) {
      throw new Error('Invalid settings file');
    }

    await storageAPI.storage.local.set({
      filters: importData.filters,
      followedUsers: importData.followedUsers || []
    });

    await loadSettings();
    showStatus('Settings imported successfully!', 'success');

    // Notify content script
    const tabs = await storageAPI.tabs.query({ url: 'https://substack.com/*' });
    tabs.forEach(tab => {
      storageAPI.tabs.sendMessage(tab.id, {
        action: 'updateConfig',
        config: importData.filters,
        followedUsers: importData.followedUsers || []
      });
    });
  } catch (error) {
    console.error('Error importing settings:', error);
    showStatus('Error importing settings: ' + error.message, 'error');
  }

    // Reset file input
  e.target.value = '';
});

// Quick disable for 1 hour
document.getElementById('quickDisable').addEventListener('click', async () => {
  try {
    const result = await storageAPI.storage.local.get(['filters']);
    const filters = result.filters || {};

    if (filters.temporarilyDisabledUntil && new Date(filters.temporarilyDisabledUntil) > new Date()) {
      // Re-enable if already disabled
      delete filters.temporarilyDisabledUntil;
      filters.enabled = true;
      showStatus('Filter re-enabled!', 'success');
      document.getElementById('quickDisable').textContent = 'Quick Disable (1 hour)';
      document.getElementById('quickDisable').style.background = '#ffc107';
    } else {
      // Disable for 1 hour
      const oneHourFromNow = new Date(Date.now() + 60 * 60 * 1000);
      filters.temporarilyDisabledUntil = oneHourFromNow.toISOString();
      filters.enabled = false;
      showStatus('Filter disabled for 1 hour!', 'success');
      document.getElementById('quickDisable').textContent = 'Re-enable Filter';
      document.getElementById('quickDisable').style.background = '#28a745';
    }

    await storageAPI.storage.local.set({ filters });

    // Notify content script
    const tabs = await storageAPI.tabs.query({ url: 'https://substack.com/*' });
    tabs.forEach(tab => {
      storageAPI.tabs.sendMessage(tab.id, {
        action: 'updateConfig',
        config: filters
      });
    });

    await loadSettings();
  } catch (error) {
    console.error('Error toggling quick disable:', error);
    showStatus('Error toggling filter', 'error');
  }
});