// 돼지엄마 — Child profile bottom sheet (used by AI assistant)

function ChildProfileScreen({ onBack, onSave, t }) {
  const [grade, setGrade] = useState('고2');
  const [region, setRegion] = useState('강남구');
  const [gpa, setGpa] = useState('2.8');
  const [sat, setSat] = useState('1450');
  const [interests, setInterests] = useState(['Computer Science', 'Business']);
  const [goal, setGoal] = useState('미국 학부');
  const [budget, setBudget] = useState('연 5000만원~');

  const grades = ['중3', '고1', '고2', '고3', '재수'];
  const regions = ['강남구', '서초구', '송파구', '분당', '용산', '기타'];
  const goals = ['미국 학부', '미국 대학원', '국내 의대', '국내 명문대', 'IB·국제학교'];
  const budgets = ['연 2000만원 이하', '연 2000~5000만원', '연 5000만원~', '제한 없음'];
  const allInterests = ['Computer Science', 'Business', 'Engineering', 'Pre-med', 'Economics', 'Psychology', 'Liberal Arts', 'Art·Design'];

  const toggle = (s) => setInterests((arr) => arr.includes(s) ? arr.filter((x) => x !== s) : [...arr, s]);

  return (
    <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ height: 52, display: 'flex', alignItems: 'center', padding: '0 8px 0 16px', borderBottom: '1px solid var(--c-border)' }}>
        <button onClick={onBack} style={{ width: 36, height: 36, marginLeft: -8, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-primary)' }}>
          <Icon name="close" size={22} />
        </button>
        <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--c-text-primary)', flex: 1, textAlign: 'center', marginLeft: -36 }}>자녀 정보</div>
      </div>

      <div style={{ flex: 1, padding: 20, paddingBottom: 100, overflow: 'auto' }}>
        <div style={{
          padding: 14, borderRadius: 12, marginBottom: 22,
          background: 'rgba(44,91,255,.06)', border: '1px solid rgba(44,91,255,.18)',
          display: 'flex', alignItems: 'flex-start', gap: 10,
        }}>
          <Icon name="lock" size={18} color="var(--c-primary)" stroke={2.2} />
          <div style={{ flex: 1, fontSize: 12.5, lineHeight: 1.55, color: 'var(--c-text-primary)' }}>
            정보는 학부모님 디바이스에만 저장됩니다. AI 답변 정확도를 높이는 용도로만 활용되며, 익명 게시물에는 절대 노출되지 않아요.
          </div>
        </div>

        <Field label="학년">
          <Chips value={grade} options={grades} onChange={setGrade} />
        </Field>

        <Field label="거주 지역">
          <Chips value={region} options={regions} onChange={setRegion} />
        </Field>

        <Field label="목표 진로">
          <Chips value={goal} options={goals} onChange={setGoal} />
        </Field>

        <div style={{ display: 'flex', gap: 10, marginBottom: 20 }}>
          <div style={{ flex: 1 }}>
            <FieldLabel>내신 등급</FieldLabel>
            <input value={gpa} onChange={(e) => setGpa(e.target.value)} placeholder="2.8" style={inputStyle} />
          </div>
          <div style={{ flex: 1 }}>
            <FieldLabel>SAT 점수</FieldLabel>
            <input value={sat} onChange={(e) => setSat(e.target.value)} placeholder="1450" style={inputStyle} />
          </div>
        </div>

        <Field label="관심 전공 (복수 선택)">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {allInterests.map((s) => {
              const on = interests.includes(s);
              return (
                <button key={s} onClick={() => toggle(s)} style={{
                  padding: '8px 12px', borderRadius: 18, fontSize: 13, fontWeight: 600, cursor: 'pointer',
                  border: '1px solid ' + (on ? 'var(--c-primary)' : 'var(--c-border)'),
                  background: on ? 'rgba(44,91,255,.08)' : 'var(--c-bg-primary)',
                  color: on ? 'var(--c-primary)' : 'var(--c-text-sub)',
                }}>
                  {on && '✓ '}{s}
                </button>
              );
            })}
          </div>
        </Field>

        <Field label="예산 범위 (선택)">
          <Chips value={budget} options={budgets} onChange={setBudget} />
        </Field>
      </div>

      <div style={{ position: 'sticky', bottom: 0, padding: '12px 16px', borderTop: '1px solid var(--c-border)', background: 'var(--c-bg-primary)' }}>
        <Button kind="primary" full onClick={onSave}>저장하고 더 정확한 답변 받기</Button>
      </div>
    </div>
  );
}

const inputStyle = {
  width: '100%', height: 48, padding: '0 14px', borderRadius: 10,
  border: '1px solid var(--c-border)', background: 'var(--c-bg-primary)',
  fontSize: 16, fontWeight: 600, color: 'var(--c-text-primary)',
  outline: 'none', fontVariantNumeric: 'tabular-nums',
};

const FieldLabel = ({ children }) => (
  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 8, letterSpacing: '-0.01em' }}>{children}</div>
);

const Field = ({ label, children }) => (
  <div style={{ marginBottom: 20 }}>
    <FieldLabel>{label}</FieldLabel>
    {children}
  </div>
);

const Chips = ({ value, options, onChange }) => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
    {options.map((o) => {
      const on = value === o;
      return (
        <button key={o} onClick={() => onChange(o)} style={{
          padding: '8px 14px', borderRadius: 18, fontSize: 13, fontWeight: 600, cursor: 'pointer',
          border: '1px solid ' + (on ? 'var(--c-primary)' : 'var(--c-border)'),
          background: on ? 'var(--c-primary)' : 'var(--c-bg-primary)',
          color: on ? '#fff' : 'var(--c-text-sub)',
          transition: 'all .15s',
        }}>{o}</button>
      );
    })}
  </div>
);

Object.assign(window, { ChildProfileScreen });