// vita-notify2.jsx — Lock screen ritual, "Hoy con Vita" center, notification settings

// ── Lock screen: the morning ritual ─────────────────────────────
function LockScreen({ t, persona, profile, notifs, onUnlock, onAction }) {
  const n = (profile.nombre || '').split(' ')[0];
  const now = new Date();
  const hh = now.getHours();
  const greeting = hh < 12 ? 'Buenos días' : hh < 19 ? 'Buenas tardes' : 'Buenas noches';
  // show the morning cluster (first 3-4)
  const shown = notifs.slice(0, 4);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden',
      background: t.dark
        ? `radial-gradient(130% 90% at 50% 0%, ${persona.accentDeep}22 0%, #06122B 55%, #03060f 100%)`
        : `radial-gradient(130% 90% at 50% 0%, ${persona.accent}33 0%, #dce7f4 55%, #c2d2e6 100%)`,
      display: 'flex', flexDirection: 'column' }}>
      {/* clock */}
      <div style={{ textAlign: 'center', paddingTop: 70 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, color: t.dark ? 'rgba(255,255,255,0.7)' : 'rgba(10,26,51,0.6)', fontSize: 13, fontWeight: 600, marginBottom: 2 }}>
          {Icon.lock({ s: 13, c: t.dark ? 'rgba(255,255,255,0.7)' : 'rgba(10,26,51,0.6)' })} {now.toLocaleDateString('es-CO', { weekday: 'long', day: 'numeric', month: 'long' })}
        </div>
        <div style={{ fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 78, fontWeight: 700, color: t.dark ? '#fff' : '#0A1A33', lineHeight: 1, letterSpacing: -2 }}>
          {String(hh % 12 || 12).padStart(2, '0')}:{String(now.getMinutes()).padStart(2, '0')}
        </div>
      </div>

      {/* Vita presence greeting */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center', marginTop: 18, padding: '0 24px' }}>
        <VitaDot t={t} size={30} active />
        <span style={{ fontFamily: 'Instrument Serif, serif', fontSize: 19, color: t.dark ? 'rgba(255,255,255,0.92)' : '#0A1A33' }}>{greeting}, {n}</span>
      </div>

      {/* notification stack */}
      <div style={{ flex: 1, overflow: 'auto', padding: '20px 12px 12px', display: 'flex', flexDirection: 'column', gap: 9, justifyContent: 'flex-end' }}>
        <div style={{ fontSize: 11.5, fontWeight: 700, color: t.dark ? 'rgba(255,255,255,0.55)' : 'rgba(10,26,51,0.5)', textAlign: 'center', marginBottom: 2, letterSpacing: 0.4 }}>
          VITA TE ACOMPAÑA HOY
        </div>
        {shown.map((notif, i) => (
          <button key={notif.id} onClick={() => onUnlock(notif)} style={{
            textAlign: 'left', cursor: 'pointer', border: 'none', borderRadius: 20, padding: '12px 13px', width: '100%',
            background: t.dark ? 'rgba(20,34,62,0.7)' : 'rgba(255,255,255,0.82)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
            boxShadow: '0 8px 24px rgba(0,0,0,0.22)', display: 'flex', gap: 11, alignItems: 'flex-start',
            animation: `pushDrop .5s cubic-bezier(.2,.9,.3,1.1) ${i * 0.08}s both`,
            transform: i > 0 ? `scale(${1 - i * 0.012})` : 'none',
          }}>
            <div style={{ width: 34, height: 34, borderRadius: 9, flexShrink: 0, display: 'grid', placeItems: 'center', background: `linear-gradient(135deg, ${persona.accent}, ${persona.accentDeep})` }}>{Icon.pulse({ s: 18, c: '#fff', w: 2.4 })}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 1 }}>
                <span style={{ fontSize: 12, fontWeight: 800, color: t.text, letterSpacing: 0.2 }}>VITA</span>
                <span style={{ fontSize: 11, color: t.muted, fontWeight: 500 }}>{notif.hora}</span>
              </div>
              <div style={{ fontSize: 13.5, color: t.text, lineHeight: 1.38, fontWeight: 450 }}>{notif.mensaje}</div>
            </div>
          </button>
        ))}
      </div>

      {/* unlock hint */}
      <div style={{ textAlign: 'center', padding: '8px 0 34px' }}>
        <button onClick={() => onUnlock(null)} style={{ border: 'none', background: 'transparent', cursor: 'pointer', color: t.dark ? 'rgba(255,255,255,0.85)' : '#0A1A33', fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 14, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          Desliza para abrir Vita {Icon.chevron({ s: 16, c: t.dark ? 'rgba(255,255,255,0.85)' : '#0A1A33' })}
        </button>
      </div>
    </div>
  );
}

