popup.js

// Configuration
let API_BASE_URL = '';
let API_KEY = '';
let isLoadingCategories = false;

// DOM Elements
const submitView = document.getElementById('submitView');
const settingsView = document.getElementById('settingsView');
const form = document.getElementById('submitForm');
const settingsForm = document.getElementById('settingsForm');
const titleInput = document.getElementById('title');
const urlInput = document.getElementById('url');
const descriptionInput = document.getElementById('description');
const categorySelect = document.getElementById('category');
const thumbnailInput = document.getElementById('thumbnail');
const thumbnailPreview = document.getElementById('thumbnail-preview');
const messageDiv = document.getElementById('message');
const settingsMessageDiv = document.getElementById('settingsMessage');
const refreshCategoriesBtn = document.querySelector('.refresh-categories');
const dockItems = document.querySelectorAll('.dock-item');

// Create loading indicator
const categoriesLoadingDiv = document.createElement('div');
categoriesLoadingDiv.className = 'categories-loading';
categoriesLoadingDiv.innerHTML = '<i class="fas fa-spinner"></i> 正在加载分类...';
categoriesLoadingDiv.style.display = 'none';
categorySelect.parentNode.appendChild(categoriesLoadingDiv);

// View switching
dockItems.forEach(item => {
  item.addEventListener('click', () => {
    const targetView = item.dataset.view;
    document.querySelector('.view.active').classList.remove('active');
    document.getElementById(targetView).classList.add('active');
    document.querySelector('.dock-item.active').classList.remove('active');
    item.classList.add('active');
  });
});

// Load settings
async function loadSettings() {
  const settings = await chrome.storage.sync.get(['apiBase', 'apiKey']);
  if (!settings.apiBase || !settings.apiKey) {
    showMessage('请先配置API设置', true);
    // Switch to settings view
    document.querySelector('.view.active').classList.remove('active');
    settingsView.classList.add('active');
    document.querySelector('.dock-item.active').classList.remove('active');
    document.querySelector('[data-view="settingsView"]').classList.add('active');
    return false;
  }
  API_BASE_URL = settings.apiBase;
  API_KEY = settings.apiKey;
  
  // Load settings form
  const apiBaseInput = document.getElementById('apiBase');
  const apiKeyInput = document.getElementById('apiKey');
  apiBaseInput.value = settings.apiBase;
  apiKeyInput.value = settings.apiKey;
  
  return true;
}

// Show/hide categories loading indicator
function toggleCategoriesLoading(show) {
  isLoadingCategories = show;
  categoriesLoadingDiv.style.display = show ? 'flex' : 'none';
  categorySelect.style.visibility = show ? 'hidden' : 'visible';
  refreshCategoriesBtn.style.visibility = show ? 'hidden' : 'visible';
}

// Load categories from cache or API
async function loadCategories(forceRefresh = false) {
  if (isLoadingCategories) return;
  
  toggleCategoriesLoading(true);
  if (forceRefresh) {
    refreshCategoriesBtn.classList.add('spinning');
  }
  
  try {
    let categories;
    if (!forceRefresh) {
      // Try to get from cache first
      const cache = await chrome.storage.local.get(['categories', 'categoriesLastUpdate']);
      if (cache.categories && cache.categoriesLastUpdate) {
        // Check if cache is less than 1 hour old
        const cacheAge = Date.now() - cache.categoriesLastUpdate;
        if (cacheAge < 3600000) { // 1 hour in milliseconds
          categories = cache.categories;
        }
      }
    }
    
    if (!categories) {
      // Fetch from API if not in cache or force refresh
      const response = await fetch(`${API_BASE_URL}/api/categories`, {
        headers: {
          'Authorization': `Bearer ${API_KEY}`
        }
      });
      const data = await response.json();
      
      if (data.success && data.data) {
        categories = data.data;
        // Cache the categories
        await chrome.storage.local.set({ 
          categories,
          categoriesLastUpdate: Date.now()
        });
      }
    }
    
    if (categories) {
      // Clear existing options except the first one
      while (categorySelect.options.length > 1) {
        categorySelect.remove(1);
      }
      
      // Add categories
      categories.forEach(category => {
        const option = document.createElement('option');
        option.value = category.id;
        option.textContent = category.name;
        categorySelect.appendChild(option);
      });
    }
  } catch (error) {
    console.error('Failed to load categories:', error);
    showMessage('加载分类失败', true);
  } finally {
    toggleCategoriesLoading(false);
    if (forceRefresh) {
      refreshCategoriesBtn.classList.remove('spinning');
    }
  }
}

