// health/SkipTonight.jsx — confirmation action sheet for "Skip tonight"
// on the Bedtime detail. iOS action-sheet style: title + body, then a stack
// of grouped buttons. Three options + Cancel.

function SkipTonight({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      {/* dimmed bedtime detail behind */}
      <div className="bedtime-full" style={{ opacity: 0.55, filter: 'blur(1.5px)' }}/>
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'rgba(0,0,0,0.42)',
        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      }}/>

      {/* Action sheet */}
      <div style={{
        position: 'absolute', left: 8, right: 8, bottom: 12,
        zIndex: 10,
        display: 'flex', flexDirection: 'column', gap: 8,
      }}>
        {/* Top group: title + 3 destructive-ish options */}
        <div style={{
          background: dark ? 'rgba(44,44,46,0.92)' : 'rgba(245,245,247,0.92)',
          backdropFilter: 'blur(40px) saturate(180%)',
          WebkitBackdropFilter: 'blur(40px) saturate(180%)',
          borderRadius: 14, overflow: 'hidden',
        }}>
          <div style={{
            padding: '18px 24px 16px',
            textAlign: 'center',
            borderBottom: `0.5px solid ${dark ? 'rgba(84,84,88,0.65)' : 'rgba(60,60,67,0.12)'}`,
          }}>
            <div className="hd" style={{ fontSize: 13, fontWeight: 600 }}>Skip tonight's Smart Bedtime?</div>
            <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 6, lineHeight: 1.35 }}>
              No reminder will be sent. Your sleep debt will likely grow.
            </div>
          </div>
          {[
            { l: 'Skip tonight only',        sub: 'Resumes tomorrow', tone: 'normal' },
            { l: 'Skip until Sunday',         sub: '5 nights · weekend off', tone: 'normal' },
            { l: 'Stop using Smart Bedtime',  sub: 'You can re-enable in Settings', tone: 'destructive' },
          ].map((r, i, a) => (
            <div key={r.l} style={{
              padding: '12px 16px',
              textAlign: 'center',
              borderBottom: i < a.length - 1 ? `0.5px solid ${dark ? 'rgba(84,84,88,0.65)' : 'rgba(60,60,67,0.12)'}` : 'none',
            }}>
              <div style={{
                fontSize: 17, letterSpacing: -0.4, fontWeight: r.tone === 'destructive' ? 500 : 400,
                color: r.tone === 'destructive' ? 'var(--io-red)' : 'var(--io-blue)',
              }}>{r.l}</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 3 }}>{r.sub}</div>
            </div>
          ))}
        </div>

        {/* Cancel group */}
        <div style={{
          background: dark ? 'rgba(44,44,46,0.92)' : 'rgba(255,255,255,0.92)',
          backdropFilter: 'blur(40px) saturate(180%)',
          WebkitBackdropFilter: 'blur(40px) saturate(180%)',
          borderRadius: 14, overflow: 'hidden',
        }}>
          <div style={{
            padding: '15px 16px', textAlign: 'center',
            fontSize: 17, fontWeight: 600, letterSpacing: -0.4,
            color: 'var(--io-blue)',
          }}>Cancel</div>
        </div>

        {/* iOS home-indicator safe area */}
        <div style={{ height: 6 }}/>
      </div>
    </FrameScreen>
  );
}
window.SkipTonight = SkipTonight;