// Global script initialization test
console.log("=== MAIN.JS LOADED ===");
console.log("Current pathname:", window.location.pathname);
console.log(
  "Is comparison page:",
  window.location.pathname.includes("product-comparison.html")
);

// Update year in footer and handle smooth scrolling
function initSite() {
  // Update footer year
  const footer = document.querySelector("footer p");
  if (footer) {
    const currentYear = new Date().getFullYear();
    footer.innerHTML = footer.innerHTML.replace("2024", currentYear);
  }

  // Smooth scrolling for navigation links
  const navLinks = document.querySelectorAll('.nav-link[href^="#"]');
  navLinks.forEach((link) => {
    link.addEventListener("click", function (e) {
      e.preventDefault();
      const targetId = this.getAttribute("href").substring(1);
      const targetElement = document.getElementById(targetId);
      if (targetElement) {
        const headerHeight = 112;
        const targetPosition = targetElement.offsetTop - headerHeight;
        window.scrollTo({ top: targetPosition, behavior: "smooth" });
      }
    });
  });

  // Handle cross-page navigation links (links that point to other pages with anchors)
  const crossPageLinks = document.querySelectorAll('.nav-link[href*=".html#"]');
  crossPageLinks.forEach((link) => {
    link.addEventListener("click", function () {
      // allow default navigation
    });
  });

  // Remove any lingering .active classes and avoid adding new ones
  const allNavLinks = document.querySelectorAll(".nav-link");
  allNavLinks.forEach((a) => a.classList.remove("active"));

  // Do not add page-specific active state anymore
  // const currentPage = window.location.pathname.split("/").pop() || "index.html";
  // const currentPageLink = document.querySelector(`.nav-link[href="${currentPage}"]`);
  // if (currentPageLink) currentPageLink.classList.add("active");

  // Disable scroll-based active highlighting
  // (Keeping function for potential future use, but it does nothing now.)
  function updateActiveLink() {
    // no-op: active highlighting disabled globally
  }
  window.addEventListener("scroll", updateActiveLink);
  updateActiveLink();

  // Quantity controls on product detail page
  (function initQuantityControls() {
    const decr = document.getElementById("qty-decr");
    const incr = document.getElementById("qty-incr");
    const valueEl = document.getElementById("qty-value");
    if (!decr || !incr || !valueEl) return; // Not on product detail page

    function parseQty() {
      const n = parseInt(valueEl.textContent || "1", 10);
      return Number.isFinite(n) && n > 0 ? n : 1;
    }
    decr.addEventListener("click", () => {
      const next = Math.max(1, parseQty() - 1);
      valueEl.textContent = String(next);
    });
    incr.addEventListener("click", () => {
      const next = parseQty() + 1;
      valueEl.textContent = String(next);
    });
  })();

  // Related products (dynamic)
  (async function initRelated() {
    const grid = document.getElementById("related-grid");
    if (!grid) return;

    // Don't run this function on product detail pages - let the product detail function handle it
    const urlParams = new URLSearchParams(window.location.search);
    const productId = urlParams.get("id");
    if (productId) return;

    try {
      const res = await fetch("data/products.json", { cache: "no-store" });
      const data = await res.json();
      const products = Array.isArray(data.products) ? data.products : [];

      // Determine current product's category from the title text (fallback seating)
      const title = document.querySelector("h1");
      const currentName = (title?.textContent || "").trim();
      const current = products.find(
        (p) => (p.name || "").trim() === currentName
      );
      const category = current?.category || "seating";

      // Filter related: same category but not the current product
      const related = products.filter(
        (p) => p.category === category && p.name !== currentName
      );

      let page = 1;
      const pageSize = 4;

      function render() {
        grid.innerHTML = "";
        const start = 0;
        const end = page * pageSize; // cumulative show-more
        related.slice(start, end).forEach((p) => {
          const card = document.createElement("article");
          card.className = "rounded-lg overflow-hidden bg-white shadow-sm";

          // Distinct image background for Asgaard sofa to match others
          const imageBgClass =
            (p.name || "").toLowerCase() === "asgaard sofa"
              ? "bg-linen"
              : "bg-white";
          const panelBgClass = "bg-light-bg";

          card.innerHTML = `
            <div class=\"h-72 ${imageBgClass} flex items-center justify-center\">
              <img src=\"${p.image}\" alt=\"${
            p.alt || p.name
          }\" class=\"w-full h-full object-cover\" />
            </div>
            <div class=\"${panelBgClass} p-6\">
              <h3 class=\"font-poppins font-semibold text-2xl text-[#3A3A3A] mb-0\">${
                p.name
              }</h3>
            </div>`;
          grid.appendChild(card);
        });

        // Toggle show-more visibility
        const btn = document.getElementById("related-show-more");
        if (btn) {
          const hasMore = related.length > page * pageSize;
          btn.style.display = hasMore ? "inline-flex" : "none";
          // Ensure centered label
          btn.classList.add("inline-flex", "items-center", "justify-center");
        }
      }

      const btn = document.getElementById("related-show-more");
      if (btn) {
        btn.addEventListener("click", () => {
          page += 1;
          render();
        });
      }

      render();
    } catch (e) {
      console.error("Failed to load related products:", e);
    }
  })();

  // Blog search functionality (only runs on blog page)
  const blogSearchInput = document.getElementById("blog-search-input");
  if (blogSearchInput) {
    const pagination = document.getElementById("blog-pagination");
    const pageButtons = document.querySelectorAll(
      "#blog-pagination .blog-page-btn"
    );
    const nextButton = document.getElementById("blog-next-btn");
    const blogTagButtons = document.querySelectorAll(".tag-filter");
    let activeTag = "";
    let currentPage = 1;
    const pageSize = 4;

    function normalize(text) {
      return (text || "")
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, " ")
        .trim();
    }
    function getFilteredArticles() {
      const articles = Array.from(
        document.querySelectorAll("#main-blog-content article")
      );
      articles.sort((a, b) => {
        const ad = a.getAttribute("data-date") || "";
        const bd = b.getAttribute("data-date") || "";
        if (!ad && !bd) return 0;
        return bd.localeCompare(ad);
      });
      const query = normalize(blogSearchInput.value.trim());
      return articles.filter((article) => {
        const title = article.querySelector("h2")?.textContent || "";
        const excerpt = article.querySelector("p")?.textContent || "";
        const haystack = normalize(`${title} ${excerpt}`);
        const tagList = (article.getAttribute("data-tags") || "")
          .split(",")
          .map((t) => normalize(t));
        const matchesQuery = query === "" || haystack.includes(query);
        const matchesTag = activeTag === "" || tagList.includes(activeTag);
        return matchesQuery && matchesTag;
      });
    }
    function renderPage() {
      const filtered = getFilteredArticles();
      const total = filtered.length;
      const totalPages = Math.max(1, Math.ceil(total / pageSize));
      currentPage = Math.min(Math.max(1, currentPage), totalPages);
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      const toShow = new Set(filtered.slice(start, end));
      document.querySelectorAll("#main-blog-content article").forEach((a) => {
        a.style.display = toShow.has(a) ? "" : "none";
      });
      if (pagination) {
        const hasQuery = blogSearchInput.value.trim().length > 0;
        pagination.style.display = hasQuery ? "none" : "flex";
        pageButtons.forEach((btn) => {
          const p = Number(btn.getAttribute("data-page"));
          btn.classList.toggle("bg-uc-gold", p === currentPage);
          btn.classList.toggle("text-white", p === currentPage);
          btn.classList.toggle("bg-linen", p !== currentPage);
          btn.classList.toggle("text-black", p !== currentPage);
          btn.style.display = p <= totalPages ? "inline-flex" : "none";
        });
        if (nextButton) {
          nextButton.style.display = totalPages > 1 ? "inline-flex" : "none";
          nextButton.disabled = currentPage >= totalPages;
        }
      }
    }
    function filterPosts() {
      currentPage = 1;
      renderPage();
    }
    blogSearchInput.addEventListener("input", filterPosts);
    blogTagButtons.forEach((btn) => {
      btn.addEventListener("click", () => {
        const clickedTag = normalize(btn.getAttribute("data-tag"));
        activeTag = activeTag === clickedTag ? "" : clickedTag;
        blogTagButtons.forEach((b) => {
          b.classList.remove("border-uc-gold", "bg-gray-50", "text-uc-gold");
          b.setAttribute("aria-pressed", "false");
        });
        if (activeTag) {
          btn.classList.add("border-uc-gold", "bg-gray-50", "text-uc-gold");
          btn.setAttribute("aria-pressed", "true");
        }
        filterPosts();
      });
    });
    pageButtons.forEach((btn) =>
      btn.addEventListener("click", () => {
        currentPage = Number(btn.getAttribute("data-page")) || 1;
        renderPage();
      })
    );
    if (nextButton) {
      nextButton.addEventListener("click", () => {
        currentPage += 1;
        renderPage();
      });
    }
    renderPage();
  }

  // Inline "Read more" expansion for blog posts
  const articlesForExcerpt = document.querySelectorAll(
    "#main-blog-content article"
  );

  function truncateToWords(text, maxWords) {
    const words = (text || "").trim().split(/\s+/);
    if (words.length <= maxWords) return { text, truncated: false };
    return { text: words.slice(0, maxWords).join(" ") + "…", truncated: true };
  }

  articlesForExcerpt.forEach((article) => {
    const excerptP = article.querySelector("p");
    const readMoreBtn = article.querySelector(".read-more-toggle");
    if (!excerptP || !readMoreBtn) return;

    const fullExcerpt = excerptP.textContent || "";
    const { text: truncated, truncated: isTruncated } = truncateToWords(
      fullExcerpt,
      80
    );

    if (isTruncated) {
      // Store full text and show truncated preview
      excerptP.dataset.excerptFull = fullExcerpt;
      excerptP.textContent = truncated;
      readMoreBtn.style.display = "inline-block";
    } else {
      // Nothing to expand; hide the control
      readMoreBtn.style.display = "none";
    }

    // Click to expand (delegated fallback added below as well)
    readMoreBtn.addEventListener("click", (ev) => {
      ev.preventDefault();
      if (excerptP.dataset.excerptFull) {
        excerptP.textContent = excerptP.dataset.excerptFull;
        delete excerptP.dataset.excerptFull;
      }
      const fullBlock = article.querySelector(".full-content");
      if (fullBlock) fullBlock.classList.remove("hidden");
      readMoreBtn.style.display = "none";
    });
  });

  // Safety net: delegated handler in case markup changes
  document.addEventListener("click", (e) => {
    const trigger = e.target.closest(".read-more-toggle");
    if (!trigger) return;
    e.preventDefault();
    const article = trigger.closest("article");
    if (!article) return;
    const excerptP = article.querySelector("p");
    if (excerptP?.dataset?.excerptFull) {
      excerptP.textContent = excerptP.dataset.excerptFull;
      delete excerptP.dataset.excerptFull;
    }
    const fullBlock = article.querySelector(".full-content");
    if (fullBlock) fullBlock.classList.remove("hidden");
    trigger.style.display = "none";
  });

  // Footer newsletter subscribe validation and feedback (works on all pages)
  const siteFooter = document.querySelector("footer");
  if (siteFooter) {
    const emailInputs = siteFooter.querySelectorAll('input[type="email"]');
    emailInputs.forEach((emailInput) => {
      const inputRow = emailInput.closest(".flex") || emailInput.parentElement;
      let subscribeButton = inputRow ? inputRow.querySelector("button") : null;
      if (!subscribeButton) {
        subscribeButton = emailInput.parentElement?.querySelector("button");
      }
      if (!subscribeButton) return;
      subscribeButton.type = "button";
      let feedback = inputRow ? inputRow.nextElementSibling : null;
      if (!(feedback instanceof HTMLElement) || !feedback.dataset.feedback) {
        feedback = document.createElement("div");
        feedback.dataset.feedback = "newsletter";
        if (inputRow && inputRow.parentElement) {
          inputRow.parentElement.insertBefore(feedback, inputRow.nextSibling);
        }
      }
      feedback.className =
        "hidden mt-3 rounded-lg px-4 py-3 font-playfair text-base";
      function showMessage(text, type) {
        feedback.textContent = text;
        feedback.className =
          "mt-3 rounded-lg px-4 py-3 font-playfair text-base";
        if (type === "success") {
          feedback.classList.add(
            "bg-green-50",
            "border",
            "border-green-200",
            "text-green-800"
          );
        } else {
          feedback.classList.add(
            "bg-red-50",
            "border",
            "border-red-200",
            "text-red-800"
          );
        }
        feedback.classList.remove("hidden");
        setTimeout(() => feedback.classList.add("hidden"), 3000);
      }
      subscribeButton.addEventListener("click", (e) => {
        e.preventDefault();
        const value = (emailInput.value || "").trim();
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        emailInput.classList.remove("border-red-500");
        if (!emailRegex.test(value)) {
          emailInput.classList.add("border-red-500");
          showMessage("Please enter a valid email address.", "error");
          emailInput.focus();
          return;
        }
        showMessage("Thank you for subscribing!", "success");
        emailInput.value = "";
        subscribeButton.disabled = true;
        setTimeout(() => (subscribeButton.disabled = false), 1200);
      });
    });
  }
  // Story arrow button functionality
  const storyArrowButton = document.getElementById("story-arrow-button");
  if (storyArrowButton) {
    storyArrowButton.addEventListener("click", function () {
      // You can customize this action - for now, let's scroll to the products section
      const productsSection = document.getElementById("products");
      if (productsSection) {
        const headerHeight = 112;
        const targetPosition = productsSection.offsetTop - headerHeight;

        window.scrollTo({
          top: targetPosition,
          behavior: "smooth",
        });
      }
    });
  }

  // Product detail page functionality
  (async function initProductDetail() {
    console.log("Product detail script running...");

    // Check if we're on the product detail page
    const productTitle = document.querySelector("h1");
    if (!productTitle) {
      console.log("No h1 found, not on product detail page");
      return;
    }

    // Get product ID from URL
    const urlParams = new URLSearchParams(window.location.search);
    const productId = parseInt(urlParams.get("id"));
    console.log("Product ID from URL:", productId);

    if (!productId) {
      console.log("No product ID found in URL");
      return;
    }

    try {
      // Load product data
      const response = await fetch("data/products.json");
      const data = await response.json();
      const product = data.products.find((p) => p.id === productId);

      if (!product) {
        console.error("Product not found:", productId);
        return;
      }

      console.log("Loading product:", product);

      // Update page title
      document.title = `${product.name} - KHY`;

      // Update product title (the main product title, not the breadcrumb)
      const allH1s = document.querySelectorAll("h1");
      console.log("All H1 elements:", allH1s);
      if (allH1s.length > 1) {
        const mainProductTitle = allH1s[1]; // The second h1 should be the product title
        console.log("Main product title element:", mainProductTitle);
        if (mainProductTitle) {
          mainProductTitle.textContent = product.name;
        }
      }

      // Update product description - find by text content
      const allParagraphs = document.querySelectorAll("p");
      console.log("All paragraphs:", allParagraphs);
      const descriptionEl = Array.from(allParagraphs).find(
        (p) =>
          p.textContent &&
          p.textContent.includes(
            "Setting the bar as one of the loudest speakers"
          )
      );
      console.log("Description element:", descriptionEl);
      if (descriptionEl) {
        descriptionEl.textContent = product.description;
      }

      // Update main product image - find by alt text
      const allImages = document.querySelectorAll("img");
      console.log("All images:", allImages);
      const mainImage = Array.from(allImages).find(
        (img) => img.alt && img.alt.includes("Asgaard sofa")
      );
      console.log("Main image element:", mainImage);
      if (mainImage) {
        mainImage.src = product.image;
        mainImage.alt = product.alt || product.name;
      }

      // Update thumbnail images - find by alt text
      if (product.images && product.images.length > 0) {
        const allImages = document.querySelectorAll("img");
        const thumbnails = Array.from(allImages).filter(
          (img) =>
            img.alt &&
            (img.alt.includes("Outdoor sofa set") ||
              img.alt.includes("Stuart sofa") ||
              img.alt.includes("Maya sofa"))
        );
        console.log("Thumbnail images found:", thumbnails);
        product.images.forEach((imageSrc, index) => {
          if (thumbnails[index]) {
            thumbnails[index].src = imageSrc;
            thumbnails[index].alt = product.alt || product.name;
          }
        });
      }

      // Update size options - use the specific size-button class
      if (product.sizes) {
        const sizeButtons = document.querySelectorAll(".size-button");
        console.log("Size buttons found:", sizeButtons);

        // Hide all size buttons first
        sizeButtons.forEach((button) => {
          button.style.display = "none";
        });

        // Show and update only the buttons we need
        product.sizes.forEach((size, index) => {
          if (sizeButtons[index]) {
            sizeButtons[index].style.display = "flex";
            sizeButtons[index].textContent = size;
            // Set selected size
            if (size === product.selectedSize) {
              sizeButtons[index].classList.remove(
                "bg-floral-white",
                "text-black"
              );
              sizeButtons[index].classList.add("bg-uc-gold", "text-white");
            } else {
              sizeButtons[index].classList.remove("bg-uc-gold", "text-white");
              sizeButtons[index].classList.add("bg-floral-white", "text-black");
            }
          }
        });
      }

      // Update color options - find only the rounded color buttons, not size buttons
      if (product.colors) {
        const allButtons = document.querySelectorAll("button");
        const colorButtons = Array.from(allButtons).filter(
          (button) =>
            button.classList.contains("w-8") &&
            button.classList.contains("h-8") &&
            button.classList.contains("rounded-full") &&
            !button.textContent // Color buttons should not have text content
        );
        console.log("Color buttons found:", colorButtons);

        product.colors.forEach((color, index) => {
          if (colorButtons[index]) {
            colorButtons[index].style.backgroundColor = color.value;
            // Set selected color
            if (color.selected) {
              colorButtons[index].classList.add("border-2", "border-black");
            } else {
              colorButtons[index].classList.remove("border-2", "border-black");
            }
          }
        });
      }

      // Update product metadata - find by text content
      const allSpans = document.querySelectorAll("span");

      // Find and update Model No.
      const modelNoLabel = Array.from(allSpans).find(
        (span) => span.textContent === "Model No."
      );
      if (modelNoLabel && product.modelNo) {
        const modelNoValue =
          modelNoLabel.parentElement.querySelector("span:last-child");
        if (modelNoValue) {
          modelNoValue.textContent = product.modelNo;
        }
      }

      // Find and update Category
      const categoryLabel = Array.from(allSpans).find(
        (span) => span.textContent === "Category"
      );
      if (categoryLabel && product.category) {
        const categoryValue =
          categoryLabel.parentElement.querySelector("span:last-child");
        if (categoryValue) {
          categoryValue.textContent =
            product.category.charAt(0).toUpperCase() +
            product.category.slice(1);
        }
      }

      // Find and update Tags
      const tagsLabel = Array.from(allSpans).find(
        (span) => span.textContent === "Tags"
      );
      if (tagsLabel && product.tags) {
        const tagsValue =
          tagsLabel.parentElement.querySelector("span:last-child");
        if (tagsValue) {
          tagsValue.textContent = product.tags.join(", ");
        }
      }

      // Find and update Dimensions
      const dimensionsLabel = Array.from(allSpans).find(
        (span) => span.textContent === "Dimension"
      );
      console.log("Dimensions label found:", dimensionsLabel);
      console.log("Product dimensions:", product.dimensions);

      if (dimensionsLabel && product.dimensions) {
        const dimensionsValue =
          dimensionsLabel.parentElement.querySelector("span:last-child");
        console.log("Dimensions value element:", dimensionsValue);
        if (dimensionsValue) {
          dimensionsValue.textContent = product.dimensions;
          console.log("Updated dimensions to:", product.dimensions);
        }
      }

      // Update description content
      if (product.descriptionLong) {
        const descriptionContainer = document.querySelector(
          ".max-w-5xl.mx-auto.space-y-6"
        );
        if (descriptionContainer) {
          const descriptionParagraphs =
            descriptionContainer.querySelectorAll("p");
          console.log("Description paragraphs found:", descriptionParagraphs);

          // Update each paragraph with the product's description content
          product.descriptionLong.forEach((paragraph, index) => {
            if (descriptionParagraphs[index]) {
              descriptionParagraphs[index].textContent = paragraph;
            }
          });
        }
      }

      // Update gallery images
      if (product.galleryPairs) {
        // Find gallery images by alt text
        const allImages = document.querySelectorAll("img");
        const galleryImages = Array.from(allImages).filter(
          (img) =>
            img.alt &&
            (img.alt.includes("Sofa variant left") ||
              img.alt.includes("Sofa variant right"))
        );
        console.log("Gallery images found:", galleryImages);

        product.galleryPairs.forEach((pair, index) => {
          if (galleryImages[index * 2]) {
            galleryImages[index * 2].src = pair.left;
            galleryImages[index * 2].alt = product.alt || product.name;
          }
          if (galleryImages[index * 2 + 1]) {
            galleryImages[index * 2 + 1].src = pair.right;
            galleryImages[index * 2 + 1].alt = product.alt || product.name;
          }
        });
      }

      // Update related products section
      const relatedGrid = document.getElementById("related-grid");
      if (relatedGrid && product.category) {
        console.log("Current product category:", product.category);
        console.log(
          "All products:",
          data.products.map((p) => ({
            id: p.id,
            name: p.name,
            category: p.category,
          }))
        );

        // Filter related products by category (excluding current product)
        const relatedProducts = data.products
          .filter((p) => p.category === product.category && p.id !== product.id)
          .slice(0, 4);

        console.log("Related products found:", relatedProducts);

        relatedGrid.innerHTML = relatedProducts
          .map(
            (p) => `
          <a href="product-detail.html?id=${p.id}" class="block">
            <div class="rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-shadow">
              <div class="h-72 ${
                p.name.toLowerCase().includes("asgaard")
                  ? "bg-linen"
                  : "bg-white"
              } flex items-center justify-center">
                <img src="${p.image}" alt="${
              p.alt || p.name
            }" class="w-full h-full object-cover" />
              </div>
              <div class="bg-light-bg p-6">
                <h3 class="font-poppins font-semibold text-2xl text-[#3A3A3A] mb-0">${
                  p.name
                }</h3>
              </div>
            </div>
          </a>
        `
          )
          .join("");
      }
    } catch (error) {
      console.error("Error loading product data:", error);
    }
  })();
}