// Refresh categories button handler
refreshCategoriesBtn.addEventListener('click', () => {
  loadCategories(true);
});

// Auto-fill form with current page info
async function autoFillForm() {
  form.classList.add('loading');
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    if (!tab) return;

    titleInput.value = tab.title || '';
    urlInput.value = tab.url || '';
    
    // Inject and execute content script
    const [{result}] = await chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: () => {
        function getMetaContent(selectors) {
          for (const selector of selectors) {
            const element = document.querySelector(selector);
            if (element?.content) return element.content;
          }
          return null;
        }

        function getFirstVisibleParagraph() {
          const paragraphs = document.getElementsByTagName('p');
          for (const p of paragraphs) {
            const style = window.getComputedStyle(p);
            if (style.display !== 'none' && 
                style.visibility !== 'hidden' && 
                p.offsetHeight > 0 && 
                p.textContent.trim().length > 50) {
              return p.textContent.trim();
            }
          }
          return null;
        }

        // Get description
        const description = 
          getMetaContent([
            'meta[name="description"]',
            'meta[property="og:description"]',
            'meta[name="twitter:description"]',
            'meta[name="article:description"]'
          ]) ||
          document.querySelector('article p, main p, .content p, #content p, .article p')?.textContent?.trim() ||
          getFirstVisibleParagraph() ||
          '';

        // Clean up description
        const cleanDescription = description
          .replace(/[\n\r]+/g, ' ')
          .replace(/\s+/g, ' ')
          .trim()
          .slice(0, 500);

        // Get thumbnail
        const thumbnail = 
          getMetaContent([
            'meta[property="og:image"]',
            'meta[name="twitter:image"]',
            'meta[itemprop="image"]',
            'meta[property="article:image"]'
          ]) ||
          document.querySelector('article img, main img')?.src ||
          document.querySelector('link[rel="apple-touch-icon"]')?.href ||
          document.querySelector('link[rel="icon"]')?.href ||
          '';

        return {
          description: cleanDescription,
          thumbnail: thumbnail
        };
      }
    });

    if (result) {
      const { description, thumbnail } = result;
      
      if (description) {
        console.log('Description found:', description);
        descriptionInput.value = description;
      }
      
      if (thumbnail) {
        console.log('Thumbnail found:', thumbnail);
        try {
          // Convert relative URLs to absolute
          const absoluteThumbnail = new URL(thumbnail, tab.url).href;
          thumbnailInput.value = absoluteThumbnail;
          thumbnailPreview.src = absoluteThumbnail;
          thumbnailPreview.style.display = 'block';
        } catch (error) {
          console.error('Invalid thumbnail URL:', thumbnail);
        }
      }
    }
  } catch (error) {
    console.error('Failed to extract page info:', error);
  } finally {
    form.classList.remove('loading');
  }
}

// Show message to user with fade effect
function showMessage(text, isError = false, targetDiv = messageDiv) {
  targetDiv.textContent = text;
  targetDiv.className = isError ? 'error' : 'success';
  targetDiv.style.opacity = '0';
  targetDiv.style.display = 'block';
  
  // Trigger reflow
  targetDiv.offsetHeight;
  
  targetDiv.style.transition = 'opacity 0.3s ease';
  targetDiv.style.opacity = '1';
  
  // Auto hide success messages after 3 seconds
  if (!isError) {
    setTimeout(() => {
      targetDiv.style.opacity = '0';
      setTimeout(() => {
        targetDiv.style.display = 'none';
      }, 300);
    }, 3000);
  }
}

