// screens/Galeria.jsx — LA HOME: vitrina/galería de las piezas de La Vid.
//
// Concepto: muro de museo nocturno. Las piezas SON la interfaz — la última
// generación abre la sala a ancho completo y el resto respira en mosaico de dos
// columnas. Nada de tarjetas con bordes: la obra a sangre, el nombre del diseño
// en Fraunces itálica solo al abrir el visor. El estado vacío ENSEÑA: marcos
// fantasma con los nombres de los 8 diseños invitan a generar la primera pieza.
//
// Persistencia: SOLO el dispositivo (galeriaDB/IndexedDB). El servidor no
// guarda nada — lo que no esté aquí, no existe.
function ChipGPU() {
const [estado, setEstado] = React.useState(null);
const [liberando, setLiberando] = React.useState(false);
const refrescar = React.useCallback(() => {
window.estudioAPI.gpuEstado().then(setEstado).catch(() => setEstado(null));
}, []);
React.useEffect(() => {
refrescar();
const t = setInterval(refrescar, 30000);
return () => clearInterval(t);
}, [refrescar]);
if (!estado) return null;
const viva = estado.comfyui_vivo;
const pct = estado.vram && estado.vram.pct != null ? estado.vram.pct : null;
const liberar = async () => {
if (!viva || liberando) return;
setLiberando(true);
try { await window.estudioAPI.gpuLiberar(true); } catch {}
setLiberando(false);
refrescar();
};
return (
);
}
// Marco de una pieza en el muro. `hero` = la última generación, a ancho completo.
function MarcoPieza({ pieza, hero, onAbrir, retraso }) {
return (
);
}
// Estado vacío que ENSEÑA: los 8 diseños como marcos fantasma de la sala.
function SalaVacia({ onGenerar }) {
const disenos = ['Velo Clásico', 'Filete Refinado', 'Ficha Dorada', 'Nobleza Imperial',
'La Palabra Primero', 'Cielo Sereno', 'Vidriera', 'Mitad y Mitad'];
return (
{disenos.map((n, i) => (
{n}
))}
La sala espera su primera obra.
Ocho diseños de La Vid listos para componer.
);
}
// Visor a pantalla completa: la obra, su ficha y las acciones.
function VisorPieza({ pieza, onCerrar, onEliminar, onRetocar }) {
const [confirmando, setConfirmando] = React.useState(false);
// El muro trae la miniatura; aquí se pide la pieza COMPLETA (PNG + A4) a la
// galería Postgres. Mientras llega, se enseña la miniatura como placeholder.
const [completa, setCompleta] = React.useState(null);
React.useEffect(() => {
let viva = true;
window.galeriaDB.obtener(pieza.id)
.then(d => { if (viva) setCompleta(d); })
.catch(() => {});
return () => { viva = false; };
}, [pieza.id]);
const imagen = (completa && completa.imagen) || pieza.imagen;
const descargar = () => window.descargarDataURL(
imagen, `lavid-${pieza.tipo}-${new Date(pieza.creadaEn).toISOString().slice(0, 10)}.png`);
return (
{/* CTA flotante de generación — siempre visible bajo la cabecera */}
{piezas && piezas.length > 0 && (
)}
{/* El muro */}
{piezas === null && (
Abriendo la sala…
)}
{piezas && piezas.length === 0 && (
)}
{hero && (
)}
{resto.length > 0 && (
// CSS Grid (no columnCount): el orden visual = orden del array. Con
// columnCount, CSS rellena una columna entera antes que la otra y el
// usuario clicaba una posición que no correspondía a esa pieza.