// 돼지엄마 — Post detail, Post compose screens

// ───────── POST DETAIL ─────────
function PostDetailScreen({ onBack, t }) {
  const p = D.postDetail;
  const [liked, setLiked] = useState(false);
  const [bookmarked, setBookmarked] = useState(p.bookmarked);
  const [likes, setLikes] = useState(p.likes);
  const [commentText, setCommentText] = useState('');
  const [focused, setFocused] = useState(false);

  const toggleLike = () => {
    if (liked) { setLiked(false); setLikes((n) => n - 1); }
    else { setLiked(true); setLikes((n) => n + 1); }
  };

  return (
    <div style={{ background: 'var(--c-bg-primary)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <TopBar showBack onBack={onBack} title="" showSearch={false} showBell={false} />
      <div style={{ padding: '0 8px 0 0', display: 'flex', justifyContent: 'flex-end', marginTop: -52, height: 52, alignItems: 'center', position: 'sticky', top: 0, zIndex: 11, pointerEvents: 'none' }}>
        <button style={{ pointerEvents: 'auto', marginRight: 8, width: 40, height: 40, display: 'grid', placeItems: 'center', border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-primary)' }}>
          <Icon name="more" size={22} stroke={2.4} />
        </button>
      </div>

      <div style={{ flex: 1, overflow: 'auto', paddingBottom: 72 }}>
        {/* Header */}
        <div style={{ padding: '8px 20px 16px' }}>
          <div style={{ fontSize: 21, fontWeight: 700, color: 'var(--c-text-primary)', lineHeight: 1.35, letterSpacing: '-0.025em', marginBottom: 14, textWrap: 'pretty' }}>
            {p.title}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Avatar initial={p.avatar} bg={p.avatarBg} size={40} />
            <div style={{ flex: 1 }}>
              <AuthorLine author={p.author} verified={p.verified} senior={p.senior} badgeEmphasis={t.badgeEmphasis} />
              <div style={{ fontSize: 12, color: 'var(--c-text-tertiary)', marginTop: 2 }}>{p.meta}</div>
            </div>
          </div>
        </div>

        <div style={{ height: 1, background: 'var(--c-border)' }} />

        {/* Body */}
        <div style={{ padding: '20px', maxWidth: 640, margin: '0 auto' }}>
          {p.body.map((b, i) => {
            if (b.type === 'p') return <p key={i} style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--c-text-primary)', margin: '0 0 14px', textWrap: 'pretty' }}>{b.text}</p>;
            if (b.type === 'h') return <h3 key={i} style={{ fontSize: 17, fontWeight: 700, color: 'var(--c-text-primary)', margin: '24px 0 10px', letterSpacing: '-0.02em' }}>{b.text}</h3>;
            if (b.type === 'list') return (
              <ul key={i} style={{ margin: '0 0 14px', padding: '0 0 0 4px', listStyle: 'none' }}>
                {b.items.map((it, j) => (
                  <li key={j} style={{ fontSize: 15.5, lineHeight: 1.7, color: 'var(--c-text-primary)', display: 'flex', gap: 10, padding: '2px 0' }}>
                    <span style={{ color: 'var(--c-primary)', fontWeight: 700, flexShrink: 0 }}>·</span>
                    <span style={{ flex: 1, textWrap: 'pretty' }}>{it}</span>
                  </li>
                ))}
              </ul>
            );
            if (b.type === 'callout') return (
              <div key={i} style={{
                margin: '16px 0', padding: '14px 16px',
                background: 'rgba(255,184,0,.10)', border: '1px solid rgba(255,184,0,.25)',
                borderRadius: 10, fontSize: 14.5, lineHeight: 1.6, color: 'var(--c-text-primary)', textWrap: 'pretty',
              }}>{b.text}</div>
            );
            return null;
          })}

          {/* Tags */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 20 }}>
            {p.tags.map((tg) => (
              <span key={tg} style={{
                fontSize: 12.5, padding: '6px 10px', borderRadius: 16,
                background: 'var(--c-bg-secondary)', color: 'var(--c-text-sub)', fontWeight: 500,
              }}>{tg}</span>
            ))}
          </div>
        </div>

        {/* Action bar */}
        <div style={{ padding: '0 20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderTop: '1px solid var(--c-border)', paddingTop: 12 }}>
          <button onClick={toggleLike} style={{
            border: '1px solid var(--c-border)', background: liked ? 'rgba(229,62,62,.08)' : 'var(--c-bg-primary)',
            padding: '8px 14px', borderRadius: 20, cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 6,
            color: liked ? 'var(--c-danger)' : 'var(--c-text-primary)', fontWeight: 600, fontSize: 13,
            transition: 'transform .15s', transform: liked ? 'scale(1.04)' : 'scale(1)',
          }}>
            <span style={{ fontSize: 15 }}>{liked ? '❤️' : '♡'}</span>
            <span style={{ fontVariantNumeric: 'tabular-nums' }}>{likes}</span>
          </button>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => setBookmarked((b) => !b)} style={{
              width: 40, height: 40, border: '1px solid var(--c-border)', borderRadius: 20,
              background: bookmarked ? 'rgba(44,91,255,.08)' : 'var(--c-bg-primary)', cursor: 'pointer',
              display: 'grid', placeItems: 'center', color: bookmarked ? 'var(--c-primary)' : 'var(--c-text-primary)',
            }}>
              <Icon name="bookmark" size={18} stroke={bookmarked ? 2.4 : 1.7} color={bookmarked ? 'var(--c-primary)' : 'currentColor'} />
            </button>
            <button style={{
              width: 40, height: 40, border: '1px solid var(--c-border)', borderRadius: 20,
              background: 'var(--c-bg-primary)', cursor: 'pointer',
              display: 'grid', placeItems: 'center', color: 'var(--c-text-primary)',
            }}>
              <Icon name="share" size={18} />
            </button>
          </div>
        </div>

        {/* Comments */}
        <div style={{ background: 'var(--c-bg-secondary)', padding: '16px 16px 80px' }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 12, padding: '0 4px' }}>
            댓글 <span style={{ color: 'var(--c-primary)' }}>{p.comments.length + p.comments.reduce((n, c) => n + c.replies.length, 0)}</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {p.comments.map((c) => (
              <Card key={c.id} padding={14}>
                <CommentItem c={c} t={t} />
                {c.replies.map((r) => (
                  <div key={r.id} style={{ marginTop: 12, paddingLeft: 14, borderLeft: '2px solid var(--c-border)' }}>
                    <CommentItem c={r} t={t} reply />
                  </div>
                ))}
              </Card>
            ))}
          </div>
        </div>
      </div>

      {/* Sticky comment input */}
      <div style={{
        position: 'sticky', bottom: 0, background: 'var(--c-bg-primary)',
        borderTop: '1px solid var(--c-border)', padding: '10px 12px',
        paddingBottom: focused ? 14 : 'calc(10px + env(safe-area-inset-bottom))',
        display: 'flex', gap: 8, alignItems: 'center',
        marginBottom: focused ? 240 : 0, transition: 'margin .25s',
      }}>
        <input
          value={commentText}
          onChange={(e) => setCommentText(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          placeholder="따뜻한 댓글로 응원해주세요"
          style={{
            flex: 1, height: 40, padding: '0 14px', borderRadius: 20,
            border: '1px solid var(--c-border)', background: 'var(--c-bg-secondary)',
            fontSize: 14, color: 'var(--c-text-primary)', outline: 'none',
          }}
        />
        <button disabled={!commentText} style={{
          width: 40, height: 40, borderRadius: 20, border: 0, cursor: commentText ? 'pointer' : 'default',
          background: commentText ? 'var(--c-primary)' : 'var(--c-bg-secondary)',
          color: commentText ? '#fff' : 'var(--c-text-tertiary)',
          display: 'grid', placeItems: 'center',
        }}>
          <Icon name="send" size={18} stroke={2.2} />
        </button>
      </div>
    </div>
  );
}

function CommentItem({ c, t, reply }) {
  const [liked, setLiked] = useState(false);
  const [n, setN] = useState(c.likes);
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <Avatar initial={c.author[0]} bg={c.op ? 'var(--c-primary)' : '#9E9E9E'} size={28} />
        <AuthorLine author={c.author} verified={c.verified} senior={c.senior} honor={c.honor} meta={c.meta} badgeEmphasis={t.badgeEmphasis} />
        {c.op && <span style={{ fontSize: 10.5, fontWeight: 700, padding: '2px 6px', borderRadius: 4, background: 'var(--c-primary)', color: '#fff' }}>작성자</span>}
      </div>
      <div style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--c-text-primary)', marginLeft: 36, textWrap: 'pretty' }}>
        {c.text}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8, marginLeft: 36, fontSize: 12, color: 'var(--c-text-sub)' }}>
        <button onClick={() => { setLiked((v) => !v); setN((x) => x + (liked ? -1 : 1)); }} style={{
          border: 0, background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4,
          color: liked ? 'var(--c-danger)' : 'var(--c-text-sub)', fontSize: 12, fontWeight: 500,
        }}>
          {liked ? '♥' : '♡'} {n}
        </button>
        {!reply && (
          <button style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--c-text-sub)', fontSize: 12, fontWeight: 500 }}>답글</button>
        )}
      </div>
    </div>
  );
}

