/* Peptino — screens E: Add vial, Protocol detail, New cycle, Cycle protocols */

function PickerRow({ tint, icon, name, sub, ph }) {
  return (
    <div className="card flat" style={{ border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12, padding: '13px 16px' }}>
      {icon ? <div className={'row-chip tint-' + (tint || 'recovery')} style={{ width: 38, height: 38 }}><Icon name={icon} size={18} /></div> : null}
      <div className="row-main">
        <span className="t-bodyLg" style={{ color: name ? 'var(--text-1)' : 'var(--text-3)' }}>{name || ph}</span>
        {sub ? <span className="t-caption c-3">{sub}</span> : null}
      </div>
      <Icon name="chevR" size={18} color="var(--text-3)" />
    </div>
  );
}
function DateRow({ label, value, ph }) {
  return (
    <div className="field" style={{ marginBottom: 16 }}>
      <span className="lab t-label">{label}</span>
      <div className="input"><Icon name="calendar" size={18} color="var(--text-3)" /><span className="t-bodyLg" style={{ color: value ? 'var(--text-1)' : 'var(--text-3)' }}>{value || ph}</span><span className="unit"><Icon name="chevR" size={17} color="var(--text-3)" /></span></div>
    </div>
  );
}

/* ============================== ADD VIAL ============================== */
function ScreenAddVial({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <BackHeader title="Add vial" />
      <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        <div className="field" style={{ marginBottom: 16 }}>
          <span className="lab t-label">Compound</span>
          <PickerRow tint="recovery" icon="droplet" name="BPC-157" sub="Recovery · 5 mg/mL" />
        </div>
        <div className="field" style={{ marginBottom: 16 }}>
          <span className="lab t-label">Label</span>
          <div className="input"><span className="t-bodyLg c-1">BPC-157 — batch A</span></div>
        </div>
        <div className="field" style={{ marginBottom: 16 }}>
          <span className="lab t-label">Total amount</span>
          <div style={{ display: 'flex', gap: 12 }}>
            <div className="bignum" style={{ flex: 1 }}><span className="v">10</span><span className="u">mg</span></div>
            <div className="units" style={{ flexDirection: 'column' }}>
              <button>mg</button><button className="on">mcg</button>
            </div>
          </div>
          <div className="units" style={{ marginTop: 8 }}>
            <button className="on">mg</button><button>mcg</button><button>mL</button><button>IU</button>
          </div>
        </div>
        <div className="field" style={{ marginBottom: 16 }}>
          <span className="lab t-label">Reconstituted</span>
          <div className="seg soft"><button className="on">Yes</button><button>No</button></div>
        </div>
        <div className="field" style={{ marginBottom: 16 }}>
          <span className="lab t-label">BAC water</span>
          <div className="bignum"><span className="v">2</span><span className="u">mL</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 8 }}>
            <Icon name="info" size={14} color="var(--accent-ink)" />
            <span className="t-caption c-2">Concentration: <b className="c-ink">5 mg/mL</b> · 40 doses</span>
          </div>
        </div>
        <DateRow label="Opened date" value="May 28, 2026" />
        <DateRow label="Expiry date" value="Jun 24, 2026" />
        <div className="field">
          <span className="lab t-label">Storage</span>
          <div className="input"><Icon name="flask" size={18} color="var(--text-3)" /><span className="t-bodyLg c-1">Fridge — door</span></div>
        </div>
      </div>
      <button className="btn btn-primary" style={{ marginTop: 16 }}><Icon name="check" size={20} sw={2.2} /> Save vial</button>
    </Phone>
  );
}

/* ============================== PROTOCOL DETAIL ============================== */
function StatCol({ k, v, border }) {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 4, paddingLeft: border ? 16 : 0, borderLeft: border ? '1px solid var(--border)' : 'none' }}>
      <span className="t-label c-3" style={{ fontSize: 10 }}>{k}</span>
      <span className="t-bodyLg c-1">{v}</span>
    </div>
  );
}
function SchedRow({ day, time, tag, tagCls, border }) {
  return (
    <div className="row" style={{ justifyContent: 'space-between', borderTop: border ? '1px solid var(--border)' : 'none' }}>
      <span className="t-bodyLg c-1">{day}</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span className="t-caption c-3">{time}</span>
        {tag ? <span className={'tag ' + tagCls} style={{ paddingLeft: 8 }}><Icon name={tagCls === 'success' ? 'check' : 'info'} size={11} sw={2.6} /> {tag}</span> : null}
      </div>
    </div>
  );
}
function ScreenProtocolDetail({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <div className="appbar">
        <div className="appbar-top">
          <div className="chip-btn"><Icon name="chevB" size={20} /></div>
          <div className="spacer" />
          <div className="chip-btn ghost"><Icon name="trash" size={19} /></div>
          <div className="chip-btn ghost"><Icon name="edit" size={19} /></div>
        </div>
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10, marginTop: 6 }}>
          <span className="t-display c-1">BPC-157</span>
          <span className="tag recovery">Recovery</span>
        </div>
      </div>

      {/* status toggle */}
      <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginBottom: 16 }}>
        <span className="tag" style={{ paddingLeft: 9, height: 38, border: '1px solid var(--accent)' }}><span className="dot" /> Active</span>
        <span className="tag neutral" style={{ height: 38 }}>Inactive</span>
      </div>

      {/* stats */}
      <div className="card" style={{ display: 'flex', padding: '16px 18px' }}>
        <StatCol k="PER INJ." v="250 mcg" />
        <StatCol k="FREQ." v="Daily" border />
        <StatCol k="NEXT" v="9:00 AM" border />
      </div>

      {/* linked vial */}
      <div className="sec-head"><span className="t-label c-2">Linked vials</span></div>
      <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div className="row-chip tint-recovery" style={{ width: 40, height: 40 }}><Icon name="droplet" size={19} /></div>
        <div className="row-main"><span className="t-bodyLg c-1">BPC-157 — batch A</span><span className="t-caption c-3">2.3 / 5.0 mL left</span></div>
        <div style={{ width: 6, height: 32, borderRadius: 3, background: 'var(--sunken)', overflow: 'hidden', position: 'relative' }}><div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '46%', background: 'var(--accent)' }} /></div>
      </div>

      {/* next injection */}
      <div className="card" style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ color: 'var(--warning)' }}><Icon name="clock" size={22} /></span>
          <div><span className="t-caption c-3">Next injection</span><div className="t-heading c-1" style={{ fontSize: 17 }}>in 14h</div></div>
        </div>
        <div style={{ textAlign: 'right' }}><span className="t-strong c-1">Tomorrow</span><div className="t-caption c-3">9:00 AM</div></div>
      </div>

      <button className="btn btn-primary" style={{ marginTop: 16 }}><Icon name="plus" size={20} sw={2.2} /> Log dose</button>

      {/* schedule */}
      <div className="sec-head"><span className="t-label c-2">Dose schedule</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <SchedRow day="Today" time="9:00 AM" tag="Taken" tagCls="success" />
        <SchedRow day="Tomorrow" time="9:00 AM" border />
        <SchedRow day="Jun 8" time="9:00 AM" border />
        <SchedRow day="Jun 9" time="9:00 AM" border />
      </div>

      {/* history */}
      <div className="sec-head"><span className="t-label c-2">History</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <div className="row" style={{ justifyContent: 'space-between' }}>
          <div className="row-main"><span className="t-strong c-1">Jun 5, 2026</span><span className="t-caption c-3">9:02 AM</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span className="t-caption c-2">250 mcg</span><span className="tag success" style={{ paddingLeft: 8 }}><Icon name="check" size={11} sw={2.6} /> Taken</span></div>
        </div>
        <div className="row" style={{ justifyContent: 'space-between' }}>
          <div className="row-main"><span className="t-strong c-1">Jun 4, 2026</span><span className="t-caption c-3">—</span></div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}><span className="tag danger" style={{ paddingLeft: 8 }}><Icon name="info" size={11} sw={2.6} /> Missed</span></div>
        </div>
      </div>
    </Phone>
  );
}

/* ============================== NEW CYCLE ============================== */
function ScreenCycleForm({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <BackHeader title="New cycle" />
      <Field label="Cycle name">
        <div className="input"><span className="t-bodyLg c-1">Summer recomp</span></div>
      </Field>
      <Field label="Start date">
        <div className="input"><Icon name="calendar" size={18} color="var(--text-3)" /><span className="t-bodyLg c-1">Today, Jun 6</span><span className="unit"><Icon name="chevR" size={17} color="var(--text-3)" /></span></div>
      </Field>
      <Field label="Duration">
        <div className="bignum"><span className="v">28</span><span className="u">days</span></div>
      </Field>
      <Field label="Phase type">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          <span className="tag" style={{ background: 'var(--accent)', color: 'var(--accent-fg)', height: 36, padding: '0 16px', fontSize: 12 }}>Blast</span>
          <span className="tag neutral" style={{ height: 36, padding: '0 16px', fontSize: 12 }}>Cruise</span>
          <span className="tag neutral" style={{ height: 36, padding: '0 16px', fontSize: 12 }}>Bridge</span>
          <span className="tag neutral" style={{ height: 36, padding: '0 16px', fontSize: 12 }}>PCT</span>
          <span className="tag neutral" style={{ height: 36, padding: '0 16px', fontSize: 12 }}>Custom</span>
        </div>
      </Field>
      <button className="btn btn-primary" style={{ marginTop: 6 }}>Create &amp; assign protocols <Icon name="chevR" size={18} sw={2.2} /></button>
    </Phone>
  );
}

/* ============================== CYCLE PROTOCOLS (assign) ============================== */
function AssignRow({ tint, icon, name, sub, on, border }) {
  return (
    <div className="row" style={{ borderTop: border ? '1px solid var(--border)' : 'none' }}>
      <div className={'row-chip tint-' + tint} style={{ width: 40, height: 40 }}><Icon name={icon} size={19} /></div>
      <div className="row-main"><span className="t-bodyLg c-1">{name}</span><span className="t-caption c-3">{sub}</span></div>
      <div style={{ width: 26, height: 26, borderRadius: 8, flex: '0 0 26px', border: '2px solid ' + (on ? 'var(--accent)' : 'var(--border-strong)'), background: on ? 'var(--accent)' : 'transparent', color: 'var(--accent-fg)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {on ? <Icon name="check" size={14} sw={3} /> : null}
      </div>
    </div>
  );
}
function ScreenCycleProtocols({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <div className="appbar">
        <div className="appbar-top"><div className="chip-btn"><Icon name="chevB" size={20} /></div><div className="spacer" /></div>
        <span className="t-display c-1" style={{ marginTop: 4 }}>Summer recomp</span>
        <span className="t-body c-2">Pick protocols for this cycle</span>
      </div>
      <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
        <div className="tile" style={{ flex: 1 }}><div className="k t-label">Duration</div><div className="v">28 <span style={{ fontSize: 14, color: 'var(--text-3)' }}>days</span></div></div>
        <div className="tile" style={{ flex: 1 }}><div className="k t-label">Selected</div><div className="v">3</div></div>
      </div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <AssignRow tint="recovery" icon="droplet" name="BPC-157" sub="250 mcg · daily" on />
        <AssignRow tint="muscle" icon="bolt" name="Ipamorelin" sub="300 mcg · daily" on border />
        <AssignRow tint="fatloss" icon="flame" name="Semaglutide" sub="0.25 mg · weekly" on border />
        <AssignRow tint="recovery" icon="shield" name="TB-500" sub="2 mg · 2× weekly" border />
        <AssignRow tint="longevity" icon="dna" name="MOTS-c" sub="5 mg · 3× weekly" border />
      </div>
      <button className="btn btn-primary" style={{ marginTop: 16 }}><Icon name="check" size={20} sw={2.2} /> Save cycle</button>
    </Phone>
  );
}

Object.assign(window, {
  PickerRow, DateRow, ScreenAddVial, StatCol, SchedRow, ScreenProtocolDetail,
  ScreenCycleForm, AssignRow, ScreenCycleProtocols,
});