/**
 * ErrBits shared features — Bookmarks + Newsletter
 * Loaded as <script type="module"> on all article pages
 */
import { initializeApp, getApps } from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js';
import { getAuth, onAuthStateChanged, GoogleAuthProvider, OAuthProvider, GithubAuthProvider, signInWithPopup, signOut }
  from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-auth.js';
import { getFirestore, doc, setDoc, deleteDoc, getDoc, serverTimestamp,
         collection, addDoc, onSnapshot, query, orderBy }
  from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js';

const firebaseConfig = {
  apiKey:            'AIzaSyAPZIDdmW8kbXzJZhoXn86Y1FWBggjSQlI',
  authDomain:        'errbits-axii.firebaseapp.com',
  projectId:         'errbits-axii',
  storageBucket:     'errbits-axii.firebasestorage.app',
  messagingSenderId: '870825466603',
  appId:             '1:870825466603:web:43503072964f58f1337cae'
};

// Reuse app if already initialised by inline head script
const app = getApps().length ? getApps()[0] : initializeApp(firebaseConfig);
const auth = getAuth(app);
const db   = getFirestore(app);
const provider   = new GoogleAuthProvider();
const msProvider = new OAuthProvider('microsoft.com');
const ghProvider = new GithubAuthProvider();

// Derive slug from URL  e.g.  /articles/delta-cycles-in-systemc.html → delta-cycles-in-systemc
const slug  = location.pathname.split('/').pop().replace('.html', '');
const title = document.title.replace(' – ErrBits', '').replace(' - ErrBits', '');

// ─────────────────────────── BOOKMARK ───────────────────────────

async function refreshBookmarkState(uid) {
  const ref  = doc(db, `bookmarks/${uid}/articles/${slug}`);
  const snap = await getDoc(ref);
  setBookmarkUI(snap.exists());
}

function setBookmarkUI(saved) {
  const btn = document.getElementById('bm-btn');
  if (!btn) return;
  if (saved) {
    btn.classList.add('saved');
    btn.title = 'Remove bookmark';
    btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg> Saved`;
  } else {
    btn.classList.remove('saved');
    btn.title = 'Bookmark this article';
    btn.innerHTML = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg> Save`;
  }
}

async function toggleBookmark() {
  const user = auth.currentUser;
  if (!user) { showBmPrompt(); return; }

  const ref  = doc(db, `bookmarks/${user.uid}/articles/${slug}`);
  const snap = await getDoc(ref);
  if (snap.exists()) {
    await deleteDoc(ref);
    setBookmarkUI(false);
    showFToast('Bookmark removed');
  } else {
    await setDoc(ref, { title, url: location.href, savedAt: serverTimestamp() });
    setBookmarkUI(true);
    showFToast('Saved to your reading list ✓');
  }
}

function showBmPrompt() {
  const p = document.getElementById('bm-prompt');
  if (p) p.classList.add('show');
}

// ─────────────────────────── NEWSLETTER ───────────────────────────

async function autoSubscribe(user) {
  if (!user.email) return;
  const ref  = doc(db, 'subscribers', user.email.toLowerCase());
  const snap = await getDoc(ref);
  if (!snap.exists()) {
    await setDoc(ref, {
      email:         user.email.toLowerCase(),
      name:          user.displayName || '',
      uid:           user.uid,
      subscribedAt:  serverTimestamp(),
      source:        'google-login'
    });
  }
}

async function manualSubscribe(e) {
  e.preventDefault();
  const input = document.getElementById('nl-email-input');
  if (!input) return;
  const email = input.value.trim().toLowerCase();
  if (!email || !email.includes('@')) return;

  const btn        = document.getElementById('nl-submit-btn');
  const betaCheck  = document.getElementById('nl-beta-opt-in');
  const betaOptIn  = betaCheck ? betaCheck.checked : false;

  if (btn) { btn.disabled = true; btn.textContent = '…'; }

  try {
    const payload = {
      email,
      subscribedAt: serverTimestamp(),
      source:       'newsletter-bar'
    };
    if (betaOptIn) {
      payload.betaOptIn   = true;
      payload.betaOptInAt = serverTimestamp();
    }
    await setDoc(doc(db, 'subscribers', email), payload);
    const bar = document.getElementById('nl-bar');
    if (bar) bar.innerHTML = betaOptIn
      ? '<p class="nl-ok">✓ You\'re in! Subscribed and added to the early access list. We\'ll reach out soon.</p>'
      : '<p class="nl-ok">✓ Subscribed! You\'ll get new articles straight in your inbox.</p>';
  } catch (err) {
    console.error('Subscribe error:', err);
    if (btn) { btn.disabled = false; btn.textContent = 'Subscribe'; }
  }
}

