import React, { useEffect, useState } from "react";
import {
  MdClose,
  MdCheckCircle,
  MdSchedule,
  MdInventory,
  MdLocalShipping as MdShipped,
} from "react-icons/md";
import { formatDate } from "../../utils/dateUtils";
import { purchaseOrderService } from "../../services/api";
import { UserRole, getBarcodeStatusLabel, getShipmentStatusLabelForRole } from "../../utils/roleStatusLabels";

interface PurchaseOrderStatusModalProps {
  isOpen: boolean;
  onClose: () => void;
  purchaseOrderId: number;
  purchaseOrderNumber: string;
  role?: UserRole;
}

interface ShipmentDetail {
  barcodeId: number;
  barcodeCode: string;
  shipmentId: number;
  shipmentNumber: string;
  shipmentStatus: string;
  receivedAt: string | null;
}

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

interface ProductItem {
  id: number;
  productId: number;
  product: {
    id: number;
    name: string;
    sku: string;
    image: string | null;
  };
  quantityOrdered: number;
  barcodes: any[];
  quantityStatuses: QuantityStatus[];
  shipmentDetails: ShipmentDetail[] | null;
}

interface PurchaseOrderItemsData {
  purchaseOrderId: number;
  orderNumber: string;
  items: ProductItem[];
}

const PurchaseOrderStatusModal: React.FC<PurchaseOrderStatusModalProps> = ({
  isOpen,
  onClose,
  purchaseOrderId,
  purchaseOrderNumber,
  role,
}) => {
  const [itemsData, setItemsData] = useState<PurchaseOrderItemsData | null>(
    null
  );
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen && purchaseOrderId) {
      fetchItemsData();
    }
  }, [isOpen, purchaseOrderId]);

  const fetchItemsData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response =
        await purchaseOrderService.getPurchaseOrderItemsWithShipmentStatus(
          purchaseOrderId
        );
      setItemsData(response.data);
    } catch (err) {
      console.error("Error fetching items data:", err);
      setError("Failed to load product information");
    } finally {
      setLoading(false);
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "received":
        return <MdCheckCircle className="text-green-500" size={20} />;
      case "shipped":
        return <MdShipped className="text-orange-500" size={20} />;
      case "submitted":
        return <MdInventory className="text-purple-500" size={20} />;
      default:
        return <MdSchedule className="text-gray-400" size={20} />;
    }
  };

  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";
    }
  };

  const getShipmentStatusLabel = (status: string) => {
    if (role) {
      return getShipmentStatusLabelForRole(status, role);
    }
    switch (status) {
      case "dispatched":
        return "Dispatched";
      case "received":
        return "Received";
      default:
        return status;
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[9999] overflow-y-auto">
      <div className="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        {/* Background overlay */}
        <div
          className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
          onClick={onClose}
        />

        {/* Modal panel */}
        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl w-[95%] max-h-[90vh] overflow-y-auto">
          {/* Header */}
          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h3 className="text-lg leading-6 font-medium text-gray-900">
                  Product Status Details
                </h3>
                <p className="text-sm text-gray-500 mt-1">
                  Order #{purchaseOrderNumber}
                </p>
              </div>
              <button
                onClick={onClose}
                className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                <MdClose size={24} />
              </button>
            </div>

            {loading && (
              <div className="flex justify-center items-center py-8">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
              </div>
            )}

            {error && (
              <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-4">
                <p className="text-red-800 text-sm">{error}</p>
              </div>
            )}

            {itemsData && !loading && (
              <div className="space-y-6">
                {/* Products List */}
                <div>
                  <h4 className="text-md font-medium text-gray-900 mb-3">
                    Products ({itemsData.items.length})
                  </h4>
                  <div className="space-y-4">
                    {itemsData.items.length === 0 ? (
                      <p className="text-gray-500 text-sm text-center py-4">
                        No products found in this order
                      </p>
                    ) : (
                      itemsData.items.map((item) => (
                        <div
                          key={item.id}
                          className="p-4 rounded-lg border border-gray-200 bg-white"
                        >
                          <div className="flex items-start justify-between">
                            <div className="flex-1">
                              <div className="flex items-center space-x-3 mb-3">
                                <div>
                                  <h5 className="text-sm font-semibold text-gray-900">
                                    {item.product.name}
                                  </h5>
                                  <p className="text-xs text-gray-600">
                                    SKU: {item.product.sku}
                                  </p>
                                </div>
                              </div>

                              <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm mb-3">
                                <div>
                                  <span className="font-medium">
                                    Total Quantity:
                                  </span>{" "}
                                  {item.quantityOrdered}
                                </div>
                                <div>
                                  <span className="font-medium">Barcodes:</span>{" "}
                                  {item.barcodes.length}
                                </div>
                              </div>

                              {/* Individual Quantity Statuses */}
                              <div className="space-y-2">
                                <h6 className="text-sm font-medium text-gray-700">
                                  Quantity Statuses:
                                </h6>
                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                                  {item.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">
                                            <div className="text-xs font-medium">
                                              {quantityStatus.barcodeCode ? (
                                                <span>
                                                  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">
                                                Shipment: #
                                                {quantityStatus.shipmentNumber}
                                              </div>
                                            )}
                                            {quantityStatus.receivedAt && (
                                              <div className="text-xs text-gray-500">
                                                Received:{" "}
                                                {formatDate(
                                                  quantityStatus.receivedAt
                                                )}
                                              </div>
                                            )}
                                          </div>
                                        </div>
                                      </div>
                                    )
                                  )}
                                </div>
                              </div>

                              {/* Shipment Details */}
                              {item.shipmentDetails &&
                                item.shipmentDetails.length > 0 && (
                                  <div className="mt-3">
                                    <h6 className="text-sm font-medium text-gray-700 mb-2">
                                      Shipment Details:
                                    </h6>
                                    <div className="space-y-2">
                                      {item.shipmentDetails.map(
                                        (detail, index) => (
                                          <div
                                            key={detail.barcodeId}
                                            className="bg-white bg-opacity-50 rounded p-2 text-xs"
                                          >
                                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-1">
                                              <div>
                                                <span className="font-medium">
                                                  Barcode:
                                                </span>{" "}
                                                {detail.barcodeCode}
                                              </div>
                                              <div>
                                                <span className="font-medium">
                                                  Shipment:
                                                </span>{" "}
                                                #{detail.shipmentNumber}
                                              </div>
                                              <div>
                                                <span className="font-medium">
                                                  Status:
                                                </span>{" "}
                                                {getShipmentStatusLabel(
                                                  detail.shipmentStatus
                                                )}
                                              </div>
                                              {detail.receivedAt && (
                                                <div>
                                                  <span className="font-medium">
                                                    Received:
                                                  </span>{" "}
                                                  {formatDate(
                                                    detail.receivedAt
                                                  )}
                                                </div>
                                              )}
                                            </div>
                                          </div>
                                        )
                                      )}
                                    </div>
                                  </div>
                                )}
                            </div>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* Footer */}
          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
            <button
              type="button"
              onClick={onClose}
              className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PurchaseOrderStatusModal;