import { useState, useEffect, useImperativeHandle, forwardRef, useCallback, useRef } from 'react';
import { CheckCircle, XCircle, Eye, Calendar, User, Filter, MessageSquare, FileText, Image, X, Trash2, ListTree, RefreshCw, AlertCircle, Clock, Lock, Unlock, AlertTriangle, UserCog, Zap } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { supabase } from '@/integrations/supabase/client';
import { useToast } from '@/hooks/use-toast';
import { useUserRole } from '@/hooks/useUserRole';
import { useAuth } from '@/hooks/useAuth';
import { format, formatDistance } from 'date-fns';
import { PhotoModal } from './PhotoModal';
import { SubmissionReviewManager } from './SubmissionReviewManager';
import { useIsMobile } from '@/hooks/use-mobile';
import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
import { SubmissionItemsList } from './SubmissionItemsList';
import { MeasurementDisplay } from '@/components/ui/measurement-display';
import { useAdminSettings } from '@/hooks/useAdminSettings';
import { useModerationQueue } from '@/hooks/useModerationQueue';
import { Progress } from '@/components/ui/progress';
import { QueueStatsDashboard } from './QueueStatsDashboard';
import { EscalationDialog } from './EscalationDialog';
import { ReassignDialog } from './ReassignDialog';
import { smartMergeArray } from '@/lib/smartStateUpdate';
import { useDebounce } from '@/hooks/useDebounce';

interface ModerationItem {
  id: string;
  type: 'review' | 'content_submission';
  content: any;
  created_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;
  };
}

type EntityFilter = 'all' | 'reviews' | 'submissions' | 'photos';
type StatusFilter = 'all' | 'pending' | 'partially_approved' | 'flagged' | 'approved' | 'rejected';
type QueueTab = 'mainQueue' | 'archive';

export interface ModerationQueueRef {
  refresh: () => void;
}

