import React from "react";
import { Badge } from "@/components/ui/badge";
import { Zap, Clock, AlertTriangle, CheckCircle, XCircle, Package } from "lucide-react";

// Comprehensive color coding system
export const ORDER_STATUSES = {
  RAPID: {
    color: "bg-red-600 text-white border-0",
    dotColor: "bg-red-400",
    icon: Zap,
    label: "RAPID",
    priority: 1,
    description: "Must be filled immediately"
  },
  REQUESTED: {
    color: "bg-yellow-500 text-white border-0",
    dotColor: "bg-yellow-300",
    icon: Clock,
    label: "Requested",
    priority: 2,
    description: "Pending vendor review"
  },
  PARTIALLY_ASSIGNED: {
    color: "bg-orange-500 text-white border-0",
    dotColor: "bg-orange-300",
    icon: AlertTriangle,
    label: "Partially Assigned",
    priority: 3,
    description: "Missing staff"
  },
  FULLY_ASSIGNED: {
    color: "bg-green-600 text-white border-0",
    dotColor: "bg-green-400",
    icon: CheckCircle,
    label: "Fully Assigned",
    priority: 4,
    description: "All staff confirmed"
  },
  AT_RISK: {
    color: "bg-purple-600 text-white border-0",
    dotColor: "bg-purple-400",
    icon: AlertTriangle,
    label: "At Risk",
    priority: 2,
    description: "Workers not confirmed or declined"
  },
  COMPLETED: {
    color: "bg-slate-400 text-white border-0",
    dotColor: "bg-slate-300",
    icon: CheckCircle,
    label: "Completed",
    priority: 5,
    description: "Invoice and approval pending"
  },
  PERMANENT: {
    color: "bg-purple-700 text-white border-0",
    dotColor: "bg-purple-500",
    icon: Package,
    label: "Permanent",
    priority: 3,
    description: "Permanent staffing"
  },
  CANCELED: {
    color: "bg-slate-500 text-white border-0",
    dotColor: "bg-slate-300",
    icon: XCircle,
    label: "Canceled",
    priority: 6,
    description: "Order canceled"
  }
};

export function getOrderStatus(order) {
  // Check if RAPID
  if (order.is_rapid || order.event_name?.includes("RAPID")) {
    return ORDER_STATUSES.RAPID;
  }

  const assignedCount = order.assigned_staff?.length || 0;
  const requestedCount = order.requested || 0;

  // Check completion status
  if (order.status === "Completed") {
    return ORDER_STATUSES.COMPLETED;
  }

  if (order.status === "Canceled") {
    return ORDER_STATUSES.CANCELED;
  }

  // Check if permanent
  if (order.contract_type === "Permanent" || order.event_type === "Permanent") {
    return ORDER_STATUSES.PERMANENT;
  }

  // Check assignment status
  if (requestedCount > 0) {
    if (assignedCount >= requestedCount) {
      return ORDER_STATUSES.FULLY_ASSIGNED;
    } else if (assignedCount > 0) {
      return ORDER_STATUSES.PARTIALLY_ASSIGNED;
    } else {
      return ORDER_STATUSES.REQUESTED;
    }
  }

  // Default to requested
  return ORDER_STATUSES.REQUESTED;
}

export default function OrderStatusBadge({ order, size = "default", showIcon = true, showDot = true, className = "" }) {
  const status = getOrderStatus(order);
  const Icon = status.icon;

  const sizeClasses = {
    sm: "px-2 py-0.5 text-[10px]",
    default: "px-3 py-1 text-xs",
    lg: "px-4 py-1.5 text-sm"
  };

  return (
    <Badge 
      className={`${status.color} ${sizeClasses[size]} font-semibold shadow-sm whitespace-nowrap flex items-center gap-1.5 ${className}`}
      title={status.description}
    >
      {showDot && (
        <div className={`w-1.5 h-1.5 rounded-full ${status.dotColor} animate-pulse`} />
      )}
      {showIcon && <Icon className={size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'} />}
      {status.label}
    </Badge>
  );
}

// Helper function to sort orders by priority
export function sortOrdersByPriority(orders) {
  return [...orders].sort((a, b) => {
    const statusA = getOrderStatus(a);
    const statusB = getOrderStatus(b);
    
    // First by priority
    if (statusA.priority !== statusB.priority) {
      return statusA.priority - statusB.priority;
    }
    
    // Then by date (most recent first)
    return new Date(b.date || b.created_date) - new Date(a.date || a.created_date);
  });
}