// Development.jsx
(function () {
  const { useState, useRef, useEffect } = React;
  const { t, WEEKS, getWeekData, formatLength, formatWeight } = window.AliaData;

  function DevelopmentScreen({ currentWeek, lang }) {
    const [selected, setSelected] = useState(Math.max(4, Math.min(40, currentWeek || 20)));
    const [tab, setTab] = useState('baby');
    const scrollRef = useRef(null);

    useEffect(() => {
      if (!scrollRef.current) return;
      const idx = WEEKS.findIndex(w => w.week === selected);
      const btn = scrollRef.current.children[idx];
      if (btn) btn.scrollIntoView({ inline:'center', behavior:'smooth', block:'nearest' });
    }, [selected]);

    const wd = getWeekData(selected);
    const isCurrentWeek = selected === currentWeek;

    const s = {
      wrap: { height:'100%', display:'flex', flexDirection:'column', overflow:'hidden' },
      pickerWrap: { flexShrink:0, paddingTop:12 },
      pickerScroll: { display:'flex', overflowX:'auto', paddingLeft:16, paddingRight:16, gap:6,
                      scrollbarWidth:'none', WebkitOverflowScrolling:'touch', paddingBottom:12 },
      weekBtn: (active, isCurrent) => ({
        flexShrink:0, width:44, height:44, borderRadius:22, border:'2px solid',
        borderColor: active ? 'var(--primary)' : isCurrent ? 'var(--primary-light)' : 'transparent',
        background: active ? 'var(--primary)' : isCurrent ? 'var(--primary-light)' : 'var(--bg-card)',
        color: active ? 'white' : isCurrent ? 'var(--primary)' : 'var(--text-2)',
        fontSize:13, fontWeight:700, cursor:'pointer', fontFamily:'Nunito,sans-serif',
        transition:'all .2s', display:'flex', alignItems:'center', justifyContent:'center',
        WebkitTapHighlightColor:'transparent',
      }),
      content: { flex:1, overflowY:'auto', WebkitOverflowScrolling:'touch',
                 padding:'0 16px', paddingBottom:'calc(16px + env(safe-area-inset-bottom))' },
      card: { background:'var(--bg-card)', borderRadius:24, padding:'22px 20px',
              boxShadow:'0 2px 16px var(--shadow)', marginBottom:14 },
      emojiRow: { display:'flex', alignItems:'center', gap:16, marginBottom:16 },
      bigEmoji: { fontSize:56, lineHeight:1 },
      emojiInfo: { display:'flex', flexDirection:'column', gap:4 },
      weekTitle: { fontSize:22, fontWeight:800, color:'var(--text)' },
      sizeName: { fontSize:16, fontWeight:600, color:'var(--primary)' },
      statsRow: { display:'flex', gap:10 },
      statChip: { flex:1, background:'var(--bg)', borderRadius:14, padding:'10px 12px',
                  display:'flex', flexDirection:'column', alignItems:'center', gap:2 },
      statVal: { fontSize:17, fontWeight:800, color:'var(--text)' },
      statLabel: { fontSize:11, fontWeight:600, color:'var(--text-2)', textTransform:'uppercase', letterSpacing:'0.6px' },
      currentBadge: { display:'inline-block', background:'var(--primary)', color:'white',
                      borderRadius:10, padding:'3px 10px', fontSize:11, fontWeight:700,
                      marginBottom:12, letterSpacing:'0.4px' },
      tabRow: { display:'flex', gap:4, marginBottom:16, background:'var(--bg)', borderRadius:14, padding:4 },
      tabBtn: (active) => ({
        flex:1, padding:'9px 0', borderRadius:11, border:'none',
        background: active ? 'var(--bg-card)' : 'transparent',
        color: active ? 'var(--primary)' : 'var(--text-2)',
        fontSize:14, fontWeight:700, cursor:'pointer', fontFamily:'Nunito,sans-serif',
        boxShadow: active ? '0 1px 6px var(--shadow)' : 'none',
        transition:'all .2s',
      }),
      descText: { fontSize:16, color:'var(--text)', lineHeight:1.65, fontWeight:500 },
    };

    return (
      <div style={s.wrap}>
        {/* Week picker */}
        <div style={s.pickerWrap}>
          <div style={s.pickerScroll} ref={scrollRef}>
            {WEEKS.map(w => (
              <button key={w.week}
                style={s.weekBtn(w.week === selected, w.week === currentWeek)}
                onClick={() => setSelected(w.week)}>
                {w.week}
              </button>
            ))}
          </div>
        </div>

        {/* Content */}
        <div style={s.content}>
          <div style={s.card}>
            {isCurrentWeek && (
              <div style={s.currentBadge}>{lang === 'ru' ? '· Ваша неделя ·' : '· Your week ·'}</div>
            )}
            <div style={s.emojiRow}>
              <span style={s.bigEmoji}>{wd.emoji}</span>
              <div style={s.emojiInfo}>
                <div style={s.weekTitle}>{t('devTitle', lang).split(' ')[0]} {selected}</div>
                <div style={s.sizeName}>{lang === 'ru' ? wd.sizeRu : wd.sizeEn}</div>
              </div>
            </div>
            <div style={s.statsRow}>
              <div style={s.statChip}>
                <span style={s.statVal}>{formatLength(wd.lengthMm, lang)}</span>
                <span style={s.statLabel}>{t('labelLength', lang)}</span>
              </div>
              <div style={s.statChip}>
                <span style={s.statVal}>{formatWeight(wd.weightG, lang)}</span>
                <span style={s.statLabel}>{t('labelWeight', lang)}</span>
              </div>
            </div>
          </div>

          <div style={s.card}>
            <div style={s.tabRow}>
              <button style={s.tabBtn(tab==='baby')} onClick={() => setTab('baby')}>
                👶 {t('tabBaby', lang)}
              </button>
              <button style={s.tabBtn(tab==='mom')} onClick={() => setTab('mom')}>
                🌸 {t('tabMom', lang)}
              </button>
            </div>
            <p style={s.descText}>
              {tab === 'baby'
                ? (lang === 'ru' ? wd.babyRu : wd.babyEn)
                : (lang === 'ru' ? wd.momRu  : wd.momEn)}
            </p>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { DevelopmentScreen });
})();