// Product Comparison Page Functionality
function initProductComparison() {
  console.log("=== INITIALIZING PRODUCT COMPARISON ===");

  // Get product IDs from URL parameters
  const urlParams = new URLSearchParams(window.location.search);
  const product1Id = urlParams.get("product1");
  const product2Id = urlParams.get("product2");

  console.log("URL Parameters:", { product1Id, product2Id });

  // Fetch product data
  fetch("data/products.json")
    .then((response) => {
      console.log("Fetch response status:", response.status);
      return response.json();
    })
    .then((data) => {
      console.log("Products data loaded:", data);
      console.log("Total products:", data.products.length);

      // Find products by ID
      const product1 = data.products.find((p) => p.id == product1Id);
      const product2 = data.products.find((p) => p.id == product2Id);

      console.log("Found products:", { product1, product2 });

      // Update product cards
      if (product1) {
        console.log("Updating product card 1 with:", product1.name);
        updateProductCard(1, product1);
        updateComparisonTable(product1, 1);
      }

      if (product2) {
        console.log("Updating product card 2 with:", product2.name);
        updateProductCard(2, product2);
        updateComparisonTable(product2, 2);
      }

      // Populate dropdown
      populateProductDropdown(data.products);

      // Update View More link with current comparison state
      updateViewMoreLink(product1Id, product2Id);
    })
    .catch((error) => {
      console.error("Error loading products:", error);
    });
}

