function Missions({ nav, initialTab }) {
  const mparams = new URLSearchParams(location.search);
  const [tab, setTab] = React.useState(initialTab || mparams.get('mtab') || '진행 중');
  const [alarm, setAlarm] = React.useState({ 1: false });
  const [toast, setToast] = React.useState(null);
  React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2200); return () => clearTimeout(t); }, [toast]);
  const tabs = ['진행 중', '참여 중', '종료'];
  const missions = [
    { id: 1, img: '../../assets/feed/steak-platter.jpeg', title: '이달의 밀키트 인증샷', brand: '식탁이있는삶', reward: '응모권 2매', prize: '밀키트 세트 30명 추첨', left: '6일 남음', urgent: true, need: 3, done: 0, joined: false, state: 'open', desc: '집에서 끓인 밀키트 사진 3장' },
    { id: 2, img: '../../assets/feed/kimchi-jjigae.jpeg', title: '새벽 국밥 인증 챌린지', brand: '한밭식품', reward: '응모권 1매', prize: '국밥교환권 100명 추첨', left: '12일 남음', need: 3, done: 1, joined: true, state: 'open', desc: '새벽 5~8시 사이 국밥 인증' },
    { id: 3, img: '../../assets/feed/cafe-1.jpeg', title: '동네 신상 카페 첫 방문', brand: '로스트림', reward: '인증 즉시 지급', prize: '음료 1잔 쿠폰 (선착순 200명)', left: '3일 남음', urgent: true, need: 1, done: 0, joined: false, state: 'open', desc: '오픈 30일 이내 카페 방문' },
    { id: 4, img: '../../assets/feed/tonkatsu.jpeg', title: '분식 3종 도장깨기', brand: '청년다방', reward: '인증 즉시 지급', prize: '5,000원 쿠폰 (선착순 300명)', left: '20일 남음', need: 3, done: 2, joined: true, state: 'open', desc: '떡볶이·튀김·순대 각 1장' },
    { id: 5, img: '../../assets/feed/udon.jpeg', title: '여름 냉면 원정대', brand: '面사무소', reward: '응모권 1매', prize: '냉면 밀키트 50명 추첨', left: '심사 중', need: 2, done: 2, joined: true, state: 'review', desc: '냉면 2곳 인증 완료' },
    { id: 8, img: '../../assets/feed/steak-platter.jpeg', title: '이달의 밀키트 인증샷', brand: '식탁이있는삶', reward: '응모권 2매', prize: '밀키트 세트 30명 추첨', left: '6일 남음', need: 3, done: 2, joined: true, state: 'rejected', desc: '인증 1장 반려 · 재제출 2회 가능' },
    { id: 6, img: '../../assets/feed/mukeunji-jjim.jpeg', title: '7월 삼계탕 인증', brand: '본가', reward: '당첨', prize: '삼계탕 세트 40명 추첨', left: '7/31 마감', need: 2, done: 2, joined: true, state: 'closed',
      ended: { name: '7월 삼계탕 인증', period: '2026-07-01 ~ 2026-07-31', now: 2, goal: 2, achieved: true, reward: '삼계탕 세트 (40명 추첨)', lottery: true, prizeCount: 40, drawDate: '2026-08-04', won: true, rewardState: '당첨', rank: 88, joinedCount: 964, doneCount: 612, percentile: 14, note: '8/4 발표 · 스폰서가 개별 안내드렸어요', winners: [['미도리', 'midori_eats'], ['국밥러버', 'gukbap_lover92'], ['하윤', 'hayoon_b'], ['도현', 'dohyun.j'], ['가은', 'gaeun_k'], ['소민', 'somin.eats'], ['지안', 'jian_00'], ['현우', 'hyunwoo.p']] }, from: 'missions', desc: '8/4 추첨 발표 · 인증 2/2 완주' },
    { id: 7, img: '../../assets/feed/berry-smoothie.jpeg', title: '봄 브런치 스탬프', brand: '베이크하우스', reward: '미달성 종료', prize: '브런치 세트 20명 추첨', left: '5/31 마감', need: 3, done: 1, joined: true,
      ended: { name: '봄 브런치 스탬프', period: '2026-05-02 ~ 2026-05-31', now: 1, goal: 3, achieved: false, reward: '브런치 세트 (20명 추첨)', lottery: true, prizeCount: 20, drawDate: '2026-06-03', won: false, rewardState: '미달성', rank: null, joinedCount: 528, doneCount: 197, percentile: null, note: '인증 2장을 더 올렸다면 응모될 수 있었어요', winners: [['수아', 'sua_9'], ['도윤', 'doyun'], ['예린', 'yerin.k'], ['민서', 'minseo.eat'], ['준호', 'junho_88'], ['채원', 'chaewon.s'], ['서준', 'seojun_gk'], ['태윤', 'taeyun']] }, from: 'missions', state: 'closed', desc: '6/3 추첨 발표 · 인증 1/3' }
  ];
  const list = tab === '진행 중' ? missions.filter(m => m.state === 'open')

    : tab === '참여 중' ? missions.filter(m => m.joined && m.state !== 'closed')
      : missions.filter(m => m.state === 'closed');
  const joinedCount = missions.filter(m => m.joined && m.state !== 'closed').length;
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="미션" sub="인증샷을 올리면 경품 추첨에 참여해요" onBack={() => nav('feed')} />
      <div style={{ padding: '0 20px 16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--bg-ink)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-float)' }}>
          <div style={{ width: 42, height: 42, borderRadius: 12, background: 'rgba(255,255,255,.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-flag" style={{ fontSize: 20, color: '#fff' }}></i></div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <span style={{ font: '700 15px/1.3 var(--font-family)', color: '#fff', display: 'block', marginBottom: 3 }}>참여 중인 미션 {joinedCount}개</span>
            <span style={{ font: 'var(--text-micro)', color: 'rgba(255,255,255,.62)' }}>인증을 완주하면 응모권을 받고 경품 추첨에 참여해요</span>
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, padding: '0 20px 16px', overflowX: 'auto', scrollbarWidth: 'none' }}>
        {tabs.map(t => (
          <span key={t} onClick={() => setTab(t)} style={{ flexShrink: 0, font: tab === t ? '600 14px/1 var(--font-family)' : '400 14px/1 var(--font-family)', color: tab === t ? '#fff' : 'var(--text-primary)', background: tab === t ? 'var(--bg-ink)' : 'var(--surface-1)', borderRadius: 999, padding: '11px 16px', cursor: 'pointer' }}>{t}</span>
        ))}
      </div>
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 104px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {list.map(m => {
          const closed = m.state === 'closed';
          const review = m.state === 'review';
          const rej = m.state === 'rejected';
          const pct = Math.round((m.done / m.need) * 100);
          return (
            <div key={m.id} onClick={() => rej ? nav('missionRejection', { from: 'missions' }) : nav('missionDetail', closed && m.ended ? { ended: { ...m.ended, from: 'missions' } } : { mstate: review ? 'review' : m.joined ? (m.done >= m.need ? 'done' : 'progress') : 'intro' })} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-card)', cursor: 'pointer', opacity: closed ? .68 : 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 54, height: 54, borderRadius: 14, background: 'var(--surface-2)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{m.img ? <img src={m.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} /> : <i className="ti ti-photo" style={{ fontSize: 20, color: 'var(--text-muted)' }}></i>}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
                    {review && <span style={{ font: '700 10px/1 var(--font-family)', color: '#fff', background: 'var(--text-warning)', borderRadius: 999, padding: '5px 8px' }}>심사 중</span>}
                    {rej && <span style={{ font: '700 10px/1 var(--font-family)', color: '#fff', background: 'var(--text-danger)', borderRadius: 999, padding: '5px 8px' }}>반려</span>}
                    {!closed && !review && m.urgent && <span style={{ font: '700 10px/1 var(--font-family)', color: '#fff', background: 'var(--text-accent)', borderRadius: 999, padding: '5px 8px' }}>마감 임박</span>}
                    {closed && <span style={{ font: '700 10px/1 var(--font-family)', color: 'var(--text-muted)', background: 'var(--surface-2)', borderRadius: 999, padding: '5px 8px' }}>종료</span>}
                    <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.brand}</span>
                  </div>
                  <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.title}</span>
                  <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block' }}>{m.desc}</span>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginTop: 12, background: closed ? 'var(--surface-2)' : 'var(--bg-accent)', borderRadius: 'var(--radius-tile)', padding: '11px 13px' }}>
                <i className="ti ti-trophy" style={{ fontSize: 16, color: closed ? 'var(--text-muted)' : 'var(--text-accent)', flexShrink: 0 }}></i>
                <span style={{ font: '700 13px/1.35 var(--font-family)', color: closed ? 'var(--text-secondary)' : 'var(--text-accent)', flex: 1, minWidth: 0, textWrap: 'pretty' }}>{m.prize}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                <i className={closed ? 'ti ti-clock-off' : 'ti ti-clock'} style={{ fontSize: 14, color: m.urgent && !closed ? 'var(--text-accent)' : 'var(--text-muted)', flexShrink: 0 }}></i>
                <span style={{ font: 'var(--text-micro)', color: m.urgent && !closed ? 'var(--text-accent)' : 'var(--text-muted)', flexShrink: 0 }}>{m.left}</span>
                <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>·</span>
                <i className="ti ti-ticket" style={{ fontSize: 14, color: 'var(--text-muted)', flexShrink: 0 }}></i>
                <span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)', flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.reward.startsWith('응모권') ? '완주 시 ' + m.reward : m.reward}</span>
                {rej
                  ? <span style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 4, font: '600 12px/1 var(--font-family)', color: 'var(--text-danger)' }}>반려 사유 보기<i className="ti ti-chevron-right" style={{ fontSize: 14 }}></i></span>
                  : m.joined && !closed
                  ? <span style={{ flexShrink: 0, font: '700 11px/1 var(--font-family)', color: 'var(--text-accent)' }}>{m.done}/{m.need} 인증</span>
                  : !closed ? <React.Fragment>
                      <span onClick={e => { e.stopPropagation(); setAlarm(a => ({ ...a, [m.id]: !a[m.id] })); setToast(alarm[m.id] ? '미션 알림을 껐어요' : '미션이 마감되기 전에 알려드릴게요'); }} style={{ flexShrink: 0, width: 32, height: 32, borderRadius: '50%', background: alarm[m.id] ? 'var(--bg-accent)' : 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><i className={alarm[m.id] ? 'ti ti-bell-ringing' : 'ti ti-bell-plus'} style={{ fontSize: 16, color: alarm[m.id] ? 'var(--text-accent)' : 'var(--text-muted)' }}></i></span>
                      <span style={{ flexShrink: 0, font: '600 12px/1 var(--font-family)', color: '#fff', background: 'var(--text-accent)', borderRadius: 999, padding: '8px 13px' }}>참여하기</span>
                    </React.Fragment>
                  : <span style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 4, font: '600 12px/1 var(--font-family)', color: m.ended && m.ended.won ? 'var(--text-success)' : 'var(--text-secondary)' }}>결과 보기<i className="ti ti-chevron-right" style={{ fontSize: 14 }}></i></span>}
              </div>
              {m.joined && !closed && (
                <div style={{ height: 4, borderRadius: 999, background: 'var(--surface-2)', marginTop: 10, overflow: 'hidden' }}>
                  <div style={{ width: pct + '%', height: '100%', borderRadius: 999, background: 'var(--text-accent)' }}></div>
                </div>
              )}
            </div>
          );
        })}
        {list.length === 0 && (
          <div style={{ padding: '48px 0', textAlign: 'center' }}>
            <div style={{ width: 58, height: 58, borderRadius: '50%', background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 14px' }}><i className="ti ti-flag" style={{ fontSize: 25, color: 'var(--text-muted)' }}></i></div>
            <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 6 }}>아직 참여한 미션이 없어요</span>
            <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 16px', lineHeight: 1.6 }}>진행 중 탭에서 관심 가는 미션을 골라보세요.</p>
            <span onClick={() => setTab('진행 중')} style={{ display: 'inline-block', font: '600 14px/1 var(--font-family)', color: '#fff', background: 'var(--bg-ink)', borderRadius: 999, padding: '13px 22px', cursor: 'pointer' }}>진행 중 미션 보기</span>
          </div>
        )}
        <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', textAlign: 'center', display: 'block', marginTop: 6 }}>심사를 통과한 인증샷만 응모권으로 집계돼요</span>
      </div>
      {toast && (
        <div style={{ position: 'absolute', left: 20, right: 20, bottom: 92, background: 'var(--bg-ink)', color: '#fff', borderRadius: 'var(--radius-tile)', padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--shadow-float)', zIndex: 30 }}>
          <i className="ti ti-bell" style={{ fontSize: 18, flexShrink: 0 }}></i>
          <span style={{ font: '600 14px/1.4 var(--font-family)' }}>{toast}</span>
        </div>
      )}
    </div>
  );
}
window.Missions = Missions;