content.js

(() => {
  'use strict';

  let popup = null;
  let selectedHTML = '';
  let selectedText = '';

  // --- SVG Icons ---
  const ICONS = {
    plainText: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`,
    markdown: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h20v18H2z"/><path d="M7 8v8l3-3 3 3V8"/><path d="M17 12h-2l2-4 2 4h-2v4"/></svg>`,
    html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
    withSource: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`,
    logo: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#7C3AED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`,
    check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
  };

  // --- HTML to Markdown converter ---
  function htmlToMarkdown(html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    return convertNode(doc.body).trim();
  }

  function convertNode(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      return node.textContent;
    }
    if (node.nodeType !== Node.ELEMENT_NODE) return '';

    const tag = node.tagName.toLowerCase();
    const children = Array.from(node.childNodes).map(convertNode).join('');

    switch (tag) {
      case 'h1': return `\n# ${children.trim()}\n\n`;
      case 'h2': return `\n## ${children.trim()}\n\n`;
      case 'h3': return `\n### ${children.trim()}\n\n`;
      case 'h4': return `\n#### ${children.trim()}\n\n`;
      case 'h5': return `\n##### ${children.trim()}\n\n`;
      case 'h6': return `\n###### ${children.trim()}\n\n`;
      case 'strong':
      case 'b':
        return `**${children.trim()}**`;
      case 'em':
      case 'i':
        return `*${children.trim()}*`;
      case 'a': {
        const href = node.getAttribute('href') || '';
        return `[${children.trim()}](${href})`;
      }
      case 'img': {
        const src = node.getAttribute('src') || '';
        const alt = node.getAttribute('alt') || '';
        return `![${alt}](${src})`;
      }
      case 'code':
        if (node.parentElement && node.parentElement.tagName.toLowerCase() === 'pre') {
          return children;
        }
        return `\`${children}\``;
      case 'pre': {
        const codeEl = node.querySelector('code');
        const content = codeEl ? codeEl.textContent : children;
        return `\n\`\`\`\n${content.trim()}\n\`\`\`\n\n`;
      }
      case 'ul': {
        const items = Array.from(node.children)
          .filter(c => c.tagName.toLowerCase() === 'li')
          .map(li => `- ${convertNode(li).trim()}`)
          .join('\n');
        return `\n${items}\n\n`;
      }
      case 'ol': {
        const items = Array.from(node.children)
          .filter(c => c.tagName.toLowerCase() === 'li')
          .map((li, i) => `${i + 1}. ${convertNode(li).trim()}`)
          .join('\n');
        return `\n${items}\n\n`;
      }
      case 'li':
        return children;
      case 'br':
        return '\n';
      case 'p':
        return `\n${children.trim()}\n\n`;
      case 'blockquote':
        return `\n> ${children.trim().replace(/\n/g, '\n> ')}\n\n`;
      case 'table': return convertTable(node);
      case 'hr': return '\n---\n\n';
      case 'div':
      case 'span':
      case 'section':
      case 'article':
      case 'main':
      case 'header':
      case 'footer':
      case 'nav':
      case 'body':
        return children;
      default:
        return children;
    }
  }

  function convertTable(table) {
    const rows = Array.from(table.querySelectorAll('tr'));
    if (rows.length === 0) return '';

    const matrix = rows.map(row =>
      Array.from(row.querySelectorAll('th, td')).map(cell => convertNode(cell).trim())
    );

    const colCount = Math.max(...matrix.map(r => r.length));
    const normalized = matrix.map(r => {
      while (r.length < colCount) r.push('');
      return r;
    });

    let md = '\n';
    md += '| ' + normalized[0].join(' | ') + ' |\n';
    md += '| ' + normalized[0].map(() => '---').join(' | ') + ' |\n';
    for (let i = 1; i < normalized.length; i++) {
      md += '| ' + normalized[i].join(' | ') + ' |\n';
    }
    return md + '\n';
  }

  // --- Clean HTML ---
  function cleanHTML(html) {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    // Remove scripts, styles, and event attributes
    doc.querySelectorAll('script, style, link').forEach(el => el.remove());
    doc.querySelectorAll('*').forEach(el => {
      const attrs = Array.from(el.attributes);
      attrs.forEach(attr => {
        if (attr.name.startsWith('on') || attr.name === 'class' || attr.name === 'id' || attr.name === 'style') {
          el.removeAttribute(attr.name);
        }
      });
    });
    return doc.body.innerHTML.trim();
  }

  // --- Format "With Source" ---
  function formatWithSource(text) {
    const now = new Date();
    const day = String(now.getDate()).padStart(2, '0');
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const year = now.getFullYear();
    const title = document.title || 'Sans titre';
    const url = window.location.href;
    return `${text}\n\n— Copié depuis [${title}](${url}) le ${day}/${month}/${year}`;
  }

  // --- Copy to clipboard ---
  async function copyToClipboard(text) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch {
      // Fallback
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
      return true;
    }
  }

  // --- Get selection position ---
  function getSelectionPosition() {
    const selection = window.getSelection();
    if (!selection.rangeCount) return null;
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    return {
      x: rect.left + rect.width / 2,
      y: rect.top,
      bottom: rect.bottom,
      width: rect.width
    };
  }

  // --- Get selected HTML ---
  function getSelectedHTML() {
    const selection = window.getSelection();
    if (!selection.rangeCount) return '';
    const range = selection.getRangeAt(0);
    const container = document.createElement('div');
    container.appendChild(range.cloneContents());
    return container.innerHTML;
  }

  // --- Create popup ---
  function createPopup(pos) {
    removePopup();

    popup = document.createElement('div');
    popup.id = 'copybetter-popup';

    const header = document.createElement('div');
    header.className = 'copybetter-header';
    header.innerHTML = `${ICONS.logo}<span>Copy as</span>`;
    popup.appendChild(header);

    const formats = [
      { id: 'plain', icon: ICONS.plainText, title: 'Plain Text', desc: 'Clean plain text' },
      { id: 'markdown', icon: ICONS.markdown, title: 'Markdown', desc: 'Links, lists, formatting' },
      { id: 'html', icon: ICONS.html, title: 'HTML', desc: 'Source code' },
      { id: 'source', icon: ICONS.withSource, title: 'With Source', desc: 'Text + page URL & date' }
    ];

    formats.forEach(fmt => {
      const btn = document.createElement('button');
      btn.className = 'copybetter-btn';
      btn.dataset.format = fmt.id;
      btn.innerHTML = `
        <span class="copybetter-icon">${fmt.icon}</span>
        <span class="copybetter-label">
          <span class="copybetter-label-title">${fmt.title}</span>
          <span class="copybetter-label-desc">${fmt.desc}</span>
        </span>
      `;
      btn.addEventListener('mousedown', (e) => {
        e.preventDefault();
        e.stopPropagation();
      });
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        handleFormatClick(fmt.id, btn);
      });
      popup.appendChild(btn);
    });

    // Position popup
    const popupWidth = 280;
    let left = pos.x - popupWidth / 2;
    let top = pos.y - 10; // above selection

    // Adjust horizontal bounds
    if (left < 8) left = 8;
    if (left + popupWidth > window.innerWidth - 8) {
      left = window.innerWidth - popupWidth - 8;
    }

    // Will measure after adding to DOM
    popup.style.left = `${left + window.scrollX}px`;
    popup.style.top = '0px';
    popup.style.visibility = 'hidden';
    document.body.appendChild(popup);

    const popupHeight = popup.offsetHeight;

    // Try above selection, if not enough space, go below
    if (pos.y - popupHeight - 10 > 0) {
      top = pos.y - popupHeight - 10;
    } else {
      top = pos.bottom + 10;
    }

    popup.style.top = `${top + window.scrollY}px`;
    popup.style.visibility = 'visible';

    // Close when clicking outside
    setTimeout(() => {
      document.addEventListener('mousedown', onOutsideClick);
    }, 10);
  }

  function onOutsideClick(e) {
    if (popup && !popup.contains(e.target)) {
      removePopup();
    }
  }

  function removePopup() {
    if (popup) {
      popup.remove();
      popup = null;
    }
    document.removeEventListener('mousedown', onOutsideClick);
  }

  // --- Handle format button click ---
  async function handleFormatClick(formatId, btn) {
    let textToCopy = '';

    switch (formatId) {
      case 'plain':
        textToCopy = selectedText;
        break;
      case 'markdown':
        textToCopy = htmlToMarkdown(selectedHTML);
        break;
      case 'html':
        textToCopy = cleanHTML(selectedHTML);
        break;
      case 'source':
        textToCopy = formatWithSource(selectedText);
        break;
    }

    await copyToClipboard(textToCopy);

    // Increment counter
    chrome.storage.local.get({ copyCount: 0 }, (data) => {
      chrome.storage.local.set({ copyCount: data.copyCount + 1 });
    });

    // Visual feedback
    btn.classList.add('copybetter-active');
    const titleEl = btn.querySelector('.copybetter-label-title');
    const origTitle = titleEl.textContent;
    titleEl.textContent = 'Copied ✓';

    setTimeout(() => {
      removePopup();
    }, 600);
  }

  // --- Apply default format directly ---
  async function applyDefaultFormat(format) {
    let textToCopy = '';

    switch (format) {
      case 'plain':
        textToCopy = selectedText;
        break;
      case 'markdown':
        textToCopy = htmlToMarkdown(selectedHTML);
        break;
      case 'html':
        textToCopy = cleanHTML(selectedHTML);
        break;
      case 'source':
        textToCopy = formatWithSource(selectedText);
        break;
    }

    // Small delay to let the native copy happen first, then overwrite
    setTimeout(async () => {
      await copyToClipboard(textToCopy);
      chrome.storage.local.get({ copyCount: 0 }, (data) => {
        chrome.storage.local.set({ copyCount: data.copyCount + 1 });
      });
    }, 10);
  }

  // --- Listen for copy event ---
  document.addEventListener('copy', (e) => {
    const selection = window.getSelection();
    if (!selection || selection.isCollapsed) return;

    selectedText = selection.toString().trim();
    selectedHTML = getSelectedHTML();

    if (!selectedText) return;

    // Check settings
    chrome.storage.local.get({ enabled: true, defaultFormat: 'ask' }, (data) => {
      if (!data.enabled) return;

      if (data.defaultFormat !== 'ask') {
        // Apply default format silently
        applyDefaultFormat(data.defaultFormat);
      } else {
        // Show popup
        const pos = getSelectionPosition();
        if (pos) {
          createPopup(pos);
        }
      }
    });
  });

  // Close popup on Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && popup) {
      removePopup();
    }
  });
})();