function updateProductCard(slotNumber, product) {
  console.log(`=== UPDATING PRODUCT CARD ${slotNumber} ===`);
  console.log("Product data:", product);

  const cardContainer = document.querySelector(`.product-card-${slotNumber}`);
  console.log("Card container found:", cardContainer);

  if (cardContainer) {
    const imageContainer = cardContainer.querySelector("div");
    const title = cardContainer.querySelector("p");

    console.log("Image container found:", imageContainer);
    console.log("Title element found:", title);

    if (imageContainer) {
      console.log("Replacing image container with:", product.image);
      // Replace the placeholder div with an image
      imageContainer.innerHTML = `<img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover rounded-lg">`;
    }
    if (title) {
      console.log("Updating title to:", product.name);
      title.textContent = product.name;
    }
  } else {
    console.log(`Product card container .product-card-${slotNumber} not found`);
  }
}

function updateComparisonTable(product, slotNumber) {
  console.log(`=== UPDATING COMPARISON TABLE FOR SLOT ${slotNumber} ===`);
  console.log("Product:", product);

  // Update all sections
  const sections = ["general", "product", "dimensions", "warranty"];

  sections.forEach((section) => {
    console.log(`Updating ${section} section...`);
    updateTableSection(section, product, slotNumber);
  });
}