// Handle settings form submission
settingsForm.addEventListener('submit', async (e) => {
  e.preventDefault();

  const apiBase = document.getElementById('apiBase').value.trim();
  const apiKey = document.getElementById('apiKey').value.trim();

  // Validate API base URL
  try {
    new URL(apiBase);
  } catch (error) {
    showMessage('请输入有效的API地址', true, settingsMessageDiv);
    return;
  }

  // Remove trailing slash if present
  const normalizedApiBase = apiBase.replace(/\/$/, '');

  try {
    // Test API connection
    const response = await fetch(`${normalizedApiBase}/api/categories`, {
      headers: {
        'Authorization': `Bearer ${apiKey}`
      }
    });

    const data = await response.json();

    if (!data.success) {
      throw new Error('API test failed');
    }

    // Save settings if test was successful
    await chrome.storage.sync.set({
      apiBase: normalizedApiBase,
      apiKey: apiKey
    });

    // Update current settings
    API_BASE_URL = normalizedApiBase;
    API_KEY = apiKey;

    showMessage('设置保存成功！', false, settingsMessageDiv);
    
    // Clear categories cache to force refresh with new settings
    await chrome.storage.local.remove(['categories', 'categoriesLastUpdate']);
    
    // Switch back to submit view after 1 second
    setTimeout(() => {
      document.querySelector('.view.active').classList.remove('active');
      submitView.classList.add('active');
      document.querySelector('.dock-item.active').classList.remove('active');
      document.querySelector('[data-view="submitView"]').classList.add('active');
      loadCategories();
    }, 1000);
  } catch (error) {
    showMessage('连接API失败，请检查设置', true, settingsMessageDiv);
  }
});

// Handle form submission
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const submitButton = form.querySelector('button[type="submit"]');
  submitButton.disabled = true;
  form.classList.add('loading');
  
  const formData = {
    title: titleInput.value.trim(),
    url: urlInput.value.trim(),
    description: descriptionInput.value.trim(),
    category_id: categorySelect.value,
    thumbnail: thumbnailInput.value.trim(),
    status: 'pending'
  };

  try {
    const response = await fetch(`${API_BASE_URL}/api/websites`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      body: JSON.stringify(formData)
    });

    const data = await response.json();
    
    if (data.success) {
      showMessage('网站提交成功！');
      form.reset();
      thumbnailPreview.style.display = 'none';
    } else {
      showMessage(data.message || '提交失败', true);
    }
  } catch (error) {
    console.error('Failed to submit website:', error);
    showMessage('提交失败，请稍后重试', true);
  } finally {
    submitButton.disabled = false;
    form.classList.remove('loading');
  }
});

// Handle thumbnail URL changes with debounce
let thumbnailTimeout;
thumbnailInput.addEventListener('input', () => {
  const url = thumbnailInput.value.trim();
  clearTimeout(thumbnailTimeout);
  
  if (url) {
    thumbnailTimeout = setTimeout(() => {
      thumbnailPreview.style.opacity = '0';
      thumbnailPreview.src = url;
      thumbnailPreview.style.display = 'block';
      thumbnailPreview.onload = () => {
        thumbnailPreview.style.transition = 'opacity 0.3s ease';
        thumbnailPreview.style.opacity = '1';
      };
    }, 300);
  } else {
    thumbnailPreview.style.display = 'none';
  }
});

// Initialize popup
document.addEventListener('DOMContentLoaded', async () => {
  // First load settings
  const settingsLoaded = await loadSettings();
  if (settingsLoaded) {
    // Only proceed if settings are available
    loadCategories();
    autoFillForm();
  }
});