const data = [
  {
    name: "Smartphone",
    description: "A powerful device for communication and entertainment.",
    price: 399.99,
    quantity: 70,
    status: "In Stock"
  },
  {
    name: "Laptop",
    description: "A portable computer for work and play.",
    price: 799.99,
    quantity: 0,
    status: "Out of Stock"
  },
  {
    name: "Gaming Console",
    description: "Next-gen gaming experience.",
    price: 499.99,
    quantity: 21,
    status: "In Transit"
  },
  {
    name: "Smart TV",
    description: "Immersive viewing experience.",
    price: 799.99,
    quantity: 103,
    status: "In Stock"
  },
  {
    name: "Wireless Headphones",
    description: "High-quality audio on the go.",
    price: 199.99,
    quantity: 85,
    status: "In Stock"
  }
];

const searchInput = document.getElementById("search-input");
const productTable = document.getElementById("product-table");

const createTable = () => {
  productTable.innerHTML = "";

  const tableBody = document.createElement("tbody");
  productTable.appendChild(tableBody);

  const tableHeader = document.createElement("thead");
  const headerRow = document.createElement("tr");

  ["Name", "Description", "Qty", "Status", "Price"].forEach((headerText) => {
    const headerCell = document.createElement("th");
    headerCell.textContent = headerText;
    headerRow.appendChild(headerCell);
  });

  tableHeader.appendChild(headerRow);
  productTable.appendChild(tableHeader);
};

const renderProductRow = (product) => {
  const row = document.createElement("tr");
  row.innerHTML = `
    <td>${product.name}</td>
    <td>${product.description}</td>
    <td>${product.quantity}</td>
    <td>${format.status(product.status)}</td>
    <td>${format.currency(product.price)}</td>
  `;
  product.quantity === 0 && row.classList.add("out-of-stock");
  return row;
};

const renderProducts = (filteredProducts) => {
  createTable();

  if (filteredProducts.length === 0) {
    const noProductsRow = document.createElement("tr");
    const noProductsCell = document.createElement("td");
    noProductsCell.colSpan = 3;
    noProductsCell.textContent = "No products found.";
    noProductsRow.appendChild(noProductsCell);
    productTable.querySelector("tbody").appendChild(noProductsRow);
  } else {
    filteredProducts.forEach((product) =>
      productTable.querySelector("tbody").appendChild(renderProductRow(product))
    );
  }
};

const filterProducts = (query) => {
  const lowercaseQuery = query.toLowerCase();
  return data.filter((product) =>
    product.name.toLowerCase().includes(lowercaseQuery)
  );
};

const format = {
  status: (status) => {
    switch (status) {
      case "In Stock":
        return `<span class='badge success'>${status}</span>`;
      case "Out of Stock":
        return `<span class='badge danger'>${status}</span>`;
      case "In Transit":
        return `<span class='badge pending'>${status}</span>`;
      default:
        return status;
    }
  },
  currency: (value) => {
    const formatter = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD"
    });
    return formatter.format(value);
  }
};

searchInput.addEventListener("input", () => {
  const query = searchInput.value.trim().toLowerCase();
  const filteredProducts = filterProducts(query);
  renderProducts(filteredProducts);
});

renderProducts(data);