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

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>
  );
}