/**
 * Cart functionality
 */

let cartItems = [];

// Initialize the cart
function initCart() {
  loadCartFromStorage();
  updateCartDisplay();
}

// Add item to cart
function addToCart(productId, quantity = 1) {
  const product = getProduct(productId);
  if (!product) {
    console.error('Product not found:', productId);
    return;
  }
  const existingItemIndex = cartItems.findIndex(item => item.id === productId);
  if (existingItemIndex >= 0) {
    cartItems[existingItemIndex].quantity += quantity;
  } else {
    cartItems.push({
      id: product.id,
      name: product.name,
      price: product.price,
      image: product.image, 
      quantity
    });
  }
  saveCartToStorage();
  updateCartDisplay();
  showNotification(`${product.name} added to cart`);
}

// Remove item
function removeFromCart(productId) {
  cartItems = cartItems.filter(item => item.id !== productId);
  saveCartToStorage();
  updateCartDisplay();
}

// Update item quantity
function updateCartItemQuantity(productId, quantity) {
  if (quantity <= 0) return removeFromCart(productId);
  const itemIndex = cartItems.findIndex(item => item.id === productId);
  if (itemIndex >= 0) {
    cartItems[itemIndex].quantity = quantity;
    saveCartToStorage();
    updateCartDisplay();
  }
}

// Clear the entire cart
function clearCart() {
  cartItems = [];
  saveCartToStorage();
  updateCartDisplay();
}

// Calculate subtotal
function calculateSubtotal() {
  return cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);
}

// Save to localStorage
function saveCartToStorage() {
  localStorage.setItem('KYLNEX-cart', JSON.stringify(cartItems));
}

// Load from localStorage
function loadCartFromStorage() {
  const savedCart = localStorage.getItem('KYLNEX-cart');
  cartItems = savedCart ? JSON.parse(savedCart) : [];
}

// Update cart display
function updateCartDisplay() {
  const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0);
  document.querySelectorAll('.cart-count').forEach(el => {
    el.textContent = totalItems;
    el.style.display = totalItems > 0 ? 'flex' : 'none';
  });
  const cartItemsContainer = document.getElementById('cart-items-container');
  if (cartItemsContainer) updateCartPage();
}

// Update cart page display
function updateCartPage() {
  const cartItemsContainer = document.getElementById('cart-items-container');
  const emptyCartMessage = document.querySelector('.empty-cart-message');
  const subtotalElement = document.getElementById('cart-subtotal');
  const totalElement = document.getElementById('cart-total');
  const checkoutButton = document.getElementById('checkout-button');
  const clearCartButton = document.getElementById('clear-cart-button');
  const cartSummary = document.querySelector('.cart-summary');

  if (!cartItemsContainer || !emptyCartMessage) return;
  cartItemsContainer.querySelectorAll('.cart-item').forEach(el => el.remove());

  if (cartItems.length === 0) {
    emptyCartMessage.style.display = 'block';
    cartSummary.style.display = 'none'; // 🔥 Cart boşsa gizle
    subtotalElement.textContent = formatPrice(0);
    totalElement.textContent = formatPrice(0);
    checkoutButton.disabled = true;
    clearCartButton.disabled = true;
    return;
  }

  emptyCartMessage.style.display = 'none';
  cartSummary.style.display = 'block'; // 🔥 Cart doluysa göster
  checkoutButton.disabled = false;
  clearCartButton.disabled = false;

  cartItems.forEach(item => {
    const itemElement = document.createElement('div');
    itemElement.className = 'cart-item';
    itemElement.innerHTML = `
      <div class="cart-item-image">
         <img src="${item.image}" alt="${item.name}">
      </div>
      <div class="cart-item-details">
        <h3 class="cart-item-title">${item.name}</h3>
        <div class="cart-item-price">${formatPrice(item.price)}</div>
        <div class="cart-item-actions">
          <div class="cart-item-quantity">
            <button class="cart-quantity-btn decrease" data-id="${item.id}">-</button>
            <span class="cart-quantity-value">${item.quantity}</span>
            <button class="cart-quantity-btn increase" data-id="${item.id}">+</button>
          </div>
          <button class="cart-item-remove" data-id="${item.id}">Remove</button>
        </div>
      </div>
    `;
    cartItemsContainer.appendChild(itemElement);
  });

  const subtotal = calculateSubtotal();
  subtotalElement.textContent = formatPrice(subtotal);
  totalElement.textContent = formatPrice(subtotal);
  addCartEventListeners();
}

// Event listeners
function addCartEventListeners() {
  document.querySelectorAll('.cart-quantity-btn.decrease').forEach(btn => {
    btn.onclick = () => {
      const id = btn.getAttribute('data-id');
      const item = cartItems.find(item => item.id === id);
      if (item && item.quantity > 1) updateCartItemQuantity(id, item.quantity - 1);
    };
  });
  document.querySelectorAll('.cart-quantity-btn.increase').forEach(btn => {
    btn.onclick = () => {
      const id = btn.getAttribute('data-id');
      const item = cartItems.find(item => item.id === id);
      if (item) updateCartItemQuantity(id, item.quantity + 1);
    };
  });
  document.querySelectorAll('.cart-item-remove').forEach(btn => {
    btn.onclick = () => removeFromCart(btn.getAttribute('data-id'));
  });
  const clearCartButton = document.getElementById('clear-cart-button');
  if (clearCartButton) {
    clearCartButton.onclick = () => {
      if (confirm('Are you sure you want to clear your cart?')) clearCart();
    };
  }
}

// Notification
function showNotification(message) {
  let notification = document.getElementById('cart-notification');
  if (!notification) {
    notification = document.createElement('div');
    notification.id = 'cart-notification';
    notification.className = 'notification';
    document.body.appendChild(notification);
  }
  notification.textContent = message;
  notification.classList.add('show');
  setTimeout(() => notification.classList.remove('show'), 3000);
}

// Format price
function formatPrice(price) {
  return '$' + price.toFixed(2);
}

// Product data
function getProduct(id) {
  const products = {
    biometric: {
      id: 'biometric',
      name: 'KYLNEX Biometric Wallet',
      price: 159.99,
      image: '../assets/ob1.png'
    },
    card: {
      id: 'card',
      name: 'KYLNEX Card Wallet',
      price: 119.99,
      image: '../assets/ob4.png'
    },
    flex: {
      id: 'flex',
      name: 'KYLNEX Flex Wallet',
      price: 199.99,
      image: '../assets/ob7.png'
    }
  };
  return products[id];
}

// Init
document.addEventListener('DOMContentLoaded', function() {
  initCart();
  const addToCartButton = document.querySelector('.btn-add-to-cart');
  if (addToCartButton) {
    const productId = addToCartButton.getAttribute('data-product-id');
    const quantityInput = document.getElementById('quantity');
    if (quantityInput) {
      addToCartButton.addEventListener('click', function() {
        const quantity = parseInt(quantityInput.value, 10);
        addToCart(productId, quantity);
      });
    }
  }
});


const paymentMethod = document.getElementById('payment-method');
  const creditCardFields = document.getElementById('credit-card-fields');

  paymentMethod.addEventListener('change', () => {
    if (paymentMethod.value === 'credit-card') {
      creditCardFields.style.display = 'block';
    } else {
      creditCardFields.style.display = 'none';
    }
  });