// src/features/instructor/ui/instructor-dashboard-modals.jsx
//
// First half of the instructor dashboard helper modals. Contains the
// two write-side modals (add lesson, edit availability). The
// read/detail components live in instructor-dashboard-modals-2.jsx.
//
// Public: window.{AddLessonModal, AvailabilityModal}.
// (LessonDetailPopup + TeacherStudentRow are in -modals-2.jsx.)
// ── AddLessonModal ──────────────────────────────────────────────────
const AddLessonModal = ({ assignments, defaultDate, defaultHour, onAdd, onAddSeries, onClose }) => {
const [studentId, setStudentId] = React.useState(assignments[0]?.studentId || '');
const [date, setDate] = React.useState(defaultDate || localDateStr(new Date()));
const [hour, setHour] = React.useState(defaultHour || 9);
const [duration, setDuration] = React.useState(60);
const [recurring, setRecurring] = React.useState(false);
const [infinite, setInfinite] = React.useState(false);
const [weeks, setWeeks] = React.useState(4);
const [notes, setNotes] = React.useState('');
const [busy, setBusy] = React.useState(false);
// Which zone the teacher is THINKING in when typing date+hour. Defaults to
// the browser's detected zone; the badge below lets the teacher flip it
// (useful when they're travelling but want to book in their home zone).
const [tz, setTz] = React.useState(() => window.Calendar.time.detect());
const submit = async (e) => {
e.preventDefault();
if (!studentId) return;
setBusy(true);
try {
// Construct the absolute UTC moment for "date at hour:00" interpreted
// in the selected zone. Avoid the old `new Date(YYYY-MM-DDTHH:00:00)`
// path which silently uses browser-local TZ — that was wrong any time
// the teacher's actual zone differed from their laptop's setting.
const [yy, mm, dd] = date.split('-').map(Number);
const scheduledAt = window.Calendar.time.makeDate(yy, mm, dd, Number(hour), 0, tz).toISOString();
const message = notes || '';
if (recurring) {
await onAddSeries({
studentId, firstAt: scheduledAt, durationMinutes: Number(duration),
weeks: Number(weeks), message: message.trim() || null,
infinite: !!infinite,
});
} else {
await onAdd({
studentId, scheduledAt, durationMinutes: Number(duration),
message: message.trim() || null,
paymentMethod: null,
status: 'confirmed',
});
}
onClose();
} catch (e2) {
alert(e2.message || 'Could not add lesson.');
} finally {
setBusy(false);
}
};
return (
e.stopPropagation()}>
Add lesson
Schedule a one-off or recurring lesson with an assigned student.
{assignments.length === 0 ? (
You don't have any assigned students yet. Your admin will assign students to you — we'll email you the moment they do, and they'll show up here automatically.
);
};
// ── Availability Modal (uses shared AvailabilityPicker — AM/PM ranges) ──
// initialAvail comes in per-hour cells shape ({0:[8,9,...], ...}). We convert
// up to multi-block on mount and back down to DB rows on save.
// ── AvailabilityModal ───────────────────────────────────────────────
const AvailabilityModal = ({ initialAvail, onSave, onClose }) => {
// Bootstrap: per-hour cells → multi-block shape
const cellsToBlocks = (cells) => {
const out = Object.fromEntries([0,1,2,3,4,5,6].map(i => [i, { enabled:false, blocks:[] }]));
for (let i = 0; i < 7; i++) {
const hours = (cells[i] || []).slice().sort((a,b) => a-b);
if (!hours.length) continue;
out[i].enabled = true;
let from = hours[0], prev = hours[0];
for (let j = 1; j < hours.length; j++) {
if (hours[j] === prev + 1) { prev = hours[j]; continue; }
out[i].blocks.push({ from, to: prev + 1 });
from = hours[j]; prev = hours[j];
}
out[i].blocks.push({ from, to: prev + 1 });
}
for (let i = 0; i < 7; i++) if (!out[i].blocks.length) out[i].blocks = [{ from:9, to:17 }];
return out;
};
const [avail, setAvail] = React.useState(() => cellsToBlocks(initialAvail));
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
// Timezone is on profiles.timezone (default 'America/New_York'). Load
// current user's value on mount; save back alongside availability rows
// when the teacher hits Save. Reminder emails (v10-schema.sql) already
// format times per-recipient using this column, so updating it here is
// immediately useful end-to-end.
//
// Phase 2 auto-detect: if the user's profile has no timezone yet, or it
// still matches the schema default 'America/New_York' that nobody has
// explicitly picked, prefill the dropdown with the browser's detected
// zone via Intl. The user can still change it before saving.
const [tz, setTz] = React.useState(() => window.Calendar.time.detect());
React.useEffect(() => {
(async () => {
try {
const { data: u } = await window.supa.auth.getUser();
const uid = u?.user?.id;
if (!uid) return;
const { data: row } = await window.supa.from('profiles').select('timezone').eq('id', uid).maybeSingle();
if (row?.timezone) setTz(row.timezone);
} catch (e) { /* keep detected default */ }
})();
}, []);
const save = async () => {
setBusy(true); setErr('');
try {
const rows = window.Calendar.shape.blocksToSlots(avail);
// Hard timeout via logic.js — the modal can no longer hang on a flaky network.
await window.MASTERY.withTimeout(Promise.resolve(onSave(rows)), 20000, 'Save availability');
// Save timezone too. Non-fatal: if this errors we still close the modal
// because availability did save — just surface a soft note.
try {
const { data: u } = await window.supa.auth.getUser();
const uid = u?.user?.id;
if (uid) await window.supa.from('profiles').update({ timezone: tz }).eq('id', uid);
} catch (e) { console.warn('[avail] timezone save failed', e); }
onClose();
} catch (e) {
setErr(e.message || 'Could not save.');
} finally {
setBusy(false);
}
};
return (
e.stopPropagation()}>
Your weekly availability
Pick start/end times per day. Add multiple blocks if there's a break.
{err &&
{err}
}
);
};
Object.assign(window, { AddLessonModal, AvailabilityModal });
// LessonDetailPopup + TeacherStudentRow now live in