// import React from "react";
// import { useGetProductsQuery } from "../../features/products/productApi";
// import { Link } from "react-router-dom";
// import { FiEye, FiEdit, FiTrash } from "react-icons/fi";

// const ProductList = () => {
//   const { data, isLoading, isError } = useGetProductsQuery({
//     page: 1,
//     limit: 10,
//   });

//   const handleDelete = (id) => {
//   if (confirm("Are you sure you want to delete this product?")) {
//     console.log("Delete Product:", id);
//     // Later you will add RTK mutation here
//   }
// };

//   const products = data?.data?.products || [];

//   if (isLoading)
//     return (
//       <div className="text-center mt-10 text-gray-500">Loading products...</div>
//     );

//   if (isError)
//     return (
//       <div className="text-center mt-10 text-red-600">
//         Failed to load products.
//       </div>
//     );

//   return (
//     <div className="space-y-6">
//       {/* <h2 className="text-xl font-semibold text-gray-600">Products</h2> */}
//       <div className="flex items-center justify-between mb-6">
//         {/* LEFT SIDE TITLE */}
//         <h2 className="text-xl font-semibold text-gray-700">Products</h2>

//         {/* RIGHT SIDE SEARCH BAR */}
//         <div className="flex items-center gap-3">
//           <input
//             type="text"
//             placeholder="Search products..."
//             className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60"
//           />

//           <Link
//             to="/products/add"
//             className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
//           >
//             + Add Product
//           </Link>
//         </div>
//       </div>

//       {products.length === 0 ? (
//         <div className="text-center text-gray-500 py-10">
//           No products found.
//         </div>
//       ) : (
//         <div className="overflow-x-auto">
//           <table className="min-w-full bg-white rounded-xl shadow-md divide-y divide-gray-200">
//             <thead className="bg-gray-50">
//               <tr>
//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
//                   Sr. No
//                 </th>
//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
//                   Name
//                 </th>
//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
//                   Price
//                 </th>
//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
//                   Status
//                 </th>
//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
//                   Views
//                 </th>
//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
//                   Created At
//                 </th>
//                 <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
//                   Actions
//                 </th>
//               </tr>
//             </thead>
//             <tbody className="divide-y divide-gray-200">
//               {products.map((product, index) => (
//                 <tr
//                   key={product._id}
//                   className="hover:bg-gray-50 transition-colors duration-150"
//                 >
//                   <td className="px-4 py-2 text-sm text-gray-700">
//                     {index + 1}
//                   </td>
//                   <td className="px-4 py-2 text-sm text-gray-800 font-medium">
//                     {product.name}
//                   </td>
//                   <td className="px-4 py-2 text-sm text-gray-700">
//                     ₹{product.basePrice}
//                   </td>
//                   <td className="px-4 py-2">
//                     <span
//                       className={`px-2 py-1 text-xs font-semibold rounded-full ${
//                         product.status === "active"
//                           ? "bg-green-100 text-green-800"
//                           : "bg-red-100 text-red-800"
//                       }`}
//                     >
//                       {product.status}
//                     </span>
//                   </td>
//                   <td className="px-4 py-2 text-sm text-gray-700">
//                     {product.viewCount}
//                   </td>
//                   <td className="px-4 py-2 text-sm text-gray-500">
//                     {new Date(product.createdAt).toLocaleDateString()}
//                   </td>
//                   {/* <td className="px-6 py-3">
//                     <Link
//                       to={`/products/${product.slug}`}
//                       className="inline-block px-4 py-1 text-sm font-medium bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
//                     >
//                       View Details
//                     </Link>
//                   </td> */}
//                   <td className="px-6 py-3">
//   <div className="flex items-center gap-3">

//     {/* View */}
//     <Link
//       to={`/products/${product.slug}`}
//       className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition"
//       title="View Product"
//     >
//       <FiEye size={18} />
//     </Link>

//     {/* Edit */}
//     <Link
//       to={`/products/edit/${product._id}`}
//       className="p-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition"
//       title="Edit Product"
//     >
//       <FiEdit size={18} />
//     </Link>

//     {/* Delete */}
//     <button
//       onClick={() => handleDelete(product._id)}
//       className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition"
//       title="Delete Product"
//     >
//       <FiTrash size={18} />
//     </button>

//   </div>
// </td>

//                 </tr>
//               ))}
//             </tbody>
//           </table>
//         </div>
//       )}
//     </div>
//   );
// };

// export default ProductList;

import React, { useState } from "react";
import { useGetProductsQuery } from "../../features/products/productAPI";
import { Link } from "react-router-dom";
import { FiEye, FiEdit, FiTrash } from "react-icons/fi";
import Table from "../../components/common/Table";
import Pagination from "../../components/common/Pagination";

const ProductList = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const perPage = 10;

  const { data, isLoading, isError } = useGetProductsQuery({
    page: currentPage,
    limit: perPage,
  });

  const handleDelete = (id) => {
    if (confirm("Are you sure you want to delete this product?")) {
      console.log("Delete Product:", id);
      // Later you will add RTK mutation here
    }
  };

  const products = data?.data?.products || [];
  const totalPages = Math.ceil(data?.data?.total / perPage || 0);

  // Table columns
  const columns = [
    {
      key: "sr",
      label: "Sr. No",
      render: (_, row, index) => index + 1,
    },
    {
      key: "name",
      label: "Name",
    },
    {
      key: "price",
      label: "Price",
      render: (_, row) => `₹${row.basePrice}`,
    },
    {
      key: "status",
      label: "Status",
      render: (_, row) => (
        <span
          className={`px-2 py-1 text-xs font-semibold rounded-full ${
            row.status === "active"
              ? "bg-green-100 text-green-800"
              : "bg-red-100 text-red-800"
          }`}
        >
          {row.status}
        </span>
      ),
    },
    {
      key: "views",
      label: "Views",
      render: (_, row) => row.viewCount,
    },
    {
      key: "createdAt",
      label: "Created At",
      render: (_, row) => new Date(row.createdAt).toLocaleDateString(),
    },
  ];

  // Action buttons
  const rowActions = (row) => (
    <div className="flex items-center justify-center gap-2">
      <Link
        to={`/products/${row.slug}`}
        className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition"
        title="View"
      >
        <FiEye size={18} />
      </Link>

      <Link
        to={`/products/edit/${row._id}`}
        className="p-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 transition"
        title="Edit"
      >
        <FiEdit size={18} />
      </Link>

      <button
        onClick={() => handleDelete(row._id)}
        className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition"
        title="Delete"
      >
        <FiTrash size={18} />
      </button>
    </div>
  );

  if (isLoading)
    return (
      <div className="text-center mt-10 text-gray-500">Loading products...</div>
    );

  if (isError)
    return (
      <div className="text-center mt-10 text-red-600">
        Failed to load products.
      </div>
    );

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-gray-700">Products</h2>
        <div className="flex items-center gap-3">
          <input
            type="text"
            placeholder="Search products..."
            className="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-400 outline-none w-60"
          />
          <Link
            to="/products/add"
            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
          >
            + Add Product
          </Link>
        </div>
      </div>

      {/* Table */}
      <Table columns={columns} data={products} actions={rowActions} />

      {/* Pagination */}
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={(pg) => setCurrentPage(pg)}
      />
    </div>
  );
};

export default ProductList;
