// Time/Date picker — appears when "Earlier" is tapped on any log modal.
// Shows iOS-style date column + time column. Sticky cancel/done at top.
const { Icon, Phone, HomeIndicator, ModalShell, Label } = window;

function TimeDateModal() {
  const T = UN.d;

  // 7-item visible wheel showing options around the selected
  const Wheel = ({ items, sel }) => {
    return (
      <div style={{
        flex: 1, position: 'relative', height: 200,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden',
      }}>
        {/* center selected band */}
        <div style={{
          position: 'absolute', left: 4, right: 4, top: '50%', height: 36,
          marginTop: -18, borderRadius: 9,
          background: T.surface2, border: `1px solid ${T.line2}`,
          pointerEvents: 'none',
        }}/>
        {/* top fade */}
        <div style={{
          position: 'absolute', left: 0, right: 0, top: 0, height: 70,
          background: `linear-gradient(to bottom, ${T.bg}, transparent)`, pointerEvents: 'none', zIndex: 2,
        }}/>
        {/* bottom fade */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0, height: 70,
          background: `linear-gradient(to top, ${T.bg}, transparent)`, pointerEvents: 'none', zIndex: 2,
        }}/>
        {/* items */}
        <div style={{ display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 1 }}>
          {items.map((it, i) => {
            const dist = Math.abs(i - sel);
            return (
              <div key={i} style={{
                height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: UN.font.num, fontVariantNumeric: 'tabular-nums',
                fontSize: dist === 0 ? 19 : 17,
                fontWeight: dist === 0 ? 700 : 500,
                color: dist === 0 ? T.text :
                       dist === 1 ? T.textDim :
                       T.textMute,
                letterSpacing: -0.2,
                opacity: dist === 0 ? 1 : Math.max(0.25, 1 - dist * 0.25),
                transform: `scale(${dist === 0 ? 1 : 0.92})`,
              }}>{it}</div>
            );
          })}
        </div>
      </div>
    );
  };

  // Build wheel data
  const dates = [
    'Mon · May 12',
    'Tue · May 13',
    'Wed · May 14',
    'Today · May 15',
    'Tomorrow · May 16',
    'Sat · May 17',
    'Sun · May 18',
  ];
  const hours = ['8', '9', '10', '11', '12', '1', '2'];
  const mins  = ['00', '05', '10', '15', '20', '25', '30'];
  const ampm  = ['—', '—', 'AM', 'PM', '—', '—', '—'];

  return (
    <ModalShell mode="d" title="Earlier dose" subtitle="When did this happen?" cta="Use this time">
      {/* Quick offsets */}
      <Label>Quick</Label>
      <div style={{ marginTop: 8, marginBottom: 16, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['5m ago','15m ago','30m ago','1h ago','2h ago','Custom'].map((q, i) => (
          <button key={i} style={{
            padding: '8px 12px', borderRadius: 99,
            background: i === 5 ? T.sageSoft : T.surface,
            border: `1.5px solid ${i === 5 ? T.sage : T.line2}`,
            color: i === 5 ? T.text : T.textDim,
            fontFamily: UN.font.body, fontSize: 12.5, fontWeight: i === 5 ? 700 : 500,
          }}>{q}</button>
        ))}
      </div>

      <Label>Date & time</Label>
      <div style={{
        marginTop: 8, marginBottom: 14,
        background: T.surface, border: `1px solid ${T.line2}`, borderRadius: 18,
        padding: '14px 6px',
        display: 'flex', gap: 4,
      }}>
        <Wheel items={dates} sel={3}/>
        <div style={{ width: 1, background: T.line }}/>
        <Wheel items={hours} sel={3}/>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 17, color: T.textDim, fontWeight: 700, padding: '0 4px' }}>:</div>
        <Wheel items={mins} sel={3}/>
        <Wheel items={ampm} sel={3}/>
      </div>

      {/* Summary line */}
      <div style={{
        padding: '12px 14px', borderRadius: 12,
        background: T.sageSoft, border: `1px solid ${T.sageEdge}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 10, background: T.sage,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <Icon name="clock" size={15} color="#0E1A14" strokeWidth={2.4}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14.5, color: T.text, fontWeight: 700, letterSpacing: -0.1 }}>
            Today · 11:15 PM
          </div>
          <div style={{ fontSize: 11, color: T.textDim, marginTop: 1 }}>
            27 minutes ago · Tylenol 2.5mL
          </div>
        </div>
      </div>
    </ModalShell>
  );
}

window.TimeDateModal = TimeDateModal;