import React from "react";
import {
  MdCheckCircle,
  MdSchedule,
  MdInventory,
  MdLocalShipping as MdShipped,
} from "react-icons/md";
import { formatDate } from "../../utils/dateUtils";
import { UserRole, getBarcodeStatusLabel } from "../../utils/roleStatusLabels";

interface QuantityStatus {
  barcodeId?: number;
  barcodeCode?: string;
  status: "not_started" | "submitted" | "shipped" | "received";
  shipmentNumber?: string | null;
  receivedAt?: string | null;
}

interface ProductQuantityStatusesProps {
  quantityStatuses: QuantityStatus[];
  className?: string;
  role?: UserRole;
}

const ProductQuantityStatuses: React.FC<ProductQuantityStatusesProps> = ({
  quantityStatuses,
  className = "",
  role,
}) => {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case "received":
        return <MdCheckCircle className="text-green-500" size={16} />;
      case "shipped":
        return <MdShipped className="text-orange-500" size={16} />;
      case "submitted":
        return <MdInventory className="text-purple-500" size={16} />;
      default:
        return <MdSchedule className="text-gray-400" size={16} />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "received":
        return "text-green-600 bg-green-50 border-green-200";
      case "shipped":
        return "text-orange-600 bg-orange-50 border-orange-200";
      case "submitted":
        return "text-purple-600 bg-purple-50 border-purple-200";
      default:
        return "text-gray-600 bg-gray-50 border-gray-200";
    }
  };

  const getStatusLabel = (status: string) => {
    if (role) {
      return getBarcodeStatusLabel(status, role);
    }
    switch (status) {
      case "received":
        return "Received";
      case "shipped":
        return "In Shipping";
      case "submitted":
        return "Submitted";
      default:
        return "Not Started";
    }
  };

  if (!quantityStatuses || quantityStatuses.length === 0) {
    return null;
  }

  return (
    <div className={`mt-3 ${className}`}>
      <h6 className="text-sm font-medium text-gray-700 mb-2">
        Quantity Statuses:
      </h6>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
        {quantityStatuses.map((quantityStatus, index) => (
          <div
            key={index}
            className={`p-2 rounded border ${getStatusColor(
              quantityStatus.status
            )}`}
          >
            <div className="flex items-center space-x-2">
              {getStatusIcon(quantityStatus.status)}
              <div className="flex-1 min-w-0">
                <div className="text-xs font-medium truncate">
                  {quantityStatus.barcodeCode ? (
                    <span title={quantityStatus.barcodeCode}>
                      Barcode: {quantityStatus.barcodeCode}
                    </span>
                  ) : (
                    <span>Quantity #{index + 1}</span>
                  )}
                </div>
                <div className="text-xs text-gray-600">
                  {getStatusLabel(quantityStatus.status)}
                </div>
                {quantityStatus.shipmentNumber && (
                  <div className="text-xs text-gray-500 truncate">
                    Shipment: #{quantityStatus.shipmentNumber}
                  </div>
                )}
                {quantityStatus.receivedAt && (
                  <div className="text-xs text-gray-500 truncate">
                    Received: {formatDate(quantityStatus.receivedAt)}
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductQuantityStatuses;