import React from 'react';

/**
 * Renders a visual preview of Creative draft data including images,
 * headlines, and descriptions.
 */
export default function CreativePreview({ data }) {
  if (!data) return null;

  // Handle nested response structure: result.data or just data
  const draft = data?.result?.data || data?.data || data;

  const images = draft?.images || [];
  const headlines = draft?.headlines || [];
  const descriptions = draft?.descriptions || [];
  const analysis = draft?.analysis;
  const source = draft?.source;
  const imageSource = draft?.imageSource;

  // Only show preview if we have images or assets
  if (images.length === 0 && headlines.length === 0) {
    return null;
  }

  return (
    <div className="creative-preview">
      <h4 className="preview-title">
        Creative Preview
        {source && <span className="source-badge">Copy: {source}</span>}
        {imageSource && <span className="source-badge">Images: {imageSource}</span>}
      </h4>

      {/* Analysis Summary */}
      {analysis && (
        <div className="analysis-summary">
          <div className="analysis-title">{analysis.title || 'Untitled'}</div>
          {analysis.inferredCategory && (
            <span className="category-badge">{analysis.inferredCategory}</span>
          )}
          {analysis.metaDescription && (
            <p className="analysis-desc">{analysis.metaDescription}</p>
          )}
        </div>
      )}

      {/* Images Grid */}
      {images.length > 0 && (
        <div className="images-section">
          <h5>Images ({images.length})</h5>
          <div className="images-grid">
            {images.map((img, idx) => (
              <div key={img.imageId || idx} className="image-card">
                <div className="image-wrapper">
                  <img 
                    src={img.url} 
                    alt={img.altText || `${img.orientation} image`}
                    loading="lazy"
                    onError={(e) => {
                      e.target.style.display = 'none';
                      e.target.nextSibling.style.display = 'flex';
                    }}
                  />
                  <div className="image-error" style={{ display: 'none' }}>
                    Failed to load
                  </div>
                </div>
                <div className="image-meta">
                  <span className="orientation-badge">{img.orientation}</span>
                  <span className="dimensions">{img.width}×{img.height}</span>
                </div>
                {img.attribution && (
                  <div className="attribution">{img.attribution}</div>
                )}
                {img.blobStored && (
                  <div className="blob-indicator" title="Stored in blob storage">
                    ☁️ Stored
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Headlines */}
      {headlines.length > 0 && (
        <div className="assets-section">
          <h5>Headlines ({headlines.length})</h5>
          <div className="assets-list">
            {headlines.map((h, idx) => (
              <div key={idx} className="asset-item headline">
                <span className="asset-text">{h.text}</span>
                <span className="char-count">{h.charCount}/30</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Descriptions */}
      {descriptions.length > 0 && (
        <div className="assets-section">
          <h5>Descriptions ({descriptions.length})</h5>
          <div className="assets-list">
            {descriptions.map((d, idx) => (
              <div key={idx} className="asset-item description">
                <span className="asset-text">{d.text}</span>
                <span className="char-count">{d.charCount}/90</span>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
