function EditProfile({ nav }) {
  const { Toggle, Button, Avatar } = window.SpotureDesignSystem_f7ad96;
  const [name, setName] = React.useState('국밥러버92');
  const handle = 'gukbap_lover92';
  const [bio, setBio] = React.useState('국밥 한 그릇으로 하루를 시작하는 사람. 역삼·선릉 위주로 기록해요.');
  const [area, setArea] = React.useState('역삼동');
  const [photoSheet, setPhotoSheet] = React.useState(false);
  const [areaSheet, setAreaSheet] = React.useState(false);
  const [pubBadge, setPubBadge] = React.useState(true);
  const [pubArea, setPubArea] = React.useState(true);
  const [toast, setToast] = React.useState(false);
  const nameOk = name.trim().length > 0;
  const handleOk = true;
  const dirty = true;
  const Label = ({ children, hint }) => (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 9 }}>
      <span style={{ font: 'var(--text-body-strong)' }}>{children}</span>
      {hint && <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{hint}</span>}
    </div>
  );
  const field = (ok) => ({ width: '100%', boxSizing: 'border-box', padding: '15px 16px', font: 'var(--text-body)', color: 'var(--text-primary)', background: 'var(--surface-1)', border: '1px solid ' + (ok === false ? 'var(--text-danger)' : ok ? 'var(--text-accent)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', outline: 'none', fontFamily: 'var(--font-family)' });
  const ToggleRow = ({ icon, label, sub, on, onChange }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px' }}>
      <i className={'ti ti-' + icon} style={{ fontSize: 18, color: 'var(--text-secondary)', flexShrink: 0 }}></i>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>{label}</div>
        <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{sub}</div>
      </div>
      <Toggle on={on} onChange={onChange} />
    </div>
  );
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="프로필 편집" sub="이웃들에게 보이는 정보예요" onBack={() => nav('profile')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 120px', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
          <div onClick={() => setPhotoSheet(true)} style={{ position: 'relative', cursor: 'pointer' }}>
            <Avatar user="국밥러버92" size={88} />
            <div style={{ position: 'absolute', right: -2, bottom: -2, width: 30, height: 30, borderRadius: '50%', background: 'var(--bg-ink)', border: '3px solid var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-camera" style={{ fontSize: 14, color: '#fff' }}></i></div>
          </div>
          <span onClick={() => setPhotoSheet(true)} style={{ font: '600 13px/1 var(--font-family)', color: 'var(--text-accent)', cursor: 'pointer' }}>사진 변경</span>
        </div>
        <div>
          <Label hint={name.length + '/12'}>닉네임</Label>
          <input value={name} onChange={e => setName(e.target.value)} maxLength={12} placeholder="닉네임" style={field(nameOk)} />
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'block', marginTop: 6, paddingLeft: 4 }}>30일에 한 번 변경할 수 있어요</span>
        </div>
        <div>
          <Label>아이디</Label>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '15px 16px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)' }}>
            <span style={{ font: 'var(--text-body)', color: 'var(--text-muted)' }}>@</span>
            <span style={{ flex: 1, minWidth: 0, font: 'var(--text-body)', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{handle}</span>
            <i className="ti ti-lock" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
          </div>
          <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'block', marginTop: 6, paddingLeft: 4 }}>이웃이 나를 찾는 주소라 가입 후에는 바꿀 수 없어요</span>
        </div>
        <div>
          <Label hint={bio.length + '/60'}>소개</Label>
          <textarea value={bio} onChange={e => setBio(e.target.value.slice(0, 60))} rows={3} placeholder="어떤 맛집을 기록하는지 알려주세요" style={{ ...field(bio.length > 0), resize: 'none', lineHeight: 1.6 }}></textarea>
        </div>
        <div>
          <Label>활동 동네</Label>
          <div onClick={() => setAreaSheet(true)} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', padding: '15px 16px', cursor: 'pointer' }}>
            <i className="ti ti-map-pin" style={{ fontSize: 18, color: 'var(--text-accent)', flexShrink: 0 }}></i>
            <span style={{ flex: 1, font: 'var(--text-body)' }}>{area}</span>
            <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)' }}></i>
          </div>
        </div>
        <div>
          <Label>프로필에 표시</Label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', overflow: 'hidden' }}>
            <ToggleRow icon="award" label="배지 공개" sub="획득한 배지를 프로필에 보여줘요" on={pubBadge} onChange={() => setPubBadge(v => !v)} />
            <div style={{ height: 1, background: 'var(--border)' }}></div>
            <ToggleRow icon="map-2" label="활동 동네 공개" sub="동네 이름만 보이고 주소는 숨겨요" on={pubArea} onChange={() => setPubArea(v => !v)} />
          </div>
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 20px 20px', background: 'var(--bg-app)' }}>
        <Button variant="primary" disabled={!nameOk || !handleOk} onClick={() => { setToast(true); setTimeout(() => nav('profile'), 900); }}>{nameOk && handleOk ? '저장' : '입력을 확인해주세요'}</Button>
      </div>
      {toast && (
        <div style={{ position: 'absolute', left: 20, right: 20, bottom: 92, background: 'var(--bg-ink)', color: '#fff', borderRadius: 'var(--radius-tile)', padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-float)', zIndex: 30 }}>
          <i className="ti ti-circle-check" style={{ fontSize: 18 }}></i>
          <span style={{ font: '600 14px/1.4 var(--font-family)' }}>프로필을 저장했어요</span>
        </div>
      )}
      {photoSheet && <ProfilePhotoSheet onClose={() => setPhotoSheet(false)} />}
      {areaSheet && <EditAreaSheet current={area} onPick={a => { setArea(a); setAreaSheet(false); }} onClose={() => setAreaSheet(false)} />}
    </div>
  );
}
window.EditProfile = EditProfile;

