import React from "react";
import { useGetOrdersReportQuery } from "../../features/report/ordersAPI";
import { FiCheck, FiClock, FiX } from "react-icons/fi";

const statusConfig = {
  DELIVERED: {
    label: "Delivered",
    icon: <FiCheck className="text-green-500 w-6 h-6" />,
    color: "text-green-600",
  },
  PENDING: {
    label: "Pending",
    icon: <FiClock className="text-yellow-500 w-6 h-6" />,
    color: "text-yellow-600",
  },
  CANCELLED: {
    label: "Cancelled",
    icon: <FiX className="text-red-500 w-6 h-6" />,
    color: "text-red-600",
  },
};

const OrderCard = ({ status, count }) => {
  const config = statusConfig[status];

  return (
    <div className="bg-white rounded-xl shadow-md p-6 flex flex-col gap-4 hover:shadow-lg transition">
      <div className="flex items-center justify-between">
        <span className={`font-medium ${config.color}`}>{config.label}</span>
        <div>{config.icon}</div>
      </div>
      <h2 className="text-3xl font-bold text-gray-800">{count}</h2>
      <p className="text-gray-500 text-sm">Total {config.label} Orders</p>
    </div>
  );
};

const OrdersReport = () => {
  const { data, isLoading, isError } = useGetOrdersReportQuery();

  if (isLoading)
    return (
      <div className="p-6 text-center text-gray-400">
        Loading orders report...
      </div>
    );
  if (isError)
    return (
      <p className="p-6 text-center text-red-500">
        Error fetching orders report.
      </p>
    );

  const stats = ["DELIVERED", "PENDING", "CANCELLED"].map((status) => {
    const item = data?.data?.byStatus?.find((d) => d.status === status);

    return {
      status,
      count: item?.count ?? 0,
    };
  });

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {stats.map((item) => (
        <OrderCard key={item.status} status={item.status} count={item.count} />
      ))}
    </div>
  );
};

export default OrdersReport;
