// DNS查询页面功能实现

// 初始化查询页面
function initQueryPage() {
  console.log('初始化DNS查询页面...');
  setupQueryEventListeners();
  loadQueryHistory();
}

// 执行DNS查询
async function handleDNSQuery() {
  const domainInput = document.getElementById('dns-query-domain');
  const resultDiv = document.getElementById('query-result');
  
  if (!domainInput || !resultDiv) {
    console.error('找不到必要的DOM元素');
    return;
  }
  
  const domain = domainInput.value.trim();
  if (!domain) {
    showErrorMessage('请输入域名');
    return;
  }
  
  showLoading('查询中...');
  
  try {
    const response = await fetch(`/api/query?domain=${encodeURIComponent(domain)}`);
    if (!response.ok) {
      throw new Error('查询失败');
    }
    
    const result = await response.json();
    displayQueryResult(result, domain);
    saveQueryHistory(domain, result);
    loadQueryHistory();
    hideLoading();
  } catch (error) {
    console.error('DNS查询出错:', error);
    showErrorMessage('查询失败，请稍后重试');
    hideLoading();
  }
}

// 显示查询结果
function displayQueryResult(result, domain) {
  const resultDiv = document.getElementById('query-result');
  if (!resultDiv) return;
  
  // 显示结果容器
  resultDiv.classList.remove('hidden');
  
  // 解析结果
  const status = result.blocked ? '被屏蔽' : '正常';
  const statusClass = result.blocked ? 'text-danger' : 'text-success';
  const blockType = result.blocked ? result.blockType || '未知' : '正常';
  const timestamp = new Date(result.timestamp).toLocaleString();
  
  // 更新结果显示
  document.getElementById('result-domain').textContent = domain;
  document.getElementById('result-status').innerHTML = `<span class="${statusClass}">${status}</span>`;
  document.getElementById('result-type').textContent = blockType;
  document.getElementById('result-time').textContent = timestamp;
  document.getElementById('result-details').textContent = JSON.stringify(result, null, 2);
}

// 保存查询历史
function saveQueryHistory(domain, result) {
  // 获取现有历史记录
  let history = JSON.parse(localStorage.getItem('dnsQueryHistory') || '[]');
  
  // 创建历史记录项
  const historyItem = {
    domain: domain,
    timestamp: new Date().toISOString(),
    result: {
      blocked: result.blocked,
      blockType: result.blockType
    }
  };
  
  // 添加到历史记录开头
  history.unshift(historyItem);
  
  // 限制历史记录数量
  if (history.length > 20) {
    history = history.slice(0, 20);
  }
  
  // 保存到本地存储
  localStorage.setItem('dnsQueryHistory', JSON.stringify(history));
}

// 加载查询历史
function loadQueryHistory() {
  const historyDiv = document.getElementById('query-history');
  if (!historyDiv) return;
  
  // 获取历史记录
  const history = JSON.parse(localStorage.getItem('dnsQueryHistory') || '[]');
  
  if (history.length === 0) {
    historyDiv.innerHTML = '<div class="text-center text-gray-500 py-4">暂无查询历史</div>';
    return;
  }
  
  // 生成历史记录HTML
  const historyHTML = history.map(item => {
    const statusClass = item.result.blocked ? 'text-danger' : 'text-success';
    const statusText = item.result.blocked ? '被屏蔽' : '正常';
    const blockType = item.result.blocked ? item.result.blockType : '正常';
    const formattedTime = new Date(item.timestamp).toLocaleString();
    
    return `
      <div class="flex flex-col md:flex-row justify-between items-start md:items-center p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
        <div class="flex-1">
          <div class="flex items-center space-x-2">
            <span class="font-medium">${item.domain}</span>
            <span class="${statusClass} text-sm">${statusText}</span>
            <span class="text-xs text-gray-500">${blockType}</span>
          </div>
          <div class="text-xs text-gray-500 mt-1">${formattedTime}</div>
        </div>
        <button class="mt-2 md:mt-0 px-3 py-1 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-colors" onclick="requeryFromHistory('${item.domain}')">
          <i class="fa fa-refresh mr-1"></i>重新查询
        </button>
      </div>
    `;
  }).join('');
  
  historyDiv.innerHTML = historyHTML;
}

