aiChatHelper.js

// AI Chat Helper - Injects Copus taste profile button into AI chatboxes
// Only activates when user is logged into Copus extension

const AI_PLATFORMS = {
  chatgpt: {
    hostnames: ['chat.openai.com', 'chatgpt.com'],
    textareaSelector: '#prompt-textarea',
    anchorButtonSelector: 'button[data-testid="send-button"], button[aria-label="Send prompt"], button[aria-label*="Send"]',
    anchorPosition: 'right',
    proximityFallback: false,
  },
  claude: {
    hostnames: ['claude.ai'],
    textareaSelector: 'div.ProseMirror[contenteditable="true"]',
    anchorButtonSelector: 'button[aria-label="Send Message"], button[aria-label*="Send"], button[data-testid="send-button"]',
    anchorPosition: 'right',
    proximityFallback: false,
  },
  perplexity: {
    hostnames: ['perplexity.ai', 'www.perplexity.ai'],
    textareaSelector: 'textarea[placeholder*="Ask"], textarea, div[contenteditable="true"], div[role="textbox"]',
    anchorButtonSelector: 'button[aria-label="Submit"], button[aria-label="Send"], form button[type="submit"]',
    anchorPosition: 'right',
  },
  deepseek: {
    hostnames: ['chat.deepseek.com'],
    textareaSelector: 'textarea#chat-input, textarea',
    anchorButtonSelector: 'button[aria-label*="send" i], div[id*="input" i] button:last-of-type, div[class*="input" i] button:last-of-type',
    anchorPosition: 'right',
  },
  gemini: {
    hostnames: ['gemini.google.com'],
    textareaSelector: 'rich-textarea .ql-editor, div[contenteditable="true"]',
    anchorButtonSelector: 'button[aria-label*="Send" i], .send-button',
    anchorPosition: 'right',
  },
  grok: {
    hostnames: ['grok.com'],
    textareaSelector: 'div[contenteditable="true"], textarea[aria-label="Ask Grok anything"], textarea[placeholder="Ask anything"]',
    anchorButtonSelector: 'button[aria-label="Submit"], button[aria-label="Send message"], button[data-testid="send-button"]',
    anchorPosition: 'right',
  },
  mistral: {
    hostnames: ['chat.mistral.ai'],
    textareaSelector: 'div.ProseMirror[contenteditable="true"], textarea[placeholder="Ask Le Chat anything"], textarea',
    anchorButtonSelector: 'button[type="submit"], button.bg-state-primary',
    anchorPosition: 'right',
  },
  huggingchat: {
    hostnames: ['huggingface.co'],
    textareaSelector: 'textarea',
    anchorButtonSelector: 'button[type="submit"][aria-label="Send message"], button[type="submit"]',
    anchorPosition: 'right',
  }
};

const COPUS_BUTTON_ID = 'copus-taste-profile-btn';
const COPUS_BUTTON_STYLES_ID = 'copus-taste-profile-styles';
const COPUS_MENU_ID = 'copus-taste-profile-menu';
const COPUS_RESTORE_PILL_ID = 'copus-restore-pill';
const MIN_CURATIONS_THRESHOLD = 10;

let currentPlatform = null;
let userNamespace = null; // Cached namespace
let userUuid = null; // Cached user uuid for private taste URL
let userCurationCount = null; // Cached curation count from taste profile
let injectionAttempts = 0;
const MAX_INJECTION_ATTEMPTS = 30; // 15 seconds with 500ms intervals
let hiddenForSession = false; // Hide until page refresh
let isHiding = false; // Flag to prevent race conditions during hide
let isInjecting = false; // Flag to prevent concurrent injections

// Check if button is hidden for current site
async function isHiddenForSite() {
  return new Promise((resolve) => {
    try {
      const hostname = window.location.hostname;
      chrome.storage.local.get(['copus_hidden_sites'], (result) => {
        if (chrome.runtime.lastError) {
          resolve(false);
          return;
        }
        const hiddenSites = result.copus_hidden_sites || [];
        resolve(hiddenSites.includes(hostname));
      });
    } catch (e) {
      resolve(false);
    }
  });
}

// Hide button for current site (persistent)
async function hideForSite() {
  isHiding = true; // Prevent mutation observer from re-injecting
  const hostname = window.location.hostname;
  try {
    chrome.storage.local.get(['copus_hidden_sites'], (result) => {
      const hiddenSites = result.copus_hidden_sites || [];
      if (!hiddenSites.includes(hostname)) {
        hiddenSites.push(hostname);
        chrome.storage.local.set({ copus_hidden_sites: hiddenSites });
      }
    });
  } catch (e) {
    console.warn('[Copus AI Helper] Could not save hidden site:', e);
  }
  removeButton();
  showRestorePill();
  // Keep isHiding true - site is persistently hidden
}

