// today/QuickAdd.jsx — small sheet (medium detent) for quick todo entry.
// Title field with keyboard, project picker, bucket picker (Today/This week/Later),
// due chip.

function QuickAdd({ dark = false }) {
  return (
    <IOSDevice width={402} height={874} dark={dark} keyboard>
      <div className="io" data-theme={dark ? 'dark' : 'light'} style={{ minHeight: '100%', position: 'relative' }}>
        {/* dimmed home behind */}
        <div style={{ opacity: 0.3, filter: 'blur(2px)', pointerEvents: 'none' }}>
          <BigTitle title="Today"
            leading={<div style={{ paddingLeft: 4, fontSize: 15 }}>Sunday · Mar 16</div>}
            trailing={<><PillBtn><Icon name="plus" size={18}/></PillBtn><Avatar/></>}/>
        </div>
        <div style={{
          position: 'absolute', inset: 0,
          background: dark ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.25)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
        }}/>

        {/* sheet at .medium detent */}
        <div className="sheet" style={{ top: 'auto', bottom: 290, paddingTop: 8 }}>
          <div className="grabber"/>
          <div className="between" style={{ padding: '0 20px 12px' }}>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 500 }}>Cancel</span>
            <span className="hd">New to-do</span>
            <span className="bd" style={{ color: 'var(--io-blue)', fontWeight: 600 }}>Add</span>
          </div>

          {/* title */}
          <div style={{ padding: '0 16px' }}>
            <div className="card" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 4 }}>
              <span style={{ fontSize: 17, letterSpacing: -0.4, color: 'var(--io-label)' }}>Send thesis section 4.2 to Anu</span>
              <span className="caret" style={{
                display: 'inline-block', width: 2, height: 22, background: 'var(--io-blue)',
                marginLeft: 1, animation: 'io-caret 1s steps(2) infinite', verticalAlign: -5,
              }}/>
            </div>
          </div>

          {/* row of choice chips */}
          <div style={{ padding: '12px 16px 0', display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'var(--io-bg-elev)', borderRadius: 999, padding: '6px 12px',
              fontSize: 13, fontWeight: 500,
            }}>
              <span style={{ width: 9, height: 9, borderRadius: 50, background: PROJECTS.thesis.color }}/>
              {PROJECTS.thesis.name}
              <span style={{ color: 'var(--io-label-tertiary)' }}><Icon name="chevron-down" size={12} stroke={2.4}/></span>
            </span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'var(--io-bg-elev)', borderRadius: 999, padding: '6px 12px',
              fontSize: 13, fontWeight: 500,
            }}>
              <Icon name="today" size={13} stroke={2.4} style={{ color: 'var(--io-red)' }}/>
              Today
              <span style={{ color: 'var(--io-label-tertiary)' }}><Icon name="chevron-down" size={12} stroke={2.4}/></span>
            </span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'var(--io-bg-elev)', borderRadius: 999, padding: '6px 12px',
              fontSize: 13, fontWeight: 500,
            }}>
              <Icon name="clock" size={13} stroke={2.4} style={{ color: 'var(--io-orange)' }}/>
              <span data-num>6:00 PM</span>
            </span>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              background: 'var(--io-fill-tertiary)', borderRadius: 999, padding: '6px 12px',
              fontSize: 13, fontWeight: 500, color: 'var(--io-label-secondary)',
            }}>
              <Icon name="alert" size={13} stroke={2.4}/>
              Priority
            </span>
          </div>

          {/* shortcuts row */}
          <div style={{ padding: '14px 24px 0', display: 'flex', alignItems: 'center', gap: 16, color: 'var(--io-label-secondary)' }}>
            <Icon name="today" size={20} stroke={2.2}/>
            <Icon name="clock" size={20} stroke={2.2}/>
            <Icon name="alert" size={20} stroke={2.2}/>
            <Icon name="share" size={20} stroke={2.2}/>
          </div>
        </div>
      </div>
    </IOSDevice>
  );
}
window.QuickAdd = QuickAdd;