function EditAreaSheet({ current, onPick, onClose }) {
  const { BottomSheet } = window.SpotureDesignSystem_f7ad96;
  const [q, setQ] = React.useState('');
  const frequent = [{ name: '역삼동', city: '서울 강남구', posts: 42 }, { name: '선릉·삼성', city: '서울 강남구', posts: 17 }, { name: '서초동', city: '서울 서초구', posts: 9 }];
  const all = [
    { name: '역삼1동', city: '서울 강남구' }, { name: '역삼2동', city: '서울 강남구' },
    { name: '역촌동', city: '서울 은평구' }, { name: '논현동', city: '서울 강남구' },
    { name: '연남동', city: '서울 마포구' }, { name: '연희동', city: '서울 서대문구' },
    { name: '을지로3가', city: '서울 중구' }, { name: '서초동', city: '서울 서초구' }
  ];
  const hits = q.trim() ? all.filter(a => a.name.includes(q.trim()) || a.city.includes(q.trim())) : [];
  const Row = ({ a, sub }) => (
    <div onClick={() => onPick(a.name)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: a.name === current ? 'var(--surface-2)' : 'transparent', border: '1px solid ' + (a.name === current ? 'var(--border-strong)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
      <i className="ti ti-map-pin" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>{a.name}</div>
        <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{sub}</div>
      </div>
      {a.name === current && <i className="ti ti-check" style={{ fontSize: 17, color: 'var(--text-accent)', flexShrink: 0 }}></i>}
    </div>
  );
  return (
    <BottomSheet title="활동 동네" onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}>
          <i className="ti ti-search" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="동·지역 이름 검색" style={{ flex: 1, minWidth: 0, border: 'none', background: 'transparent', outline: 'none', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }} />
          {q && <i className="ti ti-x" onClick={() => setQ('')} style={{ fontSize: 16, color: 'var(--text-muted)', cursor: 'pointer', flexShrink: 0 }}></i>}
        </div>
        <div onClick={() => onPick('역삼동')} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--bg-accent)', borderRadius: 'var(--radius-tile)', padding: '14px 16px', cursor: 'pointer' }}>
          <i className="ti ti-current-location" style={{ fontSize: 18, color: 'var(--text-accent)', flexShrink: 0 }}></i>
          <span style={{ font: '600 14px/1.4 var(--font-family)', color: 'var(--text-accent)' }}>현재 위치로 설정하기</span>
        </div>
        {q.trim() ? (
          hits.length ? (
            <React.Fragment>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', padding: '8px 4px 0' }}>검색 결과 {hits.length}개</span>
              {hits.map(a => <Row key={a.name} a={a} sub={a.city} />)}
            </React.Fragment>
          ) : (
            <div style={{ padding: '28px 0', textAlign: 'center' }}>
              <i className="ti ti-map-off" style={{ fontSize: 26, color: 'var(--text-muted)', display: 'block', marginBottom: 10 }}></i>
              <span style={{ font: 'var(--text-caption)', color: 'var(--text-muted)' }}>검색 결과가 없어요</span>
            </div>
          )
        ) : (
          <React.Fragment>
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', padding: '8px 4px 0' }}>기록이 많은 동네</span>
            {frequent.map(a => <Row key={a.name} a={a} sub={a.city + ' · 게시물 ' + a.posts + '개'} />)}
          </React.Fragment>
        )}
      </div>
    </BottomSheet>
  );
}
window.EditAreaSheet = EditAreaSheet;