// ───────── POST COMPOSE ─────────
// Simple institution detector — substring match against known list (production: NER/LLM)
const INSTITUTION_KEYWORDS = ['유학원', '학원', '컨설팅', '아카데미', '에듀', '메이트', '○○', '△△', '□□'];
const PROPER_INSTITUTION_REGEX = /([가-힣A-Za-z0-9]{2,}[\s]*(?:유학원|어학원|학원|컨설팅|아카데미|에듀))/g;

function detectInstitution(text) {
  if (!text) return null;
  const m = text.match(PROPER_INSTITUTION_REGEX);
  if (m && m.length > 0) return m[0].trim();
  // Fallback: detect placeholder forms
  for (const k of ['○○유학원', '○○학원', '△△컨설팅', '△△어학원']) {
    if (text.includes(k)) return k;
  }
  return null;
}

function ComposeScreen({ onBack, onSubmit, t }) {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [tag, setTag] = useState('진학');
  const [anonymity, setAnonymity] = useState(1); // 1: 지역+학년, 2: 학교까지(검증), 3: 완전 익명
  const tags = ['진학', '학습', '진로', '생활', '합격기'];
  const bodyRef = useRef(null);

  // ── @ Mention autocomplete ──
  // Detect "@<query>" pattern at cursor → suggest institutions
  const [mentionQ, setMentionQ] = useState(null); // null | { query, anchorIndex }
  const checkMention = (text, cursor) => {
    if (cursor == null) return null;
    const upToCursor = text.slice(0, cursor);
    const atIdx = upToCursor.lastIndexOf('@');
    if (atIdx === -1) return null;
    const between = upToCursor.slice(atIdx + 1);
    if (/[\s\n]/.test(between)) return null; // mention ended
    if (between.length > 20) return null; // too long
    return { query: between, anchorIndex: atIdx };
  };

  const onBodyChange = (e) => {
    const text = e.target.value;
    setBody(text);
    setMentionQ(checkMention(text, e.target.selectionStart));
  };

  const insertMention = (inst) => {
    if (!mentionQ) return;
    const before = body.slice(0, mentionQ.anchorIndex);
    const after = body.slice(mentionQ.anchorIndex + 1 + mentionQ.query.length);
    const newBody = `${before}@${inst.name} ${after}`;
    setBody(newBody);
    setMentionQ(null);
    // Re-focus
    setTimeout(() => {
      if (bodyRef.current) {
        bodyRef.current.focus();
        const newPos = before.length + inst.name.length + 2;
        bodyRef.current.setSelectionRange(newPos, newPos);
      }
    }, 0);
  };

  const mentionResults = mentionQ
    ? D.reviewSearch.filter((r) => !mentionQ.query || r.name.toLowerCase().includes(mentionQ.query.toLowerCase())).slice(0, 5)
    : [];

  const detected = detectInstitution(body) || detectInstitution(title);

  const anonymityOptions = [
    { v: 1, label: '지역 + 학년', sub: '강남구 고2 학부모', requires: null },
    { v: 2, label: '학교까지', sub: '휘문고 고2 학부모', requires: '검증' },
    { v: 3, label: '완전 익명', sub: '학부모 (지역·학년 X)', requires: null, restriction: '평가 작성 불가' },
  ];

  const previewLabel = (() => {
    if (anonymity === 1) return '강남구 고2 학부모';
    if (anonymity === 2) return '휘문고 고2 학부모';
    return '학부모';
  })();

  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: 600, color: 'var(--c-text-primary)', flex: 1, textAlign: 'center', marginLeft: -36 }}>글쓰기</div>
        <Button kind={title && body ? 'primary' : 'secondary'} size="sm" onClick={() => onSubmit && onSubmit()} disabled={!title || !body}>등록</Button>
      </div>

      <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
        {/* Anonymous identity preview */}
        <div style={{
          padding: 12, background: 'var(--c-bg-secondary)', borderRadius: 10,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <Avatar initial={anonymity === 3 ? '?' : '강'} bg={anonymity === 3 ? 'var(--c-text-tertiary)' : 'var(--c-primary)'} size={36} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--c-text-primary)', display: 'flex', alignItems: 'center', gap: 6 }}>
              {previewLabel}
              {anonymity !== 3 && <Badge kind="verified" emphasis={t.badgeEmphasis} size="xs" />}
              {anonymity === 2 && <Badge kind="senior" emphasis={t.badgeEmphasis} size="xs" />}
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--c-text-tertiary)', marginTop: 2 }}>이렇게 노출됩니다</div>
          </div>
        </div>

        {/* Anonymity radio (3 levels) */}
        <div>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--c-text-sub)', marginBottom: 6, padding: '0 4px' }}>익명 표시 수준</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {anonymityOptions.map((o) => {
              const on = anonymity === o.v;
              return (
                <button key={o.v} onClick={() => setAnonymity(o.v)} style={{
                  flex: 1, padding: '10px 8px', borderRadius: 10, cursor: 'pointer',
                  border: `2px solid ${on ? 'var(--c-primary)' : 'var(--c-border)'}`,
                  background: on ? 'rgba(44,91,255,.04)' : 'var(--c-bg-primary)',
                  textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 2,
                }}>
                  <span style={{ fontSize: 12.5, fontWeight: 700, color: on ? 'var(--c-primary)' : 'var(--c-text-primary)' }}>{o.label}</span>
                  <span style={{ fontSize: 10.5, color: 'var(--c-text-tertiary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{o.sub}</span>
                  {o.requires && <span style={{ fontSize: 10, color: 'var(--c-verified)', fontWeight: 700, marginTop: 2 }}>✓ {o.requires}</span>}
                  {o.restriction && <span style={{ fontSize: 10, color: 'var(--c-warning)', fontWeight: 600, marginTop: 2 }}>⚠ {o.restriction}</span>}
                </button>
              );
            })}
          </div>
        </div>

        {/* Tag selector */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {tags.map((t2) => (
            <button key={t2} onClick={() => setTag(t2)} style={{
              padding: '6px 12px', borderRadius: 16, fontSize: 13, fontWeight: 600, cursor: 'pointer',
              background: tag === t2 ? 'var(--c-primary)' : 'var(--c-bg-secondary)',
              color: tag === t2 ? '#fff' : 'var(--c-text-sub)',
              border: '1px solid ' + (tag === t2 ? 'var(--c-primary)' : 'var(--c-border)'),
            }}>{t2}</button>
          ))}
        </div>

        {/* Title */}
        <input
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="제목을 입력해주세요"
          style={{
            border: 0, borderBottom: '1px solid var(--c-border)', padding: '12px 0',
            fontSize: 18, fontWeight: 700, outline: 'none',
            background: 'transparent', color: 'var(--c-text-primary)', letterSpacing: '-0.02em',
          }}
        />

        {/* AI Moderation soft warning — institution name detected */}
        {detected && (
          <div style={{
            padding: 12, borderRadius: 10,
            background: 'rgba(255,184,0,.10)', border: '1px solid rgba(255,184,0,.30)',
            display: 'flex', gap: 10, alignItems: 'flex-start',
          }}>
            <div style={{ width: 24, height: 24, borderRadius: 6, background: 'var(--c-warning)', display: 'grid', placeItems: 'center', flexShrink: 0, fontSize: 13 }}>⚠</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-text-primary)', marginBottom: 3 }}>
                "<span style={{ color: 'var(--c-warning)' }}>{detected}</span>" 같은 기관 실명을 감지했어요
              </div>
              <div style={{ fontSize: 12, lineHeight: 1.55, color: 'var(--c-text-sub)', textWrap: 'pretty' }}>
                평가가 목적이라면 <b style={{ color: 'var(--c-primary)' }}>[평가 탭]</b>에서 작성해주세요.
                인증된 후기로 게시되어 다른 학부모께 더 도움이 됩니다.
                게시판 작성 시에는 명예훼손 위험이 있으니 사실에 기반한 본인 경험만 작성해주세요.
              </div>
            </div>
          </div>
        )}

        {/* Anonymity restriction warning — level 3 with potential review intent */}
        {anonymity === 3 && detected && (
          <div style={{
            padding: 12, borderRadius: 10,
            background: 'rgba(229,62,62,.06)', border: '1px solid rgba(229,62,62,.20)',
            fontSize: 12.5, color: 'var(--c-text-primary)', lineHeight: 1.55, textWrap: 'pretty',
          }}>
            🚫 완전 익명으로는 기관 평가성 글을 게시할 수 없습니다. 익명 수준을 변경하거나 평가 탭으로 이동해주세요.
          </div>
        )}

        {/* Body with @-mention autocomplete */}
        <div style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column' }}>
          <textarea
            ref={bodyRef}
            value={body}
            onChange={onBodyChange}
            onKeyUp={(e) => setMentionQ(checkMention(e.target.value, e.target.selectionStart))}
            onClick={(e) => setMentionQ(checkMention(e.target.value, e.target.selectionStart))}
            placeholder={`자녀 입시·학업·진로에 대해\n학부모님들과 솔직하게 나눠주세요.\n\n· @ 입력 시 등록된 기관 자동완성\n· 광고·홍보성 글은 자동 검수됩니다\n· 익명성은 끝까지 보호됩니다`}
            style={{
              flex: 1, minHeight: 200, border: 0, outline: 'none', resize: 'none',
              fontSize: 15.5, lineHeight: 1.65, padding: '8px 0', background: 'transparent',
              color: 'var(--c-text-primary)', fontFamily: 'inherit',
            }}
          />

          {/* Autocomplete dropdown */}
          {mentionQ && mentionResults.length > 0 && (
            <div style={{
              position: 'absolute', left: 0, right: 0,
              top: Math.min(50 + (mentionQ.anchorIndex / 50) * 24, 200),
              maxWidth: 320,
              background: 'var(--c-bg-primary)',
              border: '1px solid var(--c-border)',
              borderRadius: 10,
              boxShadow: '0 8px 24px rgba(0,0,0,.12)',
              padding: 4, zIndex: 100, maxHeight: 280, overflowY: 'auto',
            }}>
              <div style={{ padding: '6px 10px 4px', fontSize: 11, fontWeight: 700, color: 'var(--c-text-tertiary)', borderBottom: '1px solid var(--c-border-soft)' }}>
                기관 자동완성 — "{mentionQ.query || '...'}" 검색
              </div>
              {mentionResults.map((r) => (
                <button key={r.id} onClick={() => insertMention(r)} onMouseDown={(e) => e.preventDefault()} style={{
                  width: '100%', padding: '8px 10px', border: 0, background: 'transparent', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', gap: 10, textAlign: 'left', borderRadius: 6,
                }} onMouseOver={(e) => e.currentTarget.style.background = 'var(--c-bg-secondary)'} onMouseOut={(e) => e.currentTarget.style.background = 'transparent'}>
                  <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--c-bg-secondary)', display: 'grid', placeItems: 'center', fontSize: 13, flexShrink: 0 }}>🏢</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-text-primary)' }}>{r.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--c-text-sub)' }}>{r.catLabel || r.cat} · ★ {r.rating}</div>
                  </div>
                  <Icon name="arrowR" size={12} color="var(--c-text-tertiary)" />
                </button>
              ))}
              <div style={{ padding: '6px 10px', fontSize: 10.5, color: 'var(--c-text-tertiary)', borderTop: '1px solid var(--c-border-soft)' }}>
                ⓘ 기관 멘션은 자동 링크되며, 평가 글이라면 [평가 작성]을 권장
              </div>
            </div>
          )}

          {/* Mention helper hint */}
          {!mentionQ && body.length === 0 && (
            <div style={{ position: 'absolute', bottom: 12, left: 0, fontSize: 11, color: 'var(--c-text-tertiary)' }}>
              <kbd style={{ padding: '1px 6px', borderRadius: 4, background: 'var(--c-bg-secondary)', border: '1px solid var(--c-border)', fontSize: 10, fontWeight: 700 }}>@</kbd> 키로 등록 기관 자동완성
            </div>
          )}
        </div>

        {/* Toolbar */}
        <div style={{ display: 'flex', gap: 4, paddingTop: 12, borderTop: '1px solid var(--c-border)' }}>
          {[{ i: 'image', l: '사진' }, { i: 'pin', l: '태그' }, { i: 'sparkle', l: 'AI 첨삭' }].map((b) => (
            <button key={b.l} style={{
              padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 6,
              border: 0, background: 'transparent', cursor: 'pointer',
              color: 'var(--c-text-sub)', fontSize: 13, fontWeight: 500,
            }}>
              <Icon name={b.i} size={18} />{b.l}
            </button>
          ))}
          <div style={{ flex: 1 }} />
          <div style={{ padding: '8px 4px', fontSize: 11, color: 'var(--c-text-tertiary)', fontVariantNumeric: 'tabular-nums' }}>
            {body.length} / 10,000
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PostDetailScreen, ComposeScreen });