// Shared bits: status bar, tab bar, screen frame
const { Icon } = window;

function StatusBar({ mode = 'd', time = '2:14' }) {
  const T = UN[mode];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '14px 28px 6px', fontFamily: UN.font.body,
      color: T.text, fontSize: 14, fontWeight: 600,
    }}>
      <span style={{ fontVariantNumeric: 'tabular-nums', letterSpacing: -0.2 }}>{time}</span>
      <div style={{ width: 90 }} />
      <div style={{ display: 'flex', gap: 5, alignItems: 'center', opacity: 0.85 }}>
        <svg width="16" height="11" viewBox="0 0 16 11">
          <rect x="0" y="7" width="3" height="4" rx="0.6" fill={T.text}/>
          <rect x="4" y="5" width="3" height="6" rx="0.6" fill={T.text}/>
          <rect x="8" y="2.5" width="3" height="8.5" rx="0.6" fill={T.text}/>
          <rect x="12" y="0" width="3" height="11" rx="0.6" fill={T.text}/>
        </svg>
        <svg width="24" height="11" viewBox="0 0 24 11">
          <rect x="0.5" y="0.5" width="20" height="10" rx="2.5" stroke={T.text} strokeOpacity={0.5} fill="none"/>
          <rect x="2" y="2" width="14" height="7" rx="1.5" fill={T.text}/>
          <rect x="21.5" y="3.5" width="1.5" height="4" rx="0.7" fill={T.text} fillOpacity={0.5}/>
        </svg>
      </div>
    </div>
  );
}

function HomeIndicator({ mode = 'd' }) {
  const T = UN[mode];
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0 10px' }}>
      <div style={{
        width: 134, height: 5, borderRadius: 99,
        background: mode === 'd' ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.25)',
      }} />
    </div>
  );
}

function TabBar({ mode = 'd', active = 'home' }) {
  const T = UN[mode];
  return (
    <div style={{
      borderTop: `1px solid ${T.line}`,
      background: mode === 'd' ? 'rgba(26,24,23,0.92)' : 'rgba(250,247,242,0.92)',
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      padding: '10px 0 4px',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      position: 'relative',
    }}>
      <NavItem mode={mode} icon="home" label="Home" on={active === 'home'} />
      {/* center + button — Float style */}
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
        <FloatButton mode={mode} icon="plus" raised />
      </div>
      <NavItem mode={mode} icon="clock" label="Timeline" on={active === 'timeline'} />
    </div>
  );
}

function NavItem({ mode, icon, label, on }) {
  const T = UN[mode];
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
      padding: '4px 12px', flex: 1,
      color: on ? T.sage : T.textMute,
    }}>
      <Icon name={icon} size={22} color={on ? T.sage : T.textMute} strokeWidth={on ? 2 : 1.7} />
      <span style={{
        fontFamily: UN.font.body, fontSize: 10.5,
        fontWeight: on ? 700 : 500, letterSpacing: 0.1,
      }}>{label}</span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SHARED 3D BUTTON SYSTEM — used everywhere primary actions live
// ─────────────────────────────────────────────────────────────
// Float circle — used for: tab-bar center +, top-right voice mic.
// Always has the same 3D ring + outer glow + drop shadow.
function FloatButton({ mode = 'd', icon, size = 56, raised = false, accent }) {
  const T = UN[mode];
  const accentColor = accent || T.sage;
  const accentDeep = accent ? accent : T.sageDeep;
  return (
    <button style={{
      width: size, height: size, borderRadius: size,
      background: `linear-gradient(180deg, ${accentColor}, ${accentDeep})`,
      border: 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      cursor: 'pointer',
      transform: raised ? 'translateY(-12px)' : 'none',
      marginBottom: raised ? -12 : 0,
      boxShadow: `
        inset 0 1.5px 0 rgba(255,255,255,0.35),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 0 0 4px ${mode === 'd' ? T.bg : T.bg},
        0 0 0 5.5px rgba(143,181,162,0.45),
        0 12px 28px rgba(143,181,162,0.4),
        0 4px 10px rgba(0,0,0,0.3)
      `,
    }}>
      <Icon name={icon} size={size * 0.42} color={mode === 'd' ? '#0E1A14' : '#fff'} strokeWidth={2.4}/>
    </button>
  );
}

