import { memo, useState } from 'react';
import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { format } from 'date-fns';
import { SubmissionItemsList } from './SubmissionItemsList';
import { MeasurementDisplay } from '@/components/ui/measurement-display';

interface ModerationItem {
  id: string;
  type: 'review' | 'content_submission';
  content: any;
  created_at: string;
  updated_at?: string;
  user_id: string;
  status: string;
  submission_type?: string;
  user_profile?: {
    username: string;
    display_name?: string;
    avatar_url?: string;
  };
  entity_name?: string;
  park_name?: string;
  reviewed_at?: string;
  reviewed_by?: string;
  reviewer_notes?: string;
  reviewer_profile?: {
    username: string;
    display_name?: string;
    avatar_url?: string;
  };
  escalated?: boolean;
  assigned_to?: string;
  locked_until?: string;
}

import { ValidationSummary } from './ValidationSummary';
import type { ValidationResult } from '@/lib/entityValidationSchemas';

interface QueueItemProps {
  item: ModerationItem;
  isMobile: boolean;
  actionLoading: string | null;
  lockedSubmissions: Set<string>;
  currentLockSubmissionId?: string;
  notes: Record<string, string>;
  isAdmin: boolean;
  isSuperuser: boolean;
  queueIsLoading: boolean;
  onNoteChange: (id: string, value: string) => void;
  onApprove: (item: ModerationItem, action: 'approved' | 'rejected', notes?: string) => void;
  onResetToPending: (item: ModerationItem) => void;
  onRetryFailed: (item: ModerationItem) => void;
  onOpenPhotos: (photos: any[], index: number) => void;
  onOpenReviewManager: (submissionId: string) => void;
  onClaimSubmission: (submissionId: string) => void;
  onDeleteSubmission: (item: ModerationItem) => void;
  onInteractionFocus: (id: string) => void;
  onInteractionBlur: (id: string) => void;
}

const getStatusBadgeVariant = (status: string): "default" | "secondary" | "destructive" | "outline" => {
  switch (status) {
    case 'pending': return 'default';
    case 'approved': return 'secondary';
    case 'rejected': return 'destructive';
    case 'flagged': return 'destructive';
    case 'partially_approved': return 'outline';
    default: return 'outline';
  }
};

