// Your existing JS starts here
jQuery(document).ready(function($) {
    console.log("JS loaded");
});


console.log("LUX MAIN JS IS RUNNING");

/* ============================
   LUX MAIN JS
   Combined: Tabs + Popup + Avatar Upload
============================ */

/* ----------------------------
   TAB SWITCHING
---------------------------- */
document.addEventListener("DOMContentLoaded", function () {

    const tabs = document.querySelectorAll(".lux-tab");
    const panes = document.querySelectorAll(".lux-tab-pane");

    tabs.forEach(tab => {
        tab.addEventListener("click", () => {

            tabs.forEach(t => t.classList.remove("active"));
            panes.forEach(p => p.classList.remove("active"));

            tab.classList.add("active");

            const target = tab.getAttribute("data-tab");
            const pane = document.getElementById(target);

            if (pane) pane.classList.add("active");
        });
    });

});


/* ----------------------------
   POPUP HANDLER
---------------------------- */
document.addEventListener("DOMContentLoaded", function () {

    const popup = document.getElementById("luxPopup");
    const inner = document.getElementById("luxPopupInner");

    if (!popup || !inner) return;

    // OPEN POPUP
    document.addEventListener("click", function (e) {
        const item = e.target.closest(".lux-grid-item");
        if (!item) return;

        const src = item.getAttribute("data-src");
        const type = item.getAttribute("data-type");

        inner.innerHTML = `
            <span id="luxClose" style="
                position:absolute;
                top:20px;
                left:20px;
                font-size:45px;
                color:white;
                cursor:pointer;
                z-index:999999999999;
            ">&times;</span>

            ${type === "image"
                ? `<img src="${src}" style="max-width:90%; max-height:80%;">`
                : `<video src="${src}" autoplay controls style="max-width:90%; max-height:80%;"></video>`
            }
        `;

        popup.style.display = "flex";
        setTimeout(() => popup.classList.add("show"), 10);

        document.getElementById("luxClose").onclick = closePopup;
    });

    // CLOSE POPUP
    function closePopup() {
        popup.classList.remove("show");
        setTimeout(() => popup.style.display = "none", 300);

        const vid = inner.querySelector("video");
        if (vid) vid.pause();
    }

    // CLICK OUTSIDE
    popup.addEventListener("click", (e) => {
        if (e.target === popup) closePopup();
    });

    // ESC KEY
    document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") closePopup();
    });

});


/* ----------------------------
   AVATAR PREVIEW + UPLOAD
---------------------------- */
document.addEventListener("DOMContentLoaded", function () {

    const input = document.getElementById("lux-avatar-input");
    const preview = document.getElementById("lux-avatar-preview");

    if (!input) {
        console.error("Avatar input not found");
        return;
    }

    input.addEventListener("change", function () {

        const file = input.files[0];
        if (!file) return;

        // Preview
        if (preview) {
            const reader = new FileReader();
            reader.onload = e => preview.src = e.target.result;
            reader.readAsDataURL(file);
        }

        // Upload
        const formData = new FormData();
        formData.append("action", "lux_upload_avatar");
        formData.append("nonce", lux_ajax.nonce);
        formData.append("avatar", file);

        fetch(lux_ajax.ajax_url, {
            method: "POST",
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            console.log("AJAX RESPONSE:", data);

            if (!data.success) {
                alert("Upload failed: " + ((data && data.data && data.data.message) ? data.data.message : "Unknown error"));

            }
        })
        .catch(err => {
            console.error("UPLOAD ERROR:", err);
            alert("Upload failed: Network error");
        });

    });

});



