function BadgeTooltip({ post, onClose }) {
  const badges = (post && post.badges) || [];
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(20,20,20,.42)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 32, zIndex: 70 }}>
      <div onClick={e => e.stopPropagation()} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 24, boxShadow: 'var(--shadow-float)', maxWidth: 300, width: '100%' }}>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 4 }}>{post && post.user}님의 배지</span>
        <span style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', display: 'block', marginBottom: 18 }}>활동으로 자동 획득한 배지예요</span>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {badges.map(b => (
            <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 16px' }}>
              <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--bg-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className={'ti ti-' + b.icon} style={{ fontSize: 16, color: 'var(--text-accent)' }}></i></div>
              <span style={{ font: 'var(--text-body)' }}>{b.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
window.BadgeTooltip = BadgeTooltip;

function SuggestDoneModal({ name, onClose, mode }) {
  const reg = mode !== 'suggest';
  const ro = (w) => { const c = (w || '').charCodeAt((w || '').length - 1) - 44032; return (c >= 0 && c < 11172 && c % 28 !== 0) ? '으로' : '로'; };
  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: 26, textAlign: 'center', boxShadow: 'var(--shadow-float)', maxWidth: 300 }}>
        <div style={{ width: 60, height: 60, borderRadius: '50%', background: 'var(--bg-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}><i className={reg ? 'ti ti-map-pin-check' : 'ti ti-send'} style={{ fontSize: 26, color: 'var(--text-accent)' }}></i></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 8 }}>{reg ? '위치를 등록했어요' : '제안을 보냈어요'}</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 18px', lineHeight: 1.6 }}>{reg
          ? <React.Fragment>{name ? name + ro(name) : '선택한 위치로'} 등록했어요.<br />이제 이웃들이 이 사진으로 맛집을 찾아갈 수 있어요.</React.Fragment>
          : <React.Fragment>{name ? name + ro(name) : '선택한 위치로'} 제안했어요.<br />작성자가 승인하면 이 게시물에 위치가 채워지고 알림으로 알려드릴게요.</React.Fragment>}</p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '12px 14px', marginBottom: 18, textAlign: 'left' }}>
          <i className="ti ti-award" style={{ fontSize: 17, color: 'var(--text-accent)', flexShrink: 0 }}></i>
          <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)' }}>{reg ? <React.Fragment>남아 있던 <b style={{ color: 'var(--text-primary)' }}>위치 제보 3건</b>은 자동으로 정리됐어요</React.Fragment> : <React.Fragment>승인되면 <b style={{ color: 'var(--text-primary)' }}>위치제보왕</b> 배지에 1건 적립돼요</React.Fragment>}</span>
        </div>
        <button onClick={onClose} style={{ width: '100%', padding: '15px 0', font: '600 15px/1 var(--font-family)', border: 'none', background: 'var(--bg-ink)', color: '#fff', borderRadius: 999, cursor: 'pointer' }}>확인</button>
      </div>
    </div>
  );
}
window.SuggestDoneModal = SuggestDoneModal;

function SetPlaceDoneModal({ name, addr, detail, onClose, onView }) {
  const ro = (w) => { const c = (w || '').charCodeAt((w || '').length - 1) - 44032; return (c >= 0 && c < 11172 && c % 28 !== 0) ? '으로' : '로'; };
  const lines = [
    { icon: 'map-pin', text: '피드와 내 게시물에 위치가 바로 채워져요' },
    { icon: 'users', text: '이웃들이 이 사진으로 이 가게를 찾아갈 수 있어요' },
    addr ? { icon: 'building-store', text: '새 가게로 등록돼요 · 확인 후 지도에 반영' } : { icon: 'photo', text: '이 가게의 사진 수에 1장 더해져요' }
  ];
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(20,20,20,.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 26, zIndex: 95 }}>
      <div style={{ width: '100%', background: 'var(--surface-1)', borderRadius: 22, padding: '26px 22px 22px', boxShadow: 'var(--shadow-float)', boxSizing: 'border-box' }}>
        <div style={{ width: 54, height: 54, borderRadius: '50%', background: 'var(--bg-success)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 15px' }}><i className="ti ti-map-pin-check" style={{ fontSize: 25, color: 'var(--text-success)' }}></i></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', textAlign: 'center', marginBottom: 8 }}>위치를 지정했어요</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', textAlign: 'center', margin: '0 0 18px', lineHeight: 1.6, textWrap: 'pretty' }}>{name}{ro(name)} 지정했어요</p>
        <div style={{ background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '15px 16px', marginBottom: 20 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 11, paddingBottom: 13, marginBottom: 13, borderBottom: '1px solid var(--border)' }}>
            <div style={{ width: 38, height: 38, borderRadius: 11, background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-tools-kitchen-2" style={{ fontSize: 17, color: 'var(--text-secondary)' }}></i></div>
            <div style={{ minWidth: 0 }}>
              <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</span>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{[addr, detail].filter(Boolean).join(' · ') || '등록된 가게'}</span>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {lines.map(l => (
              <div key={l.text} style={{ display: 'flex', gap: 10 }}>
                <i className={'ti ti-' + l.icon} style={{ fontSize: 15, color: 'var(--text-secondary)', flexShrink: 0, marginTop: 2 }}></i>
                <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', lineHeight: 1.55 }}>{l.text}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          <span onClick={onView || onClose} style={{ textAlign: 'center', font: '600 15px/1 var(--font-family)', color: '#fff', background: 'var(--bg-ink)', borderRadius: 999, padding: '17px 0', cursor: 'pointer' }}>가게 정보 보기</span>
          <span onClick={onClose} style={{ textAlign: 'center', font: '600 15px/1 var(--font-family)', color: 'var(--text-secondary)', borderRadius: 999, padding: '15px 0', cursor: 'pointer' }}>확인</span>
        </div>
      </div>
    </div>
  );
}
window.SetPlaceDoneModal = SetPlaceDoneModal;
