adserver-dashboard 1.0.0

package/client/src/components/line-items/steps/creatives-step.tsx

@@ -0,0 +1,681 @@
+import { useState, useEffect, useCallback } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useParams } from "wouter";
+import { useTranslation } from "@/lib/i18n";
+import { Button } from "@moving-walls/design-system";
+import { Card } from "@moving-walls/design-system";
+import { Badge } from "@moving-walls/design-system";
+import {
+  Image as ImageIcon,
+  Video,
+  Volume2,
+  Upload,
+  SkipForward,
+  X,
+  Loader2,
+  GripVertical,
+  Trash2,
+  AlertCircle,
+} from "lucide-react";
+import { FormInsights } from "../form-insights";
+import { cn } from "@moving-walls/design-system";
+import { contentHubClient } from "@/lib/content-hub-api";
+import { InfluenceDealsAPI, influenceDealsRequest } from "@/lib/influence-deals-api";
+
+interface Creative {
+  creativeId: string;
+  creativeUri: string;
+  creativeType: "DISPLAY" | "VIDEO" | "AUDIO";
+  resolution?: string;
+  thumbnail?: string;
+  mimeType?: string;
+  duration?: number;
+  inventoryIds?: string[];
+  metadata?: Record<string, any>;
+  name?: string;
+  fileSize?: string;
+  status?: string;
+}
+
+interface CreativesStepProps {
+  data?: Creative[];
+  lineItemId?: string;
+  lineItemName?: string;
+  dealId?: string;
+  dealDealId?: string;  // The deal's dealId field (e.g., "DIR-I-00000-00005")
+  allowedResolutions?: string[];  // Line item's allowed resolutions for filtering
+  creativeType?: "DISPLAY" | "VIDEO" | "AUDIO";  // Line item's creative type for filtering
+  onComplete: (data: Creative[]) => void;
+  onBack?: () => void;
+  onSkip?: () => void;
+  isLoading?: boolean;
+  isEditMode?: boolean;
+}
+
+function mapContentHubCreative(item: any): Creative {
+  const mimeType = item.mime_type || item.mimeType || "";
+  let creativeType: "DISPLAY" | "VIDEO" | "AUDIO" = "DISPLAY";
+  
+  if (mimeType.startsWith("video/")) {
+    creativeType = "VIDEO";
+  } else if (mimeType.startsWith("audio/")) {
+    creativeType = "AUDIO";
+  }
+  
+  const fileSize = item.file_size || item.fileSize || item.size_bytes;
+  const fileSizeStr = fileSize 
+    ? `${(fileSize / 1024 / 1024).toFixed(1)} MB` 
+    : undefined;
+  
+  return {
+    creativeId: item.id || item.creative_id,
+    creativeUri: item.cdn_path || item.url || item.file_url || item.creative_uri || "",
+    creativeType,
+    resolution: item.resolution || item.dimensions || (item.width && item.height ? `${item.width}x${item.height}` : undefined),
+    thumbnail: item.thumbnail || item.thumbnail_url || item.cdn_path,
+    mimeType,
+    duration: item.duration || item.duration_seconds,
+    name: item.name || item.filename || item.file_name || item.fileName || `Creative ${item.id}`,
+    fileSize: fileSizeStr,
+    status: item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1).toLowerCase() : "Accepted",
+  };
+}
+
+const getCreativeTypeIcon = (type: string) => {
+  switch (type) {
+    case "VIDEO":
+      return <Video className="h-4 w-4" />;
+    case "AUDIO":
+      return <Volume2 className="h-4 w-4" />;
+    default:
+      return <ImageIcon className="h-4 w-4" />;
+  }
+};
+
+const getStatusBadgeStyle = (status: string) => {
+  switch (status?.toLowerCase()) {
+    case "accepted":
+    case "approved":
+      return "bg-green-100 text-green-700 border-green-200";
+    case "pending":
+      return "bg-yellow-100 text-yellow-700 border-yellow-200";
+    case "rejected":
+      return "bg-red-100 text-red-700 border-red-200";
+    default:
+      return "bg-gray-100 text-gray-700 border-gray-200";
+  }
+};
+
+const formatDuration = (seconds: number) => {
+  if (seconds < 60) {
+    return `${seconds}s`;
+  }
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+};
+
+export function CreativesStep({
+  data,
+  lineItemId,
+  lineItemName,
+  dealId: propDealId,
+  dealDealId,
+  allowedResolutions = [],
+  creativeType = "VIDEO",
+  onComplete,
+  onBack,
+  onSkip,
+  isLoading,
+  isEditMode = false,
+  formId = "creatives-step-form",
+}: CreativesStepProps & { formId?: string }) {
+  const { t } = useTranslation('lineItems');
+  const params = useParams<{ dealId: string; lineItemId?: string }>();
+  const dealId = propDealId || params.dealId;
+  const currentLineItemId = lineItemId || params.lineItemId;
+  // Use dealDealId (external format like DIR-I-00000-00005) for creative API calls
+  const creativeDealId = dealDealId || dealId;
+  
+  // Default resolutions if none provided
+  const effectiveResolutions = allowedResolutions.length > 0 
+    ? allowedResolutions 
+    : ["1920x1080", "1280x720", "3840x2160", "4096x2160"];
+  
+  const queryClient = useQueryClient();
+  
+  const [assignedCreatives, setAssignedCreatives] = useState<Creative[]>(data || []);
+  const [draggedCreative, setDraggedCreative] = useState<Creative | null>(null);
+  const [isDragOverDropZone, setIsDragOverDropZone] = useState(false);
+  const [duplicateError, setDuplicateError] = useState<string | null>(null);
+  const [isRemoving, setIsRemoving] = useState<string | null>(null);
+
+  // Map creative type to mime type filter
+  const getMimeTypeFilter = (type: "DISPLAY" | "VIDEO" | "AUDIO") => {
+    switch (type) {
+      case "VIDEO":
+        return 'video/*';
+      case "AUDIO":
+        return 'audio/*';
+      case "DISPLAY":
+      default:
+        return 'image/*';
+    }
+  };
+
+  // Fetch creatives from Content Hub API (filtered by creative type and allowed resolutions)
+  const { data: apiCreatives, isLoading: isLoadingCreatives } = useQuery({
+    queryKey: ['content-hub-creatives', creativeType, effectiveResolutions],
+    queryFn: async () => {
+      // Fetch creatives based on the selected creative type
+      const mimeTypeFilter = getMimeTypeFilter(creativeType);
+      const result = await contentHubClient.listCreatives({ 
+        page: 1, 
+        limit: 100,
+        mime_type: mimeTypeFilter
+      });
+      const items = result?.data || [];
+      const mappedItems = items.map((item: any) => mapContentHubCreative(item));
+      
+      // Filter to show approved and draft creatives (exclude rejected)
+      const availableItems = mappedItems.filter((creative: Creative) => {
+        const status = creative.status?.toLowerCase();
+        return status === 'approved' || status === 'draft';
+      });
+      
+      // Filter by allowed resolutions client-side (skip for AUDIO which doesn't have resolution)
+      if (creativeType === "AUDIO") {
+        return availableItems;
+      }
+      return availableItems.filter((creative: Creative) => {
+        if (!creative.resolution) return false;
+        return effectiveResolutions.some(res => creative.resolution === res);
+      });
+    },
+    staleTime: 30000,
+  });
+
+  // Fetch existing line item creatives in edit mode
+  const { data: existingCreatives, isLoading: isLoadingExisting } = useQuery({
+    queryKey: ['line-item-creatives', creativeDealId, currentLineItemId],
+    queryFn: async () => {
+      const response = await influenceDealsRequest<any>(
+        InfluenceDealsAPI.creatives.listByLineItem(creativeDealId!, currentLineItemId!)
+      );
+      const items = response?.data || response || [];
+      return items.map((item: any) => ({
+        creativeId: item.creativeId || item.id,
+        creativeUri: item.creativeUri || item.url || "",
+        creativeType: item.creativeType || "DISPLAY",
+        resolution: item.resolution,
+        thumbnail: item.thumbnail,
+        mimeType: item.mimeType,
+        duration: item.duration,
+        name: item.name || item.creativeId || "Creative",
+        status: "Accepted",
+      }));
+    },
+    enabled: !!dealId && !!currentLineItemId && isEditMode,
+  });
+
+  const libraryCreatives = apiCreatives || [];
+  
+  // All creatives are already filtered to selected type with matching resolutions
+  // No additional filtering needed since API query handles it
+  const filteredLibraryCreatives = libraryCreatives;
+
+  // Load existing creatives when fetched
+  useEffect(() => {
+    if (existingCreatives && existingCreatives.length > 0 && assignedCreatives.length === 0) {
+      setAssignedCreatives(existingCreatives);
+    }
+  }, [existingCreatives]);
+
+  // Load from data prop
+  useEffect(() => {
+    if (data && data.length > 0) {
+      setAssignedCreatives(data);
+    }
+  }, [data]);
+
+  const isCreativeAssigned = (creativeId: string) => {
+    return assignedCreatives.some((c) => c.creativeId === creativeId);
+  };
+
+  // Drag handlers for content hub creatives
+  const handleDragStart = (e: React.DragEvent, creative: Creative) => {
+    setDraggedCreative(creative);
+    e.dataTransfer.effectAllowed = "copy";
+    e.dataTransfer.setData("text/plain", creative.creativeId);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedCreative(null);
+    setIsDragOverDropZone(false);
+  };
+
+  // Drop zone handlers
+  const handleDropZoneDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOverDropZone(true);
+  };
+
+  const handleDropZoneDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOverDropZone(false);
+  };
+
+  const handleDropZoneDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOverDropZone(false);
+    setDuplicateError(null);
+
+    // Try to get the creative from draggedCreative state or dataTransfer
+    let creativeToAssign = draggedCreative;
+    
+    if (!creativeToAssign) {
+      // Try to find from dataTransfer
+      const creativeId = e.dataTransfer.getData("text/plain");
+      if (creativeId) {
+        creativeToAssign = libraryCreatives.find(c => c.creativeId === creativeId) || null;
+      }
+    }
+
+    if (!creativeToAssign) return;
+
+    // Use the shared assign function which handles API and duplicates
+    await assignCreative(creativeToAssign);
+    setDraggedCreative(null);
+  };
+
+  // Remove creative
+  const handleRemoveCreative = async (creative: Creative) => {
+    setIsRemoving(creative.creativeId);
+    
+    try {
+      // If in edit mode and has a real line item, call DELETE API
+      if (isEditMode && creativeDealId && currentLineItemId) {
+        await influenceDealsRequest(
+          InfluenceDealsAPI.creatives.delete(creativeDealId, currentLineItemId, creative.creativeId),
+          "DELETE"
+        );
+        queryClient.invalidateQueries({ queryKey: ['line-item-creatives', creativeDealId, currentLineItemId] });
+      }
+      
+      // Remove from local state
+      setAssignedCreatives((prev) => prev.filter((c) => c.creativeId !== creative.creativeId));
+    } catch (error) {
+      console.error("Failed to remove creative:", error);
+    } finally {
+      setIsRemoving(null);
+    }
+  };
+
+  // Assign creative (handles both click and drag-drop)
+  const assignCreative = async (creative: Creative) => {
+    if (isCreativeAssigned(creative.creativeId)) {
+      setDuplicateError(`"${creative.name || creative.creativeId}" is already assigned to this line item`);
+      setTimeout(() => setDuplicateError(null), 4000);
+      return;
+    }
+    
+    // Add to local state immediately for responsiveness
+    setAssignedCreatives((prev) => [...prev, creative]);
+    
+    // If in edit mode with real IDs, persist to API
+    // Use creativeDealId (external format like DIR-I-00000-00005) in URL, no dealId in payload
+    if (isEditMode && creativeDealId && currentLineItemId) {
+      try {
+        await influenceDealsRequest(
+          InfluenceDealsAPI.creatives.create(creativeDealId, currentLineItemId),
+          "POST",
+          {
+            creativeId: creative.creativeId,
+            creativeUri: creative.creativeUri,
+            creativeType: creative.creativeType,
+            resolution: creative.resolution,
+            mimeType: creative.mimeType,
+            duration: creative.duration,
+          }
+        );
+        queryClient.invalidateQueries({ queryKey: ['line-item-creatives', creativeDealId, currentLineItemId] });
+      } catch (error: any) {
+        // Handle duplicate error from API
+        if (error?.message?.includes('duplicate') || error?.message?.includes('already exists')) {
+          setDuplicateError(`"${creative.name || creative.creativeId}" is already assigned to this line item`);
+          setTimeout(() => setDuplicateError(null), 4000);
+          // Remove from local state since API rejected
+          setAssignedCreatives((prev) => prev.filter((c) => c.creativeId !== creative.creativeId));
+        } else {
+          console.error("Failed to assign creative:", error);
+        }
+      }
+    }
+  };
+
+  // Click to assign (alternative to drag)
+  const handleClickAssign = (creative: Creative) => {
+    assignCreative(creative);
+  };
+
+  const handleNext = () => {
+    onComplete(assignedCreatives);
+  };
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    handleNext();
+  };
+
+  const handleSkip = () => {
+    if (onSkip) {
+      onSkip();
+    } else {
+      onComplete([]);
+    }
+  };
+
+  return (
+    <form id={formId} onSubmit={handleFormSubmit} className="flex flex-col h-full">
+      <div className="flex-1 flex gap-6">
+        <div className="flex-1 min-w-0 space-y-4">
+          {/* Header */}
+          <div className="flex items-start gap-3 pb-4 border-b border-mw-neutral-100 dark:border-mw-neutral-800">
+            <div className="h-10 w-10 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center flex-shrink-0">
+              <ImageIcon className="h-5 w-5 text-purple-500 dark:text-purple-400" />
+            </div>
+            <div className="flex-1">
+              <h2 className="text-lg font-semibold text-mw-neutral-900 dark:text-white">
+                {t('wizard.creatives.title')}
+              </h2>
+              <p className="text-sm text-mw-neutral-500 dark:text-mw-neutral-400">
+                {t('wizard.creatives.subtitle')}
+              </p>
+            </div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={handleSkip}
+              className="text-mw-primary-600 dark:text-mw-primary-400"
+            >
+              <SkipForward className="h-4 w-4" />
+              {t('wizard.creatives.skipStep')}
+            </Button>
+          </div>
+
+          {/* Duplicate Error Alert */}
+          {duplicateError && (
+            <div className="flex items-center gap-2 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">
+              <AlertCircle className="h-4 w-4 flex-shrink-0" />
+              {duplicateError}
+            </div>
+          )}
+
+          {/* Main Content - Two Column Layout */}
+          <div className="grid grid-cols-2 gap-6">
+            {/* LEFT SIDE - Content Hub Creatives */}
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h3 className="text-base font-medium text-mw-neutral-900 dark:text-white">
+                  {t('wizard.creatives.contentHub')}
+                </h3>
+                <Badge className="bg-mw-primary-50 text-mw-primary-700 border-mw-primary-200 text-xs">
+                  {getCreativeTypeIcon(creativeType)}
+                  <span className="ml-1">{creativeType} {t('wizard.creatives.typeOnly')}</span>
+                </Badge>
+              </div>
+              
+              {/* Resolution Filter Info (not shown for AUDIO) */}
+              {creativeType !== "AUDIO" && (
+                <div className="flex items-start gap-2 p-3 bg-blue-50 border border-blue-200 rounded-lg text-blue-700 text-sm">
+                  <AlertCircle className="h-4 w-4 flex-shrink-0 mt-0.5" />
+                  <div>
+                    <p className="font-medium">{t('wizard.creatives.showingMatching')}</p>
+                    <p className="text-xs mt-0.5 text-blue-600">
+                      {t('wizard.creatives.allowedResolutions')}: {effectiveResolutions.join(", ")}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              <div className="bg-mw-neutral-50 dark:bg-mw-neutral-800/50 rounded-lg p-4 max-h-[450px] overflow-y-auto">
+                {isLoadingCreatives ? (
+                  <div className="flex items-center justify-center py-12">
+                    <Loader2 className="h-6 w-6 animate-spin text-mw-primary-500" />
+                    <span className="ml-2 text-mw-neutral-500">{t('wizard.creatives.loadingCreatives')}</span>
+                  </div>
+                ) : filteredLibraryCreatives.length === 0 ? (
+                  <div className="text-center py-12 text-mw-neutral-500">
+                    {getCreativeTypeIcon(creativeType)}
+                    <p className="font-medium mt-2">{t('wizard.creatives.noMatchingCreatives')}</p>
+                    <p className="text-xs mt-1">
+                      {creativeType === "AUDIO" 
+                        ? t('wizard.creatives.uploadToStart')
+                        : `${t('wizard.creatives.uploadWithResolution')}: ${effectiveResolutions.join(", ")}`}
+                    </p>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-2 gap-3">
+                    {filteredLibraryCreatives.map((creative) => {
+                      const isAssigned = isCreativeAssigned(creative.creativeId);
+                      return (
+                        <div
+                          key={creative.creativeId}
+                          draggable={!isAssigned}
+                          onDragStart={(e) => handleDragStart(e, creative)}
+                          onDragEnd={handleDragEnd}
+                          onClick={() => !isAssigned && handleClickAssign(creative)}
+                          className={cn(
+                            "relative bg-white dark:bg-mw-neutral-800 rounded-lg overflow-hidden border transition-all",
+                            isAssigned
+                              ? "opacity-50 cursor-not-allowed border-mw-neutral-200 dark:border-mw-neutral-700"
+                              : "cursor-grab border-mw-neutral-200 dark:border-mw-neutral-700 hover:border-mw-primary-400 hover:shadow-md active:cursor-grabbing"
+                          )}
+                        >
+                          {/* Status Badge */}
+                          <div className="absolute top-2 left-2 z-10">
+                            <Badge className={cn("text-[10px] px-1.5 py-0.5 border", getStatusBadgeStyle(creative.status || "Accepted"))}>
+                              {creative.status || "Accepted"}
+                            </Badge>
+                          </div>
+                          
+                          {/* Drag Handle */}
+                          {!isAssigned && (
+                            <div className="absolute top-2 right-2 z-10 text-mw-neutral-400">
+                              <GripVertical className="h-4 w-4" />
+                            </div>
+                          )}
+
+                          {/* Thumbnail */}
+                          <div className="aspect-video bg-mw-neutral-100 dark:bg-mw-neutral-700 relative">
+                            {creative.thumbnail ? (
+                              <img
+                                src={creative.thumbnail}
+                                alt={creative.name}
+                                className="w-full h-full object-cover"
+                                draggable={false}
+                              />
+                            ) : (
+                              <div className="w-full h-full flex items-center justify-center">
+                                {getCreativeTypeIcon(creative.creativeType)}
+                              </div>
+                            )}
+                          </div>
+
+                          {/* Info */}
+                          <div className="p-2">
+                            <p className="text-xs font-medium text-mw-neutral-900 dark:text-white truncate">
+                              {creative.name}
+                            </p>
+                            <div className="flex items-center gap-1 mt-0.5 text-[10px] text-mw-neutral-500">
+                              {getCreativeTypeIcon(creative.creativeType)}
+                              <span>{creative.mimeType?.split("/")[1]?.toUpperCase() || creative.creativeType}</span>
+                              {creative.fileSize && (
+                                <>
+                                  <span>•</span>
+                                  <span>{creative.fileSize}</span>
+                                </>
+                              )}
+                              {creative.duration && (
+                                <>
+                                  <span>•</span>
+                                  <span>{formatDuration(creative.duration)}</span>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* RIGHT SIDE - Line Item Drop Zone */}
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h3 className="text-base font-medium text-mw-neutral-900 dark:text-white">
+                  {t('wizard.creatives.assignedCreatives')}
+                </h3>
+              </div>
+
+              <Card
+                onDragOver={handleDropZoneDragOver}
+                onDragLeave={handleDropZoneDragLeave}
+                onDrop={handleDropZoneDrop}
+                className={cn(
+                  "p-4 min-h-[500px] transition-all border-2",
+                  isDragOverDropZone
+                    ? "border-mw-primary-400 bg-mw-primary-50/50 dark:bg-mw-primary-900/10"
+                    : "border-mw-neutral-200 dark:border-mw-neutral-700"
+                )}
+              >
+                {/* Line Item Header */}
+                <div className="flex items-center justify-between mb-4 pb-3 border-b border-mw-neutral-100 dark:border-mw-neutral-800">
+                  <div className="flex items-center gap-2">
+                    <div className="h-8 w-8 rounded bg-mw-primary-100 dark:bg-mw-primary-900/30 flex items-center justify-center">
+                      <ImageIcon className="h-4 w-4 text-mw-primary-600 dark:text-mw-primary-400" />
+                    </div>
+                    <div>
+                      <p className="text-sm font-medium text-mw-neutral-900 dark:text-white">
+                        {lineItemName || "Line Item 01"}
+                      </p>
+                    </div>
+                  </div>
+                  <Badge variant="outline" className="text-xs">
+                    {assignedCreatives.length} {assignedCreatives.length !== 1 ? t('wizard.creatives.creatives') : t('wizard.creatives.creative')}
+                  </Badge>
+                </div>
+
+                {/* Assigned Creatives or Empty State */}
+                {isLoadingExisting ? (
+                  <div className="flex items-center justify-center py-12">
+                    <Loader2 className="h-6 w-6 animate-spin text-mw-primary-500" />
+                    <span className="ml-2 text-mw-neutral-500">{t('wizard.creatives.loadingCreatives')}</span>
+                  </div>
+                ) : assignedCreatives.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center py-16 text-mw-neutral-400">
+                    <Upload className="h-10 w-10 mb-3 opacity-50" />
+                    <p className="text-sm font-medium">{t('wizard.creatives.noCreativesAssigned')}</p>
+                    <p className="text-xs mt-1">{t('wizard.creatives.dragDropHint')}</p>
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-2 gap-3">
+                    {assignedCreatives.map((creative) => (
+                      <div
+                        key={creative.creativeId}
+                        className="relative bg-white dark:bg-mw-neutral-800 rounded-lg overflow-hidden border border-mw-neutral-200 dark:border-mw-neutral-700 group"
+                      >
+                        {/* Status Badge */}
+                        <div className="absolute top-2 left-2 z-10">
+                          <Badge className={cn("text-[10px] px-1.5 py-0.5 border", getStatusBadgeStyle(creative.status || "Accepted"))}>
+                            {creative.status || "Accepted"}
+                          </Badge>
+                        </div>
+
+                        {/* Remove Button */}
+                        <Button
+                          type="button"
+                          variant="destructive"
+                          size="sm"
+                          isIconOnly
+                          onClick={() => handleRemoveCreative(creative)}
+                          disabled={isRemoving === creative.creativeId}
+                          className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100"
+                        >
+                          {isRemoving === creative.creativeId ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : (
+                            <Trash2 className="h-4 w-4" />
+                          )}
+                        </Button>
+
+                        {/* Thumbnail or Video Preview */}
+                        <div className="aspect-video bg-mw-neutral-100 dark:bg-mw-neutral-700 relative">
+                          {creative.creativeType === "VIDEO" && creative.creativeUri ? (
+                            <video
+                              src={creative.creativeUri}
+                              className="w-full h-full object-cover"
+                              muted
+                              playsInline
+                              onMouseEnter={(e) => { e.currentTarget.play().catch(() => {}); }}
+                              onMouseLeave={(e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; }}
+                            />
+                          ) : creative.thumbnail ? (
+                            <img
+                              src={creative.thumbnail}
+                              alt={creative.name}
+                              className="w-full h-full object-cover"
+                            />
+                          ) : (
+                            <div className="w-full h-full flex items-center justify-center">
+                              {getCreativeTypeIcon(creative.creativeType)}
+                            </div>
+                          )}
+                        </div>
+
+                        {/* Info */}
+                        <div className="p-2">
+                          <p className="text-xs font-medium text-mw-neutral-900 dark:text-white truncate">
+                            {creative.name || creative.creativeId}
+                          </p>
+                          <div className="flex items-center gap-1 mt-0.5 text-[10px] text-mw-neutral-500">
+                            {getCreativeTypeIcon(creative.creativeType)}
+                            <span>{creative.mimeType?.split("/")[1]?.toUpperCase() || creative.creativeType}</span>
+                            {creative.fileSize && (
+                              <>
+                                <span>•</span>
+                                <span>{creative.fileSize}</span>
+                              </>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </Card>
+            </div>
+          </div>
+        </div>
+
+        <FormInsights
+          insights={[
+            { text: t('wizard.creatives.insightMatch'), color: "green" },
+            { text: t('wizard.creatives.insightApproved'), color: "blue" },
+            { text: t('wizard.creatives.insightSkip'), color: "orange" },
+          ]}
+          quickTips={[
+            { text: t('wizard.creatives.tipDragDrop'), color: "blue" },
+            { text: t('wizard.creatives.tipResolution'), color: "green" },
+          ]}
+        />
+      </div>
+    </form>
+  );
+}