// today/TodayStates.jsx — Empty + Loading + Error for the Today tab.

function TodayEmpty({ dark = false }) {
  return (
    <FrameScreen dark={dark}>
      <BigTitle title="Today"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)', whiteSpace:'nowrap' }}>
          <span style={{ color: 'var(--io-label)' }}>Sunday</span> · Mar 16
        </div>}
        trailing={<><PillBtn><Icon name="plus" size={18} stroke={2.4}/></PillBtn><Avatar initial="L"/></>}/>

      <div style={{
        margin: '60px 28px 0', textAlign: 'center',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
      }}>
        <div style={{
          width: 76, height: 76, borderRadius: 18,
          background: 'var(--io-fill-tertiary)',
          color: 'var(--io-indigo)',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name="today" size={36} stroke={1.8}/>
        </div>
        <div className="t2" style={{ letterSpacing: -0.4 }}>Nothing on today.</div>
        <div className="bd" style={{ color: 'var(--io-label-secondary)', maxWidth: 280, lineHeight: 1.4 }}>
          Add a to-do, set a goal, or connect a calendar. Your day takes shape here once there's something on it.
        </div>
        <button style={{
          marginTop: 8, border: 'none', cursor: 'pointer',
          background: 'var(--io-blue)', color: '#fff',
          borderRadius: 12, padding: '13px 22px',
          fontSize: 17, fontWeight: 600, letterSpacing: -0.4,
        }}>Add a to-do</button>
        <button style={{
          border: 'none', cursor: 'pointer', background: 'transparent',
          color: 'var(--io-blue)', fontSize: 15, fontWeight: 500,
        }}>Connect a calendar</button>
      </div>

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

function TodayLoading({ dark = false }) {
  const Sk = ({ w = '100%', h = 12, r = 6, style }) => (<div className="sk" style={{ width: w, height: h, borderRadius: r, ...style }}/>);
  return (
    <FrameScreen dark={dark}>
      <BigTitle title="Today"
        leading={<div style={{ paddingLeft: 4, fontSize: 15, fontWeight: 600, color: 'var(--io-label-secondary)' }}>
          <span style={{ color: 'var(--io-label)' }}>Sunday</span> · Mar 16
        </div>}
        trailing={<><PillBtn><Icon name="plus" size={18}/></PillBtn>
          <div className="sk" style={{ width: 32, height: 32, borderRadius: 16 }}/></>}/>

      {/* greeting hero skeleton */}
      <div style={{ margin: '4px 16px 0', padding: '22px 22px', borderRadius: 22, background: 'var(--io-grad-bedtime-deep)' }}>
        <Sk w={120} h={9} style={{ background: 'rgba(255,255,255,0.25)' }}/>
        <Sk w={'80%'} h={26} style={{ background: 'rgba(255,255,255,0.25)', marginTop: 12, borderRadius: 6 }}/>
        <Sk w={'60%'} h={10} style={{ background: 'rgba(255,255,255,0.18)', marginTop: 10 }}/>
      </div>

      <div style={{ padding: '24px 20px 0' }}><Sk w={120} h={16}/></div>
      <div style={{ padding: '12px 16px 0', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {[1,2,3,4].map(i => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 4px 1fr', gap: 10, padding: '6px 0' }}>
            <Sk w={'80%'} h={14}/>
            <Sk w={4} h={28}/>
            <Sk w={'60%'} h={14}/>
          </div>
        ))}
      </div>
      <div style={{ padding: '24px 20px 0' }}><Sk w={80} h={16}/></div>
      <div style={{ padding: '12px 16px 0', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[1,2,3].map(i => (
          <div key={i} className="card" style={{ padding: 12, display: 'flex', gap: 10, alignItems: 'center' }}>
            <Sk w={22} h={22} r={11}/>
            <Sk w={'70%'} h={12}/>
          </div>
        ))}
      </div>

      <TabBar active="today"/>
    </FrameScreen>
  );
}
window.TodayLoading = TodayLoading;