// ── "Hoy con Vita" — notification center ────────────────────────
function NotificationCenter({ t, persona, profile, notifs, onAction, onBack, onSettings, onSimulate, onLockPreview }) {
  const accent = persona.accent;
  const byBloque = { 'mañana': [], 'tarde': [], 'noche': [] };
  notifs.forEach(nf => { (byBloque[nf.bloque] || byBloque['mañana']).push(nf); });
  const bloqueMeta = { 'mañana': { label: 'Mañana', icon: 'sunrise' }, 'tarde': { label: 'Tarde', icon: 'sundial' }, 'noche': { label: 'Noche', icon: 'moon' } };

  return (
    <Stage t={t}>
      <ServiceHeader t={t} persona={persona} titulo="Hoy con Vita" sub="Cómo te acompaño durante el día" onBack={onBack}
        right={<IconBtn t={t} onClick={onSettings} title="Ajustes">{Icon.consent({ s: 18, c: t.textSoft })}</IconBtn>} />
      <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 30px' }}>
        {/* demo controls */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 18 }}>
          <button onClick={onSimulate} style={{ flex: 1, padding: '13px', borderRadius: 14, border: 'none', cursor: 'pointer', background: `linear-gradient(135deg, ${accent}, ${persona.accentDeep})`, color: t.onAccent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, boxShadow: `0 8px 20px ${hexA(accent, 0.35)}` }}>
            {Icon.bell({ s: 17, c: t.onAccent })} Vivir un día con Vita
          </button>
          <button onClick={onLockPreview} style={{ padding: '13px 16px', borderRadius: 14, cursor: 'pointer', border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.05)' : '#fff', color: t.textSoft, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 7 }}>
            {Icon.lock({ s: 16, c: t.textSoft })}
          </button>
        </div>

        {/* timeline by block */}
        {Object.keys(byBloque).map(bk => {
          const items = byBloque[bk];
          if (!items.length) return null;
          const bm = bloqueMeta[bk];
          return (
            <div key={bk} style={{ marginBottom: 20 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '0 2px 12px' }}>
                <span style={{ width: 26, height: 26, borderRadius: 8, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon[bm.icon]({ s: 15, c: accent })}</span>
                <span style={{ fontSize: 12.5, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: t.textSoft }}>{bm.label}</span>
              </div>
              <div style={{ position: 'relative', paddingLeft: 6 }}>
                {items.map((nf, i) => (
                  <div key={nf.id} style={{ display: 'flex', gap: 13, paddingBottom: i === items.length - 1 ? 0 : 14, position: 'relative' }}>
                    {i !== items.length - 1 && <div style={{ position: 'absolute', left: 16, top: 36, bottom: 0, width: 2, background: t.stroke }} />}
                    <div style={{ width: 34, height: 34, borderRadius: '50%', flexShrink: 0, display: 'grid', placeItems: 'center', background: hexA(nf.color || accent, 0.16), zIndex: 1, opacity: nf.done ? 0.6 : 1 }}>{Icon[nf.icon]({ s: 17, c: nf.color || accent })}</div>
                    <div style={{ flex: 1, minWidth: 0, padding: '12px 14px', borderRadius: 16, background: t.dark ? 'rgba(255,255,255,0.04)' : '#FFFFFF', border: `1px solid ${t.stroke}`, opacity: nf.done ? 0.66 : 1 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 3 }}>
                        <span style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: 0.3, color: nf.color || accent }}>{nf.hora}</span>
                        {nf.done && <span style={{ fontSize: 11, fontWeight: 700, color: t.green, display: 'flex', alignItems: 'center', gap: 3 }}>{Icon.check({ s: 12, c: t.green, w: 3 })} Hecho</span>}
                      </div>
                      <div style={{ fontSize: 14, color: t.text, lineHeight: 1.4, fontWeight: 450 }}>{nf.mensaje}</div>
                      {!nf.done && nf.actions && nf.actions.includes('done') && (
                        <button onClick={() => onAction('done', nf)} style={{ marginTop: 9, padding: '7px 13px', borderRadius: 10, border: `1px solid ${hexA(accent, 0.4)}`, cursor: 'pointer', background: hexA(accent, 0.1), color: accent, fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 12.5, fontWeight: 700 }}>{actionLabel('done', nf.tipo)}</button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </Stage>
  );
}

// ── Notification settings ───────────────────────────────────────
function NotifSettingsSheet({ t, persona, settings, onChange, onClose }) {
  const accent = persona.accent;
  const tipos = [
    { k: 'medicamento', label: 'Recordatorios de medicamentos', icon: 'pill' },
    { k: 'citas', label: 'Citas y controles', icon: 'calendar' },
    { k: 'habitos', label: 'Hábitos (agua, caminar)', icon: 'droplet' },
    { k: 'proactivo', label: 'Mensajes de Vita', icon: 'sparkle' },
    { k: 'resultados', label: 'Resultados listos', icon: 'lab' },
  ];
  return (
    <Sheet t={t} onClose={onClose} tall>
      <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 26, color: t.text, marginBottom: 4 }}>Cómo te acompaño</div>
      <p style={{ fontSize: 13.5, color: t.textSoft, margin: '0 0 18px', fontWeight: 450, lineHeight: 1.5 }}>Tú decides cómo y cuándo estoy presente. Siempre con respeto a tu espacio.</p>

      <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: t.muted, margin: '0 2px 10px' }}>Qué te recuerdo</div>
      <div style={{ borderRadius: 18, overflow: 'hidden', border: `1px solid ${t.stroke}`, marginBottom: 18 }}>
        {tipos.map((ti, i) => (
          <div key={ti.k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 14px', borderTop: i ? `1px solid ${t.stroke}` : 'none', background: t.dark ? 'rgba(255,255,255,0.03)' : '#fff' }}>
            <span style={{ width: 36, height: 36, flexShrink: 0, borderRadius: 11, display: 'grid', placeItems: 'center', background: hexA(accent, 0.13) }}>{Icon[ti.icon]({ s: 18, c: accent })}</span>
            <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: t.text }}>{ti.label}</span>
            <Toggle t={t} accent={accent} on={settings[ti.k] !== false} onClick={() => onChange(ti.k, settings[ti.k] === false)} />
          </div>
        ))}
      </div>

      {/* quiet hours */}
      <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase', color: t.muted, margin: '0 2px 10px' }}>No molestar</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px', borderRadius: 16, border: `1px solid ${t.stroke}`, background: t.dark ? 'rgba(255,255,255,0.03)' : '#fff' }}>
        <span style={{ width: 36, height: 36, flexShrink: 0, borderRadius: 11, display: 'grid', placeItems: 'center', background: hexA('#A98CD9', 0.16) }}>{Icon.moon({ s: 18, c: '#A98CD9' })}</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: t.text }}>Silencio nocturno</div>
          <div style={{ fontSize: 12.5, color: t.muted, fontWeight: 450 }}>No te escribo de 10 p.m. a 6 a.m.</div>
        </div>
        <Toggle t={t} accent={accent} on={settings.quiet !== false} onClick={() => onChange('quiet', settings.quiet === false)} />
      </div>
    </Sheet>
  );
}

function Toggle({ t, accent, on, onClick }) {
  return (
    <button onClick={onClick} style={{ width: 46, height: 28, borderRadius: 999, border: 'none', cursor: 'pointer', flexShrink: 0, padding: 3, background: on ? accent : (t.dark ? 'rgba(255,255,255,0.15)' : 'rgba(10,26,51,0.15)'), transition: 'background .2s', display: 'flex', justifyContent: on ? 'flex-end' : 'flex-start', WebkitTapHighlightColor: 'transparent' }}>
      <span style={{ width: 22, height: 22, borderRadius: '50%', background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.3)', transition: 'all .2s' }} />
    </button>
  );
}

Object.assign(window, { LockScreen, NotificationCenter, NotifSettingsSheet, Toggle });