// Onboarding — pick your Cardano stack for targeted alerts.
// Also defines the shared LangRow / CheckSquare primitives (window.EWShared).

function LangRow({ lang, setLang, style }) {
  const { LANGS } = window.EchoWatchI18n;
  return (
    <div style={{ display: 'flex', gap: 4, ...style }}>
      {LANGS.map((l) => (
        <button key={l.id} onClick={() => setLang(l.id)} aria-pressed={lang === l.id} style={{
          padding: '4px 8px', borderRadius: 6, cursor: 'pointer', background: 'transparent',
          border: '1px solid', borderColor: lang === l.id ? 'var(--text-primary)' : 'transparent',
          color: lang === l.id ? 'var(--text-primary)' : 'var(--text-secondary)',
          fontSize: 10, letterSpacing: '0.1em',
        }}>{l.label}</button>
      ))}
    </div>
  );
}

// Checkbox drawn from geometry only — no glyphs, no icons (Brief §4).
function CheckSquare({ on, size = 16 }) {
  return (
    <span aria-hidden="true" style={{
      width: size, height: size, borderRadius: 3, flex: 'none',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      border: '1px solid', borderColor: on ? 'var(--text-primary)' : 'var(--border-color)',
    }}>
      {on && <span style={{ width: size - 8, height: size - 8, background: 'var(--text-primary)' }} />}
    </span>
  );
}
window.EWShared = { LangRow, CheckSquare };

function Onboarding({ t, lang, setLang, onDone }) {
  const { STACK_ITEMS } = window.EchoWatchData;
  const [selected, setSelected] = React.useState([]);
  const toggle = (id) => setSelected((s) => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--bg-primary)', color: 'var(--text-primary)', padding: 24, position: 'relative' }}>
      <LangRow lang={lang} setLang={setLang} style={{ position: 'absolute', top: 16, right: 16 }} />

      <div className="fade-up" style={{ width: '100%', maxWidth: 520 }}>
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-primary)' }}>
            <window.EchoWatchLogo height={28} />
            <span style={{ fontSize: 9, fontWeight: 400, color: 'var(--text-secondary)', letterSpacing: '0.15em' }}>V0.2</span>
          </div>
          <p style={{ margin: '10px 0 0', fontSize: 10, letterSpacing: '0.1em', color: 'var(--text-secondary)' }}>{t('tagline')}</p>
        </div>

        <div className="ew-card" style={{ padding: 32, borderRadius: 20 }}>
          <span className="corner-tl" /><span className="corner-tr" />
          <span className="corner-bl" /><span className="corner-br" />

          <h1 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>{t('onboarding.title')}</h1>
          <p style={{ margin: '10px 0 24px', fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)' }}>
            {t('onboarding.desc')}
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 10 }}>
            {STACK_ITEMS.map((s) => {
              const on = selected.includes(s.id);
              return (
                <button key={s.id} onClick={() => toggle(s.id)} aria-pressed={on} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '12px 14px', textAlign: 'left',
                  borderRadius: 10, cursor: 'pointer',
                  border: '1px solid', borderColor: on ? 'var(--text-primary)' : 'var(--border-color)',
                  background: on ? 'var(--bg-secondary)' : 'transparent',
                  color: 'var(--text-primary)', fontSize: 12,
                }}>
                  <CheckSquare on={on} />
                  {s.name}
                </button>
              );
            })}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 28, gap: 16, flexWrap: 'wrap' }}>
            <button onClick={() => onDone([])} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: 0,
              fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'var(--text-secondary)', textDecoration: 'underline',
            }}>{t('onboarding.skip')}</button>
            <button onClick={() => onDone(selected)} disabled={selected.length === 0} style={{
              padding: '14px 28px', borderRadius: 9999, border: 'none', cursor: selected.length ? 'pointer' : 'not-allowed',
              background: selected.length ? 'var(--text-primary)' : 'var(--border-color)',
              color: selected.length ? 'var(--bg-primary)' : 'var(--text-secondary)',
              fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
            }}>{t('onboarding.continue')} →</button>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Onboarding = Onboarding;