/* Peptino — screens A: Phone shell, Today, Calendar, Library */

function Phone({ theme = 'light', active, time = '9:41', showTab = true, children }) {
  return (
    <div className="pt phone" data-theme={theme}>
      <StatusBar time={time} />
      <div className="screen"><div className="scroll">{children}</div></div>
      {showTab ? <TabBar active={active} /> : null}
    </div>
  );
}

function Switch({ on = true }) {
  return (
    <div style={{ width: 46, height: 28, borderRadius: 999, padding: 3, background: on ? 'var(--accent)' : 'var(--border-strong)', display: 'flex', justifyContent: on ? 'flex-end' : 'flex-start', flex: '0 0 46px' }}>
      <div style={{ width: 22, height: 22, borderRadius: 999, background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,.25)' }} />
    </div>
  );
}

function StatusPill({ kind }) {
  const map = {
    taken:   { cls: 'success', icon: 'check', label: 'Taken' },
    pending: { cls: 'neutral', icon: 'clock', label: 'Pending' },
    missed:  { cls: 'danger',  icon: 'info',  label: 'Missed' },
    skipped: { cls: 'neutral', icon: 'pause', label: 'Skipped' },
  }[kind];
  return (
    <span className={'tag ' + map.cls} style={{ paddingLeft: 8 }}>
      <Icon name={map.icon} size={12} sw={2.4} /> {map.label}
    </span>
  );
}

function DoseRow({ tint, icon, name, sub, status }) {
  return (
    <div className="row">
      <div className={'row-chip tint-' + tint}><Icon name={icon} size={20} /></div>
      <div className="row-main">
        <span className="t-bodyLg c-1">{name}</span>
        <span className="t-caption c-3">{sub}</span>
      </div>
      <StatusPill kind={status} />
    </div>
  );
}

/* ============================== TODAY ============================== */
function ScreenToday({ theme }) {
  return (
    <Phone theme={theme} active="today">
      <div className="appbar">
        <div className="appbar-top">
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <span className="t-caption c-3">Friday, June 6</span>
            <span className="t-display c-1">Today</span>
          </div>
          <div className="spacer" />
          <div className="chip-btn"><Icon name="calendar" size={20} /></div>
          <div className="chip-btn" style={{ background: 'var(--accent)', borderColor: 'var(--accent)', color: 'var(--accent-fg)' }}><Icon name="plus" size={22} sw={2.3} /></div>
        </div>
      </div>

      {/* hero adherence */}
      <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <Ring progress={0.75} size={118} stroke={13}>
          <span className="t-title c-1" style={{ fontSize: 26 }}>75%</span>
          <span className="t-label c-3" style={{ fontSize: 9.5 }}>Today</span>
        </Ring>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <span className="t-heading c-1">On track</span>
          <span className="t-body c-2" style={{ lineHeight: '20px' }}>3 of 4 doses logged. One left tonight.</span>
          <span className="tag" style={{ alignSelf: 'flex-start', paddingLeft: 8, textTransform: 'none', letterSpacing: 0, whiteSpace: 'nowrap' }}>
            <Icon name="flame" size={13} sw={2.2} /> 12-day streak
          </span>
        </div>
      </div>

      {/* next dose */}
      <div className="card sel" style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div className="row-chip tint-muscle" style={{ width: 46, height: 46 }}><Icon name="bolt" size={22} /></div>
          <div className="row-main">
            <span className="t-label c-3">Next dose · in 2h 15m</span>
            <span className="t-heading c-1">Ipamorelin</span>
            <span className="t-caption c-2">300 mcg · Subcutaneous · 9:00 PM</span>
          </div>
        </div>
        <button className="btn btn-primary sm"><Icon name="check" size={19} sw={2.2} /> Log now</button>
      </div>

      <div className="sec-head">
        <span className="t-label c-2">Today's schedule</span>
        <span className="link">View all <Icon name="chevR" size={14} sw={2.2} /></span>
      </div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <DoseRow tint="recovery" icon="droplet" name="BPC-157" sub="200 mcg · 8:00 AM" status="taken" />
        <DoseRow tint="recovery" icon="shield" name="TB-500" sub="2 mg · 8:00 AM" status="taken" />
        <DoseRow tint="skincare" icon="sparkle" name="GHK-Cu" sub="1 mg · 2:00 PM" status="taken" />
        <DoseRow tint="muscle" icon="bolt" name="Ipamorelin" sub="300 mcg · 9:00 PM" status="pending" />
      </div>
    </Phone>
  );
}

/* ============================== CALENDAR (pushed) ============================== */
function ScreenCalendar({ 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="chevB" size={18} /></div>
          <div className="chip-btn ghost"><Icon name="chevR" size={18} /></div>
        </div>
        <span className="t-display c-1" style={{ marginTop: 4 }}>June 2026</span>
      </div>

      <div className="seg" style={{ marginBottom: 14 }}>
        <button className="on">Month</button>
        <button>Week</button>
        <button>Agenda</button>
      </div>

      <div className="card"><MiniCalendar selected={18} /></div>

      <div className="tiles" style={{ marginTop: 14 }}>
        <div className="tile"><div className="k t-label">Current streak</div><div className="v">12 <span style={{ fontSize: 14, color: 'var(--text-3)' }}>days</span></div></div>
        <div className="tile"><div className="k t-label">June adherence</div><div className="v">91%</div></div>
      </div>

      <div className="sec-head">
        <span className="t-label c-2">Thursday, June 18</span>
        <span className="tag success" style={{ paddingLeft: 8 }}><Icon name="check" size={12} sw={2.4} /> 3 / 3</span>
      </div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <DoseRow tint="recovery" icon="droplet" name="BPC-157" sub="200 mcg · 8:00 AM" status="taken" />
        <DoseRow tint="muscle" icon="bolt" name="CJC-1295" sub="100 mcg · 8:00 AM" status="taken" />
        <DoseRow tint="fatloss" icon="flame" name="Semaglutide" sub="0.25 mg · 7:00 PM" status="taken" />
      </div>
    </Phone>
  );
}

/* ============================== LIBRARY ============================== */
function CompoundRow({ tint, icon, name, cat, catCls, sub, level }) {
  return (
    <div className="row">
      <div className={'row-chip tint-' + tint} style={{ width: 46, height: 46 }}><Icon name={icon} size={22} /></div>
      <div className="row-main" style={{ gap: 4 }}>
        <span className="t-bodyLg c-1">{name}</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
          <span className={'tag ' + catCls} style={{ fontSize: 10, padding: '3px 8px' }}>{cat}</span>
          <span className="t-caption c-3" style={{ whiteSpace: 'nowrap' }}>{sub}</span>
        </div>
      </div>
      <div className="row-trail">
        <div style={{ width: 6, height: 34, borderRadius: 3, background: 'var(--sunken)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: (Math.max(0.08, level) * 100) + '%', background: level <= 0.2 ? 'var(--danger-fill)' : 'var(--accent)' }} />
        </div>
        <span className="chev"><Icon name="chevR" size={18} /></span>
      </div>
    </div>
  );
}
function ScreenLibrary({ 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="search" size={20} /></div>
        </div>
        <span className="t-display c-1" style={{ marginTop: 4 }}>Library</span>
      </div>

      <div className="input" style={{ marginBottom: 14 }}>
        <Icon name="search" size={19} color="var(--text-3)" />
        <span className="t-body c-3">Search compounds…</span>
      </div>

      <div style={{ display: 'flex', gap: 8, marginBottom: 4, overflow: 'hidden' }}>
        <span className="tag" style={{ background: 'var(--accent)', color: 'var(--accent-fg)' }}>All</span>
        <span className="tag recovery">Recovery</span>
        <span className="tag fatloss">Fat loss</span>
        <span className="tag cognitive">Cognitive</span>
      </div>

      <div className="card" style={{ padding: '4px 18px', marginTop: 14 }}>
        <CompoundRow tint="recovery" icon="droplet" name="BPC-157" cat="Recovery" catCls="recovery" sub="23 left" level={0.46} />
        <CompoundRow tint="recovery" icon="shield" name="TB-500" cat="Recovery" catCls="recovery" sub="11 left" level={0.62} />
        <CompoundRow tint="muscle" icon="bolt" name="Ipamorelin" cat="Muscle" catCls="muscle" sub="40 left" level={0.78} />
        <CompoundRow tint="fatloss" icon="flame" name="Semaglutide" cat="Fat loss" catCls="fatloss" sub="6 left · low" level={0.18} />
        <CompoundRow tint="skincare" icon="sparkle" name="GHK-Cu" cat="Skincare" catCls="skincare" sub="19 left" level={0.54} />
        <CompoundRow tint="longevity" icon="dna" name="MOTS-c" cat="Longevity" catCls="longevity" sub="28 left" level={0.88} />
      </div>
    </Phone>
  );
}

Object.assign(window, { Phone, Switch, StatusPill, DoseRow, CompoundRow, ScreenToday, ScreenCalendar, ScreenLibrary });