// LanguagePref — 設定 → 偏好語言。Pushed page with a grouped selectable list.
// Tap a language → checkmark moves. Mirrors the Settings card + row visual language.

const LANGS = [
  { code: 'system',  label: '跟隨系統' },
  { code: 'zh-Hant', label: '繁體中文' },
  { code: 'en',      label: 'English' },
];

function LanguagePref({ navigate, value = 'system', onChange }) {
  const t = window.flutterTokens;
  const [sel, setSel] = React.useState(value);

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

  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: '"Plus Jakarta Sans", "Noto Sans TC", sans-serif',
          fontSize: 18, fontWeight: 700, color: t.ink, letterSpacing: -0.4,
        }}>偏好語言</div>
        <div style={{ width: 34 }}/>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 40 }}>
        <style>{`
          .langcard > .langrow { border-bottom: 1px solid ${t.hairline}; }
          .langcard > .langrow:last-child { border-bottom: none; }
        `}</style>

        <div style={{
          padding: '20px 22px 10px',
          fontFamily: '"Plus Jakarta Sans", "Noto Sans TC", sans-serif',
          fontSize: 12, fontWeight: 700, color: t.ink3, letterSpacing: 1,
        }}>選擇語言</div>

        <div className="langcard" style={{
          margin: '0 14px',
          background: t.surface,
          border: `1px solid ${t.hairline}`,
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          {LANGS.map(l => {
            const active = sel === l.code;
            return (
              <div
                key={l.code}
                className="langrow"
                onClick={() => pick(l.code)}
                style={{
                  padding: '16px 18px 16px 20px',
                  display: 'flex', alignItems: 'center', gap: 14,
                  cursor: 'pointer',
                }}
              >
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 17, fontWeight: active ? 600 : 500, color: t.ink,
                    letterSpacing: -0.2, lineHeight: 1.3,
                  }}>{l.label}</div>
                </div>
                {active && (
                  <window.Icon name="check" size={22} color="var(--accent)" strokeWidth={2.4}/>
                )}
              </div>
            );
          })}
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { LanguagePref });