import React, { useState } from "react";
import { useGetReturnRequestsQuery } from "../../../features/orders/ordersAPI";
import { Link } from "react-router-dom";
import Table from "../../../components/common/Table";
import Pagination from "../../../components/common/Pagination";

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

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

  if (isLoading) return <p className="text-gray-500">Loading...</p>;
  if (isError)
    return <p className="text-red-600">Failed to load return requests.</p>;

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

  const columns = [
    { key: "sr", label: "Sr. No", render: (_, row, index) => index + 1 },
    { key: "orderNumber", label: "Order Number" },
    {
      key: "customer",
      label: "Customer",
      render: (_, row) =>
        `${row.user?.firstName || ""} ${row.user?.lastName || ""}`,
    },
    {
      key: "totalAmount",
      label: "Total",
      render: (_, row) => `₹${row.totalAmount}`,
    },
    { key: "returnStatus", label: "Status" },
    {
      key: "requestedAt",
      label: "Requested At",
      render: (_, row) => new Date(row.returnRequestedAt).toLocaleDateString(),
    },
  ];

  const rowActions = (row) => (
    <div className="flex items-center gap-2">
      <Link
        to={`/returns/${row.id}`} // <-- changed from order.id to row.id
        className="px-3 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200 transition"
      >
        View
      </Link>
    </div>
  );

  return (
    <div className="space-y-6">
      {/* <h2 className="text-xl font-semibold text-gray-700">Return Requests</h2> */}
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-gray-700">Return Requests</h2>
        {/* <span className="bg-red-600">for Admin - Pending / Approved / Rejected</span> */}
        <span className="text-sm bg-yellow-200 p-2 text-gray-500">
          Shows return requests that require admin action
          <span className="ml-1 text-yellow-600 font-medium">(Requested)</span>,
          <span className="ml-1 text-green-600 font-medium">Approved</span>,
          <span className="ml-1 text-red-600 font-medium">Rejected</span>
        </span>

        <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="/returns/history"
            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
          >
            Return History
          </Link>
        </div>
      </div>
      <Table columns={columns} data={returns} actions={rowActions} />

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

export default ReturnList;