// Show button for current site (remove from hidden list)
async function showForSite() {
  isHiding = false;
  const hostname = window.location.hostname;
  try {
    chrome.storage.local.get(['copus_hidden_sites'], (result) => {
      const hiddenSites = result.copus_hidden_sites || [];
      const index = hiddenSites.indexOf(hostname);
      if (index > -1) {
        hiddenSites.splice(index, 1);
        chrome.storage.local.set({ copus_hidden_sites: hiddenSites });
      }
    });
  } catch (e) {
    console.warn('[Copus AI Helper] Could not update hidden sites:', e);
  }
  hiddenForSession = false;
  hideRestorePill();
  injectionAttempts = 0;
  injectButton();
}

// Hide button for this session only
function hideForSession() {
  isHiding = true; // Prevent mutation observer from re-injecting
  hiddenForSession = true;
  removeButton();
  showRestorePill();
}

// Remove button and menu from DOM
function removeButton() {
  const button = document.getElementById(COPUS_BUTTON_ID);
  const tooltip = document.getElementById(COPUS_BUTTON_ID + '-tooltip');
  const menu = document.getElementById(COPUS_MENU_ID);
  if (button) button.remove();
  if (tooltip) tooltip.remove();
  if (menu) menu.remove();
}

// Create and show the restore pill
let pillFadeTimeout = null;
let pillHideTimeout = null;

function showRestorePill() {
  // Remove existing pill if any
  const existingPill = document.getElementById(COPUS_RESTORE_PILL_ID);
  if (existingPill) existingPill.remove();

  const pill = document.createElement('div');
  pill.id = COPUS_RESTORE_PILL_ID;
  // Taste profile icon - full size
  const iconUrl = chrome.runtime.getURL('taste-icon.png');
  pill.innerHTML = `<div style="width: 28px; height: 28px; border-radius: 50%; overflow: hidden;">
    <img src="${iconUrl}" style="width: 100%; height: 100%; object-fit: cover;" />
  </div>`;

  // Click to restore button
  pill.addEventListener('click', async () => {
    hideRestorePill();
    hiddenForSession = false;
    await showForSite();
  });

  // Hover resets fade timers
  pill.addEventListener('mouseenter', () => {
    if (pillFadeTimeout) clearTimeout(pillFadeTimeout);
    if (pillHideTimeout) clearTimeout(pillHideTimeout);
    pill.classList.remove('copus-pill-fading', 'copus-pill-hidden');
  });

  pill.addEventListener('mouseleave', () => {
    startPillFade(pill);
  });

  document.body.appendChild(pill);

  // Start fade after 5 seconds
  startPillFade(pill);
}

function startPillFade(pill) {
  // Clear existing timers
  if (pillFadeTimeout) clearTimeout(pillFadeTimeout);
  if (pillHideTimeout) clearTimeout(pillHideTimeout);

  // Fade to subtle after 4 seconds
  pillFadeTimeout = setTimeout(() => {
    pill.classList.add('copus-pill-fading');
  }, 4000);

  // Hide completely after 8 seconds
  pillHideTimeout = setTimeout(() => {
    pill.classList.add('copus-pill-hidden');
  }, 8000);
}

function hideRestorePill() {
  const pill = document.getElementById(COPUS_RESTORE_PILL_ID);
  if (pill) pill.remove();
  if (pillFadeTimeout) clearTimeout(pillFadeTimeout);
  if (pillHideTimeout) clearTimeout(pillHideTimeout);
}

// Re-show pill when page regains focus (if button is hidden)
function setupPillFocusListener() {
  window.addEventListener('focus', async () => {
    // Only show pill if button is actually hidden
    const button = document.getElementById(COPUS_BUTTON_ID);
    if (button) return; // Button exists, no need for pill

    const siteHidden = await isHiddenForSite();
    if (hiddenForSession || siteHidden) {
      const existingPill = document.getElementById(COPUS_RESTORE_PILL_ID);
      if (existingPill) {
        // Reset fade state
        existingPill.classList.remove('copus-pill-fading', 'copus-pill-hidden');
        startPillFade(existingPill);
      } else {
        showRestorePill();
      }
    }
  });
}

// Detect which AI platform we're on
function detectPlatform() {
  const hostname = window.location.hostname;
  for (const [name, config] of Object.entries(AI_PLATFORMS)) {
    if (config.hostnames.some(h => hostname.includes(h))) {
      return { name, config };
    }
  }
  return null;
}

