/**
 * Content Script - Chạy trên mọi web page
 * Nhiệm vụ: Detect text selection → Space key → Auto save → Toast notification
 */

let selectedText = '';
let selectedUrl = '';
let selectedTitle = '';

// Listen khi user bôi đen text
document.addEventListener('mouseup', handleTextSelection);
document.addEventListener('keydown', async (e) => {
  // Nếu nhấn Space hoặc Enter sau khi đã bôi đen text → tự động lưu ngay
  if ((e.key === ' ' || e.key === 'Enter') && selectedText.length > 0) {
    // Chỉ prevent default nếu không phải trong input/textarea
    const target = e.target as HTMLElement;
    if (!target || (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA' && !target.isContentEditable)) {
      e.preventDefault();
      e.stopPropagation();
      await handleAutoSave();
      return;
    }
  }
});
document.addEventListener('keyup', handleTextSelection);

function handleTextSelection() {
  try {
    // Delay một chút để đảm bảo selection đã hoàn tất
    setTimeout(() => {
      const selection = window.getSelection();
      
      if (!selection || selection.rangeCount === 0) {
        selectedText = '';
        removeQuickHint();
        return;
      }

      const text = selection.toString().trim();
      
      if (text.length === 0) {
        selectedText = '';
        removeQuickHint();
        return;
      }

      // Lưu text đã chọn + metadata
      selectedText = text;
      selectedUrl = window.location.href;
      selectedTitle = document.title;
      
      // Hiện hint nhỏ để user biết có thể nhấn Space/Enter
      showQuickHint();
    }, 50);
  } catch (error) {
    console.error('[CuCu Note] Error in handleTextSelection:', error);
  }
}

async function handleAutoSave() {
  if (!selectedText) return;
  
  try {
    // Show loading toast
    showToast('Đang lưu...', 'loading');
    
    // Gửi message đến background để save
    chrome.runtime.sendMessage({
      type: 'SAVE_NOTE',
      data: {
        text: selectedText,
        url: selectedUrl,
        title: selectedTitle,
      },
    }, (response) => {
      if (chrome.runtime.lastError) {
        showToast('❌ Lỗi khi lưu note', 'error');
        return;
      }
      
      if (response?.success) {
        showToast('✅ Đã lưu vào CuCu Note!', 'success');
        // Clear selection
        window.getSelection()?.removeAllRanges();
        selectedText = '';
        removeQuickHint();
      } else {
        showToast('❌ Lỗi khi lưu note', 'error');
      }
    });
  } catch (error) {
    console.error('[CuCu Note] Error saving:', error);
    showToast('❌ Lỗi khi lưu note', 'error');
  }
}

function showQuickHint() {
  // Hiện hint nhỏ "Nhấn Space để lưu" với gradient đẹp
  removeQuickHint();
  
  const hint = document.createElement('div');
  hint.id = 'cucu-quick-hint';
  hint.textContent = '💡 Nhấn Space hoặc Enter để lưu nhanh';
  
  // Gradient màu đẹp
  hint.style.cssText = `
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: cucuSlideUp 0.3s ease-out;
    pointer-events: none;
  `;
  
  // Inject animation CSS
  if (!document.getElementById('cucu-hint-style')) {
    const style = document.createElement('style');
    style.id = 'cucu-hint-style';
    style.textContent = `
      @keyframes cucuSlideUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    `;
    document.head.appendChild(style);
  }
  
  try {
    document.body.appendChild(hint);
  } catch (e) {
    document.documentElement.appendChild(hint);
  }
  
  // Auto ẩn sau 3 giây
  setTimeout(() => {
    removeQuickHint();
  }, 3000);
}

function removeQuickHint() {
  const hint = document.getElementById('cucu-quick-hint');
  if (hint) {
    try {
      hint.remove();
    } catch (e) {
      // Ignore
    }
  }
}

function showToast(message: string, type: 'success' | 'error' | 'loading' = 'success') {
  // Remove toast cũ nếu có
  const oldToast = document.getElementById('cucu-toast');
  if (oldToast) {
    try {
      oldToast.remove();
    } catch (e) {
      // Ignore
    }
  }
  
  const toast = document.createElement('div');
  toast.id = 'cucu-toast';
  toast.textContent = message;
  
  // Màu sắc đẹp theo type (gradient)
  const colors = {
    success: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
    error: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
    loading: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
  };
  
  toast.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: ${colors[type]};
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    animation: cucuToastSlide 0.4s ease-out;
    max-width: 350px;
    word-wrap: break-word;
  `;
  
  // Inject animation CSS
  if (!document.getElementById('cucu-toast-style')) {
    const style = document.createElement('style');
    style.id = 'cucu-toast-style';
    style.textContent = `
      @keyframes cucuToastSlide {
        from {
          opacity: 0;
          transform: translateX(100%);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
    `;
    try {
      document.head.appendChild(style);
    } catch (e) {
      // Ignore
    }
  }
  
  try {
    document.body.appendChild(toast);
  } catch (e) {
    try {
      document.documentElement.appendChild(toast);
    } catch (e2) {
      console.error('[CuCu Note] Cannot append toast:', e2);
      return;
    }
  }
  
  // Auto ẩn sau 3 giây (trừ loading)
  if (type !== 'loading') {
    setTimeout(() => {
      if (toast.parentNode) {
        toast.style.animation = 'cucuToastSlide 0.3s ease-out reverse';
        setTimeout(() => {
          try {
            toast.remove();
          } catch (e) {
            // Ignore
          }
        }, 300);
      }
    }, 3000);
  }
}
