// 돼지엄마 — Consultant Detail + Booking screens

// ───────── CONSULTANT DETAIL ─────────
function ConsultantDetailScreen({ onBack, onBook, t }) {
  const c = D.consultantDetail;
  const [pickedService, setPickedService] = useState(c.services[1]?.id || c.services[0]?.id);

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

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 90 }}>
        {/* Profile header */}
        <div style={{ background: 'var(--c-bg-primary)', padding: '8px 20px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
            <Avatar initial={c.avatar} bg={c.avatarBg} size={88} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--c-primary)', letterSpacing: '0.04em', marginBottom: 4 }}>{c.title.toUpperCase()}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--c-text-primary)', letterSpacing: '-0.025em', marginBottom: 6 }}>{c.name}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5 }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                  <span style={{ color: '#FFB700', fontSize: 14 }}>★</span>
                  <b style={{ color: 'var(--c-text-primary)' }}>{c.rating}</b>
                  <span style={{ color: 'var(--c-text-sub)' }}>({c.reviewCount})</span>
                </span>
                <span style={{ width: 1, height: 11, background: 'var(--c-border)' }} />
                <span style={{ color: 'var(--c-text-sub)' }}>상담 <b style={{ color: 'var(--c-text-primary)' }}>{c.consultCount}</b>건</span>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
            {c.verifiedBadges.map((b, i) => (
              <Badge key={i} kind="expert" label={b} emphasis={t.badgeEmphasis === 'minimal' ? 'medium' : t.badgeEmphasis} size="xs" />
            ))}
          </div>

          <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--c-text-primary)', marginBottom: 14, textWrap: 'pretty' }}>{c.tagline}</div>

          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', fontSize: 12, color: 'var(--c-text-sub)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="clock" size={14} /> {c.responseTime}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="globe" size={14} /> {c.languages.join(' · ')}</div>
          </div>
        </div>

        {/* Bio */}
        <div style={{ background: 'var(--c-bg-primary)', padding: '0 20px 20px' }}>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 8, letterSpacing: '-0.01em' }}>소개</div>
          <div style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--c-text-primary)', textWrap: 'pretty' }}>{c.bio}</div>
        </div>

        {/* Credentials */}
        <div style={{ padding: '16px 16px 0' }}>
          <Card padding={16}>
            <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="shield" size={16} color="var(--c-verified)" stroke={2.2} />
              검증된 학력·경력
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.credentials.map((cr, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 6, flexShrink: 0,
                    background: cr.type === 'edu' ? 'rgba(44,91,255,.10)' : 'rgba(0,200,150,.10)',
                    color: cr.type === 'edu' ? 'var(--c-primary)' : 'var(--c-verified)',
                    display: 'grid', placeItems: 'center', fontSize: 13,
                  }}>{cr.type === 'edu' ? <Icon name="grad" size={15} /> : <Icon name="case" size={15} />}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--c-text-primary)', display: 'flex', alignItems: 'center', gap: 4 }}>
                      {cr.title}
                      {cr.verified && <Icon name="check" size={13} color="var(--c-verified)" stroke={3} />}
                    </div>
                    <div style={{ fontSize: 11.5, color: 'var(--c-text-sub)', marginTop: 1 }}>{cr.period}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>

        {/* Achievements */}
        <div style={{ padding: '12px 16px 0' }}>
          <Card padding={16}>
            <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 10 }}>주요 합격 실적</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 6 }}>
              {c.achievements.map((a, i) => (
                <li key={i} style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--c-text-primary)', display: 'flex', gap: 8, paddingLeft: 2 }}>
                  <span style={{ color: 'var(--c-warning)', flexShrink: 0 }}>✓</span>
                  <span style={{ flex: 1, textWrap: 'pretty' }}>{a}</span>
                </li>
              ))}
            </ul>
          </Card>
        </div>

        {/* Services */}
        <div style={{ padding: '12px 16px 0' }}>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', padding: '8px 4px', letterSpacing: '-0.01em' }}>서비스</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {c.services.map((s) => {
              const on = pickedService === s.id;
              return (
                <div key={s.id} onClick={() => setPickedService(s.id)} style={{
                  padding: 14, borderRadius: 10,
                  border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
                  background: on ? 'rgba(44,91,255,.04)' : 'var(--c-bg-primary)',
                  cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 11, flexShrink: 0,
                    border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
                    background: on ? 'var(--c-primary)' : 'transparent',
                    display: 'grid', placeItems: 'center',
                  }}>
                    {on && <span style={{ width: 8, height: 8, borderRadius: 4, background: '#fff' }} />}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                      <span style={{ fontSize: 11, fontWeight: 700, padding: '2px 6px', borderRadius: 4, background: 'var(--c-bg-secondary)', color: 'var(--c-text-sub)' }}>{s.dur}</span>
                      <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)' }}>{s.label}</span>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--c-text-sub)', lineHeight: 1.4, textWrap: 'pretty' }}>{s.desc}</div>
                  </div>
                  <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums', flexShrink: 0 }}>
                    {(s.price / 10000).toLocaleString()}만원
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Recent reviews */}
        <div style={{ padding: '16px 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)' }}>학부모 후기 {c.reviewCount}건</div>
            <button style={{ border: 0, background: 'transparent', fontSize: 12, color: 'var(--c-text-sub)', cursor: 'pointer' }}>전체 보기 →</button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {c.recentReviews.map((rv) => (
              <Card key={rv.id} padding={14}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
                  <div style={{ display: 'flex', gap: 1 }}>
                    {[1, 2, 3, 4, 5].map((n) => (
                      <span key={n} style={{ color: n <= rv.rating ? '#FFB700' : 'var(--c-border)', fontSize: 13 }}>★</span>
                    ))}
                  </div>
                  <span style={{ fontSize: 11, color: 'var(--c-text-tertiary)', marginLeft: 4 }}>{rv.meta}</span>
                </div>
                <div style={{ fontSize: 13.5, lineHeight: 1.55, color: 'var(--c-text-primary)', marginBottom: 8, textWrap: 'pretty' }}>{rv.body}</div>
                <AuthorLine author={rv.author} verified={rv.verified} senior={rv.senior} badgeEmphasis={t.badgeEmphasis} />
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Sticky CTA */}
      <div style={{ position: 'sticky', bottom: 0, padding: '12px 16px', borderTop: '1px solid var(--c-border)', background: 'var(--c-bg-primary)', display: 'flex', gap: 8, alignItems: 'center' }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, color: 'var(--c-text-tertiary)' }}>선택한 서비스</div>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums' }}>
            {(c.services.find((s) => s.id === pickedService)?.price / 10000).toLocaleString()}만원
          </div>
        </div>
        <Button kind="primary" size="md" onClick={() => onBook && onBook(pickedService)}>예약하기</Button>
      </div>
    </div>
  );
}

