const SANCTIONS = {
  warned: { key: '경고', icon: 'alert-triangle', tone: 'warn', title: '커뮤니티 경고를 받았어요', period: null, note: '이용에는 제한이 없지만, 같은 사유가 반복되면 이용정지로 이어질 수 있어요.', cta: '확인했어요', dismiss: true },
  ban3: { key: '3일 이용정지', icon: 'clock-pause', tone: 'ban', title: '3일간 이용이 정지되었어요', period: '2026. 8. 16. 09:41 → 8. 19. 09:41', left: '2일 14시간 남음', progress: 42, note: '정지 기간에는 기록 작성 · 댓글 · 미션 참여를 할 수 없어요. 이미 올린 기록은 그대로 남아 있어요.' },
  ban7: { key: '7일 이용정지', icon: 'clock-pause', tone: 'ban', title: '7일간 이용이 정지되었어요', period: '2026. 8. 14. 18:20 → 8. 21. 18:20', left: '5일 8시간 남음', progress: 24, note: '정지 기간에는 기록 작성 · 댓글 · 미션 참여를 할 수 없어요. 진행 중이던 미션 인증은 무효 처리됩니다.' },
  ban30: { key: '30일 이용정지', icon: 'lock-clock', tone: 'ban', title: '30일간 이용이 정지되었어요', period: '2026. 8. 2. 11:05 → 9. 1. 11:05', left: '16일 남음', progress: 47, note: '누적 제재 3회로 장기 정지가 적용되었어요. 정지 해제 후 1회 더 제재되면 영구 이용정지됩니다.' },
  permanent: { key: '영구 이용정지', icon: 'ban', title: '계정이 영구 정지되었어요', period: '2026. 8. 2.부터', note: '기록과 배지는 모두 비공개로 전환되었고, 같은 계정과 기기로는 다시 가입할 수 없어요.', tone: 'perm' },
};