// Primary CTA — used on every "Continue", "Log dose", "Start trial", "Save" button
function btnPrimaryStyle(mode = 'd', { height = 56, radius = 18 } = {}) {
  const T = UN[mode];
  return {
    width: '100%', height, borderRadius: radius,
    background: `linear-gradient(180deg, ${T.sage}, ${T.sageDeep})`,
    border: 'none',
    color: mode === 'd' ? '#0E1A14' : '#fff',
    fontFamily: UN.font.body, fontSize: 16, fontWeight: 700, letterSpacing: -0.1,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    cursor: 'pointer',
    boxShadow: mode === 'd'
      ? `inset 0 1.5px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.18), 0 10px 24px rgba(143,181,162,0.30), 0 2px 6px rgba(0,0,0,0.35)`
      : `inset 0 1.5px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.1), 0 10px 24px rgba(107,142,125,0.32), 0 2px 6px rgba(0,0,0,0.10)`,
  };
}

// Icon button — used for X, gear, back chevron, share, all 32-36px circle buttons
function btnIconStyle(mode = 'd', { size = 32 } = {}) {
  const T = UN[mode];
  return {
    width: size, height: size, borderRadius: size,
    background: T.surface, border: `1px solid ${T.line2}`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    color: T.textDim, cursor: 'pointer',
  };
}

// Secondary CTA — "Maybe later", outline buttons
function btnSecondaryStyle(mode = 'd', { height = 50, radius = 16 } = {}) {
  const T = UN[mode];
  return {
    width: '100%', height, borderRadius: radius,
    background: 'transparent', border: `1.5px solid ${T.line2}`,
    color: T.text, fontFamily: UN.font.body, fontSize: 15, fontWeight: 600,
    letterSpacing: -0.1,
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
    cursor: 'pointer',
  };
}

// Top bar — persistent. Left: profile / kid switcher. Right: voice (FloatButton).
function TopBar({ mode = 'd', kidName = 'Maeve', kidTone = '#d3a89a', dot = 'sage', subtitle }) {
  const T = UN[mode];
  return (
    <div style={{
      padding: '6px 18px 0',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
    }}>
      <button style={{
        display: 'flex', alignItems: 'center', gap: 9,
        padding: '6px 14px 6px 6px', borderRadius: 99,
        background: T.surface, border: `1px solid ${T.line2}`,
        cursor: 'pointer',
      }}>
        <div style={{ position: 'relative' }}>
          <div style={{
            width: 30, height: 30, borderRadius: 30,
            background: `linear-gradient(135deg, ${kidTone}, ${T.sageDeep})`,
            color: '#fff', fontWeight: 700, fontSize: 12,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.2)',
          }}>{kidName[0]}</div>
          {dot && (
            <div style={{
              position: 'absolute', bottom: -1, right: -1,
              width: 11, height: 11, borderRadius: 11,
              background: dot === 'sage' ? T.sage : UN[mode].sev[dot] || T.sage,
              border: `2px solid ${T.surface}`,
            }}/>
          )}
        </div>
        <div style={{ textAlign: 'left' }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: T.text, letterSpacing: -0.2 }}>{kidName}</div>
          {subtitle && (
            <div style={{ fontSize: 10, color: T.textMute, fontWeight: 500, lineHeight: 1, marginTop: 1 }}>{subtitle}</div>
          )}
        </div>
        <Icon name="chevDown" size={12} color={T.textMute} strokeWidth={2}/>
      </button>

      <FloatButton mode={mode} icon="mic" size={44}/>
    </div>
  );
}

Object.assign(window, { TopBar, NavItem, FloatButton, btnPrimaryStyle, btnIconStyle, btnSecondaryStyle, Stepper, Scale5 });

