feat: zoom de creatividades con assets verticales Meta y PMax completo

Preview 4:5 + textos en card; modal con todas las imágenes, vídeos y copy.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/AdCreativesGallery.tsx

@@ -0,0 +1,594 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import type { AdCreativeCard, CreativeAsset } from '@/lib/ad-creatives-meta';
+import { formatEur, formatNum } from '@/lib/metrics';
+import { ImageIcon, Play, Maximize2, X, ExternalLink } from 'lucide-react';
+
+export function proxiedMediaUrl(raw: string): string {
+  if (!raw) return '';
+  if (raw.startsWith('/api/')) return raw;
+  return `/api/ad-tracker/media?url=${encodeURIComponent(raw)}`;
+}
+
+function adHeadlines(ad: AdCreativeCard): string[] {
+  if (ad.headlines?.length) return ad.headlines;
+  return (ad.headline || '')
+    .split('\n')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+function adDescriptions(ad: AdCreativeCard): string[] {
+  if (ad.descriptions?.length) return ad.descriptions;
+  return (ad.primaryText || '')
+    .split('\n')
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+
+function adAssets(ad: AdCreativeCard): CreativeAsset[] {
+  if (ad.assets?.length) return ad.assets;
+  const out: CreativeAsset[] = [];
+  const u = ad.imageUrl || ad.thumbnailUrl;
+  if (u) out.push({ kind: 'image', url: u, label: 'preview' });
+  if (ad.youtubeId) {
+    out.push({
+      kind: 'youtube',
+      url: `https://i.ytimg.com/vi/${ad.youtubeId}/hqdefault.jpg`,
+      youtubeId: ad.youtubeId,
+      label: 'YOUTUBE',
+    });
+  }
+  return out;
+}
+
+function previewUrlFor(ad: AdCreativeCard): string {
+  const assets = adAssets(ad);
+  const portrait = assets.find(
+    (a) =>
+      a.kind === 'image' &&
+      /portrait|vertical|tall|TALL|PORTRAIT|story|4.?5|9.?16/i.test(
+        a.label || ''
+      )
+  );
+  const raw =
+    portrait?.url ||
+    ad.imageUrl ||
+    ad.thumbnailUrl ||
+    assets.find((a) => a.kind === 'image')?.url ||
+    (ad.youtubeId
+      ? `https://i.ytimg.com/vi/${ad.youtubeId}/hqdefault.jpg`
+      : '') ||
+    assets.find((a) => a.youtubeId)?.url ||
+    '';
+  return raw ? proxiedMediaUrl(raw) : '';
+}
+
+function MiniKpi({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-lg border border-gray-800 bg-black/25 px-2.5 py-2">
+      <p className="text-[9px] uppercase tracking-wider text-gray-500">{label}</p>
+      <p className="text-sm font-semibold text-white mt-0.5 tabular-nums">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+export function CreativesGallery({
+  platform,
+  ads,
+  loading,
+  warning,
+  onZoom,
+}: {
+  platform: 'meta' | 'google';
+  ads: AdCreativeCard[];
+  loading: boolean;
+  warning?: string | null;
+  onZoom: (ad: AdCreativeCard) => void;
+}) {
+  const filtered = ads.filter((a) => a.platform === platform);
+  const platformWarning =
+    warning
+      ?.split(' · ')
+      .find((w) =>
+        platform === 'meta'
+          ? /meta|token meta|sin ads meta/i.test(w)
+          : /google|pmax|rsa|sin ads google|sin assets/i.test(w)
+      ) || null;
+  const shownWarning =
+    filtered.length === 0 && warning
+      ? platformWarning || (ads.length === 0 ? warning : null)
+      : platformWarning && filtered.length === 0
+        ? platformWarning
+        : null;
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <p className="text-[10px] uppercase tracking-wider text-gray-500">
+          Creatividades · preview por anuncio
+        </p>
+        <h3 className="text-lg font-bold text-white">
+          {platform === 'meta' ? 'Meta Ads' : 'Google Ads'} · creatividades
+        </h3>
+        <p className="text-xs text-gray-500 mt-1">
+          Preview vertical + textos. Pulsa Zoom para ver todas las piezas.
+        </p>
+      </div>
+      {shownWarning ? (
+        <p className="text-xs text-amber-400/90 border border-amber-500/20 rounded-lg px-3 py-2">
+          {shownWarning}
+        </p>
+      ) : null}
+      {loading ? (
+        <p className="text-sm text-gray-500 py-8 text-center">
+          Cargando creatividades…
+        </p>
+      ) : filtered.length === 0 ? (
+        <p className="text-sm text-gray-500 py-8 text-center border border-dashed border-gray-800 rounded-xl">
+          Sin creatividades para este periodo.
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {filtered.map((ad) => (
+            <CreativeCard
+              key={`${ad.platform}-${ad.adId}`}
+              ad={ad}
+              onZoom={() => onZoom(ad)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function CreativeCard({
+  ad,
+  onZoom,
+}: {
+  ad: AdCreativeCard;
+  onZoom: () => void;
+}) {
+  const preview = previewUrlFor(ad);
+  const isVideo = ad.mediaType === 'video' || Boolean(ad.youtubeId);
+  const headlines = adHeadlines(ad);
+  const bodies = adDescriptions(ad);
+  const assets = adAssets(ad);
+  const extraCount = Math.max(0, assets.length - 1);
+
+  return (
+    <article className="grid gap-4 rounded-2xl border border-gray-800 bg-[#111827] p-4 md:grid-cols-[minmax(160px,220px)_1fr]">
+      <button
+        type="button"
+        onClick={onZoom}
+        className="relative mx-auto w-full max-w-[220px] overflow-hidden rounded-xl bg-black/40 border border-gray-800 aspect-[4/5] flex items-center justify-center group"
+      >
+        {preview ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={preview}
+            alt={ad.adName}
+            className="w-full h-full object-cover"
+            loading="lazy"
+          />
+        ) : ad.platform === 'google' && headlines.length ? (
+          <div className="w-full h-full p-4 space-y-2 text-left bg-gradient-to-b from-[#1a2332] to-[#0d121f] flex flex-col justify-center">
+            <p className="text-[10px] uppercase tracking-wider text-sky-400">
+              Google · {ad.mediaType || 'rsa'}
+            </p>
+            {headlines.slice(0, 3).map((h) => (
+              <p
+                key={h}
+                className="text-sm font-semibold text-blue-300 leading-snug"
+              >
+                {h}
+              </p>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center text-gray-500 text-xs px-4">
+            <ImageIcon className="w-8 h-8 mx-auto mb-2 opacity-40" />
+            Sin preview
+          </div>
+        )}
+        {isVideo && preview ? (
+          <span className="absolute bottom-2 left-2 inline-flex items-center gap-1 rounded-full bg-black/70 px-2 py-1 text-[10px] text-white">
+            <Play className="w-3 h-3" /> Vídeo
+          </span>
+        ) : null}
+        {extraCount > 0 ? (
+          <span className="absolute top-2 right-2 rounded-full bg-black/70 px-2 py-1 text-[10px] text-white">
+            +{extraCount} assets
+          </span>
+        ) : null}
+        <span className="absolute inset-x-0 bottom-0 translate-y-full group-hover:translate-y-0 transition-transform bg-black/75 text-white text-[11px] py-2 flex items-center justify-center gap-1">
+          <Maximize2 className="w-3.5 h-3.5" /> Zoom
+        </span>
+      </button>
+      <div className="min-w-0 space-y-3">
+        <div>
+          <div className="flex flex-wrap items-start justify-between gap-2">
+            <h4 className="text-base font-semibold text-white leading-snug">
+              {ad.adName || 'Sin nombre'}
+            </h4>
+            <div className="flex items-center gap-2">
+              <span className="text-[10px] uppercase tracking-wider text-gray-500 border border-gray-700 px-2 py-0.5 rounded">
+                {ad.status || ad.platform}
+              </span>
+              <button
+                type="button"
+                onClick={onZoom}
+                className="inline-flex items-center gap-1 rounded-lg border border-brand-500/40 bg-brand-500/10 px-2.5 py-1 text-[11px] font-medium text-brand-300 hover:bg-brand-500/20"
+              >
+                <Maximize2 className="w-3.5 h-3.5" /> Zoom
+              </button>
+            </div>
+          </div>
+          <p className="text-xs text-gray-500 mt-1">{ad.campaignName || '—'}</p>
+          {ad.adsetName ? (
+            <p className="text-xs text-gray-400">Conjunto: {ad.adsetName}</p>
+          ) : null}
+          <div className="flex flex-wrap gap-1.5 mt-2">
+            <span
+              className={`rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide ${
+                ad.platform === 'meta'
+                  ? 'border border-violet-500/40 text-violet-300'
+                  : 'border border-sky-500/40 text-sky-300'
+              }`}
+            >
+              {ad.platform === 'meta' ? 'Meta' : 'Google'}
+            </span>
+            {ad.mediaType && ad.mediaType !== 'unknown' ? (
+              <span className="rounded-full border border-gray-700 px-2 py-0.5 text-[10px] uppercase text-gray-400">
+                {ad.mediaType}
+              </span>
+            ) : null}
+            {assets.length > 0 ? (
+              <span className="rounded-full border border-gray-700 px-2 py-0.5 text-[10px] text-gray-400">
+                {assets.length} piezas
+              </span>
+            ) : null}
+          </div>
+        </div>
+        {(headlines.length > 0 || bodies.length > 0) && (
+          <div className="space-y-2 text-xs border border-gray-800/80 rounded-xl p-3 bg-black/20">
+            {headlines.length > 0 ? (
+              <div>
+                <p className="text-[9px] uppercase tracking-wider text-gray-500 mb-1">
+                  Titulares
+                </p>
+                <ul className="space-y-1">
+                  {headlines.slice(0, 4).map((h) => (
+                    <li
+                      key={h}
+                      className="text-gray-200 font-medium leading-snug"
+                    >
+                      {h}
+                    </li>
+                  ))}
+                  {headlines.length > 4 ? (
+                    <li className="text-gray-500">+{headlines.length - 4} más</li>
+                  ) : null}
+                </ul>
+              </div>
+            ) : null}
+            {bodies.length > 0 ? (
+              <div>
+                <p className="text-[9px] uppercase tracking-wider text-gray-500 mb-1">
+                  Textos / descripciones
+                </p>
+                <ul className="space-y-1.5">
+                  {bodies.slice(0, 3).map((b) => (
+                    <li
+                      key={b}
+                      className="text-gray-400 leading-relaxed line-clamp-3"
+                    >
+                      {b}
+                    </li>
+                  ))}
+                  {bodies.length > 3 ? (
+                    <li className="text-gray-500">+{bodies.length - 3} más</li>
+                  ) : null}
+                </ul>
+              </div>
+            ) : null}
+            {ad.cta ? (
+              <p className="text-[10px] text-brand-300 uppercase tracking-wide">
+                CTA · {ad.cta}
+              </p>
+            ) : null}
+          </div>
+        )}
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+          <MiniKpi label="Gasto" value={formatEur(ad.spend)} />
+          <MiniKpi label="Clics" value={formatNum(ad.clicks)} />
+          <MiniKpi label="Conv." value={formatNum(ad.conversions)} />
+          <MiniKpi
+            label="CPL"
+            value={ad.cpl != null ? formatEur(ad.cpl) : '—'}
+          />
+        </div>
+      </div>
+    </article>
+  );
+}
+
+export function CreativeZoomModal({
+  ad,
+  onClose,
+}: {
+  ad: AdCreativeCard;
+  onClose: () => void;
+}) {
+  const headlines = adHeadlines(ad);
+  const bodies = adDescriptions(ad);
+  const longH = ad.longHeadlines || [];
+  const assets = adAssets(ad);
+  const images = assets.filter((a) => a.kind === 'image' || a.kind === 'logo');
+  const videos = assets.filter((a) => a.kind === 'youtube' || a.kind === 'video');
+  const main = previewUrlFor(ad);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-[80] flex items-stretch justify-center bg-black/80 p-3 md:p-6"
+      role="dialog"
+      aria-modal="true"
+      onClick={onClose}
+    >
+      <div
+        className="relative flex w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-gray-700 bg-[#0D121F] shadow-2xl max-h-[95vh]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header className="flex items-start justify-between gap-3 border-b border-gray-800 px-4 py-3 md:px-6 shrink-0">
+          <div className="min-w-0">
+            <p className="text-[10px] uppercase tracking-wider text-gray-500">
+              Zoom creatividades ·{' '}
+              {ad.platform === 'meta' ? 'Meta Ads' : 'Google Ads'}
+            </p>
+            <h2 className="text-lg font-bold text-white truncate">
+              {ad.adName || 'Anuncio'}
+            </h2>
+            <p className="text-xs text-gray-500 mt-0.5">
+              {ad.campaignName}
+              {ad.adsetName ? ` · ${ad.adsetName}` : ''}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-lg border border-gray-700 p-2 text-gray-300 hover:bg-gray-800"
+            aria-label="Cerrar"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </header>
+
+        <div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6">
+          <div className="grid gap-6 lg:grid-cols-[minmax(220px,320px)_1fr]">
+            <div className="space-y-3">
+              <div className="relative mx-auto w-full max-w-[320px] overflow-hidden rounded-2xl border border-gray-800 bg-black aspect-[4/5]">
+                {main ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={main}
+                    alt={ad.adName}
+                    className="w-full h-full object-cover"
+                  />
+                ) : (
+                  <div className="flex h-full items-center justify-center text-gray-500 text-sm">
+                    Sin preview
+                  </div>
+                )}
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <MiniKpi label="Gasto" value={formatEur(ad.spend)} />
+                <MiniKpi label="Clics" value={formatNum(ad.clicks)} />
+                <MiniKpi label="Conv." value={formatNum(ad.conversions)} />
+                <MiniKpi
+                  label="CPL"
+                  value={ad.cpl != null ? formatEur(ad.cpl) : '—'}
+                />
+              </div>
+              <div className="text-xs text-gray-500 space-y-1">
+                <p>
+                  Impresiones:{' '}
+                  <span className="text-gray-300">
+                    {formatNum(ad.impressions)}
+                  </span>
+                </p>
+                <p>
+                  Formato:{' '}
+                  <span className="text-gray-300">{ad.mediaType || '—'}</span>
+                </p>
+                <p>
+                  Estado:{' '}
+                  <span className="text-gray-300">{ad.status || '—'}</span>
+                </p>
+                {ad.cta ? (
+                  <p>
+                    CTA: <span className="text-brand-300">{ad.cta}</span>
+                  </p>
+                ) : null}
+                {ad.businessName ? (
+                  <p>
+                    Negocio:{' '}
+                    <span className="text-gray-300">{ad.businessName}</span>
+                  </p>
+                ) : null}
+                {ad.linkUrl ? (
+                  <a
+                    href={ad.linkUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-1 text-sky-400 hover:underline break-all"
+                  >
+                    <ExternalLink className="w-3 h-3 shrink-0" />
+                    {ad.linkUrl}
+                  </a>
+                ) : null}
+              </div>
+            </div>
+
+            <div className="space-y-5">
+              {images.length > 0 ? (
+                <section>
+                  <h3 className="text-sm font-semibold text-white mb-2">
+                    Imágenes y logos ({images.length})
+                  </h3>
+                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+                    {images.map((asset, i) => (
+                      <figure
+                        key={`${asset.url}-${i}`}
+                        className="overflow-hidden rounded-xl border border-gray-800 bg-black/40"
+                      >
+                        <div
+                          className={
+                            /PORTRAIT|TALL|vertical|story/i.test(
+                              asset.label || ''
+                            )
+                              ? 'aspect-[4/5]'
+                              : /SQUARE/i.test(asset.label || '')
+                                ? 'aspect-square'
+                                : 'aspect-video'
+                          }
+                        >
+                          {/* eslint-disable-next-line @next/next/no-img-element */}
+                          <img
+                            src={proxiedMediaUrl(asset.url)}
+                            alt={asset.label || `asset-${i}`}
+                            className="w-full h-full object-cover"
+                            loading="lazy"
+                          />
+                        </div>
+                        {asset.label ? (
+                          <figcaption className="px-2 py-1 text-[9px] uppercase tracking-wider text-gray-500 truncate">
+                            {asset.label}
+                            {asset.kind === 'logo' ? ' · logo' : ''}
+                          </figcaption>
+                        ) : null}
+                      </figure>
+                    ))}
+                  </div>
+                </section>
+              ) : null}
+
+              {videos.length > 0 ? (
+                <section>
+                  <h3 className="text-sm font-semibold text-white mb-2">
+                    Vídeos ({videos.length})
+                  </h3>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    {videos.map((v, i) => (
+                      <div
+                        key={`${v.youtubeId || v.url}-${i}`}
+                        className="rounded-xl border border-gray-800 overflow-hidden bg-black/40"
+                      >
+                        {v.youtubeId ? (
+                          <div className="aspect-video">
+                            <iframe
+                              title={v.title || v.youtubeId}
+                              src={`https://www.youtube.com/embed/${v.youtubeId}`}
+                              className="w-full h-full"
+                              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                              allowFullScreen
+                            />
+                          </div>
+                        ) : v.url ? (
+                          <div className="aspect-video relative">
+                            {/* eslint-disable-next-line @next/next/no-img-element */}
+                            <img
+                              src={proxiedMediaUrl(v.url)}
+                              alt={v.title || 'video'}
+                              className="w-full h-full object-cover"
+                            />
+                            <span className="absolute bottom-2 left-2 inline-flex items-center gap-1 rounded-full bg-black/70 px-2 py-1 text-[10px] text-white">
+                              <Play className="w-3 h-3" /> Vídeo
+                            </span>
+                          </div>
+                        ) : null}
+                        <p className="px-2 py-1.5 text-[10px] text-gray-400 truncate">
+                          {v.title || v.youtubeId || v.label || 'Vídeo'}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </section>
+              ) : null}
+
+              {headlines.length > 0 ? (
+                <section>
+                  <h3 className="text-sm font-semibold text-white mb-2">
+                    Titulares ({headlines.length})
+                  </h3>
+                  <ul className="space-y-1.5 text-sm text-gray-200">
+                    {headlines.map((h) => (
+                      <li
+                        key={h}
+                        className="rounded-lg border border-gray-800 bg-black/25 px-3 py-2"
+                      >
+                        {h}
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              ) : null}
+
+              {longH.length > 0 ? (
+                <section>
+                  <h3 className="text-sm font-semibold text-white mb-2">
+                    Titulares largos ({longH.length})
+                  </h3>
+                  <ul className="space-y-1.5 text-sm text-gray-200">
+                    {longH.map((h) => (
+                      <li
+                        key={h}
+                        className="rounded-lg border border-gray-800 bg-black/25 px-3 py-2"
+                      >
+                        {h}
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              ) : null}
+
+              {bodies.length > 0 ? (
+                <section>
+                  <h3 className="text-sm font-semibold text-white mb-2">
+                    Textos / descripciones ({bodies.length})
+                  </h3>
+                  <ul className="space-y-2 text-sm text-gray-300">
+                    {bodies.map((b) => (
+                      <li
+                        key={b}
+                        className="rounded-lg border border-gray-800 bg-black/25 px-3 py-2 leading-relaxed whitespace-pre-wrap"
+                      >
+                        {b}
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}