function Suspended({ kind, onDismiss, onLogout }) {
  const { Button } = window.SpotureDesignSystem_f7ad96;
  const s = SANCTIONS[kind] || SANCTIONS.ban7;
  const [sheet, setSheet] = React.useState(null);
  const perm = s.tone === 'perm';
  const accent = s.tone === 'warn' ? 'var(--text-warning)' : 'var(--text-accent)';
  const softBg = s.tone === 'warn' ? 'var(--bg-warning)' : 'var(--bg-accent)';
  return (
    <div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', background: perm ? 'var(--bg-ink)' : 'var(--surface-1)' }}>
      <StatusBar light={perm} />
      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '10px 26px 20px', display: 'flex', flexDirection: 'column', gap: 22 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, paddingTop: 26 }}>
          <div style={{ width: 76, height: 76, borderRadius: '50%', background: perm ? 'rgba(255,255,255,.1)' : softBg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className={'ti ti-' + s.icon} style={{ fontSize: 34, color: perm ? '#fff' : accent }}></i></div>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, font: '700 11px/1 var(--font-family)', letterSpacing: '.08em', color: perm ? '#fff' : accent, background: perm ? 'rgba(255,255,255,.12)' : softBg, borderRadius: 999, padding: '8px 12px' }}>{s.key.toUpperCase()}</span>
          <span style={{ font: 'var(--text-title)', color: perm ? '#fff' : 'var(--text-primary)', textAlign: 'center', letterSpacing: '-.02em' }}>{s.title}</span>
          <p style={{ font: 'var(--text-body)', color: perm ? 'rgba(255,255,255,.66)' : 'var(--text-secondary)', textAlign: 'center', margin: 0, lineHeight: 1.65, textWrap: 'pretty' }}>{s.note}</p>
        </div>
        {s.period && (
          <div style={{ background: perm ? 'rgba(255,255,255,.07)' : 'var(--surface-2)', borderRadius: 'var(--radius-card)', padding: 18, display: 'flex', flexDirection: 'column', gap: 13 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ font: 'var(--text-caption)', color: perm ? 'rgba(255,255,255,.55)' : 'var(--text-secondary)' }}>정지 기간</span>
              <span style={{ font: '600 12.5px/1.4 var(--font-family)', color: perm ? '#fff' : 'var(--text-primary)', textAlign: 'right' }}>{s.period}</span>
            </div>
            {s.left && (
              <React.Fragment>
                <div style={{ height: 7, borderRadius: 999, background: perm ? 'rgba(255,255,255,.14)' : 'var(--border)', overflow: 'hidden' }}><div style={{ width: s.progress + '%', height: '100%', borderRadius: 999, background: 'var(--text-accent)' }}></div></div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><i className="ti ti-hourglass-low" style={{ fontSize: 15, color: accent }}></i><span style={{ font: '600 13px/1 var(--font-family)', color: perm ? '#fff' : 'var(--text-primary)' }}>{s.left}</span></div>
              </React.Fragment>
            )}
          </div>
        )}
        <div style={{ border: '1px solid ' + (perm ? 'rgba(255,255,255,.14)' : 'var(--border)'), borderRadius: 'var(--radius-card)', padding: '4px 18px' }}>
          {[['제재 사유', '광고성 게시물 반복 등록'], ['관련 기록', '게시물 2건 숨김 처리'], ['누적 제재', kind === 'ban30' ? '3회' : kind === 'permanent' ? '4회' : '1회'], ['처리 일시', '2026. 8. 16. 09:41']].map(r => (
            <div key={r[0]} style={{ display: 'flex', justifyContent: 'space-between', gap: 14, padding: '13px 0', borderBottom: '1px solid ' + (perm ? 'rgba(255,255,255,.09)' : 'var(--border)') }}>
              <span style={{ font: 'var(--text-caption)', color: perm ? 'rgba(255,255,255,.5)' : 'var(--text-secondary)' }}>{r[0]}</span>
              <span style={{ font: '600 13px/1.4 var(--font-family)', color: perm ? '#fff' : 'var(--text-primary)', textAlign: 'right' }}>{r[1]}</span>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 11, background: perm ? 'rgba(255,255,255,.07)' : 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '15px 16px' }}>
          <i className="ti ti-info-circle" style={{ fontSize: 17, color: perm ? 'rgba(255,255,255,.55)' : 'var(--text-muted)', flexShrink: 0, marginTop: 1 }}></i>
          <span style={{ font: 'var(--text-small)', color: perm ? 'rgba(255,255,255,.6)' : 'var(--text-secondary)', lineHeight: 1.6, textWrap: 'pretty' }}>{perm ? '제재가 잘못되었다고 생각되면 30일 이내에 이의를 신청할 수 있어요.' : '제재 기준은 커뮤니티 가이드라인에서 확인할 수 있어요.'}</span>
        </div>
      </div>
      <div style={{ padding: '0 26px 30px', display: 'flex', flexDirection: 'column', gap: 9, background: perm ? 'var(--bg-ink)' : 'var(--surface-1)' }}>
        {s.dismiss
          ? <Button variant="primary" onClick={onDismiss}>{s.cta}</Button>
          : <Button variant="primary" onClick={() => setSheet('appeal')}>이의 신청하기</Button>}
        <span onClick={s.dismiss ? () => setSheet('guide') : onLogout} style={{ font: '600 13px/1 var(--font-family)', color: perm ? 'rgba(255,255,255,.6)' : 'var(--text-muted)', textAlign: 'center', padding: '12px 0', cursor: 'pointer' }}>{s.dismiss ? '가이드라인 보기' : '로그아웃'}</span>
      </div>
      {sheet === 'appeal' && <AppealSheet perm={perm} onClose={() => setSheet(null)} />}
      {sheet === 'guide' && <GuidelineSheet onClose={() => setSheet(null)} onAppeal={() => setSheet('appeal')} />}
    </div>
  );
}
window.Suspended = Suspended;

