/* Peptino — screens C: Inventory, Protocols, ProtocolForm, Progress(weight),
   Reconstitution, UnitConverter, LabReference, More, QuickAdd sheet */

function BackHeader({ title, action }) {
  return (
    <div className="appbar">
      <div className="appbar-top">
        <div className="chip-btn"><Icon name="chevB" size={20} /></div>
        <div className="spacer" />
        {action || null}
      </div>
      <span className="t-display c-1" style={{ marginTop: 4 }}>{title}</span>
    </div>
  );
}
function AccentAdd() {
  return <div className="chip-btn" style={{ background: 'var(--accent)', borderColor: 'var(--accent)', color: 'var(--accent-fg)' }}><Icon name="plus" size={22} sw={2.3} /></div>;
}
function Field({ label, children }) {
  return <div className="field" style={{ marginBottom: 18 }}><span className="lab t-label">{label}</span>{children}</div>;
}
function NumField({ value, unit, ph }) {
  return <div className="input"><span className="t-bodyLg" style={{ color: value ? 'var(--text-1)' : 'var(--text-3)', fontWeight: 600 }}>{value || ph}</span><span className="unit">{unit}</span></div>;
}

/* simple line chart (weight trend) */
function LineChart({ width = 300, height = 150, values = [], unit = 'kg' }) {
  const pad = { l: 6, r: 6, t: 12, b: 20 };
  const W = width - pad.l - pad.r, H = height - pad.t - pad.b;
  const min = Math.min(...values), max = Math.max(...values);
  const rng = max - min || 1;
  const pts = values.map((v, i) => [pad.l + (i / (values.length - 1)) * W, pad.t + (1 - (v - min) / rng) * H]);
  const line = pts.map((p, i) => (i ? 'L' : 'M') + p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' ');
  const area = line + ` L ${pad.l + W} ${pad.t + H} L ${pad.l} ${pad.t + H} Z`;
  const last = pts[pts.length - 1];
  const id = 'lg' + Math.round(values[0] || 0);
  return (
    <svg width={width} height={height}>
      <defs><linearGradient id={id} x1="0" y1="0" x2="0" y2="1"><stop offset="0" stopColor="var(--accent)" stopOpacity="0.22" /><stop offset="1" stopColor="var(--accent)" stopOpacity="0.01" /></linearGradient></defs>
      {[0.33, 0.66].map((g, i) => <line key={i} x1={pad.l} y1={pad.t + g * H} x2={pad.l + W} y2={pad.t + g * H} stroke="var(--border)" />)}
      <path d={area} fill={`url(#${id})`} />
      <path d={line} fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={last[0]} cy={last[1]} r="4" fill="var(--accent)" stroke="var(--surface)" strokeWidth="2" />
      {['Apr', 'May', 'Jun'].map((m, i) => <text key={i} x={pad.l + (i / 2) * W} y={height - 5} fontSize="10.5" fontWeight="600" fill="var(--text-3)" textAnchor={i === 0 ? 'start' : i === 2 ? 'end' : 'middle'} fontFamily="Hanken Grotesk">{m}</text>)}
    </svg>
  );
}

