// 돼지엄마 — 실서비스 싱크: 북마크 / 좋아요한 글 / 설정 / 멘토 대시보드 / 정보 상세 / 컨설팅 상세 / 후기 작성

// ═══════════════════════ BOOKMARKS ═══════════════════════

function BookmarksScreen({ onBack, onPost, t }) {
  const [filter, setFilter] = useState('all');
  // demo: hot + recommended posts as bookmarks
  const list = [...(D.hotIssues || []).slice(0, 4), ...(D.recommendedPosts || []).slice(0, 4)];
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="🔖 북마크" onBack={onBack} />
      <div style={{ padding: '12px 16px 8px', fontSize: 13, color: 'var(--c-text-sub)' }}>
        나중에 다시 보려고 저장한 글 <b style={{ color: 'var(--c-text-primary)' }}>{list.length}</b>개
      </div>
      <div style={{ padding: '0 16px', display: 'flex', gap: 6, overflowX: 'auto', whiteSpace: 'nowrap', paddingBottom: 8 }}>
        {[['all', '전체'], ['us', '미국 학부'], ['med', '의대'], ['hagwon', '학원'], ['expert', '컨설턴트']].map(([k, l]) => (
          <button key={k} onClick={() => setFilter(k)} style={chipBtn(filter === k)}>{l}</button>
        ))}
      </div>
      <div style={{ padding: '8px 16px 100px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {list.map((p, i) => (
          <Card key={i} padding={14} onClick={() => onPost && onPost()}>
            <div style={{ fontSize: 11, color: 'var(--c-primary)', fontWeight: 700, marginBottom: 4 }}>{p.tag || '미국 학부'}</div>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>{p.title || p.t}</div>
            <div style={{ fontSize: 11.5, color: 'var(--c-text-sub)' }}>♡ {p.likes || p.like || 0} · 💬 {p.comments || p.cmt || 0}</div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════ LIKED POSTS ═══════════════════════

function LikedPostsScreen({ onBack, onPost, t }) {
  const list = (D.recommendedPosts || []).slice(0, 6);
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="❤️ 좋아요한 글" onBack={onBack} />
      <div style={{ padding: '12px 16px 8px', fontSize: 13, color: 'var(--c-text-sub)' }}>
        내가 공감한 글 <b style={{ color: 'var(--c-text-primary)' }}>{list.length}</b>개 · 평균 ♡ {Math.round(list.reduce((s, p) => s + (p.likes || p.like || 0), 0) / Math.max(list.length, 1))}회
      </div>
      <div style={{ padding: '0 16px 100px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {list.map((p, i) => (
          <Card key={i} padding={14} onClick={() => onPost && onPost()}>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>{p.title || p.t}</div>
            <div style={{ fontSize: 11.5, color: 'var(--c-text-sub)' }}>
              <span style={{ color: 'var(--c-danger)' }}>❤️ {p.likes || p.like || 0}</span> · 💬 {p.comments || p.cmt || 0}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════ SETTINGS ═══════════════════════

function SettingsScreen({ onBack, t }) {
  const [section, setSection] = useState('account');
  const sections = [
    { id: 'account', label: '계정', icon: '👤' },
    { id: 'children', label: '자녀 관리', icon: '👨‍👩‍👧' },
    { id: 'notifications', label: '알림', icon: '🔔' },
    { id: 'privacy', label: '프라이버시', icon: '🔒' },
    { id: 'payment', label: '결제·정산', icon: '💳' },
    { id: 'help', label: '도움말·문의', icon: '❓' },
  ];
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="⚙️ 설정" onBack={onBack} />
      <div style={{ padding: '14px 16px 100px' }}>
        {sections.map((s) => (
          <Card key={s.id} padding={0} style={{ marginBottom: 8 }}>
            <button
              onClick={() => setSection(section === s.id ? '' : s.id)}
              style={{
                width: '100%', padding: '14px 16px', background: 'transparent', border: 0,
                display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', fontFamily: 'inherit',
              }}
            >
              <span style={{ fontSize: 20, width: 24, textAlign: 'center' }}>{s.icon}</span>
              <span style={{ flex: 1, textAlign: 'left', fontSize: 14, fontWeight: 600 }}>{s.label}</span>
              <span style={{ fontSize: 14, color: 'var(--c-text-tertiary)' }}>{section === s.id ? '−' : '›'}</span>
            </button>
            {section === s.id && (
              <div style={{ padding: '0 16px 14px', fontSize: 12.5, color: 'var(--c-text-sub)', lineHeight: 1.7 }}>
                {sectionPreview(s.id)}
              </div>
            )}
          </Card>
        ))}
        <button style={{
          width: '100%', height: 44, marginTop: 14,
          background: 'transparent', color: 'var(--c-danger)',
          border: '1px solid var(--c-danger)', borderRadius: 22,
          fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit',
        }}>🚪 로그아웃</button>
      </div>
    </div>
  );
}

function sectionPreview(id) {
  const previews = {
    account: '· 비밀번호 변경\n· 2단계 인증 (권장)\n· 로그인 기기 관리\n· 계정 삭제',
    children: '· 자녀 1 — 고2 휘문고\n· 자녀 2 — 중1 대치중\n· + 자녀 추가',
    notifications: '· 푸시 / 이메일 / 카카오톡 채널 ON-OFF\n· 게시글·예약·정보 종류별 토글',
    privacy: '· 익명 닉네임 표시 (필수 ON)\n· 검색엔진 노출 (필수 OFF)\n· 멘토에게 자녀 정보 공유\n· 데이터 다운로드 (GDPR)',
    payment: '· 등록된 카드 — 신한 1234\n· 정산 계좌 (멘토용)\n· 결제 내역 / 세금계산서',
    help: '· FAQ\n· 운영팀 문의\n· 이용약관·개인정보처리방침\n· 앱 버전',
  };
  return previews[id] || '';
}

// ═══════════════════════ MENTOR DASHBOARD ═══════════════════════

function MentorDashboardScreen({ onBack, t }) {
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="🐷 멘토 대시보드" onBack={onBack} />

      {/* Earnings */}
      <div style={{ padding: '12px 16px 0' }}>
        <Card padding={18} style={{ background: 'linear-gradient(135deg, rgba(255,184,0,.10), rgba(139,92,246,.06))' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--c-text-sub)', fontWeight: 700, marginBottom: 4 }}>이번 달 수익 · 5월</div>
              <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em' }}>1,240,000<span style={{ fontSize: 13, fontWeight: 600, color: 'var(--c-text-sub)' }}>원</span></div>
              <div style={{ fontSize: 11, color: 'var(--c-verified)', fontWeight: 700, marginTop: 4 }}>↑ 전월 대비 +27%</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 10, color: 'var(--c-text-sub)' }}>🥇 골드 멘토</div>
              <div style={{ fontSize: 14, fontWeight: 800, color: '#FFB700' }}>수수료 15%</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {[['정산 대기', '320,000원'], ['정산 완료', '920,000원'], ['지난 달', '980,000원']].map(([l, v], i) => (
              <div key={i} style={{ padding: '8px 10px', background: 'var(--c-bg-primary)', borderRadius: 8 }}>
                <div style={{ fontSize: 9.5, color: 'var(--c-text-sub)' }}>{l}</div>
                <div style={{ fontSize: 12.5, fontWeight: 800 }}>{v}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* KPI */}
      <div style={{ padding: '14px 16px 0', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
        {[['활동 서비스', '5개'], ['완료 멘토링', '89회'], ['평점', '★ 4.9 (47)'], ['응답률', '98%']].map(([l, v], i) => (
          <Card key={i} padding={12}>
            <div style={{ fontSize: 10.5, color: 'var(--c-text-sub)', fontWeight: 700, marginBottom: 4 }}>{l}</div>
            <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.01em' }}>{v}</div>
          </Card>
        ))}
      </div>

      {/* Recent bookings */}
      <div style={{ padding: '14px 16px' }}>
        <SectionHeader title="📋 최근 예약" />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
          {[
            { svc: '1:1 입시 상담', when: '5/8 14:00', amt: 80000, st: '예정' },
            { svc: 'Q&A', when: '5/4 11:00', amt: 15000, st: '완료' },
            { svc: '에세이 첨삭 (3편)', when: '진행 중', amt: 250000, st: '진행' },
          ].map((b, i) => (
            <Card key={i} padding={12}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700 }}>{b.svc}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--c-text-sub)' }}>{b.when}</div>
                </div>
                <div style={{ fontSize: 12.5, fontWeight: 800 }}>{b.amt.toLocaleString()}원</div>
              </div>
            </Card>
          ))}
        </div>
      </div>

      <div style={{ padding: '0 16px 100px' }}>
        <Button kind="primary" full>+ 새 서비스 추가</Button>
      </div>
    </div>
  );
}

// ═══════════════════════ INFO DETAIL ═══════════════════════

function InfoDetailScreen({ onBack, t }) {
  const event = (D.events || [])[0] || { title: '미국 유학 박람회 2026', organizer: '돼지엄마', startAt: '2026-05-20', location: '코엑스 1층 홀A', description: '미국 Top 50 대학 입학사정관 직접 만나는 자리.' };
  const [registered, setRegistered] = useState(false);
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="" onBack={onBack} />
      <div style={{ padding: '0 16px' }}>
        <Card padding={20} style={{ background: 'linear-gradient(135deg, rgba(44,91,255,.08), rgba(0,200,150,.04))' }}>
          <div style={{ display: 'flex', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
            <Badge kind="primary">🌍 박람회</Badge>
            <Badge kind="danger">🔥 D-12</Badge>
          </div>
          <h2 style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.02em', margin: '0 0 6px', lineHeight: 1.3 }}>{event.title}</h2>
          <div style={{ fontSize: 12, color: 'var(--c-text-sub)' }}>주최: <b style={{ color: 'var(--c-text-primary)' }}>{event.organizer}</b></div>
        </Card>
      </div>

      <div style={{ padding: '12px 16px' }}>
        <Card padding={16}>
          <div style={{ display: 'grid', gap: 10 }}>
            {[['📅 일시', event.startAt], ['📍 장소', event.location], ['🎯 대상', '학부모·자녀'], ['💰 참가비', '무료']].map(([l, v], i) => (
              <div key={i}>
                <div style={{ fontSize: 10.5, color: 'var(--c-text-sub)', fontWeight: 700, marginBottom: 2 }}>{l}</div>
                <div style={{ fontSize: 13, fontWeight: 600 }}>{v}</div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div style={{ padding: '0 16px' }}>
        <Card padding={16}>
          <div style={{ fontSize: 13, fontWeight: 800, marginBottom: 8 }}>📋 상세 안내</div>
          <div style={{ fontSize: 12.5, lineHeight: 1.7, color: 'var(--c-text-primary)' }}>{event.description}</div>
        </Card>
      </div>

      <div style={{ padding: '14px 16px 100px' }}>
        <Button kind={registered ? 'secondary' : 'primary'} full onClick={() => setRegistered(!registered)}>
          {registered ? '🔔 알림 해제' : '🔔 알림 구독'}
        </Button>
      </div>
    </div>
  );
}

// ═══════════════════════ CONSULTATION DETAIL ═══════════════════════

function ConsultationDetailScreen({ onBack, onReview, t }) {
  const status = 'scheduled';
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="" onBack={onBack} />

      <div style={{ padding: '0 16px' }}>
        <Card padding={18} style={{ background: 'rgba(44,91,255,.06)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
            <div style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--c-primary)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 22 }}>✅</div>
            <div>
              <div style={{ fontSize: 10, color: 'var(--c-primary)', fontWeight: 800, marginBottom: 2 }}>예약 확정</div>
              <div style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.01em' }}>60분 심화 상담</div>
            </div>
          </div>
          <Button kind="primary" full>📹 Zoom 입장 →</Button>
        </Card>
      </div>

      <div style={{ padding: '12px 16px' }}>
        <Card padding={16}>
          <div style={{ fontSize: 13, fontWeight: 800, marginBottom: 10 }}>📋 예약 상세</div>
          <div style={{ display: 'grid', gap: 8, fontSize: 12.5 }}>
            <Row label="컨설턴트" v="김민서 컨설턴트" />
            <Row label="일시" v="2026.05.06 14:00 (60분)" />
            <Row label="결제" v="100,000원 · 결제 완료" />
          </div>
        </Card>
      </div>

      <div style={{ padding: '0 16px' }}>
        <Card padding={16}>
          <div style={{ fontSize: 13, fontWeight: 800, marginBottom: 10 }}>📍 진행 단계</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
            {[['신청', true], ['결제 완료', true], ['예약 확정', true], ['상담 진행', false], ['후기 작성', false]].map(([l, done], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{
                  width: 18, height: 18, borderRadius: 9,
                  background: done ? 'var(--c-primary)' : 'var(--c-bg-secondary)',
                  color: done ? '#fff' : 'var(--c-text-tertiary)',
                  display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 700,
                  flexShrink: 0,
                }}>{done ? '✓' : i + 1}</div>
                <span style={{ color: done ? 'var(--c-text-primary)' : 'var(--c-text-tertiary)', fontWeight: done ? 600 : 500 }}>{l}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div style={{ padding: '14px 16px 100px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Button kind="primary" full onClick={onReview}>⭐ 후기 작성하기</Button>
        <Button kind="secondary" full>예약 취소</Button>
      </div>
    </div>
  );
}

function Row({ label, v }) {
  return (
    <div style={{ display: 'flex' }}>
      <span style={{ width: 70, color: 'var(--c-text-sub)' }}>{label}</span>
      <span style={{ fontWeight: 600 }}>{v}</span>
    </div>
  );
}

// ═══════════════════════ CONSULTATION REVIEW ═══════════════════════

function ConsultationReviewScreen({ onBack, onSubmit, t }) {
  const [overall, setOverall] = useState(0);
  const [recommend, setRecommend] = useState(null);
  const [body, setBody] = useState('');
  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%' }}>
      <TopBar title="후기 작성" onBack={onBack} />
      <div style={{ padding: '12px 16px' }}>
        <Card padding={16}>
          <div style={{ fontSize: 11, color: 'var(--c-text-sub)' }}>김민서 컨설턴트</div>
          <div style={{ fontSize: 16, fontWeight: 800, marginTop: 4 }}>60분 심화 상담 어떠셨나요?</div>
          <div style={{ fontSize: 11, color: 'var(--c-text-sub)', marginTop: 4 }}>+100p 적립</div>
        </Card>
      </div>

      <div style={{ padding: '0 16px' }}>
        <Card padding={16} style={{ marginBottom: 8 }}>
          <div style={{ fontSize: 13, fontWeight: 800, marginBottom: 10 }}>🤔 추천 여부 <span style={{ fontSize: 10, color: 'var(--c-danger)' }}>필수</span></div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => setRecommend(true)} style={{ flex: 1, padding: 12, borderRadius: 10, border: `1px solid ${recommend === true ? 'var(--c-verified)' : 'var(--c-border)'}`, background: recommend === true ? 'var(--c-verified)' : 'var(--c-bg-primary)', color: recommend === true ? '#fff' : 'var(--c-text-primary)', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>👍 추천</button>
            <button onClick={() => setRecommend(false)} style={{ flex: 1, padding: 12, borderRadius: 10, border: `1px solid ${recommend === false ? 'var(--c-danger)' : 'var(--c-border)'}`, background: recommend === false ? 'var(--c-danger)' : 'var(--c-bg-primary)', color: recommend === false ? '#fff' : 'var(--c-text-primary)', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit' }}>👎 비추천</button>
          </div>
        </Card>

        <Card padding={16} style={{ marginBottom: 8 }}>
          <div style={{ fontSize: 13, fontWeight: 800, marginBottom: 10 }}>⭐ 종합 만족도 <span style={{ fontSize: 10, color: 'var(--c-danger)' }}>필수</span></div>
          <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
            {[1, 2, 3, 4, 5].map((n) => (
              <button key={n} onClick={() => setOverall(n === overall ? 0 : n)} style={{ width: 40, height: 40, padding: 0, background: 'transparent', border: 0, cursor: 'pointer', color: overall >= n ? 'var(--c-warning)' : 'var(--c-border)', fontSize: 32, lineHeight: 1, fontFamily: 'inherit' }}>★</button>
            ))}
          </div>
        </Card>

        <Card padding={16}>
          <div style={{ fontSize: 13, fontWeight: 800, marginBottom: 10 }}>✍️ 자세한 후기 <span style={{ fontSize: 10, color: 'var(--c-danger)' }}>100자+</span></div>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
            placeholder="컨설턴트의 전문성·설명력·가격 만족도를 자세히 적어주세요."
            rows={6}
            style={{ width: '100%', padding: 12, borderRadius: 8, border: '1px solid var(--c-border)', fontSize: 13, lineHeight: 1.55, outline: 'none', fontFamily: 'inherit', resize: 'vertical', boxSizing: 'border-box' }}
          />
          <div style={{ fontSize: 10.5, color: body.length >= 100 ? 'var(--c-verified)' : 'var(--c-text-tertiary)', textAlign: 'right', marginTop: 4 }}>{body.length} / 100자</div>
        </Card>
      </div>

      <div style={{ padding: '14px 16px 100px' }}>
        <Button
          kind="primary"
          full
          disabled={overall === 0 || body.length < 100 || recommend === null}
          onClick={onSubmit}
        >후기 등록 (+100p)</Button>
      </div>
    </div>
  );
}

// ═══════════════════════ COMPARE (재추가 — 모바일 버전) ═══════════════════════

// CompareScreen은 screens-10.jsx에 이미 존재. 여기선 패스.

function chipBtn(active) {
  return {
    padding: '6px 12px', borderRadius: 14,
    background: active ? 'var(--c-primary)' : 'var(--c-bg-primary)',
    color: active ? '#fff' : 'var(--c-text-sub)',
    border: active ? 0 : '1px solid var(--c-border)',
    fontSize: 12, fontWeight: 700, cursor: 'pointer',
    fontFamily: 'inherit', flexShrink: 0,
  };
}

Object.assign(window, {
  BookmarksScreen, LikedPostsScreen, SettingsScreen,
  MentorDashboardScreen, InfoDetailScreen,
  ConsultationDetailScreen, ConsultationReviewScreen,
});