feat: Implement conflict resolution logic

src/components/moderation/ConflictResolutionDialog.tsx

@@ -4,8 +4,10 @@ import { Button } from '@/components/ui/button';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { Label } from '@/components/ui/label';
 import { Alert, AlertDescription } from '@/components/ui/alert';
-import { AlertCircle } from 'lucide-react';
-import { type DependencyConflict, type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import { type DependencyConflict, type SubmissionItemWithDeps, resolveConflicts } from '@/lib/submissionItemsService';
+import { useAuth } from '@/hooks/useAuth';
 
 interface ConflictResolutionDialogProps {
   open: boolean;
@@ -22,7 +24,9 @@ export function ConflictResolutionDialog({
   items,
   onResolve,
 }: ConflictResolutionDialogProps) {
+  const { user } = useAuth();
   const [resolutions, setResolutions] = useState<Record<string, string>>({});
+  const [isProcessing, setIsProcessing] = useState(false);
 
   const handleResolutionChange = (itemId: string, action: string) => {
     setResolutions(prev => ({ ...prev, [itemId]: action }));
@@ -32,10 +36,36 @@ export function ConflictResolutionDialog({
     conflict => resolutions[conflict.itemId]
   );
 
-  const handleApply = () => {
-    // TODO: Apply resolutions
-    onResolve();
-    onOpenChange(false);
+  const handleApply = async () => {
+    if (!user) {
+      toast.error('You must be logged in to resolve conflicts');
+      return;
+    }
+
+    setIsProcessing(true);
+
+    try {
+      const { updatedItems, newConflicts } = await resolveConflicts(
+        conflicts,
+        resolutions,
+        items,
+        user.id
+      );
+
+      if (newConflicts.length > 0) {
+        toast.error(`Resolution completed with ${newConflicts.length} remaining conflicts`);
+      } else {
+        toast.success('All conflicts resolved successfully');
+      }
+
+      onResolve();
+      onOpenChange(false);
+    } catch (error) {
+      console.error('Error resolving conflicts:', error);
+      toast.error(error instanceof Error ? error.message : 'Failed to resolve conflicts');
+    } finally {
+      setIsProcessing(false);
+    }
   };
 
   return (
@@ -83,11 +113,12 @@ export function ConflictResolutionDialog({
         </div>
 
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isProcessing}>
             Cancel
           </Button>
-          <Button onClick={handleApply} disabled={!allConflictsResolved}>
-            Apply & Approve
+          <Button onClick={handleApply} disabled={!allConflictsResolved || isProcessing}>
+            {isProcessing && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            {isProcessing ? 'Processing...' : 'Apply & Approve'}
           </Button>
         </DialogFooter>
       </DialogContent>