function AppealSheet({ perm, onClose }) {
  const { Button } = window.SpotureDesignSystem_f7ad96;
  const [sent, setSent] = React.useState(false);
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,20,20,.44)', display: 'flex', alignItems: 'flex-end', zIndex: 60 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: 'var(--surface-1)', borderRadius: '24px 24px 0 0', padding: '10px 24px 28px', boxShadow: 'var(--shadow-sheet)' }}>
        <div style={{ width: 38, height: 4, borderRadius: 999, background: 'var(--border-strong)', margin: '0 auto 18px' }}></div>
        {sent ? (
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, padding: '10px 0 6px' }}>
            <div style={{ width: 54, height: 54, borderRadius: '50%', background: 'var(--bg-success)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-check" style={{ fontSize: 25, color: 'var(--text-success)' }}></i></div>
            <span style={{ font: 'var(--text-heading)' }}>이의 신청이 접수되었어요</span>
            <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', textAlign: 'center', margin: '0 0 14px', lineHeight: 1.6 }}>영업일 3일 안에 알림으로 결과를 알려드려요.</p>
            <Button variant="primary" onClick={onClose}>닫기</Button>
          </div>
        ) : (
          <React.Fragment>
            <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 7 }}>이의 신청</span>
            <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 16px', lineHeight: 1.6 }}>{perm ? '영구 정지는 이의 신청 결과에 따라서만 해제됩니다.' : '검토 중에도 정지 기간은 계속 진행돼요.'}</p>
            <textarea rows={4} placeholder="어떤 부분이 잘못되었는지 알려주세요." style={{ width: '100%', boxSizing: 'border-box', padding: '15px 16px', font: 'var(--text-body)', fontFamily: 'var(--font-family)', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 'var(--radius-field)', outline: 'none', resize: 'none', lineHeight: 1.6, marginBottom: 14 }}></textarea>
            <Button variant="primary" onClick={() => setSent(true)}>제출하기</Button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}
window.AppealSheet = AppealSheet;

function GuidelineSheet({ onClose, onAppeal }) {
  const { Button } = window.SpotureDesignSystem_f7ad96;
  const rules = [
    ['photo-off', '음식과 매장이 보이는 사진만', '간판만 찍힌 사진, 음식과 무관한 사진은 숨김 처리될 수 있어요.'],
    ['speakerphone', '광고 · 홍보 목적의 기록 금지', '할인 안내, 외부 링크, 반복 홍보 게시물은 경고 대상이에요.'],
    ['map-pin-x', '실제로 다녀온 곳만 기록', '위치를 조작하거나 타인의 사진을 올리면 이용정지될 수 있어요.'],
    ['mood-off', '이웃을 존중하는 표현', '욕설 · 비방 · 특정인 지목은 즉시 제재됩니다.'],
  ];
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(20,20,20,.44)', display: 'flex', alignItems: 'flex-end', zIndex: 60 }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxHeight: '86%', display: 'flex', flexDirection: 'column', background: 'var(--surface-1)', borderRadius: '24px 24px 0 0', padding: '10px 24px 28px', boxShadow: 'var(--shadow-sheet)' }}>
        <div style={{ width: 38, height: 4, borderRadius: 999, background: 'var(--border-strong)', margin: '0 auto 18px', flexShrink: 0 }}></div>
        <span style={{ font: 'var(--text-heading)', display: 'block', marginBottom: 7 }}>커뮤니티 가이드라인</span>
        <p style={{ font: 'var(--text-caption)', color: 'var(--text-secondary)', margin: '0 0 16px', lineHeight: 1.6 }}>아래 4가지만 지켜주시면 됩니다. 위반이 반복되면 경고 → 정지 순으로 제재됩니다.</p>
        <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 16 }}>
          {rules.map(r => (
            <div key={r[1]} style={{ display: 'flex', gap: 13, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '15px 16px' }}>
              <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--surface-1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><i className={'ti ti-' + r[0]} style={{ fontSize: 17, color: 'var(--text-accent)' }}></i></div>
              <div>
                <span style={{ font: 'var(--text-body-strong)', display: 'block', marginBottom: 4 }}>{r[1]}</span>
                <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', lineHeight: 1.6, textWrap: 'pretty' }}>{r[2]}</span>
              </div>
            </div>
          ))}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '14px 16px', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)' }}>
            <span style={{ font: 'var(--text-small)', color: 'var(--text-secondary)', lineHeight: 1.5 }}>제재가 잘못되었다고 생각되나요?</span>
            <span onClick={onAppeal} style={{ font: '600 13px/1 var(--font-family)', color: 'var(--text-accent)', cursor: 'pointer', flexShrink: 0 }}>이의 신청</span>
          </div>
        </div>
        <Button variant="primary" onClick={onClose}>확인</Button>
      </div>
    </div>
  );
}
window.GuidelineSheet = GuidelineSheet;