877 lines
31 KiB
TypeScript
877 lines
31 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
import {
|
|
ImagePlus,
|
|
Plus,
|
|
Trash2,
|
|
Upload,
|
|
Instagram,
|
|
ExternalLink,
|
|
X,
|
|
Eye,
|
|
Layers,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Filter,
|
|
} from 'lucide-react';
|
|
import { PageHeader, Surface } from '@/components/ui';
|
|
|
|
type PipelineItem = {
|
|
id: string;
|
|
external_ref: string | null;
|
|
title: string;
|
|
format: 'post' | 'story' | 'reel' | 'carrusel';
|
|
month: string | null;
|
|
status: string;
|
|
cover_path: string | null;
|
|
cover_mime: string | null;
|
|
slide_paths: string[];
|
|
caption: string | null;
|
|
notes: string | null;
|
|
approved_at: string | null;
|
|
created_at: string;
|
|
updated_at: string;
|
|
};
|
|
|
|
const STATUS_LABEL: Record<string, string> = {
|
|
propuesta: 'Propuesta',
|
|
en_diseno: 'En diseño',
|
|
revision_interna: 'Revisión interna',
|
|
aprobado: 'Aprobado',
|
|
rechazado: 'Rechazado',
|
|
publicado: 'Publicado',
|
|
};
|
|
|
|
const STATUS_COLOR: Record<string, string> = {
|
|
propuesta: 'bg-gray-100 text-gray-700 border-gray-200',
|
|
en_diseno: 'bg-blue-100 text-blue-700 border-blue-200',
|
|
revision_interna: 'bg-amber-100 text-amber-800 border-amber-200',
|
|
aprobado: 'bg-emerald-100 text-emerald-700 border-emerald-200',
|
|
rechazado: 'bg-red-100 text-red-700 border-red-200',
|
|
publicado: 'bg-purple-100 text-purple-700 border-purple-200',
|
|
};
|
|
|
|
const FORMAT_CONFIG: Record<string, { label: string; badgeCls: string }> = {
|
|
post: { label: 'Post', badgeCls: 'bg-blue-50 text-blue-700 border-blue-200' },
|
|
carrusel: { label: 'Carrusel', badgeCls: 'bg-indigo-50 text-indigo-700 border-indigo-200' },
|
|
reel: { label: 'Reel', badgeCls: 'bg-pink-50 text-pink-700 border-pink-200' },
|
|
story: { label: 'Story', badgeCls: 'bg-amber-50 text-amber-700 border-amber-200' },
|
|
};
|
|
|
|
const AGENCY_STATUS_ORDER = [
|
|
'propuesta',
|
|
'en_diseno',
|
|
'revision_interna',
|
|
'aprobado',
|
|
'rechazado',
|
|
'publicado',
|
|
];
|
|
|
|
function mediaUrl(path: string | null) {
|
|
if (!path) return null;
|
|
return `/api/creative-pipeline/media?path=${encodeURIComponent(path)}`;
|
|
}
|
|
|
|
function monthLabel(m: string | null) {
|
|
if (!m) return 'Sin mes';
|
|
const [y, mm] = m.split('-');
|
|
const d = new Date(Number(y), Number(mm) - 1, 1);
|
|
return d.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' });
|
|
}
|
|
|
|
function monthShortLabel(m: string | null) {
|
|
if (!m) return 'Sin mes';
|
|
const [y, mm] = m.split('-');
|
|
const d = new Date(Number(y), Number(mm) - 1, 1);
|
|
const name = d.toLocaleDateString('es-ES', { month: 'short' });
|
|
return `${name} ${y.slice(2)}`;
|
|
}
|
|
|
|
function getInstagramUrl(notes: string | null): string | null {
|
|
if (!notes) return null;
|
|
const match = notes.match(/https?:\/\/(?:www\.)?instagram\.com\S+/i);
|
|
return match ? match[0] : null;
|
|
}
|
|
|
|
export default function CreativePipelineBoard() {
|
|
const [items, setItems] = useState<PipelineItem[]>([]);
|
|
const [isAgency, setIsAgency] = useState(false);
|
|
const [loading, setLoading] = useState(true);
|
|
const [warning, setWarning] = useState<string | null>(null);
|
|
const [err, setErr] = useState<string | null>(null);
|
|
const [busyId, setBusyId] = useState<string | null>(null);
|
|
const [showForm, setShowForm] = useState(false);
|
|
const [newTitle, setNewTitle] = useState('');
|
|
const [newFormat, setNewFormat] = useState<PipelineItem['format']>('post');
|
|
const [newMonth, setNewMonth] = useState('');
|
|
const [selectedMonth, setSelectedMonth] = useState<string>('all');
|
|
const [selectedFormat, setSelectedFormat] = useState<string>('all');
|
|
const [previewItem, setPreviewItem] = useState<PipelineItem | null>(null);
|
|
|
|
async function load() {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch('/api/creative-pipeline');
|
|
const data = await res.json();
|
|
setItems(data.items ?? []);
|
|
setIsAgency(Boolean(data.isAgency));
|
|
setWarning(data.warning ?? null);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
void load();
|
|
}, []);
|
|
|
|
const monthCounts = useMemo(() => {
|
|
const map = new Map<string, number>();
|
|
for (const it of items) {
|
|
const key = it.month || 'sin-mes';
|
|
map.set(key, (map.get(key) || 0) + 1);
|
|
}
|
|
return map;
|
|
}, [items]);
|
|
|
|
const months = useMemo(() => {
|
|
const set = new Set<string>();
|
|
for (const it of items) {
|
|
if (it.month) set.add(it.month);
|
|
}
|
|
return Array.from(set).sort();
|
|
}, [items]);
|
|
|
|
const filteredItems = useMemo(() => {
|
|
return items.filter((it) => {
|
|
if (selectedMonth !== 'all' && (it.month || 'sin-mes') !== selectedMonth) return false;
|
|
if (selectedFormat !== 'all' && it.format !== selectedFormat) return false;
|
|
return true;
|
|
});
|
|
}, [items, selectedMonth, selectedFormat]);
|
|
|
|
const grouped = useMemo(() => {
|
|
const map = new Map<string, PipelineItem[]>();
|
|
for (const it of filteredItems) {
|
|
const key = it.month || 'sin-mes';
|
|
if (!map.has(key)) map.set(key, []);
|
|
map.get(key)!.push(it);
|
|
}
|
|
return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
|
|
}, [filteredItems]);
|
|
|
|
async function createItem(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!newTitle.trim()) return;
|
|
setErr(null);
|
|
const res = await fetch('/api/creative-pipeline', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title: newTitle, format: newFormat, month: newMonth || null }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setErr(data.error || 'Error al crear');
|
|
return;
|
|
}
|
|
setNewTitle('');
|
|
setNewMonth('');
|
|
setShowForm(false);
|
|
await load();
|
|
}
|
|
|
|
async function setStatus(id: string, status: string) {
|
|
setBusyId(id);
|
|
setErr(null);
|
|
try {
|
|
const res = await fetch('/api/creative-pipeline', {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id, status }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setErr(data.error || 'Error al cambiar estado');
|
|
return;
|
|
}
|
|
if (previewItem && previewItem.id === id) {
|
|
setPreviewItem({ ...previewItem, status });
|
|
}
|
|
await load();
|
|
} finally {
|
|
setBusyId(null);
|
|
}
|
|
}
|
|
|
|
async function removeItem(id: string) {
|
|
setBusyId(id);
|
|
try {
|
|
await fetch(`/api/creative-pipeline?id=${encodeURIComponent(id)}`, { method: 'DELETE' });
|
|
if (previewItem?.id === id) setPreviewItem(null);
|
|
await load();
|
|
} finally {
|
|
setBusyId(null);
|
|
}
|
|
}
|
|
|
|
async function uploadImage(
|
|
itemId: string,
|
|
file: File,
|
|
slot: 'cover' | 'slide',
|
|
index = 0
|
|
) {
|
|
setBusyId(itemId);
|
|
setErr(null);
|
|
try {
|
|
const fd = new FormData();
|
|
fd.append('file', file);
|
|
fd.append('itemId', itemId);
|
|
fd.append('slot', slot);
|
|
fd.append('index', String(index));
|
|
const res = await fetch('/api/creative-pipeline/upload', { method: 'POST', body: fd });
|
|
const data = await res.json();
|
|
if (!res.ok) {
|
|
setErr(data.error || 'Error al subir imagen');
|
|
return;
|
|
}
|
|
await load();
|
|
} finally {
|
|
setBusyId(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
eyebrow="Producción editorial"
|
|
title="Panel de Creatividades"
|
|
description="Planificación, diseño y archivo histórico sincronizado con Instagram."
|
|
actions={
|
|
isAgency ? (
|
|
<button
|
|
onClick={() => setShowForm((v) => !v)}
|
|
className="inline-flex items-center gap-1.5 rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white hover:bg-brand-700"
|
|
>
|
|
<Plus className="h-4 w-4" /> Nueva pieza
|
|
</button>
|
|
) : null
|
|
}
|
|
/>
|
|
|
|
{warning ? (
|
|
<div className="mb-4 rounded-lg bg-amber-50 border border-amber-200 px-3 py-2 text-sm text-amber-800">
|
|
{warning}
|
|
</div>
|
|
) : null}
|
|
{err ? (
|
|
<div className="mb-4 rounded-lg bg-red-50 border border-red-200 px-3 py-2 text-sm text-red-800">
|
|
{err}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Barra de Filtros por Mes y Formato */}
|
|
<div className="mb-6 space-y-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xs font-semibold uppercase tracking-wider text-gray-500">
|
|
Meses ({items.length} piezas):
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 text-xs text-gray-500">
|
|
<Filter className="h-3.5 w-3.5" />
|
|
Mostrando <strong>{filteredItems.length}</strong> de {items.length}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Meses pills */}
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<button
|
|
onClick={() => setSelectedMonth('all')}
|
|
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
|
|
selectedMonth === 'all'
|
|
? 'bg-gray-900 text-white shadow-sm'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
Todos ({items.length})
|
|
</button>
|
|
{months.map((m) => {
|
|
const count = monthCounts.get(m) || 0;
|
|
const active = selectedMonth === m;
|
|
return (
|
|
<button
|
|
key={m}
|
|
onClick={() => setSelectedMonth(m)}
|
|
className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
|
|
active
|
|
? 'bg-brand-600 text-white shadow-sm'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{monthShortLabel(m)} ({count})
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Formatos pills */}
|
|
<div className="flex flex-wrap items-center gap-1.5 pt-1">
|
|
<span className="text-xs text-gray-400 mr-1">Formato:</span>
|
|
{['all', 'carrusel', 'reel', 'post', 'story'].map((f) => {
|
|
const active = selectedFormat === f;
|
|
const label =
|
|
f === 'all'
|
|
? 'Todos los formatos'
|
|
: FORMAT_CONFIG[f]?.label || f;
|
|
return (
|
|
<button
|
|
key={f}
|
|
onClick={() => setSelectedFormat(f)}
|
|
className={`rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors ${
|
|
active
|
|
? 'bg-gray-800 text-white'
|
|
: 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
|
|
}`}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{showForm && isAgency ? (
|
|
<Surface className="mb-6">
|
|
<form onSubmit={createItem} className="flex flex-wrap items-end gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600">Título</label>
|
|
<input
|
|
value={newTitle}
|
|
onChange={(e) => setNewTitle(e.target.value)}
|
|
className="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm"
|
|
placeholder="Certifica tu nivel"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600">Formato</label>
|
|
<select
|
|
value={newFormat}
|
|
onChange={(e) => setNewFormat(e.target.value as PipelineItem['format'])}
|
|
className="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm"
|
|
>
|
|
<option value="post">Post</option>
|
|
<option value="story">Story</option>
|
|
<option value="reel">Reel</option>
|
|
<option value="carrusel">Carrusel</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600">Mes</label>
|
|
<input
|
|
type="month"
|
|
value={newMonth}
|
|
onChange={(e) => setNewMonth(e.target.value)}
|
|
className="mt-1 rounded-lg border border-gray-200 px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800"
|
|
>
|
|
Crear
|
|
</button>
|
|
</form>
|
|
</Surface>
|
|
) : null}
|
|
|
|
{loading ? (
|
|
<p className="text-sm text-gray-500">Cargando creatividades…</p>
|
|
) : items.length === 0 ? (
|
|
<Surface>
|
|
<p className="text-sm text-gray-500">Todavía no hay piezas en el pipeline.</p>
|
|
</Surface>
|
|
) : filteredItems.length === 0 ? (
|
|
<Surface>
|
|
<p className="text-sm text-gray-500">
|
|
No hay piezas con los filtros seleccionados (Mes: {selectedMonth}, Formato: {selectedFormat}).
|
|
</p>
|
|
</Surface>
|
|
) : (
|
|
<div className="space-y-8">
|
|
{grouped.map(([month, monthItems]) => (
|
|
<div key={month}>
|
|
<div className="mb-3 flex items-center justify-between border-b border-gray-200 pb-2">
|
|
<h2 className="text-sm font-bold uppercase tracking-wider text-gray-700">
|
|
{monthLabel(month === 'sin-mes' ? null : month)}
|
|
</h2>
|
|
<span className="text-xs text-gray-500 font-medium">
|
|
{monthItems.length} {monthItems.length === 1 ? 'pieza' : 'piezas'}
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
|
{monthItems.map((it) => (
|
|
<PieceCard
|
|
key={it.id}
|
|
item={it}
|
|
isAgency={isAgency}
|
|
busy={busyId === it.id}
|
|
onStatus={(s) => setStatus(it.id, s)}
|
|
onDelete={() => removeItem(it.id)}
|
|
onUpload={(file, slot, index) => uploadImage(it.id, file, slot, index)}
|
|
onPreview={() => setPreviewItem(it)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal de Detalle / Preview */}
|
|
{previewItem && (
|
|
<DetailModal
|
|
item={previewItem}
|
|
isAgency={isAgency}
|
|
busy={busyId === previewItem.id}
|
|
onClose={() => setPreviewItem(null)}
|
|
onStatus={(s) => setStatus(previewItem.id, s)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PieceCard({
|
|
item,
|
|
isAgency,
|
|
busy,
|
|
onStatus,
|
|
onDelete,
|
|
onUpload,
|
|
onPreview,
|
|
}: {
|
|
item: PipelineItem;
|
|
isAgency: boolean;
|
|
busy: boolean;
|
|
onStatus: (status: string) => void;
|
|
onDelete: () => void;
|
|
onUpload: (file: File, slot: 'cover' | 'slide', index: number) => void;
|
|
onPreview: () => void;
|
|
}) {
|
|
const cover = mediaUrl(item.cover_path);
|
|
const slides = item.slide_paths || [];
|
|
const isCarrusel = item.format === 'carrusel';
|
|
const formatInfo = FORMAT_CONFIG[item.format] || {
|
|
label: item.format,
|
|
badgeCls: 'bg-gray-100 text-gray-700 border-gray-200',
|
|
};
|
|
const igUrl = getInstagramUrl(item.notes);
|
|
|
|
const clientCanDecide = !isAgency && item.status === 'revision_interna';
|
|
|
|
return (
|
|
<Surface padded={false} className="overflow-hidden flex flex-col group transition-shadow hover:shadow-md">
|
|
{/* Portada / Imagen */}
|
|
<div className="relative aspect-[4/5] bg-gray-100 overflow-hidden cursor-pointer" onClick={onPreview}>
|
|
{cover ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={cover}
|
|
alt={item.title}
|
|
className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full items-center justify-center text-gray-300">
|
|
<ImagePlus className="h-10 w-10" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Badges superiores */}
|
|
<div className="absolute top-2 left-2 flex items-center gap-1.5 pointer-events-none">
|
|
<span
|
|
className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider border shadow-sm ${formatInfo.badgeCls}`}
|
|
>
|
|
{isCarrusel && <Layers className="h-2.5 w-2.5" />}
|
|
{formatInfo.label}
|
|
</span>
|
|
{isCarrusel && slides.length > 0 && (
|
|
<span className="rounded-md bg-black/60 px-1.5 py-0.5 text-[10px] font-medium text-white shadow-sm">
|
|
{slides.length} slides
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Botón de vista rápida */}
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onPreview();
|
|
}}
|
|
className="absolute top-2 right-2 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/75 transition-opacity"
|
|
title="Ver detalle"
|
|
>
|
|
<Eye className="h-3.5 w-3.5" />
|
|
</button>
|
|
|
|
{/* Botón subir imagen agencia */}
|
|
{isAgency ? (
|
|
<label
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="absolute bottom-2 right-2 cursor-pointer rounded-full bg-black/60 p-2 text-white hover:bg-black/80"
|
|
>
|
|
<Upload className="h-3.5 w-3.5" />
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const f = e.target.files?.[0];
|
|
if (f) onUpload(f, 'cover', 0);
|
|
}}
|
|
/>
|
|
</label>
|
|
) : null}
|
|
</div>
|
|
|
|
{/* Tira de slides para carruseles */}
|
|
{isCarrusel ? (
|
|
<div className="flex gap-1 overflow-x-auto p-2 bg-gray-50 border-t border-gray-100">
|
|
{Array.from({ length: Math.min(Math.max(slides.length, 1), 4) }).map((_, i) => {
|
|
const url = mediaUrl(slides[i] || null);
|
|
return (
|
|
<div
|
|
key={i}
|
|
onClick={onPreview}
|
|
className="relative h-14 w-11 shrink-0 overflow-hidden rounded bg-gray-200 cursor-pointer border border-gray-200"
|
|
>
|
|
{url ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src={url} alt={`slide ${i + 1}`} className="h-full w-full object-cover" />
|
|
) : null}
|
|
{isAgency ? (
|
|
<label
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="absolute inset-0 flex cursor-pointer items-center justify-center bg-black/0 hover:bg-black/40 text-transparent hover:text-white text-[10px]"
|
|
>
|
|
+
|
|
<input
|
|
type="file"
|
|
accept="image/*"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const f = e.target.files?.[0];
|
|
if (f) onUpload(f, 'slide', i);
|
|
}}
|
|
/>
|
|
</label>
|
|
) : null}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
|
|
{/* Contenido de la tarjeta */}
|
|
<div className="flex flex-1 flex-col gap-2 p-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p
|
|
onClick={onPreview}
|
|
className="text-sm font-semibold text-gray-900 line-clamp-2 cursor-pointer hover:text-brand-600"
|
|
>
|
|
{item.title}
|
|
</p>
|
|
{isAgency ? (
|
|
<button
|
|
onClick={onDelete}
|
|
disabled={busy}
|
|
className="shrink-0 text-gray-400 hover:text-red-500"
|
|
title="Eliminar"
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
<span
|
|
className={`inline-flex w-fit rounded-full px-2 py-0.5 text-xs font-semibold border ${
|
|
STATUS_COLOR[item.status] || 'bg-gray-100 text-gray-700 border-gray-200'
|
|
}`}
|
|
>
|
|
{STATUS_LABEL[item.status] || item.status}
|
|
</span>
|
|
|
|
{igUrl && (
|
|
<a
|
|
href={igUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 px-2 py-0.5 text-[10px] font-bold text-white shadow-sm hover:opacity-90"
|
|
title="Abrir publicación original en Instagram"
|
|
>
|
|
<Instagram className="h-2.5 w-2.5" /> IG
|
|
<ExternalLink className="h-2 w-2" />
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-auto pt-2">
|
|
{isAgency ? (
|
|
<select
|
|
value={item.status}
|
|
disabled={busy}
|
|
onChange={(e) => onStatus(e.target.value)}
|
|
className="w-full rounded-lg border border-gray-200 px-2 py-1.5 text-xs font-medium"
|
|
>
|
|
{AGENCY_STATUS_ORDER.map((s) => (
|
|
<option key={s} value={s}>
|
|
{STATUS_LABEL[s]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : clientCanDecide ? (
|
|
<div className="flex gap-2">
|
|
<button
|
|
disabled={busy}
|
|
onClick={() => onStatus('aprobado')}
|
|
className="flex-1 rounded-lg bg-emerald-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-emerald-700"
|
|
>
|
|
Aprobar
|
|
</button>
|
|
<button
|
|
disabled={busy}
|
|
onClick={() => onStatus('rechazado')}
|
|
className="flex-1 rounded-lg bg-red-600 px-2 py-1.5 text-xs font-medium text-white hover:bg-red-700"
|
|
>
|
|
Rechazar
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-gray-400">
|
|
{item.status === 'aprobado'
|
|
? 'Aprobada por ti'
|
|
: item.status === 'publicado'
|
|
? 'Publicado en redes'
|
|
: 'Pendiente del equipo de 4Ventures'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Surface>
|
|
);
|
|
}
|
|
|
|
function DetailModal({
|
|
item,
|
|
isAgency,
|
|
busy,
|
|
onClose,
|
|
onStatus,
|
|
}: {
|
|
item: PipelineItem;
|
|
isAgency: boolean;
|
|
busy: boolean;
|
|
onClose: () => void;
|
|
onStatus: (status: string) => void;
|
|
}) {
|
|
const slides = item.slide_paths || [];
|
|
const allImages = [item.cover_path, ...slides].filter(Boolean) as string[];
|
|
const [activeIdx, setActiveIdx] = useState(0);
|
|
|
|
const activePath = allImages[activeIdx] || item.cover_path;
|
|
const currentUrl = mediaUrl(activePath);
|
|
const igUrl = getInstagramUrl(item.notes);
|
|
const formatInfo = FORMAT_CONFIG[item.format] || {
|
|
label: item.format,
|
|
badgeCls: 'bg-gray-100 text-gray-700 border-gray-200',
|
|
};
|
|
|
|
const clientCanDecide = !isAgency && item.status === 'revision_interna';
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-4 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="flex max-h-[92vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl md:flex-row"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Lado izquierdo: visor de imagen / slider */}
|
|
<div className="flex flex-1 flex-col bg-gray-900 p-4">
|
|
<div className="relative flex flex-1 items-center justify-center overflow-hidden rounded-lg bg-black/40 min-h-[300px]">
|
|
{currentUrl ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={currentUrl}
|
|
alt={item.title}
|
|
className="max-h-[60vh] max-w-full object-contain"
|
|
/>
|
|
) : (
|
|
<div className="flex flex-col items-center gap-2 text-gray-500">
|
|
<ImagePlus className="h-12 w-12" />
|
|
<span className="text-xs">Sin imagen cargada</span>
|
|
</div>
|
|
)}
|
|
|
|
{allImages.length > 1 && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveIdx((prev) => (prev > 0 ? prev - 1 : allImages.length - 1))}
|
|
className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/60 p-1.5 text-white hover:bg-black/90"
|
|
>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setActiveIdx((prev) => (prev < allImages.length - 1 ? prev + 1 : 0))}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/60 p-1.5 text-white hover:bg-black/90"
|
|
>
|
|
<ChevronRight className="h-5 w-5" />
|
|
</button>
|
|
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-black/60 px-2 py-0.5 text-xs text-white">
|
|
{activeIdx + 1} / {allImages.length}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* Miniaturas de slides */}
|
|
{allImages.length > 1 && (
|
|
<div className="mt-3 flex gap-2 overflow-x-auto py-1">
|
|
{allImages.map((path, idx) => {
|
|
const url = mediaUrl(path);
|
|
const isSelected = idx === activeIdx;
|
|
return (
|
|
<button
|
|
key={idx}
|
|
type="button"
|
|
onClick={() => setActiveIdx(idx)}
|
|
className={`relative h-16 w-12 shrink-0 overflow-hidden rounded border-2 transition-all ${
|
|
isSelected ? 'border-brand-500 scale-105' : 'border-transparent opacity-60 hover:opacity-100'
|
|
}`}
|
|
>
|
|
{url && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img src={url} alt={`Slide ${idx + 1}`} className="h-full w-full object-cover" />
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Lado derecho: información, caption y acciones */}
|
|
<div className="flex w-full flex-col justify-between p-6 md:w-96 border-t md:border-t-0 md:border-l border-gray-100 overflow-y-auto">
|
|
<div className="space-y-4">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span
|
|
className={`inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-bold uppercase tracking-wider border ${formatInfo.badgeCls}`}
|
|
>
|
|
{formatInfo.label}
|
|
</span>
|
|
<span
|
|
className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold border ${
|
|
STATUS_COLOR[item.status] || 'bg-gray-100 text-gray-700'
|
|
}`}
|
|
>
|
|
{STATUS_LABEL[item.status] || item.status}
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
|
|
>
|
|
<X className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-base font-bold text-gray-900 leading-snug">{item.title}</h3>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
{monthLabel(item.month)} {item.external_ref ? `· Ref: ${item.external_ref}` : ''}
|
|
</p>
|
|
</div>
|
|
|
|
{igUrl && (
|
|
<a
|
|
href={igUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-purple-600 via-pink-600 to-amber-500 px-3 py-2 text-xs font-bold text-white shadow-sm hover:opacity-95"
|
|
>
|
|
<Instagram className="h-4 w-4" />
|
|
<span>Ver publicación original en Instagram</span>
|
|
<ExternalLink className="h-3 w-3 ml-auto" />
|
|
</a>
|
|
)}
|
|
|
|
{item.caption && (
|
|
<div className="space-y-1">
|
|
<p className="text-xs font-semibold text-gray-700 uppercase tracking-wider">Texto / Copy</p>
|
|
<div className="rounded-xl border border-gray-200 bg-gray-50 p-3 text-xs text-gray-800 whitespace-pre-wrap leading-relaxed max-h-48 overflow-y-auto">
|
|
{item.caption}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-6 border-t border-gray-100 pt-4">
|
|
{isAgency ? (
|
|
<div className="space-y-2">
|
|
<label className="block text-xs font-semibold text-gray-600">Cambiar estado (Agencia):</label>
|
|
<select
|
|
value={item.status}
|
|
disabled={busy}
|
|
onChange={(e) => onStatus(e.target.value)}
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-xs font-medium"
|
|
>
|
|
{AGENCY_STATUS_ORDER.map((s) => (
|
|
<option key={s} value={s}>
|
|
{STATUS_LABEL[s]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
) : clientCanDecide ? (
|
|
<div className="space-y-2">
|
|
<p className="text-xs font-semibold text-gray-600">Tu decisión como cliente:</p>
|
|
<div className="flex gap-2">
|
|
<button
|
|
disabled={busy}
|
|
onClick={() => onStatus('aprobado')}
|
|
className="flex-1 rounded-lg bg-emerald-600 px-3 py-2 text-xs font-bold text-white hover:bg-emerald-700"
|
|
>
|
|
Aprobar pieza
|
|
</button>
|
|
<button
|
|
disabled={busy}
|
|
onClick={() => onStatus('rechazado')}
|
|
className="flex-1 rounded-lg bg-red-600 px-3 py-2 text-xs font-bold text-white hover:bg-red-700"
|
|
>
|
|
Solicitar cambios
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<p className="text-center text-xs text-gray-500">
|
|
{item.status === 'aprobado'
|
|
? '✓ Esta pieza fue aprobada por el cliente.'
|
|
: item.status === 'publicado'
|
|
? '✓ Esta pieza está publicada y archivada.'
|
|
: 'En proceso con el equipo de 4Ventures.'}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|