function updateTableSection(sectionName, product, slotNumber) {
  console.log(
    `=== UPDATING TABLE SECTION: ${sectionName} (SLOT ${slotNumber}) ===`
  );
  const sectionData = getProductSectionData(product, sectionName);

  // Find the section header
  const section = document.querySelector(
    `.comparison-table .${sectionName}-section`
  );
  if (!section) {
    console.log(`Section ${sectionName}-section not found`);
    return;
  }

  // Find the table that comes after this section header
  const sectionTable = section.nextElementSibling;
  if (!sectionTable) {
    console.log(`Table after ${sectionName}-section not found`);
    return;
  }

  // Find all flex rows and filter to only those with data columns
  const allRows = sectionTable.querySelectorAll(".flex.items-center");
  const rows = Array.from(allRows).filter((row) =>
    row.querySelector(".column-1")
  );
  console.log(
    `Found ${rows.length} data rows in ${sectionName} section (out of ${allRows.length} total rows)`
  );

  if (rows.length > 0 && sectionData) {
    console.log("Updating rows with data:", sectionData);

    // Update each row with the corresponding data
    rows.forEach((row, index) => {
      if (index < sectionData.length) {
        const column = row.querySelector(`.column-${slotNumber}`);
        if (column) {
          console.log(
            `Updating row ${index + 1} with data: ${sectionData[index]}`
          );
          console.log(`Row element:`, row);
          console.log(`Column element:`, column);
          console.log(`Column text before update: "${column.textContent}"`);
          column.textContent = sectionData[index];
          console.log(`Column text after update: "${column.textContent}"`);
        } else {
          console.log(`Column ${slotNumber} not found in row ${index + 1}`);
        }
      }
    });

    console.log("Table section updated successfully.");
  } else {
    console.log("No rows found or section data is empty, skipping update.");
    console.log("Rows found:", rows.length);
    console.log("Section data:", sectionData);
  }
}

