// Push notifications (lock screen) + in-app top alert bar
const { Icon, Phone, HomeIndicator, TopBar, TabBar } = window;

// ═══════════════════════════════════════════════════════════
// PUSH NOTIFICATIONS — lock screen showing 3 types
// ═══════════════════════════════════════════════════════════
function PushNotifications() {
  const T = UN.d;
  return (
    <Phone mode="d" time="2:14">
      <div style={{
        height: '100%',
        background: `linear-gradient(180deg, #0E0B0A 0%, #1A1310 100%)`,
        position: 'relative', overflow: 'hidden',
      }}>
        {/* faux wallpaper grain */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `radial-gradient(circle at 25% 30%, rgba(143,181,162,0.07), transparent 50%), radial-gradient(circle at 75% 70%, rgba(211,168,154,0.05), transparent 50%)`,
        }}/>

        {/* lockscreen clock */}
        <div style={{ position: 'relative', textAlign: 'center', paddingTop: 56 }}>
          <div style={{ fontSize: 16, color: 'rgba(255,255,255,0.85)', fontWeight: 500, letterSpacing: 1 }}>
            Thursday, May 15
          </div>
          <div style={{
            fontFamily: '"SF Pro Display", -apple-system, system-ui',
            fontSize: 78, color: '#fff', fontWeight: 200,
            letterSpacing: -2.4, lineHeight: 0.95, marginTop: 0,
            fontVariantNumeric: 'tabular-nums',
          }}>2:14</div>
        </div>

        {/* Notifications stack */}
        <div style={{ padding: '40px 14px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {/* Red-flag — most urgent */}
          <PushCard
            tone="warn"
            iconBg="rgba(232,176,92,0.22)"
            iconColor={UN.d.sev.warm}
            icon="drop"
            title="UNPANIC"
            time="now"
            big="8h since Maeve's last wet diaper"
            sub="Pediatricians flag at this point. Tap to call Dr. Patel."
          />
          {/* Dose due */}
          <PushCard
            tone="trust"
            iconBg="rgba(112,144,201,0.22)"
            iconColor={UN.d.trust}
            icon="pill"
            title="UNPANIC"
            time="10m ago"
            big="Tylenol due now"
            sub="Maeve · 5mL · last dose 6h 02m ago"
          />
          {/* Caregiver activity */}
          <PushCard
            tone="sage"
            iconBg="rgba(143,181,162,0.18)"
            iconColor={UN.d.sage}
            icon="people"
            title="UNPANIC"
            time="23m ago"
            big="Grandma logged 2.5mL Tylenol"
            sub="for Maeve · stayed down ✓"
          />
          {/* Grouped */}
          <div style={{
            background: 'rgba(255,255,255,0.06)',
            backdropFilter: 'blur(30px) saturate(180%)',
            WebkitBackdropFilter: 'blur(30px) saturate(180%)',
            border: `1px solid rgba(255,255,255,0.08)`,
            borderRadius: 16, padding: '10px 14px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            opacity: 0.85,
          }}>
            <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.85)', fontWeight: 500 }}>
              <strong style={{ fontWeight: 700 }}>3 more from Unpanic earlier</strong>
            </div>
            <Icon name="chevDown" size={12} color="rgba(255,255,255,0.5)" strokeWidth={2}/>
          </div>
        </div>

        {/* Lock screen bottom — flashlight + camera */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 38,
          padding: '0 38px',
          display: 'flex', justifyContent: 'space-between',
        }}>
          {['mic','camera'].map((b,i) => (
            <div key={i} style={{
              width: 50, height: 50, borderRadius: 50,
              background: 'rgba(0,0,0,0.5)',
              border: '1px solid rgba(255,255,255,0.05)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={b} size={20} color="#fff" strokeWidth={1.8}/>
            </div>
          ))}
        </div>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

function PushCard({ tone, iconBg, iconColor, icon, title, time, big, sub }) {
  return (
    <div style={{
      background: 'rgba(35,33,31,0.7)',
      backdropFilter: 'blur(30px) saturate(180%)',
      WebkitBackdropFilter: 'blur(30px) saturate(180%)',
      border: `1px solid rgba(255,255,255,0.08)`,
      borderRadius: 18, padding: '12px 14px',
      display: 'flex', gap: 12,
    }}>
      <div style={{
        width: 34, height: 34, borderRadius: 8,
        background: iconBg,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name={icon} size={17} color={iconColor} strokeWidth={1.9}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 2,
        }}>
          <span style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.65)', letterSpacing: 0.4, fontWeight: 600 }}>
            {title}
          </span>
          <span style={{ fontSize: 10.5, color: 'rgba(255,255,255,0.45)' }}>{time}</span>
        </div>
        <div style={{ fontSize: 13.5, color: '#fff', fontWeight: 700, letterSpacing: -0.1, lineHeight: 1.25 }}>
          {big}
        </div>
        <div style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.7)', marginTop: 2, lineHeight: 1.35 }}>
          {sub}
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════
// IN-APP TOP ALERT BAR — sticky banner across the episode detail
// Shows live alert (red-flag, dose due, caregiver activity)
// ═══════════════════════════════════════════════════════════
function InAppAlerts() {
  const T = UN.d;
  return (
    <Phone mode="d" time="2:14">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
        <TopBar mode="d" kidName="Maeve" kidTone="#d3a89a" dot="warm" subtitle="DAY 3 · WATCH"/>

        {/* Stack of alert bars */}
        <div style={{ padding: '8px 16px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <AlertBar
            tone="warn"
            icon="drop"
            title="8h since last wet diaper"
            body="Pediatrician's threshold. Call Dr. Patel?"
            cta="Call"
          />
          <AlertBar
            tone="trust"
            icon="pill"
            title="Tylenol due now"
            body="5mL · last dose 6h 02m ago"
            cta="Log"
          />
          <AlertBar
            tone="sage"
            icon="people"
            title="Grandma is with Maeve"
            body="Logged 2.5mL Tylenol · 12m ago"
          />
        </div>

        {/* Faux episode below */}
        <div style={{ flex: 1, padding: '14px 22px 0', opacity: 0.6 }}>
          <div style={{ fontSize: 10.5, color: T.textMute, letterSpacing: 0.6, fontWeight: 700, textTransform: 'uppercase' }}>
            Now · 38.4°C ↓
          </div>
          <h1 style={{
            margin: '6px 0 0',
            fontFamily: UN.font.num, fontSize: 56, fontWeight: 500, letterSpacing: -2.5,
            color: T.text, lineHeight: 0.95, fontVariantNumeric: 'tabular-nums',
          }}>
            38.4<span style={{ fontSize: 20, color: T.textDim, fontWeight: 400, marginLeft: 4 }}>°C</span>
          </h1>
          <div style={{
            marginTop: 14, height: 150, borderRadius: 14,
            background: T.surface, border: `1px solid ${T.line}`,
          }}/>
        </div>

        <TabBar mode="d" active="home"/>
        <HomeIndicator mode="d"/>
      </div>
    </Phone>
  );
}

function AlertBar({ tone, icon, title, body, cta }) {
  const T = UN.d;
  const toneColors = {
    warn:  { c: UN.d.sev.warm,   bg: 'rgba(232,176,92,0.12)',  edge: 'rgba(232,176,92,0.32)' },
    trust: { c: UN.d.trust,      bg: UN.d.trustSoft,           edge: 'rgba(112,144,201,0.32)' },
    sage:  { c: UN.d.sage,       bg: UN.d.sageSoft,            edge: UN.d.sageEdge },
  }[tone];

  return (
    <div style={{
      background: toneColors.bg,
      border: `1px solid ${toneColors.edge}`,
      borderRadius: 14, padding: '10px 12px',
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 8,
        background: `${toneColors.c}28`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <Icon name={icon} size={14} color={toneColors.c} strokeWidth={2}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>{title}</div>
        <div style={{ fontSize: 10.5, color: T.textDim, marginTop: 1, lineHeight: 1.3 }}>{body}</div>
      </div>
      {cta && (
        <button style={{
          padding: '5px 10px', borderRadius: 8,
          background: toneColors.c, color: '#0E1A14', border: 'none',
          fontSize: 11, fontWeight: 700, letterSpacing: 0.3, flexShrink: 0,
        }}>{cta}</button>
      )}
    </div>
  );
}

Object.assign(window, { PushNotifications, InAppAlerts });