/* Peptino — screens B: Compound detail, Log dose, Settings */

/* ============================== COMPOUND DETAIL ============================== */
function ScreenDetail({ 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="edit" size={19} /></div>
          <div className="chip-btn ghost"><Icon name="info" size={20} /></div>
        </div>
        <span className="t-display c-1" style={{ marginTop: 4 }}>BPC-157</span>
        <span className="t-body c-2">Body Protection Compound</span>
        <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
          <span className="tag recovery">Recovery</span>
          <span className="tag warning" style={{ paddingLeft: 8 }}><Icon name="info" size={12} sw={2.4} /> Research only</span>
        </div>
      </div>

      {/* vial status */}
      <div className="card" style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
        <Vial level={0.46} width={62} height={128} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div>
            <div className="t-title c-1" style={{ fontSize: 30 }}>1.4 <span style={{ fontSize: 16, color: 'var(--text-3)' }}>mL left</span></div>
            <span className="t-caption c-2">46% · 23 doses remaining</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
              <span className="t-caption c-3">Concentration</span><span className="t-strong c-1" style={{ whiteSpace: 'nowrap' }}>5 mg/mL</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
              <span className="t-caption c-3">Reconstituted</span><span className="t-strong c-1" style={{ whiteSpace: 'nowrap' }}>May 28</span>
            </div>
          </div>
          <span className="tag warning" style={{ alignSelf: 'flex-start', paddingLeft: 8 }}><Icon name="clock" size={12} sw={2.2} /> Expires in 18 days</span>
        </div>
      </div>

      {/* serum curve */}
      <div className="sec-head"><span className="t-label c-2">Serum curve</span><span className="t-caption c-3">Half-life 4–6h</span></div>
      <div className="card">
        <div className="seg soft" style={{ marginBottom: 14 }}>
          <button className="on">Single</button>
          <button>Stack</button>
        </div>
        <DecayChart width={300} height={150} peak={0.32} halfLife={0.42} label="5h" />
      </div>

      {/* properties */}
      <div className="sec-head"><span className="t-label c-2">Properties</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        {[
          ['ruler', 'Typical dose', '200–500 mcg'],
          ['syringe', 'Route', 'Subcutaneous'],
          ['clock', 'Schedule', '2× daily'],
          ['flask', 'Storage', 'Refrigerated'],
        ].map(([ic, k, v], i) => (
          <div className="row" key={i}>
            <div className="row-chip"><Icon name={ic} size={19} /></div>
            <div className="row-main"><span className="t-bodyLg c-1">{k}</span></div>
            <span className="t-strong c-2">{v}</span>
          </div>
        ))}
      </div>

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

/* ============================== LOG DOSE (sheet) ============================== */
function ScreenLog({ theme }) {
  return (
    <div className="pt phone" data-theme={theme} style={{ background: 'var(--bg)' }}>
      <StatusBar time="9:41" />
      {/* dimmed backdrop preview */}
      <div className="screen" style={{ overflow: 'hidden' }}>
        <div style={{ padding: '4px 20px', opacity: 0.45, filter: 'saturate(0.6)' }}>
          <div className="appbar"><span className="t-display c-1">Today</span></div>
          <div className="card" style={{ height: 96 }} />
          <div className="card" style={{ height: 96, marginTop: 14 }} />
        </div>
        {/* scrim */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(20,22,27,.28)' }} />
        {/* sheet */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, background: 'var(--surface)',
          borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '12px 20px 26px',
          boxShadow: '0 -10px 40px rgba(20,22,27,.18)', display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <div style={{ width: 40, height: 5, borderRadius: 3, background: 'var(--border-strong)', alignSelf: 'center' }} />
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span className="t-title c-1" style={{ fontSize: 24 }}>Log dose</span>
            <div className="spacer" />
            <div className="chip-btn ghost"><Icon name="plus" size={22} sw={2.2} style={{ transform: 'rotate(45deg)' }} /></div>
          </div>

          {/* compound select */}
          <div className="input" style={{ height: 60 }}>
            <div className="row-chip tint-recovery" style={{ width: 38, height: 38 }}><Icon name="droplet" size={18} /></div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <span className="t-strong c-1">BPC-157</span>
              <span className="t-caption c-3">5 mg/mL · Recovery</span>
            </div>
            <span className="unit"><Icon name="chevD" size={18} color="var(--text-3)" /></span>
          </div>

          {/* dose amount */}
          <div className="field">
            <span className="lab t-label">Dose amount</span>
            <div style={{ display: 'flex', gap: 12, alignItems: 'stretch' }}>
              <div className="bignum" style={{ flex: 1 }}><span className="v">200</span><span className="u">mcg</span></div>
              <div className="units" style={{ flexDirection: 'column', justifyContent: 'space-between' }}>
                <button className="on">mcg</button>
                <button>mg</button>
              </div>
            </div>
          </div>

          {/* injection site */}
          <div className="field">
            <span className="lab t-label">Injection site</span>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <span className="tag" style={{ background: 'var(--accent)', color: 'var(--accent-fg)', padding: '8px 14px', fontSize: 12 }}>Abdomen L</span>
              <span className="tag neutral" style={{ padding: '8px 14px', fontSize: 12 }}>Abdomen R</span>
              <span className="tag neutral" style={{ padding: '8px 14px', fontSize: 12 }}>Thigh L</span>
              <span className="tag neutral" style={{ padding: '8px 14px', fontSize: 12 }}>Delt</span>
            </div>
          </div>

          {/* time */}
          <div className="input">
            <Icon name="clock" size={19} color="var(--text-3)" />
            <span className="t-bodyLg c-1">Today, 9:00 PM</span>
            <span className="unit"><Icon name="chevR" size={18} color="var(--text-3)" /></span>
          </div>

          <button className="btn btn-primary"><Icon name="check" size={20} sw={2.2} /> Save dose</button>
        </div>
      </div>
    </div>
  );
}

/* ============================== SETTINGS ============================== */
function SettingsRow({ icon, name, sub, trailing, last }) {
  return (
    <div className="row" style={last ? { borderBottom: 0 } : {}}>
      <div className="row-chip" style={{ background: 'var(--surface-2)', color: 'var(--text-2)' }}><Icon name={icon} size={19} /></div>
      <div className="row-main">
        <span className="t-bodyLg c-1">{name}</span>
        {sub ? <span className="t-caption c-3">{sub}</span> : null}
      </div>
      {trailing || <span className="row-trail chev"><Icon name="chevR" size={18} /></span>}
    </div>
  );
}
function ScreenSettings({ 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 }}>Settings</span>
      </div>

      {/* profile */}
      <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <div style={{ width: 54, height: 54, borderRadius: 999, background: 'var(--accent-soft)', color: 'var(--accent-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Bricolage Grotesque', fontWeight: 800, fontSize: 20 }}>AM</div>
        <div className="row-main">
          <span className="t-heading c-1">Alex Morgan</span>
          <span className="t-caption c-3">alex@peptino.app · Pro</span>
        </div>
        <span className="row-trail chev"><Icon name="chevR" size={18} /></span>
      </div>

      <div className="sec-head"><span className="t-label c-2">Appearance</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <SettingsRow icon="moon" name="Theme" trailing={
          <div className="seg soft" style={{ width: 150 }}>
            <button className={theme === 'dark' ? '' : 'on'} style={{ fontSize: 12 }}>Light</button>
            <button className={theme === 'dark' ? 'on' : ''} style={{ fontSize: 12 }}>Dark</button>
          </div>
        } />
        <SettingsRow icon="sparkle" name="Accent" last trailing={
          <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 18, height: 18, borderRadius: 6, background: 'var(--accent)' }} />
            <span className="t-strong c-2">Lime</span>
          </span>
        } />
      </div>

      <div className="sec-head"><span className="t-label c-2">Preferences</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <SettingsRow icon="ruler" name="Default units" trailing={<span className="t-strong c-2">mcg / mg</span>} />
        <SettingsRow icon="bell" name="Dose reminders" trailing={<Switch on={true} />} />
        <SettingsRow icon="flask" name="Low-vial alerts" trailing={<Switch on={true} />} last />
      </div>

      <div className="sec-head"><span className="t-label c-2">Data & privacy</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <SettingsRow icon="download" name="Export data" sub="CSV · last 12 months" />
        <SettingsRow icon="shield" name="Research disclaimer" last />
      </div>

      <button className="btn btn-ghost c-danger" style={{ marginTop: 14 }}>Delete account</button>
    </Phone>
  );
}

Object.assign(window, { ScreenDetail, ScreenLog, SettingsRow, ScreenSettings });