// Get the logged-in user's namespace and uuid from extension storage
async function getUserNamespace() {
  return new Promise((resolve) => {
    try {
      chrome.storage.local.get(['copus_token', 'copus_user'], (result) => {
        if (chrome.runtime.lastError) {
          console.warn('[Copus AI Helper] Storage error:', chrome.runtime.lastError);
          resolve(null);
          return;
        }
        // Must have both token and user to be considered logged in
        if (result.copus_token && result.copus_user && result.copus_user.namespace) {
          // Also cache uuid if available in stored user data
          if (result.copus_user.uuid) {
            userUuid = result.copus_user.uuid;
          }
          resolve(result.copus_user.namespace);
        } else {
          resolve(null);
        }
      });
    } catch (e) {
      console.warn('[Copus AI Helper] Failed to access storage:', e);
      resolve(null);
    }
  });
}

// Validate the token and fetch public article count + uuid from user info API
// Returns { valid: boolean, publicArticleCount: number | null, uuid: string | null }
async function validateToken(namespace) {
  return new Promise((resolve) => {
    try {
      chrome.storage.local.get(['copus_token'], async (result) => {
        if (chrome.runtime.lastError || !result.copus_token) {
          resolve({ valid: false, publicArticleCount: null, uuid: null });
          return;
        }
        try {
          const response = await fetch(`https://api-prod.copus.network/client/userHome/userInfo?namespace=${encodeURIComponent(namespace)}`, {
            headers: { 'Authorization': `Bearer ${result.copus_token}` }
          });
          if (response.ok) {
            const data = await response.json();
            const count = data?.data?.statistics?.publicArticleCount ?? null;
            const uuid = data?.data?.uuid ?? null;
            // Persist uuid in copus_user storage for future use
            if (uuid) {
              chrome.storage.local.get(['copus_user'], (r) => {
                if (r.copus_user && !r.copus_user.uuid) {
                  chrome.storage.local.set({ copus_user: { ...r.copus_user, uuid } });
                }
              });
            }
            resolve({ valid: true, publicArticleCount: count, uuid });
          } else if (response.status === 401 || response.status === 403) {
            resolve({ valid: false, publicArticleCount: null, uuid: null });
          } else {
            console.warn('[Copus AI Helper] Token check got status', response.status, '— assuming valid');
            resolve({ valid: true, publicArticleCount: null, uuid: null });
          }
        } catch (e) {
          console.warn('[Copus AI Helper] Token validation error:', e, '— assuming valid');
          resolve({ valid: true, publicArticleCount: null, uuid: null });
        }
      });
    } catch (e) {
      resolve({ valid: true, publicArticleCount: null, uuid: null }); // Can't check — don't block
    }
  });
}

// Check if user is logged into Copus
async function isUserLoggedIn() {
  return new Promise((resolve) => {
    // Timeout after 3 seconds to prevent hanging
    const timeout = setTimeout(() => {
      console.warn('[Copus AI Helper] Storage check timed out');
      resolve(false);
    }, 3000);

    try {
      chrome.storage.local.get(['copus_token', 'copus_user'], (result) => {
        clearTimeout(timeout);
        if (chrome.runtime.lastError) {
          console.warn('[Copus AI Helper] Storage error:', chrome.runtime.lastError);
          resolve(false);
          return;
        }
        resolve(!!result.copus_token);
      });
    } catch (e) {
      clearTimeout(timeout);
      console.warn('[Copus AI Helper] Failed to access storage:', e);
      resolve(false);
    }
  });
}

// Find the chatbox element
function findChatbox() {
  const selectors = currentPlatform.config.textareaSelector.split(', ');
  for (const selector of selectors) {
    const elements = document.querySelectorAll(selector);
    for (const element of elements) {
      if (isElementVisible(element)) {
        return element;
      }
    }
  }
  return null;
}

// Find the anchor button (send button for all platforms)
// First tries platform-specific selectors, then falls back to proximity-based search
function findAnchorButton(chatbox) {
  const chatboxRect = chatbox ? chatbox.getBoundingClientRect() : null;

  // Try platform-specific selectors
  const useProximityCheck = currentPlatform.config.proximityFallback !== false;
  const selectors = currentPlatform.config.anchorButtonSelector.split(', ');
  for (const selector of selectors) {
    try {
      const elements = document.querySelectorAll(selector);
      for (const element of elements) {
        if (!isElementVisible(element)) continue;
        // For platforms with unreliable selectors, validate proximity to chatbox
        if (useProximityCheck && chatboxRect) {
          const rect = element.getBoundingClientRect();
          const vertDist = Math.abs(rect.bottom - chatboxRect.bottom);
          if (vertDist > 150) continue;
        }
        return element;
      }
    } catch (e) {
      continue;
    }
  }

  // Fallback: find the nearest small button to the right of the chatbox
  // Only for platforms without reliable selectors
  if (chatboxRect && currentPlatform.config.proximityFallback !== false) {
    return findNearbyButton(chatboxRect);
  }

  return null;
}

