import React from "react";
import { X, Clock, Truck, CheckCircle2, Package } from "lucide-react";
import { useGetOrderHistoryQuery } from "../../features/orders/ordersAPI";

const getStatusColor = (status) => {
  switch (status) {
    case "DELIVERED":
      return "text-green-600 bg-green-100";
    case "SHIPPED":
      return "text-blue-600 bg-blue-100";
    case "PROCESSING":
      return "text-purple-600 bg-purple-100";
    case "CANCELLED":
      return "text-red-600 bg-red-100";
    default:
      return "text-gray-600 bg-gray-100";
  }
};

const OrderHistoryDrawer = ({ orderId, open, onClose }) => {
  const { data, isLoading } = useGetOrderHistoryQuery(orderId, {
    skip: !open,
  });

  const history = data?.data || [];

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex">
      {/* Overlay */}
      <div
        className="flex-1 bg-black/40 backdrop-blur-sm transition"
        onClick={onClose}
      />

      {/* Drawer */}
      <div className="w-full max-w-md bg-white shadow-2xl h-full flex flex-col animate-slide-in-right">

        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b sticky top-0 bg-white z-10">
          <div className="flex items-center gap-2">
            <Clock size={18} className="text-gray-600" />
            <h3 className="text-lg font-semibold text-gray-800">
              Order History
            </h3>
          </div>
          <button
            onClick={onClose}
            className="p-2 rounded-full hover:bg-gray-100 transition"
          >
            <X size={18} />
          </button>
        </div>

        {/* Body */}
        <div className="flex-1 overflow-y-auto px-6 py-6">

          {isLoading ? (
            <p className="text-gray-500 text-sm">Loading history...</p>
          ) : history.length === 0 ? (
            <p className="text-gray-400 text-sm">
              No history available
            </p>
          ) : (
            <div className="relative border-l-2 border-gray-200 ml-3">
              {history.map((event, index) => (
                <div key={event.id} className="mb-10 ml-6 relative">

                  {/* Timeline Dot */}
                  <span
                    className={`absolute -left-[14px] w-7 h-7 rounded-full flex items-center justify-center ring-4 ring-white text-xs font-bold shadow-md
                      ${getStatusColor(event.toStatus)}
                    `}
                  >
                    {event.toStatus === "DELIVERED" ? (
                      <CheckCircle2 size={14} />
                    ) : event.toStatus === "SHIPPED" ? (
                      <Truck size={14} />
                    ) : (
                      <Package size={14} />
                    )}
                  </span>

                  {/* Card */}
                  <div className="bg-gradient-to-r from-gray-50 to-gray-100 rounded-2xl p-4 shadow-sm hover:shadow-md transition">
                    
                    <div className="flex items-center justify-between">
                      <h4 className="font-semibold text-gray-800">
                        {event.fromStatus || "START"} → {event.toStatus}
                      </h4>

                      <span
                        className={`text-xs px-2 py-1 rounded-full font-medium ${getStatusColor(
                          event.toStatus
                        )}`}
                      >
                        {event.toStatus}
                      </span>
                    </div>

                    {event.trackingNumber && (
                      <p className="text-xs text-gray-600 mt-2">
                        🚚 Tracking:{" "}
                        <span className="font-medium">
                          {event.trackingNumber}
                        </span>
                      </p>
                    )}

                    {event.notes && (
                      <p className="text-xs text-gray-500 mt-2">
                        📝 {event.notes}
                      </p>
                    )}

                    {event.admin && (
                      <p className="text-xs text-gray-500 mt-2">
                        👤 {event.admin.firstName} {event.admin.lastName}
                      </p>
                    )}

                    <p className="text-xs text-gray-400 mt-3">
                      {new Date(event.createdAt).toLocaleString()}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

      </div>
    </div>
  );
};

export default OrderHistoryDrawer;