function getProductSectionData(product, sectionName) {
  console.log(`=== GETTING PRODUCT SECTION DATA: ${sectionName} ===`);
  console.log("Product:", product);

  let sectionData;
  switch (sectionName) {
    case "general":
      sectionData = [
        product.salesPackage || "N/A", // Sales Package
        product.modelNo || "N/A", // Model Number
        product.additionalInformation?.Material || "N/A", // Secondary Material
        product.configuration || "N/A", // Configuration
        product.additionalInformation?.Upholstery || "N/A", // Upholstery Material
        product.colors?.[0]?.name || "N/A", // Upholstery Color
      ];
      break;
    case "product":
      sectionData = [
        product.fillingMaterial || "N/A", // Filling Material
        product.finishType || "N/A", // Finish Type
        product.adjustableHeadrest || "N/A", // Adjustable Headrest
        product.maxLoadCapacity || "N/A", // Maximum Load Capacity
        product.originOfManufacture || "N/A", // Origin of Manufacture
      ];
      break;
    case "dimensions":
      const dims = product.dimensions?.split(" x ") || [];
      sectionData = [
        dims[0] || "N/A", // Width
        dims[1] || "N/A", // Height
        dims[2] || "N/A", // Depth
        product.weight || "N/A", // Weight
        product.seatHeight || "N/A", // Seat Height
        product.legHeight || "N/A", // Leg Height
      ];
      break;
    case "warranty":
      sectionData = [
        product.additionalInformation?.Warranty || "N/A", // Warranty Summary
        product.warrantyServiceType || "N/A", // Warranty Service Type
        product.coveredInWarranty || "N/A", // Covered in Warranty
        product.notCoveredInWarranty || "N/A", // Not Covered in Warranty
        product.additionalInformation?.Warranty || "N/A", // Domestic Warranty
      ];
      break;
    default:
      sectionData = [];
  }

  console.log(`Section data for ${sectionName}:`, sectionData);
  console.log(`Detailed breakdown for ${sectionName}:`);
  sectionData.forEach((item, index) => {
    console.log(`  Item ${index + 1}: "${item}"`);
  });

  return sectionData;
}

