/**
* Prana Heals – Advanced JavaScript Functionality
* Features: AJAX Cart, Quick View, Scroll Animations, Lazy Loading
*/

(function() {
‘use strict’;

// ==========================================
// 1. Cart API Class (使用async/await)
// ==========================================
class CartAPI {
constructor() {
this.baseURL = ‘/wp-json/wc/store/v1/cart’;
this.nonce = window.pranaSettings?.nonce || ”;
}

async request(endpoint = ”, options = {}) {
try {
const response = await fetch(`${this.baseURL}${endpoint}`, {
…options,
headers: {
‘Content-Type’: ‘application/json’,
‘X-WC-Store-API-Nonce’: this.nonce,
…options.headers
},
credentials: ‘same-origin’
});

if (!response.ok) {
const error = await response.json();
throw new Error(error.message || ‘Request failed’);
}

return await response.json();

} catch (error) {
console.error(`CartAPI Error:`, error);
this.showNotification(error.message, ‘error’);
throw error;
}
}

async addItem(productId, quantity = 1) {
const result = await this.request(‘/add-item’, {
method: ‘POST’,
body: JSON.stringify({ id: productId, quantity })
});
this.updateCartUI(result);
this.showNotification(‘Added to cart! 🎉’, ‘success’);
return result;
}

async removeItem(itemKey) {
const result = await this.request(`/remove-item?key=${itemKey}`, {
method: ‘POST’
});
this.updateCartUI(result);
this.showNotification(‘Item removed’, ‘success’);
return result;
}

async updateQuantity(itemKey, quantity) {
const result = await this.request(`/update-item?key=${itemKey}`, {
method: ‘POST’,
body: JSON.stringify({ quantity })
});
this.updateCartUI(result);
return result;
}

async getCart() {
return this.request(”);
}

updateCartUI(cartData) {
// 更新购物车计数
const cartCount = document.querySelector(‘.cart-count’);
if (cartCount) {
cartCount.textContent = cartData.items_count || 0;
cartCount.style.animation = ‘pulse 0.3s ease’;
setTimeout(() => cartCount.style.animation = ”, 300);
}

// 更新购物车总价
const cartTotal = document.querySelector(‘.cart-total’);
if (cartTotal && cartData.totals) {
cartTotal.textContent = cartData.totals.total_price;
}
}

showNotification(message, type = ‘success’) {
const toast = document.createElement(‘div’);
toast.className = `toast ${type}`;
toast.innerHTML = `
${type === ‘success’ ? ‘✓’ : ‘✕’}
${message}
`;
toast.style.cssText = `
position: fixed;
top: 100px;
right: 20px;
background: ${type === ‘success’ ? ‘#4caf50’ : ‘#e53935’};
color: white;
padding: 16px 24px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
z-index: 9999;
animation: slideIn 0.3s ease;
`;

document.body.appendChild(toast);

setTimeout(() => {
toast.style.animation = ‘slideOut 0.3s ease’;
setTimeout(() => toast.remove(), 300);
}, 3000);
}
}

// ==========================================
// 2. Quick View Modal Class
// ==========================================
class QuickView {
constructor() {
this.modal = null;
this.overlay = null;
this.isOpen = false;
this.init();
}

init() {
this.createModalStructure();
this.bindEvents();
}

createModalStructure() {
// 创建遮罩
this.overlay = document.createElement(‘div’);
this.overlay.className = ‘quick-view-overlay’;
this.overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
`;

// 创建模态框
this.modal = document.createElement(‘div’);
this.modal.className = ‘quick-view-modal’;
this.modal.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
width: 90%;
max-width: 900px;
max-height: 90vh;
background: white;
border-radius: 20px;
overflow: hidden;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 25px 80px rgba(0,0,0,0.3);
`;

document.body.appendChild(this.overlay);
document.body.appendChild(this.modal);
}

bindEvents() {
// 使用事件委托绑定快速查看按钮
document.addEventListener(‘click’, (e) => {
const btn = e.target.closest(‘[data-quick-view]’);
if (btn) {
const productId = btn.dataset.productId;
this.open(productId);
}
});

// 关闭事件
this.overlay.addEventListener(‘click’, () => this.close());

document.addEventListener(‘keydown’, (e) => {
if (e.key === ‘Escape’ && this.isOpen) {
this.close();
}
});
}

async open(productId) {
this.isOpen = true;
this.showLoading();
this.animateIn();
document.body.style.overflow = ‘hidden’;

try {
// 并行获取产品和评价数据
const [product, reviews] = await Promise.all([
fetch(`/wp-json/wc/v3/products/${productId}`).then(r => r.json()),
fetch(`/wp-json/wc/v3/products/${productId}/reviews`).then(r => r.json())
]);

this.renderContent(product, reviews);

} catch (error) {
this.renderError(‘Failed to load product. Please try again.’);
}
}

showLoading() {
this.modal.innerHTML = `

`;
}

renderContent(product, reviews) {
const chakra = product.meta_data?.find(m => m.key === ‘chakra’)?.value || ”;
const energy = product.meta_data?.find(m => m.key === ‘energy_properties’)?.value || ”;
const blessed = product.meta_data?.find(m => m.key === ‘blessed_by_master’)?.value || false;

const avgRating = reviews.length
? (reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length).toFixed(1)
: ‘5.0’;

this.modal.innerHTML = `
×

`;

// 绑定关闭按钮
this.modal.querySelector(‘.quick-view-close’).addEventListener(‘click’, () => this.close());

// 绑定添加到购物车
this.modal.querySelector(‘.add-to-cart-btn’).addEventListener(‘click’, (e) => {
const id = e.target.dataset.productId;
window.pranaCart.addItem(id, 1);
});
}

renderError(message) {
this.modal.innerHTML = `

`;
}

animateIn() {
this.overlay.style.opacity = ‘1’;
this.overlay.style.visibility = ‘visible’;
this.modal.style.opacity = ‘1’;
this.modal.style.visibility = ‘visible’;
this.modal.style.transform = ‘translate(-50%, -50%) scale(1)’;
}

close() {
this.isOpen = false;
this.overlay.style.opacity = ‘0’;
this.overlay.style.visibility = ‘hidden’;
this.modal.style.opacity = ‘0’;
this.modal.style.visibility = ‘hidden’;
this.modal.style.transform = ‘translate(-50%, -50%) scale(0.9)’;
document.body.style.overflow = ”;
}
}

// ==========================================
// 3. Scroll Animations (Intersection Observer)
// ==========================================
class ScrollAnimations {
constructor() {
this.init();
}

init() {
const observerOptions = {
root: null,
rootMargin: ‘0px’,
threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘fade-in-visible’);
observer.unobserve(entry.target);
}
});
}, observerOptions);