// Proximity-based fallback: find a likely send/submit button near the chatbox
function findNearbyButton(chatboxRect) {
  // Search all buttons on the page
  const buttons = document.querySelectorAll('button');
  let bestButton = null;
  let bestScore = Infinity;

  for (const btn of buttons) {
    if (btn.id === COPUS_BUTTON_ID) continue;
    if (!isElementVisible(btn)) continue;

    const rect = btn.getBoundingClientRect();
    if (rect.width === 0 || rect.height === 0) continue;

    // Must be a small-ish button (icon button, not a large text button)
    if (rect.width > 70 || rect.height > 70) continue;

    // Must be to the right half of the chatbox area
    if (rect.left < chatboxRect.left + chatboxRect.width * 0.5) continue;

    // Must be vertically close to the chatbox bottom (within 120px)
    const vertDist = Math.abs(rect.bottom - chatboxRect.bottom);
    if (vertDist > 120) continue;

    // Score: prefer buttons closest to the bottom-right of the chatbox
    const horizDist = Math.abs(rect.right - chatboxRect.right);
    const score = horizDist + vertDist * 2;

    if (score < bestScore) {
      bestScore = score;
      bestButton = btn;
    }
  }

  return bestButton;
}

// Check if element is visible
function isElementVisible(element) {
  if (!element) return false;
  const rect = element.getBoundingClientRect();
  if (rect.width === 0 || rect.height === 0) return false;
  const style = window.getComputedStyle(element);
  return style.display !== 'none' &&
         style.visibility !== 'hidden' &&
         style.opacity !== '0';
}

// Inject the Copus button styles
function injectStyles() {
  if (document.getElementById(COPUS_BUTTON_STYLES_ID)) return;

  const style = document.createElement('style');
  style.id = COPUS_BUTTON_STYLES_ID;
  style.textContent = `
    #${COPUS_BUTTON_ID} {
      position: fixed !important;
      z-index: 2147483647 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 32px !important;
      height: 32px !important;
      border-radius: 50% !important;
      background: transparent !important;
      border: 1px solid #F23A00 !important;
      cursor: pointer !important;
      box-shadow: none !important;
      transition: all 0.2s ease !important;
      padding: 0 !important;
      margin: 0 !important;
      outline: none !important;
      overflow: hidden !important;
    }

    #${COPUS_BUTTON_ID}:hover {
      transform: scale(1.1) !important;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2) !important;
    }

    #${COPUS_BUTTON_ID}:active {
      transform: scale(0.95) !important;
    }

    #${COPUS_BUTTON_ID} svg {
      width: 32px !important;
      height: 32px !important;
      pointer-events: none !important;
    }

    #${COPUS_BUTTON_ID}-tooltip {
      position: fixed !important;
      z-index: 2147483647 !important;
      background: #333 !important;
      color: white !important;
      padding: 8px 12px !important;
      border-radius: 8px !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
      pointer-events: none !important;
      opacity: 0 !important;
      transition: opacity 0.2s ease !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    #${COPUS_BUTTON_ID}-tooltip.visible {
      opacity: 1 !important;
    }

    #${COPUS_BUTTON_ID}.copus-not-logged-in {
      opacity: 0.5 !important;
      filter: grayscale(100%) !important;
    }

    #${COPUS_BUTTON_ID}.copus-not-logged-in:hover {
      opacity: 0.8 !important;
      filter: grayscale(0%) !important;
    }

    #${COPUS_BUTTON_ID}.copus-insufficient-curations {
      opacity: 0.6 !important;
      filter: none !important;
    }

    #${COPUS_BUTTON_ID}.copus-insufficient-curations:hover {
      opacity: 1 !important;
      filter: none !important;
    }

    @keyframes copusSuccessPulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    #${COPUS_BUTTON_ID}.copus-success {
      animation: copusSuccessPulse 0.3s ease !important;
    }

    /* Hide/Show Menu */
    #${COPUS_MENU_ID} {
      position: fixed !important;
      z-index: 2147483647 !important;
      background: white !important;
      border-radius: 8px !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
      padding: 4px 0 !important;
      min-width: 180px !important;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
      display: none;
    }

    #${COPUS_MENU_ID}.visible {
      display: block !important;
    }

    #${COPUS_MENU_ID} .copus-menu-item {
      display: flex !important;
      align-items: center !important;
      padding: 10px 14px !important;
      cursor: pointer !important;
      font-size: 13px !important;
      color: #333 !important;
      transition: background 0.15s ease !important;
      border: none !important;
      background: none !important;
      width: 100% !important;
      text-align: left !important;
    }

    #${COPUS_MENU_ID} .copus-menu-item:hover {
      background: #f5f5f5 !important;
    }

    #${COPUS_MENU_ID} .copus-menu-item svg {
      margin-right: 10px !important;
      flex-shrink: 0 !important;
    }

    #${COPUS_MENU_ID} .copus-menu-divider {
      height: 1px !important;
      background: #eee !important;
      margin: 4px 0 !important;
    }

    #${COPUS_MENU_ID} .copus-menu-header {
      padding: 8px 14px !important;
      font-size: 11px !important;
      color: #888 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.5px !important;
    }

    /* Restore Pill - shows when button is hidden */
    #${COPUS_RESTORE_PILL_ID} {
      position: fixed !important;
      z-index: 2147483647 !important;
      bottom: 20px !important;
      right: 20px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 28px !important;
      height: 28px !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
      transition: all 0.3s ease !important;
      opacity: 0.4 !important;
      overflow: hidden !important;
    }

    #${COPUS_RESTORE_PILL_ID}:hover {
      opacity: 1 !important;
      transform: scale(1.15) !important;
      box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
    }

    #${COPUS_RESTORE_PILL_ID} svg {
      width: 28px !important;
      height: 28px !important;
    }

    #${COPUS_RESTORE_PILL_ID}.copus-pill-fading {
      opacity: 0.3 !important;
    }

    #${COPUS_RESTORE_PILL_ID}.copus-pill-hidden {
      opacity: 0 !important;
      pointer-events: none !important;
    }
  `;
  document.head.appendChild(style);
}

