content.js

(function () {
  'use strict';

  let enabled     = true;
  let removedCount = 0;
  let observer    = null;
  let debounceTimer = null;

  // ─── 1. Inject blur-only CSS override ────────────────────────────────────
  function injectCSS() {
    if (document.getElementById('vision-style')) return;
    const s = document.createElement('style');
    s.id = 'vision-style';
    // ONLY removes blur/backdrop. Never touch color, font, position, height.
    s.textContent = `
      * {
        filter: none !important;
        -webkit-filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    `;
    (document.head || document.documentElement).appendChild(s);
  }

  // ─── 2. Remove blur on individual elements ────────────────────────────────
  function removeBlurs(root = document) {
    try {
      root.querySelectorAll('*').forEach(el => {
        try {
          const cs = window.getComputedStyle(el);
          if (cs.filter && cs.filter !== 'none' && cs.filter.includes('blur')) {
            el.style.setProperty('filter', 'none', 'important');
            removedCount++;
          }
          if (cs.backdropFilter && cs.backdropFilter !== 'none') {
            el.style.setProperty('backdrop-filter', 'none', 'important');
            el.style.setProperty('-webkit-backdrop-filter', 'none', 'important');
            removedCount++;
          }
          if (el.style.filter && el.style.filter.includes('blur')) {
            el.style.setProperty('filter', 'none', 'important');
          }
          if (cs.webkitTextSecurity && cs.webkitTextSecurity !== 'none') {
            el.style.setProperty('-webkit-text-security', 'none', 'important');
            removedCount++;
          }
        } catch(e) {}
      });
    } catch(e) {}
  }

  // ─── 3. Scroll locks — only when actually locked by a paywall ─────────────
  function removeScrollLocks(root = document) {
    try {
      [document.documentElement, document.body].forEach(el => {
        if (!el) return;
        const cs = window.getComputedStyle(el);
        if (cs.overflow === 'hidden' || cs.overflowY === 'hidden') {
          el.style.setProperty('overflow',   'auto', 'important');
          el.style.setProperty('overflow-y', 'auto', 'important');
          removedCount++;
        }
        const mh = parseInt(cs.maxHeight);
        if (mh > 0 && mh < window.innerHeight) {
          el.style.setProperty('max-height', 'none', 'important');
        }
        // NEVER touch position or height — breaks sticky navbars
      });
      // Content containers — only touch overflow/max-height if explicitly locked
      const selectors = ['article', 'main', '[class*="article-body"]',
        '[class*="post-body"]', '[class*="story-body"]', '[class*="reader-content"]'];
      selectors.forEach(sel => {
        root.querySelectorAll(sel).forEach(el => {
          try {
            const cs = window.getComputedStyle(el);
            if (cs.overflow === 'hidden' || cs.overflowY === 'hidden') {
              el.style.setProperty('overflow',   'visible', 'important');
              el.style.setProperty('overflow-y', 'visible', 'important');
            }
            const mh = parseInt(cs.maxHeight);
            if (mh > 0 && mh < 600) {
              el.style.setProperty('max-height', 'none', 'important');
              removedCount++;
            }
          } catch(e) {}
        });
      });
    } catch(e) {}
  }

  // ─── 4. Overlay detection — Paywall + Login walls ─────────────────────────

  const PAYWALL_KEYWORDS = [
    'paywall', 'pay-wall', 'paymeter',
    'content-gate', 'content-wall', 'article-gate',
    'blur-overlay', 'metered-content',
    'subscriber-only', 'subscribers-only',
    'regwall', 'reg-wall', 'hardwall', 'softwall',
    'meterwall', 'meter-wall', 'nagwall',
    'tp-modal', 'tp_modal', 'piano-paywall',
    'leaky-paywall', 'laterpay', 'cxense-paywall',
  ];

  const AUTH_KEYWORDS = [
    'signin-modal', 'sign-in-modal', 'login-modal', 'log-in-modal',
    'signup-modal', 'sign-up-modal', 'register-modal',
    'auth-modal', 'auth-dialog', 'auth-popup', 'auth-overlay',
    'login-popup', 'signin-popup', 'signup-popup',
    'login-wall', 'signin-wall', 'register-wall',
    'account-modal', 'account-popup',
    'modal-login', 'modal-signin', 'modal-signup', 'modal-register',
    'dialog-login', 'dialog-signin', 'overlay-login', 'overlay-signin',
  ];

  const PAYWALL_PHRASES = [
    'subscribe to read', 'subscribe to continue',
    'subscribe for full access', 'get full access',
    'members only content', 'member-only content',
    'register to continue', 'register to read',
    'unlock this article', 'unlock full access',
    'to continue reading', 'to keep reading',
    'this article is for subscribers', 'for subscribers only',
    'already a subscriber', 'become a member to',
    'create a free account to continue', 'sign up to continue reading',
    'sign in to continue reading', 'log in to continue reading',
    "you've reached your free article limit",
    'you have read your free articles',
    'reading this article requires a subscription',
    // Quora+
    'access this answer and support the author',
    'quora+ subscriber',
    'access all answers reserved',
    'access exclusive answers',
    'start free trial',
    'quora+ membership',
    // Medium
    'this story is only available to members',
    'become a medium member',
    'read the full story with a free account',
    // Generic
    'this content is for paid subscribers',
    'this post is for paying subscribers',
    'this is a subscriber-only post',
    'this is a members-only post',
    'only available to subscribers',
    'upgrade to read',
    'upgrade your account to',
  ];

  // Auth-wall phrases — multi-word, only appear inside login popups
  const AUTH_POPUP_PHRASES = [
    'sign in to your account', 'log in to your account',
    'sign in to continue', 'log in to continue',
    'create your account', 'create an account to',
    'sign up for free', 'register for free',
    'join to access', 'join to read',
    'please sign in', 'please log in', 'please register',
    // Social login walls (Quora, Medium, etc.)
    'continue with google', 'continue with facebook',
    'continue with apple', 'continue with twitter',
    'sign up with google', 'sign in with google',
    'sign up with email', 'login with email',
    'login · sign up', 'log in · sign up',
    'sign up · log in',
    // Age-gate / ToS agreement walls
    'i agree that i am at least',
    'by continuing i agree',
    'agree to the terms of service',
  ];

  function isVisibleEl(cs) {
    return cs.display !== 'none'
      && cs.visibility !== 'hidden'
      && parseFloat(cs.opacity) > 0.1;
  }

  // Detects email-input forms AND social-login button-only forms
  function containsAuthUI(el) {
    // Classic email/password form
    if (el.querySelector('input[type="email"], input[type="password"], input[name*="email"], input[name*="user"]'))
      return true;
    // Social login buttons (Quora, Medium, Reddit style — no input fields)
    const btns = Array.from(el.querySelectorAll('button, a[role="button"], div[role="button"]'));
    const socialPhrases = ['continue with google', 'continue with facebook',
      'continue with apple', 'sign in with google', 'sign up with google',
      'sign in with apple', 'continue with twitter'];
    const btnText = btns.map(b => (b.textContent || '').toLowerCase()).join(' ');
    if (socialPhrases.some(p => btnText.includes(p))) return true;
    return false;
  }

  function looksLikeOverlay(el) {
    try {
      const cs     = window.getComputedStyle(el);
      const rect   = el.getBoundingClientRect();
      const isFixed = cs.position === 'fixed';
      const isAbs   = cs.position === 'absolute';
      const zIndex  = parseInt(cs.zIndex) || 0;
      const visible = isVisibleEl(cs);

      if (!visible) return false;
      if (!(isFixed || isAbs)) return false;

      // Must cover a meaningful portion of the viewport
      if (rect.width  < window.innerWidth  * 0.20) return false;
      if (rect.height < window.innerHeight * 0.15) return false;

      const classId = (
        String(el.className || '') + ' ' +
        String(el.id        || '') + ' ' +
        String(el.getAttribute('role') || '') + ' ' +
        String(el.getAttribute('data-testid') || '')
      ).toLowerCase();

      const innerText = (el.innerText || '').toLowerCase().slice(0, 600);

      // TIER 1: Paywall class/id keyword
      if (PAYWALL_KEYWORDS.some(k => classId.includes(k))) return true;

      // TIER 2: Auth modal keyword + truly modal (fixed, z>100)
      if (isFixed && zIndex > 100 && AUTH_KEYWORDS.some(k => classId.includes(k))) return true;

      // TIER 3: Paywall text phrase
      if (PAYWALL_PHRASES.some(p => innerText.includes(p))) return true;

      // TIER 4: Auth popup phrase + fixed + reasonably large
      // Lower threshold: z>50 (Quora uses z-index ~100-200, not always >200)
      if (
        isFixed && zIndex > 50 &&
        rect.width  > window.innerWidth  * 0.20 &&
        rect.height > window.innerHeight * 0.20 &&
        AUTH_POPUP_PHRASES.some(p => innerText.includes(p))
      ) return true;

      // TIER 5: Contains auth UI (form OR social buttons) + fixed + large + mid-high z
      if (
        isFixed && zIndex > 50 &&
        rect.width  > window.innerWidth  * 0.18 &&
        rect.height > window.innerHeight * 0.18 &&
        containsAuthUI(el)
      ) return true;

      // TIER 6: Full-screen dim backdrop (no UI inside)
      const bg = cs.backgroundImage || '';
      const isSemiTrans = parseFloat(cs.opacity) < 0.98;
      if (
        isFixed && zIndex > 50 &&
        rect.width  > window.innerWidth  * 0.85 &&
        rect.height > window.innerHeight * 0.85 &&
        (bg.includes('gradient') || isSemiTrans) &&
        !el.querySelector('input, textarea, button, a, p, article')
      ) return true;

      // TIER 7: Class name "backdrop/overlay/mask/scrim" + full-screen + no content
      const backdropKw = ['backdrop', 'scrim', 'mask', 'dim', 'shade', 'curtain',
                          'modal-bg', 'modal-bg', 'overlay-bg'];
      if (
        backdropKw.some(k => classId.includes(k)) &&
        isFixed && zIndex > 20 &&
        rect.width  > window.innerWidth  * 0.80 &&
        rect.height > window.innerHeight * 0.80 &&
        !el.querySelector('input, button, a, p, h1, h2, h3, article')
      ) return true;

      return false;
    } catch(e) { return false; }
  }

  // ── Inline paywall detector ─────────────────────────────────────────────
  // Quora+, Medium, Substack inject paywall blocks INLINE (position:static).
  // CRITICAL: Must target the SMALLEST element containing only paywall text.
  // Matching a large parent that also wraps real article content = blank page.
  const INLINE_PAYWALL_PHRASES = [
    'access this answer and support the author',
    'quora+ subscriber', 'quora+ membership',
    'access all answers reserved',
    'this story is only available to members',
    'become a medium member',
    'read the full story with a free account',
    'this is a subscriber-only post',
    'this post is for paying subscribers',
    'this content is for paid subscribers',
    'only available to subscribers',
    'upgrade to read',
    "you've reached your free article limit",
    'you have read your free articles',
  ];

  function looksLikeInlinePaywall(el) {
    try {
      const cs = window.getComputedStyle(el);
      if (!isVisibleEl(cs)) return false;

      // Must not be a large structural container (article, main, section, body)
      const tag = el.tagName.toLowerCase();
      if (['article','main','section','body','html','div'].includes(tag)) {
        // Allow divs ONLY if they are small enough to be a paywall block, not a page wrapper
        if (tag === 'div') {
          const rect = el.getBoundingClientRect();
          // Skip very large divs — likely page wrappers containing real content too
          if (rect.height > window.innerHeight * 0.70) return false;
          if (rect.width  > window.innerWidth  * 0.95) return false;
        } else {
          return false; // Never remove article/main/section
        }
      }

      const rect = el.getBoundingClientRect();
      if (rect.width < 180 || rect.height < 50) return false;
      if (rect.width < window.innerWidth * 0.20) return false;

      const ownText = (el.innerText || '').toLowerCase();
      if (ownText.length < 15) return false;

      // SAFETY: Only match if the paywall phrase accounts for a significant
      // portion of this element's total text. This prevents matching a large
      // wrapper that has the phrase buried inside lots of real article text.
      const matchedPhrase = INLINE_PAYWALL_PHRASES.find(p => ownText.includes(p));
      if (!matchedPhrase) return false;

      // If the element's text is mostly real article content (>600 chars beyond
      // the paywall phrase), it's a wrapper — skip it, target a child instead.
      const textBeyondPhrase = ownText.replace(matchedPhrase, '').trim();
      if (textBeyondPhrase.length > 400) return false;

      // Also skip elements that contain many paragraphs of real content
      const paraCount = el.querySelectorAll('p, h1, h2, h3, h4').length;
      if (paraCount > 6) return false;

      return true;
    } catch(e) { return false; }
  }

  function removeOverlays(root = document) {
    try {
      Array.from(root.querySelectorAll('*')).forEach(el => {
        if (el === document.body || el === document.documentElement) return;
        // Fixed/absolute overlays
        if (looksLikeOverlay(el)) {
          el.style.setProperty('display', 'none', 'important');
          removedCount++;
          return;
        }
        // Inline paywall blocks (Quora+, Medium, etc.)
        if (looksLikeInlinePaywall(el)) {
          el.style.setProperty('display', 'none', 'important');
          removedCount++;
        }
      });
    } catch(e) {}
  }

  // ─── 5. Reveal paywall-clipped content ───────────────────────────────────
  function revealHiddenContent(root = document) {
    try {
      const paywallSelectors = [
        '[class*="paywall"]', '[class*="content-gate"]', '[class*="article-gate"]',
        '[class*="subscriber"]', '[class*="metered"]', '[id*="paywall"]',
      ];
      paywallSelectors.forEach(sel => {
        root.querySelectorAll(sel).forEach(container => {
          try {
            const mh = parseInt(window.getComputedStyle(container).maxHeight);
            if (mh > 0 && mh < 600) {
              container.style.setProperty('max-height', 'none', 'important');
              container.style.setProperty('overflow', 'visible', 'important');
              removedCount++;
            }
          } catch(e) {}
        });
      });
    } catch(e) {}
  }

  function restoreInteractivity() { /* intentionally minimal */ }

  // ─── 6. Run all fixes ─────────────────────────────────────────────────────
  function runAll() {
    if (!enabled) return;
    removedCount = 0;
    injectCSS();
    removeBlurs();
    removeScrollLocks();
    removeOverlays();
    revealHiddenContent();
    restoreInteractivity();
    try {
      chrome.storage.local.set({ fixedCount: removedCount, lastRun: Date.now() });
    } catch(e) {}
    return removedCount;
  }

  // ─── 7. MutationObserver ─────────────────────────────────────────────────
  function startObserver() {
    if (observer) observer.disconnect();
    observer = new MutationObserver(() => {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(runAll, 700);
    });
    try {
      observer.observe(document.body || document.documentElement, {
        childList: true, subtree: true,
        attributes: true, attributeFilter: ['style', 'class'],
      });
    } catch(e) {}
  }

  // ─── 8. Message listener ─────────────────────────────────────────────────
  chrome.runtime.onMessage.addListener((msg, _, sendResponse) => {
    if (msg.action === 'toggle') {
      enabled = msg.enabled;
      if (!enabled) {
        document.getElementById('vision-style')?.remove();
        observer?.disconnect();
        clearTimeout(debounceTimer);
      } else {
        runAll();
        startObserver();
      }
      sendResponse({ enabled, ok: true });
      return true;
    }
    if (msg.action === 'runNow') {
      const count = runAll();
      sendResponse({ fixedCount: count, ok: true });
      return true;
    }
    if (msg.action === 'ping') {
      sendResponse({ alive: true });
      return true;
    }
  });

  // ─── 9. Init ─────────────────────────────────────────────────────────────
  function init() {
    chrome.storage.local.get(['enabled'], r => {
      enabled = r.enabled !== false;
      if (!enabled) return;
      runAll();
      setTimeout(runAll, 1000);
      setTimeout(runAll, 3000);
      if (document.body) {
        startObserver();
      } else {
        document.addEventListener('DOMContentLoaded', () => { runAll(); startObserver(); });
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();