// 돼지엄마 — My Page screen

function MyPageScreen({ onBack, onChild, onConsult, t }) {
  const m = D.myPage;
  const tlInfo = [
    { label: '새내기', color: 'var(--c-text-tertiary)' },
    { label: '검증 학부모', color: 'var(--c-verified)' },
    { label: '활동 학부모', color: 'var(--c-primary)' },
    { label: '선배 학부모', color: 'var(--c-senior)' },
    { label: '명예 학부모', color: '#A77A00' },
  ][m.trustLevel];

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar showBack onBack={onBack} title="마이" showSearch={false} showBell={false} />

      {/* Profile header */}
      <div style={{ background: 'var(--c-bg-primary)', padding: '20px', display: 'flex', alignItems: 'center', gap: 14 }}>
        <Avatar initial={m.avatar} bg={m.avatarBg} size={64} ring={tlInfo.color} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 17, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.02em' }}>{m.nickname}</span>
            {m.badges.includes('verified') && <Badge kind="verified" emphasis={t.badgeEmphasis} size="xs" />}
          </div>
          <div style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>{m.region} · {m.joinedAt}</div>
          <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 12, background: tlInfo.color + '20', color: tlInfo.color, fontSize: 11.5, fontWeight: 700 }}>
            ⭐ {tlInfo.label}
          </div>
        </div>
      </div>

      {/* Trust progress */}
      <div style={{ padding: '12px 16px 0' }}>
        <Card padding={16}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-text-primary)' }}>등급 진행도</span>
            <span style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>다음 단계: <b style={{ color: 'var(--c-senior)' }}>{m.nextLevel.label}</b></span>
          </div>
          <div style={{ height: 8, background: 'var(--c-border)', borderRadius: 4, overflow: 'hidden', marginBottom: 8 }}>
            <div style={{ width: `${m.nextLevel.progress / m.nextLevel.total * 100}%`, height: '100%', background: 'linear-gradient(90deg, var(--c-primary), var(--c-senior))', transition: 'width .3s' }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'var(--c-text-sub)' }}>
            <span style={{ fontVariantNumeric: 'tabular-nums' }}>글 작성 <b style={{ color: 'var(--c-text-primary)' }}>{m.nextLevel.progress}</b> / {m.nextLevel.total}개</span>
            <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--c-primary)', fontWeight: 700 }}>{Math.round(m.nextLevel.progress / m.nextLevel.total * 100)}%</span>
          </div>
          <div style={{ marginTop: 8, fontSize: 11.5, color: 'var(--c-text-tertiary)', textWrap: 'pretty' }}>{m.nextLevel.hint}</div>
        </Card>
      </div>

      {/* Children */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px 8px' }}>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)' }}>👨‍👩‍👧 자녀 정보</div>
          <button onClick={onChild} style={{ border: 0, background: 'transparent', fontSize: 12, color: 'var(--c-primary)', fontWeight: 600, cursor: 'pointer' }}>+ 추가</button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {m.children.map((k) => (
            <Card key={k.id} padding={14} onClick={onChild}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-bg-secondary)', display: 'grid', placeItems: 'center', fontSize: 18 }}>🎒</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--c-text-primary)' }}>{k.grade} 자녀 · {k.school}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--c-text-sub)', marginTop: 2 }}>관심: {k.interests.join(' · ')}</div>
                </div>
                <Icon name="chevR" size={16} color="var(--c-text-tertiary)" />
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* Activity grid */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', padding: '0 4px 8px' }}>📊 내 활동</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
          {[
            { label: '작성 글', value: m.activity.posts, icon: '✍️' },
            { label: '댓글', value: m.activity.comments, icon: '💬' },
            { label: '평가', value: m.activity.reviews, icon: '⭐' },
            { label: '북마크', value: m.activity.bookmarks, icon: '🔖' },
          ].map((it) => (
            <Card key={it.label} padding={14}>
              <div style={{ fontSize: 18, marginBottom: 4 }}>{it.icon}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>{it.value}</div>
              <div style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>{it.label}</div>
            </Card>
          ))}
        </div>
      </div>

      {/* Bookings */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px 8px' }}>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)' }}>💼 컨설팅 예약</div>
          <button onClick={onConsult} style={{ border: 0, background: 'transparent', fontSize: 12, color: 'var(--c-primary)', fontWeight: 600, cursor: 'pointer' }}>전체 →</button>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {m.bookings.map((b) => (
            <Card key={b.id} padding={14}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <span style={{
                  fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 4,
                  background: b.status === 'upcoming' ? 'rgba(44,91,255,.10)' : 'rgba(0,184,82,.10)',
                  color: b.status === 'upcoming' ? 'var(--c-primary)' : 'var(--c-success)',
                }}>{b.status === 'upcoming' ? '예정' : '완료'}</span>
                <span style={{ fontSize: 12, color: 'var(--c-text-sub)', fontVariantNumeric: 'tabular-nums' }}>{b.when}</span>
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 2 }}>{b.expert}</div>
              <div style={{ fontSize: 12, color: 'var(--c-text-sub)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span>{b.service}</span>
                <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--c-text-primary)', fontWeight: 600 }}>{b.amount.toLocaleString()}원</span>
              </div>
            </Card>
          ))}
        </div>
      </div>

      {/* Settings list */}
      <div style={{ padding: '12px 16px 100px' }}>
        <Card padding={0}>
          {[
            { icon: '🔔', label: '알림 설정', hint: '푸시·이메일' },
            { icon: '🔖', label: '북마크', hint: m.activity.bookmarks + '개' },
            { icon: '🚫', label: '차단·신고 내역', hint: '' },
            { icon: '📑', label: '약관·개인정보 처리방침', hint: '' },
            { icon: '🆘', label: '고객센터', hint: '' },
            { icon: '↪️', label: '로그아웃', hint: '', danger: true },
          ].map((it, i, arr) => (
            <div key={it.label} style={{
              padding: '14px 16px', borderTop: i === 0 ? 'none' : '1px solid var(--c-border-soft)',
              display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
            }}>
              <span style={{ fontSize: 18, width: 24 }}>{it.icon}</span>
              <span style={{ flex: 1, fontSize: 14, fontWeight: 500, color: it.danger ? 'var(--c-danger)' : 'var(--c-text-primary)' }}>{it.label}</span>
              {it.hint && <span style={{ fontSize: 12, color: 'var(--c-text-tertiary)' }}>{it.hint}</span>}
              {!it.danger && <Icon name="chevR" size={16} color="var(--c-text-tertiary)" />}
            </div>
          ))}
        </Card>
        <div style={{ marginTop: 16, textAlign: 'center', fontSize: 11, color: 'var(--c-text-tertiary)' }}>
          돼지엄마 v1.0.0 · 4,219명의 검증된 학부모와 함께
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MyPageScreen });