// ─────────────────────────────────────────────────────────────
// SHARED +/- STEPPER — used everywhere: dose, temp, sleep, wake-ups, fluid oz
// One big number in the middle, [-] left, [+] right. Same proportions every time.
// ─────────────────────────────────────────────────────────────
function Stepper({ value, unit, sub, mode = 'd', size = 'lg' }) {
  const T = UN[mode];
  const big = size === 'lg';
  const numSize = big ? 48 : 32;
  const btnSize = big ? 46 : 38;
  return (
    <div style={{
      background: T.surface, borderRadius: 18, border: `1px solid ${T.line2}`,
      padding: big ? '16px 14px' : '12px 12px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <button style={{
        width: btnSize, height: btnSize, borderRadius: btnSize,
        background: T.surface2, border: `1px solid ${T.line2}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.text,
        cursor: 'pointer',
      }}>
        <Icon name="minus" size={big ? 20 : 16} color={T.text} strokeWidth={2.2}/>
      </button>
      <div style={{ textAlign: 'center' }}>
        <div style={{
          fontFamily: UN.font.num, fontSize: numSize, fontWeight: 600,
          letterSpacing: -1.8, color: T.text, fontVariantNumeric: 'tabular-nums', lineHeight: 1,
        }}>
          {value}
          {unit && <span style={{ fontSize: big ? 18 : 14, color: T.textDim, fontWeight: 500, marginLeft: 4 }}>{unit}</span>}
        </div>
        {sub && (
          <div style={{ marginTop: 6, fontSize: 11, color: T.sage, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4, justifyContent: 'center' }}>
            {sub}
          </div>
        )}
      </div>
      <button style={{
        width: btnSize, height: btnSize, borderRadius: btnSize,
        background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: T.sage,
        cursor: 'pointer',
      }}>
        <Icon name="plus" size={big ? 20 : 16} color={T.sage} strokeWidth={2.2}/>
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SHARED 5-DOT SCALE — used everywhere: symptom severity, observation axes, sleep quality
// Five dots growing in size + intensity. No verbose labels.
// ─────────────────────────────────────────────────────────────
function Scale5({ value, color = '#8FB5A2', mode = 'd' }) {
  const T = UN[mode];
  return (
    <div style={{ display: 'flex', gap: 5, alignItems: 'center' }}>
      {[1,2,3,4,5].map(n => {
        const on = n <= value;
        return (
          <button key={n} style={{
            flex: 1, height: 36, borderRadius: 9,
            background: on ? color : T.surface2,
            opacity: on ? 0.35 + (n / 5) * 0.65 : 1,
            border: `1px solid ${on ? color : T.line2}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: on ? '#0E1A14' : T.textMute,
            fontFamily: UN.font.body, fontSize: 13, fontWeight: 700,
            cursor: 'pointer',
          }}>{n}</button>
        );
      })}
    </div>
  );
}

// Phone shell
function Phone({ mode = 'd', time, children, scroll = false }) {
  const T = UN[mode];
  return (
    <div style={{
      width: 390, height: 780,
      background: T.bg, color: T.text,
      fontFamily: UN.font.body,
      borderRadius: 44, overflow: 'hidden',
      position: 'relative',
      boxShadow: '0 30px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.04)',
      display: 'flex', flexDirection: 'column',
      WebkitFontSmoothing: 'antialiased',
    }}>
      {/* dynamic island */}
      <div style={{
        position: 'absolute', top: 9, left: '50%', transform: 'translateX(-50%)',
        width: 110, height: 32, borderRadius: 22, background: '#000', zIndex: 50,
      }} />
      <StatusBar mode={mode} time={time} />
      <div style={{ flex: 1, overflow: scroll ? 'auto' : 'hidden', position: 'relative' }}>
        {children}
      </div>
    </div>
  );
}

Object.assign(window, { StatusBar, HomeIndicator, TabBar, Phone });