function MyPosts({ nav }) {
  const [filter, setFilter] = React.useState('전체');
  const [open, setOpen] = React.useState(null);
  const { Toast } = window.SpotureDesignSystem_f7ad96;
  const [sheet, setSheet] = React.useState(() => {
    const s = new URLSearchParams(location.search).get('sheet');
    return ['menu', 'photos', 'delete'].includes(s) ? { type: s, post: { place: '할매순대국 강남점', menu: '순대국', mediaCount: 4, likes: 128, comments: 24, time: '2시간 전', _key: '순대국0' } } : null;
  });
  const [toast, setToast] = React.useState(null);
  const [gone, setGone] = React.useState({});
  const [hiddenMap, setHiddenMap] = React.useState({});
  const all = [
    { place: '할매순대국 강남점', menu: '순대국', mediaCount: 4, likes: 128, comments: 24, time: '2시간 전' },
    { menu: '스테이크 플래터', mission: true, mediaCount: 3, likes: 64, comments: 8, time: '5시간 전', missionStatus: 'review' },
    { place: '역삼동 국밥집', menu: '내장탕', mediaCount: 2, likes: 76, comments: 8, time: '어제' },
    { menu: '수육', mediaCount: 3, likes: 41, comments: 5, time: '3일 전', reportCount: 2 },
    { place: '멘야하나비 역삼', menu: '마제소바', mediaCount: 6, hasVideo: true, likes: 91, comments: 12, time: '5일 전' },
    { menu: '부대찌개', mission: true, mediaCount: 3, likes: 52, comments: 6, time: '1주 전', missionStatus: 'done' },
    { menu: '로제떡볶이', mediaCount: 5, likes: 63, comments: 9, time: '1주 전', reportCount: 1 },
    { place: '로스트림 로스터스', menu: '핸드드립', mediaCount: 1, likes: 44, comments: 3, time: '2주 전' },
    { place: '역삼 해장촌', menu: '뼈해장국', mediaCount: 2, likes: 54, comments: 6, time: '3주 전' },
    { place: '이문설농탕 역삼', menu: '설농탕', mediaCount: 1, likes: 33, comments: 2, time: '한 달 전' },
    { menu: '차돌짬뽕', mission: true, mediaCount: 3, likes: 28, comments: 3, time: '한 달 전', missionStatus: 'rejected' },
    { place: '을밀대 역삼', menu: '냉면', mediaCount: 3, likes: 71, comments: 11, time: '한 달 전' }
  ];
  const items = all.map((p, i) => ({ ...p, _key: p.menu + i })).filter(p => !gone[p._key]);
  const list = filter === '전체' ? items : filter === '미션' ? items.filter(i => i.mission) : filter === '장소 미지정' ? items.filter(i => !i.place && !i.mission) : items.filter(i => i.place);
  const missionLabel = { review: '심사 중', done: '응모 완료', rejected: '반려' };
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="내 게시물" sub={'전체 ' + items.length + '개 · 미션 인증 ' + items.filter(i => i.mission).length + '개'} onBack={() => nav('profile')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', paddingBottom: 104 }}>
        <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto' }}>
          {['전체', '미션', '장소 확정', '장소 미지정'].map(t => (
            <span key={t} onClick={() => setFilter(t)} style={{ flexShrink: 0, font: filter === t ? '600 13px/1 var(--font-family)' : '400 13px/1 var(--font-family)', color: filter === t ? '#fff' : 'var(--text-primary)', background: filter === t ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '11px 16px', cursor: 'pointer', boxShadow: 'var(--shadow-card)' }}>{t}</span>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gridAutoRows: 'min-content', gap: 10, padding: '0 20px' }}>
          {list.map((p, i) => (
            <div key={p._key} onClick={() => setOpen({ ...p, user: '국밥러버92', imageId: 'mypost-' + i })} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', overflow: 'hidden', boxShadow: 'var(--shadow-card)', cursor: 'pointer' }}>
              <div style={{ width: '100%', aspectRatio: '1', background: 'var(--surface-2)', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <i className={p.hasVideo ? 'ti ti-video' : 'ti ti-photo'} style={{ fontSize: 24, color: 'var(--text-muted)' }}></i>
                {p.mediaCount > 1 && <span style={{ position: 'absolute', right: 8, top: 8, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.68)', borderRadius: 999, padding: '4px 8px' }}>1/{p.mediaCount}</span>}
                <span style={{ position: 'absolute', left: 8, bottom: 8, font: 'var(--text-micro)', color: '#fff', background: 'rgba(26,26,26,.68)', borderRadius: 999, padding: '4px 8px' }}>#{p.menu}</span>
                {p.mission
                  ? <span style={{ position: 'absolute', left: 8, top: 8, font: '700 10px/1 var(--font-family)', color: '#fff', background: 'var(--text-accent)', borderRadius: 999, padding: '5px 8px', letterSpacing: '.03em' }}>MISSION</span>
                  : p.reportCount ? <span style={{ position: 'absolute', left: 8, top: 8, font: '600 11px/1 var(--font-family)', color: '#fff', background: 'var(--text-warning)', borderRadius: 999, padding: '5px 8px', display: 'inline-flex', alignItems: 'center', gap: 3 }}><i className="ti ti-map-pin-question" style={{ fontSize: 10 }}></i>제보 {p.reportCount}</span> : null}
              </div>
              <div style={{ padding: '11px 12px 13px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6 }}>
                  <i className={p.mission ? 'ti ti-gift' : p.place ? 'ti ti-map-pin' : 'ti ti-map-pin-question'} style={{ fontSize: 11, color: p.mission ? 'var(--text-accent)' : p.place ? 'var(--text-secondary)' : 'var(--text-warning)', flexShrink: 0 }}></i>
                  <span style={{ font: 'var(--text-small)', fontWeight: 600, color: p.mission ? 'var(--text-accent)' : p.place ? 'var(--text-primary)' : 'var(--text-warning)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p.mission ? '밀키트 미션 · ' + missionLabel[p.missionStatus] : p.place || (p.reportCount ? '제보 확인 필요' : '장소 미지정')}</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><i className="ti ti-heart" style={{ fontSize: 10 }}></i>{p.likes}</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'inline-flex', alignItems: 'center', gap: 3 }}><i className="ti ti-message-circle" style={{ fontSize: 10 }}></i>{p.comments}</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', marginLeft: 'auto' }}>{p.time}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      {open && <PostViewer post={open} onClose={() => setOpen(null)} onComments={() => setOpen(null)} onMenu={() => { setSheet({ type: 'menu', post: open }); setOpen(null); }} onPlace={() => { setOpen(null); nav('restaurantDetail'); }} />}
      {sheet && sheet.type === 'menu' && <MyPostMenuSheet post={{ ...sheet.post, hidden: !!hiddenMap[sheet.post._key] }} onClose={() => setSheet(null)} onEdit={() => { setSheet(null); nav('editPost', { post: sheet.post }); }} onHide={() => setSheet({ type: 'hide', post: sheet.post, idx: sheet.idx })} onPhotos={() => setSheet({ type: 'photos', post: sheet.post })} onShare={() => setSheet(null)} onDelete={() => setSheet({ type: 'delete', post: sheet.post })} />}
      {sheet && sheet.type === 'hide' && <HidePostConfirm post={sheet.post} hidden={!!hiddenMap[sheet.post._key]} onCancel={() => setSheet({ type: 'menu', post: sheet.post })} onConfirm={(v) => { const k = sheet.post._key; setHiddenMap(x => ({ ...x, [k]: v === 'private' })); setSheet(null); setToast('공개 범위를 ' + visMeta(effVis(accountVis(), v)).label + '로 바꿨어요'); }} />}
      {sheet && sheet.type === 'photos' && <EditPhotosSheet post={sheet.post} onClose={() => setSheet({ type: 'menu', post: sheet.post })} onDone={(n, left) => { setSheet(null); setToast('사진 ' + n + '장을 지웠어요 · ' + left + '장 남음'); }} onDeletePost={() => setSheet({ type: 'delete', post: sheet.post })} />}
      {sheet && sheet.type === 'delete' && <DeletePostConfirm post={sheet.post} onCancel={() => setSheet({ type: 'menu', post: sheet.post })} onConfirm={() => { setGone(g => ({ ...g, [sheet.post._key]: true })); setSheet(null); setToast('게시물을 삭제했어요'); }} />}
      {toast && <Toast message={toast} icon="trash" onClose={() => setToast(null)} />}
    </div>
  );
}
window.MyPosts = MyPosts;