// ─────────────────────────── AUTH STATE ───────────────────────────

onAuthStateChanged(auth, (user) => {
  if (user) {
    refreshBookmarkState(user.uid);
    autoSubscribe(user);
    const bar = document.getElementById('nl-bar');
    if (bar) bar.style.display = 'none';
    injectReadingListNav();
    // hide studio invite card if present
    const inv = document.getElementById('studio-invite-card');
    if (inv) inv.remove();
  } else {
    setBookmarkUI(false);
    injectStudioInviteCard();
  }
  updateNavAuth(user);
  // Discussion — keep compose area in sync with auth; listener stays active (public read)
  discUid = user ? user.uid : null;
  renderDiscBody();
  renderComments(); // re-render to show/hide delete buttons on auth change
});

function injectReadingListNav() {
  if (document.getElementById('bm-nav-link')) return;
  const navLinks = document.querySelector('.nav-links');
  if (!navLinks) return;
  const a = document.createElement('a');
  a.id   = 'bm-nav-link';
  a.href = '/bookmarks.html';
  a.textContent = '🔖 Reading List';
  a.style.cssText = 'color:#22d97f;font-weight:600;';
  navLinks.appendChild(a);
}

// ─────────────────────────── NAV AUTH UI ─────────────────────────

function updateNavAuth(user) {
  const wrap = document.querySelector('.nav-avatar-wrap');
  if (!wrap) return;
  if (user) {
    // Remove sign-in widget
    const siWrap = document.getElementById('nav-signin-wrap');
    if (siWrap) siWrap.remove();
    // Build dropdown once
    if (!document.getElementById('nav-user-menu')) {
      const name = user.displayName?.split(' ')[0] || user.email?.split('@')[0] || '';
      const photoHtml = user.photoURL
        ? `<img class="nav-user-avatar" src="proxy.php?url=https%3A%2F%2Ferrbits.com%2F%24%7BescHtml%28user.photoURL%29%7D" alt="" referrerpolicy="no-referrer">`
        : `<div class="nav-user-initials">${escHtml(name.charAt(0).toUpperCase())}</div>`;
      const menu = document.createElement('div');
      menu.id = 'nav-user-menu';
      menu.className = 'nav-user-menu';
      menu.innerHTML = `
        <button class="nav-user-btn" id="nav-user-btn">
          ${photoHtml}
          <span class="nav-user-name">${escHtml(name)}</span>
          <svg width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" style="color:var(--text-muted)"><path d="M6 9l6 6 6-6"/></svg>
        </button>
        <div class="nav-user-drop" id="nav-user-drop">
          <div class="nav-drop-header">
            ${photoHtml}
            <div>
              <div class="nav-drop-name">${escHtml(user.displayName || name)}</div>
              <div class="nav-drop-email">${escHtml(user.email || '')}</div>
            </div>
          </div>
          <hr class="nav-drop-divider">
          <button class="nav-drop-item" id="nav-drop-profile">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.58-7 8-7s8 3 8 7"/></svg>
            My Profile
          </button>
          <button class="nav-drop-item" id="nav-drop-orders">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
            My Orders
          </button>
          <button class="nav-drop-item" id="nav-drop-achievements">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>
            My Achievements
          </button>
        </div>`;
      wrap.appendChild(menu);
      const btn  = document.getElementById('nav-user-btn');
      const drop = document.getElementById('nav-user-drop');
      btn.addEventListener('click', e => { e.stopPropagation(); drop.classList.toggle('open'); });
      document.addEventListener('click', () => drop.classList.remove('open'));
      document.getElementById('nav-drop-profile').addEventListener('click', () => { window.location.href = '/profile.html'; });
      document.getElementById('nav-drop-orders').addEventListener('click', () => { window.location.href = '/orders.html'; });
      document.getElementById('nav-drop-achievements').addEventListener('click', () => { window.location.href = '/achievements.html'; });
    }
  } else {
    // Remove user menu
    const menu = document.getElementById('nav-user-menu');
    if (menu) menu.remove();
    // Hide legacy elements (belt-and-suspenders for old HTML)
    const avatar = document.getElementById('nav-avatar');
    if (avatar) { avatar.src = ''; avatar.style.display = 'none'; }
    const nameEl = document.getElementById('nav-name');
    if (nameEl) nameEl.textContent = '';
    // Inject sign-in dropdown
    if (!document.getElementById('nav-signin-wrap')) {
      const wrapDiv = document.createElement('div');
      wrapDiv.id = 'nav-signin-wrap';
      wrapDiv.innerHTML = `
        <button id="nav-signin-btn">Sign in <span class="nav-signin-arrow">▾</span></button>
        <div id="nav-signin-drop">
          <button class="nav-signin-opt" id="nav-si-google">
            <svg width="16" height="16" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.08 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-3.59-13.46-8.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
            Sign in with Google
          </button>
          <button class="nav-signin-opt" id="nav-si-ms">
            <svg width="16" height="16" viewBox="0 0 21 21"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
            Sign in with Microsoft
          </button>
          <button class="nav-signin-opt" id="nav-si-gh">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
            Sign in with GitHub
          </button>
        </div>
      `;
      wrap.appendChild(wrapDiv);
      const navBtn = document.getElementById('nav-signin-btn');
      const navDrop = document.getElementById('nav-signin-drop');
      navBtn.addEventListener('click', e => {
        e.stopPropagation();
        navBtn.classList.toggle('open');
        navDrop.classList.toggle('open');
      });
      document.addEventListener('click', () => {
        navBtn.classList.remove('open');
        navDrop.classList.remove('open');
      });
      const doSignIn = (prov) => signInWithPopup(auth, prov).catch(e => {
        if (e.code !== 'auth/popup-closed-by-user') console.error(e);
      });
      document.getElementById('nav-si-google').addEventListener('click', () => doSignIn(provider));
      document.getElementById('nav-si-ms').addEventListener('click',     () => doSignIn(msProvider));
      document.getElementById('nav-si-gh').addEventListener('click',     () => doSignIn(ghProvider));
    }
  }
}