/* ============================== INVENTORY (Fridge) ============================== */
function VialCard({ name, sub, level, status, statusCls, meta, expiry, expWarn }) {
  const col = level > 0.4 ? 'var(--success-fill)' : level > 0.2 ? 'var(--warning-fill)' : 'var(--danger-fill)';
  return (
    <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 10 }}>
        <div className="row-main"><span className="t-heading c-1">{name}</span><span className="t-caption c-3">{sub}</span></div>
        <span className={'tag ' + statusCls} style={{ paddingLeft: 8 }}>{status}</span>
      </div>
      <div className="fillbar"><i style={{ width: (level * 100) + '%', background: col }} /></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10 }}>
        <span className="t-caption c-2" style={{ whiteSpace: 'nowrap' }}>{meta}</span>
        <span className="t-caption" style={{ color: expWarn ? 'var(--warning)' : 'var(--text-3)', whiteSpace: 'nowrap' }}>{expiry}</span>
      </div>
    </div>
  );
}
function ScreenInventory({ theme }) {
  return (
    <Phone theme={theme} active="inventory">
      <div className="appbar">
        <div className="appbar-top"><span className="t-display c-1">Fridge</span><div className="spacer" /><AccentAdd /></div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <VialCard name="BPC-157" sub="5 mg · reconstituted" level={0.46} status="Active" statusCls="success" meta="2.3 / 5.0 mL" expiry="Exp Jun 24" />
        <VialCard name="TB-500" sub="10 mg · reconstituted" level={0.62} status="Active" statusCls="success" meta="6.2 / 10 mL" expiry="Exp Jul 02" />
        <VialCard name="Semaglutide" sub="2 mg · reconstituted" level={0.18} status="Expiring" statusCls="warning" meta="0.4 / 2.0 mL" expiry="Exp in 4 days" expWarn />
        <VialCard name="Ipamorelin" sub="10 mg · sealed" level={1} status="Sealed" statusCls="neutral" meta="Lyophilised" expiry="Exp 2027" />
      </div>
    </Phone>
  );
}

/* ============================== PROTOCOLS ============================== */
function ProtocolCard({ tint, icon, name, sub, active }) {
  return (
    <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <div className={'row-chip tint-' + tint} style={{ width: 46, height: 46 }}><Icon name={icon} size={22} /></div>
      <div className="row-main"><span className="t-heading c-1">{name}</span><span className="t-caption c-3">{sub}</span></div>
      <span className={'tag ' + (active ? '' : 'neutral')} style={{ paddingLeft: active ? 8 : 11 }}>{active ? <><span className="dot" /> Active</> : 'Paused'}</span>
      <span className="row-trail chev"><Icon name="chevR" size={18} /></span>
    </div>
  );
}
function ScreenProtocols({ theme }) {
  return (
    <Phone theme={theme} active="protocols">
      <div className="appbar">
        <div className="appbar-top"><span className="t-display c-1">Protocols</span><div className="spacer" /><AccentAdd /></div>
      </div>
      <div className="input" style={{ marginBottom: 14 }}><Icon name="search" size={19} color="var(--text-3)" /><span className="t-body c-3">Search protocols…</span></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <ProtocolCard tint="recovery" icon="droplet" name="BPC-157" sub="250 mcg · daily · 9:00 AM" active />
        <ProtocolCard tint="muscle" icon="bolt" name="Ipamorelin" sub="300 mcg · daily · 9:00 PM" active />
        <ProtocolCard tint="fatloss" icon="flame" name="Semaglutide" sub="0.25 mg · weekly · Mon" active />
        <ProtocolCard tint="recovery" icon="shield" name="TB-500" sub="2 mg · 2× weekly" active={false} />
      </div>
    </Phone>
  );
}

