script.js

const ITEMS_PER_PAGE = 6
let currentPage = 1
let currentView = "grid"
let searchTerm = ""
let editingId = null

const products = [
  {
    id: 1,
    name: "Wireless Headphones",
    price: 4499,
    category: "Electronics",
    stock: 15,
    description: "High-quality wireless headphones with noise cancellation",
    image: "/wireless-headphones.png",
  },
  {
    id: 2,
    name: "USB-C Cable",
    price: 649,
    category: "Accessories",
    stock: 50,
    description: "Durable 2-meter USB-C charging cable",
    image: "/usb-c-cable.jpg",
  },
  {
    id: 3,
    name: "Laptop Stand",
    price: 1749,
    category: "Office",
    stock: 8,
    description: "Adjustable aluminum laptop stand",
    image: "/laptop-stand.png",
  },
  {
    id: 4,
    name: "Mechanical Keyboard",
    price: 5999,
    category: "Electronics",
    stock: 12,
    description: "RGB mechanical keyboard with blue switches",
    image: "/mechanical-keyboard.png",
  },
  {
    id: 5,
    name: "Wireless Mouse",
    price: 1299,
    category: "Electronics",
    stock: 25,
    description: "Ergonomic wireless mouse with 2.4GHz connectivity",
    image: "/wireless-mouse.png",
  },
  {
    id: 6,
    name: "Monitor Arm",
    price: 2899,
    category: "Office",
    stock: 10,
    description: "Full motion monitor arm with VESA mount",
    image: "/monitor-arm.jpg",
  },
  {
    id: 7,
    name: "Desk Lamp",
    price: 1599,
    category: "Office",
    stock: 20,
    description: "LED desk lamp with adjustable brightness",
    image: "/modern-desk-lamp.png",
  },
  {
    id: 8,
    name: "Phone Stand",
    price: 599,
    category: "Accessories",
    stock: 40,
    description: "Universal phone stand for desk",
    image: "/phone-stand.jpg",
  },
  {
    id: 9,
    name: "Webcam HD",
    price: 2999,
    category: "Electronics",
    stock: 18,
    description: "1080p HD webcam with built-in microphone",
    image: "/classic-webcam.png",
  },
  {
    id: 10,
    name: "Desk Organizer",
    price: 999,
    category: "Office",
    stock: 35,
    description: "Multi-compartment desk organizer",
    image: "/desk-organizer.png",
  },
  {
    id: 11,
    name: "Portable Charger",
    price: 1899,
    category: "Accessories",
    stock: 22,
    description: "20000mAh portable power bank",
    image: "/portable-charger-lifestyle.png",
  },
  {
    id: 12,
    name: "Bluetooth Speaker",
    price: 2499,
    category: "Electronics",
    stock: 14,
    description: "Portable Bluetooth speaker with deep bass",
    image: "/bluetooth-speaker.jpg",
  },
]

const modal = document.getElementById("modal")
const addBtn = document.getElementById("addBtn")
const cancelBtn = document.getElementById("cancelBtn")
const modalClose = document.querySelector(".modal-close")
const productForm = document.getElementById("productForm")
const searchInput = document.getElementById("searchInput")
const productContainer = document.getElementById("productContainer")
const toggleBtns = document.querySelectorAll(".toggle-btn")

// Modal handlers
addBtn.addEventListener("click", openModal)
cancelBtn.addEventListener("click", closeModal)
modalClose.addEventListener("click", closeModal)

modal.addEventListener("click", (e) => {
  if (e.target === modal) closeModal()
})

// Form submission
productForm.addEventListener("submit", (e) => {
  e.preventDefault()
  saveProduct()
})

// Search
searchInput.addEventListener("input", (e) => {
  searchTerm = e.target.value.toLowerCase()
  currentPage = 1
  render()
})

// View toggle
toggleBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    toggleBtns.forEach((b) => b.classList.remove("active"))
    btn.classList.add("active")
    currentView = btn.dataset.view
    render()
  })
})

function openModal() {
  editingId = null
  document.getElementById("modalTitle").textContent = "Add Product"
  productForm.reset()
  document.getElementById("productId").value = ""
  clearErrors()
  modal.classList.add("open")
}

function editProduct(id) {
  const product = products.find((p) => p.id === id)
  if (!product) return

  editingId = id
  document.getElementById("modalTitle").textContent = "Edit Product"
  document.getElementById("productId").value = product.id
  document.getElementById("productName").value = product.name
  document.getElementById("productPrice").value = product.price
  document.getElementById("productCategory").value = product.category
  document.getElementById("productStock").value = product.stock
  document.getElementById("productDescription").value = product.description
  document.getElementById("productImage").value = product.image
  clearErrors()
  modal.classList.add("open")
}