/* ============================
   HF REACTION PICKER
   Reactions: Fire, Love, Vibes, King
============================ */
(function () {
  var REACTIONS = [
    { id: 'fire',  emoji: String.fromCodePoint(0x1F525), label: 'Fire'  },
    { id: 'love',  emoji: String.fromCodePoint(0x2764),  label: 'Love'  },
    { id: 'vibes', emoji: String.fromCodePoint(0x1F3B5), label: 'Vibes' },
    { id: 'king',  emoji: String.fromCodePoint(0x1F451), label: 'King'  }
];

  function buildPicker() {
    var picker = document.createElement('div');
    picker.className = 'hf-reaction-picker';
    REACTIONS.forEach(function (r, i) {
      var item = document.createElement('button');
      item.className = 'hf-reaction-item';
      item.setAttribute('data-reaction', r.id);
      item.setAttribute('data-emoji', r.emoji);
      item.setAttribute('data-label', r.label);
      item.title = r.label;
      item.style.animationDelay = (i * 50) + 'ms';
      item.innerHTML =
'<span class="hf-reaction-emoji">' + r.emoji + '</span>' +
'<span class="hf-reaction-name">'  + r.label  + '</span>';
      picker.appendChild(item);
    });
    return picker;
  }

  function attachReactions() {
    document.querySelectorAll('.hf-like-btn:not([data-rx])').forEach(function (btn) {
      btn.setAttribute('data-rx', '1');

      var wrapper = btn.closest('.hf-post-actions') || btn.parentElement;
      wrapper.style.position = 'relative';

      var picker = buildPicker();
      btn.appendChild(picker);

      var hoverTimer = null;

      btn.addEventListener('mouseenter', function () {
        hoverTimer = setTimeout(function () {
          picker.classList.add('visible');
        }, 350);
      });

      btn.addEventListener('mouseleave', function (e) {
        clearTimeout(hoverTimer);
        if (!picker.contains(e.relatedTarget)) {
          setTimeout(function () {
            if (!picker.matches(':hover')) picker.classList.remove('visible');
          }, 100);
        }
      });

      picker.addEventListener('mouseleave', function () {
        picker.classList.remove('visible');
      });

      picker.addEventListener('click', function (e) {
        e.stopPropagation();
        var item = e.target.closest('.hf-reaction-item');
        if (!item) return;

        var emoji = item.getAttribute('data-emoji');
        var label = item.getAttribute('data-label');
        var rid   = item.getAttribute('data-reaction');

        var iconEl  = btn.querySelector('.hf-action-icon');
        var labelEl = btn.querySelector('.hf-action-label');
        if (iconEl)  { iconEl.textContent  = emoji; }
        if (labelEl) { labelEl.textContent = label; }

        btn.classList.add('hf-reacted');
        btn.setAttribute('data-current-reaction', rid);

        if (iconEl) {
          iconEl.classList.remove('hf-bounce');
          void iconEl.offsetWidth;
          iconEl.classList.add('hf-bounce');
        }

        // Fire existing AJAX like if available
        var postId = btn.getAttribute('data-id');
        if (postId && window.lux_ajax) {
          fetch(window.lux_ajax.ajax_url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'action=hf_like_post&post_id=' + postId +
                  '&reaction=' + rid + '&nonce=' + window.lux_ajax.nonce
          }).catch(function () {});
        }

        picker.classList.remove('visible');
      });
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    attachReactions();
    var feed = document.getElementById('hf-feed');
    if (feed) {
      new MutationObserver(attachReactions).observe(feed, { childList: true, subtree: true });
    }
  });
})();


/* ============================
   PORTFOLIO SHARE TO FEED
============================ */
(function () {
  var currentItemSrc = '';

  // Capture which grid item was clicked so we have its image URL
  document.addEventListener('click', function (e) {
    var item = e.target.closest('.lux-grid-item');
    if (item) currentItemSrc = item.getAttribute('data-src') || '';
  }, true);

  function injectShareBtn() {
    var inner = document.querySelector('.lux-popup-inner');
    if (!inner) return;

    // Remove old button if image changed (popup navigated to different item)
    var existing = inner.querySelector('.lux-popup-share-btn');
    if (existing) {
      if (existing.getAttribute('data-img') === currentItemSrc) return;
      existing.remove();
    }

    var likesRow = inner.querySelector('.lux-popup-likes-row');
    if (!likesRow) return;

    var btn = document.createElement('button');
    btn.className = 'lux-popup-share-btn';
    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg> Share';
    btn.setAttribute('data-img', currentItemSrc);

    btn.addEventListener('click', function () {
      var img = btn.getAttribute('data-img');
      if (!img || !window.lux_ajax) return;
      btn.disabled = true;
      btn.innerHTML = 'Sharing…';

      fetch(window.lux_ajax.ajax_url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'action=lux_share_portfolio' +
              '&image_url=' + encodeURIComponent(img) +
              '&nonce=' + encodeURIComponent(window.lux_ajax.post_nonce)
      })
      .then(function (r) { return r.json(); })
      .then(function (data) {
        if (data.success) {
          btn.innerHTML = '✓ Shared to Feed!';
          btn.classList.add('lux-share-done');
        } else {
          btn.innerHTML = 'Failed — retry';
          btn.disabled = false;
        }
      })
      .catch(function () {
        btn.innerHTML = 'Failed — retry';
        btn.disabled = false;
      });
    });

    likesRow.appendChild(btn);
  }

  document.addEventListener('DOMContentLoaded', function () {
    new MutationObserver(injectShareBtn).observe(document.body, { childList: true, subtree: true });
  });
})();