/* ============================== PROTOCOL FORM (new) ============================== */
function ScreenProtocolForm({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <BackHeader title="New protocol" />
      <Field label="Compound">
        <div className="card flat" style={{ border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px' }}>
          <div className="row-chip tint-recovery" style={{ width: 38, height: 38 }}><Icon name="droplet" size={18} /></div>
          <span className="t-bodyLg c-1" style={{ flex: 1 }}>BPC-157</span>
          <Icon name="chevR" size={18} color="var(--text-3)" />
        </div>
      </Field>
      <Field label="Dose">
        <div style={{ display: 'flex', gap: 12 }}>
          <div className="bignum" style={{ flex: 1 }}><span className="v">250</span><span className="u">mcg</span></div>
          <div className="units" style={{ flexDirection: 'column' }}>
            <button className="on">mcg</button><button>mg</button>
          </div>
        </div>
      </Field>
      <Field label="Frequency">
        <div className="seg"><button className="on">Daily</button><button>Weekly</button><button>Every N</button><button>Hourly</button></div>
      </Field>
      <Field label="Times of day">
        <div className="input"><Icon name="clock" size={18} color="var(--text-3)" /><span className="t-bodyLg c-1">09:00</span><span className="unit"><Icon name="close" size={17} color="var(--text-3)" /></span></div>
        <button className="btn btn-ghost c-ink sm" style={{ justifyContent: 'flex-start', height: 40, padding: 0, marginTop: 4 }}><Icon name="plus" size={18} sw={2.2} /> Add time</button>
      </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>
      <button className="btn btn-primary" style={{ marginTop: 4 }}><Icon name="check" size={20} sw={2.2} /> Save protocol</button>
    </Phone>
  );
}

/* ============================== PROGRESS (weight) ============================== */
function ScreenProgress({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <BackHeader title="Progress" />
      {/* summary */}
      <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <span className="t-caption c-3">Current weight</span>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, margin: '2px 0 8px' }}>
              <span className="t-title c-1" style={{ fontSize: 32 }}>82.4</span><span className="t-strong c-2">kg</span>
            </div>
            <span className="tag success" style={{ paddingLeft: 8 }}><Icon name="arrowDown" size={12} sw={2.4} /> 0.6 kg</span>
          </div>
          <div style={{ textAlign: 'right' }}><span className="t-caption c-3">Body fat</span><div className="t-title c-1" style={{ fontSize: 26 }}>16.2%</div></div>
        </div>
        <button className="btn btn-secondary sm"><Icon name="plus" size={18} sw={2.2} /> Add weight</button>
      </div>
      {/* range + chart */}
      <div className="rangechips" style={{ margin: '16px 0 12px' }}>
        <span className="rc">1M</span><span className="rc on">3M</span><span className="rc">1Y</span><span className="rc">Custom</span>
      </div>
      <div className="card" style={{ gap: 8 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="t-label c-2">Trend</span><span className="t-label c-3">kg</span></div>
        <LineChart width={302} height={150} values={[84.6, 84.1, 83.8, 83.9, 83.2, 82.9, 82.4]} />
      </div>
      {/* history */}
      <div className="sec-head"><span className="t-label c-2">History</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        {[['Jun 6', '82.4 kg', '16.2% BF'], ['Jun 1', '83.0 kg', '16.5% BF'], ['May 25', '83.8 kg', '16.9% BF']].map((r, i) => (
          <div className="row" key={i}>
            <div className="row-main"><span className="t-strong c-1">{r[0]}</span></div>
            <div className="row-trail"><span className="c-1">{r[1]}</span><span className="t-caption c-3">{r[2]}</span></div>
          </div>
        ))}
      </div>
    </Phone>
  );
}

/* ============================== RECONSTITUTION CALC ============================== */
function ScreenRecon({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <BackHeader title="Reconstitution" />
      <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Field label="Vial amount"><NumField value="10" unit="mg" /></Field>
        <Field label="BAC water"><NumField value="2" unit="mL" /></Field>
        <Field label="Desired dose"><NumField value="250" unit="mcg" /></Field>
        <div style={{ marginTop: -4 }}>
          <span className="lab t-label c-3" style={{ display: 'block', marginBottom: 8 }}>Syringe</span>
          <div className="seg"><button className="on">U-100</button><button>U-40</button></div>
        </div>
      </div>
      <div className="card" style={{ marginTop: 14 }}>
        <span className="t-label c-2" style={{ display: 'block', marginBottom: 4 }}>Results</span>
        <div className="kv"><span className="k">Concentration</span><span className="v">5 mg/mL</span></div>
        <div className="kv"><span className="k">Draw</span><span className="v hi">5 units</span></div>
        <div className="kv"><span className="k">Draw volume</span><span className="v hi">0.05 mL</span></div>
        <div className="kv"><span className="k">Total doses</span><span className="v">40</span></div>
      </div>
      <div style={{ display: 'flex', gap: 12, marginTop: 14 }}>
        <button className="btn btn-outline sm" style={{ flex: 1 }}><Icon name="bookmark" size={17} /> Save</button>
        <button className="btn btn-outline sm" style={{ flex: 1 }}><Icon name="book" size={17} /> Presets</button>
      </div>
      <div className="disc" style={{ marginTop: 14 }}>
        <span style={{ color: 'var(--warning)', flex: '0 0 auto' }}><Icon name="info" size={17} /></span>
        <span className="t-caption c-2">Arithmetic on your values only. Verify every dose independently.</span>
      </div>
    </Phone>
  );
}

/* ============================== UNIT CONVERTER ============================== */
function ScreenConverter({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <BackHeader title="Converter" />
      <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div><span className="lab t-label c-3" style={{ display: 'block', marginBottom: 8 }}>From</span>
          <div className="seg"><button>mcg</button><button className="on">mg</button><button>mL</button><button>IU</button></div></div>
        <div><span className="lab t-label c-3" style={{ display: 'block', marginBottom: 8 }}>To</span>
          <div className="seg soft"><button className="on">mcg</button><button>mg</button><button>mL</button><button>IU</button></div></div>
        <Field label="Amount (mg)"><NumField value="1" unit="mg" /></Field>
      </div>
      <div className="card" style={{ marginTop: 14, alignItems: 'flex-start' }}>
        <span className="t-label c-2" style={{ display: 'block', marginBottom: 8 }}>Result</span>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}><span className="t-title c-1" style={{ fontSize: 34 }}>1,000</span><span className="t-heading c-2">mcg</span></div>
      </div>
      <div className="card" style={{ marginTop: 14, padding: '6px 18px' }}>
        <span className="t-label c-2" style={{ display: 'block', margin: '8px 0 2px' }}>Quick reference</span>
        {[['1 mg', '1,000 mcg'], ['1 mcg', '0.001 mg'], ['1 mL @ 5 mg/mL', '5,000 mcg']].map((r, i) => (
          <div className="kv" key={i}><span className="k">{r[0]}</span><span className="v">{r[1]}</span></div>
        ))}
      </div>
    </Phone>
  );
}

/* ============================== LAB REFERENCE ============================== */
function RefTable({ rows }) {
  return (
    <div className="card" style={{ padding: '6px 18px' }}>
      {rows.map((r, i) => (
        <div className="tbl-row" key={i}>
          <span className="cell t-strong c-1">{r[0]}</span>
          <span className="cell t-body c-2" style={{ flex: 1.4 }}>{r[1]}</span>
        </div>
      ))}
    </div>
  );
}
function ScreenLab({ theme }) {
  return (
    <Phone theme={theme} showTab={false}>
      <BackHeader title="Lab reference" />
      <span className="tag neutral" style={{ marginBottom: 14 }}>From published literature</span>
      <div className="sec-head"><span className="t-label c-2">Storage</span></div>
      <RefTable rows={[['Lyophilised', '−20 °C, up to 24 months'], ['Reconstituted', '2–8 °C, up to 28 days'], ['BAC water', '2–8 °C after opening']]} />
      <div className="sec-head"><span className="t-label c-2">Syringes</span></div>
      <RefTable rows={[['1 mL · U-100', '100 units = 1 mL'], ['0.5 mL · U-100', '50 units = 0.5 mL'], ['0.3 mL · U-100', '30 units = 0.3 mL']]} />
      <div className="disc" style={{ marginTop: 16 }}>
        <span style={{ color: 'var(--warning)', flex: '0 0 auto' }}><Icon name="shield" size={17} /></span>
        <span className="t-caption c-2">Reference only. Not medical advice. For research documentation.</span>
      </div>
    </Phone>
  );
}

/* ============================== MORE ============================== */
function MoreRow({ icon, name, sub, disabled, last }) {
  return (
    <div className="row" style={last ? { borderBottom: 0 } : {}}>
      <div className="row-chip" style={{ background: 'var(--surface-2)', color: disabled ? 'var(--text-3)' : 'var(--text-2)' }}><Icon name={icon} size={19} /></div>
      <div className="row-main"><span className="t-bodyLg" style={{ color: disabled ? 'var(--text-3)' : 'var(--text-1)' }}>{name}</span>{sub ? <span className="t-caption c-3">{sub}</span> : null}</div>
      {disabled ? <span className="tag neutral">Soon</span> : <span className="row-trail chev"><Icon name="chevR" size={18} /></span>}
    </div>
  );
}
function ScreenMore({ theme }) {
  return (
    <Phone theme={theme} active="more">
      <div className="appbar"><span className="t-display c-1">More</span></div>
      <div className="sec-head"><span className="t-label c-2">Tracking</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <MoreRow icon="flask" name="Protocols" />
        <MoreRow icon="cube" name="Fridge" />
        <MoreRow icon="trending" name="Progress" last />
      </div>
      <div className="sec-head"><span className="t-label c-2">Reference</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <MoreRow icon="book" name="Library" />
        <MoreRow icon="flask" name="Reconstitution" />
        <MoreRow icon="calculator" name="Calculators" />
        <MoreRow icon="info" name="Lab reference" last />
      </div>
      <div className="sec-head"><span className="t-label c-2">Other</span></div>
      <div className="card" style={{ padding: '4px 18px' }}>
        <MoreRow icon="sparkle" name="Assistant" sub="AI dose helper" disabled />
        <MoreRow icon="settings" name="Settings" last />
      </div>
    </Phone>
  );
}

/* ============================== QUICK-ADD SHEET ============================== */
function ScreenQuickAdd({ theme }) {
  const actions = [
    ['check', 'recovery', 'Log a dose', 'Record a dose you just took'],
    ['flask', 'longevity', 'Add a vial', 'New vial to your fridge'],
    ['plus', 'muscle', 'New protocol', 'Schedule a compound'],
  ];
  return (
    <div className="pt phone" data-theme={theme} style={{ background: 'var(--bg)' }}>
      <StatusBar time="9:41" />
      <div className="screen" style={{ overflow: 'hidden' }}>
        <div style={{ padding: '4px 20px', opacity: 0.4, filter: 'saturate(.6)' }}>
          <div className="appbar"><span className="t-display c-1">Today</span></div>
          <div className="card" style={{ height: 150 }} />
          <div className="card" style={{ height: 96, marginTop: 14 }} />
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(8,9,11,.45)' }} />
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, background: 'var(--surface)', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '12px 16px 26px', boxShadow: '0 -10px 40px rgba(0,0,0,.25)' }}>
          <div style={{ width: 40, height: 5, borderRadius: 3, background: 'var(--border-strong)', margin: '0 auto 8px' }} />
          {actions.map((a, i) => (
            <div className="row" key={i} style={{ padding: '16px 4px', borderTop: i ? '1px solid var(--border)' : 0 }}>
              <div className={'row-chip tint-' + a[1]} style={{ width: 50, height: 50, borderRadius: 16 }}><Icon name={a[0]} size={23} sw={2.1} /></div>
              <div className="row-main"><span className="t-heading c-1">{a[2]}</span><span className="t-caption c-3">{a[3]}</span></div>
              <span className="row-trail chev"><Icon name="chevR" size={18} /></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  BackHeader, AccentAdd, Field, NumField, LineChart, VialCard, ScreenInventory,
  ProtocolCard, ScreenProtocols, ScreenProtocolForm, ScreenProgress, ScreenRecon,
  ScreenConverter, RefTable, ScreenLab, MoreRow, ScreenMore, ScreenQuickAdd,
});