function populateProductDropdown(products) {
  const dropdown = document.getElementById("product-dropdown");
  if (dropdown) {
    // Clear existing options except the first one
    while (dropdown.children.length > 1) {
      dropdown.removeChild(dropdown.lastChild);
    }

    // Add all products
    products.forEach((product) => {
      const option = document.createElement("option");
      option.value = product.id;
      option.textContent = product.name;
      dropdown.appendChild(option);
    });

    // Add event listener for product selection
    dropdown.addEventListener("change", function () {
      const selectedProductId = this.value;
      console.log("Product selected from dropdown:", selectedProductId);

      if (selectedProductId && selectedProductId !== "Choose a Product") {
        // Find the selected product
        const selectedProduct = products.find((p) => p.id == selectedProductId);

        if (selectedProduct) {
          console.log("Selected product found:", selectedProduct);

          // Update the second product slot
          updateProductCard(2, selectedProduct);
          updateComparisonTable(selectedProduct, 2);

          // Update URL to include the second product
          updateURLParameter("product2", selectedProductId);

          // Reset dropdown to default option
          this.value = "Choose a Product";
        }
      }
    });
  }
}

function updateURLParameter(param, value) {
  const url = new URL(window.location);
  url.searchParams.set(param, value);
  window.history.replaceState({}, "", url);
}

