feat: Implement frontend queue integration

src/hooks/useModerationQueue.ts

@@ -0,0 +1,297 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from './useAuth';
+import { useToast } from './use-toast';
+
+interface QueuedSubmission {
+  submission_id: string;
+  submission_type: string;
+  priority: number;
+  waiting_time: string; // PostgreSQL interval format
+}
+
+interface LockState {
+  submissionId: string;
+  expiresAt: Date;
+  autoReleaseTimer?: NodeJS.Timeout;
+}
+
+interface QueueStats {
+  pendingCount: number;
+  assignedToMe: number;
+  avgWaitHours: number;
+  highPriorityCount: number;
+}
+
+export const useModerationQueue = () => {
+  const [currentLock, setCurrentLock] = useState<LockState | null>(null);
+  const [queueStats, setQueueStats] = useState<QueueStats | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const lockTimerRef = useRef<NodeJS.Timeout>();
+  const { user } = useAuth();
+  const { toast } = useToast();
+
+  // Auto-release expired locks periodically
+  useEffect(() => {
+    if (!user) return;
+
+    // Call release_expired_locks every 2 minutes
+    const releaseInterval = setInterval(async () => {
+      try {
+        await supabase.rpc('release_expired_locks');
+      } catch (error) {
+        console.error('Error auto-releasing expired locks:', error);
+      }
+    }, 120000); // 2 minutes
+
+    return () => clearInterval(releaseInterval);
+  }, [user]);
+
+  // Fetch queue statistics
+  const fetchStats = useCallback(async () => {
+    if (!user) return;
+
+    try {
+      const { data: slaData } = await supabase
+        .from('moderation_sla_metrics')
+        .select('*');
+
+      const { count: assignedCount } = await supabase
+        .from('content_submissions')
+        .select('id', { count: 'exact', head: true })
+        .eq('assigned_to', user.id)
+        .gt('locked_until', new Date().toISOString());
+
+      if (slaData) {
+        const totals = slaData.reduce(
+          (acc, row) => ({
+            pendingCount: acc.pendingCount + (row.pending_count || 0),
+            avgWaitHours: acc.avgWaitHours + (row.avg_wait_hours || 0),
+            highPriorityCount: acc.highPriorityCount + (row.escalated_count || 0),
+          }),
+          { pendingCount: 0, avgWaitHours: 0, highPriorityCount: 0 }
+        );
+
+        setQueueStats({
+          pendingCount: totals.pendingCount,
+          assignedToMe: assignedCount || 0,
+          avgWaitHours: slaData.length > 0 ? totals.avgWaitHours / slaData.length : 0,
+          highPriorityCount: totals.highPriorityCount,
+        });
+      }
+    } catch (error) {
+      console.error('Error fetching queue stats:', error);
+    }
+  }, [user]);
+
+  // Fetch stats on mount and periodically
+  useEffect(() => {
+    fetchStats();
+    const interval = setInterval(fetchStats, 30000); // Every 30 seconds
+    return () => clearInterval(interval);
+  }, [fetchStats]);
+
+  // Start countdown timer for lock expiry
+  const startLockTimer = useCallback((expiresAt: Date) => {
+    if (lockTimerRef.current) {
+      clearInterval(lockTimerRef.current);
+    }
+
+    lockTimerRef.current = setInterval(() => {
+      const now = new Date();
+      const timeLeft = expiresAt.getTime() - now.getTime();
+
+      if (timeLeft <= 0) {
+        // Lock expired
+        setCurrentLock(null);
+        if (lockTimerRef.current) {
+          clearInterval(lockTimerRef.current);
+        }
+        toast({
+          title: 'Lock Expired',
+          description: 'Your submission lock has expired',
+          variant: 'destructive',
+        });
+      }
+    }, 1000); // Check every second
+  }, [toast]);
+
+  // Clean up timer on unmount
+  useEffect(() => {
+    return () => {
+      if (lockTimerRef.current) {
+        clearInterval(lockTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Claim next submission from queue
+  const claimNext = useCallback(async (): Promise<string | null> => {
+    if (!user?.id) {
+      toast({
+        title: 'Authentication Required',
+        description: 'You must be logged in to claim submissions',
+        variant: 'destructive',
+      });
+      return null;
+    }
+
+    setIsLoading(true);
+    try {
+      const { data, error } = await supabase.rpc('claim_next_submission', {
+        moderator_id: user.id,
+        lock_duration: '15 minutes',
+      });
+
+      if (error) throw error;
+
+      if (!data || data.length === 0) {
+        toast({
+          title: 'Queue Empty',
+          description: 'No submissions available to review',
+        });
+        return null;
+      }
+
+      const claimed = data[0] as QueuedSubmission;
+      const expiresAt = new Date(Date.now() + 15 * 60 * 1000);
+
+      setCurrentLock({
+        submissionId: claimed.submission_id,
+        expiresAt,
+      });
+
+      startLockTimer(expiresAt);
+      fetchStats();
+
+      toast({
+        title: 'Submission Claimed',
+        description: `Priority ${claimed.priority} ${claimed.submission_type} (waiting ${formatInterval(claimed.waiting_time)})`,
+      });
+
+      return claimed.submission_id;
+    } catch (error: any) {
+      console.error('Error claiming submission:', error);
+      toast({
+        title: 'Error',
+        description: error.message || 'Failed to claim submission',
+        variant: 'destructive',
+      });
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user, toast, startLockTimer, fetchStats]);
+
+  // Extend current lock
+  const extendLock = useCallback(async (submissionId: string): Promise<boolean> => {
+    if (!user?.id) return false;
+
+    setIsLoading(true);
+    try {
+      const { data, error } = await supabase.rpc('extend_submission_lock', {
+        submission_id: submissionId,
+        moderator_id: user.id,
+        extension_duration: '15 minutes',
+      });
+
+      if (error) throw error;
+
+      if (data) {
+        const newExpiresAt = new Date(data);
+        setCurrentLock((prev) =>
+          prev?.submissionId === submissionId
+            ? { ...prev, expiresAt: newExpiresAt }
+            : prev
+        );
+        startLockTimer(newExpiresAt);
+
+        toast({
+          title: 'Lock Extended',
+          description: 'Lock extended for 15 more minutes',
+        });
+
+        return true;
+      }
+
+      return false;
+    } catch (error: any) {
+      console.error('Error extending lock:', error);
+      toast({
+        title: 'Error',
+        description: error.message || 'Failed to extend lock',
+        variant: 'destructive',
+      });
+      return false;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [user, toast, startLockTimer]);
+
+  // Release lock (manual or on completion)
+  const releaseLock = useCallback(async (submissionId: string): Promise<boolean> => {
+    if (!user?.id) return false;
+
+    try {
+      const { data, error } = await supabase.rpc('release_submission_lock', {
+        submission_id: submissionId,
+        moderator_id: user.id,
+      });
+
+      if (error) throw error;
+
+      if (data) {
+        setCurrentLock((prev) =>
+          prev?.submissionId === submissionId ? null : prev
+        );
+
+        if (lockTimerRef.current) {
+          clearInterval(lockTimerRef.current);
+        }
+
+        fetchStats();
+        return true;
+      }
+
+      return false;
+    } catch (error: any) {
+      console.error('Error releasing lock:', error);
+      return false;
+    }
+  }, [user, fetchStats]);
+
+  // Get time remaining on current lock
+  const getTimeRemaining = useCallback((): number | null => {
+    if (!currentLock) return null;
+    return Math.max(0, currentLock.expiresAt.getTime() - Date.now());
+  }, [currentLock]);
+
+  return {
+    currentLock,
+    queueStats,
+    isLoading,
+    claimNext,
+    extendLock,
+    releaseLock,
+    getTimeRemaining,
+    refreshStats: fetchStats,
+  };
+};
+
+// Helper to format PostgreSQL interval
+function formatInterval(interval: string): string {
+  const match = interval.match(/(\d+):(\d+):(\d+)/);
+  if (!match) return interval;
+
+  const hours = parseInt(match[1]);
+  const minutes = parseInt(match[2]);
+
+  if (hours > 24) {
+    const days = Math.floor(hours / 24);
+    return `${days}d ${hours % 24}h`;
+  } else if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  } else {
+    return `${minutes}m`;
+  }
+}