{placeholder}
);
}
return (
{/* Backdrop sfocato solo se il formato NON è standard 5:4 */}
{!isStd && (
)}
setErrored(true)} />
);
}
/* ============================================================
COMPONENTE: ProductMediaManager
Mostra le foto del prodotto, permette upload/delete/riordino/set-as-main.
============================================================ */
function ProductMediaManager({ productId, toast }) {
const [media, setMedia] = useState([]);
const [loading, setLoading] = useState(true);
const [uploading, setUploading] = useState(0); // numero upload in corso
const [draggingId, setDraggingId] = useState(null);
const [overId, setOverId] = useState(null);
const fileInputRef = useRef(null);
const MAX = (window.R2?.MAX_PHOTOS_PER_PRODUCT) || 9;
const refresh = async () => {
try {
const list = await window.DataAPI.list('product_media', { eq:['product_id', productId] }) || [];
const sorted = list.slice().sort((a,b) => (a.ordine||0) - (b.ordine||0));
setMedia(sorted);
// Invalida cache copertina così ProductImage si aggiorna
const main = sorted.find(m => m.is_main) || sorted[0];
window.PRODUCT_MEDIA_CACHE[productId] = main?.url || null;
} catch(e) {
toast && toast('Errore caricamento foto');
} finally { setLoading(false); }
};
useEffect(() => { if (productId) refresh(); else setLoading(false); }, [productId]);
const handleFiles = async (files) => {
const arr = Array.from(files || []);
if (arr.length === 0) return;
const slotsLeft = MAX - media.length;
if (slotsLeft <= 0) { toast && toast(`Massimo ${MAX} foto per prodotto`); return; }
const toUpload = arr.slice(0, slotsLeft);
if (arr.length > slotsLeft) toast && toast(`Carico solo ${slotsLeft} foto (limite ${MAX})`);
setUploading(u => u + toUpload.length);
for (const f of toUpload) {
try {
await window.R2.uploadFile(productId, f);
} catch(e) {
console.error('upload failed:', e);
toast && toast(`Errore: ${e?.message || 'caricamento fallito'}`);
} finally {
setUploading(u => u - 1);
}
}
await refresh();
};
const handleDelete = async (m) => {
if (!confirm('Eliminare questa foto? L\'azione è irreversibile.')) return;
try {
await window.R2.deleteMedia(m);
toast && toast('Foto eliminata');
await refresh();
} catch(e) {
toast && toast('Errore eliminazione');
}
};
const handleSetMain = async (m) => {
if (m.is_main) return;
try {
await window.R2.setAsMain(productId, m.id);
toast && toast('Copertina aggiornata');
await refresh();
} catch(e) {
toast && toast('Errore');
}
};
// Drag-drop riordino
const onDragStart = (id) => (e) => {
setDraggingId(id);
e.dataTransfer.effectAllowed = 'move';
};
const onDragOver = (id) => (e) => {
e.preventDefault();
if (id !== overId) setOverId(id);
};
const onDragEnd = () => { setDraggingId(null); setOverId(null); };
const onDrop = (targetId) => async (e) => {
e.preventDefault();
if (!draggingId || draggingId === targetId) { onDragEnd(); return; }
const idx = media.findIndex(m => m.id === draggingId);
const tgt = media.findIndex(m => m.id === targetId);
if (idx < 0 || tgt < 0) { onDragEnd(); return; }
const newOrder = media.slice();
const [moved] = newOrder.splice(idx, 1);
newOrder.splice(tgt, 0, moved);
setMedia(newOrder);
onDragEnd();
try {
await window.R2.reorder(productId, newOrder.map(m => m.id));
// Se la prima è diversa, auto-imposta come copertina
if (newOrder[0] && !newOrder[0].is_main) {
await window.R2.setAsMain(productId, newOrder[0].id);
}
await refresh();
} catch(e) {
toast && toast('Errore riordino');
await refresh();
}
};
// Drop nativo file su area
const dropZoneOver = (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; };
const dropZoneDrop = (e) => { e.preventDefault(); handleFiles(e.dataTransfer.files); };
if (loading) {
return Caricamento foto…
;
}
return (
{media.map((m, i) => {
const isMain = m.is_main;
const isDragging = draggingId === m.id;
const isOver = overId === m.id && draggingId !== m.id;
return (
{isMain && (
Copertina
)}
);
})}
{/* Slot upload */}
{media.length < MAX && (
)}
{!isMain && (
)}
{i+1}
{media.length} di {MAX} foto · trascina per riordinare
{uploading > 0 && (
Caricamento {uploading}…
)}