thrilltrack-explorer/src/components/moderation/QueueItem.tsx

import { memo, useState, useCallback } from 'react';
import { CheckCircle, XCircle, Eye, Calendar, MessageSquare, FileText, Image, ListTree, RefreshCw, AlertCircle, Lock, Trash2, AlertTriangle, Edit } from 'lucide-react';
import { usePhotoSubmissionItems } from '@/hooks/usePhotoSubmissionItems';
import { PhotoGrid } from '@/components/common/PhotoGrid';
import { normalizePhotoData } from '@/lib/photoHelpers';
import type { PhotoItem } from '@/types/photos';
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 { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { format } from 'date-fns';
import { SubmissionItemsList } from './SubmissionItemsList';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
import { ValidationSummary } from './ValidationSummary';
import type { ValidationResult } from '@/lib/entityValidationSchemas';
import type { LockStatus } from '@/lib/moderation/lockHelpers';
import type { ModerationItem } from '@/types/moderation';

interface QueueItemProps {
  item: ModerationItem;
  isMobile: boolean;
  actionLoading: string | null;
  isLockedByMe: boolean;
  isLockedByOther: boolean;
  lockStatus: LockStatus;
  currentLockSubmissionId?: string;
  notes: Record<string, string>;
  isAdmin: boolean;
  isSuperuser: boolean;
  queueIsLoading: boolean;
  isInitialRender?: 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,
  isLockedByMe,
  isLockedByOther,
  lockStatus,
  currentLockSubmissionId,
  notes,
  isAdmin,
  isSuperuser,
  queueIsLoading,
  isInitialRender = false,
  onNoteChange,
  onApprove,
  onResetToPending,
  onRetryFailed,
  onOpenPhotos,
  onOpenReviewManager,
  onClaimSubmission,
  onDeleteSubmission,
  onInteractionFocus,
  onInteractionBlur
}: QueueItemProps) => {
  const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
  const [isClaiming, setIsClaiming] = useState(false);
  
  // Fetch relational photo data for photo submissions
  const { photos: photoItems, loading: photosLoading } = usePhotoSubmissionItems(
    item.submission_type === 'photo' ? item.id : undefined
  );
  
  // Check if submission has any moderator-edited items
  const hasModeratorEdits = item.submission_items?.some(
    si => si.original_data && Object.keys(si.original_data).length > 0
  );
  
  const handleValidationChange = useCallback((result: ValidationResult) => {
    setValidationResult(result);
  }, []);
  
  const handleClaim = useCallback(async () => {
    setIsClaiming(true);
    await onClaimSubmission(item.id);
    setIsClaiming(false);
  }, [onClaimSubmission, item.id]);
  
  return (
    <Card 
      key={item.id} 
      className={`border-l-4 transition-all duration-300 ${
        item._removing ? 'opacity-0 scale-95 pointer-events-none' : ''
      } ${
        hasModeratorEdits ? 'ring-2 ring-blue-200 dark:ring-blue-800' : ''
      } ${
        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 : (item._removing ? 0 : 1),
        pointerEvents: actionLoading === item.id ? 'none' : 'auto',
        transition: isInitialRender ? 'none' : 'all 300ms ease-in-out'
      }}
    >
      <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>
            {hasModeratorEdits && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <Badge 
                    variant="secondary" 
                    className="bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300 border border-blue-300 dark:border-blue-700"
                  >
                    <Edit className="w-3 h-3 mr-1" />
                    Edited
                  </Badge>
                </TooltipTrigger>
                <TooltipContent>
                  <p>This submission has been modified by a moderator</p>
                </TooltipContent>
              </Tooltip>
            )}
            {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>
            )}
            {isLockedByOther && 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_items && item.submission_items.length > 0 && (
              <ValidationSummary
                item={{
                  item_type: item.submission_items[0].item_type,
                  item_data: item.submission_items[0].item_data,
                  id: item.submission_items[0].id,
                }}
                compact={true}
                onValidationChange={handleValidationChange}
              />
            )}
          </div>
          <Tooltip>
            <TooltipTrigger asChild>
              <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, HH:mm:ss' : 'MMM d, yyyy HH:mm:ss.SSS')}
              </div>
            </TooltipTrigger>
            <TooltipContent>
              <p className="text-xs">Full timestamp:</p>
              <p className="font-mono">{item.created_at}</p>
            </TooltipContent>
          </Tooltip>
        </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 && (() => {
                const reviewPhotos: PhotoItem[] = normalizePhotoData({
                  type: 'review',
                  photos: item.content.photos
                });
                
                return (
                  <div className="mt-3">
                    <div className="text-sm font-medium mb-2">Attached Photos:</div>
                    <PhotoGrid 
                      photos={reviewPhotos}
                      onPhotoClick={onOpenPhotos}
                      maxDisplay={isMobile ? 3 : 4}
                      className="grid-cols-2 md:grid-cols-3"
                    />
                    {item.content.photos[0]?.caption && (
                      <p className="text-sm text-muted-foreground mt-2">
                        {item.content.photos[0].caption}
                      </p>
                    )}
                  </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>
              )}
              
              {/* Photos from relational table */}
              {photosLoading ? (
                <div className="text-sm text-muted-foreground">Loading photos...</div>
              ) : photoItems.length > 0 ? (
                <div className="space-y-2">
                  <div className="text-sm font-medium flex items-center justify-between">
                    <span>Photos ({photoItems.length}):</span>
                    {import.meta.env.DEV && photoItems[0] && (
                      <span className="text-xs text-muted-foreground">
                        URL: {photoItems[0].cloudflare_image_url?.slice(0, 30)}...
                      </span>
                    )}
                  </div>
                  <PhotoGrid
                    photos={photoItems.map(photo => ({
                      id: photo.id,
                      url: photo.cloudflare_image_url,
                      filename: photo.filename || `Photo ${photo.order_index + 1}`,
                      caption: photo.caption,
                      title: photo.title,
                      date_taken: photo.date_taken,
                    }))}
                    onPhotoClick={onOpenPhotos}
                  />
                </div>
              ) : (
                <Alert variant="destructive" className="mt-4">
                  <AlertTriangle className="h-4 w-4" />
                  <AlertTitle>No Photos Found</AlertTitle>
                  <AlertDescription>
                    This photo submission has no photos attached. This may be a data integrity issue.
                  </AlertDescription>
                </Alert>
              )}
              
              {/* Context Information */}
              {item.entity_name && (
                <div className="mt-3 pt-3 border-t text-sm">
                  <span className="text-muted-foreground">For: </span>
                  <span className="font-medium">{item.entity_name}</span>
                  {item.park_name && (
                    <>
                      <span className="text-muted-foreground"> at </span>
                      <span className="font-medium">{item.park_name}</span>
                    </>
                  )}
                </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 */}
            {!isLockedByOther && 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={handleClaim}
                        disabled={queueIsLoading || isClaiming}
                        size="sm"
                        className="ml-4"
                      >
                        {isClaiming ? (
                          <>
                            <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
                            Claiming...
                          </>
                        ) : (
                          <>
                            <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={isLockedByOther || 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 || isLockedByOther || 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>
                  {isAdmin && isLockedByMe && (
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          onClick={() => onOpenReviewManager(item.id)}
                          disabled={actionLoading === item.id}
                          variant="ghost"
                          className={isMobile ? 'h-11' : ''}
                          size={isMobile ? "default" : "default"}
                        >
                          <Edit className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                          {!isMobile && "Edit"}
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>
                        <p>Edit submission items directly as a moderator</p>
                      </TooltipContent>
                    </Tooltip>
                  )}
                </>
              )}
              
              <Button
                onClick={() => onApprove(item, 'approved', notes[item.id])}
                disabled={actionLoading === item.id || isLockedByOther || 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 || isLockedByOther || 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) => {
  // Quick checks first (cheapest)
  if (prevProps.item.id !== nextProps.item.id) return false;
  if (prevProps.item.status !== nextProps.item.status) return false;
  if (prevProps.actionLoading !== nextProps.actionLoading) return false;
  if (prevProps.currentLockSubmissionId !== nextProps.currentLockSubmissionId) return false;
  if (prevProps.notes[prevProps.item.id] !== nextProps.notes[nextProps.item.id]) return false;
  if (prevProps.notes[`reverse-${prevProps.item.id}`] !== nextProps.notes[`reverse-${nextProps.item.id}`]) return false;
  
  // Check lock status
  if (prevProps.isLockedByOther !== nextProps.isLockedByOther) return false;
  if (prevProps.lockStatus !== nextProps.lockStatus) return false;
  
  // Deep comparison of critical fields (use strict equality for reference stability)
  if (prevProps.item.status !== nextProps.item.status) return false;
  if (prevProps.item.reviewed_at !== nextProps.item.reviewed_at) return false;
  if (prevProps.item.reviewer_notes !== nextProps.item.reviewer_notes) return false;
  if (prevProps.item.assigned_to !== nextProps.item.assigned_to) return false;
  if (prevProps.item.locked_until !== nextProps.item.locked_until) return false;
  if (prevProps.item.escalated !== nextProps.item.escalated) return false;
  
  // Only check content reference, not deep equality (performance)
  if (prevProps.item.content !== nextProps.item.content) return false;
  
  // All checks passed - items are identical
  return true;
});

QueueItem.displayName = 'QueueItem';