content.js

// Inject Tailwind CSS via CDN
(function injectTailwind() {
  if (!document.getElementById('tailwindcss')) {
    const link = document.createElement('link');
    link.id = 'tailwindcss';
    link.rel = 'stylesheet';
    link.href = 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';
    document.head.appendChild(link);
  }
  // Inject custom print CSS to hide the button and status indicator
  if (!document.getElementById('edit-toggle-print-style')) {
    const style = document.createElement('style');
    style.id = 'edit-toggle-print-style';
    style.textContent = `
      @media print {
        #edit-toggle-btn, #edit-status-indicator { display: none !important; }
      }
      /* Disable interactive styles for links and buttons in edit mode */
      .edit-mode-disabled {
        pointer-events: none !important;
        cursor: default !important;
        text-decoration: none !important;
        color: inherit !important;
        background: none !important;
        border: none !important;
        outline: none !important;
      }
    `;
    document.head.appendChild(style);
  }
})();

// Wait for Tailwind to load
function onTailwindLoaded(cb) {
  const link = document.getElementById('tailwindcss');
  if (link.sheet) return cb();
  link.addEventListener('load', cb);
}

onTailwindLoaded(() => {
  // --- UI Elements ---
  const btn = document.createElement('button');
  btn.id = 'edit-toggle-btn';
  btn.type = 'button';
  btn.className = `fixed z-50 bottom-6 right-6 flex items-center justify-center w-14 h-14 rounded-full shadow-lg bg-white/80 backdrop-blur border border-gray-200 hover:scale-105 hover:shadow-2xl transition-all duration-200 outline-none focus:ring-2 focus:ring-blue-400 active:scale-95 select-none cursor-pointer group`;
  btn.style.userSelect = 'none';
  btn.style.webkitUserSelect = 'none';
  btn.style.MozUserSelect = 'none';
  btn.style.msUserSelect = 'none';
  btn.style.touchAction = 'none';
  btn.style.zIndex = '2147483647';
  btn.innerHTML = `
    <span class="sr-only">Toggle Edit Mode</span>
    <svg class="w-7 h-7 text-gray-700 group-hover:text-blue-500 transition" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 3.487a2.25 2.25 0 1 1 3.182 3.182L7.5 19.213l-4.182 1 1-4.182L16.862 3.487z"/></svg>
  `;

  // Status indicator
  const status = document.createElement('div');
  status.id = 'edit-status-indicator';
  status.className = 'fixed z-50 bottom-24 right-8 px-4 py-2 rounded-xl bg-gray-900/90 text-white text-sm font-medium shadow-lg opacity-0 pointer-events-none transition-all duration-500';
  status.style.transform = 'translateY(20px)';
  status.style.userSelect = 'none';
  status.style.zIndex = '2147483647';

  // Hide by default until activated by shortcut
  btn.style.display = 'none';
  status.style.display = 'none';

  document.body.appendChild(btn);
  document.body.appendChild(status);

  // --- State ---
  let editMode = false;
  let statusTimeout = null;
  let buttonHidden = true; // Hidden by default

  // Restore state
  try {
    const saved = localStorage.getItem('editModeToggle');
    if (saved === 'on') {
      setEditMode(true, false);
    }
  } catch {}

  // --- Functions ---
  function disableInteractiveElements(disable) {
    const elements = document.querySelectorAll('a, button:not(#edit-toggle-btn)');
    elements.forEach(el => {
      if (disable) {
        el.classList.add('edit-mode-disabled');
        el.setAttribute('data-original-tabindex', el.getAttribute('tabindex') || '0');
        el.setAttribute('tabindex', '-1');
        el.dataset.originalHref = el.href || '';
        el.href = 'javascript:void(0)';
        el.dataset.originalOnclick = el.onclick || '';
        el.onclick = null;
      } else {
        el.classList.remove('edit-mode-disabled');
        const originalTabindex = el.getAttribute('data-original-tabindex');
        if (originalTabindex !== null) {
          el.setAttribute('tabindex', originalTabindex);
          el.removeAttribute('data-original-tabindex');
        } else {
          el.removeAttribute('tabindex');
        }
        if (el.dataset.originalHref) {
          el.href = el.dataset.originalHref;
          delete el.dataset.originalHref;
        }
        if (el.dataset.originalOnclick) {
          el.onclick = el.dataset.originalOnclick;
          delete el.dataset.originalOnclick;
        } else {
          el.onclick = null;
        }
      }
    });
  }

  function setEditMode(on, showStatus = true) {
    editMode = on;
    document.body.contentEditable = on ? 'true' : 'false';
    document.designMode = on ? 'on' : 'off';
    btn.classList.toggle('ring-2', on);
    btn.classList.toggle('ring-blue-400', on);
    btn.classList.toggle('bg-blue-50', on);
    btn.classList.toggle('bg-white/80', !on);
    btn.querySelector('svg').classList.toggle('text-blue-500', on);
    btn.querySelector('svg').classList.toggle('text-gray-700', !on);
    if (!buttonHidden) disableInteractiveElements(on); // Only disable if button is visible
    try {
      localStorage.setItem('editModeToggle', on ? 'on' : 'off');
    } catch {}
    if (showStatus) showStatusIndicator(on);
  }

  function showStatusIndicator(on, customText) {
    status.textContent = customText || `Edit Mode: ${on ? 'ON' : 'OFF'}`;
    status.classList.remove('opacity-0');
    status.classList.add('opacity-100');
    status.style.transform = 'translateY(0)';
    status.animate([
      { opacity: 0, transform: 'translateY(20px)' },
      { opacity: 1, transform: 'translateY(0)' }
    ], { duration: 300, fill: 'forwards' });
    clearTimeout(statusTimeout);
    statusTimeout = setTimeout(() => {
      status.classList.remove('opacity-100');
      status.classList.add('opacity-0');
      status.style.transform = 'translateY(20px)';
    }, 1200);
  }

  // --- Toggle Handler ---
  btn.addEventListener('click', () => {
    setEditMode(!editMode);
  });

  // --- Keyboard Shortcut: Ctrl+Shift+E to hide/show button ---
  document.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.shiftKey && e.code === 'KeyE') {
      buttonHidden = !buttonHidden;
      btn.style.display = buttonHidden ? 'none' : 'flex';
      status.style.display = buttonHidden ? 'none' : '';
      if (buttonHidden) {
        // Restore interactivity of links and buttons when hiding
        disableInteractiveElements(false);
        // Show a temporary overlay in the center
        const temp = document.createElement('div');
        temp.textContent = 'Button Hidden';
        temp.className = 'fixed z-50 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 px-6 py-3 rounded-xl bg-gray-900/90 text-white text-lg font-semibold shadow-lg opacity-0 pointer-events-none transition-all duration-500';
        document.body.appendChild(temp);
        setTimeout(() => {
          temp.classList.remove('opacity-0');
          temp.classList.add('opacity-100');
        }, 10);
        setTimeout(() => {
          temp.classList.remove('opacity-100');
          temp.classList.add('opacity-0');
          setTimeout(() => temp.remove(), 500);
        }, 1200);
      } else {
        // Reapply edit mode state when showing button
        disableInteractiveElements(editMode);
        showStatusIndicator(editMode, 'Button Shown');
      }
    }
  });

  // --- Drag to Move ---
  let drag = false, offsetX = 0, offsetY = 0;
  btn.addEventListener('mousedown', (e) => {
    drag = true;
    offsetX = e.clientX - btn.getBoundingClientRect().left;
    offsetY = e.clientY - btn.getBoundingClientRect().top;
    btn.style.transition = 'none';
    document.body.style.userSelect = 'none';
  });
  document.addEventListener('mousemove', (e) => {
    if (!drag) return;
    btn.style.left = 'unset';
    btn.style.top = 'unset';
    btn.style.right = 'auto';
    btn.style.bottom = 'auto';
    btn.style.position = 'fixed';
    btn.style.left = (e.clientX - offsetX) + 'px';
    btn.style.top = (e.clientY - offsetY) + 'px';
  });
  document.addEventListener('mouseup', () => {
    if (drag) {
      drag = false;
      btn.style.transition = '';
      document.body.style.userSelect = '';
    }
  });

  // Touch support
  btn.addEventListener('touchstart', (e) => {
    drag = true;
    const touch = e.touches[0];
    offsetX = touch.clientX - btn.getBoundingClientRect().left;
    offsetY = touch.clientY - btn.getBoundingClientRect().top;
    btn.style.transition = 'none';
    document.body.style.userSelect = 'none';
  });
  document.addEventListener('touchmove', (e) => {
    if (!drag) return;
    const touch = e.touches[0];
    btn.style.left = 'unset';
    btn.style.top = 'unset';
    btn.style.right = 'auto';
    btn.style.bottom = 'auto';
    btn.style.position = 'fixed';
    btn.style.left = (touch.clientX - offsetX) + 'px';
    btn.style.top = (touch.clientY - offsetY) + 'px';
  });
  document.addEventListener('touchend', () => {
    if (drag) {
      drag = false;
      btn.style.transition = '';
      document.body.style.userSelect = '';
    }
  });
});