function injectStudioInviteCard() {
  if (document.getElementById('studio-invite-card')) return;
  const nlBar = document.getElementById('nl-bar');
  if (!nlBar) return;
  const card = document.createElement('div');
  card.id = 'studio-invite-card';
  card.innerHTML = `
    <span class="si-tag">// SystemC Studio</span>
    <div class="si-body">
      <p class="si-text">Already reading deeply? <strong>Track 01 is completely free</strong> — structured lessons with theory, reference code, and hands-on practice.</p>
      <div class="si-btns">
        <button class="si-btn" id="si-join-google">
          <svg width="14" height="14" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.08 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-3.59-13.46-8.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
          Google
        </button>
        <button class="si-btn si-btn-ms" id="si-join-ms">
          <svg width="14" height="14" viewBox="0 0 21 21"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
          Microsoft
        </button>
        <button class="si-btn si-btn-gh" id="si-join-gh">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
          GitHub
        </button>
      </div>
    </div>
  `;
  nlBar.insertAdjacentElement('afterend', card);
  const doStudioSignIn = async (prov) => {
    try {
      await signInWithPopup(auth, prov);
      window.location.href = '/systemc-studio.html';
    } catch(e) {
      if (e.code !== 'auth/popup-closed-by-user') console.error(e);
    }
  };
  document.getElementById('si-join-google').addEventListener('click', () => doStudioSignIn(provider));
  document.getElementById('si-join-ms').addEventListener('click',     () => doStudioSignIn(msProvider));
  document.getElementById('si-join-gh').addEventListener('click',     () => doStudioSignIn(ghProvider));
}

// ─────────────────────────── SIGN IN (from prompt) ───────────────

