feat: Implement comprehensive validation system

src/components/moderation/ItemReviewCard.tsx

@@ -6,6 +6,9 @@ import { type SubmissionItemWithDeps } from '@/lib/submissionItemsService';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { PhotoSubmissionDisplay } from './PhotoSubmissionDisplay';
 import { SubmissionChangesDisplay } from './SubmissionChangesDisplay';
+import { ValidationSummary } from './ValidationSummary';
+import { useState } from 'react';
+import { ValidationResult } from '@/lib/entityValidationSchemas';
 
 interface ItemReviewCardProps {
   item: SubmissionItemWithDeps;
@@ -16,6 +19,7 @@ interface ItemReviewCardProps {
 
 export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: ItemReviewCardProps) {
   const isMobile = useIsMobile();
+  const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
   
   const getItemIcon = () => {
     switch (item.item_type) {
@@ -40,6 +44,20 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I
     }
   };
 
+  const getValidationBadgeVariant = (): "default" | "secondary" | "destructive" | "outline" => {
+    if (!validationResult) return 'outline';
+    if (validationResult.blockingErrors.length > 0) return 'destructive';
+    if (validationResult.warnings.length > 0) return 'outline';
+    return 'secondary';
+  };
+
+  const getValidationBadgeLabel = () => {
+    if (!validationResult) return 'Validating...';
+    if (validationResult.blockingErrors.length > 0) return '❌ Errors';
+    if (validationResult.warnings.length > 0) return '⚠️ Warnings';
+    return '✓ Valid';
+  };
+
   const renderItemPreview = () => {
     // Use detailed view for review manager with photo detection
     return (
@@ -71,6 +89,9 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I
             <Badge variant={getStatusColor()} className={isMobile ? "text-xs" : ""}>
               {item.status}
             </Badge>
+            <Badge variant={getValidationBadgeVariant()} className={isMobile ? "text-xs" : ""}>
+              {getValidationBadgeLabel()}
+            </Badge>
             {item.status === 'pending' && (
               <Button
                 size={isMobile ? "default" : "sm"}
@@ -88,6 +109,19 @@ export function ItemReviewCard({ item, onEdit, onStatusChange, submissionId }: I
       <CardContent className={isMobile ? "p-4 pt-0" : ""}>
         {renderItemPreview()}
         
+        {/* Validation Summary */}
+        <div className="border-t pt-4 mt-4">
+          <ValidationSummary
+            item={{
+              item_type: item.item_type,
+              item_data: item.item_data,
+              id: item.id,
+            }}
+            onValidationChange={setValidationResult}
+            compact={false}
+          />
+        </div>
+        
         {item.depends_on && (
           <div className="mt-3 pt-3 border-t">
             <p className={`text-muted-foreground ${isMobile ? 'text-xs' : 'text-xs'}`}>

src/components/moderation/QueueItem.tsx

@@ -40,6 +40,8 @@ interface ModerationItem {
   locked_until?: string;
 }
 
+import { ValidationSummary } from './ValidationSummary';
+
 interface QueueItemProps {
   item: ModerationItem;
   isMobile: boolean;
@@ -152,6 +154,14 @@ export const QueueItem = memo(({
                 Claimed by You
               </Badge>
             )}
+            <ValidationSummary
+              item={{
+                item_type: item.submission_type || 'submission',
+                item_data: item.content,
+                id: item.id,
+              }}
+              compact={true}
+            />
           </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"} />

src/components/moderation/SubmissionReviewManager.tsx

@@ -28,6 +28,9 @@ import { ConflictResolutionDialog } from './ConflictResolutionDialog';
 import { EscalationDialog } from './EscalationDialog';
 import { RejectionDialog } from './RejectionDialog';
 import { ItemEditDialog } from './ItemEditDialog';
+import { ValidationBlockerDialog } from './ValidationBlockerDialog';
+import { WarningConfirmDialog } from './WarningConfirmDialog';
+import { validateMultipleItems, ValidationResult } from '@/lib/entityValidationSchemas';
 
 interface SubmissionReviewManagerProps {
   submissionId: string;
@@ -53,6 +56,10 @@ export function SubmissionReviewManager({
   const [editingItem, setEditingItem] = useState<SubmissionItemWithDeps | null>(null);
   const [activeTab, setActiveTab] = useState<'items' | 'dependencies'>('items');
   const [submissionType, setSubmissionType] = useState<string>('submission');
+  const [showValidationBlockerDialog, setShowValidationBlockerDialog] = useState(false);
+  const [showWarningConfirmDialog, setShowWarningConfirmDialog] = useState(false);
+  const [validationResults, setValidationResults] = useState<Map<string, ValidationResult>>(new Map());
+  const [userConfirmedWarnings, setUserConfirmedWarnings] = useState(false);
   
   const { toast } = useToast();
   const { isAdmin, isSuperuser } = useUserRole();
@@ -147,10 +154,47 @@ export function SubmissionReviewManager({
       return;
     }
 
+    const selectedItems = items.filter(item => selectedItemIds.has(item.id));
+    
     setLoading(true);
     try {
+      // Run validation on all selected items
+      const validationResultsMap = await validateMultipleItems(
+        selectedItems.map(item => ({
+          item_type: item.item_type,
+          item_data: item.item_data,
+          id: item.id
+        }))
+      );
+      
+      setValidationResults(validationResultsMap);
+      
+      // Check for blocking errors
+      const itemsWithBlockingErrors = selectedItems.filter(item => {
+        const result = validationResultsMap.get(item.id);
+        return result && result.blockingErrors.length > 0;
+      });
+      
+      if (itemsWithBlockingErrors.length > 0 && !userConfirmedWarnings) {
+        setShowValidationBlockerDialog(true);
+        setLoading(false);
+        return; // Block approval
+      }
+      
+      // Check for warnings
+      const itemsWithWarnings = selectedItems.filter(item => {
+        const result = validationResultsMap.get(item.id);
+        return result && result.warnings.length > 0;
+      });
+      
+      if (itemsWithWarnings.length > 0 && !userConfirmedWarnings) {
+        setShowWarningConfirmDialog(true);
+        setLoading(false);
+        return; // Ask for confirmation
+      }
+      
+      // Proceed with approval
       const { supabase } = await import('@/integrations/supabase/client');
-      const selectedItems = items.filter(item => selectedItemIds.has(item.id));
       
       // Call the edge function for backend processing
       const { data, error } = await supabase.functions.invoke('process-selective-approval', {

src/components/moderation/ValidationBlockerDialog.tsx

@@ -0,0 +1,67 @@
+import { AlertCircle } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { ValidationError } from '@/lib/entityValidationSchemas';
+
+interface ValidationBlockerDialogProps {
+  open: boolean;
+  onClose: () => void;
+  blockingErrors: ValidationError[];
+  itemNames: string[];
+}
+
+export function ValidationBlockerDialog({
+  open,
+  onClose,
+  blockingErrors,
+  itemNames,
+}: ValidationBlockerDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onClose}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="w-5 h-5" />
+            Cannot Approve: Validation Errors
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            The following items have blocking validation errors that must be fixed before approval:
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <div className="space-y-3 my-4">
+          {itemNames.map((name, index) => (
+            <div key={index} className="space-y-2">
+              <div className="font-medium text-sm">{name}</div>
+              <Alert variant="destructive">
+                <AlertDescription className="space-y-1">
+                  {blockingErrors
+                    .filter((_, i) => i === index || itemNames.length === 1)
+                    .map((error, errIndex) => (
+                      <div key={errIndex} className="text-sm">
+                        • <span className="font-medium">{error.field}:</span> {error.message}
+                      </div>
+                    ))}
+                </AlertDescription>
+              </Alert>
+            </div>
+          ))}
+        </div>
+
+        <AlertDialogFooter>
+          <AlertDialogAction onClick={onClose}>
+            Close
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/moderation/ValidationSummary.tsx

@@ -0,0 +1,187 @@
+import { useEffect, useState } from 'react';
+import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { validateEntityData, ValidationResult } from '@/lib/entityValidationSchemas';
+
+interface ValidationSummaryProps {
+  item: {
+    item_type: string;
+    item_data: any;
+    id?: string;
+  };
+  onValidationChange?: (result: ValidationResult) => void;
+  compact?: boolean;
+}
+
+export function ValidationSummary({ item, onValidationChange, compact = false }: ValidationSummaryProps) {
+  const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    async function validate() {
+      setIsLoading(true);
+      try {
+        const result = await validateEntityData(
+          item.item_type as any,
+          { ...item.item_data, id: item.id }
+        );
+        setValidationResult(result);
+        onValidationChange?.(result);
+      } catch (error) {
+        console.error('Validation error:', error);
+        setValidationResult({
+          isValid: false,
+          blockingErrors: [{ field: 'validation', message: 'Failed to validate', severity: 'blocking' }],
+          warnings: [],
+          suggestions: [],
+          allErrors: [{ field: 'validation', message: 'Failed to validate', severity: 'blocking' }],
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    validate();
+  }, [item.item_type, item.item_data, item.id, onValidationChange]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <div className="animate-spin rounded-full h-4 w-4 border-2 border-primary border-t-transparent" />
+        <span>Validating...</span>
+      </div>
+    );
+  }
+
+  if (!validationResult) {
+    return null;
+  }
+
+  const hasBlockingErrors = validationResult.blockingErrors.length > 0;
+  const hasWarnings = validationResult.warnings.length > 0;
+  const hasSuggestions = validationResult.suggestions.length > 0;
+  const hasAnyIssues = hasBlockingErrors || hasWarnings || hasSuggestions;
+
+  // Compact view (for queue items)
+  if (compact) {
+    return (
+      <div className="flex items-center gap-2">
+        {validationResult.isValid && !hasWarnings && !hasSuggestions && (
+          <Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
+            <CheckCircle className="w-3 h-3 mr-1" />
+            Valid
+          </Badge>
+        )}
+        {hasBlockingErrors && (
+          <Badge variant="destructive">
+            <AlertCircle className="w-3 h-3 mr-1" />
+            {validationResult.blockingErrors.length} Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+        {hasWarnings && !hasBlockingErrors && (
+          <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">
+            <AlertTriangle className="w-3 h-3 mr-1" />
+            {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+        {hasSuggestions && !hasBlockingErrors && !hasWarnings && (
+          <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">
+            <Info className="w-3 h-3 mr-1" />
+            {validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+      </div>
+    );
+  }
+
+  // Detailed view (for review manager)
+  return (
+    <div className="space-y-3">
+      {/* Summary Badge */}
+      <div className="flex items-center gap-2">
+        {validationResult.isValid && !hasWarnings && !hasSuggestions && (
+          <Badge variant="secondary" className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700">
+            <CheckCircle className="w-4 h-4 mr-1" />
+            All Valid
+          </Badge>
+        )}
+        {hasBlockingErrors && (
+          <Badge variant="destructive" className="text-sm">
+            <AlertCircle className="w-4 h-4 mr-1" />
+            {validationResult.blockingErrors.length} Blocking Error{validationResult.blockingErrors.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+        {hasWarnings && (
+          <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 text-sm">
+            <AlertTriangle className="w-4 h-4 mr-1" />
+            {validationResult.warnings.length} Warning{validationResult.warnings.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+        {hasSuggestions && (
+          <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 text-sm">
+            <Info className="w-4 h-4 mr-1" />
+            {validationResult.suggestions.length} Suggestion{validationResult.suggestions.length !== 1 ? 's' : ''}
+          </Badge>
+        )}
+      </div>
+
+      {/* Detailed Issues */}
+      {hasAnyIssues && (
+        <Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
+          <CollapsibleTrigger className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+            {isExpanded ? 'Hide' : 'Show'} validation details
+          </CollapsibleTrigger>
+          <CollapsibleContent className="space-y-2 mt-2">
+            {/* Blocking Errors */}
+            {hasBlockingErrors && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Blocking Errors</AlertTitle>
+                <AlertDescription className="space-y-1 mt-2">
+                  {validationResult.blockingErrors.map((error, index) => (
+                    <div key={index} className="text-sm">
+                      <span className="font-medium">{error.field}:</span> {error.message}
+                    </div>
+                  ))}
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {/* Warnings */}
+            {hasWarnings && (
+              <Alert className="border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20">
+                <AlertTriangle className="h-4 w-4 text-yellow-800 dark:text-yellow-300" />
+                <AlertTitle className="text-yellow-800 dark:text-yellow-300">Warnings</AlertTitle>
+                <AlertDescription className="space-y-1 mt-2 text-yellow-800 dark:text-yellow-300">
+                  {validationResult.warnings.map((warning, index) => (
+                    <div key={index} className="text-sm">
+                      <span className="font-medium">{warning.field}:</span> {warning.message}
+                    </div>
+                  ))}
+                </AlertDescription>
+              </Alert>
+            )}
+
+            {/* Suggestions */}
+            {hasSuggestions && (
+              <Alert className="border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-blue-900/20">
+                <Info className="h-4 w-4 text-blue-800 dark:text-blue-300" />
+                <AlertTitle className="text-blue-800 dark:text-blue-300">Suggestions</AlertTitle>
+                <AlertDescription className="space-y-1 mt-2 text-blue-800 dark:text-blue-300">
+                  {validationResult.suggestions.map((suggestion, index) => (
+                    <div key={index} className="text-sm">
+                      <span className="font-medium">{suggestion.field}:</span> {suggestion.message}
+                    </div>
+                  ))}
+                </AlertDescription>
+              </Alert>
+            )}
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+    </div>
+  );
+}

src/components/moderation/WarningConfirmDialog.tsx

@@ -0,0 +1,73 @@
+import { AlertTriangle } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { ValidationError } from '@/lib/entityValidationSchemas';
+
+interface WarningConfirmDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onProceed: () => void;
+  warnings: ValidationError[];
+  itemNames: string[];
+}
+
+export function WarningConfirmDialog({
+  open,
+  onClose,
+  onProceed,
+  warnings,
+  itemNames,
+}: WarningConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onClose}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2 text-yellow-800 dark:text-yellow-300">
+            <AlertTriangle className="w-5 h-5" />
+            Validation Warnings
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            The following items have validation warnings. You can proceed with approval, but fixing these issues will improve content quality:
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+
+        <div className="space-y-3 my-4">
+          {itemNames.map((name, index) => (
+            <div key={index} className="space-y-2">
+              <div className="font-medium text-sm">{name}</div>
+              <Alert className="border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/20">
+                <AlertDescription className="space-y-1 text-yellow-800 dark:text-yellow-300">
+                  {warnings
+                    .filter((_, i) => i === index || itemNames.length === 1)
+                    .map((warning, warnIndex) => (
+                      <div key={warnIndex} className="text-sm">
+                        • <span className="font-medium">{warning.field}:</span> {warning.message}
+                      </div>
+                    ))}
+                </AlertDescription>
+              </Alert>
+            </div>
+          ))}
+        </div>
+
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onClose}>
+            Go Back to Edit
+          </AlertDialogCancel>
+          <AlertDialogAction onClick={onProceed}>
+            Proceed with Approval
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}