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

import { Badge } from '@/components/ui/badge';
import { FieldDiff, ImageDiff, LocationDiff } from './FieldComparison';
import { detectChanges } from '@/lib/submissionChangeDetection';
import type { SubmissionItemData } from '@/types/submissions';
import type { SubmissionItemWithDeps } from '@/lib/submissionItemsService';
import { Building2, Train, MapPin, Building, User, ImageIcon, Trash2, Edit, Plus } from 'lucide-react';

interface SubmissionChangesDisplayProps {
  item: SubmissionItemData | SubmissionItemWithDeps;
  view?: 'summary' | 'detailed';
  showImages?: boolean;
}

export function SubmissionChangesDisplay({ 
  item, 
  view = 'summary',
  showImages = true 
}: SubmissionChangesDisplayProps) {
  const changes = detectChanges(item);
  
  // Get appropriate icon for entity type
  const getEntityIcon = () => {
    const iconClass = "h-4 w-4";
    switch (item.item_type) {
      case 'park': return <Building2 className={iconClass} />;
      case 'ride': return <Train className={iconClass} />;
      case 'manufacturer':
      case 'operator':
      case 'property_owner':
      case 'designer': return <Building className={iconClass} />;
      case 'photo': return <ImageIcon className={iconClass} />;
      default: return <MapPin className={iconClass} />;
    }
  };

  // Get action badge
  const getActionBadge = () => {
    switch (changes.action) {
      case 'create':
        return <Badge className="bg-green-600"><Plus className="h-3 w-3 mr-1" />New</Badge>;
      case 'edit':
        return <Badge className="bg-amber-600"><Edit className="h-3 w-3 mr-1" />Edit</Badge>;
      case 'delete':
        return <Badge variant="destructive"><Trash2 className="h-3 w-3 mr-1" />Delete</Badge>;
    }
  };

  if (view === 'summary') {
    return (
      <div className="flex flex-col gap-2">
        <div className="flex items-center gap-2">
          {getEntityIcon()}
          <span className="font-medium">{changes.entityName}</span>
          {getActionBadge()}
        </div>
        
        {changes.action === 'edit' && changes.totalChanges > 0 && (
          <div className="flex flex-wrap gap-1">
            {changes.fieldChanges.slice(0, 5).map((change, idx) => (
              <FieldDiff key={idx} change={change} compact />
            ))}
            {changes.imageChanges.map((change, idx) => (
              <ImageDiff key={`img-${idx}`} change={change} compact />
            ))}
            {changes.hasLocationChange && (
              <Badge variant="outline" className="text-blue-600 dark:text-blue-400">
                Location
              </Badge>
            )}
            {changes.totalChanges > 5 && (
              <Badge variant="outline">
                +{changes.totalChanges - 5} more
              </Badge>
            )}
          </div>
        )}
        
        {changes.action === 'create' && (
          <div className="text-sm text-muted-foreground">
            New {item.item_type}
          </div>
        )}
        
        {changes.action === 'delete' && (
          <div className="text-sm text-destructive">
            Marked for deletion
          </div>
        )}
      </div>
    );
  }

  // Detailed view
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        {getEntityIcon()}
        <h3 className="text-lg font-semibold">{changes.entityName}</h3>
        {getActionBadge()}
      </div>

      {changes.action === 'create' && (
        <div className="text-sm text-muted-foreground">
          Creating new {item.item_type}
        </div>
      )}

      {changes.action === 'delete' && (
        <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
          This {item.item_type} will be deleted
        </div>
      )}

      {changes.action === 'edit' && changes.totalChanges > 0 && (
        <>
          {changes.fieldChanges.length > 0 && (
            <div className="flex flex-col gap-2">
              <h4 className="text-sm font-medium">Field Changes ({changes.fieldChanges.length})</h4>
              <div className="grid gap-2">
                {changes.fieldChanges.map((change, idx) => (
                  <FieldDiff key={idx} change={change} />
                ))}
              </div>
            </div>
          )}

          {showImages && changes.imageChanges.length > 0 && (
            <div className="flex flex-col gap-2">
              <h4 className="text-sm font-medium">Image Changes</h4>
              <div className="grid gap-2">
                {changes.imageChanges.map((change, idx) => (
                  <ImageDiff key={idx} change={change} />
                ))}
              </div>
            </div>
          )}

          {changes.hasLocationChange && (
            <div className="flex flex-col gap-2">
              <h4 className="text-sm font-medium">Location Change</h4>
              <LocationDiff 
                oldLocation={item.original_data?.location || item.original_data?.location_id}
                newLocation={item.item_data?.location || item.item_data?.location_id}
              />
            </div>
          )}
        </>
      )}

      {changes.action === 'edit' && changes.totalChanges === 0 && (
        <div className="text-sm text-muted-foreground">
          No changes detected
        </div>
      )}
    </div>
  );
}