function PostMenuSheet({ post, onClose, onReport, onShare, onLike, onComments, liked }) {
  const { BottomSheet } = window.SpotureDesignSystem_f7ad96;
  const p = post || {};
  const rows = [
    { icon: 'share-2', label: '공유하기', go: 'share' },
    { icon: 'eye-off', label: '피드에서 숨기기' },
    { icon: 'flag', label: '신고하기', danger: true, go: 'report' }
  ];
  return (
    <BottomSheet title={(post && post.user ? post.user + '님의 게시물' : '게시물')} onClose={onClose}>
      {onLike && (
        <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
          <div onClick={onLike} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, background: liked ? 'var(--bg-accent)' : 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 0', cursor: 'pointer' }}>
            <i className="ti ti-heart" style={{ fontSize: 20, color: liked ? 'var(--text-accent)' : 'var(--text-primary)' }}></i>
            <span style={{ font: '600 13px/1 var(--font-family)', color: liked ? 'var(--text-accent)' : 'var(--text-primary)' }}>{(p.likes || 0) + (liked ? 1 : 0)}</span>
          </div>
          <div onClick={onComments} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 0', cursor: 'pointer' }}>
            <i className="ti ti-message-circle" style={{ fontSize: 20, color: 'var(--text-primary)' }}></i>
            <span style={{ font: '600 13px/1 var(--font-family)', color: 'var(--text-primary)' }}>{p.comments || 0}</span>
          </div>
          <div onClick={() => onShare ? onShare() : onClose()} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 0', cursor: 'pointer' }}>
            <i className="ti ti-share-2" style={{ fontSize: 20, color: 'var(--text-primary)' }}></i>
            <span style={{ font: '600 13px/1 var(--font-family)', color: 'var(--text-primary)' }}>공유</span>
          </div>
        </div>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {rows.map(r => (
          <div key={r.label} onClick={() => r.go === 'report' ? onReport() : r.go === 'share' ? (onShare ? onShare() : onClose()) : onClose()} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '16px 18px', background: r.danger ? 'var(--bg-danger)' : 'var(--surface-2)', borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
            <i className={'ti ti-' + r.icon} style={{ fontSize: 18, color: r.danger ? 'var(--text-danger)' : 'var(--text-primary)' }}></i>
            <span style={{ font: 'var(--text-body)', color: r.danger ? 'var(--text-danger)' : 'var(--text-primary)' }}>{r.label}</span>
          </div>
        ))}
      </div>
    </BottomSheet>
  );
}
window.PostMenuSheet = PostMenuSheet;

function SharePostSheet({ post, onClose, onSaved }) {
  const { BottomSheet, Toast } = window.SpotureDesignSystem_f7ad96;
  const [copied, setCopied] = React.useState(false);
  const [saveOpen, setSaveOpen] = React.useState(new URLSearchParams(location.search).get('save') != null);
  const [savedN, setSavedN] = React.useState(null);
  const p = post || {};
  const link = 'spoture.app/p/' + (p.id || 'a7k2m9');
  const apps = [
    { icon: 'brand-kako-talk', label: '카카오톡', bg: '#FEE500', fg: '#1A1A1A' },
    { icon: 'brand-instagram', label: '스토리', bg: '#E1306C', fg: '#fff' },
    { icon: 'message', label: '문자', bg: 'var(--surface-2)', fg: 'var(--text-primary)' },
    { icon: 'dots', label: '더보기', bg: 'var(--surface-2)', fg: 'var(--text-primary)' }
  ];
  const rows = [
    { icon: 'download', label: '이미지 저장', sub: '사진 ' + (p.mediaCount || 1) + '장 중 골라 내려받기', act: () => setSaveOpen(true) },
    { icon: 'bookmark', label: '내 컬렉션에 저장', sub: '나중에 다시 보기', act: onClose }
  ];
  if (savedN != null) return <Toast message={'앨범에 사진 ' + savedN + '장을 저장했어요'} icon="download" onClose={() => { setSavedN(null); onClose && onClose(); }} />;
  if (saveOpen) return <SaveImageSheet post={p} onClose={() => setSaveOpen(false)} onDone={(n) => { setSaveOpen(false); setSavedN(n); onSaved && onSaved(n); }} />;
  return (
    <BottomSheet title="게시물 공유" onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: 12 }}>
          <div style={{ width: 56, height: 56, borderRadius: 12, background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className={p.hasVideo ? 'ti ti-video' : 'ti ti-photo'} style={{ fontSize: 21, color: 'var(--text-muted)' }}></i></div>
          <div style={{ minWidth: 0 }}>
            <div style={{ font: 'var(--text-body-strong)', marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.menu ? '#' + p.menu : '게시물'}</div>
            <div style={{ font: 'var(--text-small)', color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{(p.user || '이웃') + (p.place ? ' · ' + p.place : '')}</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {apps.map(a => (
            <div key={a.label} onClick={onClose} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
              <div style={{ width: 54, height: 54, borderRadius: '50%', background: a.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + a.icon} style={{ fontSize: 23, color: a.fg }}></i></div>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)' }}>{a.label}</span>
            </div>
          ))}
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>게시물 링크</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 14px' }}>
            <i className="ti ti-link" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            <span style={{ flex: 1, minWidth: 0, font: 'var(--text-small)', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{link}</span>
            <span onClick={() => setCopied(true)} style={{ flexShrink: 0, minWidth: 66, textAlign: 'center', boxSizing: 'border-box', font: '600 13px/1 var(--font-family)', color: copied ? 'var(--text-accent)' : '#fff', background: copied ? 'var(--bg-accent)' : 'var(--bg-ink)', borderRadius: 999, padding: '9px 14px', cursor: 'pointer' }}>{copied ? '복사됨' : '복사'}</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {rows.map(r => (
            <div key={r.label} onClick={r.act} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '15px 16px', background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
              <i className={'ti ti-' + r.icon} style={{ fontSize: 19, color: 'var(--text-primary)', flexShrink: 0 }}></i>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>{r.label}</div>
                <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{r.sub}</div>
              </div>
              <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            </div>
          ))}
        </div>
      </div>
    </BottomSheet>
  );
}
window.SharePostSheet = SharePostSheet;

function SharePlaceSheet({ place, onClose }) {
  const { BottomSheet, Toast } = window.SpotureDesignSystem_f7ad96;
  const [copied, setCopied] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const p = place || {};
  const link = 'spoture.app/s/' + (p.id || 'h3n8k1');
  const apps = [
    { icon: 'brand-kako-talk', label: '카카오톡', bg: '#FEE500', fg: '#1A1A1A' },
    { icon: 'brand-instagram', label: '스토리', bg: '#E1306C', fg: '#fff' },
    { icon: 'message', label: '문자', bg: 'var(--surface-2)', fg: 'var(--text-primary)' },
    { icon: 'dots', label: '더보기', bg: 'var(--surface-2)', fg: 'var(--text-primary)' }
  ];
  const rows = [
    { icon: 'map-pin-share', label: '지도 링크 복사', sub: '지도 앱에서 바로 열리는 링크', act: () => setToast('지도 링크를 복사했어요') },
    { icon: 'bookmark', label: '찜 목록에 저장', sub: '나중에 다시 찾기', act: () => setToast('찜 목록에 저장했어요') }
  ];
  if (toast) return <Toast message={toast} icon={toast.indexOf('지도') > -1 ? 'link' : 'bookmark'} onClose={() => { setToast(null); onClose && onClose(); }} />;
  return (
    <BottomSheet title="가게 공유" onClose={onClose}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: 12 }}>
          <div style={{ width: 56, height: 56, borderRadius: 12, background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-building-store" style={{ fontSize: 21, color: 'var(--text-muted)' }}></i></div>
          <div style={{ minWidth: 0 }}>
            <div style={{ font: 'var(--text-body-strong)', marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.name || '할매순대국 강남점'}</div>
            <div style={{ font: 'var(--text-small)', color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.addr || '서울 강남구 강남대로 123'}</div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
          {apps.map(a => (
            <div key={a.label} onClick={onClose} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
              <div style={{ width: 54, height: 54, borderRadius: '50%', background: a.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + a.icon} style={{ fontSize: 23, color: a.fg }}></i></div>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)' }}>{a.label}</span>
            </div>
          ))}
        </div>
        <div>
          <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 9 }}>가게 링크</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '13px 14px' }}>
            <i className="ti ti-link" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            <span style={{ flex: 1, minWidth: 0, font: 'var(--text-small)', color: 'var(--text-secondary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{link}</span>
            <span onClick={() => setCopied(true)} style={{ flexShrink: 0, minWidth: 66, textAlign: 'center', boxSizing: 'border-box', font: '600 13px/1 var(--font-family)', color: copied ? 'var(--text-accent)' : '#fff', background: copied ? 'var(--bg-accent)' : 'var(--bg-ink)', borderRadius: 999, padding: '9px 14px', cursor: 'pointer' }}>{copied ? '복사됨' : '복사'}</span>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {rows.map(r => (
            <div key={r.label} onClick={r.act} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '15px 16px', background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', cursor: 'pointer' }}>
              <i className={'ti ti-' + r.icon} style={{ fontSize: 19, color: 'var(--text-primary)', flexShrink: 0 }}></i>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: 'var(--text-body)', marginBottom: 2 }}>{r.label}</div>
                <div style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{r.sub}</div>
              </div>
              <i className="ti ti-chevron-right" style={{ fontSize: 15, color: 'var(--text-muted)', flexShrink: 0 }}></i>
            </div>
          ))}
        </div>
      </div>
    </BottomSheet>
  );
}
window.SharePlaceSheet = SharePlaceSheet;


function ReportSheet({ post, onClose, onDone }) {
  const { BottomSheet, Button } = window.SpotureDesignSystem_f7ad96;
  const [picked, setPicked] = React.useState(null);
  const [note, setNote] = React.useState('');
  const reasons = ['부적절한 콘텐츠', '스팸 · 광고성 게시물', '음식과 무관한 사진', '위치 정보 오류', '저작권 침해', '기타'];
  const submit = <Button variant={picked ? 'accent' : 'secondary'} onClick={picked ? onDone : undefined} style={picked ? {} : { opacity: .5, cursor: 'default' }}>신고 접수하기</Button>;
  return (
    <BottomSheet title="신고하기" footer={submit} onClose={onClose}>
      <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 16px' }}>신고 사유를 선택해 주세요. 3명 이상 신고하면 게시물이 임시 비공개되고 운영자가 검토해요.</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
        {reasons.map(r => (
          <div key={r} onClick={() => setPicked(r)} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '15px 18px', borderRadius: 'var(--radius-tile)', cursor: 'pointer', background: picked === r ? 'var(--bg-accent)' : 'var(--surface-2)', border: picked === r ? '1.5px solid var(--border-accent)' : '1.5px solid transparent' }}>
            <span style={{ font: 'var(--text-body)', color: picked === r ? 'var(--text-accent)' : 'var(--text-primary)', fontWeight: picked === r ? 600 : 400 }}>{r}</span>
            {picked === r && <i className="ti ti-check" style={{ fontSize: 17, color: 'var(--text-accent)' }}></i>}
          </div>
        ))}
      </div>
      {picked === '기타' && (
        <textarea value={note} onChange={e => setNote(e.target.value)} placeholder="어떤 점이 문제인지 알려주세요" rows={3} style={{ width: '100%', boxSizing: 'border-box', border: 'none', outline: 'none', resize: 'none', background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 18px', font: 'var(--text-body)', color: 'var(--text-primary)', marginBottom: 16, fontFamily: 'var(--font-family)' }}></textarea>
      )}
    </BottomSheet>
  );
}
window.ReportSheet = ReportSheet;