// blog.js - fixed version with proper filtered view handling
(function () {
  const API_BASE = "/backend";
  const blogGrid = document.getElementById("blogGrid");
  if (!blogGrid) return;

  const filterBtns = document.querySelectorAll(".blog-filter .filter-btn");
  const loadMoreBtn = document.getElementById("loadMore");
  let posts = [];
  let filteredPosts = []; // Store filtered posts
  let userState = { 
    visitor_id: null, 
    likes: [], 
    favorites: [],
    isSubscribed: false
  };
  let isShowingAll = false; // Track if showing all posts
  let currentFilter = "all"; // Track current filter
  const POSTS_PER_PAGE = 4; // Changed from 3 to 4

  /* ---------------- visitor id ---------------- */
  function getVisitorId() {
    let id = localStorage.getItem("visitor_id");
    if (!id) {
      id = "v_" + Date.now().toString(36) + "_" + Math.random().toString(36).slice(2, 9);
      localStorage.setItem("visitor_id", id);
    }
    return id;
  }

  /* ---------------- enhanced subscription check ---------------- */
  async function checkSubscription() {
    try {
      const response = await fetch(`${API_BASE}/check_newsletter_session.php`);
      const data = await response.json();
      console.log('📊 Subscription check result:', data);
      userState.isSubscribed = data.subscribed === true;
      return userState.isSubscribed;
    } catch (error) {
      console.error('❌ Subscription check failed:', error);
      return false;
    }
  }

  /* ---------------- subscription prompt ---------------- */
  function showSubscriptionPrompt(action = 'perform this action') {
    const message = `Please subscribe to our newsletter to ${action}.`;
    
    // Create a custom modal instead of alert
    const modal = document.createElement('div');
    modal.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      backdrop-filter: blur(5px);
    `;
    
    modal.innerHTML = `
      <div style="background: var(--card-bg); padding: 2rem; border-radius: 12px; text-align: center; max-width: 400px; margin: 1rem;">
        <div style="font-size: 3rem; margin-bottom: 1rem;">📧</div>
        <h3 style="margin-bottom: 1rem; color: var(--text-primary);">Newsletter Subscription Required</h3>
        <p style="margin-bottom: 2rem; color: var(--text-secondary); line-height: 1.5;">
          ${message}
        </p>
        <div style="display: flex; gap: 1rem; justify-content: center;">
          <button id="subscribeNowBtn" style="
            background: var(--accent-primary);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
          ">Subscribe Now</button>
          <button id="closeModalBtn" style="
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            cursor: pointer;
          ">Maybe Later</button>
        </div>
      </div>
    `;
    
    document.body.appendChild(modal);
    
    // Add event listeners
    document.getElementById('subscribeNowBtn').addEventListener('click', () => {
      document.body.removeChild(modal);
      // Scroll to newsletter section
      const newsletterSection = document.querySelector('.newsletter-section');
      if (newsletterSection) {
        newsletterSection.scrollIntoView({ behavior: 'smooth' });
      } else {
        // Redirect to homepage with newsletter hash
        window.location.href = '/index.html#newsletter';
      }
    });
    
    document.getElementById('closeModalBtn').addEventListener('click', () => {
      document.body.removeChild(modal);
    });
  }

  /* ---------------- user state ---------------- */
  async function fetchUserState() {
    userState.visitor_id = getVisitorId();
    try {
      const res = await fetch(`${API_BASE}/get_user_stats.php?visitor_id=${encodeURIComponent(userState.visitor_id)}`);
      const json = await res.json();
      if (json && json.success && json.data) {
        userState.likes = (json.data.likes || []).map(Number);
        userState.favorites = (json.data.favorites || []).map(Number);
      }
    } catch (err) {
      console.warn("fetchUserState error:", err);
    }
  }

  /* ---------------- posts ---------------- */
  async function fetchPosts(category = "all") {
    try {
      const url = `${API_BASE}/get_posts.php?category=${encodeURIComponent(category)}&page=1&perPage=50`;
      const res = await fetch(url);
      const json = await res.json();
      if (json && json.success) {
        posts = json.data || [];
        // When fetching new posts, reset filteredPosts to the full list
        filteredPosts = [...posts];
        currentFilter = category;
        isShowingAll = false; // Reset view state
        renderPosts();
      } else {
        posts = [];
        filteredPosts = [];
        blogGrid.innerHTML = `<p style="color:#aaa; text-align:center; padding:40px;">No articles available</p>`;
      }
    } catch (err) {
      console.error("fetchPosts error:", err);
      blogGrid.innerHTML = `<p style="color:#aaa; text-align:center; padding:40px;">Error loading articles</p>`;
    }
  }

  /* ---------------- create card ---------------- */
  function createBlogCard(post = {}, index = 0) {
    const id = post.id ?? "";
    const title = post.title ?? "Untitled";
    const slug = post.slug ?? id;
    const category = post.category ?? "general";
    const image = post.image || "/uploads/blog/default.jpg";
    const author = post.author || "Admin";
    const excerpt = post.excerpt || "";
    const read_time = post.read_time || "";
    const published_date = post.published_date || "";

    const card = document.createElement("article");
    card.className = "blog-card";
    card.setAttribute("data-id", id);
    card.setAttribute("data-category", category);

    card.innerHTML = `
      <div class="card-image">
        <img src="${escapeHtml(image)}" alt="${escapeHtml(title)}" onerror="this.onerror=null;this.src='/uploads/blog/default.jpg'">
        <div class="card-category">${escapeHtml(capitalize(category))}</div>
        <div class="card-overlay">
          <div class="read-time">${escapeHtml(read_time)}</div>
          <button class="bookmark-btn" data-post="${id}" title="Favorite">
            <i class="${userState.favorites.includes(Number(id)) ? "fas" : "far"} fa-bookmark"></i>
          </button>
        </div>
      </div>

      <div class="card-content">
        <div class="card-meta">
          <span class="author">By ${escapeHtml(author)}</span>
          <span class="date">${formatDate(published_date)}</span>
        </div>
        <h3 class="card-title">${escapeHtml(title)}</h3>
        <p class="card-excerpt">${escapeHtml(excerpt)}</p>
        <div class="card-footer">
          <a href="article.html?slug=${encodeURIComponent(slug)}" class="read-more">
            Read Article <i class="fas fa-arrow-right"></i>
          </a>
          <div class="card-stats">
            <span class="stat like-stat" data-post="${id}">
              <i class="${userState.likes.includes(Number(id)) ? "fas" : "far"} fa-heart"></i>
              <span>${post.likes ?? 0}</span>
            </span>
            <span class="stat">
              <i class="far fa-comment"></i>
              <span>${post.comments_count ?? 0}</span>
            </span>
          </div>
        </div>
      </div>
    `;

    // clicking card opens article (unless clicked controls)
    card.addEventListener("click", (e) => {
      if (e.target.closest(".bookmark-btn") || e.target.closest(".like-stat") || e.target.closest(".read-more")) return;
      window.location.href = `article.html?slug=${encodeURIComponent(slug)}`;
    });

    return card;
  }

  /* ---------------- render posts ---------------- */
  function renderPosts() {
    blogGrid.innerHTML = "";
    
    // Determine which posts to render based on current filter and view state
    let postsToRender;
    
    if (currentFilter === "favorites" || currentFilter === "liked") {
      // For favorites/liked, always use filteredPosts (which contains the filtered list)
      postsToRender = isShowingAll ? filteredPosts : filteredPosts.slice(0, POSTS_PER_PAGE);
    } else {
      // For category filters or "all", use the main posts array
      postsToRender = isShowingAll ? posts : posts.slice(0, POSTS_PER_PAGE);
    }
    
    if (!Array.isArray(postsToRender) || postsToRender.length === 0) {
      blogGrid.innerHTML = `<p style="color:#aaa; text-align:center; padding:40px;">No articles found</p>`;
      updateLoadMoreButton();
      return;
    }

    postsToRender.forEach((p, i) => {
      const card = createBlogCard(p, i);
      blogGrid.appendChild(card);
      setTimeout(() => card.classList.add("visible"), i * 80);
    });

    attachCardEventHandlers();
    updateLoadMoreButton();
  }

  /* ---------------- update load more button ---------------- */
  function updateLoadMoreButton() {
    if (!loadMoreBtn) return;
    
    let totalPosts;
    
    if (currentFilter === "favorites" || currentFilter === "liked") {
      totalPosts = filteredPosts.length;
    } else {
      totalPosts = posts.length;
    }
    
    if (totalPosts <= POSTS_PER_PAGE) {
      loadMoreBtn.style.display = "none";
    } else {
      loadMoreBtn.style.display = "block";
      loadMoreBtn.innerHTML = isShowingAll ? 
        '<i class="fas fa-chevron-up"></i> View Less' : 
        '<i class="fas fa-chevron-down"></i> View All Articles';
    }
  }

  /* ---------------- render filtered posts ---------------- */
  function renderFilteredPosts(list, filterType) {
    filteredPosts = list;
    currentFilter = filterType;
    isShowingAll = false; // Reset to show limited posts first
    
    // Clear the grid
    blogGrid.innerHTML = "";
    
    if (!Array.isArray(filteredPosts) || filteredPosts.length === 0) {
      blogGrid.innerHTML = `<p style="color:#aaa; text-align:center; padding:40px;">No articles found</p>`;
      updateLoadMoreButton();
      return;
    }

    // Show limited posts initially
    const postsToShow = isShowingAll ? filteredPosts : filteredPosts.slice(0, POSTS_PER_PAGE);
    
    postsToShow.forEach((p, i) => {
      const card = createBlogCard(p, i);
      blogGrid.appendChild(card);
      setTimeout(() => card.classList.add("visible"), i * 80);
    });

    attachCardEventHandlers();
    updateLoadMoreButton();
  }

  /* ---------------- events for cards ---------------- */
  function attachCardEventHandlers() {
    // bookmarks (favorites)
    document.querySelectorAll(".bookmark-btn").forEach((btn) => {
      btn.removeEventListener("click", handleBookmarkClick);
      btn.addEventListener("click", handleBookmarkClick);
    });

    // likes
    document.querySelectorAll(".like-stat").forEach((stat) => {
      stat.removeEventListener("click", handleLikeClick);
      stat.addEventListener("click", handleLikeClick);
    });

    // read more anchors
    document.querySelectorAll(".read-more").forEach((a) => {
      a.removeEventListener("click", handleReadMoreClick);
      a.addEventListener("click", handleReadMoreClick);
    });
  }

  async function handleBookmarkClick(e) {
    e.preventDefault();
    e.stopPropagation();
    
    // Check subscription first
    if (!userState.isSubscribed) {
      showSubscriptionPrompt('bookmark articles');
      return;
    }
    
    const btn = e.currentTarget;
    const postId = Number(btn.getAttribute("data-post"));
    if (!postId) return;

    try {
      const res = await fetch(`${API_BASE}/toggle_favorite.php`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ post_id: postId, visitor_id: userState.visitor_id }),
      });
      const j = await res.json();
      if (j && j.success) {
        const icon = btn.querySelector("i");
        icon.classList.toggle("far");
        icon.classList.toggle("fas");
        
        // Update user state
        if (icon.classList.contains("fas")) {
          userState.favorites.push(postId);
        } else {
          userState.favorites = userState.favorites.filter(id => id !== postId);
        }
        
        // If we're on the favorites filter, update the view
        if (currentFilter === "favorites") {
          const favPosts = posts.filter((p) => userState.favorites.includes(Number(p.id)));
          renderFilteredPosts(favPosts, "favorites");
        }
      }
    } catch (err) {
      console.error("toggle_favorite error:", err);
    }
  }

  async function handleLikeClick(e) {
    e.preventDefault();
    e.stopPropagation();
    
    // Check subscription first
    if (!userState.isSubscribed) {
      showSubscriptionPrompt('like articles');
      return;
    }
    
    const stat = e.currentTarget;
    const postId = Number(stat.getAttribute("data-post"));
    if (!postId) return;

    try {
      const res = await fetch(`${API_BASE}/toggle_like.php`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ post_id: postId, visitor_id: userState.visitor_id }),
      });
      const j = await res.json();
      if (j && j.success) {
        const icon = stat.querySelector("i");
        const cnt = stat.querySelector("span");
        if (typeof j.likes !== "undefined") cnt.textContent = j.likes;
        icon.classList.toggle("far");
        icon.classList.toggle("fas");
        
        // Update user state
        if (icon.classList.contains("fas")) {
          userState.likes.push(postId);
        } else {
          userState.likes = userState.likes.filter(id => id !== postId);
        }
        
        // If we're on the liked filter, update the view
        if (currentFilter === "liked") {
          const likedPosts = posts.filter((p) => userState.likes.includes(Number(p.id)));
          renderFilteredPosts(likedPosts, "liked");
        }
      }
    } catch (err) {
      console.error("toggle_like error:", err);
    }
  }

  function handleReadMoreClick(e) {
    e.preventDefault();
    const slug = e.currentTarget.getAttribute("href").split('=')[1];
    if (!slug) return;
    window.location.href = `article.html?slug=${slug}`;
  }

  /* ---------------- filters ---------------- */
  if (filterBtns && filterBtns.length) {
    filterBtns.forEach((btn) => {
      btn.addEventListener("click", async function () {
        filterBtns.forEach((b) => b.classList.remove("active"));
        this.classList.add("active");
        const filter = this.dataset.filter;

        // Reset view state when changing filters
        isShowingAll = false;

        if (filter === "favorites") {
          if (!userState.isSubscribed) {
            showSubscriptionPrompt('view your favorite articles');
            return;
          }
          const favPosts = posts.filter((p) => userState.favorites.includes(Number(p.id)));
          renderFilteredPosts(favPosts, "favorites");
          return;
        }

        if (filter === "liked") {
          if (!userState.isSubscribed) {
            showSubscriptionPrompt('view your liked articles');
            return;
          }
          const likedPosts = posts.filter((p) => userState.likes.includes(Number(p.id)));
          renderFilteredPosts(likedPosts, "liked");
          return;
        }

        // For category filters, fetch new posts
        currentFilter = filter;
        await fetchPosts(filter);
      });
    });
  }

  /* ---------------- load more / view all ---------------- */
  if (loadMoreBtn) {
    loadMoreBtn.addEventListener("click", (e) => {
      e.preventDefault();
      
      // Toggle between showing all and showing limited posts
      isShowingAll = !isShowingAll;
      renderPosts();
      
      // Smooth scroll to top when showing less
      if (!isShowingAll) {
        blogGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  }

  /* ---------------- helpers ---------------- */
  function escapeHtml(str) {
    if (!str) return "";
    return String(str).replace(/[&<>"']/g, (m) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[m]));
  }
  function capitalize(s) {
    if (!s) return "";
    return s.charAt(0).toUpperCase() + s.slice(1);
  }
  function formatDate(d) {
    try {
      if (!d) return "";
      const dt = new Date(d);
      return dt.toLocaleDateString();
    } catch (e) {
      return d || "";
    }
  }

  /* ---------------- enhanced init ---------------- */
  (async function init() {
    console.log('🚀 Initializing blog system...');
    await fetchUserState();
    await checkSubscription(); // Check subscription status
    console.log('✅ Subscription status:', userState.isSubscribed);
    await fetchPosts("all");
    
    // Periodically check subscription status (every 30 seconds)
    setInterval(async () => {
      await checkSubscription();
    }, 30000);
  })();
})();