/* ============================================================
Panel de producción — diseño 100% del ZIP, datos de Firebase
============================================================ */
const LOGO = '/assets/guitarfabrik-logo.png';
// ── helpers ──────────────────────────────────────────────────
function VideoThumb({ size = 54 }) {
return (
);
}
// Detecta ventana estrecha (móvil) para alternar entre layout de
// escritorio (2 columnas) y de móvil (1 columna, navegación por pantallas).
function useIsNarrow(breakpoint = 760) {
const [narrow, setNarrow] = React.useState(window.innerWidth < breakpoint);
React.useEffect(() => {
const mq = window.matchMedia(`(max-width: ${breakpoint}px)`);
const onChange = (e) => setNarrow(e.matches);
mq.addEventListener('change', onChange);
return () => mq.removeEventListener('change', onChange);
}, [breakpoint]);
return narrow;
}
// El input de archivo nativo no se puede maquillar (el botón "Seleccionar
// archivo" lo pinta el navegador/SO) y desentona con el diseño oscuro.
// Se superpone invisible sobre una caja con nuestro propio estilo.
function VideoFileField({ onChange, hasFile }) {
return (
{hasFile ? 'Cambiar archivo de vídeo…' : 'Elegir archivo de vídeo…'}
);
}
// ── shared sub-components (same as ZIP) ──────────────────────
function Avatar({ letter, size = 48 }) {
return (
{letter}
);
}
function StatusBadge({ done }) {
return (
{done ? <> Cuestionario : <> Pendiente}
);
}
// F21 — los invitados (sesión anónima) también tienen documento en users pero sin email: no son alumnos.
const isRegistered = (u) => !!u.email;
function subscriptionOf(u) {
const sub = u.subscription;
const exp = sub?.expiresAt?.toDate ? sub.expiresAt.toDate() : (sub?.expiresAt ? new Date(sub.expiresAt) : null);
return { active: !!sub?.active && !!exp && exp > new Date(), expiresAt: exp, everSubscribed: !!sub };
}
// F21 — seguimiento semanal: MISMA regla que functions/followUp.js (el panel no puede importarlo, no hay
// bundler; si cambia la regla, cambiar los dos sitios). Un vídeo cuenta para una clase si se envió en los
// 7 días que terminan en el día de esa clase, ambos incluidos, en hora de Madrid. Con la antigua regla de
// "semana de lunes a domingo", el vídeo del domingo no contaba para la clase del lunes.
const DAY_MS = 86400000;
// Día civil (días desde 1970-01-01) de un instante, visto en Madrid. Se usa para la fecha de envío.
function madridDay(date) {
const d = date instanceof Date ? date : new Date(date);
if (Number.isNaN(d.getTime())) return null;
const parts = new Intl.DateTimeFormat('en-US', { timeZone: 'Europe/Madrid', year: 'numeric', month: 'numeric', day: 'numeric' }).formatToParts(d);
const get = (type) => Number(parts.find((p) => p.type === type).value);
return Math.round(Date.UTC(get('year'), get('month') - 1, get('day')) / DAY_MS);
}
// Día civil de una fecha elegida en el calendario del navegador (la que el profesor ve y pulsa), sin pasar
// por zonas horarias: así "el día 5" es el 5 aunque el navegador no esté en Madrid.
function civilDayOf(localDate) {
return Math.round(Date.UTC(localDate.getFullYear(), localDate.getMonth(), localDate.getDate()) / DAY_MS);
}
function sentForLesson(sentAt, lessonDay) {
if (sentAt == null) return false;
const sentDay = madridDay(sentAt);
return sentDay !== null && sentDay >= lessonDay - 6 && sentDay <= lessonDay;
}
// Estado del seguimiento de un alumno para la clase de `lessonDate` (Date local):
// 'sent' (ya lo envió), 'nosub' (no puede enviarlo: sin suscripción vigente o cuenta desactivada) o 'pending'.
function followUpStatus(st, lessonDate) {
if (sentForLesson(st.followUpVideoUpdatedAt, civilDayOf(lessonDate))) return 'sent';
if (st.active === false || !subscriptionOf(st).active) return 'nosub';
return 'pending';
}
const FOLLOWUP_STATUS = {
sent: { label: 'Vídeo enviado', color: 'var(--success)', bg: 'rgba(92,184,95,.13)', border: 'rgba(92,184,95,.4)', title: 'Vídeo de seguimiento enviado (últimos 7 días)' },
pending: { label: 'Falta el vídeo', color: '#f44336', bg: 'rgba(244,67,54,.1)', border: 'rgba(244,67,54,.4)', title: 'Sin vídeo de seguimiento para esta clase' },
nosub: { label: 'Sin suscripción', color: 'var(--muted)', bg: 'transparent', border: 'var(--border)', title: 'Sin suscripción vigente: no puede enviar vídeo' },
};
function FollowUpChip({ status }) {
const s = FOLLOWUP_STATUS[status];
return (
{s.label}
);
}
// Alumnos con clase hoy y el estado de su vídeo. La consulta solo trae a quienes tienen clase hoy (y no a todos
// los alumnos, ni a los invitados, que no tienen lessonWeekday). Se recarga cada vez que cambia `refreshKey`.
function useTodayClasses(refreshKey) {
const [state, setState] = React.useState({ rows: null, error: false });
React.useEffect(() => {
let cancelled = false;
const { collection, getDocs, query, where } = window._fb;
const today = new Date();
getDocs(query(collection(window._db, 'users'), where('role', '==', 'student'), where('lessonWeekday', '==', today.getDay())))
.then((snap) => {
if (cancelled) return;
const rows = snap.docs.map((d) => ({ id: d.id, ...d.data() }))
.filter(isRegistered)
.map((st) => ({ ...st, followUp: followUpStatus(st, today) }))
.sort((a, b) => (a.name || a.email || '').localeCompare(b.name || b.email || ''));
setState({ rows, error: false });
})
.catch(() => { if (!cancelled) setState({ rows: [], error: true }); });
return () => { cancelled = true; };
}, [refreshKey]);
return state;
}
function SubBadge({ user }) {
const { active, everSubscribed } = subscriptionOf(user);
const label = active ? 'Suscrito' : everSubscribed ? 'Caducada' : 'Sin suscripción';
const color = active ? 'var(--success)' : 'var(--muted)';
return (
{label}
);
}
function AccessBadge({ access }) {
const free = access === 'free';
return (
{free ? 'Gratuita · intro' : 'Premium'}
);
}
function QAns({ label, value }) {
return (