async function bmSignIn(prov = provider) {
  try {
    await signInWithPopup(auth, prov);
    const p = document.getElementById('bm-prompt');
    if (p) p.classList.remove('show');
    await toggleBookmark();
  } catch (e) {
    if (e.code !== 'auth/popup-closed-by-user') console.error(e);
  }
}
async function bmMsSignIn() { return bmSignIn(msProvider); }
async function bmGhSignIn() { return bmSignIn(ghProvider); }

// ─────────────────────────── TOAST ───────────────────────────────

function showFToast(msg) {
  let t = document.getElementById('f-toast');
  if (!t) return;
  t.textContent = msg;
  t.classList.add('show');
  clearTimeout(t._t);
  t._t = setTimeout(() => t.classList.remove('show'), 2800);
}

// ─────────────────────────── SHARE BAR ──────────────────────────

function injectShareBar() {
  if (document.getElementById('share-bar')) return;
  const authorCard = document.querySelector('.author-card');
  if (!authorCard) return;

  const ogUrl   = document.querySelector('meta[property="og:url"]')?.getAttribute('content') || location.href;
  const ogTitle = document.querySelector('meta[property="og:title"]')?.getAttribute('content') || document.title;
  const shareTitle = ogTitle.replace(/\s[–-]\s*ErrBits\s*$/, '').trim();

  const encodedUrl   = encodeURIComponent(ogUrl);
  const encodedTitle = encodeURIComponent(shareTitle);

  const svgLinkedIn = `<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452H16.89v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a1.98 1.98 0 01-1.977-1.98c0-1.093.885-1.98 1.977-1.98s1.977.887 1.977 1.98a1.98 1.98 0 01-1.977 1.98zm1.977 13.019H3.36V9h3.954v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>`;
  const svgTwitter  = `<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.748l7.73-8.835L1.254 2.25H8.08l4.257 5.63 5.907-5.63zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`;
  const svgEmail    = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>`;
  const svgCopy     = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>`;

  const bar = document.createElement('div');
  bar.className = 'share-bar';
  bar.id = 'share-bar';
  bar.setAttribute('role', 'group');
  bar.setAttribute('aria-label', 'Share this article');
  bar.innerHTML = `
    <span class="share-bar-label">// share</span>
    <a class="share-btn" href="proxy.php?url=https%3A%2F%2Fwww.linkedin.com%2Fsharing%2Fshare-offsite%2F%3Furl%3D%24%7BencodedUrl%7D"
       target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn">
      ${svgLinkedIn} LinkedIn
    </a>
    <a class="share-btn" href="proxy.php?url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Ftext%3D%24%7BencodedTitle%7D%26url%3D%24%7BencodedUrl%7D%26via%3Dadiitrack"
       target="_blank" rel="noopener noreferrer" aria-label="Share on X / Twitter">
      ${svgTwitter} X / Twitter
    </a>
    <a class="share-btn" href="proxy.php?url=https%3A%2F%2Ferrbits.com%2Fmailto%3A%3Fsubject%3D%24%7BencodedTitle%7D%26body%3D%24%7BencodedUrl%7D"
       aria-label="Share via Email">
      ${svgEmail} Email
    </a>
    <button class="share-btn" id="share-copy" type="button" aria-label="Copy link to clipboard">
      ${svgCopy} Copy link
    </button>
  `;

  bar.querySelector('#share-copy').addEventListener('click', () => {
    navigator.clipboard.writeText(ogUrl).then(() => {
      showFToast('Link copied to clipboard ✓');
    }).catch(() => {
      showFToast('Copy: ' + ogUrl);
    });
  });

  authorCard.insertAdjacentElement('afterend', bar);
}

// ─────────────────────────── DISCUSSION ──────────────────────────

const ADMIN_UID     = 'lVk5cJBhPDhQwWZBMT32dzF5ygu2';
const DISC_PAGE     = 5;            // comments shown initially / per load-more
let discUnsub       = null;         // onSnapshot unsubscriber
let discOpen        = false;
let discUid         = null;         // set from auth state
let discAllComments = [];           // all comment docs from Firestore (latest first)
let discShown       = DISC_PAGE;    // how many are currently rendered

