// 긴급공지 — 페이지 진입 시 1회 자동 팝업, 취소(닫기) 누르면 사라짐.
// 24시간 동안 다시 안 보기는 localStorage로 (사장님이 새로 켜면 다시 띄워야 하므로 enabled 토글 + 내용 hash 비교)

import { openModal, closeModal, escapeHtml } from './modal.js';

export function renderUrgentNotice(cms) {
  const u = cms.urgent_notice || {};
  if (!u.enabled || !u.title) return;
  // 검증/스크립트 파라미터: ?vqa=1 또는 ?no_urgent=1 시 자동 팝업 비활성
  const params = new URLSearchParams(location.search);
  if (params.has('vqa') || params.has('no_urgent')) return;

  // 같은 내용 24시간 다시 안 보기
  const KEY = 'tktx_urgent_seen';
  const fingerprint = JSON.stringify({ t: u.title, b: u.body, c: u.cta_url });
  const seen = JSON.parse(localStorage.getItem(KEY) || '{}');
  const now = Date.now();
  if (seen.fp === fingerprint && (now - seen.at) < 24 * 60 * 60 * 1000) return;

  // CTA URL이 # 앵커면 같은 탭, 아니면 새 탭
  const isAnchor = u.cta_url && u.cta_url.startsWith('#');
  const targetAttr = isAnchor ? '_self' : '_blank';
  const cta = u.cta_url ? `
    <div class="actions">
      <a class="primary" data-urgent-cta href="${escapeHtml(u.cta_url)}" target="${targetAttr}" rel="noopener" style="text-align:center;text-decoration:none;display:inline-block;padding:12px;flex:1;background:var(--neon-amber);color:#000;font-family:var(--font-display);font-weight:900;letter-spacing:2px;border-radius:4px;text-transform:uppercase;">${escapeHtml(u.cta_label || '확인')}</a>
      <button data-modal-close style="flex:1;padding:12px;border:1px solid var(--border-subtle);font-family:var(--font-display);font-weight:700;letter-spacing:2px;border-radius:4px;text-transform:uppercase;color:var(--text-secondary);">취소</button>
    </div>
  ` : `
    <div class="actions">
      <button class="primary" data-modal-close style="flex:1;padding:12px;background:var(--neon-amber);color:#000;font-family:var(--font-display);font-weight:900;letter-spacing:2px;border-radius:4px;text-transform:uppercase;">확인</button>
    </div>
  `;

  // 페이지 진입 즉시 노출 (이전 2200ms + scroll 차단 → 사용자가 살짝만 드래그해도 안 뜨던 이슈 해소)
  setTimeout(() => {
    openModal(`
      <button class="close" data-modal-close>×</button>
      <h3>${escapeHtml(u.title)}</h3>
      <div class="body">${escapeHtml(u.body)}</div>
      ${cta}
    `, {
      urgent: true,
      onClose: () => {
        localStorage.setItem(KEY, JSON.stringify({ fp: fingerprint, at: Date.now() }));
      }
    });

    // 버튼(라벨) 클릭 시 → 이동 + 팝업 닫기 동시 처리
    // # 앵커: 부드럽게 스크롤 + 모달 닫기
    // 외부 URL: 새 탭 열기 + 모달 닫기
    const btn = document.querySelector('[data-urgent-cta]');
    if (btn) {
      btn.addEventListener('click', (ev) => {
        const href = btn.getAttribute('href') || '';
        if (href.startsWith('#')) {
          ev.preventDefault();
          // localStorage 기록 (24h 차단)
          localStorage.setItem(KEY, JSON.stringify({ fp: fingerprint, at: Date.now() }));
          closeModal();
          // 모달 fade-out 후 부드럽게 스크롤
          setTimeout(() => {
            const el = document.querySelector(href);
            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
            else location.hash = href;
          }, 250);
        } else {
          // 외부 URL — 새 탭 열림은 브라우저 기본 동작, 추가로 모달 닫기
          localStorage.setItem(KEY, JSON.stringify({ fp: fingerprint, at: Date.now() }));
          setTimeout(() => closeModal(), 50);
        }
      });
    }
  }, 200);
}
