function TxButton({ id, label, taken, contraInScenario, hinted, target, onClick }) {
const isDone = taken.has(id);
const isContra = contraInScenario && contraInScenario.includes(id);
let className = "tx-btn";
if (isDone) className += " done";
if (isContra && isDone) className += " contraindicated";
if (hinted && !isDone) className += " hinted";
if (target && !isDone) className += " target";
return (
<button className={className} onClick={() => onClick(id, label)}>
{label}
</button>
);
}
function TxTab({ scenario, taken, hint, perform, targets }) {
const contraIds = scenario.contraindications.map(c => c.actionId);
const groups = [
{ key: "M", title: "Massive Hemorrhage",
ids: ["tq_left_leg","tq_right_leg","tq_left_arm","tq_right_arm","wound_packed","combat_gauze","pressure_dressing","junctional_tq","direct_pressure","moist_cover_evisc","dry_dressing","elevate_extremity"] },
{ key: "A", title: "Airway",
ids: ["chin_lift","recovery_position","suction","airway_cric","npa_tacevac","sga_igel","intubation","mils_cspine"] },
{ key: "R", title: "Respiration",
ids: ["chest_seal_r","chest_seal_l","burp_seal","needle_decomp_r","needle_decomp_l","finger_thoracostomy","chest_tube","o2_administered","bvm_ventilation","albuterol_neb"] },
{ key: "C", title: "Circulation",
ids: ["iv_io","pelvic_binder","splint_extremity","head_elevation","monitor_ekg","maintain_map","distal_pulse_check","cap_refill_check","foley_catheter","tq_conversion"] },
{ key: "H", title: "Head / Hypothermia",
ids: ["hypothermia_kit","c_spine","ready_heat","foil_blanket","warm_iv_fluids","head_wrap"] }
];
return (
<>
{groups.map(g => (
<div className="tx-group" key={g.key}>
<div className={`tx-group-head ${g.key}`}>{g.title}</div>
<div className={`tx-grid ${g.ids.length > 4 ? "three" : ""}`}>
{g.ids.map(id => {
const item = window.ACTION_CATALOG[g.key].find(a => a.id === id);
if (!item) return null;
return (
<TxButton key={id} id={id} label={item.label}
taken={taken}
contraInScenario={contraIds}
hinted={hint === id}
target={targets && targets.has(id)}
onClick={perform} />
);
})}
</div>
</div>
))}
</>
);
}
function MedsTab({ scenario, taken, hint, perform, targets }) {
const contraIds = scenario.contraindications.map(c => c.actionId);
const meds = window.ACTION_CATALOG.MEDS;
return (
<div className="meds-list">
{meds.map(m => {
const isDone = taken.has(m.id);
const isContra = contraIds.includes(m.id);
const isShared = m.risky;
let cls = "med-row";
if (isDone) cls += " done";
if ((isContra || isShared) && !isDone) cls += " contraindicated";
if (isDone && isContra) cls += " contraindicated done";
const isTarget = targets && targets.has(m.id) && !isDone;
return (
<div key={m.id} className={cls + (isTarget ? " target" : "")}>
<div>
<div className="med-name">{m.label}</div>
<div className="med-dose">{m.dose}</div>
</div>
<button className={`med-btn ${hint === m.id && !isDone ? "hinted" : ""}${isTarget ? " target" : ""}`}
onClick={() => perform(m.id, m.label, "MED")}>
{isDone ? "GIVEN" : "GIVE"}
</button>
</div>
);
})}
</div>
);
}
function DripTab({ scenario, taken, hint, perform, targets }) {
const contraIds = scenario.contraindications.map(c => c.actionId);
const drips = window.ACTION_CATALOG.DRIP;
return (
<div className="meds-list">
{drips.map(m => {
const isDone = taken.has(m.id);
const isContra = contraIds.includes(m.id);
let cls = "med-row";
if (isDone) cls += " done";
if (isContra && isDone) cls += " contraindicated done";
return (
<div key={m.id} className={cls}>
<div>
<div className="med-name">{m.label}</div>
<div className="med-dose">{m.dose}</div>
</div>
<button className={`med-btn ${hint === m.id && !isDone ? "hinted" : ""}`}
onClick={() => perform(m.id, m.label, "C")}>
{isDone ? "RUNNING" : "START"}
</button>
</div>
);
})}
</div>
);
}
function BloodTab({ scenario, taken, hint, perform, targets }) {
const blood = window.ACTION_CATALOG.BLOOD;
return (
<div className="meds-list">
{blood.map(m => {
const isDone = taken.has(m.id);
let cls = "med-row";
if (isDone) cls += " done";
return (
<div key={m.id} className={cls}>
<div>
<div className="med-name">{m.label}</div>
<div className="med-dose">{m.dose}</div>
</div>
<button className={`med-btn ${hint === m.id && !isDone ? "hinted" : ""}`}
onClick={() => perform(m.id, m.label, "C")}>
{isDone ? "HUNG" : "HANG"}
</button>
</div>
);
})}
</div>
);
}
function DecisionsTab({ scenario, taken, hint, perform, targets, evacPriority, setEvacPriority }) {
const items = window.ACTION_CATALOG.DECISIONS;
const generic = items.filter(i => !i.id.startsWith("evac_"));
const evacs = items.filter(i => i.id.startsWith("evac_"));
return (
<div>
<div className="tx-group">
<div className="tx-group-head C">Field Decisions</div>
<div className="meds-list">
{generic.map(m => {
const isDone = taken.has(m.id);
const isTarget = targets && targets.has(m.id) && !isDone;
return (
<div key={m.id} className={`med-row ${isDone ? "done" : ""} ${isTarget ? "target" : ""}`}>
<div>
<div className="med-name">{m.label}</div>
<div className="med-dose">{m.dose}</div>
</div>
<button className={`med-btn ${hint === m.id && !isDone ? "hinted" : ""}`}
onClick={() => perform(m.id, m.label, "C")}>
{isDone ? "✓ DONE" : "DO"}
</button>
</div>
);
})}
</div>
</div>
<div className="tx-group">
<div className="tx-group-head C">EVAC Priority</div>
<div className="evac-grid">
{[
{ id: "evac_urgent",   label: "URGENT",   sub: "≤1 hr", cls: "urgent" },
{ id: "evac_priority", label: "PRIORITY", sub: "≤4 hrs", cls: "priority" },
{ id: "evac_routine",  label: "ROUTINE",  sub: "≤24 hrs", cls: "routine" }
].map(e => (
<button key={e.id}
className={`evac-btn ${e.cls} ${evacPriority === e.id ? "active" : ""}`}
onClick={() => { setEvacPriority(e.id); perform(e.id, e.label, "C"); }}>
<span className="evac-name">{e.label}</span>
<span className="evac-sub">{e.sub}</span>
</button>
))}
</div>
</div>
</div>
);
}
function RefTab({ scenario }) {
return (
<div>
<div className="ref-card">
<div className="ref-title">Working Diagnosis</div>
<div className="ref-body">{scenario.diagnosis}</div>
</div>
<div className="ref-card">
<div className="ref-title">MARCH Reminder</div>
<div className="ref-body">
<b>M</b> Massive Hemorrhage · <b>A</b> Airway · <b>R</b> Respiration · <b>C</b> Circulation · <b>H</b> Head/Hypothermia.
Stop the bleed first. Then secure the airway. Then breathing. Then volume. Then warmth.
</div>
</div>
<div className="ref-card">
<div className="ref-title">2026 Test-Day Traps</div>
<div className="ref-body">
• TXA dose: single <b>2g slow push</b>; window <b>≤3 hrs</b>.<br/>
• TBI: SpO₂ <b>≥92%</b>, SBP <b>≥100</b>. No permissive hypotension.<br/>
• Ceftriaxone: <b>NS only</b>, flush 10–20 mL before/after. Precipitates with LR/Ca²⁺.<br/>
• Crush: <b>NS not LR</b> (LR contains K⁺).<br/>
• Airway TFC: recovery position <i>or</i> cric. NPA/SGA removed.<br/>
• Fentanyl/OTFC removed from initial mgmt; ketamine primary.
</div>
</div>
<div className="ref-card">
<div className="ref-title">Scenario Hint</div>
<div className="ref-body">{scenario.diagnosis} — work the MARCH sequence in order. The first intervention that matters is in the top-ranked critical action.</div>
</div>
</div>
);
}
function TreatmentsPanel({ scenario, taken, perform, nextHint, hintMode, showAnswers, evacPriority, setEvacPriority }) {
const [tab, setTab] = useState("TX");
const activeHint = hintMode ? nextHint : null;
const allTargets = showAnswers ? new Set(scenario.criticalActions.map(a => a.id)) : null;
return (
<div className="panel">
<div className="tx-tabs">
{["TX","MEDS","DRIP","BLOOD","DECIDE","REF"].map(t => (
<button key={t}
className={`tx-tab ${tab === t ? "active" : ""}`}
onClick={() => { setTab(t); if (window.Sound) window.Sound.play('pageClick'); }}>
{t}
</button>
))}
</div>
<div className="panel-body">
{tab === "TX"     && <TxTab     scenario={scenario} taken={taken} hint={activeHint} perform={perform} targets={allTargets} />}
{tab === "MEDS"   && <MedsTab   scenario={scenario} taken={taken} hint={activeHint} perform={perform} targets={allTargets} />}
{tab === "DRIP"   && <DripTab   scenario={scenario} taken={taken} hint={activeHint} perform={perform} targets={allTargets} />}
{tab === "BLOOD"  && <BloodTab  scenario={scenario} taken={taken} hint={activeHint} perform={perform} targets={allTargets} />}
{tab === "DECIDE" && <DecisionsTab scenario={scenario} taken={taken} hint={activeHint} perform={perform} targets={allTargets} evacPriority={evacPriority} setEvacPriority={setEvacPriority} />}
{tab === "REF"    && <RefTab    scenario={scenario} />}
</div>
</div>
);
}
window.TreatmentsPanel = TreatmentsPanel;