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';

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

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

  // 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 */}
      {prompt && (
        <div className="text-sm">
          <p className="text-gray-700 dark:text-gray-300">
            {displayPrompt}
            {shouldTruncate && (
              <button
                onClick={() => setShowFullPrompt(!showFullPrompt)}
                className="ml-1 text-brand-500 hover:text-brand-600 text-xs"
              >
                {showFullPrompt ? 'Show less' : 'Show more'}
              </button>
            )}
          </p>
        </div>
      )}

      {/* Image Display */}
      <div className="relative">
        {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">
            {/* Always load from image_path - no fallback */}
            {image.image_path && image.image_path.trim() ? (
              <>
                <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 error placeholder if local image fails (no fallback to image_url)
                    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>
                      `;
                    }
                  }}
                />
                {/* Always show "View Original" button if image_url is available */}
                {image.image_url && (
                  <a
                    href={image.image_url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block w-full text-center px-2 py-1 text-xs text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-300 border border-brand-300 dark:border-brand-700 rounded hover:bg-brand-50 dark:hover:bg-brand-900/20 transition-colors"
                  >
                    View Original
                  </a>
                )}
              </>
            ) : (
              <div className="w-full h-24 bg-yellow-100 dark:bg-yellow-900/20 rounded border border-yellow-300 dark:border-yellow-700 flex items-center justify-center">
                <p className="text-xs text-yellow-700 dark:text-yellow-400">No image available</p>
              </div>
            )}
          </div>
        )}

        {image.status === 'failed' && (
          <div className="w-full h-24 bg-red-100 dark:bg-red-900/20 rounded border border-red-300 dark:border-red-700 flex items-center justify-center">
            <div className="text-center">
              <svg
                className="w-6 h-6 mx-auto text-red-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-red-700 dark:text-red-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>
  );
}