function escHtml(s) {
  return String(s)
    .replace(/&/g,'&amp;').replace(/</g,'&lt;')
    .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

function discTimeAgo(ts) {
  if (!ts) return '';
  const d = ts.toDate ? ts.toDate() : new Date(ts);
  const s = Math.floor((Date.now() - d) / 1000);
  if (s < 60)   return 'just now';
  if (s < 3600)  return Math.floor(s/60) + 'm ago';
  if (s < 86400) return Math.floor(s/3600) + 'h ago';
  return Math.floor(s/86400) + 'd ago';
}

function injectDiscPanel() {
  if (document.getElementById('discPanel')) return;
  const panel = document.createElement('div');
  panel.className = 'disc-panel';
  panel.id = 'discPanel';
  panel.innerHTML = `
    <div class="disc-strip" id="discStrip" role="button" aria-label="Toggle discussion">
      <span class="disc-strip-dot" id="discDot"></span>
      <span class="disc-strip-label">Discussion</span>
    </div>
    <div class="disc-content">
      <div class="disc-header">
        <span class="disc-title">// discussion</span>
        <button class="disc-close" id="discClose" aria-label="Close">&#x2715;</button>
      </div>
      <div class="disc-notice">
        <span>💡</span>
        <span><strong>Learn by Doing</strong> — no direct solutions. Share hints and guidance only.</span>
      </div>
      <div id="discBody"></div>
      <div class="disc-comments" id="discComments"></div>
      <div id="discMore"></div>
    </div>
  `;
  document.body.appendChild(panel);

  document.getElementById('discStrip').addEventListener('click', toggleDisc);
  document.getElementById('discClose').addEventListener('click', closeDisc);

  startDiscListener();   // pre-load comments on page load (public read)
}

function toggleDisc() {
  discOpen = !discOpen;
  const panel = document.getElementById('discPanel');
  panel.classList.toggle('disc-open', discOpen);
}

function closeDisc() {
  discOpen = false;
  document.getElementById('discPanel').classList.remove('disc-open');
}

function renderDiscBody() {
  const body = document.getElementById('discBody');
  if (!body) return;
  if (!discUid) {
    body.innerHTML = `
      <div class="disc-auth-prompt">
        <p>Sign in to leave a comment.</p>
        <button class="disc-signin-btn" id="discSignInBtn">
          <svg width="15" height="15" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.08 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-3.59-13.46-8.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>
          Sign in with Google
        </button>
        <button class="disc-signin-btn disc-signin-btn-gh" id="discSignInBtnGh">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
          Sign in with GitHub
        </button>
      </div>`;
    const discSignIn = async (prov) => {
      try { await signInWithPopup(auth, prov); }
      catch(e) { if (e.code !== 'auth/popup-closed-by-user') console.error(e); }
    };
    document.getElementById('discSignInBtn').addEventListener('click',   () => discSignIn(provider));
    document.getElementById('discSignInBtnGh').addEventListener('click', () => discSignIn(ghProvider));
  } else {
    body.innerHTML = `
      <div class="disc-compose">
        <textarea id="discInput" maxlength="500" placeholder="Share a thought, hint, or question…"></textarea>
        <div class="disc-compose-footer">
          <span class="disc-char-count" id="discCharCount">0 / 500</span>
          <button class="disc-post-btn" id="discPostBtn" disabled>Post</button>
        </div>
      </div>`;
    const inp = document.getElementById('discInput');
    const btn = document.getElementById('discPostBtn');
    inp.addEventListener('input', () => {
      const len = inp.value.length;
      document.getElementById('discCharCount').textContent = len + ' / 500';
      btn.disabled = len < 1;
    });
    inp.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) discPost();
    });
    btn.addEventListener('click', discPost);
  }
}

