// TextSizePref — 設定 → 字級大小. Segmented control (style C, no slider) + live preview.
// Four steps: 小 / 標準 / 大 / 特大. The preview card resizes live as you tap.

const TEXT_SIZES = [
  { key: 'small',    label: '小',   scale: 0.9,  a: 13 },
  { key: 'standard', label: '標準', scale: 1.0,  a: 16 },
  { key: 'large',    label: '大',   scale: 1.15, a: 19 },
  { key: 'xlarge',   label: '特大', scale: 1.32, a: 22 },
];

function TextSizePref({ navigate, value = 'standard', onChange }) {
  const t = window.flutterTokens;
  const [sel, setSel] = React.useState(value);
  const sans = '"Plus Jakarta Sans", "Noto Sans TC", sans-serif';
  const scale = (TEXT_SIZES.find(s => s.key === sel) || TEXT_SIZES[1]).scale;

  const pick = (key) => { setSel(key); onChange && onChange(key); };

  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 60, background: t.surfaceAlt,
      display: 'flex', flexDirection: 'column',
      animation: 'pushIn 240ms cubic-bezier(.2,.7,.2,1)',
    }}>
      {/* App bar */}
      <div style={{
        padding: '60px 16px 12px', background: t.surface, flexShrink: 0,
        borderBottom: `1px solid ${t.hairline}`,
        display: 'flex', alignItems: 'center', gap: 4,
      }}>
        <button onClick={() => navigate({ screen: 'list' })} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          padding: 6, marginLeft: -6, color: t.ink, display: 'flex',
        }}>
          <window.Icon name="back" size={22}/>
        </button>
        <div style={{
          flex: 1, minWidth: 0, textAlign: 'center', fontFamily: sans,
          fontSize: 18, fontWeight: 700, color: t.ink, letterSpacing: -0.4,
        }}>字級大小</div>
        <div style={{ width: 34 }}/>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 40 }}>
        {/* Live preview — a sample alert card */}
        <div style={{
          margin: '18px 14px 0', background: t.surface,
          border: `1px solid ${t.hairline}`, borderRadius: 16,
          padding: '18px 18px 16px', transition: 'all 160ms ease',
        }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ fontFamily: sans, fontWeight: 700, letterSpacing: -0.3, fontSize: Math.round(19 * scale) }}>台積電 2330</span>
            <span style={{ fontFamily: sans, fontWeight: 700, color: 'oklch(0.58 0.13 150)', fontSize: Math.round(17 * scale) }}>+2.5%</span>
          </div>
          <div style={{ color: t.ink3, marginTop: 3, fontSize: Math.round(13.5 * scale) }}>TSMC · 半導體</div>
          <div style={{ color: t.ink2, marginTop: 12, lineHeight: 1.55, fontSize: Math.round(14.5 * scale) }}>股價已達到你設定的漲跌幅提醒門檻。</div>
        </div>

        <div style={{
          padding: '24px 22px 8px', fontFamily: sans,
          fontSize: 12, fontWeight: 700, color: t.ink3, letterSpacing: 1,
        }}>選擇字級</div>

        {/* Segmented control */}
        <div style={{ margin: '0 14px', display: 'flex', gap: 8 }}>
          {TEXT_SIZES.map(s => {
            const on = sel === s.key;
            return (
              <button
                key={s.key}
                onClick={() => pick(s.key)}
                style={{
                  flex: 1, padding: '13px 0 12px', borderRadius: 13, cursor: 'pointer',
                  fontFamily: sans, fontWeight: 600,
                  background: on ? t.ink : t.surface,
                  color: on ? '#fff' : t.ink2,
                  border: `1px solid ${on ? t.ink : t.hairline}`,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
                  transition: 'all 140ms ease',
                }}
              >
                <span style={{ fontSize: s.a, lineHeight: 1, fontWeight: 700 }}>A</span>
                <span style={{ fontSize: 13 }}>{s.label}</span>
              </button>
            );
          })}
        </div>

        <div style={{
          padding: '14px 22px 4px', fontSize: 12.5, lineHeight: 1.5,
          color: t.ink3, letterSpacing: -0.05,
        }}>調整後，App 內的文字大小會依所選字級顯示。</div>
      </div>
    </div>
  );
}

Object.assign(window, { TextSizePref, TEXT_SIZES });