/**
 * TradeMate Content Script
 * Displays translation results on the page via a floating tooltip.
 */

chrome.runtime.onMessage.addListener((request) => {
  if (request.action === 'showTranslation') {
    showTooltip(request.original, request.translated);
  }
});

function showTooltip(original, translated) {
  const existing = document.getElementById('trademate-tooltip');
  if (existing) existing.remove();

  const tooltip = document.createElement('div');
  tooltip.id = 'trademate-tooltip';
  tooltip.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    max-width: 400px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    animation: slideIn 0.3s ease;
  `;

  tooltip.innerHTML = `
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
      <strong style="color:#2563eb;">TradeMate 翻译</strong>
      <button id="trademate-close" style="
        background:none;border:none;font-size:18px;cursor:pointer;color:#999;padding:0 4px;
      ">&times;</button>
    </div>
    <div style="margin-bottom:8px;color:#666;font-size:13px;">${escapeHtml(original)}</div>
    <div style="color:#333;font-size:15px;font-weight:500;">${escapeHtml(translated)}</div>
  `;

  document.body.appendChild(tooltip);

  document.getElementById('trademate-close').onclick = () => tooltip.remove();

  // Auto-remove after 15 seconds
  setTimeout(() => { if (tooltip.parentNode) tooltip.remove(); }, 15000);

  // Add animation style
  if (!document.getElementById('trademate-style')) {
    const style = document.createElement('style');
    style.id = 'trademate-style';
    style.textContent = `
      @keyframes slideIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
      }
    `;
    document.head.appendChild(style);
  }
}

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}