import { Button } from "@/components/ui/button";
import {
  MessageSquare,
  CheckCircle,
  XCircle,
  Trash2,
  Loader2
} from "lucide-react";
import { StepValidationStatus } from "@/types";

interface StepActionsProps {
  isPlanner: boolean;
  commentsCount: number;
  onOpenComments: (e: React.MouseEvent) => void;
  onOpenDeleteDialog?: (e: React.MouseEvent) => void;
  onValidate?: (status: Exclude<StepValidationStatus, "pending">, e: React.MouseEvent) => void;
  validationStatus: StepValidationStatus;
  isValidating?: boolean;
  pendingStatus?: 'validating' | 'rejecting' | null;
}

export function StepActions({
  isPlanner,
  commentsCount,
  onOpenComments,
  onOpenDeleteDialog,
  onValidate,
  validationStatus,
  isValidating = false,
  pendingStatus = null,
}: StepActionsProps) {
  return (
    <div className="flex gap-2 justify-center">
      {/* Bouton commentaires */}
      <Button
        variant="ghost"
        size="sm"
        onClick={onOpenComments}
        className="text-gray-500 hover:text-gray-700"
      >
        <MessageSquare className="h-4 w-4 mr-1" />
        {commentsCount > 0 ? commentsCount : ''}
      </Button>

      {/* Boutons de validation/rejet (uniquement pour les voyageurs) */}
      {!isPlanner && onValidate && (
        <>
          <Button
            variant="ghost"
            size="sm"
            className={`${validationStatus === "approved" ? 'text-green-500' : 'text-gray-500 hover:text-green-500'}`}
            onClick={(e) => onValidate("approved", e)}
            disabled={isValidating}
          >
            {pendingStatus === 'validating' ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <CheckCircle className="h-4 w-4" />
            )}
          </Button>

          <Button
            variant="ghost"
            size="sm"
            className={`${validationStatus === "rejected" ? 'text-red-500' : 'text-gray-500 hover:text-red-500'}`}
            onClick={(e) => onValidate("rejected", e)}
            disabled={isValidating}
          >
            {pendingStatus === 'rejecting' ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <XCircle className="h-4 w-4" />
            )}
          </Button>
        </>
      )}

      {/* Bouton de suppression (uniquement pour les planners) */}
      {isPlanner && onOpenDeleteDialog && (
        <Button
          variant="ghost"
          size="sm"
          className="text-gray-500 hover:text-red-500"
          onClick={onOpenDeleteDialog}
        >
          <Trash2 className="h-4 w-4" />
        </Button>
      )}
    </div>
  );
}