function MissionRejection({ nav, from }) {
  const { Button } = window.SpotureDesignSystem_f7ad96;
  const [appeal, setAppeal] = React.useState(false);
  const [appealText, setAppealText] = React.useState('');
  const [toast, setToast] = React.useState(null);
  React.useEffect(() => { if (!toast) return; const t = setTimeout(() => setToast(null), 2400); return () => clearTimeout(t); }, [toast]);
  const back = () => from === 'missions' ? nav('missions', { initialTab: '참여 중' }) : from === 'myPosts' ? nav('myPosts') : nav('missionDetail', { mstate: 'rejected' });
  const shots = [
    { tag: '밀키트 패키지', ok: true, note: '패키지 라벨이 선명하게 확인됐어요' },
    { tag: '조리 과정', ok: true, note: '조리 중인 모습이 확인됐어요' },
    { tag: '완성 한 상', ok: false, reason: '미션 조건 불충족', note: '완성 사진에 밀키트 패키지가 함께 담기지 않아, 해당 밀키트로 조리한 것인지 확인이 어려웠어요.' }
  ];
  const rejected = shots.filter(s => !s.ok);
  const guide = [
    { ok: true, text: '완성 한 상과 밀키트 패키지를 한 프레임에 함께 담아주세요' },
    { ok: true, text: '조명이 밝은 곳에서 음식 전체가 보이게 촬영해 주세요' },
    { ok: false, text: '캡처·다운로드 이미지나 지난 식사 사진은 반려돼요' },
    { ok: false, text: '패키지 로고가 가려지거나 잘린 사진은 확인이 어려워요' }
  ];
  const meta = [['미션', '이달의 밀키트 인증샷'], ['제출일', '2026-08-14 21:30'], ['심사 완료', '2026-08-15 10:12'], ['심사 결과', '3장 중 1장 반려'], ['재제출 기회', '2회 남음 (최대 3회)'], ['재제출 마감', '2026-08-21 23:59 · 6일 남음']];
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="인증 반려 사유" sub="이달의 밀키트 인증샷 · 8월 15일 심사" onBack={back} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 190px' }}>
        <div style={{ background: 'var(--surface-1)', border: '1.5px solid var(--text-danger)', borderRadius: 'var(--radius-card)', padding: 16, marginBottom: 14 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <i className="ti ti-photo-x" style={{ fontSize: 18, color: 'var(--text-danger)', flexShrink: 0 }}></i>
            <span style={{ font: 'var(--text-body-strong)' }}>인증 1장이 반려됐어요</span>
          </div>
          <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: 0, lineHeight: 1.6 }}>반려된 사진만 다시 올리면 돼요. 통과한 2장은 그대로 인정되고, 재제출하면 1~2일 안에 다시 심사해 드려요.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'var(--border)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', overflow: 'hidden', marginBottom: 22 }}>
          {[['통과', '2장', 'var(--text-success)'], ['반려', '1장', 'var(--text-danger)'], ['남은 기간', 'D-6', 'var(--text-primary)']].map(([k, v, c]) => (
            <div key={k} style={{ background: 'var(--surface-1)', padding: '12px 10px', textAlign: 'center' }}>
              <span style={{ font: '700 15px/1 var(--font-family)', color: c, display: 'block', marginBottom: 4 }}>{v}</span>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{k}</span>
            </div>
          ))}
        </div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 10 }}>반려된 사진</span>
        {rejected.map(s => (
          <div key={s.tag} style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-card)', marginBottom: 12 }}>
            <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
              <div style={{ width: 78, height: 78, borderRadius: 'var(--radius-tile)', background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, position: 'relative' }}>
                <i className="ti ti-photo" style={{ fontSize: 22, color: 'var(--text-muted)' }}></i>
                <span style={{ position: 'absolute', right: -5, top: -5, width: 22, height: 22, borderRadius: '50%', background: 'var(--text-danger)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-x" style={{ fontSize: 13, color: '#fff' }}></i></span>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 4 }}>3번 · {s.tag}</span>
                <span style={{ display: 'inline-block', font: '700 11px/1 var(--font-family)', color: 'var(--text-danger)', background: 'var(--bg-danger, rgba(217,45,32,.08))', borderRadius: 999, padding: '6px 10px', marginBottom: 6 }}>{s.reason}</span>
                <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', display: 'block' }}>2026-08-14 21:30 제출</span>
              </div>
            </div>
            <div style={{ background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <i className="ti ti-message-2" style={{ fontSize: 15, color: 'var(--text-secondary)' }}></i>
                <span style={{ font: '600 12px/1 var(--font-family)', color: 'var(--text-secondary)' }}>심사 담당자 메모</span>
              </div>
              <p style={{ font: 'var(--text-caption)', color: 'var(--text-primary)', margin: 0, lineHeight: 1.7 }}>{s.note}</p>
            </div>
          </div>
        ))}
        <span style={{ font: 'var(--text-heading)', display: 'block', margin: '22px 0 10px' }}>통과한 사진</span>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
          {shots.filter(s => s.ok).map((s, i) => (
            <div key={s.tag} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-1)', borderRadius: 'var(--radius-tile)', padding: 14, boxShadow: 'var(--shadow-card)' }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className="ti ti-photo" style={{ fontSize: 17, color: 'var(--text-muted)' }}></i></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 2 }}>{i + 1}번 · {s.tag}</span>
                <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)' }}>{s.note}</span>
              </div>
              <i className="ti ti-circle-check-filled" style={{ fontSize: 19, color: 'var(--text-success)', flexShrink: 0 }}></i>
            </div>
          ))}
        </div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 10 }}>다시 올릴 때 확인해 주세요</span>
        <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: '4px 16px', boxShadow: 'var(--shadow-card)', marginBottom: 22 }}>
          {guide.map((g, i) => (
            <div key={g.text} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '13px 0', borderTop: i === 0 ? 'none' : '1px solid var(--border)' }}>
              <i className={'ti ti-' + (g.ok ? 'check' : 'x')} style={{ fontSize: 16, color: g.ok ? 'var(--text-success)' : 'var(--text-danger)', flexShrink: 0, marginTop: 2 }}></i>
              <span style={{ font: 'var(--text-caption)', color: 'var(--text-primary)', lineHeight: 1.6, textWrap: 'pretty' }}>{g.text}</span>
            </div>
          ))}
        </div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 10 }}>심사 정보</span>
        <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: '4px 16px', boxShadow: 'var(--shadow-card)', marginBottom: 22 }}>
          {meta.map((r, i) => (
            <div key={r[0]} style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, padding: '13px 0', borderTop: i === 0 ? 'none' : '1px solid var(--border)' }}>
              <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', flexShrink: 0 }}>{r[0]}</span>
              <span style={{ font: 'var(--text-small)', fontWeight: 600, textAlign: 'right' }}>{r[1]}</span>
            </div>
          ))}
        </div>
        <div style={{ background: 'var(--surface-1)', borderRadius: 'var(--radius-card)', padding: 16, boxShadow: 'var(--shadow-card)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
            <i className="ti ti-help-circle" style={{ fontSize: 18, color: 'var(--text-secondary)', flexShrink: 0 }}></i>
            <span style={{ font: 'var(--text-body-strong)' }}>심사 결과가 잘못됐나요?</span>
          </div>
          <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 12px', lineHeight: 1.6 }}>사진이 조건을 충족했다고 생각되면 이의를 신청해 주세요. 운영팀이 원본을 다시 확인하고 2일 안에 답변드려요.</p>
          {appeal ? (
            <React.Fragment>
              <textarea value={appealText} onChange={e => setAppealText(e.target.value)} placeholder="어떤 점이 조건에 맞는지 알려주세요" rows={4} style={{ width: '100%', boxSizing: 'border-box', font: 'var(--text-caption)', color: 'var(--text-primary)', background: 'var(--surface-2)', border: '1.5px solid var(--border-strong)', borderRadius: 'var(--radius-tile)', padding: 12, resize: 'none', marginBottom: 10, fontFamily: 'var(--font-family)' }}></textarea>
              <Button variant="primary" size="sm" disabled={!appealText.trim()} onClick={() => { setAppeal(false); setAppealText(''); setToast('이의 신청이 접수됐어요. 2일 안에 알림으로 답변드려요.'); }}>이의 신청 보내기</Button>
            </React.Fragment>
          ) : <Button variant="secondary" size="sm" onClick={() => setAppeal(true)}>이의 신청하기</Button>}
        </div>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 88, padding: '0 20px 8px', pointerEvents: 'none' }}><div style={{ pointerEvents: 'auto' }}>
        <Button variant="primary" onClick={() => nav('uploadMission')}><i className="ti ti-camera" style={{ fontSize: 17 }}></i>반려된 사진 다시 올리기</Button>
      </div></div>
      {toast && (
        <div style={{ position: 'absolute', left: 20, right: 20, bottom: 148, 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-check" style={{ fontSize: 18, flexShrink: 0 }}></i>
          <span style={{ font: '600 14px/1.4 var(--font-family)', textWrap: 'pretty' }}>{toast}</span>
        </div>
      )}
    </div>
  );
}
window.MissionRejection = MissionRejection;
