/* ============================================================
   screen_growth.jsx — Growth / Gap to target role
   ============================================================ */

function MicroStep({ step, lang, t, delay }) {
  const [state, setState] = useState(step.state);
  const done = state === 'done';
  const prog = state === 'progress';
  return (
    <button onClick={() => setState(done ? 'todo' : 'done')} style={{
      width: '100%', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12, padding: '14px',
      borderRadius: 'var(--r-lg)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)',
      animation: `fadeUp .4s var(--ease-out) ${delay}s both`,
    }}>
      <span style={{
        width: 26, height: 26, borderRadius: '50%', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
        border: done ? 'none' : '2px solid var(--border-2)', background: done ? 'var(--good)' : prog ? 'color-mix(in srgb,var(--amber) 18%,transparent)' : 'transparent',
        color: done ? '#fff' : 'var(--amber-deep)', transition: 'all .25s var(--spring)',
      }}>
        {done ? <Icon name="check" size={15} stroke={3} /> : prog ? <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--amber)' }} /> : null}
      </span>
      <span style={{ flex: 1, fontSize: 14, fontWeight: 600, color: done ? 'var(--text-3)' : 'var(--text)', textDecoration: done ? 'line-through' : 'none' }}>{tr(step, lang)}</span>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 700, color: 'var(--text-3)' }}><Icon name="clock" size={13} stroke={2} />{step.mins}{lang === 'ru' ? ' мин' : ' daq'}</span>
    </button>
  );
}

function GrowthScreen({ lang, theme, setLang, setTheme, t, go }) {
  const sevColor = { gap: 'var(--hot)', mid: 'var(--amber)' };
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
      <Header title={t.growthTitle} right={<QuickToggles lang={lang} setLang={setLang} theme={theme} setTheme={setTheme} />} t={t} />

      <div className="noscroll" style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 16px 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* goal + readiness */}
        <div style={{ padding: '20px', borderRadius: 'var(--r-xl)', background: 'radial-gradient(120% 100% at 0% 0%, #2a3a6e, #16203f 75%)', color: '#fff', boxShadow: 'var(--shadow-2)', position: 'relative', overflow: 'hidden', flexShrink: 0, animation: 'fadeUp .4s both' }}>
          <div style={{ position: 'absolute', bottom: -40, right: -20, width: 150, height: 150, borderRadius: '50%', background: 'radial-gradient(circle,var(--amber-glow),transparent 70%)' }} />
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 18 }}>
            <Ring value={GROWTH.readiness} size={84} stroke={8} color="var(--amber)" track="rgba(255,255,255,.15)">
              <span style={{ color: '#fff', fontSize: 22, fontWeight: 800 }}>{GROWTH.readiness}%</span>
            </Ring>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: 'rgba(255,255,255,.6)', textTransform: 'uppercase', letterSpacing: '.4px' }}>{t.readyFor}</div>
              <div style={{ fontSize: 19, fontWeight: 800, lineHeight: 1.15, margin: '4px 0 8px' }}>{tr(GROWTH.goal, lang)}</div>
              <button onClick={() => go('advisor')} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 12.5, fontWeight: 700, color: 'var(--amber-soft)' }}>
                {t.changeGoal} <Icon name="chevron" size={14} stroke={2.4} />
              </button>
            </div>
          </div>
        </div>

        {/* missing */}
        <div>
          <div style={{ fontSize: 15, fontWeight: 800, marginBottom: 10, padding: '0 2px' }}>{t.missing}</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {GROWTH.missing.map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px', borderRadius: 'var(--r-lg)', background: 'var(--surface)', border: '1px solid var(--border)', boxShadow: 'var(--shadow-1)', animation: `fadeUp .4s ${i*0.06}s both` }}>
                <span style={{ width: 10, height: 10, borderRadius: '50%', background: sevColor[m.sev], boxShadow: `0 0 0 4px color-mix(in srgb,${sevColor[m.sev]} 18%,transparent)`, flexShrink: 0 }} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 800 }}>{tr(m, lang)}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 1 }}>{tr(m.note, lang)}</div>
                </div>
                <span style={{ fontSize: 11, fontWeight: 800, color: sevColor[m.sev], padding: '4px 10px', borderRadius: 99, background: `color-mix(in srgb,${sevColor[m.sev]} 14%,transparent)` }}>{m.sev === 'gap' ? 'gap' : 'mid'}</span>
              </div>
            ))}
          </div>
        </div>

        {/* microsteps */}
        <div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, padding: '0 2px' }}>
            <span style={{ fontSize: 15, fontWeight: 800 }}>{t.microsteps}</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--amber-deep)' }}>Google Ads</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {GROWTH.steps.map((s, i) => <MicroStep key={i} step={s} lang={lang} t={t} delay={i * 0.06} />)}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GrowthScreen });