function Badges({ items, size = 13 }) {
  return items && items.length ? (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, marginLeft: 4 }}>
      <i className={'ti ti-' + items[0]} style={{ fontSize: size, color: 'var(--text-accent)' }}></i>
      {items.length > 1 && <span style={{ font: 'var(--text-micro)', color: 'var(--text-accent)' }}>+{items.length - 1}</span>}
    </span>
  ) : null;
}

function LikeStack({ count, size = 14 }) {
  const [on, setOn] = React.useState(false);
  return (
    <span onClick={() => setOn(v => !v)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, flexShrink: 0, cursor: 'pointer' }}>
      <i className="ti ti-heart" style={{ fontSize: size, color: on ? 'var(--text-accent)' : 'var(--text-secondary)' }}></i>
      <span style={{ font: 'var(--text-micro)', color: on ? 'var(--text-accent)' : 'var(--text-muted)' }}>{count + (on ? 1 : 0)}</span>
    </span>
  );
}

function Reply({ r, onMenu, onReply, menuOpen, onToggleMenu, onReport, onBlock }) {
  const { Avatar } = window.SpotureDesignSystem_f7ad96;
  return (
    <div style={{ display: 'flex', gap: 10, position: 'relative' }}>
      <Avatar user={r.user} size={28} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
          <div style={{ minWidth: 0 }}>
            <span style={{ font: 'var(--text-body-strong)', fontSize: 13 }}>{r.user}</span>
            <Badges items={r.badges} size={12} />
            <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', marginLeft: 6 }}>{r.time}</span>
            <p style={{ font: 'var(--text-caption)', margin: '3px 0 5px' }}>
              {r.mention && <span style={{ color: 'var(--text-accent)', fontWeight: 600 }}>@{r.mention} </span>}
              {r.text}
            </p>
            <span onClick={() => onReply && onReply(r)} style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)', cursor: 'pointer', fontWeight: 600 }}>답글 달기</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, flexShrink: 0 }}>
            <LikeStack count={r.likes} size={13} />
            <i className="ti ti-dots" onClick={onToggleMenu} style={{ fontSize: 14, color: 'var(--text-secondary)', cursor: 'pointer', marginTop: 1 }}></i>
          </div>
        </div>
        {menuOpen && (
          <div style={{ position: 'absolute', right: 0, top: 31, zIndex: 40, minWidth: 168, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', boxShadow: 'var(--shadow-float)', overflow: 'hidden' }}>
            <div onClick={() => onReport && onReport(r)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 15px', font: 'var(--text-caption)', color: 'var(--text-danger)', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}><i className="ti ti-flag" style={{ fontSize: 15 }}></i>신고하기</div>
            <div onClick={() => onBlock && onBlock(r)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 15px', font: 'var(--text-caption)', color: 'var(--text-danger)', cursor: 'pointer' }}><i className="ti ti-user-off" style={{ fontSize: 15 }}></i>차단하기</div>
          </div>
        )}
      </div>
    </div>
  );
}

function CommentsSheet({ post, onClose, onReport, onBlock }) {
  const { BottomSheet, Avatar } = window.SpotureDesignSystem_f7ad96;
  const [draft, setDraft] = React.useState('');
  const [menu, setMenu] = React.useState(null);
  const [expanded, setExpanded] = React.useState({});
  const inputRef = React.useRef(null);
  const reply = (target) => { setDraft('@' + target.user + ' '); if (inputRef.current) inputRef.current.focus(); };
  const comments = [
    {
      user: '밥순이', badges: ['map-pin-check', 'soup'], time: '3시간 전', likes: 3,
      text: '여기 진짜 줄 서서 먹는 곳이에요',
      more: 10,
      replies: [
        { user: '야식러버', badges: ['moon-stars'], time: '2시간 전', likes: 1, text: '저도 항상 웨이팅해요 ㅠㅠ' },
        { user: '순대국매니아', badges: ['soup'], time: '1시간 전', likes: 0, mention: '야식러버', text: '그쵸 저번주에도 웨이팅했어요' }
      ]
    },
    { user: '카페인탐정', badges: ['coffee'], time: '2시간 전', likes: 5, text: '국물이 진해서 해장으로 최고예요', replies: [] },
    { user: '떡볶이덕후', time: '1시간 전', likes: 0, text: '주차는 건물 지하에 하면 되나요?', replies: [] }
  ];
  const composer = (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, }}>
          <Avatar user="국밥러버92" size={34} />
          <input ref={inputRef} value={draft} onChange={e => setDraft(e.target.value)} placeholder="댓글 달기..." style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'var(--surface-2)', borderRadius: 'var(--radius-chip)', padding: '12px 16px', font: 'var(--text-body)', color: 'var(--text-primary)', fontFamily: 'var(--font-family)' }} />
          <span onClick={() => setDraft('')} style={{ font: '600 15px/1 var(--font-family)', color: draft ? 'var(--text-accent)' : 'var(--text-muted)', cursor: 'pointer', flexShrink: 0 }}>게시</span>
        </div>
  );
  return (
    <BottomSheet footer={composer} title={'댓글 ' + (comments.length + 12) + '개'} onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginBottom: 18 }}>
        {comments.map((c, ci) => (
          <div key={c.user} style={{ display: 'flex', gap: 10, position: 'relative' }}>
            <Avatar user={c.user} size={34} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ minWidth: 0 }}>
                  <span style={{ font: 'var(--text-body-strong)' }}>{c.user}</span>
                  <Badges items={c.badges} />
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', marginLeft: 6 }}>{c.time}</span>
                  <p style={{ font: 'var(--text-body)', margin: '3px 0 5px' }}>{c.text}</p>
                  <span onClick={() => reply(c)} style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', cursor: 'pointer', fontWeight: 600 }}>답글 달기</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, flexShrink: 0 }}>
                  <LikeStack count={c.likes} />
                  <i className="ti ti-dots" onClick={() => setMenu(menu === ci ? null : ci)} style={{ fontSize: 16, color: 'var(--text-secondary)', cursor: 'pointer', marginTop: 1 }}></i>
                </div>
              </div>
              {menu === ci && (
                <div style={{ position: 'absolute', right: 0, top: 31, zIndex: 40, minWidth: 168, background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', boxShadow: 'var(--shadow-float)', overflow: 'hidden' }}>
                  <div onClick={() => { setMenu(null); onReport && onReport(c); }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '13px 16px', font: 'var(--text-caption)', color: 'var(--text-danger)', borderBottom: '1px solid var(--border)', cursor: 'pointer' }}><i className="ti ti-flag" style={{ fontSize: 15 }}></i>신고하기</div>
                  <div onClick={() => { setMenu(null); onBlock && onBlock(c); }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '13px 16px', font: 'var(--text-caption)', color: 'var(--text-danger)', cursor: 'pointer' }}><i className="ti ti-user-off" style={{ fontSize: 15 }}></i>차단하기</div>
                </div>
              )}
              {c.replies.length > 0 && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 14, paddingLeft: 14, borderLeft: '2px solid var(--border)' }}>
                  {c.replies.map(r => <Reply key={r.user} r={r} onReply={reply} menuOpen={menu === ci + ':' + r.user} onToggleMenu={() => setMenu(menu === ci + ':' + r.user ? null : ci + ':' + r.user)} onReport={() => { setMenu(null); onReport && onReport(r); }} onBlock={() => { setMenu(null); onBlock && onBlock(r); }} />)}
                </div>
              )}
              {c.more && !expanded[ci] && (
                <div onClick={() => setExpanded(e => ({ ...e, [ci]: true }))} style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 0 14px', cursor: 'pointer' }}>
                  <div style={{ width: 24, height: 1, background: 'var(--border-strong)' }}></div>
                  <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', fontWeight: 600 }}>답글 {c.more}개 더보기</span>
                </div>
              )}
              {c.more && expanded[ci] && (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginTop: 14, paddingLeft: 14, borderLeft: '2px solid var(--border)' }}>
                  {[{ user: '국밥마니아', badges: ['soup'], time: '50분 전', likes: 2, text: '평일 저녁이 그나마 한가해요' }, { user: '동네박사', badges: ['building-store'], time: '30분 전', likes: 1, mention: '국밥마니아', text: '맞아요 6시 전에 가면 바로 앉아요' }].map(r => <Reply key={r.user} r={r} onReply={reply} menuOpen={menu === ci + ':' + r.user} onToggleMenu={() => setMenu(menu === ci + ':' + r.user ? null : ci + ':' + r.user)} onReport={() => { setMenu(null); onReport && onReport(r); }} onBlock={() => { setMenu(null); onBlock && onBlock(r); }} />)}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </BottomSheet>
  );
}
window.CommentsSheet = CommentsSheet;

