import { memo } from 'react';
import { AlertTriangle } from 'lucide-react';
import { PhotoGrid } from '@/components/common/PhotoGrid';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import type { PhotoSubmissionItem } from '@/types/photos';
import type { PhotoForDisplay, ModerationItem } from '@/types/moderation';

interface PhotoSubmissionDisplayProps {
  item: ModerationItem;
  photoItems: PhotoSubmissionItem[];
  loading: boolean;
  onOpenPhotos: (photos: PhotoForDisplay[], index: number) => void;
}

export const PhotoSubmissionDisplay = memo(({ 
  item, 
  photoItems, 
  loading, 
  onOpenPhotos 
}: PhotoSubmissionDisplayProps) => {
  return (
    <div>
      <div className="text-sm text-muted-foreground mb-3">
        Photo Submission
      </div>
      
      {/* Submission Title */}
      {item.content.title && (
        <div className="mb-3">
          <div className="text-sm font-medium mb-1">Title:</div>
          <p className="text-sm">{item.content.title}</p>
        </div>
      )}
      
      {/* Photos from relational table */}
      {loading ? (
        <div className="text-sm text-muted-foreground">Loading photos...</div>
      ) : photoItems.length > 0 ? (
        <div className="space-y-2">
          <div className="text-sm font-medium flex items-center justify-between">
            <span>Photos ({photoItems.length}):</span>
            {import.meta.env.DEV && photoItems[0] && (
              <span className="text-xs text-muted-foreground">
                URL: {photoItems[0].cloudflare_image_url?.slice(0, 30)}...
              </span>
            )}
          </div>
          <PhotoGrid
            photos={photoItems.map(photo => ({
              id: photo.id,
              url: photo.cloudflare_image_url,
              filename: photo.filename || `Photo ${photo.order_index + 1}`,
              caption: photo.caption,
              title: photo.title,
              date_taken: photo.date_taken,
            }))}
            onPhotoClick={(photos, index) => onOpenPhotos(photos as any, index)}
          />
        </div>
      ) : (
        <Alert variant="destructive" className="mt-4">
          <AlertTriangle className="h-4 w-4" />
          <AlertTitle>No Photos Found</AlertTitle>
          <AlertDescription>
            This photo submission has no photos attached. This may be a data integrity issue.
          </AlertDescription>
        </Alert>
      )}
      
      {/* Context Information */}
      {item.entity_name && (
        <div className="mt-3 pt-3 border-t text-sm">
          <span className="text-muted-foreground">For: </span>
          <span className="font-medium">{item.entity_name}</span>
          {item.park_name && (
            <>
              <span className="text-muted-foreground"> at </span>
              <span className="font-medium">{item.park_name}</span>
            </>
          )}
        </div>
      )}
    </div>
  );
});

PhotoSubmissionDisplay.displayName = 'PhotoSubmissionDisplay';