const BURN_CARE = [
['Stop','Stop the burning process — remove smoldering clothing, belts and jewelry; brush off dry chemical before irrigating.'],
['Airway','Assess for inhalation injury: facial burns, singed nasal hair, soot in sputum, hoarseness, stridor. Closed-space fire or deteriorating airway → early definitive airway.'],
['Assess','Estimate TBSA to the nearest 10 % with the Rule of Nines — count partial and full thickness only.'],
['Wounds','Cover burns with dry, sterile dressings. No wet dressings on large burns; do not break blisters.'],
['Hypothermia','Aggressive hypothermia prevention — burned casualties lose heat fast. HPMK / blankets, insulate from the ground, warm fluids.'],
['Fluids','≥20 % TBSA: start LR by IV/IO per Rule of Ten (or Parkland). No access + conscious → oral fluids. Hemorrhagic shock takes priority over burn resuscitation.'],
['Analgesia','Pain control per TCCC protocol; ketamine preferred when in shock or respiratory compromise.'],
['Circulation','Circumferential limb or chest burns: check distal pulses and chest excursion every 15 min; escharotomy at the next echelon.'],
['Eyes','Chemical splash → irrigate copiously; cover eyes with a rigid shield, no pressure.'],
['Electrical','Electrical injury → cardiac monitoring, look for entry/exit wounds and compartment syndrome; expect deep tissue damage beyond the skin.'],
['Document','Record time of burn, TBSA, fluid type/volume and hourly UOP on the DD 1380.'],
];
const rnd = (n,p=1)=>{ if(!isFinite(n)) return '—'; const f=Math.pow(10,p); const v=Math.round(n*f)/f; return v%1===0?String(v):v.toFixed(p); };
function BurnTab({ mb, upd, now }) {
const b = { formula:'parkland', burnTime:'', inhal:false, circ:false, uop:[], care:[], dropSet:10, hung:null, ...(mb.burn||{}) };
const setB = (patch)=>upd('burn', {...b, ...patch});
const [uopIn, setUopIn] = React.useState('');
const kg = +mb.weight||0;
const tbsa = Math.min(100, estimateBurnTBSA(mb.injuries, mb.burnedRegions||[]));
const regions = mb.burnedRegions||[];
const sev = tbsa===0?['No burn mapped','var(--fg-3)']:tbsa<10?['Minor','var(--amber)']:tbsa<20?['Moderate','oklch(.75 .18 50)']:tbsa<40?['Major','oklch(.72 .18 50)']:['Severe','var(--crit)'];
const valid = /^\d{4}$/.test(b.burnTime) && +b.burnTime.slice(0,2)<24 && +b.burnTime.slice(2)<60;
const nowMin = now.getHours()*60+now.getMinutes();
const hrs = valid ? ((nowMin-parseHHMM(b.burnTime)+1440)%1440)/60 : 0;
const clockAt = (h)=>{ if(!valid) return `T+${h}h`; const mm=parseHHMM(b.burnTime)+h*60; return String(Math.floor(mm/60)%24).padStart(2,'0')+String(mm%60).padStart(2,'0'); };
const phase = hrs<8?'first8':hrs<24?'next16':'done';
const coef = b.formula==='brooke'?2:4;
const total = coef*kg*tbsa, half = total/2;
const tbsa10 = Math.round(tbsa/10)*10, r10adj = kg>80?100*Math.floor((kg-80)/10):0, r10 = tbsa10*10 + r10adj;
let rate, rows, note, noteC='var(--fg-2)';
if (b.formula==='rule10') {
rate = tbsa>=20?r10:0;
rows = [['TBSA → nearest 10 %',`${tbsa.toFixed(1)}% → ${tbsa10}%`],['% TBSA × 10',`${tbsa10} × 10 = ${tbsa10*10} mL/hr`],['+100 mL/hr per 10 kg > 80',`${kg} kg → +${r10adj}`],['Initial LR rate',<b>{r10} mL/hr</b>]];
note = kg<40?'Rule of Ten is validated for adults 40–80 kg (+adjust > 80 kg).':'USAISR Rule of Ten — initial hourly LR for adult burns ≥ 20 % TBSA from time of burn, then titrate to UOP 30–50 mL/hr.';
} else {
const full = phase==='first8'?half/Math.max(.5,8-hrs):phase==='next16'?half/16:0;
rate = tbsa>=20?full:0;
const nm = b.formula==='brooke'?'Mod. Brooke':'Parkland';
rows = [[`${nm} ${coef} mL/kg/%`,`${coef} × ${kg} × ${tbsa.toFixed(1)} = ${Math.round(total).toLocaleString()} mL / 24 h`],['First 8 h',`${Math.round(half).toLocaleString()} mL · ${Math.round(half/8)} mL/hr · ${clockAt(0)}→${clockAt(8)}`],['Next 16 h',`${Math.round(half).toLocaleString()} mL · ${Math.round(half/16)} mL/hr · ${clockAt(8)}→${clockAt(24)}`]];
note = b.formula==='brooke'?'Modified Brooke 2 mL/kg/% — lower starting volume, same 8 h / 16 h split. Titrate to UOP 30–50 mL/hr.':'Parkland 4 mL/kg/% LR over 24 h from time of burn — half in the first 8 h. Titrate to UOP 30–50 mL/hr.';
}
if (tbsa>0 && tbsa<20) { note = `${tbsa.toFixed(1)} % TBSA is below the 20 % resuscitation threshold — oral hydration if tolerated; formula shown for reference.`; noteC='var(--amber)'; }
const sched = [
{ t:'0–8 h from burn', rate:Math.round(b.formula==='rule10'?r10:half/8), when:`${clockAt(0)} → ${clockAt(8)}`, on:phase==='first8' },
{ t:'8–24 h from burn', rate:Math.round(b.formula==='rule10'?r10/2:half/16), when:`${clockAt(8)} → ${clockAt(24)}${b.formula==='rule10'?' · est. ½, titrate':''}`, on:phase==='next16' },
];
const last = b.uop[b.uop.length-1];
let adv=['log hourly urine output','var(--fg-3)'];
if (last && rate>0) adv = last.ml<30?[`${last.ml} mL < 30 → increase ~20 % to ${Math.round(rate*1.2)} mL/hr`,'oklch(.72 .18 50)']:last.ml>50?[`${last.ml} mL > 50 → decrease ~20 % to ${Math.round(rate*.8)} mL/hr`,'var(--amber)']:[`${last.ml} mL on target → maintain ${Math.round(rate)} mL/hr`,'var(--op)'];
else if (last) adv=[`${last.ml} mL logged`,'var(--fg-1)'];
const addUop=()=>{ const v=+uopIn; if(!(v>=0)||uopIn==='') return; setB({uop:[...b.uop,{t:nowHHMM(),ml:v}]}); setUopIn(''); };
const ref=[]; if(tbsa>10) ref.push('>10 % TBSA'); if(regions.includes('f-head')||regions.includes('b-head')) ref.push('Face / neck');
if(regions.some(r=>/hand|foot|peri/i.test(r))) ref.push('Hands / feet / perineum'); if(b.inhal) ref.push('Inhalation'); if(b.circ) ref.push('Circumferential');
if((mb.mechanism||[]).includes('Electrical')) ref.push('Electrical'); if((mb.mechanism||[]).includes('Chemical')) ref.push('Chemical');
const toggleCare=(k)=>setB({care:b.care.includes(k)?b.care.filter(x=>x!==k):[...b.care,k]});
return <div className="scrollable burn-tab">
<div className="panel"><div className="panel-h"><span className="tick"></span><b>Burn Assessment</b><span className="right">map regions / outlines on the injury map</span></div>
<div className="panel-body" style={{display:'flex',flexDirection:'column',gap:8}}>
<div style={{display:'flex',alignItems:'baseline',gap:12,fontFamily:'var(--mono)'}}>
<span style={{fontSize:34,fontWeight:500,color:tbsa?'var(--amber)':'var(--fg-3)'}}>{tbsa.toFixed(1)}<span style={{fontSize:14,color:'var(--fg-2)'}}>% TBSA</span></span>
<span style={{fontSize:10,letterSpacing:'.15em',textTransform:'uppercase',color:sev[1],fontWeight:600}}>{sev[0]}</span>
<span style={{marginLeft:'auto',fontSize:10,color:'var(--fg-3)'}}>{regions.length} regions · {(mb.injuries||[]).filter(i=>i.type==='burn').length} outlines</span>
</div>
<div className="seg"><button className={'flag '+(b.inhal?'active':'')} onClick={()=>setB({inhal:!b.inhal})}>Inhalation</button><button className={'flag '+(b.circ?'active':'')} onClick={()=>setB({circ:!b.circ})}>Circumferential</button></div>
{ref.length>0 && <div><div className="burn-tbsa-lbl" style={{marginBottom:4}}>Burn center criteria</div><div className="ref">{ref.map(r=><span key={r}>{r}</span>)}</div></div>}
<div className="in"><span className="burn-tbsa-lbl">Time of burn</span><input value={b.burnTime} onChange={e=>setB({burnTime:e.target.value.replace(/\D/g,'').slice(0,4)})} placeholder="HHMM"/><button className="mini-btn" onClick={()=>setB({burnTime:nowHHMM()})}>Now</button><span style={{marginLeft:'auto',fontFamily:'var(--mono)',fontSize:11,color:valid?'var(--amber)':'var(--fg-3)'}}>{valid?`T+${rnd(hrs,1)} h`:'set for phase clock'}</span></div>
</div></div>
<div className="panel"><div className="panel-h"><span className="tick"></span><b>Resuscitation</b><span className="right">{kg} kg · LR</span></div>
<div className="panel-body" style={{display:'flex',flexDirection:'column',gap:8}}>
<div className="seg">{[['parkland','Parkland 4'],['brooke','Brooke 2'],['rule10','Rule of 10']].map(([k,l])=><button key={k} className={b.formula===k?'active':''} onClick={()=>setB({formula:k})}>{l}</button>)}</div>
<div>{rows.map(([k,v],i)=><div key={i} className="kv"><span className="k">{k}</span><span className="v">{v}</span></div>)}</div>
<div className="phase">{sched.map(s=><div key={s.t} className={'ph'+(s.on?' on':'')}><div className="t">{s.t}</div><div className="r">{tbsa>=20?s.rate:0}<small> mL/hr</small></div><div className="s">{s.when}</div></div>)}</div>
<div className="burn-note" style={{color:noteC}}>{note}</div>
<div className="seg"><span className="burn-tbsa-lbl" style={{alignSelf:'center',marginRight:6}}>Drop set</span>{[10,15,20,60].map(dv=><button key={dv} className={b.dropSet===dv?'active':''} onClick={()=>setB({dropSet:dv})}>{dv===60?'60 µ':dv} gtt</button>)}</div>
<IVBag title="Lactated Ringer's Injection USP" sub={`LR · ${b.formula==='rule10'?'Rule of Ten':b.formula==='brooke'?'Mod. Brooke':'Parkland'} · ${phase==='first8'?'0–8 h':phase==='next16'?'8–24 h':'>24 h'}`} vol={1000} mlHr={rate} drops={b.dropSet} hung={b.hung} onHang={()=>setB({hung:b.hung?null:Date.now()})} color="var(--info)" now={now.getTime()} lines={[['Rate now', `${Math.round(rate)} mL/hr`],['Titrate to UOP','30–50 mL/hr']]} footer={rate<=0?'No resuscitation rate — TBSA < 20 % or no burn mapped.':undefined}/>
</div></div>
<div className="panel"><div className="panel-h"><span className="tick"></span><b>Urine Output · Titration</b><span className="right">target 30–50 mL/hr</span></div>
<div className="panel-body" style={{display:'flex',flexDirection:'column',gap:8}}>
<div className="in"><input type="number" value={uopIn} onChange={e=>setUopIn(e.target.value)} onKeyDown={e=>e.key==='Enter'&&addUop()} placeholder="mL / hr"/><button className="mini-btn" onClick={addUop}>+ Log UOP</button>{b.uop.length>0&&<button className="mini-btn warn" onClick={()=>setB({uop:b.uop.slice(0,-1)})}>Undo</button>}</div>
<div className="uop">{b.uop.map((u,i)=><span key={i} style={{color:u.ml<30?'oklch(.72 .18 50)':u.ml>50?'var(--amber)':'var(--op)'}}>{u.t} · {u.ml} mL</span>)}</div>
<div className="burn-note" style={{color:adv[1],fontStyle:'normal'}}>{adv[0]}</div>
</div></div>
<div className="panel"><div className="panel-h"><span className="tick"></span><b>Burn Care Checklist</b><span className="right">{b.care.length}/{BURN_CARE.length}</span></div>
<div className="proto">{BURN_CARE.map(([k,d])=><div key={k} className={'row'+(b.care.includes(k)?' on':'')} onClick={()=>toggleCare(k)}><div><div className="t">{k}</div><div className="d">{d}</div></div><div className="ck">{b.care.includes(k)?'✓':''}</div></div>)}</div></div>
</div>;
}
Object.assign(window, { BurnTab });