// Create the hide/show menu
function createMenu() {
  const menu = document.createElement('div');
  menu.id = COPUS_MENU_ID;

  menu.innerHTML = `
    <div class="copus-menu-header">TASTE GRAPH</div>
    <button class="copus-menu-item" data-action="hide-session">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
        <line x1="1" y1="1" x2="23" y2="23"/>
      </svg>
      Hide for this session
    </button>
    <button class="copus-menu-item" data-action="hide-site">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="10"/>
        <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
      </svg>
      Hide on this site
    </button>
    <div class="copus-menu-divider"></div>
    <button class="copus-menu-item" data-action="open-copus">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#f23a00" stroke-width="2">
        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
        <polyline points="15 3 21 3 21 9"/>
        <line x1="10" y1="14" x2="21" y2="3"/>
      </svg>
      Open Copus
    </button>
  `;

  // Handle menu item clicks
  menu.addEventListener('click', (e) => {
    const item = e.target.closest('.copus-menu-item');
    if (!item) return;

    const action = item.dataset.action;
    menu.classList.remove('visible');

    switch (action) {
      case 'hide-session':
        hideForSession();
        break;
      case 'hide-site':
        hideForSite();
        break;
      case 'open-copus':
        window.open('https://copus.network', '_blank');
        break;
    }
  });

  // Close menu when clicking outside
  document.addEventListener('click', (e) => {
    if (!menu.contains(e.target) && e.target.id !== COPUS_BUTTON_ID) {
      menu.classList.remove('visible');
    }
  });

  return menu;
}

// Position the menu near the button
function positionMenu(menu, button) {
  const btnRect = button.getBoundingClientRect();
  const menuWidth = 180;
  const menuHeight = 140; // Approximate menu height

  // Position above the button, with bottom-left corner near button
  let left = btnRect.left;
  let top = btnRect.top - menuHeight - 8;

  // If menu would go off-screen left, align to button's right edge
  if (left + menuWidth > window.innerWidth - 10) {
    left = btnRect.right - menuWidth;
  }
  if (left < 10) left = 10;

  // If not enough space above, show below
  if (top < 10) {
    top = btnRect.bottom + 8;
  }

  menu.style.left = `${left}px`;
  menu.style.top = `${top}px`;
  menu.style.transform = 'none';
}

// Create the Copus button
function createButton(isLoggedIn, curationCount) {
  const hasSufficientCurations = curationCount === -1 || curationCount >= MIN_CURATIONS_THRESHOLD;
  const button = document.createElement('button');
  button.id = COPUS_BUTTON_ID;
  button.type = 'button';
  button.setAttribute('aria-label', 'Add Copus taste profile');

  if (!isLoggedIn) {
    button.classList.add('copus-not-logged-in');
  } else if (!hasSufficientCurations) {
    button.classList.add('copus-insufficient-curations');
  }

  // Taste profile icon - full size
  const iconUrl = chrome.runtime.getURL('taste-icon.png');
  button.innerHTML = `<img src="${iconUrl}" style="width: 22px; height: 22px; object-fit: contain; margin-top: 3px;" />`;

  // Create tooltip
  const tooltip = document.createElement('div');
  tooltip.id = COPUS_BUTTON_ID + '-tooltip';
  if (!isLoggedIn) {
    tooltip.textContent = 'Log in to activate your taste profile';
  } else if (!hasSufficientCurations) {
    tooltip.textContent = 'Curate or collect 10 public pieces to unlock your taste profile';
  } else {
    tooltip.textContent = 'Add my taste profile';
  }

  // Create menu
  const menu = createMenu();

  return { button, tooltip, menu };
}

