// src/features/admin/ui/admin-teacher-finder-widgets.jsx
//
// The five sub-widgets used by AdminTeacherFinder. Extracted from
// admin-teacher-finder.jsx for size.
//
// Public on window: TFAvailabilityPill, TFOutreachButton, TFRow,
// TFKillSwitch, TFTemplateEditor.
//
// No external deps — these are leaf components.
const TFAvailabilityPill = ({ value }) => {
const map = {
Local: { bg: TF_TONE.pillLocal, text: '#fff' },
Reasonable: { bg: TF_TONE.pillReason, text: TF_TONE.accentText },
Far: { bg: TF_TONE.pillFar, text: TF_TONE.accentText },
};
const cfg = map[value] || { bg: TF_TONE.border, text: TF_TONE.muted };
return (
{value}
);
};
const TFOutreachButton = ({ row, topic, area, searchId, outboundEnabled, onSent }) => {
// Outreach is now queued, not sent instantly: clicking enqueues a row that a
// 1-per-minute server job drains, so messages go out >=1 min apart and never
// simultaneously. The button reflects "Queued", not "Sent" — we don't poll
// the queue, so the most we honestly know is that the row was accepted.
//
// Dedup: a teacher already in the pipeline (messaged in any past search) is
// pre-flagged by the search endpoint as row.alreadyContacted; the enqueue
// endpoint also returns 409 DUPLICATE_PHONE/DUPLICATE_QUEUED. Either way we show a
// calm "Already contacted" and never send — same number is never messaged twice.
const [state, setState] = React.useState('idle'); // idle | queuing | queued | error | duplicate
const [err, setErr] = React.useState('');
const [dupInfo, setDupInfo] = React.useState(null);
// row.alreadyContacted (a prop) always reflects the latest search and overrides
// the local state machine, so a re-used row slot can't show a stale button.
const isDuplicate = !!row.alreadyContacted || state === 'duplicate';
const info = state === 'duplicate' ? dupInfo : (row.contactedInfo || null);
const disabled = !row.phone || !outboundEnabled || isDuplicate
|| state === 'queuing' || state === 'queued';
const send = async () => {
setState('queuing');
setErr('');
try {
// searchId + resultId + area link this send back to the persisted Teacher
// Finder search (v117), so the Teacher Leads tab can group outreach by
// search. They're optional — the server drops bad/missing ids and the
// send still goes through, just unlinked.
const r = await tfAuthFetch('/api/teacher-outreach', {
method: 'POST',
body: JSON.stringify({
name: row.name, phone: row.phone, topic,
searchId: searchId || null,
resultId: row.resultId || null,
area: area || null,
}),
});
const body = await r.json();
// Already in the pipeline — calm "Already contacted", not a red error.
if (r.status === 409 && (body.code === 'DUPLICATE_PHONE' || body.code === 'DUPLICATE_QUEUED')) {
setDupInfo(body.previous || {});
setState('duplicate');
return;
}
if (!r.ok || body.ok === false) throw new Error(body.error || `HTTP ${r.status}`);
setState('queued');
if (onSent) onSent({ row, response: body });
} catch (e) {
setState('error');
setErr(e.message || 'Could not queue');
}
};
const fmtWhen = (iso) => {
if (!iso) return null;
try { return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); }
catch (e) { return null; }
};
const dupDetail = info
? [info.topic, info.area, fmtWhen(info.contactedAt)].filter(Boolean).join(' · ')
: '';
let label = 'Send outreach';
let bg = TF_TONE.accent, color = TF_TONE.accentText, cursor = 'pointer';
if (state === 'queuing') { label = 'Queuing…'; bg = TF_TONE.mutedLight; color = '#fff'; cursor = 'wait'; }
if (state === 'queued') { label = '✓ Queued'; bg = TF_TONE.successBg; color = TF_TONE.success; cursor = 'default'; }
if (state === 'error') { label = 'Retry'; bg = TF_TONE.dangerBg; color = TF_TONE.danger; }
if (!row.phone) { label = 'No phone'; bg = TF_TONE.border; color = TF_TONE.muted; cursor = 'not-allowed'; }
// Master switch overrides per-row state (except already-queued, which stays green)
if (!outboundEnabled && state !== 'queued' && !isDuplicate) {
label = 'Outreach off';
bg = TF_TONE.border;
color = TF_TONE.muted;
cursor = 'not-allowed';
}
// Duplicate overrides everything except an in-flight queued send — never offer to
// message a number already in the pipeline.
if (isDuplicate && state !== 'queued') {
label = 'Already contacted';
bg = TF_TONE.border;
color = TF_TONE.muted;
cursor = 'not-allowed';
}
return (
);
const TFKillSwitch = ({ outboundEnabled, onToggled }) => {
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const toggle = async () => {
const next = !outboundEnabled;
// Make the user confirm when turning it ON — safety against accidental enable
if (next) {
const ok = window.confirm(
'Turn outreach ON?\n\nWhen on, clicking "Send outreach" on a teacher row will:\n • create a Sales Message contact\n • send a real SMS from your business number\n\nClick OK to enable.'
);
if (!ok) return;
}
setBusy(true);
setErr('');
try {
const r = await tfAuthFetch('/api/outreach-template', {
method: 'PUT',
body: JSON.stringify({ outboundEnabled: next }),
});
const body = await r.json();
if (!r.ok) throw new Error(body.error || `HTTP ${r.status}`);
if (onToggled) onToggled(body.outboundEnabled);
} catch (e) {
setErr(e.message || 'Toggle failed');
} finally {
setBusy(false);
}
};
const on = !!outboundEnabled;
return (
Outreach is {on ? 'ENABLED' : 'OFF'}
{on
? 'The per-row "Send outreach" buttons will create a Sales Message contact and send a real SMS.'
: 'No SMS can go out. Flip this on when you\'re ready to reach a teacher manually.'}