// 观察所有需要动画的元素
document.querySelectorAll(‘.fade-in, .product-card, .testimonial-card’).forEach(el => {
el.style.opacity = ‘0’;
el.style.transform = ‘translateY(30px)’;
el.style.transition = ‘opacity 0.6s ease, transform 0.6s ease’;
observer.observe(el);
});
}
}

// ==========================================
// 4. Lazy Loading Images
// ==========================================
class LazyLoader {
constructor() {
this.init();
}

init() {
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove(‘lazy’);
img.style.opacity = ‘0’;
img.style.transition = ‘opacity 0.3s’;

img.onload = () => {
img.style.opacity = ‘1’;
};

observer.unobserve(img);
}
});
});

document.querySelectorAll(‘img[data-src]’).forEach(img => {
imageObserver.observe(img);
});
}
}

// ==========================================
// 5. Sticky Header with Scroll Effect
// ==========================================
class StickyHeader {
constructor() {
this.header = document.querySelector(‘.site-header’);
this.lastScroll = 0;
this.init();
}

init() {
if (!this.header) return;

window.addEventListener(‘scroll’, this.throttle(() => {
const currentScroll = window.pageYOffset;

// 添加/移除背景
if (currentScroll > 100) {
this.header.style.background = ‘#1a0f2e’;
this.header.style.boxShadow = ‘0 2px 20px rgba(0,0,0,0.1)’;
} else {
this.header.style.background = ‘transparent’;
this.header.style.boxShadow = ‘none’;
}

// 隐藏/显示（向下滚动隐藏，向上显示）
if (currentScroll > this.lastScroll && currentScroll > 200) {
this.header.style.transform = ‘translateY(-100%)’;
} else {
this.header.style.transform = ‘translateY(0)’;
}

this.lastScroll = currentScroll;
}, 100));
}

throttle(func, limit) {
let inThrottle;
return function(…args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}
}

// ==========================================
// 6. Free Shipping Progress Bar
// ==========================================
class FreeShippingBar {
constructor() {
this.threshold = 50;
this.init();
}

async init() {
try {
const cart = await window.pranaCart.getCart();
this.update(cart);
} catch (error) {
console.log(‘Cart not available yet’);
}
}

update(cartData) {
const subtotal = parseFloat(cartData.totals?.total_items || 0);
const remaining = this.threshold – subtotal;
const container = document.querySelector(‘.free-shipping-bar’);

if (!container) return;

if (remaining > 0) {
const percentage = (subtotal / this.threshold) * 100;
container.innerHTML = `

`;
} else {
container.innerHTML = `

`;
}
}
}

// ==========================================
// Initialize Everything
// ==========================================
document.addEventListener(‘DOMContentLoaded’, () => {
// 初始化购物车API
window.pranaCart = new CartAPI();

// 初始化快速查看
new QuickView();

// 初始化滚动动画
new ScrollAnimations();

// 初始化懒加载
new LazyLoader();

// 初始化粘性头部
new StickyHeader();

// 初始化免费配送进度条
new FreeShippingBar();

console.log(‘✨ Prana Heals – All systems initialized’);
});

})();

// CSS Animations
const style = document.createElement(‘style’);
style.textContent = `
@keyframes spin {
to { transform: rotate(360deg); }
}

@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}

@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}

.fade-in-visible {
opacity: 1 !important;
transform: translateY(0) !important;
}

.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.product-card:hover img {
transform: scale(1.05);
}

.site-header {
transition: all 0.3s ease;
}
`;
document.head.appendChild(style);