/**
 * main.js - 前台域名展示邏輯
 * 聯絡資訊從 SiteConfig (localStorage) 讀取，後台可直接修改
 */

// 獲取網站設置
function getConfig() {
  return SiteConfig.get();
}

// 格式化價格
function formatPrice(price, currency) {
  const cfg = getConfig();
  const formatted = Number(price).toLocaleString('zh-HK');
  return '$' + formatted + ' ' + (currency || cfg.currency);
}

// 渲染標題和介紹區
function renderHeader() {
  const cfg = getConfig();
  const elEn = document.getElementById('titleEn');
  const elZh = document.getElementById('titleZh');
  const elIntro = document.getElementById('introText');
  const elF1 = document.getElementById('feature1');
  const elF2 = document.getElementById('feature2');
  const elF3 = document.getElementById('feature3');

  if (elEn) elEn.textContent = cfg.titleEn;
  if (elZh) elZh.textContent = cfg.titleZh;
  if (elIntro) elIntro.textContent = cfg.introText;
  if (elF1) elF1.innerHTML = `<strong>${cfg.feature1Title}</strong><br>${cfg.feature1Desc}`;
  if (elF2) elF2.innerHTML = `<strong>${cfg.feature2Title}</strong><br>${cfg.feature2Desc}`;
  if (elF3) elF3.innerHTML = `<strong>${cfg.feature3Title}</strong><br>${cfg.feature3Desc}`;
}

// 渲染域名表格（按分類分組）
function renderDomainTable(domains) {
  const tbody = document.getElementById('domainTableBody');
  const table = document.getElementById('domainTable');
  const cfg = getConfig();

  if (!domains || domains.length === 0) {
    table.style.display = 'none';
    document.getElementById('emptyState').style.display = 'block';
    return;
  }

  table.style.display = '';
  document.getElementById('emptyState').style.display = 'none';

  // 按分類分組
  const groups = {};
  domains.forEach(d => {
    if (!groups[d.category]) groups[d.category] = [];
    groups[d.category].push(d);
  });

  let html = '';

  Object.keys(groups).forEach(cat => {
    const items = groups[cat];
    items.forEach((d, i) => {
      const subject = encodeURIComponent('購買 ' + d.name);
      const mailto = `mailto:${d.contact || cfg.email1}?subject=${subject}`;
      const waText = encodeURIComponent(`購買 ${d.name} (${formatPrice(d.price, d.currency)})`);
      const waLink = cfg.whatsappNumber
        ? `https://api.whatsapp.com/send?phone=${cfg.whatsappNumber}&text=${waText}`
        : '';
      const statusBadge = d.status === 'pending'
        ? ' <span style="color:#ff6600;font-size:12px;">[洽談中]</span>'
        : '';

      html += '<tr>';
      if (i === 0) {
        html += `<td class="cat" rowspan="${items.length}">${cat}</td>`;
      }
      html += `
        <td class="domain-name">
          <a href="${mailto}">${d.name}</a>${statusBadge}
          ${waLink ? `<a href="${waLink}" target="_blank" style="margin-left:8px;"><img src="https://www.hotelhk.com/images/icons/whaticon.png" class="whatsapp-icon" alt="WhatsApp"></a>` : ''}
        </td>
        <td class="price">
          <a href="${mailto}" style="color:#cc0000;text-decoration:none;">${formatPrice(d.price, d.currency)}</a>
        </td>
      `;
      html += '</tr>';
    });
  });

  tbody.innerHTML = html;
}

// 載入並顯示域名
function loadDomains() {
  const filters = {
    keyword: document.getElementById('searchInput').value.trim(),
    category: document.getElementById('categoryFilter').value
  };

  const domains = DomainDB.query(filters);
  renderDomainTable(domains);

  const count = domains.length;
  document.getElementById('resultCount').textContent = `共 ${count} 個域名`;
}

// 初始化分類篩選
function initCategoryFilter() {
  const select = document.getElementById('categoryFilter');
  const cats = DomainDB.getCategories();
  select.innerHTML = '<option value="all">全部分類</option>';
  cats.forEach(c => {
    select.innerHTML += `<option value="${c}">${c}</option>`;
  });
}

// 初始化聯絡資訊
function initContactInfo() {
  const cfg = getConfig();
  const waText = encodeURIComponent('購買domain');
  const waLink = cfg.whatsappNumber
    ? `https://api.whatsapp.com/send?phone=${cfg.whatsappNumber}&text=${waText}`
    : '';

  let html = '<p>如有任何查詢，歡迎與我們聯絡。</p>';

  html += `<p>聯絡人︰<strong style="color:#990000;">${cfg.contactPerson}</strong>`;
  if (waLink) {
    html += ` <a href="${waLink}" target="_blank"><img src="https://www.hotelhk.com/images/icons/whaticon.png" class="whatsapp-icon" alt="WhatsApp"></a>`;
  }
  if (cfg.contactPerson2) {
    html += ` 或 <strong style="color:#990000;">${cfg.contactPerson2}</strong>`;
  }
  if (cfg.contactPhone) {
    html += ` (電話: ${cfg.contactPhone})`;
  }
  html += '</p>';

  // 電郵
  if (cfg.email1 || cfg.email2) {
    html += '<p>電 郵︰';
    if (cfg.email1) html += `<a href="mailto:${cfg.email1}">${cfg.email1}</a>`;
    if (cfg.email1 && cfg.email2) html += ' 或 ';
    if (cfg.email2) html += `<a href="mailto:${cfg.email2}">${cfg.email2}</a>`;
    html += '</p>';
  }

  document.getElementById('contactInfo').innerHTML = html;
}

// 頁面初始化
document.addEventListener('DOMContentLoaded', async function() {
  // 先從 KV 同步最新數據到 localStorage
  await DataSync.init();

  renderHeader();
  initCategoryFilter();
  initContactInfo();
  loadDomains();

  // 搜尋
  document.getElementById('searchInput').addEventListener('input', loadDomains);
  document.getElementById('categoryFilter').addEventListener('change', loadDomains);
  document.getElementById('searchBtn').addEventListener('click', loadDomains);

  // 重設
  document.getElementById('resetBtn').addEventListener('click', function() {
    document.getElementById('searchInput').value = '';
    document.getElementById('categoryFilter').value = 'all';
    loadDomains();
  });
});