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

interface ShipmentStatusModalProps {
  isOpen: boolean;
  onClose: () => void;
  shipmentId: number;
  shipmentNumber: string;
  role?: UserRole;
}

interface ShipmentBarcode {
  id: number;
  code: string;
  status: string;
  receivedAt?: string | null;
  supplierScannedAt?: string | null;
  purchaseOrderItem?: {
    id: number;
    quantityOrdered: number;
    product: {
      name: string;
      sku: string;
    };
    purchaseOrder?: {
      id: number;
      orderNumber: string;
      status: string;
      createdAt: string;
      warehouse?: {
        id: number;
        name: string;
      };
      supplier?: {
        id: number;
        name: string;
      };
    };
  };
}

interface ShipmentDetail {
  id: number;
  shipmentNumber: string;
  status: string;
  shipmentDate: string;
  createdAt: string;
  actor?: {
    firstname: string;
    lastname: string;
    email: string;
  };
  shipmentBarcodes: ShipmentBarcode[];
}

const ShipmentStatusModal: React.FC<ShipmentStatusModalProps> = ({
  isOpen,
  onClose,
  shipmentId,
  shipmentNumber,
  role,
}) => {
  const [shipmentData, setShipmentData] = useState<ShipmentDetail | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (isOpen && shipmentId) {
      fetchShipmentData();
    }
  }, [isOpen, shipmentId]);

  const fetchShipmentData = async () => {
    setLoading(true);
    setError(null);
    try {
      const response =
        await shipmentService.getShipmentWithPurchaseOrderDetails(shipmentId);
      setShipmentData(response.data);
    } catch (err) {
      console.error("Error fetching shipment data:", err);
      setError("Failed to load shipment information");
    } finally {
      setLoading(false);
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "received":
        return <MdCheckCircle className="text-green-500" size={20} />;
      case "dispatched":
        return <MdShipped className="text-orange-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 "dispatched":
        return "text-orange-600 bg-orange-50 border-orange-200";
      default:
        return "text-gray-600 bg-gray-50 border-gray-200";
    }
  };

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

  // Group barcodes by purchase order
  const groupBarcodesByPurchaseOrder = () => {
    if (!shipmentData?.shipmentBarcodes) return [];

    const grouped: { [key: string]: ShipmentBarcode[] } = {};

    shipmentData.shipmentBarcodes.forEach((barcode) => {
      // Skip barcodes without purchase order data
      if (
        !barcode.purchaseOrderItem?.purchaseOrder?.id ||
        !barcode.purchaseOrderItem?.purchaseOrder?.orderNumber
      ) {
        return;
      }

      const purchaseOrderId = barcode.purchaseOrderItem.purchaseOrder.id;
      const orderNumber = barcode.purchaseOrderItem.purchaseOrder.orderNumber;
      const key = `${purchaseOrderId}-${orderNumber}`;

      if (!grouped[key]) {
        grouped[key] = [];
      }
      grouped[key].push(barcode);
    });

    return Object.entries(grouped).map(([key, barcodes]) => {
      const firstBarcode = barcodes[0];
      const purchaseOrder = firstBarcode.purchaseOrderItem?.purchaseOrder;

      return {
        key,
        purchaseOrderId: purchaseOrder?.id,
        orderNumber: purchaseOrder?.orderNumber || "Unknown Order",
        orderStatus: purchaseOrder?.status || "Unknown",
        orderDate: purchaseOrder?.createdAt,
        barcodes,
      };
    });
  };

  if (!isOpen) return null;

  const groupedData = groupBarcodesByPurchaseOrder();

  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">
                  Purchase Order Details
                </h3>
                <p className="text-sm text-gray-500 mt-1">
                  Shipment #{shipmentNumber}
                </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>
            )}

            {shipmentData && !loading && (
              <div className="space-y-6">
                {/* Shipment Summary */}
                <div className="bg-gray-50 rounded-lg p-4">
                  <h4 className="text-md font-medium text-gray-900 mb-3">
                    Shipment Summary
                  </h4>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                    <div>
                      <span className="font-medium text-gray-700">
                        Shipment Status:
                      </span>
                      <div className="flex items-center mt-1">
                        {getStatusIcon(shipmentData.status)}
                        <span className="ml-2 text-gray-900">
                          {getStatusLabel(shipmentData.status)}
                        </span>
                      </div>
                    </div>
                    <div>
                      <span className="font-medium text-gray-700">
                        Shipment Date:
                      </span>
                      <p className="text-gray-900 mt-1">
                        {formatDate(shipmentData.shipmentDate)}
                      </p>
                    </div>
                    <div>
                      <span className="font-medium text-gray-700">
                        Total Items:
                      </span>
                      <p className="text-gray-900 mt-1">
                        {shipmentData.shipmentBarcodes.length} barcodes
                      </p>
                    </div>
                    <div>
                      <span className="font-medium text-gray-700">
                        Purchase Orders:
                      </span>
                      <p className="text-gray-900 mt-1">
                        {groupedData.length} order
                        {groupedData.length !== 1 ? "s" : ""}
                      </p>
                    </div>
                  </div>
                </div>

                {/* Purchase Orders List */}
                <div>
                  <h4 className="text-md font-medium text-gray-900 mb-3">
                    Purchase Orders ({groupedData.length})
                  </h4>
                  <div className="space-y-6">
                    {groupedData.length === 0 ? (
                      <div className="text-center py-4">
                        <p className="text-gray-500 text-sm mb-2">
                          No purchase order data found in this shipment
                        </p>
                        <p className="text-gray-400 text-xs">
                          This might be due to missing purchase order
                          information for the barcodes.
                        </p>
                      </div>
                    ) : (
                      groupedData.map((orderGroup) => (
                        <div
                          key={orderGroup.key}
                          className="border border-gray-200 rounded-lg overflow-hidden"
                        >
                          {/* Purchase Order Header */}
                          <div className="bg-blue-50 px-4 py-3 border-b border-gray-200">
                            <div className="flex items-center justify-between">
                              <div>
                                <h5 className="text-sm font-semibold text-gray-900">
                                  Purchase Order #{orderGroup.orderNumber}
                                </h5>
                                <p className="text-xs text-gray-600 mt-1">
                                  Order Date:{" "}
                                  {formatDate(orderGroup.orderDate || "")}
                                </p>
                              </div>
                              <div className="flex items-center space-x-2">
                                <span className="text-xs text-gray-600">
                                  {orderGroup.barcodes.length} item
                                  {orderGroup.barcodes.length !== 1 ? "s" : ""}
                                </span>
                                <span
                                  className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(
                                    orderGroup.orderStatus
                                  )}`}
                                >
                                  {getStatusLabel(orderGroup.orderStatus)}
                                </span>
                              </div>
                            </div>
                          </div>

                          {/* Products in this Purchase Order */}
                          <div className="bg-white">
                            {orderGroup.barcodes.map((barcode) => (
                              <div
                                key={barcode.id}
                                className="px-4 py-3 border-b border-gray-100 last:border-b-0"
                              >
                                <div className="flex items-start justify-between">
                                  <div className="flex-1">
                                    <div className="flex items-center space-x-3 mb-2">
                                      <div>
                                        <h6 className="text-sm font-semibold text-gray-900">
                                          {barcode.purchaseOrderItem?.product
                                            ?.name || "Unknown Product"}
                                        </h6>
                                        <p className="text-xs text-gray-600">
                                          SKU:{" "}
                                          {barcode.purchaseOrderItem?.product
                                            ?.sku || "N/A"}
                                        </p>
                                      </div>
                                    </div>

                                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-sm">
                                      <div>
                                        <span className="font-medium text-gray-700">
                                          Barcode:
                                        </span>
                                        <p className="text-gray-900">
                                          {barcode.code}
                                        </p>
                                      </div>
                                      <div>
                                        <span className="font-medium text-gray-700">
                                          Quantity:
                                        </span>
                                        <p className="text-gray-900">
                                          {barcode.purchaseOrderItem
                                            ?.quantityOrdered || 1}
                                        </p>
                                      </div>
                                      <div>
                                        <span className="font-medium text-gray-700">
                                          Status:
                                        </span>
                                        <span
                                          className={`inline-flex px-2 py-1 text-xs font-semibold rounded-full ${getStatusColor(
                                            barcode.status
                                          )}`}
                                        >
                                          {getStatusLabel(barcode.status)}
                                        </span>
                                      </div>
                                    </div>

                                    {barcode.receivedAt && (
                                      <div className="text-sm mt-2">
                                        <span className="font-medium text-gray-700">
                                          Received At:
                                        </span>
                                        <p className="text-gray-900 mt-1">
                                          {formatDate(barcode.receivedAt)}
                                        </p>
                                      </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 ShipmentStatusModal;