const TICKETS = [
  { id: 'SP-24817', cat: '제재 이의제기', title: '기록이 숨김 처리된 이유를 알고 싶습니다', date: '2026-08-13', state: '답변 완료', files: 2, closesIn: 5,
    thread: [
      { me: true, d: '2026-08-13 10:22', t: '성수 대림창고에서 올린 기록이 갑자기 숨김 처리됐어요. 사진은 직접 찍은 것이고 광고도 아닙니다. 사유를 알려주시고 복구해 주세요.', files: 2 },
      { me: false, d: '2026-08-14 09:10', by: '운영팀 김하나', t: '해당 기록은 위치 인증 불일치(가게에서 1.4km)와 광고성 문구 신고 1건으로 자동 검토 대상이 되었습니다. 재검토 결과 문구는 수정 확인되었으나 위치 인증은 여전히 불일치합니다. 같은 장소에서 재업로드해 주시면 정상 노출됩니다.' }
    ] },
  { id: 'SP-24790', cat: '신고 문의', title: '제 사진을 도용한 계정이 있습니다', date: '2026-08-11', state: '접수됨', files: 3,
    thread: [{ me: true, d: '2026-08-11 21:15', t: '@review_bot7 계정이 제가 올린 사진 3장을 그대로 올렸습니다. 확인 부탁드려요.', files: 3 }] },
  { id: 'SP-24612', cat: '위치·장소 제안', title: '연남 카페루프는 폐업했습니다', date: '2026-08-05', state: '종료', files: 1,
    thread: [
      { me: true, d: '2026-08-05 18:44', t: '지도에 아직 띄어 있는데 지난달에 닫았어요. 가보고 헛걸음했습니다.', files: 1 },
      { me: false, d: '2026-08-06 11:20', by: '운영팀 이준호', t: '제보해 주셔서 감사합니다. 현장 확인 후 폐업 처리했고, 제보 배지 5개를 지급했습니다.' },
      { me: true, d: '2026-08-06 12:02', t: '빠른 처리 감사합니다!' }
    ] },
  { id: 'SP-24310', cat: '계정·로그인', title: '카카오 로그인이 안 됩니다', date: '2026-07-19', state: '종료', files: 3,
    thread: [
      { me: true, d: '2026-07-19 08:02', t: '기기를 바꾼 뒤로 로그인 시 오류가 뜹니다. 오류 화면 캡처 첨부합니다.', files: 3 },
      { me: false, d: '2026-07-19 10:41', by: '운영팀 김하나', t: '앱 재설치 후에도 같은 증상이면 오류 코드와 함께 회신해 주세요.' },
      { me: true, d: '2026-07-19 12:20', t: '재설치하니 정상 로그인됩니다. 감사합니다.' }
    ] }
];
const TICKET_TONE = { '답변 완료': ['var(--bg-accent)', 'var(--text-accent)'], '접수됨': ['var(--surface-2)', 'var(--text-secondary)'], '종료': ['var(--surface-2)', 'var(--text-muted)'] };

function TicketBadge({ state }) {
  const [bg, fg] = TICKET_TONE[state] || TICKET_TONE['종료'];
  return <span style={{ font: '600 11px/1 var(--font-family)', color: fg, background: bg, borderRadius: 999, padding: '6px 9px', flexShrink: 0 }}>{state}</span>;
}

function SupportTickets({ nav }) {
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title="문의 내역" sub="최근 6개월" onBack={() => nav('support')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 110px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {TICKETS.map(t => (
          <div key={t.id} onClick={() => nav('supportTicketDetail', { ticket: t })} style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 'var(--radius-tile)', padding: '16px 16px 14px', cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 9 }}>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{t.cat}</span>
              <span style={{ flex: 1 }}></span>
              <TicketBadge state={t.state} />
            </div>
            <span style={{ font: 'var(--text-body-strong)', display: 'block', lineHeight: 1.45, marginBottom: 8, textWrap: 'pretty' }}>{t.title}</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, font: 'var(--text-micro)', color: 'var(--text-muted)' }}>
              <span>#{t.id}</span><span>{t.date}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><i className="ti ti-message-2" style={{ fontSize: 13 }}></i>{t.thread.length}</span>
              {t.files > 0 && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><i className="ti ti-paperclip" style={{ fontSize: 13 }}></i>{t.files}</span>}
            </div>
          </div>
        ))}
        <p style={{ font: 'var(--text-micro)', color: 'var(--text-muted)', lineHeight: 1.7, margin: '6px 4px 0', textWrap: 'pretty' }}>답변 후 7일 동안 회신이 없으면 문의가 자동으로 종료돼요. 종료된 문의는 새 문의로 다시 접수할 수 있어요.</p>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '12px 20px 20px', background: 'var(--bg-app)' }}>
        <window.SpotureDesignSystem_f7ad96.Button variant="primary" onClick={() => nav('support')}>새 문의하기</window.SpotureDesignSystem_f7ad96.Button>
      </div>
    </div>
  );
}