function closeModal() {
  modal.classList.remove("open")
  editingId = null
  productForm.reset()
}

function validateForm() {
  const name = document.getElementById("productName").value.trim()
  const price = document.getElementById("productPrice").value
  const category = document.getElementById("productCategory").value.trim()

  let isValid = true

  clearErrors()

  if (!name) {
    document.getElementById("nameError").textContent = "Product name is required"
    isValid = false
  }

  if (!price || price < 0) {
    document.getElementById("priceError").textContent = "Valid price is required"
    isValid = false
  }

  if (!category) {
    document.getElementById("categoryError").textContent = "Category is required"
    isValid = false
  }

  return isValid
}

function clearErrors() {
  document.getElementById("nameError").textContent = ""
  document.getElementById("priceError").textContent = ""
  document.getElementById("categoryError").textContent = ""
}

function saveProduct() {
  if (!validateForm()) return

  const id = document.getElementById("productId").value
  const newProduct = {
    id: id ? Number.parseInt(id) : Math.max(...products.map((p) => p.id), 0) + 1,
    name: document.getElementById("productName").value.trim(),
    price: Number.parseInt(document.getElementById("productPrice").value),
    category: document.getElementById("productCategory").value.trim(),
    stock: Number.parseInt(document.getElementById("productStock").value) || 0,
    description: document.getElementById("productDescription").value.trim(),
    image: document.getElementById("productImage").value.trim() || "/diverse-products-still-life.png",
  }

  if (id) {
    const index = products.findIndex((p) => p.id === newProduct.id)
    if (index !== -1) {
      products[index] = newProduct
    }
  } else {
    products.unshift(newProduct)
  }

  closeModal()
  currentPage = 1
  render()
}

function deleteProduct(id) {
  if (confirm("Are you sure you want to delete this product?")) {
    const index = products.findIndex((p) => p.id === id)
    if (index !== -1) {
      products.splice(index, 1)
      render()
    }
  }
}

function getFilteredProducts() {
  return products.filter(
    (p) => p.name.toLowerCase().includes(searchTerm) || p.category.toLowerCase().includes(searchTerm),
  )
}

function render() {
  const filtered = getFilteredProducts()
  const start = (currentPage - 1) * ITEMS_PER_PAGE
  const paginated = filtered.slice(start, start + ITEMS_PER_PAGE)

  productContainer.className = currentView === "list" ? "product-grid list-view" : "product-grid"

  if (paginated.length === 0) {
    productContainer.innerHTML = `
            <div class="empty-state" style="grid-column: 1 / -1;">
                <p>${searchTerm ? "No products found matching your search." : "No products yet. Add one to get started!"}</p>
            </div>
        `
  } else {
    productContainer.innerHTML = paginated
      .map(
        (product) => `
            <div class="product-card">
                ${currentView === "list" ? "" : ""}
                <img src="${product.image}" alt="${product.name}" class="product-image" onerror="this.src='/diverse-products-still-life.png'">
                <div class="product-content">
                    <div class="product-info">
                        <h3 class="product-name">${product.name}</h3>
                        <span class="product-category">${product.category}</span>
                        ${product.description ? `<p class="product-description">${product.description}</p>` : ""}
                        <div class="product-meta">
                            <span class="product-price">₹${product.price.toLocaleString("en-IN")}</span>
                            <span class="product-stock">Stock: ${product.stock}</span>
                        </div>
                    </div>
                    <div class="product-buttons">
                        <button class="edit-btn" onclick="editProduct(${product.id})">Edit</button>
                        <button class="delete-btn" onclick="deleteProduct(${product.id})">Delete</button>
                    </div>
                </div>
            </div>
        `,
      )
      .join("")
  }

  renderPagination(filtered.length)
}

function renderPagination(totalItems) {
  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE)
  const pagination = document.getElementById("pagination")

  if (totalPages <= 1) {
    pagination.innerHTML = ""
    return
  }

  let html = ""

  if (currentPage > 1) {
    html += `<button class="page-btn" onclick="changePage(${currentPage - 1})">Previous</button>`
  }

  for (let i = 1; i <= totalPages; i++) {
    html += `<button class="page-btn ${currentPage === i ? "active" : ""}" onclick="changePage(${i})">${i}</button>`
  }

  if (currentPage < totalPages) {
    html += `<button class="page-btn" onclick="changePage(${currentPage + 1})">Next</button>`
  }

  pagination.innerHTML = html
}

function changePage(page) {
  currentPage = page
  render()
  window.scrollTo({ top: 0, behavior: "smooth" })
}

render()