// parent-shared.jsx — small shared bits used across parent screens

// Tiny Keel glyph — dashed ring + dot, sized for inline use (header, tab bar, watermarks)
function KeelGlyph({ size = 18, ringColor = CS.parentInk, dotColor = '#E0A05A',
  ringOpacity = 0.6, dotOpacity = 1 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block' }}>
      <circle cx="12" cy="12" r="9.5" stroke={ringColor} strokeWidth="1.2"
        strokeDasharray="2 2.5" fill="none" opacity={ringOpacity}/>
      <circle cx="12" cy="12" r="3" fill={dotColor} opacity={dotOpacity}/>
    </svg>
  );
}

function ParentBadge({ state = 'calm' }) {
  const m = {
    calm:   { dot: CS.parentCalm,  bg: 'rgba(127,169,143,0.18)', ink: CS.parentSageInk, label: 'CALM · STEADY' },
    yellow: { dot: CS.parentAmber, bg: 'rgba(244,184,96,0.22)',  ink: '#7A4F12', label: 'YELLOW · BUILDING' },
    red:    { dot: CS.parentRose,  bg: 'rgba(224,138,123,0.22)', ink: '#7A2818', label: 'RED · ESCALATING' },
  }[state];
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 10px', borderRadius: 999, background: m.bg, color: m.ink,
      fontSize: 11, fontWeight: 700, letterSpacing: 0.6 }}>
      <span style={{ width: 6, height: 6, borderRadius: 3, background: m.dot,
        boxShadow: `0 0 0 3px ${m.dot}33` }}/>
      {m.label}
    </div>
  );
}

function SignalCell({ label, value, unit, sub, color }) {
  return (
    <div style={{ padding: '12px 14px', borderRadius: 14, background: CS.parentCard,
      border: `0.5px solid ${CS.parentLine}` }}>
      <div style={{ fontSize: 10, color: CS.parentMuted, letterSpacing: 0.6,
        textTransform: 'uppercase', fontWeight: 700 }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
        <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.4,
          fontVariantNumeric: 'tabular-nums' }}>{value}</div>
        {unit && <div style={{ fontSize: 11, color: CS.parentMuted }}>{unit}</div>}
      </div>
      <div style={{ fontSize: 11, color: color || CS.parentMuted, marginTop: 3,
        fontWeight: 500 }}>{sub}</div>
    </div>
  );
}

function ParentTabBar({ active = 'today' }) {
  const items = [['today','Today'],['episodes','Episodes'],['trends','Trends'],['settings','Settings']];
  return (
    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0,
      background: 'rgba(250,250,247,0.92)', backdropFilter: 'blur(20px)',
      borderTop: `0.5px solid ${CS.parentLine}`,
      padding: '10px 24px 28px', display: 'flex', justifyContent: 'space-around' }}>
      {items.map(([k,l]) => (
        <div key={k} style={{ display: 'flex', flexDirection: 'column',
          alignItems: 'center', gap: 3 }}>
          {k === 'today' ? (
            <KeelGlyph size={22}
              ringColor={k === active ? CS.parentInk : 'rgba(26,31,46,0.4)'}
              dotColor="#E0A05A"
              ringOpacity={k === active ? 0.95 : 0.55}/>
          ) : (
            <div style={{ width: 20, height: 20, borderRadius: 5,
              background: k === active ? CS.parentInk : 'rgba(26,31,46,0.15)' }}/>
          )}
          <div style={{ fontSize: 10, fontWeight: 600,
            color: k === active ? CS.parentInk : CS.parentMuted }}>{l}</div>
        </div>
      ))}
    </div>
  );
}

function ParentLogoMark({ dark = false, ringColor, dotColor = '#E0A05A' }) {
  const ink = ringColor || (dark ? '#FFF4E6' : CS.parentInk);
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <KeelGlyph size={18} ringColor={ink} dotColor={dotColor} ringOpacity={0.7}/>
      <div style={{ fontFamily: FONT_DISPLAY, fontSize: 13, fontWeight: 600,
        letterSpacing: 2.5, color: ink }}>KEEL</div>
    </div>
  );
}

Object.assign(window, { KeelGlyph, ParentBadge, SignalCell, ParentTabBar, ParentLogoMark });