igny8/frontend/src/components/common/ContentImageCell.tsx

/**
 * ContentImageCell Component
 * Displays image prompt, placeholder, or actual image based on status
 */
import React, { useState } from 'react';
import Badge from '../ui/badge/Badge';
import Button from '../ui/button/Button';

export interface ContentImageData {
  id?: number;
  image_type?: string;
  image_url?: string | null;
  image_path?: string | null;
  prompt?: string | null;
  status: string;
  position?: number;
  created_at?: string;
  updated_at?: string;
}

interface ContentImageCellProps {
  image: ContentImageData | null;
  maxPromptLength?: number;
  showPrompt?: boolean; // New prop to control prompt visibility
  onImageClick?: () => void; // Optional click handler
}

export default function ContentImageCell({ image, maxPromptLength = 100, showPrompt = false, onImageClick }: ContentImageCellProps) {
  const [showFullPrompt, setShowFullPrompt] = useState(false);

  // Check if image_path is a valid local file path (not a URL)
  const isValidLocalPath = (imagePath: string): boolean => {
    // Reject URLs (http:// or https://)
    if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
      return false;
    }
    // Must contain 'ai-images' to be a valid local path
    return imagePath.includes('ai-images');
  };

  // Convert local file path to web-accessible URL
  const getLocalImageUrl = (imagePath: string): string => {
    // If path contains 'ai-images', convert to web URL
    if (imagePath.includes('ai-images')) {
      const filename = imagePath.split('ai-images/')[1] || imagePath.split('ai-images\\')[1];
      if (filename) {
        return `/images/ai-images/${filename}`;
      }
    }
    // If path is already a web path, return as-is
    if (imagePath.startsWith('/images/')) {
      return imagePath;
    }
    // Otherwise, try to extract filename and use ai-images path
    const filename = imagePath.split('/').pop() || imagePath.split('\\').pop();
    return `/images/ai-images/${filename}`;
  };

  if (!image) {
    return (
      <div className="text-gray-400 dark:text-gray-500 text-sm">-</div>
    );
  }

  const prompt = image.prompt || '';
  const shouldTruncate = prompt.length > maxPromptLength;
  const displayPrompt = showFullPrompt || !shouldTruncate ? prompt : `${prompt.substring(0, maxPromptLength)}...`;

  return (
    <div className="space-y-2">
      {/* Prompt Text - Only show if showPrompt is true */}
      {showPrompt && prompt && (
        <div className="text-sm">
          <p className="text-gray-700 dark:text-gray-300">
            {displayPrompt}
            {shouldTruncate && (
              <Button
                variant="ghost"
                tone="brand"
                size="xs"
                onClick={() => setShowFullPrompt(!showFullPrompt)}
                className="ml-1 p-0 h-auto text-xs"
              >
                {showFullPrompt ? 'Show less' : 'Show more'}
              </Button>
            )}
          </p>
        </div>
      )}

      {/* Image Display */}
      <div 
        className={`relative ${onImageClick ? 'cursor-pointer' : ''}`}
        onClick={onImageClick}
      >
        {image.status === 'pending' && (
          <div className="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
            <div className="text-center">
              <svg
                className="w-8 h-8 mx-auto text-gray-400 dark:text-gray-500 mb-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
              <p className="text-xs text-gray-500 dark:text-gray-400">Pending</p>
            </div>
          </div>
        )}

        {image.status === 'generated' && (
          <div className="space-y-1">
            {/* Only use image_path if it's a valid local file path (not a URL) */}
            {image.image_path && image.image_path.trim() && isValidLocalPath(image.image_path) ? (
              <>
                <img
                  src={getLocalImageUrl(image.image_path)}
                  alt={prompt || 'Generated image'}
                  className="w-full h-24 object-cover rounded border border-gray-300 dark:border-gray-600"
                  onError={(e) => {
                    // Show empty placeholder if local image fails to load
                    const target = e.target as HTMLImageElement;
                    target.style.display = 'none';
                    const parent = target.parentElement;
                    if (parent) {
                      parent.innerHTML = `
                        <div class="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
                          <p class="text-xs text-gray-500 dark:text-gray-400">Image not available</p>
                        </div>
                      `;
                    }
                  }}
                />
              </>
            ) : (
              <div className="w-full h-24 bg-gray-200 dark:bg-gray-700 rounded border-2 border-dashed border-gray-300 dark:border-gray-600 flex items-center justify-center">
                <p className="text-xs text-gray-500 dark:text-gray-400">No image available</p>
              </div>
            )}
          </div>
        )}

        {image.status === 'failed' && (
          <div className="w-full h-24 bg-error-100 dark:bg-error-900/20 rounded border border-error-300 dark:border-error-700 flex items-center justify-center">
            <div className="text-center">
              <svg
                className="w-6 h-6 mx-auto text-error-500 mb-1"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
              <p className="text-xs text-error-700 dark:text-error-400">Failed</p>
            </div>
          </div>
        )}

        {/* Status Badge */}
        <div className="absolute top-1 right-1">
          <Badge
            color={
              image.status === 'generated' ? 'success' :
              image.status === 'failed' ? 'error' :
              'warning'
            }
            size="xs"
            variant="light"
          >
            {image.status}
          </Badge>
        </div>
      </div>
    </div>
  );
}