function SupportTicketDetail({ nav, ticket }) {
  const { Button } = window.SpotureDesignSystem_f7ad96;
  const t = ticket || TICKETS[0];
  const [msgs, setMsgs] = React.useState(t.thread);
  const [reply, setReply] = React.useState('');
  const [state, setState] = React.useState(t.state);
  const canReply = state === '답변 완료';
  const send = () => { setMsgs(m => m.concat([{ me: true, d: '2026-08-16 10:12', t: reply }])); setReply(''); setState('접수됨'); };
  return (
    <div style={{ flex: '1 1 0%', minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <StatusBar />
      <ScreenHeader title={'문의 #' + t.id} sub={t.cat} onBack={() => nav('supportTickets')} />
      <div style={{ flex: '1 1 0%', minHeight: 0, overflowY: 'auto', padding: '0 20px 24px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 9 }}><TicketBadge state={state} /><span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{t.date} 접수</span></div>
          <span style={{ font: 'var(--text-heading)', display: 'block', lineHeight: 1.4, textWrap: 'pretty' }}>{t.title}</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {msgs.map((m, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: m.me ? 'flex-end' : 'flex-start', gap: 6 }}>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{m.me ? '내 문의' : m.by} · {m.d}</span>
              <div style={{ maxWidth: '88%', background: m.me ? 'var(--surface-2)' : 'var(--bg-ink)', color: m.me ? 'var(--text-primary)' : '#fff', border: m.me ? '1px solid var(--border)' : 'none', borderRadius: 'var(--radius-tile)', padding: '14px 16px', font: 'var(--text-body)', lineHeight: 1.7, textWrap: 'pretty' }}>
                {m.t}
                {m.files > 0 && <div style={{ display: 'flex', gap: 7, marginTop: 12 }}>{Array.from({ length: m.files }).map((_, j) => <div key={j} style={{ width: 56, height: 56, borderRadius: 10, background: 'var(--surface-1)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><i className="ti ti-photo" style={{ fontSize: 16, color: 'var(--text-muted)' }}></i></div>)}</div>}
              </div>
            </div>
          ))}
        </div>
        {state === '접수됨' && <div style={{ display: 'flex', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}><i className="ti ti-clock" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0, marginTop: 1 }}></i><span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)', lineHeight: 1.6, textWrap: 'pretty' }}>평일 기준 1~2일 안에 답변드릴게요. 답변이 오면 알림으로 알려드려요.</span></div>}
        {state === '종료' && <div style={{ display: 'flex', gap: 10, background: 'var(--surface-2)', borderRadius: 'var(--radius-tile)', padding: '14px 16px' }}><i className="ti ti-lock" style={{ fontSize: 17, color: 'var(--text-muted)', flexShrink: 0, marginTop: 1 }}></i><span style={{ font: 'var(--text-micro)', color: 'var(--text-secondary)', lineHeight: 1.6, textWrap: 'pretty' }}>답변 후 7일이 지나 종료된 문의예요. 같은 내용이 계속된다면 새 문의로 접수해 주세요.</span></div>}
        {canReply && (
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 9 }}>
              <span style={{ font: 'var(--text-body-strong)' }}>추가 회신</span>
              <span style={{ font: 'var(--text-micro)', color: 'var(--text-muted)' }}>{t.closesIn}일 뒤 자동 종료</span>
            </div>
            <textarea value={reply} onChange={e => setReply(e.target.value.slice(0, 500))} rows={4} placeholder="답변에 이어서 궁금한 점을 남겨주세요." style={{ width: '100%', boxSizing: 'border-box', padding: '15px 16px', font: 'var(--text-body)', fontFamily: 'var(--font-family)', color: 'var(--text-primary)', background: 'var(--surface-1)', border: '1px solid ' + (reply ? 'var(--text-accent)' : 'var(--border)'), borderRadius: 'var(--radius-tile)', outline: 'none', resize: 'none', lineHeight: 1.6 }}></textarea>
            <div style={{ marginTop: 12 }}><Button variant="primary" disabled={reply.trim().length < 5} onClick={send}>회신 보내기</Button></div>
          </div>
        )}
        {state === '종료' && <Button variant="secondary" onClick={() => nav('support')}>같은 내용으로 새 문의</Button>}
      </div>
    </div>
  );
}
Object.assign(window, { SupportTickets, SupportTicketDetail });