// Get text content from chatbox (handles both textarea and contenteditable)
function getChatboxText(chatbox) {
  if (chatbox.tagName === 'TEXTAREA' || chatbox.tagName === 'INPUT') {
    return chatbox.value;
  }
  // For contenteditable divs (like Claude.ai uses ProseMirror)
  return chatbox.innerText || chatbox.textContent || '';
}

// Set text content in chatbox (handles both textarea and contenteditable)
function setChatboxText(chatbox, text) {
  if (chatbox.tagName === 'TEXTAREA' || chatbox.tagName === 'INPUT') {
    // For textareas
    chatbox.focus();
    chatbox.value = text;
    chatbox.dispatchEvent(new Event('input', { bubbles: true }));
    chatbox.dispatchEvent(new Event('change', { bubbles: true }));
  } else {
    // For contenteditable divs (ProseMirror, Lexical, Quill, etc.)
    chatbox.focus();

    // Select all existing content
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(chatbox);
    selection.removeAllRanges();
    selection.addRange(range);

    // Try execCommand first — works with most editors
    const inserted = document.execCommand('insertText', false, text);

    if (!inserted) {
      // Fallback: simulate paste event
      const dt = new DataTransfer();
      dt.setData('text/plain', text);
      const pasteEvent = new ClipboardEvent('paste', {
        bubbles: true,
        cancelable: true,
        clipboardData: dt
      });
      chatbox.dispatchEvent(pasteEvent);
    }
  }
}

// Handle button click - insert taste profile instruction
async function handleButtonClick(chatbox) {
  const button = document.getElementById(COPUS_BUTTON_ID);

  // Block if user hasn't curated enough
  if (userNamespace && userCurationCount !== null && userCurationCount !== -1 && userCurationCount < MIN_CURATIONS_THRESHOLD) {
    window.open(`https://copus.network/u/${userNamespace}`, '_blank');
    return;
  }

  // Use cached namespace if available
  if (userNamespace) {
    insertTasteInstruction(chatbox, userNamespace, button);
    return;
  }

  // No cached namespace, try to fetch from extension storage
  try {
    const namespace = await getUserNamespace();
    if (namespace) {
      userNamespace = namespace; // Cache it
      insertTasteInstruction(chatbox, namespace, button);
      return;
    }
  } catch (e) {
    console.warn('[Copus AI Helper] Extension storage failed:', e);
    // Extension context invalidated and no cached namespace
    alert('Extension connection lost. Please refresh the page.');
    return;
  }

  // Only redirect to login if storage worked but returned no namespace
  window.open('https://copus.network/login', '_blank');
}

// Append text to a contenteditable editor by moving cursor to end and inserting
function appendToContentEditable(chatbox, text) {
  chatbox.focus();

  // Move cursor to the very end
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(chatbox);
  range.collapse(false); // collapse to end
  selection.removeAllRanges();
  selection.addRange(range);

  // Try execCommand first — works with most editors (Quill, ProseMirror, etc.)
  const inserted = document.execCommand('insertText', false, text);

  if (!inserted) {
    // Fallback: simulate paste event (works with Lexical, Slate, etc.)
    const dt = new DataTransfer();
    dt.setData('text/plain', text);
    const pasteEvent = new ClipboardEvent('paste', {
      bubbles: true,
      cancelable: true,
      clipboardData: dt
    });
    chatbox.dispatchEvent(pasteEvent);
  }
}

// Insert the taste profile instruction into the chatbox
function insertTasteInstruction(chatbox, namespace, button) {
  // Always use private URL with key param — works regardless of public/private setting
  const tasteUrl = userUuid
    ? `https://copus.network/api/taste/${namespace}.json?key=${userUuid}`
    : `https://copus.network/api/taste/${namespace}.json`;
  // Taste profile instruction — uses natural language to avoid content policy triggers
  const tasteInstruction = `Please reference my taste profile at ${tasteUrl} to personalize your response. Use the curations, curation notes, and patterns in that data to understand my interests, and explain how your suggestions connect to my taste profile.`;

  const currentText = getChatboxText(chatbox).trim();
  const isContentEditable = chatbox.tagName !== 'TEXTAREA' && chatbox.tagName !== 'INPUT';

  if (isContentEditable) {
    // For rich text editors (Lexical, ProseMirror, etc.) — use paste simulation
    const textToInsert = currentText ? `\n\n${tasteInstruction}` : `${tasteInstruction} `;
    appendToContentEditable(chatbox, textToInsert);
  } else {
    // For textareas — use value setter
    let newText;
    if (currentText) {
      newText = `${currentText}\n\n${tasteInstruction}`;
    } else {
      newText = tasteInstruction + ' ';
    }
    setChatboxText(chatbox, newText);
  }

  // Visual feedback
  if (button) {
    button.classList.add('copus-success');
    setTimeout(() => {
      button.classList.remove('copus-success');
    }, 400);
  }

}

