// screens/Estudio.jsx — El estudio: compone una pieza REAL contra el backend.
//
// Tres pasos: 1) qué pieza (célula o evento, catálogo ADORNADO del backend),
// 2) sus datos (célula real + diseño con nombre propio / campos del evento),
// 3) el fondo (ambiente IA · idea propia redactada por claude · foto subida).
// Generar = POST /componer → polling → la pieza vuelve en base64, se guarda en
// la galería del DISPOSITIVO y se ofrece la descarga. El servidor no retiene nada.
const ESTUDIO_INPUT = (foco) => ({
width: '100%', height: 46, padding: '0 14px',
background: foco ? 'rgba(168,85,247,0.08)' : 'rgba(255,255,255,0.04)',
border: `1px solid ${foco ? 'rgba(192,132,252,0.5)' : 'rgba(255,255,255,0.07)'}`,
borderRadius: 12, color: '#fff', fontSize: 15,
fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.2,
outline: 'none', transition: 'all 0.2s ease', boxSizing: 'border-box',
});
function PasosEstudio({ paso }) {
return (
{[0, 1, 2].map(i => (
))}
);
}
// Tarjeta de elección adornada (pieza, diseño, ambiente) — nombre propio +
// descripción; la clave técnica nunca se enseña.
function OpcionAdornada({ nombre, descripcion, activa, onElegir, compacta }) {
return (
);
}
function EstudioScreen({ onBack, onGuardada }) {
const [catalogo, setCatalogo] = React.useState(null);
const [celulas, setCelulas] = React.useState([]);
const [errorCarga, setErrorCarga] = React.useState(null);
const [paso, setPaso] = React.useState(0);
const [foco, setFoco] = React.useState(null);
// Paso 0 — qué pieza
const [tipoPieza, setTipoPieza] = React.useState(null); // 'celula' | tipo de evento
// Paso 1 — datos
const [celula, setCelula] = React.useState(null);
const [diseno, setDiseno] = React.useState(null); // clave v1..v8
// Ajustes finos del composer (variables dinámicas): velo, brillo, colores.
// Vacío = el diseño usa sus defaults de siempre.
const [ajustes, setAjustes] = React.useState({});
const [verAjustes, setVerAjustes] = React.useState(false);
const [campos, setCampos] = React.useState({});
// Datos de célula EDITABLES: elegir una célula los precarga, pero todo lo que
// el composer pinta (nombre, horario, dirección, anfitrión) se puede cambiar.
const [datosCelula, setDatosCelula] = React.useState({
nombre: '', horario: '', direccion: '', anfitrion: '',
});
const elegirCelula = (c) => {
setCelula(c);
setDatosCelula({
nombre: c.nombre || '', horario: c.horario || '',
direccion: c.direccion || '', anfitrion: c.anfitrion || '',
});
};
// Paso 2 — fondo
const [modoFondo, setModoFondo] = React.useState('ambiente'); // ambiente|idea|foto|ninguno
const [ambiente, setAmbiente] = React.useState(null);
const [idea, setIdea] = React.useState('');
const [promptRedactado, setPromptRedactado] = React.useState(null);
const [redactando, setRedactando] = React.useState(false);
const [fondoClave, setFondoClave] = React.useState(null);
const [fondoPreview, setFondoPreview] = React.useState(null);
const [generandoFondo, setGenerandoFondo] = React.useState(null); // texto de estado
// Generación final
const [generando, setGenerando] = React.useState(null); // texto de estado
const [resultado, setResultado] = React.useState(null); // pieza guardada
const [error, setError] = React.useState(null);
React.useEffect(() => {
Promise.all([window.estudioAPI.composers(), window.estudioAPI.celulas()])
.then(([c, ce]) => { setCatalogo(c); setCelulas(ce.celulas || []); })
.catch(e => setErrorCarga(e.message));
}, []);
const esCelula = tipoPieza === 'celula';
const plantilla = catalogo && !esCelula
? (catalogo.plantillas_evento || []).find(p => p.clave === tipoPieza) : null;
const puedeAvanzar0 = !!tipoPieza;
const puedeAvanzar1 = esCelula
? (!!diseno && ['nombre', 'horario', 'direccion', 'anfitrion']
.every(k => (datosCelula[k] || '').trim().length > 0))
: !!plantilla && plantilla.campos.every(c =>
c.tipo === 'select' || (campos[c.clave] || '').trim().length > 0);
// ── Fondo: generar con IA (ambiente o idea redactada) ─────────────────────
const generarFondo = async () => {
setError(null);
const clave = `app-${Date.now().toString(36)}`;
try {
let cuerpo;
if (modoFondo === 'ambiente') {
if (!ambiente) return;
cuerpo = { clave, ambiente };
} else {
if (!promptRedactado) return;
cuerpo = { clave, prompt: promptRedactado };
}
setGenerandoFondo('Encolando…');
const { trabajo_id } = await window.estudioAPI.generarFondo(cuerpo);
const d = await window.estudioAPI.esperarTrabajo(trabajo_id, (e) => {
setGenerandoFondo(e === 'procesando'
? 'Generando el fondo (la GPU puede tardar 1-2 min)…' : 'En cola…');
});
setFondoClave(clave);
setFondoPreview(d.imagen || null);
setGenerandoFondo(null);
} catch (e) {
setGenerandoFondo(null);
setError(e.message);
}
};
const redactar = async () => {
if (idea.trim().length < 4 || redactando) return;
setError(null);
setRedactando(true);
try {
const d = await window.estudioAPI.redactarPrompt(idea.trim(), tipoPieza);
setPromptRedactado(d.prompt);
} catch (e) { setError(e.message); }
setRedactando(false);
};
const subirFoto = (archivo) => {
if (!archivo) return;
setError(null);
const lector = new FileReader();
lector.onload = async () => {
const clave = `foto-${Date.now().toString(36)}`;
try {
setGenerandoFondo('Subiendo tu foto…');
await window.estudioAPI.subirFoto(clave, lector.result);
setFondoClave(clave);
setFondoPreview(lector.result);
setGenerandoFondo(null);
} catch (e) {
setGenerandoFondo(null);
setError(e.message);
}
};
lector.readAsDataURL(archivo);
};
// ── Generar la pieza final ────────────────────────────────────────────────
const generarPieza = async () => {
setError(null);
setGenerando('Encolando…');
try {
// Célula: van los campos SUELTOS (editados por el usuario), no la clave —
// así lo que se ve en el formulario es exactamente lo que el composer pinta.
// Solo se mandan los ajustes que el usuario tocó (los demás = defaults).
const ajustesLimpios = Object.fromEntries(
Object.entries(ajustes).filter(([, v]) => v !== undefined && v !== '' && v !== null));
const datos = esCelula
? { ...datosCelula, estilo: diseno,
...(Object.keys(ajustesLimpios).length ? { ajustes: ajustesLimpios } : {}) }
: { ...campos };
const fondo = modoFondo === 'ninguno' ? null : fondoClave;
const { trabajo_id } = await window.estudioAPI.componer(
esCelula ? 'celula' : tipoPieza, datos, fondo, true);
const d = await window.estudioAPI.esperarTrabajo(trabajo_id, (e) => {
setGenerando(e === 'procesando' ? 'Componiendo la pieza…' : 'En cola…');
});
const nombreDiseno = esCelula
? (catalogo.disenos_celula.find(x => x.clave === diseno) || {}).nombre
: plantilla.nombre;
const pieza = {
id: trabajo_id,
creadaEn: Date.now(),
tipo: esCelula ? 'celula' : tipoPieza,
titulo: nombreDiseno || 'Pieza La Vid',
subtitulo: esCelula ? `Célula ${datosCelula.nombre}` : 'Evento',
imagen: d.imagen,
};
// Persistencia ÚNICA: el dispositivo. El servidor purga su copia en minutos.
await window.galeriaDB.guardar(pieza);
setResultado(pieza);
setGenerando(null);
} catch (e) {
setGenerando(null);
setError(e.message);
}
};
// ── Pantalla de resultado ─────────────────────────────────────────────────
if (resultado) {
return (