// 从历史记录重新查询
function requeryFromHistory(domain) {
  const domainInput = document.getElementById('dns-query-domain');
  if (domainInput) {
    domainInput.value = domain;
    handleDNSQuery();
  }
}

// 清空查询历史
function clearQueryHistory() {
  if (confirm('确定要清空所有查询历史吗？')) {
    localStorage.removeItem('dnsQueryHistory');
    loadQueryHistory();
    showSuccessMessage('查询历史已清空');
  }
}

// 设置事件监听器
function setupQueryEventListeners() {
  // 查询按钮事件
  const queryBtn = document.getElementById('dns-query-btn');
  if (queryBtn) {
    queryBtn.addEventListener('click', handleDNSQuery);
  }
  
  // 输入框回车键事件
  const domainInput = document.getElementById('dns-query-domain');
  if (domainInput) {
    domainInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        handleDNSQuery();
      }
    });
  }
  
  // 清空历史按钮事件
  const clearHistoryBtn = document.getElementById('clear-history-btn');
  if (clearHistoryBtn) {
    clearHistoryBtn.addEventListener('click', clearQueryHistory);
  }
}

// 显示加载状态
function showLoading(message = '加载中...') {
  // 移除现有加载状态
  hideLoading();
  
  // 创建加载状态元素
  const loading = document.createElement('div');
  loading.className = 'loading-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50';
  loading.innerHTML = `
    <div class="bg-white rounded-lg p-6 shadow-lg flex items-center space-x-4">
      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
      <span class="text-gray-700 font-medium">${message}</span>
    </div>
  `;
  
  document.body.appendChild(loading);
}

// 隐藏加载状态
function hideLoading() {
  const loading = document.querySelector('.loading-overlay');
  if (loading) {
    loading.remove();
  }
}

// 显示成功消息
function showSuccessMessage(message) {
  showNotification(message, 'success');
}

// 显示错误消息
function showErrorMessage(message) {
  showNotification(message, 'error');
}

// 显示通知
function showNotification(message, type = 'info') {
  // 移除现有通知
  const existingNotification = document.querySelector('.notification');
  if (existingNotification) {
    existingNotification.remove();
  }
  
  // 创建新通知
  const notification = document.createElement('div');
  notification.className = `notification fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-300 ease-in-out translate-y-0 opacity-0`;
  
  // 设置通知样式
  if (type === 'success') {
    notification.classList.add('bg-green-500', 'text-white');
  } else if (type === 'error') {
    notification.classList.add('bg-red-500', 'text-white');
  } else {
    notification.classList.add('bg-blue-500', 'text-white');
  }
  
  notification.innerHTML = `
    <div class="flex items-center space-x-2">
      <i class="fa ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle'}"></i>
      <span>${message}</span>
    </div>
  `;
  
  document.body.appendChild(notification);
  
  // 显示通知
  setTimeout(() => {
    notification.classList.remove('opacity-0');
    notification.classList.add('opacity-100');
  }, 10);
  
  // 3秒后隐藏通知
  setTimeout(() => {
    notification.classList.remove('opacity-100');
    notification.classList.add('opacity-0');
    setTimeout(() => {
      notification.remove();
    }, 300);
  }, 3000);
}

// 页面加载完成后初始化
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initQueryPage);
} else {
  initQueryPage();
}

// 当切换到DNS查询页面时重新加载数据
document.addEventListener('DOMContentLoaded', () => {
  // 监听hash变化，当切换到DNS查询页面时重新加载数据
  window.addEventListener('hashchange', () => {
    if (window.location.hash === '#query') {
      initQueryPage();
    }
  });
});