popup.js

document.addEventListener('DOMContentLoaded', () => {
  const rulesTA = document.getElementById('rules');
  const prefixTA = document.getElementById('prefixRules');
  const selectorTA = document.getElementById('classoridRules');
  const urlListTA = document.getElementById('urlList');
  const saveBtn = document.getElementById('save');
  const warningBox = document.getElementById('warningBox');
  const autoGlobalChk = document.getElementById('autoGlobal');
  const anchorPrefixChk = document.getElementById('anchorPrefix');

  const autoResize = el => {
    el.style.height = 'auto';
    el.style.height = (el.scrollHeight + 5) + 'px';
  };

  [rulesTA, prefixTA, selectorTA, urlListTA].forEach(t => {
    if (t) t.addEventListener('input', () => autoResize(t));
  });

  chrome.storage.sync.get(
    [
      'enable',
      'loading',
      'masking',
      'rules',
      'prefixRules',
      'classoridRules',
      'titleTransform',
      'listMode',
      'urlList',
      'autoGlobal',
      'anchorPrefix'
    ],
    data => {
      document.querySelector(`input[name="enable"][value="${data.enable || 'on'}"]`).checked = true;
      document.querySelector(`input[name="titleTransform"][value="${data.titleTransform || 'on'}"]`).checked = true;
      document.querySelector(`input[name="loading"][value="${data.loading || 'smooth'}"]`).checked = true;
      document.querySelector(`input[name="masking"][value="${data.masking || 'replaceText'}"]`).checked = true;
      document.querySelector(`input[name="listMode"][value="${data.listMode || 'none'}"]`).checked = true;

      rulesTA.value = data.rules || [
        '김민준 -> 홍길동',
        '/\\d{4}-\\d{2}-\\d{2}/g -> [DATE]',
        '/visa\\s*\\d{4}/i -> [카드번호]'
      ].join('\n');

      prefixTA.value = data.prefixRules || [
        '계좌번호: -> [보안 정보]',
        '/^User\\s+ID:/i -> [USER ID 숨김]'
      ].join('\n');

      selectorTA.value = data.classoridRules || '.privacy -> [보안 정보]\n#sensitive-data -> [민감 정보]';
      urlListTA.value = data.urlList || 'example.com\nanother-example.net';

      autoGlobalChk.checked = (data.autoGlobal || 'on') === 'on';
      anchorPrefixChk.checked = (data.anchorPrefix || 'on') === 'on';

      [rulesTA, prefixTA, selectorTA, urlListTA].forEach(autoResize);
    }
  );

  const collapsibleHeaders = document.querySelectorAll('.collapsible-header');
  collapsibleHeaders.forEach(header => {
    header.addEventListener('click', () => {
      const content = header.nextElementSibling;
      const icon = header.querySelector('.toggle-icon');
      if (content.style.display === 'block') {
        content.style.display = 'none';
        icon.textContent = '▼';
      } else {
        content.style.display = 'block';
        icon.textContent = '▲';
        const ta = content.querySelector('textarea');
        if (ta) autoResize(ta);
      }
    });
  });

  function isRiskyRegex(pattern) {
    if (pattern.length > 5000) return true;
    if (/\((?:[^()]*?[+*][^()]*?)\)[+*]/.test(pattern)) return true; // (.*)+ / (.+)+
    if (/(\.\*){2,}/.test(pattern)) return true; // .*.*.*
    const lookAroundCount = (pattern.match(/\(\?=|\(\?!/g) || []).length;
    if (lookAroundCount > 5) return true;
    return false;
  }

  function validateRuleLines(rawText, { isPrefix = false }) {
    const lines = rawText.split('\n');
    const invalid = [];
    const risky = [];
    lines.forEach((line, idx) => {
      const l = line.trim();
      if (!l) return;
      const parts = l.split('->');
      if (parts.length !== 2) return; // 구조 안맞으면 content.js 에서도 skip
      const left = parts[0].trim();
      if (!left) return;
      if (left.startsWith('/')) {
        const m = left.match(/^\/(.+)\/([a-zA-Z]*)$/);
        if (!m) {
          invalid.push({ line: idx + 1, value: left, reason: '정규식 구문 오류 (구조)' });
          return;
        }
        let pattern = m[1];
        const flags = m[2] || '';
        if (isPrefix && anchorPrefixChk.checked && !pattern.startsWith('^')) {
          pattern = '^' + pattern;
        }
        try {
          if (isRiskyRegex(pattern)) {
            risky.push({ line: idx + 1, value: left, reason: '잠재적 성능 문제 (중첩/폭발 가능성)' });
            return;
          }
          // autoGlobal 체크되어 있고 g 없으면 가상으로 g 추가해 테스트
          let testFlags = flags;
          if (autoGlobalChk.checked && !testFlags.includes('g')) testFlags += 'g';
          // 실제 생성
          // eslint-disable-next-line no-new
          new RegExp(pattern, testFlags);
        } catch (e) {
          invalid.push({ line: idx + 1, value: left, reason: '정규식 생성 실패: ' + e.message });
        }
      }
    });
    return { invalid, risky };
  }

  function showWarnings(warnList) {
    if (!warnList.length) {
      warningBox.style.display = 'none';
      warningBox.textContent = '';
      return;
    }
    warningBox.style.display = 'block';
    warningBox.textContent =
      '경고:\n' +
      warnList
        .map(
          w =>
            `[${w.type}] ${w.line}행 "${w.value}" -> ${w.reason}`
        )
        .join('\n');
  }

  saveBtn.addEventListener('click', () => {
    warningBox.style.display = 'none';
    warningBox.textContent = '';

    const enable = document.querySelector('input[name="enable"]:checked').value;
    const titleTransform = document.querySelector('input[name="titleTransform"]:checked').value;
    const loading = document.querySelector('input[name="loading"]:checked').value;
    const masking = document.querySelector('input[name="masking"]:checked').value;
    const listMode = document.querySelector('input[name="listMode"]:checked').value;

    const rules = rulesTA.value;
    const prefixRules = prefixTA.value;
    const classoridRules = selectorTA.value;
    const urlList = urlListTA.value;

    const warn = [];

    const v1 = validateRuleLines(rules, { isPrefix: false });
    v1.invalid.forEach(i => warn.push({ ...i, type: 'INVALID' }));
    v1.risky.forEach(i => warn.push({ ...i, type: 'RISKY' }));

    const v2 = validateRuleLines(prefixRules, { isPrefix: true });
    v2.invalid.forEach(i => warn.push({ ...i, type: 'INVALID' }));
    v2.risky.forEach(i => warn.push({ ...i, type: 'RISKY' }));

    // 경고가 있어도 저장은 진행하지만 사용자에게 알림
    if (warn.length) {
      showWarnings(warn);
    }

    chrome.storage.sync.set(
      {
        enable,
        titleTransform,
        loading,
        masking,
        listMode,
        rules,
        prefixRules,
        classoridRules,
        urlList,
        autoGlobal: autoGlobalChk.checked ? 'on' : 'off',
        anchorPrefix: anchorPrefixChk.checked ? 'on' : 'off'
      },
      () => {
        chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
          if (tabs[0]?.id) {
            chrome.tabs.reload(tabs[0].id, { bypassCache: true }, () => window.close());
          } else {
            window.close();
          }
        });
      }
    );
  });
});