import React from "react";
import { useNavigate } from "react-router-dom";
import { Eye } from "lucide-react";
import { formatDate } from "../../utils/formatDate";
import { useGetOrdersQuery } from "../../features/orders/ordersAPI";

const StatusBadge = ({ status }) => {
  const styles = {
    COMPLETED: "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]",
    PROCESSING: "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]",
    PENDING: "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]",
    REJECTED: "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]",
    DELIVERED: "bg-[#61b390]/10 border border-[#61b390] text-[#01352c]",
  };

  const boxClasses =
    "w-[93px] h-[27px] flex items-center justify-center rounded-[4.5px] text-xs font-bold";

  return <span className={`${boxClasses} ${styles[status]}`}>{status}</span>;
};

const PaymentBadge = ({ status }) => {
  const styles = {
    PAID: "bg-[#00B69B]/10 border border-[#00B69B] text-[#00B69B]",
    PROCESSING: "bg-[#6226EF]/10 border border-[#6226EF] text-[#6226EF]",
    PENDING: "bg-[#FFA756]/10 border border-[#FFA756] text-[#FFA756]",
    FAILED: "bg-[#EF3826]/10 border border-[#EF3826] text-[#EF3826]",
  };

  const boxClasses =
    "w-[93px] h-[27px] flex items-center justify-center rounded-[4.5px] text-xs font-bold";

  return <span className={`${boxClasses} ${styles[status]}`}>{status}</span>;
};

const OrderList = () => {
  // ✅ RTK Query handles fetching & state automatically
  const { data, isLoading, isError } = useGetOrdersQuery({
    page: 1,
    limit: 10,
  });
  const navigate = useNavigate();

  // Extract safely
  const orders = data?.data?.orders || [];

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-80 text-gray-600">
        Loading orders...
      </div>
    );
  }

  if (isError) {
    return (
      <div className="text-center text-red-600 py-10">
        Failed to load orders. Please try again.
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <h1 className="text-xl font-semibold text-gray-600">All Orders</h1>

      {orders.length === 0 ? (
        <div className="text-center py-10 text-gray-500">No orders found.</div>
      ) : (
        <div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
          <table className="min-w-full text-sm text-left">
            <thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
              <tr>
                <th className="px-6 py-3">Order #</th>
                <th className="px-6 py-3">Customer</th>
                <th className="px-6 py-3">Date</th>
                <th className="px-6 py-3">Total</th>
                <th className="px-6 py-3">Status</th>
                <th className="px-6 py-3">Payment</th>

                <th className="px-6 py-3 text-right">Action</th>
              </tr>
            </thead>
            <tbody>
              {orders.map((order) => (
                <tr
                  key={order.id}
                  className="border-t  hover:bg-gray-50 transition-colors"
                >
                  <td className="px-6 py-3 font-medium text-gray-800">
                    {order.orderNumber}
                  </td>
                  <td className="px-6 py-3 text-gray-700">
                    {order.user?.firstName} {order.user?.lastName}
                  </td>
                  <td className="px-6 py-3 text-gray-600">
                    {formatDate(order.createdAt)}
                  </td>
                  <td className="px-6 py-3 font-semibold text-green-600">
                    ₹{order.totalAmount}
                  </td>
                  <td className="px-6 py-3">
                    <StatusBadge status={order.status} />
                  </td>
                  <td className="px-6 py-3">
                    <PaymentBadge status={order.paymentStatus} />
                  </td>

                  <td className="px-6 py-3 text-right">
                    <button
                      onClick={() => navigate(`/orders/${order.id}`)}
                      className="text-blue-600 hover:text-blue-800 flex items-center gap-1"
                    >
                      <Eye size={16} /> View
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

export default OrderList;