// ───────── BOOKING ─────────
function ConsultantBookingScreen({ onBack, onDone, serviceId, t }) {
  const c = D.consultantDetail;
  const service = c.services.find((s) => s.id === serviceId) || c.services[0];
  const [day, setDay] = useState(c.availability.find((a) => a.slots.length > 0)?.date);
  const [time, setTime] = useState(null);
  const [topic, setTopic] = useState('');
  const [pay, setPay] = useState('card');
  const [paying, setPaying] = useState(false);
  const [done, setDone] = useState(false);

  const canSubmit = day && time && pay;

  const handlePay = () => {
    setPaying(true);
    setTimeout(() => { setPaying(false); setDone(true); }, 1100);
  };

  if (done) {
    return (
      <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
        <TopBar showBack onBack={onDone} title="예약 완료" showSearch={false} showBell={false} />
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 24, textAlign: 'center' }}>
          <div style={{ width: 88, height: 88, borderRadius: 44, background: 'rgba(0,184,82,.12)', display: 'grid', placeItems: 'center', marginBottom: 20 }}>
            <Icon name="check" size={44} stroke={2.4} color="var(--c-success)" />
          </div>
          <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 10, letterSpacing: '-0.02em' }}>예약이 확정되었습니다</div>
          <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--c-text-sub)', maxWidth: 300, textWrap: 'pretty', marginBottom: 24 }}>
            {c.name} 컨설턴트<br />
            {day} {time} · {service.label}
          </div>
          <div style={{ width: '100%', maxWidth: 320, padding: 14, background: 'rgba(44,91,255,.06)', border: '1px solid rgba(44,91,255,.18)', borderRadius: 10, fontSize: 12.5, lineHeight: 1.6, color: 'var(--c-text-primary)', marginBottom: 24, textWrap: 'pretty' }}>
            <div style={{ fontWeight: 700, marginBottom: 4 }}>Zoom 링크가 등록 메일로 발송되었습니다</div>
            상담 24시간 전 자동 리마인더가 발송됩니다. 이전 24시간 전까지 100% 환불 가능.
          </div>
          <div style={{ width: '100%', maxWidth: 320, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <Button kind="primary" full onClick={onDone}>마이페이지로 이동</Button>
            <Button kind="ghost" full onClick={onDone}>홈으로</Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div style={{ background: 'var(--c-bg-secondary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <TopBar showBack onBack={onBack} title="예약하기" showSearch={false} showBell={false} />

      <div style={{ flex: 1, overflow: 'auto', padding: 16, paddingBottom: 100, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* Service summary */}
        <Card padding={14}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Avatar initial={c.avatar} bg={c.avatarBg} size={48} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--c-text-primary)' }}>{c.name} 컨설턴트</div>
              <div style={{ fontSize: 12, color: 'var(--c-text-sub)', marginTop: 2 }}>{service.label} · {service.dur}</div>
            </div>
            <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums' }}>
              {(service.price / 10000).toLocaleString()}만원
            </div>
          </div>
        </Card>

        {/* Date picker */}
        <div>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 10, padding: '0 4px' }}>날짜 선택</div>
          <div style={{ display: 'flex', gap: 6, overflowX: 'auto', paddingBottom: 4, scrollbarWidth: 'none' }}>
            {c.availability.map((a) => {
              const on = day === a.date;
              const empty = a.slots.length === 0;
              return (
                <button key={a.date} disabled={empty} onClick={() => { setDay(a.date); setTime(null); }} style={{
                  minWidth: 56, padding: '12px 8px', border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
                  borderRadius: 10, cursor: empty ? 'not-allowed' : 'pointer',
                  background: on ? 'rgba(44,91,255,.06)' : 'var(--c-bg-primary)',
                  opacity: empty ? 0.4 : 1,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
                }}>
                  <span style={{ fontSize: 11, color: on ? 'var(--c-primary)' : 'var(--c-text-sub)', fontWeight: 600 }}>{a.day}</span>
                  <span style={{ fontSize: 16, fontWeight: 800, color: on ? 'var(--c-primary)' : 'var(--c-text-primary)', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.01em' }}>{a.date.split('/')[1]}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Time picker */}
        {day && (
          <div>
            <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 10, padding: '0 4px' }}>시간 선택</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))', gap: 6 }}>
              {(c.availability.find((a) => a.date === day)?.slots || []).map((slot) => {
                const on = time === slot;
                return (
                  <button key={slot} onClick={() => setTime(slot)} style={{
                    height: 44, border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
                    borderRadius: 8, cursor: 'pointer',
                    background: on ? 'var(--c-primary)' : 'var(--c-bg-primary)',
                    color: on ? '#fff' : 'var(--c-text-primary)',
                    fontSize: 14, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
                  }}>{slot}</button>
                );
              })}
            </div>
          </div>
        )}

        {/* Topic */}
        <div>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 8, padding: '0 4px' }}>상담 주제 (선택)</div>
          <textarea value={topic} onChange={(e) => setTopic(e.target.value)}
            placeholder="자녀의 학년·내신·관심 학교 등을 미리 알려주시면 더 정확한 상담을 받을 수 있어요"
            style={{ width: '100%', minHeight: 80, padding: 12, borderRadius: 10, border: '1px solid var(--c-border)', fontSize: 14, lineHeight: 1.5, resize: 'none', outline: 'none', color: 'var(--c-text-primary)', fontFamily: 'inherit', background: 'var(--c-bg-primary)' }} />
        </div>

        {/* Payment method */}
        <div>
          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 8, padding: '0 4px' }}>결제 방법</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {[
              { id: 'card', label: '신용카드', icon: <Icon name="card" size={18} /> },
              { id: 'kakao', label: '카카오페이', icon: <Icon name="chat" size={18} /> },
              { id: 'toss', label: '토스페이', icon: 'T' },
            ].map((p) => {
              const on = pay === p.id;
              return (
                <button key={p.id} onClick={() => setPay(p.id)} style={{
                  height: 56, border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
                  borderRadius: 10, cursor: 'pointer',
                  background: on ? 'rgba(44,91,255,.04)' : 'var(--c-bg-primary)',
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
                  fontSize: 12, fontWeight: 600, color: on ? 'var(--c-primary)' : 'var(--c-text-sub)',
                }}>
                  <span style={{ fontSize: 18 }}>{p.icon}</span>
                  {p.label}
                </button>
              );
            })}
          </div>
        </div>

        {/* Order summary */}
        <Card padding={14}>
          <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--c-text-primary)', marginBottom: 8 }}>결제 요약</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--c-text-sub)', padding: '4px 0' }}>
            <span>{service.label}</span>
            <span style={{ fontVariantNumeric: 'tabular-nums' }}>{service.price.toLocaleString()}원</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--c-text-sub)', padding: '4px 0' }}>
            <span>포인트 사용 (보유 1,250P)</span>
            <span style={{ color: 'var(--c-verified)', fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>-1,000원</span>
          </div>
          <div style={{ height: 1, background: 'var(--c-border-soft)', margin: '8px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, fontWeight: 800, color: 'var(--c-text-primary)' }}>
            <span>총 결제 금액</span>
            <span style={{ color: 'var(--c-primary)', fontVariantNumeric: 'tabular-nums' }}>{(service.price - 1000).toLocaleString()}원</span>
          </div>
          <div style={{ marginTop: 10, fontSize: 11.5, lineHeight: 1.55, color: 'var(--c-text-tertiary)', textWrap: 'pretty' }}>
            ⓘ 에스크로 결제 — 상담 완료 후 7일 뒤 컨설턴트에게 정산<br />
            ⓘ 24시간 전 취소 시 100% 환불 / 12시간 전 50% / 그 이후 환불 불가
          </div>
        </Card>
      </div>

      {/* Sticky CTA */}
      <div style={{ position: 'sticky', bottom: 0, padding: '12px 16px', borderTop: '1px solid var(--c-border)', background: 'var(--c-bg-primary)' }}>
        <Button kind="primary" full disabled={!canSubmit || paying} onClick={handlePay}>
          {paying ? '결제 진행 중...' : `${(service.price - 1000).toLocaleString()}원 결제하기`}
        </Button>
      </div>
    </div>
  );
}

Object.assign(window, { ConsultantDetailScreen, ConsultantBookingScreen });