function renderComments() {
  const el     = document.getElementById('discComments');
  const moreEl = document.getElementById('discMore');
  if (!el) return;

  if (discAllComments.length === 0) {
    el.innerHTML = '<p class="disc-empty">No comments yet. Be the first.</p>';
    if (moreEl) moreEl.innerHTML = '';
    return;
  }

  const visible = discAllComments.slice(0, discShown);
  el.innerHTML = visible.map(d => {
    const c      = d.data();
    const canDel = discUid && (c.uid === discUid || discUid === ADMIN_UID);
    return `
      <div class="disc-comment" data-id="${escHtml(d.id)}">
        <div class="disc-comment-meta">
          <span class="disc-comment-user">${escHtml(c.username || 'anon')}</span>
          ${canDel ? `<button class="disc-comment-del" data-id="${escHtml(d.id)}" aria-label="Delete">✕</button>` : ''}
          <span class="disc-comment-time">${discTimeAgo(c.createdAt)}</span>
        </div>
        <div class="disc-comment-text">${escHtml(c.text)}</div>
      </div>`;
  }).join('');

  el.querySelectorAll('.disc-comment-del').forEach(btn => {
    btn.addEventListener('click', () => discDelete(btn.dataset.id));
  });

  if (moreEl) {
    const remaining = discAllComments.length - discShown;
    if (remaining > 0) {
      moreEl.innerHTML = `<button class="disc-more-btn" id="discMoreBtn">Show ${remaining} more comment${remaining !== 1 ? 's' : ''} ↓</button>`;
      document.getElementById('discMoreBtn').addEventListener('click', () => {
        discShown += DISC_PAGE;
        renderComments();
      });
    } else {
      moreEl.innerHTML = '';
    }
  }
}

function startDiscListener() {
  if (discUnsub) { discUnsub(); discUnsub = null; }
  const commRef = collection(db, `discussions/${slug}/comments`);
  const q = query(commRef, orderBy('createdAt', 'desc'));  // latest first
  discUnsub = onSnapshot(q, (snap) => {
    discAllComments = snap.docs;
    renderComments();
    // pulse dot when new comment arrives and panel is closed
    const dot = document.getElementById('discDot');
    if (dot && !discOpen) { dot.classList.add('pulse'); setTimeout(() => dot.classList.remove('pulse'), 3000); }
  }, (e) => { console.error('[ErrBits] disc listener error:', e); });
}

async function discPost() {
  const inp = document.getElementById('discInput');
  const btn = document.getElementById('discPostBtn');
  if (!inp || !btn || !discUid) return;
  const text = inp.value.trim();
  if (!text) return;

  btn.disabled = true;
  const user = auth.currentUser;
  const username = user?.displayName?.split(' ')[0] || user?.email?.split('@')[0] || 'anon';

  try {
    await addDoc(collection(db, `discussions/${slug}/comments`), {
      uid:       discUid,
      username:  username,
      text:      text,
      createdAt: serverTimestamp()
    });
    inp.value = '';
    document.getElementById('discCharCount').textContent = '0 / 500';
    btn.disabled = true;
  } catch(e) {
    console.error('[ErrBits] disc post failed:', e.code, e.message);
    btn.disabled = false;
  }
}

async function discDelete(commentId) {
  if (!discUid) return;
  try {
    await deleteDoc(doc(db, `discussions/${slug}/comments/${commentId}`));
  } catch(e) {
    console.error('[ErrBits] disc delete failed:', e.code, e.message);
  }
}

// ─────────────────────────── GLOBALS ─────────────────────────────

window.toggleBookmark  = toggleBookmark;
window.bmSignIn        = bmSignIn;
window.bmMsSignIn      = bmMsSignIn;
window.bmGhSignIn      = bmGhSignIn;
window.closeBmPrompt   = () => document.getElementById('bm-prompt')?.classList.remove('show');
window.manualSubscribe = manualSubscribe;

// Wire up newsletter form + inject beta checkbox + share bar after DOM ready
document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('nl-form');
  if (form) {
    form.addEventListener('submit', manualSubscribe);
    // Inject beta opt-in checkbox below the form
    const betaWrap = document.createElement('label');
    betaWrap.className = 'nl-beta-wrap';
    betaWrap.innerHTML =
      '<input type="checkbox" id="nl-beta-opt-in" class="nl-beta-check">' +
      '<span class="nl-beta-label">Join the SystemC Studio early access — free for the first 50 learners</span>';
    form.insertAdjacentElement('afterend', betaWrap);
  }
  injectShareBar();
  injectDiscPanel();
  renderDiscBody();
});