function updateViewMoreLink(product1Id, product2Id) {
  const viewMoreLink = document.querySelector(
    'a[href*="product-catalog.html"]'
  );
  if (viewMoreLink) {
    // Determine which slot is available (1 or 2)
    let availableSlot = 1;
    if (!product1Id) {
      availableSlot = 1;
    } else if (!product2Id) {
      availableSlot = 2;
    } else {
      // Both slots are filled, default to slot 2 for replacement
      availableSlot = 2;
    }

    let newHref = `product-catalog.html?returnTo=comparison&slot=${availableSlot}`;
    if (product1Id) newHref += `&product1=${product1Id}`;
    if (product2Id) newHref += `&product2=${product2Id}`;

    viewMoreLink.href = newHref;
    console.log("Updated View More link:", newHref);
  }
}

// Initialize product comparison if on comparison page
console.log("=== CHECKING IF COMPARISON PAGE INITIALIZATION SHOULD RUN ===");
console.log(
  "Pathname includes product-comparison.html:",
  window.location.pathname.includes("product-comparison.html")
);

if (window.location.pathname.includes("product-comparison.html")) {
  console.log("Product comparison page detected, initializing immediately");
  initProductComparison();

  // Also try on DOMContentLoaded as backup
  document.addEventListener("DOMContentLoaded", function () {
    console.log("Product comparison page DOMContentLoaded backup");
    initProductComparison();
  });
}