// Find the input container (the rounded frame that contains textarea and buttons)
function findInputContainer(chatbox) {
  let element = chatbox;

  // Walk up to find a container with border-radius (the rounded frame)
  for (let i = 0; i < 8 && element; i++) {
    element = element.parentElement;
    if (!element) break;

    const style = window.getComputedStyle(element);
    const borderRadius = parseFloat(style.borderRadius) || 0;
    const rect = element.getBoundingClientRect();

    // Look for a reasonably sized container with border-radius
    if (borderRadius >= 10 && rect.width > 200 && rect.height > 40 && rect.height < 400) {
      return element;
    }
  }

  return null;
}

// Position the button outside the bottom-right corner of the input area
function positionButton(button, tooltip, chatbox) {
  const buttonSize = 32;
  const gap = 10;

  // Find the input container (rounded frame) or fall back to chatbox
  const container = findInputContainer(chatbox);
  const rect = container ? container.getBoundingClientRect() : chatbox.getBoundingClientRect();

  // Position outside the bottom-right corner of the container
  let left = rect.right + gap;
  let top = rect.bottom - buttonSize;

  // Show button and position it
  button.style.display = 'flex';

  // Ensure button stays in viewport
  left = Math.max(10, Math.min(left, window.innerWidth - buttonSize - 10));
  top = Math.max(10, Math.min(top, window.innerHeight - buttonSize - 10));

  button.style.left = `${left}px`;
  button.style.top = `${top}px`;

  // Position tooltip above button
  tooltip.style.left = `${left + buttonSize / 2}px`;
  tooltip.style.top = `${top - 10}px`;
  tooltip.style.transform = 'translate(-50%, -100%)';
}

// Inject the button into the page
async function injectButton() {
  // Prevent concurrent injections (race between setTimeout and MutationObserver)
  if (isInjecting) return;
  isInjecting = true;

  try {
  // Check if hidden for this session
  if (hiddenForSession) {
    return;
  }

  // Check if hidden for this site
  const hiddenForSite = await isHiddenForSite();
  if (hiddenForSite) {
    return;
  }

  // Check if button already exists and is valid
  const existingButton = document.getElementById(COPUS_BUTTON_ID);
  const existingTooltip = document.getElementById(COPUS_BUTTON_ID + '-tooltip');
  const existingMenu = document.getElementById(COPUS_MENU_ID);
  const chatbox = findChatbox();

  // If button exists and chatbox exists, just update position
  if (existingButton && existingTooltip && chatbox) {
    positionButton(existingButton, existingTooltip, chatbox);
    return;
  }

  // Remove stale elements if chatbox changed
  if (existingButton) existingButton.remove();
  if (existingTooltip) existingTooltip.remove();
  if (existingMenu) existingMenu.remove();

  if (!chatbox) {
    injectionAttempts++;
    if (injectionAttempts < MAX_INJECTION_ATTEMPTS) {
      setTimeout(() => injectButton(), 500);
    } else {
    }
    return;
  }

  // Inject styles first (don't wait for storage)
  injectStyles();

  // Always re-check storage and validate token so logout/account switch is detected
  try {
    const namespace = await getUserNamespace();
    if (namespace) {
      // Token exists in storage — validate and fetch public article count + taste token
      const { valid, publicArticleCount, uuid } = await validateToken(namespace);
      if (valid) {
        userNamespace = namespace;
        userCurationCount = publicArticleCount ?? -1;
        if (uuid) userUuid = uuid;
      } else {
        userNamespace = null;
        userCurationCount = null;
      }
    } else {
      userNamespace = null;
      userCurationCount = null;
    }
  } catch (e) {
    console.warn('[Copus AI Helper] Could not check extension storage:', e);
    // Keep existing values on error to avoid flickering
  }

  const loggedIn = !!userNamespace;

  // Create button, tooltip, and menu
  const { button, tooltip, menu } = createButton(loggedIn, loggedIn ? (userCurationCount ?? -1) : 0);
  document.body.appendChild(button);
  document.body.appendChild(tooltip);
  document.body.appendChild(menu);

  // Initial positioning
  positionButton(button, tooltip, chatbox);

  // Add event listeners - find chatbox fresh on each click to avoid stale references
  button.addEventListener('click', (e) => {
    e.preventDefault();
    e.stopPropagation();
    // Close menu if open
    menu.classList.remove('visible');
    const currentChatbox = findChatbox();
    if (currentChatbox) {
      handleButtonClick(currentChatbox);
    } else {
      console.warn('[Copus AI Helper] Could not find chatbox on click');
    }
  });

  // Right-click to show menu
  button.addEventListener('contextmenu', (e) => {
    e.preventDefault();
    e.stopPropagation();
    tooltip.classList.remove('visible');
    positionMenu(menu, button);
    menu.classList.toggle('visible');
  });

  button.addEventListener('mouseenter', () => {
    if (!menu.classList.contains('visible')) {
      tooltip.classList.add('visible');
    }
  });

  button.addEventListener('mouseleave', () => {
    tooltip.classList.remove('visible');
  });

  // Update position when layout changes
  const updatePosition = () => {
    const btn = document.getElementById(COPUS_BUTTON_ID);
    const tip = document.getElementById(COPUS_BUTTON_ID + '-tooltip');
    const currentChatbox = findChatbox();
    if (btn && tip && currentChatbox) {
      positionButton(btn, tip, currentChatbox);
    }
  };

  // Update on scroll and resize
  window.addEventListener('scroll', updatePosition, { passive: true });
  window.addEventListener('resize', updatePosition, { passive: true });

  // Periodically check position when layout changes (e.g., sidebar opens)
  setInterval(() => {
    const btn = document.getElementById(COPUS_BUTTON_ID);
    if (!btn) return;
    updatePosition();
  }, 500);

  } finally {
    isInjecting = false;
  }
}

