cv/popup.js

// popup.js — Settings popup logic

// ─── Helpers ────────────────────────────────────────────────────────────────

function showToast(msg, type = '') {
  const toast = document.getElementById('toast');
  toast.textContent = msg;
  toast.className = 'toast show ' + type;
  setTimeout(() => { toast.className = 'toast'; }, 2500);
}

function setKeyStatus(state) {
  const badge = document.getElementById('key-status');
  badge.style.display = 'inline-flex';
  if (state === 'ok') {
    badge.className = 'status-badge success';
    badge.innerHTML = '<span class="status-dot"></span> Valid';
  } else if (state === 'error') {
    badge.className = 'status-badge error';
    badge.innerHTML = '<span class="status-dot"></span> Invalid';
  } else if (state === 'checking') {
    badge.className = 'status-badge checking';
    badge.innerHTML = '<span class="status-dot"></span> Testing...';
  }
}

function updateUsageUI(count) {
  const max = 1000;
  const pct = Math.min((count / max) * 100, 100).toFixed(1);
  document.getElementById('usage-count').textContent = `${count} / 1,000 requests`;
  document.getElementById('usage-fill').style.width = pct + '%';
}

// ─── Load saved settings ────────────────────────────────────────────────────

function loadSettings() {
  chrome.storage.sync.get(['apiKey', 'userProfile', 'language'], (data) => {
    if (data.apiKey) {
      document.getElementById('api-key-input').value = data.apiKey;
      setKeyStatus('ok');
    }
    let profile = data.userProfile || DEFAULT_PROFILE;
    if (profile.includes('hamzaayed@intaleqapp.com') || profile.includes('hamzaayedflutter@gmail.com')) {
      profile = profile
        .replace(/hamzaayed@intaleqapp\.com/g, 'hamzaayed@tripz-egypt.com')
        .replace(/hamzaayedflutter@gmail\.com/g, 'hamzaayed@tripz-egypt.com');
      chrome.storage.sync.set({ userProfile: profile });
    }
    document.getElementById('profile-textarea').value = profile;
    document.getElementById('lang-select').value =
      data.language || 'auto';
  });

  // Usage counter from local storage
  const today = new Date().toDateString();
  chrome.storage.local.get(['usageDate', 'usageCount'], (data) => {
    if (data.usageDate === today) {
      updateUsageUI(data.usageCount || 0);
    } else {
      updateUsageUI(0);
    }
  });
}

// ─── Save settings ──────────────────────────────────────────────────────────

document.getElementById('save-btn').addEventListener('click', () => {
  const apiKey = document.getElementById('api-key-input').value.trim();
  const userProfile = document.getElementById('profile-textarea').value.trim();
  const language = document.getElementById('lang-select').value;

  if (!apiKey) {
    showToast('⚠️ Please enter your API Key', 'error');
    return;
  }
  if (!userProfile) {
    showToast('⚠️ Profile cannot be empty', 'error');
    return;
  }

  chrome.storage.sync.set({ apiKey, userProfile, language }, () => {
    showToast('✅ Settings saved!', 'success');
  });
});

// ─── Toggle API key visibility ───────────────────────────────────────────────

document.getElementById('toggle-key').addEventListener('click', () => {
  const input = document.getElementById('api-key-input');
  const btn = document.getElementById('toggle-key');
  if (input.type === 'password') {
    input.type = 'text';
    btn.textContent = '🙈';
  } else {
    input.type = 'password';
    btn.textContent = '👁';
  }
});

// ─── Test API Key ───────────────────────────────────────────────────────────

document.getElementById('test-key-btn').addEventListener('click', async () => {
  const apiKey = document.getElementById('api-key-input').value.trim();
  if (!apiKey) {
    showToast('⚠️ Enter your API key first', 'error');
    return;
  }

  setKeyStatus('checking');

  try {
    const response = await fetch(
      `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${apiKey}`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          contents: [{ parts: [{ text: 'Say "OK" in one word.' }] }],
          generationConfig: { maxOutputTokens: 5 }
        })
      }
    );

    if (response.ok) {
      setKeyStatus('ok');
      showToast('✅ API Key is valid!', 'success');
    } else {
      const err = await response.json();
      setKeyStatus('error');
      showToast('❌ Invalid key: ' + (err.error?.message || response.status), 'error');
    }
  } catch (e) {
    setKeyStatus('error');
    showToast('❌ Network error: ' + e.message, 'error');
  }
});

// ─── Reset profile ──────────────────────────────────────────────────────────

document.getElementById('reset-profile-btn').addEventListener('click', () => {
  if (confirm('Reset profile to default?')) {
    document.getElementById('profile-textarea').value = DEFAULT_PROFILE;
    showToast('🔄 Profile reset to default');
  }
});

// ─── Clear cache ─────────────────────────────────────────────────────────────

document.getElementById('clear-cache-btn').addEventListener('click', () => {
  chrome.storage.local.remove(['analysisCache'], () => {
    showToast('🗑️ Analysis cache cleared');
  });
});

// ─── Clear all data ──────────────────────────────────────────────────────────

document.getElementById('clear-all-btn').addEventListener('click', () => {
  if (confirm('Clear ALL data including API key and profile?')) {
    chrome.storage.sync.clear(() => {
      chrome.storage.local.clear(() => {
        document.getElementById('api-key-input').value = '';
        document.getElementById('profile-textarea').value = DEFAULT_PROFILE;
        document.getElementById('lang-select').value = 'auto';
        document.getElementById('key-status').style.display = 'none';
        updateUsageUI(0);
        showToast('🗑️ All data cleared');
      });
    });
  }
});

// ─── Init ────────────────────────────────────────────────────────────────────

loadSettings();