// Log Dose — simplified. Status indicator + med picker + +/- stepper. No chart.
const { Icon, Phone, HomeIndicator, ModalShell, Label, Stepper } = window;

function LogDoseSafe() {
  const T = UN.d;

  const meds = [
    { name: 'Tylenol',     sub: '160mg/5mL',  ready: false, status: 'Wait 4h 18m', tone: UN.d.sev.warm },
    { name: 'Motrin',      sub: '100mg/5mL',  ready: true,  status: 'Ready',       tone: T.sage, sel: true },
    { name: 'Amoxicillin', sub: 'course 5/10',ready: true,  status: 'Next 8am',    tone: UN.d.trust },
  ];

  return (
    <ModalShell mode="d" title="Dose" subtitle="Maeve · 15.4 kg" cta="Log 5.0mL Motrin">
      {/* When */}
      <Label>When</Label>
      <div style={{ marginTop: 8, marginBottom: 14, display: 'flex', gap: 6 }}>
        <button style={{
          flex: 1, padding: '12px 10px', borderRadius: 12,
          background: T.sageSoft, border: `1.5px solid ${T.sage}`,
          color: T.text, fontFamily: UN.font.body, fontSize: 13, fontWeight: 700,
        }}>Just now</button>
        <button style={{
          flex: 1, padding: '12px 10px', borderRadius: 12,
          background: T.surface, border: `1.5px solid ${T.line2}`,
          color: T.textDim, fontFamily: UN.font.body, fontSize: 13, fontWeight: 500,
        }}>Earlier</button>
      </div>

      {/* Medication picker */}
      <Label>Medication</Label>
      <div style={{ marginTop: 8, marginBottom: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {meds.map(m => (
          <div key={m.name} style={{
            padding: '12px 14px',
            background: m.sel ? T.sageSoft : T.surface,
            border: `1.5px solid ${m.sel ? T.sage : T.line2}`,
            borderRadius: 14,
            display: 'flex', alignItems: 'center', gap: 12,
            opacity: m.ready ? 1 : 0.7,
          }}>
            <div style={{
              width: 18, height: 18, borderRadius: 18,
              border: `1.5px solid ${m.sel ? T.sage : T.line2}`,
              background: m.sel ? T.sage : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              {m.sel && <div style={{ width: 7, height: 7, borderRadius: 7, background: T.bg }}/>}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14.5, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>
                {m.name}
                <span style={{ marginLeft: 6, color: T.textDim, fontWeight: 400, fontSize: 12 }}>{m.sub}</span>
              </div>
            </div>
            <div style={{
              padding: '4px 9px', borderRadius: 99,
              background: `${m.tone}22`, border: `1px solid ${m.tone}44`,
              fontSize: 10.5, color: m.tone, fontWeight: 700, letterSpacing: 0.3,
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              {!m.ready && <Icon name="clock" size={10} color={m.tone} strokeWidth={2.2}/>}
              {m.ready && m.name !== 'Amoxicillin' && <Icon name="check" size={10} color={m.tone} strokeWidth={2.6}/>}
              {m.status.toUpperCase()}
            </div>
          </div>
        ))}
      </div>

      {/* Amount — same +/- stepper used everywhere */}
      <Label>Amount</Label>
      <div style={{ marginTop: 8 }}>
        <Stepper value="5.0" unit="mL" sub={<><Icon name="check" size={11} color={T.sage} strokeWidth={2.6}/>recommended · 15.4 kg</>}/>
      </div>
    </ModalShell>
  );
}

window.LogDoseSafe = LogDoseSafe;