// Product Detail Page - Compare Products functionality
function initProductDetailCompare() {
  console.log("=== INITIALIZING PRODUCT DETAIL COMPARE ===");
  console.log("Current URL:", window.location.href);
  console.log("Pathname:", window.location.pathname);

  // Try to find the button immediately
  let compareButton = document.getElementById("compare-products-btn");
  console.log("Button found by ID:", compareButton);

  if (!compareButton) {
    console.log("Button not found by ID, trying text search...");
    const buttons = document.querySelectorAll("button");
    console.log("Total buttons found:", buttons.length);

    buttons.forEach((button, index) => {
      console.log(`Button ${index}: "${button.textContent.trim()}"`);
    });

    compareButton = Array.from(buttons).find(
      (button) => button.textContent.trim() === "Compare Products"
    );
    console.log("Button found by text search:", compareButton);
  }

  if (compareButton) {
    console.log("=== ADDING CLICK LISTENER ===");

    // Remove any existing listeners first
    compareButton.removeEventListener("click", handleCompareClick);
    compareButton.addEventListener("click", handleCompareClick);

    // Also add a direct onclick handler as backup
    compareButton.onclick = handleCompareClick;

    console.log("Click listener added successfully");
    console.log("Button element:", compareButton);
    console.log("Button text content:", compareButton.textContent);
  } else {
    console.log("=== BUTTON NOT FOUND ===");
    console.log("Compare Products button not found");
  }
}

// Separate function for the click handler
function handleCompareClick(event) {
  console.log("Compare Products button clicked");
  event.preventDefault();
  event.stopPropagation();

  // Get current product ID from URL
  const urlParams = new URLSearchParams(window.location.search);
  const productId = urlParams.get("id");

  console.log("Product ID from URL:", productId);

  if (productId) {
    // Navigate to comparison page with current product as product1
    const comparisonUrl = `product-comparison.html?product1=${productId}`;
    console.log("Navigating to:", comparisonUrl);
    window.location.href = comparisonUrl;
  } else {
    // If no product ID, just go to comparison page
    console.log("No product ID found, navigating to comparison page");
    window.location.href = "product-comparison.html";
  }
}

// Initialize immediately if we're on the product detail page
if (window.location.pathname.includes("product-detail.html")) {
  console.log(
    "Product detail page detected, initializing compare functionality immediately"
  );
  initProductDetailCompare();
}

// Also try to initialize on DOMContentLoaded
document.addEventListener("DOMContentLoaded", function () {
  console.log("DOMContentLoaded event fired");
  if (window.location.pathname.includes("product-detail.html")) {
    console.log("Product detail page detected in DOMContentLoaded");
    initProductDetailCompare();
  }
});

// Initialize product comparison if on comparison page
if (window.location.pathname.includes("product-comparison.html")) {
  document.addEventListener("DOMContentLoaded", function () {
    initProductComparison();
  });
}

// Initialize comparison functionality if on product catalog page
if (window.location.pathname.includes("product-catalog.html")) {
  console.log("=== PRODUCT CATALOG PAGE DETECTED ===");
  document.addEventListener("DOMContentLoaded", function () {
    console.log(
      "=== DOM CONTENT LOADED - INITIALIZING PRODUCT CATALOG COMPARISON ==="
    );
    initProductCatalogComparison();
  });
}

// Product Catalog - Handle comparison page returns
function initProductCatalogComparison() {
  const urlParams = new URLSearchParams(window.location.search);
  const returnTo = urlParams.get("returnTo");
  const slot = urlParams.get("slot");
  const product1Id = urlParams.get("product1");
  const product2Id = urlParams.get("product2");

  console.log("Product catalog comparison params:", {
    returnTo,
    slot,
    product1Id,
    product2Id,
  });

  if (returnTo === "comparison" && slot) {
    console.log("Setting up comparison return functionality for slot:", slot);

    // Note: Product card click handling is now done in products.js viewProduct method
    console.log(
      "Comparison mode activated - View buttons will navigate to comparison page"
    );
  }
}

// Replace Poppins with Playfair in all font references
function updateFontClasses() {
  // Find all elements with font-poppins class and replace with font-playfair
  const poppinsElements = document.querySelectorAll(".font-poppins");
  poppinsElements.forEach((element) => {
    element.classList.remove("font-poppins");
    element.classList.add("font-playfair");
  });
}

// Run font update on page load
document.addEventListener("DOMContentLoaded", function () {
  updateFontClasses();
});

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initSite);
} else {
  initSite();
}