function BlockConfirm({ name, onCancel, onConfirm }) {
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(20,20,20,.42)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32, zIndex: 70 }}>
      <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 24, textAlign: 'center', boxShadow: 'var(--shadow-float)', maxWidth: 300 }}>
        <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'var(--bg-danger)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}><i className="ti ti-user-off" style={{ fontSize: 23, color: 'var(--text-danger)' }}></i></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 8 }}>{name}님을 차단할까요?</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 20px', lineHeight: 1.6 }}>이 사용자의 제보가 목록에서 사라지고, 앞으로 내 게시물에 댓글·답글과 위치 제보를 남길 수 없어요.</p>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={onCancel} style={{ flex: 1, padding: '13px 0', font: '600 14px/1 var(--font-family)', border: '1px solid var(--border-strong)', background: 'var(--surface-1)', color: 'var(--text-primary)', borderRadius: 999, cursor: 'pointer' }}>취소</button>
          <button onClick={onConfirm} style={{ flex: 1, padding: '13px 0', font: '600 14px/1 var(--font-family)', border: 'none', background: 'var(--text-accent)', color: '#fff', borderRadius: 999, cursor: 'pointer' }}>차단하기</button>
        </div>
      </div>
    </div>
  );
}
window.BlockConfirm = BlockConfirm;