/* ============================================================
   ROOY · 15a 基本信息编辑
   ───────────────────────────────────────────────────────────
   需求：编辑 onboarding 时填的画像 + 替换头像。从 15 设置 → 个人
   资料卡进入。

   结构：头像 (可点直接换 + 右下角相机角标) → 昵称 italic anchor →
   FieldRow 列表（性别 / 出生年 / 单双板 / 身高 / 体重 / 雪龄）。

   依赖 onboarding.jsx 的 form 组件（FieldRow / FieldValue /
   NameInput / GenderPills / PickerSheet）—— list 节奏跟 11 onboarding
   完全一致，让用户两处感觉是同一套界面。
   ============================================================ */

function EditProfileScreen({ onNav }) {
  const [name, setName] = React.useState('Yuki');
  const [gender, setGender] = React.useState('f');
  const [age, setAge] = React.useState(29);
  const [height, setHeight] = React.useState(168);
  const [weight, setWeight] = React.useState(54);
  const [openPicker, setOpenPicker] = React.useState(null);
  const [avatarUrl, setAvatarUrl] = React.useState(null);
  const fileRef = React.useRef(null);

  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    const url = URL.createObjectURL(f);
    setAvatarUrl(url);
  };

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: R.bg, color: R.ink, ...T.subhead,
      position: 'relative',
    }}>
      <StatusBar/>
      <NavBar
        onBack={() => onNav && onNav('settings')}
        title="个人资料"
      />

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 32 }}>

        {/* ── Avatar upload — center, large, ink-stroked ─── */}
        <div style={{
          padding: '14px 0 0',
          display: 'flex', flexDirection: 'column', alignItems: 'center',
        }}>
          <input
            ref={fileRef}
            type="file"
            accept="image/*"
            onChange={onFile}
            style={{ display: 'none' }}
            aria-label="选择头像"
          />
          <button onClick={() => fileRef.current && fileRef.current.click()}
            aria-label="更换头像"
            style={{
              position: 'relative',
              width: 96, height: 96, borderRadius: '50%',
              background: avatarUrl ? `url(${avatarUrl}) center / cover` : R.systemFill,
              border: 'none', cursor: 'pointer', padding: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: '0 2px 12px rgba(14,17,22,0.10)',
            }}>
            {!avatarUrl && (
              <span style={{
                fontFamily: '"SF Pro Display", system-ui',
                fontSize: 40, fontWeight: 800, color: R.ink2,
                lineHeight: 1,
              }}>{name.slice(0, 1).toUpperCase()}</span>
            )}
            <span style={{
              position: 'absolute', right: -2, bottom: -2,
              width: 30, height: 30, borderRadius: '50%',
              background: R.ink, color: '#fff',
              border: `2.5px solid ${R.bg}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M4 8 H8 L9.5 6 H14.5 L16 8 H20 a1 1 0 0 1 1 1 V18 a1 1 0 0 1 -1 1 H4 a1 1 0 0 1 -1 -1 V9 a1 1 0 0 1 1 -1 Z"
                  stroke="#fff" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>
                <circle cx="12" cy="13" r="3.4" stroke="#fff" strokeWidth="1.6" fill="none"/>
              </svg>
            </span>
          </button>
        </div>

        {/* HERO · 昵称 — italic anchor, same as 11.
            ⚠ 标签 "昵称" 用 body 17 ink (匹配下方 FieldRow label
            字号), 不再是 eyebrow 13. */}
        <div style={{ padding: '24px 22px 0' }}>
          <span style={{ ...T.body, color: R.ink }}>昵称</span>
          <div style={{
            marginTop: 8, paddingBottom: 12,
            borderBottom: `1.5px solid ${R.ink}`,
            display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12,
          }}>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              maxLength={20}
              style={{
                ...N.italic, fontSize: 40, color: R.ink,
                lineHeight: 1, letterSpacing: '-0.02em',
                background: 'transparent', border: 'none', outline: 'none',
                padding: 0, flex: 1, minWidth: 0,
                fontWeight: 900,
              }}
            />
            <svg width="18" height="18" viewBox="0 0 22 22" style={{ marginBottom: 4, flexShrink: 0, opacity: 0.5 }}>
              <path d="M14 3.5l4.5 4.5L8 18.5H3.5V14L14 3.5z"
                stroke={R.ink} strokeWidth="1.6" fill="none" strokeLinejoin="round"/>
            </svg>
          </div>
        </div>

        {/* ── 4 editorial fields (无 昵称 — 那行被 hero italic 替代) ── */}
        <div style={{ marginTop: 26, padding: '0 22px' }}>
          <FieldRow l="性别" first>
            <GenderPills value={gender} onChange={setGender}/>
          </FieldRow>
          <FieldRow l="年龄" onClick={() => setOpenPicker('age')}>
            <FieldValue v={`${age}`} u="岁"/>
          </FieldRow>
          <FieldRow l="身高" onClick={() => setOpenPicker('height')}>
            <FieldValue v={`${height}`} u="cm"/>
          </FieldRow>
          <FieldRow l="体重" onClick={() => setOpenPicker('weight')}>
            <FieldValue v={`${weight}`} u="kg"/>
          </FieldRow>
        </div>
      </div>

      {/* ── 保存 button — bottom, matches 11's "下一步" pattern ── */}
      <div style={{ padding: '0 16px 24px' }}>
        <PrimaryCTA onClick={() => onNav && onNav('settings')}>保存</PrimaryCTA>
      </div>
      <HomeIndicator/>

      {openPicker && (
        <PickerSheet
          title={
            openPicker === 'age' ? '年龄' :
            openPicker === 'height' ? '身高' : '体重'
          }
          value={
            openPicker === 'age' ? age :
            openPicker === 'height' ? height : weight
          }
          options={
            openPicker === 'age'
              ? Array.from({ length: 81 }, (_, i) => 10 + i)
              : openPicker === 'height'
              ? Array.from({ length: 81 }, (_, i) => 140 + i)
              : Array.from({ length: 91 }, (_, i) => 35 + i)
          }
          unit={
            openPicker === 'age' ? '岁' :
            openPicker === 'height' ? 'cm' : 'kg'
          }
          onChange={(v) => {
            if (openPicker === 'age') setAge(v);
            else if (openPicker === 'height') setHeight(v);
            else setWeight(v);
          }}
          onClose={() => setOpenPicker(null)}
        />
      )}
    </div>
  );
}

Object.assign(window, { EditProfileScreen });