export const ModerationQueue = forwardRef<ModerationQueueRef>((props, ref) => {
  const isMobile = useIsMobile();
  const [items, setItems] = useState<ModerationItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [isInitialLoad, setIsInitialLoad] = useState(true);
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  const [notes, setNotes] = useState<Record<string, string>>({});
  const [activeTab, setActiveTab] = useState<QueueTab>('mainQueue');
  const [activeEntityFilter, setActiveEntityFilter] = useState<EntityFilter>('all');
  const [activeStatusFilter, setActiveStatusFilter] = useState<StatusFilter>('pending');
  const [photoModalOpen, setPhotoModalOpen] = useState(false);
  const [selectedPhotos, setSelectedPhotos] = useState<any[]>([]);
  const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(0);
  const [reviewManagerOpen, setReviewManagerOpen] = useState(false);
  const [selectedSubmissionId, setSelectedSubmissionId] = useState<string | null>(null);
  const [lockedSubmissions, setLockedSubmissions] = useState<Set<string>>(new Set());
  const [escalationDialogOpen, setEscalationDialogOpen] = useState(false);
  const [reassignDialogOpen, setReassignDialogOpen] = useState(false);
  const [selectedItemForAction, setSelectedItemForAction] = useState<ModerationItem | null>(null);
  const [interactingWith, setInteractingWith] = useState<Set<string>>(new Set());
  const [newItemsCount, setNewItemsCount] = useState(0);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [profileCache, setProfileCache] = useState<Map<string, any>>(new Map());
  const [entityCache, setEntityCache] = useState<{
    rides: Map<string, any>,
    parks: Map<string, any>,
    companies: Map<string, any>
  }>({
    rides: new Map(),
    parks: new Map(),
    companies: new Map()
  });
  const [submissionMemo, setSubmissionMemo] = useState<Map<string, ModerationItem>>(new Map());
  const [pendingNewItems, setPendingNewItems] = useState<ModerationItem[]>([]);
  const { toast } = useToast();
  const { isAdmin, isSuperuser } = useUserRole();
  const { user } = useAuth();
  const queue = useModerationQueue();
  const fetchInProgressRef = useRef(false);
  const itemsRef = useRef<ModerationItem[]>([]);
  const loadedIdsRef = useRef<Set<string>>(new Set());

  // Get admin settings for polling configuration
  const { 
    getAdminPanelRefreshMode, 
    getAdminPanelPollInterval,
    getAutoRefreshStrategy,
    getPreserveInteractionState 
  } = useAdminSettings();
  const refreshMode = getAdminPanelRefreshMode();
  const pollInterval = getAdminPanelPollInterval();
  const refreshStrategy = getAutoRefreshStrategy();
  const preserveInteraction = getPreserveInteractionState();

  // Sync itemsRef and loadedIdsRef with items state
  useEffect(() => {
    itemsRef.current = items;
    loadedIdsRef.current = new Set(items.map(item => item.id));
  }, [items]);

  const fetchItems = useCallback(async (entityFilter: EntityFilter = 'all', statusFilter: StatusFilter = 'pending', silent = false, tab: QueueTab = 'mainQueue') => {
    if (!user) {
      return;
    }

    // Prevent concurrent calls - race condition guard
    if (fetchInProgressRef.current) {
      console.log('⚠️ Fetch already in progress, skipping duplicate call');
      return;
    }

    fetchInProgressRef.current = true;

    console.log('🔍 fetchItems called:', {
      entityFilter,
      statusFilter,
      tab,
      silent,
      timestamp: new Date().toISOString()
    });

    try {
      // Set loading states
      if (!silent) {
        setLoading(true);
      } else {
        setIsRefreshing(true);
      }

      // Build base query for content submissions
      let submissionsQuery = supabase
        .from('content_submissions')
        .select(`
          id,
          submission_type,
          status,
          content,
          created_at,
          user_id,
          reviewed_at,
          reviewer_id,
          reviewer_notes,
          escalated,
          priority,
          assigned_to,
          locked_until
        `)
        .order('priority', { ascending: false })
        .order('created_at', { ascending: true });

      // Apply tab-based status filtering
      if (tab === 'mainQueue') {
        // Main queue: pending, flagged, partially_approved submissions
        if (statusFilter === 'all') {
          submissionsQuery = submissionsQuery.in('status', ['pending', 'flagged', 'partially_approved']);
        } else if (statusFilter === 'pending') {
          submissionsQuery = submissionsQuery.in('status', ['pending', 'partially_approved']);
        } else {
          submissionsQuery = submissionsQuery.eq('status', statusFilter);
        }
      } else {
        // Archive: approved or rejected submissions
        if (statusFilter === 'all') {
          submissionsQuery = submissionsQuery.in('status', ['approved', 'rejected']);
        } else {
          submissionsQuery = submissionsQuery.eq('status', statusFilter);
        }
      }

      // Apply entity type filter
      if (entityFilter === 'photos') {
        submissionsQuery = submissionsQuery.eq('submission_type', 'photo');
      } else if (entityFilter === 'submissions') {
        submissionsQuery = submissionsQuery.neq('submission_type', 'photo');
      }

      // CRM-style claim filtering: moderators only see unclaimed OR self-assigned submissions
      // Admins see all submissions
      if (!isAdmin && !isSuperuser) {
        const now = new Date().toISOString();
        // Show submissions that are:
        // 1. Unclaimed (assigned_to is null)
        // 2. Have expired locks (locked_until < now)
        // 3. Are assigned to current user
        submissionsQuery = submissionsQuery.or(
          `assigned_to.is.null,locked_until.lt.${now},assigned_to.eq.${user.id}`
        );
      }

      const { data: submissions, error: submissionsError } = await submissionsQuery;

      if (submissionsError) throw submissionsError;

      // Get user IDs and fetch user profiles
      const userIds = submissions?.map(s => s.user_id).filter(Boolean) || [];
      const reviewerIds = submissions?.map(s => s.reviewer_id).filter((id): id is string => !!id) || [];
      const allUserIds = [...new Set([...userIds, ...reviewerIds])];

      let userProfiles: any[] = [];
      if (allUserIds.length > 0) {
        const { data: profiles } = await supabase
          .from('profiles')
          .select('user_id, username, display_name, avatar_url')
          .in('user_id', allUserIds);
        
        userProfiles = profiles || [];
      }

      const userProfileMap = new Map(userProfiles.map(p => [p.user_id, p]));

      // Collect entity IDs for bulk fetching
      const rideIds = new Set<string>();
      const parkIds = new Set<string>();
      const companyIds = new Set<string>();
      const rideModelIds = new Set<string>();

      submissions?.forEach(submission => {
        const content = submission.content as any;
        if (content && typeof content === 'object') {
          if (content.ride_id) rideIds.add(content.ride_id);
          if (content.park_id) parkIds.add(content.park_id);
          if (content.company_id) companyIds.add(content.company_id);
          if (content.entity_id) {
            if (submission.submission_type === 'ride') rideIds.add(content.entity_id);
            if (submission.submission_type === 'park') parkIds.add(content.entity_id);
            if (['manufacturer', 'operator', 'designer', 'property_owner'].includes(submission.submission_type)) {
              companyIds.add(content.entity_id);
            }
          }
          if (content.manufacturer_id) companyIds.add(content.manufacturer_id);
          if (content.designer_id) companyIds.add(content.designer_id);
          if (content.operator_id) companyIds.add(content.operator_id);
          if (content.property_owner_id) companyIds.add(content.property_owner_id);
          if (content.ride_model_id) rideModelIds.add(content.ride_model_id);
        }
      });

      // Fetch entities only if we don't have them cached or if they're new
      const fetchPromises: Promise<{ type: string; data: any[] }>[] = [];

      if (rideIds.size > 0) {
        const uncachedRideIds = Array.from(rideIds).filter(id => !entityCache.rides.has(id));
        if (uncachedRideIds.length > 0) {
          fetchPromises.push(
            Promise.resolve(
              supabase
                .from('rides')
                .select('id, name, park_id')
                .in('id', uncachedRideIds)
            ).then(({ data }) => ({ type: 'rides', data: data || [] }))
          );
        }
      }

      if (parkIds.size > 0) {
        const uncachedParkIds = Array.from(parkIds).filter(id => !entityCache.parks.has(id));
        if (uncachedParkIds.length > 0) {
          fetchPromises.push(
            Promise.resolve(
              supabase
                .from('parks')
                .select('id, name')
                .in('id', uncachedParkIds)
            ).then(({ data }) => ({ type: 'parks', data: data || [] }))
          );
        }
      }

      if (companyIds.size > 0) {
        const uncachedCompanyIds = Array.from(companyIds).filter(id => !entityCache.companies.has(id));
        if (uncachedCompanyIds.length > 0) {
          fetchPromises.push(
            Promise.resolve(
              supabase
                .from('companies')
                .select('id, name')
                .in('id', uncachedCompanyIds)
            ).then(({ data }) => ({ type: 'companies', data: data || [] }))
          );
        }
      }

      // Fetch all uncached entities
      const entityResults = await Promise.all(fetchPromises);

      // Update entity cache
      entityResults.forEach(result => {
        if (result.type === 'rides') {
          result.data.forEach((ride: any) => {
            entityCache.rides.set(ride.id, ride);
            if (ride.park_id) parkIds.add(ride.park_id);
          });
        } else if (result.type === 'parks') {
          result.data.forEach((park: any) => {
            entityCache.parks.set(park.id, park);
          });
        } else if (result.type === 'companies') {
          result.data.forEach((company: any) => {
            entityCache.companies.set(company.id, company);
          });
        }
      });

      // Helper function to create memo key
      const createMemoKey = (submission: any): string => {
        return JSON.stringify({
          id: submission.id,
          status: submission.status,
          content: submission.content,
          reviewed_at: submission.reviewed_at,
          reviewer_notes: submission.reviewer_notes,
        });
      };

      // Map submissions to moderation items with memoization
      const moderationItems: ModerationItem[] = submissions?.map(submission => {
        const memoKey = createMemoKey(submission);
        const existingMemo = submissionMemo.get(submission.id);

        // Check if we can reuse the memoized item
        if (existingMemo && createMemoKey(existingMemo) === memoKey) {
          return existingMemo as ModerationItem;
        }

        // Resolve entity name
        const content = submission.content as any;
        let entityName = content?.name || 'Unknown';
        let parkName: string | undefined;

        if (submission.submission_type === 'ride' && content?.entity_id) {
          const ride = entityCache.rides.get(content.entity_id);
          if (ride) {
            entityName = ride.name;
            if (ride.park_id) {
              const park = entityCache.parks.get(ride.park_id);
              if (park) parkName = park.name;
            }
          }
        } else if (submission.submission_type === 'park' && content?.entity_id) {
          const park = entityCache.parks.get(content.entity_id);
          if (park) entityName = park.name;
        } else if (['manufacturer', 'operator', 'designer', 'property_owner'].includes(submission.submission_type) && content?.entity_id) {
          const company = entityCache.companies.get(content.entity_id);
          if (company) entityName = company.name;
        } else if (content?.ride_id) {
          const ride = entityCache.rides.get(content.ride_id);
          if (ride) {
            entityName = ride.name;
            if (ride.park_id) {
              const park = entityCache.parks.get(ride.park_id);
              if (park) parkName = park.name;
            }
          }
        } else if (content?.park_id) {
          const park = entityCache.parks.get(content.park_id);
          if (park) parkName = park.name;
        }

        const userProfile = userProfileMap.get(submission.user_id);
        const reviewerProfile = submission.reviewer_id ? userProfileMap.get(submission.reviewer_id) : undefined;

        const item: ModerationItem = {
          id: submission.id,
          type: 'content_submission',
          content: submission.content,
          created_at: submission.created_at,
          user_id: submission.user_id,
          status: submission.status,
          submission_type: submission.submission_type,
          user_profile: userProfile ? {
            username: userProfile.username,
            display_name: userProfile.display_name,
            avatar_url: userProfile.avatar_url,
          } : undefined,
          entity_name: entityName,
          park_name: parkName,
          reviewed_at: submission.reviewed_at,
          reviewed_by: submission.reviewer_id,
          reviewer_notes: submission.reviewer_notes,
          reviewer_profile: reviewerProfile,
        };

        return item;
      }) || [];

      // Update memoization cache
      const newMemoMap = new Map<string, ModerationItem>();
      moderationItems.forEach(item => {
        newMemoMap.set(item.id, item);
      });
      setSubmissionMemo(newMemoMap);

      // CRM-style frozen queue logic
      if (silent) {
        // Background polling: ONLY detect NEW submissions, never update existing ones
        const currentLoadedIds = loadedIdsRef.current;
        const newSubmissions = moderationItems.filter(item => !currentLoadedIds.has(item.id));
        
        if (newSubmissions.length > 0) {
          console.log('🆕 Detected new submissions:', newSubmissions.length);
          
          // Check against existing pendingNewItems to avoid double-counting
          setPendingNewItems(prev => {
            const existingIds = new Set(prev.map(p => p.id));
            const uniqueNew = newSubmissions.filter(item => !existingIds.has(item.id));
            
            // Track these IDs as loaded to prevent re-counting on next poll
            if (uniqueNew.length > 0) {
              const newIds = uniqueNew.map(item => item.id);
              loadedIdsRef.current = new Set([...currentLoadedIds, ...newIds]);
              setNewItemsCount(prev => prev + uniqueNew.length);
            }
            
            return [...prev, ...uniqueNew];
          });
        }
        
        // DON'T update items array during background polling - queue stays frozen
        console.log('✅ Queue frozen - existing submissions unchanged');
      } else {
        // Normal fetch: Load all items and reset pending
        setItems(moderationItems);
        setPendingNewItems([]);
        setNewItemsCount(0);
        console.log('📋 Queue loaded with', moderationItems.length, 'submissions');
      }

    } catch (error: any) {
      console.error('Error fetching moderation items:', error);
      toast({
        title: 'Error',
        description: error.message || 'Failed to fetch moderation queue',
        variant: 'destructive',
      });
    } finally {
      fetchInProgressRef.current = false;
      setLoading(false);
      setIsRefreshing(false);
      setIsInitialLoad(false);
    }
  }, [
    user,
    refreshStrategy,
    preserveInteraction,
    toast
  ]);

  // Debounced filters to prevent rapid-fire calls
  const debouncedEntityFilter = useDebounce(activeEntityFilter, 500);
  const debouncedStatusFilter = useDebounce(activeStatusFilter, 500);

  // Store latest filter values in ref to avoid dependency issues
  const filtersRef = useRef({ entityFilter: debouncedEntityFilter, statusFilter: debouncedStatusFilter });
  useEffect(() => {
    filtersRef.current = { entityFilter: debouncedEntityFilter, statusFilter: debouncedStatusFilter };
  }, [debouncedEntityFilter, debouncedStatusFilter]);

  // Expose refresh method via ref
  useImperativeHandle(ref, () => ({
    refresh: () => {
      fetchItems(filtersRef.current.entityFilter, filtersRef.current.statusFilter, false); // Manual refresh shows loading
    }
  }), [fetchItems]);

  // Initial fetch on mount and filter changes
  useEffect(() => {
    if (user) {
      fetchItems(debouncedEntityFilter, debouncedStatusFilter, false); // Show loading
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedEntityFilter, debouncedStatusFilter, user]);

  // Polling for auto-refresh
  useEffect(() => {
    if (!user || refreshMode !== 'auto' || isInitialLoad) return;

    const interval = setInterval(() => {
      fetchItems(filtersRef.current.entityFilter, filtersRef.current.statusFilter, true); // Silent refresh
    }, pollInterval);

    return () => {
      clearInterval(interval);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user, refreshMode, pollInterval, isInitialLoad]);

  // Real-time subscription for lock status
  useEffect(() => {
    if (!user) return;

    const channel = supabase
      .channel('moderation-locks')
      .on(
        'postgres_changes',
        {
          event: 'UPDATE',
          schema: 'public',
          table: 'content_submissions',
        },
        (payload) => {
          const newData = payload.new as any;
          
          // Track submissions locked by others
          if (newData.assigned_to && newData.assigned_to !== user.id && newData.locked_until) {
            const lockExpiry = new Date(newData.locked_until);
            if (lockExpiry > new Date()) {
              setLockedSubmissions((prev) => new Set(prev).add(newData.id));
            } else {
              setLockedSubmissions((prev) => {
                const next = new Set(prev);
                next.delete(newData.id);
                return next;
              });
            }
          } else {
            // Lock released
            setLockedSubmissions((prev) => {
              const next = new Set(prev);
              next.delete(newData.id);
              return next;
            });
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [user]);

  const handleResetToPending = async (item: ModerationItem) => {
    setActionLoading(item.id);
    try {
      const { resetRejectedItemsToPending } = await import('@/lib/submissionItemsService');
      
      await resetRejectedItemsToPending(item.id);

      toast({
        title: "Reset Complete",
        description: "Submission and all items have been reset to pending status",
      });

      fetchItems(activeEntityFilter, activeStatusFilter);
    } catch (error: any) {
      console.error('Error resetting submission:', error);
      toast({
        title: "Reset Failed",
        description: error.message,
        variant: "destructive",
      });
    } finally {
      setActionLoading(null);
    }
  };

  const handleRetryFailedItems = async (item: ModerationItem) => {
    setActionLoading(item.id);
    try {
      // Fetch failed/rejected submission items
      const { data: failedItems, error: fetchError } = await supabase
        .from('submission_items')
        .select('id')
        .eq('submission_id', item.id)
        .eq('status', 'rejected');

      if (fetchError) throw fetchError;

      if (!failedItems || failedItems.length === 0) {
        toast({
          title: "No Failed Items",
          description: "All items have been processed successfully",
        });
        return;
      }

      // Call edge function to retry failed items
      const { data, error } = await supabase.functions.invoke(
        'process-selective-approval',
        {
          body: {
            itemIds: failedItems.map(i => i.id),
            submissionId: item.id
          }
        }
      );

      if (error) throw error;

      toast({
        title: "Retry Complete",
        description: `Processed ${failedItems.length} failed item(s)`,
      });

      fetchItems(activeEntityFilter, activeStatusFilter);
    } catch (error: any) {
      console.error('Error retrying failed items:', error);
      toast({
        title: "Retry Failed",
        description: error.message,
        variant: "destructive",
      });
    } finally {
      setActionLoading(null);
    }
  };

  const handleModerationAction = async (
    item: ModerationItem,
    action: 'approved' | 'rejected',
    moderatorNotes?: string
  ) => {
    // Prevent multiple clicks on the same item
    if (actionLoading === item.id) {
      return;
    }

    setActionLoading(item.id);
    
    // Release lock if this submission is claimed by current user
    if (queue.currentLock?.submissionId === item.id) {
      await queue.releaseLock(item.id);
    }
    try {
      // Handle composite ride submissions with sequential entity creation
      if (action === 'approved' && item.type === 'content_submission' && 
          (item.submission_type === 'ride_with_manufacturer' || 
           item.submission_type === 'ride_with_model' || 
           item.submission_type === 'ride_with_manufacturer_and_model')) {
        
        let manufacturerId = item.content.ride?.manufacturer_id;
        let rideModelId = item.content.ride?.ride_model_id;
        
        // STEP 1: Create manufacturer if needed
        if (item.content.new_manufacturer) {
          const { data: newManufacturer, error: mfrError } = await supabase
            .from('companies')
            .insert({
              name: item.content.new_manufacturer.name,
              slug: item.content.new_manufacturer.slug,
              description: item.content.new_manufacturer.description,
              company_type: 'manufacturer',
              person_type: item.content.new_manufacturer.person_type || 'company',
              website_url: item.content.new_manufacturer.website_url,
              founded_year: item.content.new_manufacturer.founded_year,
              headquarters_location: item.content.new_manufacturer.headquarters_location
            })
            .select()
            .single();
            
          if (mfrError) {
            throw new Error(`Failed to create manufacturer: ${mfrError.message}`);
          }
          
          manufacturerId = newManufacturer.id;
          
          toast({
            title: "Manufacturer Created",
            description: `Created ${newManufacturer.name}`,
          });
        }
        
        // STEP 2: Create ride model if needed
        if (item.content.new_ride_model) {
          const modelManufacturerId = manufacturerId || item.content.new_ride_model.manufacturer_id;
          
          if (!modelManufacturerId) {
            throw new Error('Cannot create ride model: No manufacturer ID available');
          }
          
          const { data: newModel, error: modelError } = await supabase
            .from('ride_models')
            .insert({
              name: item.content.new_ride_model.name,
              slug: item.content.new_ride_model.slug,
              manufacturer_id: modelManufacturerId,
              category: item.content.new_ride_model.category,
              ride_type: item.content.new_ride_model.ride_type,
              description: item.content.new_ride_model.description
            })
            .select()
            .single();
            
          if (modelError) {
            throw new Error(`Failed to create ride model: ${modelError.message}`);
          }
          
          rideModelId = newModel.id;
          
          toast({
            title: "Ride Model Created",
            description: `Created ${newModel.name}`,
          });
        }
        
        // STEP 3: Create the ride
        const { error: rideError } = await supabase
          .from('rides')
          .insert({
            ...item.content.ride,
            manufacturer_id: manufacturerId,
            ride_model_id: rideModelId,
            park_id: item.content.park_id
          });
          
        if (rideError) {
          throw new Error(`Failed to create ride: ${rideError.message}`);
        }
        
        // STEP 4: Update submission status
        const { error: updateError } = await supabase
          .from('content_submissions')
          .update({ 
            status: 'approved',
            reviewer_id: user?.id,
            reviewed_at: new Date().toISOString(),
            reviewer_notes: moderatorNotes
          })
          .eq('id', item.id);
          
        if (updateError) throw updateError;
        
        toast({
          title: "Submission Approved",
          description: "All entities created successfully",
        });
        
        // Refresh the queue
        fetchItems(activeEntityFilter, activeStatusFilter);
        return;
      }

      // Handle photo submissions - create photos records when approved
      if (action === 'approved' && item.type === 'content_submission' && item.submission_type === 'photo') {
        try {
          // Fetch photo submission from new relational tables
          const { data: photoSubmission, error: fetchError } = await supabase
            .from('photo_submissions')
            .select(`
              *,
              items:photo_submission_items(*),
              submission:content_submissions!inner(user_id, status)
            `)
            .eq('submission_id', item.id)
            .single();
          
          if (fetchError || !photoSubmission) {
            console.error('Failed to fetch photo submission:', fetchError);
            throw new Error('Failed to fetch photo submission data');
          }
          
          if (!photoSubmission.items || photoSubmission.items.length === 0) {
            console.error('No photo items found in submission');
            throw new Error('No photos found in submission');
          }
          
          // Check if photos already exist for this submission (in case of re-approval)
          const { data: existingPhotos } = await supabase
            .from('photos')
            .select('id')
            .eq('submission_id', item.id);
          
          if (existingPhotos && existingPhotos.length > 0) {
            
            // Just update submission status
            const { error: updateError } = await supabase
              .from('content_submissions')
              .update({ 
                status: 'approved',
                reviewer_id: user?.id,
                reviewed_at: new Date().toISOString(),
                reviewer_notes: moderatorNotes
              })
              .eq('id', item.id);
            
          } else {
            // Create new photo records from photo_submission_items
            const photoRecords = photoSubmission.items.map((item) => ({
              entity_id: photoSubmission.entity_id,
              entity_type: photoSubmission.entity_type,
              cloudflare_image_id: item.cloudflare_image_id,
              cloudflare_image_url: item.cloudflare_image_url,
              title: item.title || null,
              caption: item.caption || null,
              date_taken: item.date_taken || null,
              order_index: item.order_index,
              submission_id: photoSubmission.submission_id,
              submitted_by: photoSubmission.submission?.user_id,
              approved_by: user?.id,
              approved_at: new Date().toISOString(),
            }));
            
            const { data: createdPhotos, error: insertError } = await supabase
              .from('photos')
              .insert(photoRecords)
              .select();
            
            if (insertError) {
              console.error('Failed to insert photos:', insertError);
              throw insertError;
            }
          }
          
          // Update submission status
          const { error: updateError } = await supabase
            .from('content_submissions')
            .update({ 
              status: 'approved',
              reviewer_id: user?.id,
              reviewed_at: new Date().toISOString(),
              reviewer_notes: moderatorNotes
            })
            .eq('id', item.id);
          
          if (updateError) {
            console.error('Error updating submission:', updateError);
            throw updateError;
          }
          
          toast({
            title: "Photos Approved",
            description: `Successfully approved and published ${photoSubmission.items.length} photo(s)`,
          });
          
          // Refresh the queue
          fetchItems(activeEntityFilter, activeStatusFilter);
          return;
          
        } catch (error: any) {
          console.error('Photo approval error:', error);
          throw error;
        }
      }
      
      // Check if this submission has submission_items that need processing
      if (item.type === 'content_submission') {
    const { data: submissionItems, error: itemsError } = await supabase
      .from('submission_items')
      .select('id, status')
      .eq('submission_id', item.id)
      .in('status', ['pending', 'rejected']);

        if (!itemsError && submissionItems && submissionItems.length > 0) {
          if (action === 'approved') {
            // Call the edge function to process all items
            const { data: approvalData, error: approvalError } = await supabase.functions.invoke(
              'process-selective-approval',
              {
                body: {
                  itemIds: submissionItems.map(i => i.id),
                  submissionId: item.id
                }
              }
            );

            if (approvalError) {
              throw new Error(`Failed to process submission items: ${approvalError.message}`);
            }

            toast({
              title: "Submission Approved",
              description: `Successfully processed ${submissionItems.length} item(s)`,
            });

            // Refresh and return early since edge function already updated parent
            fetchItems(activeEntityFilter, activeStatusFilter);
            return;
          } else if (action === 'rejected') {
            // Cascade rejection to all pending items
            const { error: rejectError } = await supabase
              .from('submission_items')
              .update({
                status: 'rejected',
                rejection_reason: moderatorNotes || 'Parent submission rejected',
                updated_at: new Date().toISOString()
              })
              .eq('submission_id', item.id)
              .eq('status', 'pending');

            if (rejectError) {
              console.error('Failed to cascade rejection:', rejectError);
              // Don't fail the whole operation, just log it
            }
          }
        }
      }
      
      // Standard moderation flow for other items
      const table = item.type === 'review' ? 'reviews' : 'content_submissions';
      const statusField = item.type === 'review' ? 'moderation_status' : 'status';
      
      // Use correct timestamp column name based on table
      const timestampField = item.type === 'review' ? 'moderated_at' : 'reviewed_at';
      const reviewerField = item.type === 'review' ? 'moderated_by' : 'reviewer_id';
      
      const updateData: any = {
        [statusField]: action,
        [timestampField]: new Date().toISOString(),
      };

      // Get current user ID for reviewer tracking
      if (user) {
        updateData[reviewerField] = user.id;
      }

      if (moderatorNotes) {
        updateData.reviewer_notes = moderatorNotes;
      }

      const { error, data } = await supabase
        .from(table)
        .update(updateData)
        .eq('id', item.id)
        .select();

      if (error) {
        console.error('Database update error:', error);
        throw error;
      }

      // Check if the update actually affected any rows
      if (!data || data.length === 0) {
        console.error('No rows were updated. This might be due to RLS policies or the item not existing.');
        throw new Error('Failed to update item - no rows affected. You might not have permission to moderate this content.');
      }

      toast({
        title: `Content ${action}`,
        description: `The ${item.type} has been ${action}`,
      });

      // Only update local state if the database update was successful
      setItems(prev => prev.map(i => 
        i.id === item.id 
          ? { ...i, status: action }
          : i
      ));

      // Clear notes only after successful update
      setNotes(prev => {
        const newNotes = { ...prev };
        delete newNotes[item.id];
        return newNotes;
      });

      // Refresh if needed based on filter
      if ((activeStatusFilter === 'pending' && (action === 'approved' || action === 'rejected')) ||
          (activeStatusFilter === 'flagged' && (action === 'approved' || action === 'rejected'))) {
        // Item no longer matches filter
      }
      
    } catch (error: any) {
      console.error('Error moderating content:', error);
      
      // Revert any optimistic updates
      setItems(prev => prev.map(i => 
        i.id === item.id 
          ? { ...i, status: item.status } // Revert to original status
          : i
      ));
      
      toast({
        title: "Error",
        description: error.message || `Failed to ${action} content`,
        variant: "destructive",
      });
    } finally {
      setActionLoading(null);
    }
  };

  const handleDeleteSubmission = async (item: ModerationItem) => {
    if (item.type !== 'content_submission') return;
    
    // Prevent duplicate calls
    if (actionLoading === item.id) {
      return;
    }
    
    setActionLoading(item.id);
    
    // Remove item from UI immediately to prevent flickering
    setItems(prev => prev.filter(i => i.id !== item.id));
    
    try {
      // Step 1: Extract photo IDs from the submission content
      const photoIds: string[] = [];
      const validImageIds: string[] = [];
      const skippedPhotos: string[] = [];
      
      // Try both nested paths for photos array (handle different content structures)
      const photosArray = item.content?.content?.photos || item.content?.photos;
      
      if (photosArray && Array.isArray(photosArray)) {
        for (const photo of photosArray) {
          let imageId = '';
          
          // First try to use the stored imageId directly
          if (photo.imageId) {
            imageId = photo.imageId;
          } else if (photo.url) {
            // Check if this looks like a Cloudflare image ID (not a blob URL)
            if (photo.url.startsWith('blob:')) {
              // This is a blob URL - we can't extract a valid Cloudflare image ID
              console.warn('Skipping blob URL (cannot extract Cloudflare image ID):', photo.url);
              skippedPhotos.push(photo.url);
              continue;
            }
            
            // Fallback: Try to extract from URL for backward compatibility
            const uuidRegex = /^[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}$/i;
            
            if (uuidRegex.test(photo.url)) {
              imageId = photo.url;
            } else {
              // Extract from Cloudflare image delivery URL format
              const cloudflareMatch = photo.url.match(/imagedelivery\.net\/[^\/]+\/([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})/i);
              if (cloudflareMatch) {
                imageId = cloudflareMatch[1];
              }
            }
          }
          
          if (imageId) {
            photoIds.push(imageId);
            validImageIds.push(imageId);
          } else {
            console.warn('Could not get valid image ID from photo:', photo);
            skippedPhotos.push(photo.url || 'unknown');
          }
        }
      }

      // Step 2: Delete photos from Cloudflare Images (if any valid IDs)
      if (validImageIds.length > 0) {
        const deletePromises = validImageIds.map(async (imageId) => {
          try {
            // Use Supabase SDK - automatically includes session token
            const { data, error } = await supabase.functions.invoke('upload-image', {
              method: 'DELETE',
              body: { imageId }
            });
            
            if (error) {
              throw new Error(`Failed to delete image: ${error.message}`);
            }
            
          } catch (deleteError) {
            console.error(`Failed to delete photo ${imageId} from Cloudflare:`, deleteError);
            // Continue with other deletions - don't fail the entire operation
          }
        });

        // Execute all photo deletions in parallel
        await Promise.allSettled(deletePromises);
      }

      // Step 3: Delete the submission from the database
      const { error } = await supabase
        .from('content_submissions')
        .delete()
        .eq('id', item.id);

      if (error) {
        console.error('Database deletion error:', error);
        throw error;
      }

      // Verify the deletion actually worked
      const { data: checkData, error: checkError } = await supabase
        .from('content_submissions')
        .select('id')
        .eq('id', item.id)
        .single();
        
      if (checkData && !checkError) {
        console.error('DELETION FAILED: Item still exists in database after delete operation');
        throw new Error('Deletion failed - item still exists in database');
      }

      const deletedCount = validImageIds.length;
      const orphanedCount = skippedPhotos.length;
      
      let description = 'The submission has been permanently deleted';
      if (deletedCount > 0 && orphanedCount > 0) {
        description = `The submission and ${deletedCount} photo(s) have been deleted. ${orphanedCount} photo(s) could not be deleted from storage (orphaned blob URLs)`;
      } else if (deletedCount > 0) {
        description = `The submission and ${deletedCount} associated photo(s) have been permanently deleted`;
      } else if (orphanedCount > 0) {
        description = `The submission has been deleted. ${orphanedCount} photo(s) could not be deleted from storage (orphaned blob URLs)`;
      }

      toast({
        title: "Submission deleted",
        description,
      });

      // Remove item from the current view
      // Item was already removed at the start for immediate UI feedback
    } catch (error) {
      console.error('Error deleting submission:', error);
      
      // Restore item to list on error since we removed it optimistically
      setItems(prev => {
        // Avoid duplicates
        if (prev.some(i => i.id === item.id)) return prev;
        return [...prev, item];
      });
      
      toast({
        title: "Error",
        description: "Failed to delete submission",
        variant: "destructive",
      });
    } finally {
      setActionLoading(null);
    }
  };

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

  const getEmptyStateMessage = (entityFilter: EntityFilter, statusFilter: StatusFilter) => {
    const entityLabel = entityFilter === 'all' ? 'items' : 
                       entityFilter === 'reviews' ? 'reviews' :
                       entityFilter === 'photos' ? 'photos' : 'submissions';
    
    switch (statusFilter) {
      case 'pending':
        return `No pending ${entityLabel} require moderation at this time.`;
      case 'partially_approved':
        return `No partially approved ${entityLabel} found.`;
      case 'flagged':
        return `No flagged ${entityLabel} found.`;
      case 'approved':
        return `No approved ${entityLabel} found.`;
      case 'rejected':
        return `No rejected ${entityLabel} found.`;
      case 'all':
        return `No ${entityLabel} found.`;
      default:
        return `No ${entityLabel} found for the selected filter.`;
    }
  };

  const QueueContent = () => {
    if (loading) {
      return (
        <div className="flex items-center justify-center p-8">
          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
        </div>
      );
    }

    if (items.length === 0) {
      return (
        <div className="text-center py-8">
          <CheckCircle className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
          <h3 className="text-lg font-semibold mb-2">No items found</h3>
          <p className="text-muted-foreground">
            {getEmptyStateMessage(activeEntityFilter, activeStatusFilter)}
          </p>
        </div>
      );
    }

    return (
      <div className="space-y-6">
        {items.map((item) => (
          <Card key={item.id} className={`border-l-4 ${
            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'
          }`}>
            <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>
                  )}
                  {queue.currentLock?.submissionId === 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>
                  )}
                </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={() => {
                              setSelectedPhotos(item.content.photos.map((p: any, i: number) => ({
                                id: `${item.id}-${i}`,
                                url: p.url,
                                filename: `Review photo ${i + 1}`,
                                caption: p.caption
                              })));
                              setSelectedPhotoIndex(index);
                              setPhotoModalOpen(true);
                            }}>
                              <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={() => {
                              setSelectedPhotos(item.content.content.photos.map((p: any, i: number) => ({
                                id: `${item.id}-${i}`,
                                url: p.url,
                                filename: p.filename,
                                caption: p.caption
                              })));
                              setSelectedPhotoIndex(index);
                              setPhotoModalOpen(true);
                            }}>
                              <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 (Ride with Manufacturer/Model) */}
                    {(item.submission_type === 'ride_with_manufacturer' || 
                      item.submission_type === 'ride_with_model' || 
                      item.submission_type === 'ride_with_manufacturer_and_model') ? (
                      <div className="space-y-4">
                        {/* New Manufacturer Card */}
                        {item.content.new_manufacturer && (
                          <Card className="border-blue-300 dark:border-blue-700">
                            <CardHeader className="pb-3">
                              <div className="flex items-center gap-2">
                                <Badge variant="secondary" className="bg-blue-100 dark:bg-blue-900">
                                  New Manufacturer
                                </Badge>
                                <span className="font-semibold">{item.content.new_manufacturer.name}</span>
                              </div>
                            </CardHeader>
                            <CardContent className="space-y-2 text-sm">
                              {item.content.new_manufacturer.description && (
                                <div>
                                  <span className="font-medium">Description: </span>
                                  <span className="text-muted-foreground">{item.content.new_manufacturer.description}</span>
                                </div>
                              )}
                              <div className="grid grid-cols-2 gap-2">
                                {item.content.new_manufacturer.person_type && (
                                  <div>
                                    <span className="font-medium">Type: </span>
                                    <span className="text-muted-foreground capitalize">{item.content.new_manufacturer.person_type}</span>
                                  </div>
                                )}
                                {item.content.new_manufacturer.founded_year && (
                                  <div>
                                    <span className="font-medium">Founded: </span>
                                    <span className="text-muted-foreground">{item.content.new_manufacturer.founded_year}</span>
                                  </div>
                                )}
                                {item.content.new_manufacturer.headquarters_location && (
                                  <div>
                                    <span className="font-medium">HQ: </span>
                                    <span className="text-muted-foreground">{item.content.new_manufacturer.headquarters_location}</span>
                                  </div>
                                )}
                                {item.content.new_manufacturer.website_url && (
                                  <div>
                                    <span className="font-medium">Website: </span>
                                    <a href={item.content.new_manufacturer.website_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline text-xs">
                                      {item.content.new_manufacturer.website_url}
                                    </a>
                                  </div>
                                )}
                              </div>
                            </CardContent>
                          </Card>
                        )}
                        
                        {/* New Ride Model Card */}
                        {item.content.new_ride_model && (
                          <Card className="border-purple-300 dark:border-purple-700">
                            <CardHeader className="pb-3">
                              <div className="flex items-center gap-2">
                                <Badge variant="secondary" className="bg-purple-100 dark:bg-purple-900">
                                  New Ride Model
                                </Badge>
                                <span className="font-semibold">{item.content.new_ride_model.name}</span>
                              </div>
                            </CardHeader>
                            <CardContent className="space-y-2 text-sm">
                              <div>
                                <span className="font-medium">Manufacturer: </span>
                                <span className="text-muted-foreground">
                                  {item.content.new_manufacturer 
                                    ? item.content.new_manufacturer.name 
                                    : 'Existing manufacturer'}
                                </span>
                              </div>
                              <div className="grid grid-cols-2 gap-2">
                                <div>
                                  <span className="font-medium">Category: </span>
                                  <span className="text-muted-foreground capitalize">{item.content.new_ride_model.category?.replace('_', ' ')}</span>
                                </div>
                                <div>
                                  <span className="font-medium">Type: </span>
                                  <span className="text-muted-foreground">{item.content.new_ride_model.ride_type}</span>
                                </div>
                              </div>
                              {item.content.new_ride_model.description && (
                                <div>
                                  <span className="font-medium">Description: </span>
                                  <span className="text-muted-foreground">{item.content.new_ride_model.description}</span>
                                </div>
                              )}
                            </CardContent>
                          </Card>
                        )}
                        
                        {/* Ride Details Card */}
                        <Card className="border-green-300 dark:border-green-700">
                          <CardHeader className="pb-3">
                            <div className="flex items-center gap-2">
                              <Badge variant="secondary" className="bg-green-100 dark:bg-green-900">
                                Ride
                              </Badge>
                              <span className="font-semibold">{item.content.ride?.name}</span>
                            </div>
                          </CardHeader>
                          <CardContent className="space-y-2 text-sm">
                            {item.content.ride?.description && (
                              <p className="text-muted-foreground">{item.content.ride.description}</p>
                            )}
                            <div className="grid grid-cols-2 gap-2">
                              {item.content.ride?.category && (
                                <div>
                                  <span className="font-medium">Category: </span>
                                  <span className="text-muted-foreground capitalize">{item.content.ride.category.replace('_', ' ')}</span>
                                </div>
                              )}
                              {item.content.ride?.status && (
                                <div>
                                  <span className="font-medium">Status: </span>
                                  <span className="text-muted-foreground">{item.content.ride.status}</span>
                                </div>
                              )}
                              {item.content.ride?.max_speed_kmh && (
                                <div>
                                  <span className="font-medium">Max Speed: </span>
                                  <span className="text-muted-foreground">
                                    <MeasurementDisplay value={item.content.ride.max_speed_kmh} type="speed" className="inline" />
                                  </span>
                                </div>
                              )}
                              {item.content.ride?.max_height_meters && (
                                <div>
                                  <span className="font-medium">Max Height: </span>
                                  <span className="text-muted-foreground">
                                    <MeasurementDisplay value={item.content.ride.max_height_meters} type="height" className="inline" />
                                  </span>
                                </div>
                              )}
                            </div>
                          </CardContent>
                        </Card>
                      </div>
                    ) : (item.submission_type === 'manufacturer' || 
                           item.submission_type === 'designer' || 
                           item.submission_type === 'operator' || 
                           item.submission_type === 'property_owner' ||
                           item.submission_type === 'park' ||
                           item.submission_type === 'ride' ||
                           item.submission_type === 'ride_model' ||
                           item.submission_type === 'photo_delete' ||
                           item.submission_type === 'photo_edit') ? (
                      <SubmissionItemsList 
                        submissionId={item.id}
                        view="detailed"
                        showImages={true}
                      />
                    ) : (
                      <div className="rounded-md border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950 p-4">
                        <div className="flex items-center gap-2 mb-2">
                          <AlertTriangle className="h-4 w-4 text-amber-600" />
                          <span className="font-medium text-amber-900 dark:text-amber-100">
                            Unknown Submission Type
                          </span>
                        </div>
                        <div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
                          Type: <code className="bg-amber-100 dark:bg-amber-900 px-1 py-0.5 rounded">{item.submission_type}</code>
                        </div>
                        {item.content?.action && (
                          <div className="text-sm text-amber-800 dark:text-amber-200 mb-2">
                            Action: <span className="font-medium capitalize">{item.content.action}</span>
                          </div>
                        )}
                        <details className="text-sm">
                          <summary className="cursor-pointer text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100">
                            View raw data (for developers)
                          </summary>
                          <pre className="mt-2 text-xs whitespace-pre-wrap bg-amber-100 dark:bg-amber-900 p-2 rounded overflow-x-auto">
                            {JSON.stringify(item.content, null, 2)}
                          </pre>
                        </details>
                      </div>
                    )}
                  </div>
                )}
              </div>
              
              {/* Action buttons based on status */}
              {(item.status === 'pending' || item.status === 'flagged') && (
                <>
                  {/* Claim button for unclaimed submissions */}
                  {!lockedSubmissions.has(item.id) && queue.currentLock?.submissionId !== 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={async () => {
                                const success = await queue.claimSubmission(item.id);
                                if (success) {
                                  // Refresh to update UI
                                  fetchItems(activeEntityFilter, activeStatusFilter, false);
                                }
                              }}
                              disabled={queue.isLoading}
                              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) => setNotes(prev => ({ ...prev, [item.id]: e.target.value }))}
                      onFocus={() => setInteractingWith(prev => new Set(prev).add(item.id))}
                      onBlur={() => setInteractingWith(prev => {
                        const next = new Set(prev);
                        next.delete(item.id);
                        return next;
                      })}
                      rows={2}
                      disabled={lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== 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={() => {
                          setSelectedSubmissionId(item.id);
                          setReviewManagerOpen(true);
                        }}
                        disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== 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={() => handleModerationAction(item, 'approved', notes[item.id])}
                      disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== 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={() => handleModerationAction(item, 'rejected', notes[item.id])}
                      disabled={actionLoading === item.id || lockedSubmissions.has(item.id) || queue.currentLock?.submissionId !== 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={() => handleResetToPending(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={() => {
                        setSelectedSubmissionId(item.id);
                        setReviewManagerOpen(true);
                      }}
                      disabled={actionLoading === item.id}
                      variant="outline"
                      className="flex-1"
                    >
                      <ListTree className="w-4 h-4 mr-2" />
                      Review Items
                    </Button>
                    <Button
                      onClick={() => handleResetToPending(item)}
                      disabled={actionLoading === item.id}
                      variant="outline"
                      className="flex-1"
                    >
                      <RefreshCw className="w-4 h-4 mr-2" />
                      Reset All
                    </Button>
                    <Button
                      onClick={() => handleRetryFailedItems(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) => setNotes(prev => ({ ...prev, [`reverse-${item.id}`]: e.target.value }))}
                      onFocus={() => setInteractingWith(prev => new Set(prev).add(item.id))}
                      onBlur={() => setInteractingWith(prev => {
                        const next = new Set(prev);
                        next.delete(item.id);
                        return next;
                      })}
                      rows={2}
                    />
                    <div className={`flex gap-2 ${isMobile ? 'flex-col' : ''}`}>
                      {item.status === 'approved' && (
                        <Button
                          variant="destructive"
                          onClick={() => handleModerationAction(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={() => handleModerationAction(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={() => handleDeleteSubmission(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>
        ))}
      </div>
    );
  };

  const clearFilters = () => {
    setActiveEntityFilter('all');
    setActiveStatusFilter('pending');
  };

  const getEntityFilterIcon = (filter: EntityFilter) => {
    switch (filter) {
      case 'reviews': return <MessageSquare className="w-4 h-4" />;
      case 'submissions': return <FileText className="w-4 h-4" />;
      case 'photos': return <Image className="w-4 h-4" />;
      default: return <Filter className="w-4 h-4" />;
    }
  };

  // Helper to format lock timer
  const formatLockTimer = (ms: number): string => {
    const minutes = Math.floor(ms / 60000);
    const seconds = Math.floor((ms % 60000) / 1000);
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

  // Handle claim next action
  const handleClaimNext = async () => {
    const claimedId = await queue.claimNext();
    if (claimedId) {
      // Scroll to claimed submission or fetch to show it
      fetchItems(activeEntityFilter, activeStatusFilter);
    }
  };

  return (
    <div className="space-y-4">
      {/* Queue Statistics & Claim Button */}
      {queue.queueStats && (
        <Card className="bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">
          <CardContent className="p-4">
            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
              {/* Stats Grid */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 flex-1">
                <div className="text-center sm:text-left">
                  <div className="text-2xl font-bold text-primary">{queue.queueStats.pendingCount}</div>
                  <div className="text-xs text-muted-foreground">Pending</div>
                </div>
                <div className="text-center sm:text-left">
                  <div className="text-2xl font-bold text-amber-600 dark:text-amber-400">{queue.queueStats.highPriorityCount}</div>
                  <div className="text-xs text-muted-foreground">High Priority</div>
                </div>
                <div className="text-center sm:text-left">
                  <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">{queue.queueStats.assignedToMe}</div>
                  <div className="text-xs text-muted-foreground">Assigned to Me</div>
                </div>
                <div className="text-center sm:text-left">
                  <div className="text-2xl font-bold text-green-600 dark:text-green-400">
                    {queue.queueStats.avgWaitHours.toFixed(1)}h
                  </div>
                  <div className="text-xs text-muted-foreground">Avg Wait</div>
                </div>
              </div>

              {/* Claim/Lock Status */}
              <div className="flex flex-col gap-2 min-w-[200px]">
                {queue.currentLock ? (
                  <>
                    {/* Lock Timer */}
                    <div className="flex items-center gap-2 text-sm">
                      <Lock className="w-4 h-4 text-amber-500" />
                      <span className="font-medium">
                        Lock: {formatLockTimer(queue.getTimeRemaining() || 0)}
                      </span>
                    </div>
                    <Progress 
                      value={((queue.getTimeRemaining() || 0) / (15 * 60 * 1000)) * 100} 
                      className="h-2"
                    />
                    {/* Extend Lock Button (show when < 5 min left) */}
                    {(queue.getTimeRemaining() || 0) < 5 * 60 * 1000 && (
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => queue.extendLock(queue.currentLock!.submissionId)}
                        disabled={queue.isLoading}
                        className="w-full"
                      >
                        <Clock className="w-4 h-4 mr-2" />
                        Extend Lock
                      </Button>
                    )}
                    <Button
                      size="sm"
                      variant="ghost"
                      onClick={() => queue.releaseLock(queue.currentLock!.submissionId)}
                      disabled={queue.isLoading}
                      className="w-full"
                    >
                      <Unlock className="w-4 h-4 mr-2" />
                      Release Lock
                    </Button>
                  </>
                ) : (
                  <Button
                    size="lg"
                    onClick={handleClaimNext}
                    disabled={queue.isLoading || queue.queueStats.pendingCount === 0}
                    className="w-full"
                  >
                    <Lock className="w-4 h-4 mr-2" />
                    Claim Next Submission
                  </Button>
                )}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      {/* Filter Bar */}
      <div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
        <div className="flex items-center justify-between w-full mb-2 pb-2 border-b border-border">
          <h3 className="text-sm font-medium text-muted-foreground">Moderation Queue</h3>
        </div>
        <div className={`flex gap-4 flex-1 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
          <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[140px]'}`}>
            <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>
            <Select value={activeEntityFilter} onValueChange={(value) => setActiveEntityFilter(value as EntityFilter)}>
              <SelectTrigger className={isMobile ? "h-10" : ""}>
                <SelectValue>
                  <div className="flex items-center gap-2">
                    {getEntityFilterIcon(activeEntityFilter)}
                    <span className="capitalize">{activeEntityFilter === 'all' ? 'All Items' : activeEntityFilter}</span>
                  </div>
                </SelectValue>
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">
                  <div className="flex items-center gap-2">
                    <Filter className="w-4 h-4" />
                    All Items
                  </div>
                </SelectItem>
                <SelectItem value="reviews">
                  <div className="flex items-center gap-2">
                    <MessageSquare className="w-4 h-4" />
                    Reviews
                  </div>
                </SelectItem>
                <SelectItem value="submissions">
                  <div className="flex items-center gap-2">
                    <FileText className="w-4 h-4" />
                    Submissions
                  </div>
                </SelectItem>
                <SelectItem value="photos">
                  <div className="flex items-center gap-2">
                    <Image className="w-4 h-4" />
                    Photos
                  </div>
                </SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[120px]'}`}>
            <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Status</Label>
            <Select value={activeStatusFilter} onValueChange={(value) => setActiveStatusFilter(value as StatusFilter)}>
              <SelectTrigger className={isMobile ? "h-10" : ""}>
                <SelectValue>
                  <span className="capitalize">{activeStatusFilter === 'all' ? 'All Status' : activeStatusFilter}</span>
                </SelectValue>
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All Status</SelectItem>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="partially_approved">Partially Approved</SelectItem>
                {activeEntityFilter !== 'submissions' && activeEntityFilter !== 'photos' && (
                  <SelectItem value="flagged">Flagged</SelectItem>
                )}
                <SelectItem value="approved">Approved</SelectItem>
                <SelectItem value="rejected">Rejected</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
          <div className={isMobile ? "" : "flex items-end"}>
            <Button
              variant="outline"
              size={isMobile ? "default" : "sm"}
              onClick={clearFilters}
              className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : ''}`}
            >
              <X className="w-4 h-4" />
              Clear Filters
            </Button>
          </div>
        )}
      </div>

      {/* Active Filters Display */}
      {(activeEntityFilter !== 'all' || activeStatusFilter !== 'pending') && (
        <div className="flex items-center gap-2 text-sm text-muted-foreground">
          <span>Active filters:</span>
          {activeEntityFilter !== 'all' && (
            <Badge variant="secondary" className="flex items-center gap-1">
              {getEntityFilterIcon(activeEntityFilter)}
              {activeEntityFilter}
            </Badge>
          )}
          {activeStatusFilter !== 'pending' && (
            <Badge variant="secondary" className="capitalize">
              {activeStatusFilter}
            </Badge>
          )}
        </div>
      )}

      {/* Auto-refresh Status Indicator */}
      {refreshMode === 'auto' && (
        <div className="flex items-center gap-2 text-xs text-muted-foreground px-1">
          <div className="flex items-center gap-1">
            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
            <span>Auto-refresh active</span>
          </div>
          <span>•</span>
          <span>Checking every {Math.round(pollInterval / 1000)}s</span>
        </div>
      )}

      {/* New Items Notification - Enhanced */}
      {newItemsCount > 0 && (
        <div className="sticky top-0 z-10 animate-in fade-in-50">
          <Alert className="border-primary/50 bg-primary/5">
            <AlertCircle className="h-4 w-4 animate-pulse" />
            <AlertTitle>New Items Available</AlertTitle>
            <AlertDescription className="flex items-center justify-between">
              <span>{newItemsCount} new {newItemsCount === 1 ? 'submission' : 'submissions'} pending review</span>
              <Button
                variant="default"
                size="sm"
                onClick={() => {
                  // Merge pending new items into the main queue at the top
                  if (pendingNewItems.length > 0) {
                    setItems(prev => [...pendingNewItems, ...prev]);
                    setPendingNewItems([]);
                  }
                  setNewItemsCount(0);
                  console.log('✅ New items merged into queue');
                }}
                className="ml-4"
              >
                <RefreshCw className="w-4 h-4 mr-2" />
                Show New Items
              </Button>
            </AlertDescription>
          </Alert>
        </div>
      )}

      {/* Queue Content */}
      <QueueContent />
      
      {/* Photo Modal */}
      <PhotoModal
        photos={selectedPhotos}
        initialIndex={selectedPhotoIndex}
        isOpen={photoModalOpen}
        onClose={() => setPhotoModalOpen(false)}
      />
      
      {/* Submission Review Manager for multi-entity submissions */}
      {selectedSubmissionId && (
        <SubmissionReviewManager
          submissionId={selectedSubmissionId}
          open={reviewManagerOpen}
          onOpenChange={setReviewManagerOpen}
          onComplete={() => {
            fetchItems(activeEntityFilter, activeStatusFilter);
          }}
        />
      )}
    </div>
  );
});

ModerationQueue.displayName = 'ModerationQueue';