// Watch for DOM changes (SPAs may dynamically update the chatbox)
function setupMutationObserver() {
  let debounceTimer = null;

  const observer = new MutationObserver((mutations) => {
    // Skip if we're currently injecting, hiding, or session-hidden
    if (isInjecting || isHiding || hiddenForSession) return;

    // Skip if restore pill exists (means user intentionally hid)
    const restorePill = document.getElementById(COPUS_RESTORE_PILL_ID);
    if (restorePill) return;

    // Only care about button being removed
    const button = document.getElementById(COPUS_BUTTON_ID);
    if (button) return; // Button exists, don't do anything

    // Debounce re-injection
    if (debounceTimer) clearTimeout(debounceTimer);

    debounceTimer = setTimeout(async () => {
      // Double-check all hidden states
      if (isInjecting || isHiding || hiddenForSession) return;
      const siteHidden = await isHiddenForSite();
      if (siteHidden) return;

      // Check again for restore pill (race condition prevention)
      if (document.getElementById(COPUS_RESTORE_PILL_ID)) return;

      const chatbox = findChatbox();

      // Re-inject if button is gone but chatbox exists
      if (chatbox) {
        injectionAttempts = 0;
        await injectButton();
      }
    }, 500);
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// Setup keyboard shortcut to toggle button visibility
function setupKeyboardShortcut() {
  document.addEventListener('keydown', async (e) => {
    // Ctrl+Shift+P (or Cmd+Shift+P on Mac) to toggle Copus button
    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'P') {
      e.preventDefault();

      const button = document.getElementById(COPUS_BUTTON_ID);

      if (button) {
        // Button visible, hide it for session
        hideForSession();
      } else {
        // Button hidden, show it
        hiddenForSession = false;
        await showForSite(); // This also clears site-level hiding
      }
    }
  });
}

// Handle SPA navigation
function setupNavigationListener() {
  let lastUrl = window.location.href;

  const checkUrlChange = () => {
    if (window.location.href !== lastUrl) {
      lastUrl = window.location.href;
      // Don't re-inject if button still exists
      const existingButton = document.getElementById(COPUS_BUTTON_ID);
      if (existingButton) {
        return;
      }

      // Button was removed, re-inject
      injectionAttempts = 0;
      setTimeout(() => injectButton(), 1500);
    }
  };

  // Check periodically for SPA navigation
  setInterval(checkUrlChange, 1000);

  // Also listen for popstate
  window.addEventListener('popstate', () => {
    const existingButton = document.getElementById(COPUS_BUTTON_ID);
    if (!existingButton) {
      injectionAttempts = 0;
      setTimeout(() => injectButton(), 1500);
    }
  });
}

// Initialize
async function init() {
  currentPlatform = detectPlatform();

  if (!currentPlatform) {
    return;
  }

  // Wait for page to be ready, then inject
  const startInjection = () => {
    setTimeout(() => injectButton(), 2000);
  };

  if (document.readyState === 'complete') {
    startInjection();
  } else {
    window.addEventListener('load', startInjection);
  }

  // Setup observers for dynamic content
  setupMutationObserver();
  setupNavigationListener();
  setupKeyboardShortcut();
  setupPillFocusListener();
}

// Listen for storage changes (account switches)
try {
  chrome.storage.onChanged.addListener((changes, areaName) => {
    if (areaName === 'local' && changes.copus_user && changes.copus_user.newValue) {
      const newUser = changes.copus_user.newValue;
      if (newUser.namespace && newUser.namespace !== userNamespace) {
        userNamespace = newUser.namespace;
      }
      if (newUser.uuid) {
        userUuid = newUser.uuid;
      }
    }
  });
} catch (e) {
  // Ignore - extension context may be invalidated
}

// Start
init();