// health/WakeSchedule.jsx
// Bottom sheet (medium detent) over the Sleep detail. Per-day wake editor,
// Mon → Sun, with time wheel preview for the focused row (Thursday).

function WakeSchedule({ dark = false }) {
  const rows = [
    { d: 'Mon', t: '6:15 AM', goal: '8h 00m', enabled: true },
    { d: 'Tue', t: '6:15 AM', goal: '8h 00m', enabled: true },
    { d: 'Wed', t: '6:15 AM', goal: '8h 00m', enabled: true },
    { d: 'Thu', t: '5:45 AM', goal: '8h 30m', enabled: true, focus: true },
    { d: 'Fri', t: '6:15 AM', goal: '8h 00m', enabled: true },
    { d: 'Sat', t: '8:30 AM', goal: '9h 00m', enabled: true },
    { d: 'Sun', t: '8:30 AM', goal: '9h 00m', enabled: false },
  ];

  const Wheel = ({ values, active }) => {
    const visible = 5;
    const start = Math.max(0, active - 2);
    const slice = values.slice(start, start + visible);
    return (
      <div style={{
        position: 'relative', height: 132, overflow: 'hidden',
        maskImage: 'linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent)',
        WebkitMaskImage: 'linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent)',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', textAlign: 'center' }}>
          {slice.map((v, i) => {
            const isActive = (start + i) === active;
            const dist = Math.abs((start + i) - active);
            return (
              <div key={i} style={{
                fontVariantNumeric: 'tabular-nums',
                fontSize: 22, fontWeight: isActive ? 500 : 400,
                letterSpacing: -0.4,
                color: isActive ? 'var(--io-label)' : 'var(--io-label-tertiary)',
                opacity: 1 - dist * 0.25,
                lineHeight: '28px',
              }}>{v}</div>
            );
          })}
        </div>
        {/* center selection band */}
        <div style={{
          position: 'absolute', left: 0, right: 0, top: '50%',
          transform: 'translateY(-50%)', height: 30,
          background: 'var(--io-fill-quaternary)', borderRadius: 8,
          pointerEvents: 'none',
        }}/>
      </div>
    );
  };

  const hours = ['3', '4', '5', '6', '7', '8'];
  const minutes = ['15', '30', '45', '00', '15', '30'];
  const ampms   = ['', '', 'AM', 'PM', '', ''];

  return (
    <FrameScreen dark={dark}>
      {/* Dimmed parent screen — Sleep detail mini */}
      <div style={{ opacity: 0.5, filter: 'blur(0.5px)' }}>
        <InlineNav back="Health" title="Sleep"/>
        <div style={{ padding: '4px 20px 0' }}>
          <div className="eyebrow" style={{ color: 'var(--io-sleep)' }}>Last night</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}>
            <span className="m-hero" data-num>6</span><span className="m-unit" style={{ fontSize: 28 }}>h</span>
            <span className="m-hero" data-num>12</span><span className="m-unit" style={{ fontSize: 28 }}>m</span>
          </div>
        </div>
        <div className="m-row" style={{ marginTop: 200 }}>
          <div className="tile"/>
          <div className="tile"/>
        </div>
      </div>

      {/* Scrim */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(0,0,0,0.36)',
        backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
        zIndex: 35,
      }}/>

      <div className="sheet" style={{ paddingTop: 8 }}>
        <div className="grabber"/>
        <div className="between" style={{ padding: '4px 20px 12px' }}>
          <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Cancel</span>
          <span className="hd">Wake schedule</span>
          <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 600 }}>Done</span>
        </div>

        {/* Time wheel for focused day */}
        <div style={{ padding: '0 16px' }}>
          <div className="card padded" style={{ padding: '14px 16px 16px' }}>
            <div className="between" style={{ marginBottom: 10 }}>
              <div className="hd" style={{ fontSize: 15 }}>Thursday wake</div>
              <Pill tone="info">Editing</Pill>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
              <Wheel values={hours} active={2}/>
              <Wheel values={minutes} active={3}/>
              <Wheel values={ampms} active={2}/>
            </div>
            <div className="between" style={{ marginTop: 8 }}>
              <div className="fn" style={{ color: 'var(--io-label-secondary)' }}>Sleep goal</div>
              <div className="row" style={{ gap: 6 }}>
                <Icon name="moon" size={14} stroke={2.2}/>
                <span className="ca" data-num style={{ fontWeight: 500 }}>8h 30m</span>
                <Icon name="chevron-right" size={14} stroke={2.4}/>
              </div>
            </div>
          </div>
        </div>

        {/* Day rows */}
        <div style={{ padding: '12px 16px 0' }}>
          <div className="card" style={{ padding: 4 }}>
            {rows.map((r, i) => (
              <div key={r.d} className="lrow" style={{ paddingTop: 12, paddingBottom: 12 }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: r.focus ? 'var(--io-indigo)' : 'var(--io-fill-tertiary)',
                  color: r.focus ? '#fff' : 'var(--io-label)',
                  display: 'grid', placeItems: 'center',
                  fontSize: 12, fontWeight: 600,
                }}>{r.d.slice(0, 1)}</div>
                <div className="li-ti" style={{ fontSize: 16 }}>
                  {r.d === 'Mon' ? 'Monday' : r.d === 'Tue' ? 'Tuesday' : r.d === 'Wed' ? 'Wednesday' : r.d === 'Thu' ? 'Thursday' : r.d === 'Fri' ? 'Friday' : r.d === 'Sat' ? 'Saturday' : 'Sunday'}
                  <div className="cp" style={{ color: 'var(--io-label-secondary)', marginTop: 2, fontWeight: 400 }}>{r.enabled ? `Goal · ${r.goal}` : 'Off — no alarm'}</div>
                </div>
                <div className="li-de" style={{ color: r.enabled ? (r.focus ? 'var(--io-indigo)' : 'var(--io-label)') : 'var(--io-label-tertiary)', fontWeight: r.focus ? 600 : 400 }} data-num>
                  {r.t}
                </div>
                {/* iOS toggle */}
                <div style={{
                  width: 51, height: 31, borderRadius: 999,
                  background: r.enabled ? 'var(--io-green)' : (dark ? '#39393D' : '#E9E9EA'),
                  position: 'relative', flexShrink: 0,
                }}>
                  <div style={{
                    position: 'absolute', top: 2, left: r.enabled ? 22 : 2,
                    width: 27, height: 27, borderRadius: '50%', background: '#fff',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.2), 0 0 0 0.5px rgba(0,0,0,0.04)',
                    transition: 'left 0.15s ease',
                  }}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </FrameScreen>
  );
}
window.WakeSchedule = WakeSchedule;