export const QueueItem = memo(({
  item,
  isMobile,
  actionLoading,
  lockedSubmissions,
  currentLockSubmissionId,
  notes,
  isAdmin,
  isSuperuser,
  queueIsLoading,
  onNoteChange,
  onApprove,
  onResetToPending,
  onRetryFailed,
  onOpenPhotos,
  onOpenReviewManager,
  onClaimSubmission,
  onDeleteSubmission,
  onInteractionFocus,
  onInteractionBlur
}: QueueItemProps) => {
  const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
  
  return (
    <Card 
      key={item.id} 
      className={`border-l-4 transition-opacity duration-200 ${
        validationResult?.blockingErrors && validationResult.blockingErrors.length > 0 ? 'border-l-red-600' :
        item.status === 'flagged' ? 'border-l-red-500' :
        item.status === 'approved' ? 'border-l-green-500' :
        item.status === 'rejected' ? 'border-l-red-400' :
        item.status === 'partially_approved' ? 'border-l-yellow-500' :
        'border-l-amber-500'
      }`}
      style={{ 
        opacity: actionLoading === item.id ? 0.5 : 1,
        pointerEvents: actionLoading === item.id ? 'none' : 'auto'
      }}
    >
      <CardHeader className={isMobile ? "pb-3 p-4" : "pb-4"}>
        <div className={`flex gap-3 ${isMobile ? 'flex-col' : 'items-center justify-between'}`}>
          <div className="flex items-center gap-2 flex-wrap">
            <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
              {item.type === 'review' ? (
                <>
                  <MessageSquare className="w-3 h-3 mr-1" />
                  Review
                </>
              ) : item.submission_type === 'photo' ? (
                <>
                  <Image className="w-3 h-3 mr-1" />
                  Photo
                </>
              ) : (
                <>
                  <FileText className="w-3 h-3 mr-1" />
                  Submission
                </>
              )}
            </Badge>
            <Badge variant={getStatusBadgeVariant(item.status)} className={isMobile ? "text-xs" : ""}>
              {item.status === 'partially_approved' ? 'Partially Approved' : 
               item.status.charAt(0).toUpperCase() + item.status.slice(1)}
            </Badge>
            {item.status === 'partially_approved' && (
              <Badge variant="outline" className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700">
                <AlertCircle className="w-3 h-3 mr-1" />
                Needs Retry
              </Badge>
            )}
            {lockedSubmissions.has(item.id) && item.type === 'content_submission' && (
              <Badge variant="outline" className="bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-300 dark:border-orange-700">
                <Lock className="w-3 h-3 mr-1" />
                Locked by Another Moderator
              </Badge>
            )}
            {currentLockSubmissionId === item.id && item.type === 'content_submission' && (
              <Badge variant="outline" className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700">
                <Lock className="w-3 h-3 mr-1" />
                Claimed by You
              </Badge>
            )}
            {item.submission_type && (
              <ValidationSummary
                item={{
                  item_type: item.submission_type,
                  item_data: item.content,
                  id: item.id,
                }}
                compact={true}
                onValidationChange={setValidationResult}
              />
            )}
          </div>
          <div className={`flex items-center gap-2 text-muted-foreground ${isMobile ? 'text-xs' : 'text-sm'}`}>
            <Calendar className={isMobile ? "w-3 h-3" : "w-4 h-4"} />
            {format(new Date(item.created_at), isMobile ? 'MMM d, yyyy' : 'MMM d, yyyy HH:mm')}
          </div>
        </div>
        
        {item.user_profile && (
          <div className={`flex items-center gap-3 ${isMobile ? 'text-xs' : 'text-sm'}`}>
            <Avatar className={isMobile ? "h-7 w-7" : "h-8 w-8"}>
              <AvatarImage src={item.user_profile.avatar_url} />
              <AvatarFallback className={isMobile ? "text-xs" : ""}>
                {(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
              </AvatarFallback>
            </Avatar>
            <div>
              <span className="font-medium">
                {item.user_profile.display_name || item.user_profile.username}
              </span>
              {item.user_profile.display_name && (
                <span className={`text-muted-foreground block ${isMobile ? 'text-xs' : 'text-xs'}`}>
                  @{item.user_profile.username}
                </span>
              )}
            </div>
          </div>
        )}
      </CardHeader>
      
      <CardContent className={`space-y-4 ${isMobile ? 'p-4 pt-0' : ''}`}>
        <div className={`bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4'}`}>
          {item.type === 'review' ? (
            <div>
              {item.content.title && (
                <h4 className="font-semibold mb-2">{item.content.title}</h4>
              )}
              {item.content.content && (
                <p className="text-sm mb-2">{item.content.content}</p>
              )}
              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
                <span>Rating: {item.content.rating}/5</span>
              </div>
              
              {/* Entity Names for Reviews */}
              {(item.entity_name || item.park_name) && (
                <div className="space-y-1 mb-2">
                  {item.entity_name && (
                    <div className="text-sm text-muted-foreground">
                      <span className="text-xs">{item.park_name ? 'Ride:' : 'Park:'} </span>
                      <span className="text-base font-medium text-foreground">{item.entity_name}</span>
                    </div>
                  )}
                  {item.park_name && (
                    <div className="text-sm text-muted-foreground">
                      <span className="text-xs">Park: </span>
                      <span className="text-base font-medium text-foreground">{item.park_name}</span>
                    </div>
                  )}
                </div>
              )}
               {item.content.photos && item.content.photos.length > 0 && (
                <div className="mt-3">
                  <div className="text-sm font-medium mb-2">Attached Photos:</div>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                    {item.content.photos.map((photo: any, index: number) => (
                      <div key={index} className="relative cursor-pointer" onClick={() => {
                        onOpenPhotos(item.content.photos.map((p: any, i: number) => ({
                          id: `${item.id}-${i}`,
                          url: p.url,
                          filename: `Review photo ${i + 1}`,
                          caption: p.caption
                        })), index);
                      }}>
                        <img
                          src={photo.url}
                          alt={`Review photo ${index + 1}`}
                          className="w-full h-20 object-cover rounded border bg-muted/30 hover:opacity-80 transition-opacity"
                          onError={(e) => {
                            console.error('Failed to load review photo:', photo.url);
                            (e.target as HTMLImageElement).style.display = 'none';
                          }}
                        />
                        <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white text-xs opacity-0 hover:opacity-100 transition-opacity rounded">
                          <Eye className="w-4 h-4" />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          ) : item.submission_type === 'photo' ? (
            <div>
              <div className="text-sm text-muted-foreground mb-3">
                Photo Submission
              </div>
              
              {/* Submission Title */}
              {item.content.title && (
                <div className="mb-3">
                  <div className="text-sm font-medium mb-1">Title:</div>
                  <p className="text-sm">{item.content.title}</p>
                </div>
              )}
              
              {/* Submission Caption */}
              {item.content.content?.caption && (
                <div className="mb-3">
                  <div className="text-sm font-medium mb-1">Caption:</div>
                  <p className="text-sm">{item.content.content.caption}</p>
                </div>
              )}
              
               {/* Photos */}
              {item.content.content?.photos && item.content.content.photos.length > 0 ? (
                <div className="space-y-4">
                  <div className="text-sm font-medium">Photos ({item.content.content.photos.length}):</div>
                  {item.content.content.photos.map((photo: any, index: number) => (
                    <div key={index} className="border rounded-lg p-3 space-y-2">
                      <div className="relative min-h-[100px] bg-muted/30 rounded border overflow-hidden cursor-pointer" onClick={() => {
                        onOpenPhotos(item.content.content.photos.map((p: any, i: number) => ({
                          id: `${item.id}-${i}`,
                          url: p.url,
                          filename: p.filename,
                          caption: p.caption
                        })), index);
                      }}>
                        <img
                          src={photo.url}
                          alt={`Photo ${index + 1}: ${photo.filename}`}
                          className="w-full max-h-64 object-contain rounded hover:opacity-80 transition-opacity"
                onError={(e) => {
                  console.error('Failed to load photo submission:', photo);
                  const target = e.target as HTMLImageElement;
                  target.style.display = 'none';
                  const parent = target.parentElement;
                  if (parent) {
                    // Create elements safely using DOM API to prevent XSS
                    const errorContainer = document.createElement('div');
                    errorContainer.className = 'absolute inset-0 flex flex-col items-center justify-center text-destructive text-xs';
                    
                    const errorIcon = document.createElement('div');
                    errorIcon.textContent = '⚠️ Image failed to load';
                    
                    const urlDisplay = document.createElement('div');
                    urlDisplay.className = 'mt-1 font-mono text-xs break-all px-2';
                    // Use textContent to prevent XSS - it escapes HTML automatically
                    urlDisplay.textContent = photo.url;
                    
                    errorContainer.appendChild(errorIcon);
                    errorContainer.appendChild(urlDisplay);
                    parent.appendChild(errorContainer);
                  }
                }}
                        />
                        <div className="absolute inset-0 flex items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity rounded">
                          <Eye className="w-5 h-5" />
                        </div>
                      </div>
                      <div className="space-y-1 text-xs text-muted-foreground">
                        <div className="flex justify-between">
                          <span className="font-medium">URL:</span>
                          <span className="font-mono text-xs break-all">{photo.url}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-medium">Filename:</span>
                          <span>{photo.filename || 'Unknown'}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-medium">Size:</span>
                          <span>{photo.size ? `${Math.round(photo.size / 1024)} KB` : 'Unknown'}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="font-medium">Type:</span>
                          <span>{photo.type || 'Unknown'}</span>
                        </div>
                        {photo.caption && (
                          <div className="pt-1">
                            <div className="font-medium">Caption:</div>
                            <div className="text-sm text-foreground mt-1">{photo.caption}</div>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-sm text-muted-foreground">
                  No photos found in submission
                </div>
              )}
              
              {/* Context Information */}
              {item.content.content?.context && (
                <div className="mt-3 pt-3 border-t text-xs text-muted-foreground">
                  <div className="flex justify-between">
                    <span className="font-medium">Context:</span>
                    <span className="capitalize">
                      {typeof item.content.content.context === 'object' 
                        ? (item.content.content.context.ride_id ? 'ride' : 
                           item.content.content.context.park_id ? 'park' : 'unknown')
                        : item.content.content.context}
                    </span>
                  </div>
                  {item.entity_name && (
                    <div className="flex justify-between">
                      <span className="font-medium text-xs">
                        {(typeof item.content.content.context === 'object' 
                          ? (item.content.content.context.ride_id ? 'ride' : 'park')
                          : item.content.content.context) === 'ride' ? 'Ride:' : 'Park:'}
                      </span>
                      <span className="font-medium text-foreground text-base">{item.entity_name}</span>
                    </div>
                  )}
                  {item.park_name && 
                   (typeof item.content.content.context === 'object' 
                     ? !!item.content.content.context.ride_id 
                     : item.content.content.context === 'ride') && (
                    <div className="flex justify-between">
                      <span className="font-medium text-xs">Park:</span>
                      <span className="font-medium text-foreground text-base">{item.park_name}</span>
                    </div>
                  )}
                </div>
              )}
            </div>
          ) : (
            <div>
              {/* Composite Submissions or Standard Submissions */}
              <SubmissionItemsList 
                submissionId={item.id}
                view="detailed"
                showImages={true}
              />
            </div>
          )}
        </div>
        
        {/* Action buttons based on status */}
        {(item.status === 'pending' || item.status === 'flagged') && (
          <>
            {/* Claim button for unclaimed submissions */}
            {!lockedSubmissions.has(item.id) && currentLockSubmissionId !== item.id && (
              <div className="mb-4">
                <Alert className="border-blue-200 bg-blue-50 dark:bg-blue-950/20">
                  <AlertCircle className="h-4 w-4 text-blue-600" />
                  <AlertTitle className="text-blue-900 dark:text-blue-100">Unclaimed Submission</AlertTitle>
                  <AlertDescription className="text-blue-800 dark:text-blue-200">
                    <div className="flex items-center justify-between mt-2">
                      <span className="text-sm">Claim this submission to lock it for 15 minutes while you review</span>
                      <Button
                        onClick={() => onClaimSubmission(item.id)}
                        disabled={queueIsLoading}
                        size="sm"
                        className="ml-4"
                      >
                        <Lock className="w-4 h-4 mr-2" />
                        Claim Submission
                      </Button>
                    </div>
                  </AlertDescription>
                </Alert>
              </div>
            )}
            
            <div className="space-y-2">
              <Label htmlFor={`notes-${item.id}`}>Moderation Notes (optional)</Label>
              <Textarea
                id={`notes-${item.id}`}
                placeholder="Add notes about your moderation decision..."
                value={notes[item.id] || ''}
                onChange={(e) => onNoteChange(item.id, e.target.value)}
                onFocus={() => onInteractionFocus(item.id)}
                onBlur={() => onInteractionBlur(item.id)}
                rows={2}
                disabled={lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
              />
            </div>
            
            <div className={`flex gap-2 pt-2 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
              {/* Show Review Items button for content submissions */}
              {item.type === 'content_submission' && (
                <Button
                  onClick={() => onOpenReviewManager(item.id)}
                  disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
                  variant="outline"
                  className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                  size={isMobile ? "default" : "default"}
                >
                  <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                  Review Items
                </Button>
              )}
              
              <Button
                onClick={() => onApprove(item, 'approved', notes[item.id])}
                disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                size={isMobile ? "default" : "default"}
              >
                <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                Approve
              </Button>
              <Button
                variant="destructive"
                onClick={() => onApprove(item, 'rejected', notes[item.id])}
                disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || currentLockSubmissionId !== item.id}
                className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                size={isMobile ? "default" : "default"}
              >
                <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                Reject
              </Button>
            </div>
          </>
        )}

        {/* Reset button for rejected items */}
        {item.status === 'rejected' && item.type === 'content_submission' && (
          <div className="space-y-3 pt-4 border-t bg-red-50 dark:bg-red-950/20 -mx-4 px-4 py-3 rounded-b-lg">
            <div className="flex items-start gap-2 text-sm text-red-800 dark:text-red-300">
              <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
              <div>
                <p className="font-medium">This submission was rejected</p>
                <p className="text-xs mt-1">You can reset it to pending to re-review and approve it.</p>
              </div>
            </div>
            <Button
              onClick={() => onResetToPending(item)}
              disabled={actionLoading === item.id}
              variant="outline"
              className="w-full"
            >
              <RefreshCw className="w-4 h-4 mr-2" />
              Reset to Pending
            </Button>
          </div>
        )}

        {/* Retry/Reset buttons for partially approved items */}
        {item.status === 'partially_approved' && item.type === 'content_submission' && (
          <div className="space-y-3 pt-4 border-t bg-yellow-50 dark:bg-yellow-950/20 -mx-4 px-4 py-3 rounded-b-lg">
            <div className="flex items-start gap-2 text-sm text-yellow-800 dark:text-yellow-300">
              <AlertCircle className="w-5 h-5 mt-0.5 flex-shrink-0" />
              <div>
                <p className="font-medium">This submission was partially approved</p>
                <p className="text-xs mt-1">Some items failed. You can retry them or reset everything to pending.</p>
              </div>
            </div>
            <div className="flex gap-2">
              <Button
                onClick={() => onOpenReviewManager(item.id)}
                disabled={actionLoading === item.id}
                variant="outline"
                className="flex-1"
              >
                <ListTree className="w-4 h-4 mr-2" />
                Review Items
              </Button>
              <Button
                onClick={() => onResetToPending(item)}
                disabled={actionLoading === item.id}
                variant="outline"
                className="flex-1"
              >
                <RefreshCw className="w-4 h-4 mr-2" />
                Reset All
              </Button>
              <Button
                onClick={() => onRetryFailed(item)}
                disabled={actionLoading === item.id}
                className="flex-1 bg-yellow-600 hover:bg-yellow-700"
              >
                <RefreshCw className="w-4 h-4 mr-2" />
                Retry Failed
              </Button>
            </div>
          </div>
        )}
        
        {/* Reviewer Information for approved/rejected items */}
        {(item.status === 'approved' || item.status === 'rejected') && (item.reviewed_at || item.reviewer_notes) && (
          <div className="space-y-3 pt-4 border-t">
            <div className="flex items-center gap-2 text-sm text-muted-foreground">
              <Calendar className="w-4 h-4" />
              <span>Reviewed {item.reviewed_at ? format(new Date(item.reviewed_at), 'MMM d, yyyy HH:mm') : 'recently'}</span>
              {item.reviewer_profile && (
                <>
                  <span>by</span>
                  <div className="flex items-center gap-2">
                    <Avatar className="h-6 w-6">
                      <AvatarImage src={item.reviewer_profile.avatar_url} />
                      <AvatarFallback className="text-xs">
                        {(item.reviewer_profile.display_name || item.reviewer_profile.username)?.slice(0, 2).toUpperCase()}
                      </AvatarFallback>
                    </Avatar>
                    <span className="font-medium">
                      {item.reviewer_profile.display_name || item.reviewer_profile.username}
                    </span>
                  </div>
                </>
              )}
            </div>
            
            {item.reviewer_notes && (
              <div className="bg-muted/30 p-3 rounded-lg">
                <p className="text-sm font-medium mb-1">Reviewer Notes:</p>
                <p className="text-sm text-muted-foreground">{item.reviewer_notes}</p>
              </div>
            )}
            
            {/* Reverse Decision Buttons */}
            <div className="space-y-2">
              <Label className="text-sm">Reverse Decision</Label>
              <Textarea
                placeholder="Add notes about reversing this decision..."
                value={notes[`reverse-${item.id}`] || ''}
                onChange={(e) => onNoteChange(`reverse-${item.id}`, e.target.value)}
                onFocus={() => onInteractionFocus(item.id)}
                onBlur={() => onInteractionBlur(item.id)}
                rows={2}
              />
              <div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
                {item.status === 'approved' && (
                  <Button
                    variant="destructive"
                    onClick={() => onApprove(item, 'rejected', notes[`reverse-${item.id}`])}
                    disabled={actionLoading === item.id}
                    className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                    size={isMobile ? "default" : "default"}
                  >
                    <XCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                    Change to Rejected
                  </Button>
                )}
                {item.status === 'rejected' && (
                  <Button
                    onClick={() => onApprove(item, 'approved', notes[`reverse-${item.id}`])}
                    disabled={actionLoading === item.id}
                    className={`flex-1 ${isMobile ? 'h-11' : ''}`}
                    size={isMobile ? "default" : "default"}
                  >
                    <CheckCircle className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                    Change to Approved
                  </Button>
                )}
              </div>
            </div>
          </div>
        )}
        
        {/* Delete button for rejected submissions (admin/superadmin only) */}
        {item.status === 'rejected' && item.type === 'content_submission' && (isAdmin || isSuperuser) && (
          <div className="pt-2">
            <Button
              variant="destructive"
              onClick={() => onDeleteSubmission(item)}
              disabled={actionLoading === item.id}
              className={`w-full ${isMobile ? 'h-11' : ''}`}
              size={isMobile ? "default" : "default"}
            >
              <Trash2 className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
              Delete Submission
            </Button>
          </div>
        )}
      </CardContent>
    </Card>
  );
}, (prevProps, nextProps) => {
  // Custom comparison to prevent re-renders
  return (
    prevProps.item.id === nextProps.item.id &&
    prevProps.item.status === nextProps.item.status &&
    prevProps.actionLoading === nextProps.actionLoading &&
    prevProps.lockedSubmissions.has(prevProps.item.id) === nextProps.lockedSubmissions.has(nextProps.item.id) &&
    prevProps.currentLockSubmissionId === nextProps.currentLockSubmissionId &&
    prevProps.notes[prevProps.item.id] === nextProps.notes[nextProps.item.id] &&
    prevProps.notes[`reverse-${prevProps.item.id}`] === nextProps.notes[`reverse-${nextProps.item.id}`]
  );
});

QueueItem.displayName = 'QueueItem';