// settings/Notifications.jsx — per-channel notification controls.
// Master allow toggle, then six channels with default-timing pickers,
// delivery (immediate vs. scheduled summary), quiet hours, sound + haptic.

function SettingsNotifications({ dark = false }) {
  const Toggle = ({ on = true }) => (
    <div style={{
      width: 51, height: 31, borderRadius: 999,
      background: on ? 'var(--io-green)' : (dark ? '#39393D' : '#E9E9EA'),
      position: 'relative', flexShrink: 0,
    }}>
      <div style={{ position: 'absolute', top: 2, left: on ? 22 : 2, width: 27, height: 27, borderRadius: '50%', background: '#fff', boxShadow: '0 2px 4px rgba(0,0,0,0.2)', transition: 'left 0.15s ease' }}/>
    </div>
  );

  return (
    <FrameScreen dark={dark}>
      <InlineNav back="Settings" title="Notifications"/>

      {/* Hero status */}
      <div style={{ padding: '8px 16px 0' }}>
        <div className="card padded" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 12,
            background: 'rgba(255,59,48,0.12)', color: 'var(--io-red)',
            display: 'grid', placeItems: 'center', flexShrink: 0,
          }}>
            <Icon name="alert" size={20} stroke={2.4}/>
          </div>
          <div style={{ flex: 1 }}>
            <div className="hd" style={{ fontSize: 15 }}>Allow notifications</div>
            <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>System permission granted</div>
          </div>
          <Toggle on/>
        </div>
      </div>

      {/* Channels */}
      <SectionHead label="Channels"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          {[
            { ic: 'today',    c: 'var(--io-red)',     t: 'Event alerts',         s: '15 min before · per-event override', on: true },
            { ic: 'moon',     c: 'var(--io-indigo)',  t: 'Wind-down reminder',   s: '60 min before bedtime',              on: true },
            { ic: 'bed',      c: 'var(--io-purple)',  t: 'Bedtime nudge',        s: 'At Smart Bedtime time',              on: true },
            { ic: 'heart',    c: 'var(--io-orange)',  t: 'High sleep debt',      s: 'When debt exceeds 8h',               on: true },
            { ic: 'sparkles', c: 'var(--io-yellow)',  t: 'Goal milestone',       s: 'When you tick a milestone',          on: false },
            { ic: 'share',    c: 'var(--io-blue)',    t: 'Share link viewed',    s: 'Per link · off by default',          on: false },
            { ic: 'refresh',  c: 'var(--io-label-tertiary)', t: 'Sync failures', s: 'After 3 consecutive failures',       on: true },
          ].map((r, i) => (
            <div key={r.t} className="lrow">
              <div className="li-ic" style={{ background: r.c }}><Icon name={r.ic} size={16} stroke={2.2}/></div>
              <div style={{ flex: 1 }}>
                <div className="li-ti" style={{ fontSize: 16 }}>{r.t}</div>
                <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>{r.s}</div>
              </div>
              <Toggle on={r.on}/>
            </div>
          ))}
        </div>
      </div>

      {/* Delivery */}
      <SectionHead label="Delivery"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <div className="lrow">
            <div className="li-ti">Style</div>
            <div className="li-de">Immediate</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div style={{ flex: 1 }}>
              <div className="li-ti">Scheduled summary</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>Bundle non-urgent notifications</div>
            </div>
            <Toggle on={false}/>
          </div>
          <div className="lrow">
            <div className="li-ti">Summary times</div>
            <div className="li-de">8:00 AM · 6:30 PM</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
        </div>
      </div>

      {/* Quiet hours */}
      <SectionHead label="Quiet hours"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <div className="lrow">
            <div className="li-ti">Mute non-urgent</div>
            <Toggle on/>
          </div>
          <div className="lrow">
            <div className="li-ti">From</div>
            <span style={{
              background: 'rgba(0,122,255,0.12)', color: 'var(--io-blue)',
              borderRadius: 8, padding: '4px 10px',
              fontSize: 16, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.2,
            }}>10:30 PM</span>
          </div>
          <div className="lrow">
            <div className="li-ti">To</div>
            <span style={{
              background: 'rgba(0,122,255,0.12)', color: 'var(--io-blue)',
              borderRadius: 8, padding: '4px 10px',
              fontSize: 16, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.2,
            }}>6:15 AM</span>
          </div>
          <div className="lrow">
            <div style={{ flex: 1 }}>
              <div className="li-ti">Event alerts override</div>
              <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>Critical events still ring</div>
            </div>
            <Toggle on/>
          </div>
        </div>
      </div>

      {/* Sound + haptic */}
      <SectionHead label="Sound & haptics"/>
      <div style={{ padding: '0 16px' }}>
        <div className="card" style={{ padding: 4 }}>
          <div className="lrow">
            <div className="li-ti">Default tone</div>
            <div className="li-de">Slow rise</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div className="li-ti">Bedtime tone</div>
            <div className="li-de">Constellation</div>
            <div className="li-ch"><Icon name="chevron-right" size={16} stroke={2.4}/></div>
          </div>
          <div className="lrow">
            <div className="li-ti">Haptics</div>
            <Toggle on/>
          </div>
        </div>
      </div>

      {/* Lock screen preview */}
      <SectionHead label="Preview"/>
      <div style={{ padding: '0 16px 0' }}>
        <div className="card padded" style={{ padding: 14 }}>
          <div className="cp" style={{ color: 'var(--io-label-secondary)', marginBottom: 8 }}>How a notification looks on the lock screen</div>
          <div style={{
            background: dark ? 'rgba(58,58,60,0.85)' : 'rgba(247,247,247,0.95)',
            backdropFilter: 'blur(20px)',
            borderRadius: 18,
            padding: '12px 14px',
            display: 'flex', alignItems: 'flex-start', gap: 10,
            boxShadow: dark ? '0 2px 8px rgba(0,0,0,0.4)' : '0 2px 12px rgba(0,0,0,0.08)',
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: 7,
              background: 'linear-gradient(135deg,#5E5CE6,#AF52DE)',
              color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0,
            }}>
              <Icon name="moon" size={16} stroke={2.4}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="between" style={{ alignItems: 'baseline' }}>
                <span className="cp" style={{ fontWeight: 600, color: 'var(--io-label)' }}>ORDENTUS</span>
                <span className="cp" style={{ color: 'var(--io-label-tertiary)' }}>now</span>
              </div>
              <div className="ca" style={{ marginTop: 2, fontWeight: 600 }}>Wind down in 60 minutes</div>
              <div className="fn" style={{ color: 'var(--io-label-secondary)', marginTop: 2 }}>Bedtime tonight is 10:30 PM. First event 7:15 AM.</div>
            </div>
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 24px 0' }}>
        <div className="fn" style={{ color: 'var(--io-label-tertiary)', lineHeight: 1.4 }}>
          Per-event alerts can be overridden in the event editor. Channels can be disabled here without revoking system permission.
        </div>
      </div>

      <div className="scroll-pad"/>
      <TabBar active="settings"/>
    </FrameScreen>
  );
}
window.SettingsNotifications = SettingsNotifications;