// 어록 관리 모듈
class SayingsManager {
  constructor() {
    // 초기값 설정 (chrome.storage에서 로드될 때까지 임시)
    this.SUPABASE_URL = null;
    this.SUPABASE_ANON_KEY = null;
    this.DEBUG_MODE = true;
    this.ACCESS_TOKEN = null;
    this.isConfigLoaded = false;
    
    // 필터 상태
    this.currentFilters = {
      category: 'all',
      dateRange: 'all',
      searchText: ''
    };
    
    // 원본 데이터 저장
    this.allSayings = [];
    this.filteredSayings = [];
    
    // 새 어록 감지를 위한 변수들
    this.lastCheckTime = null;
    this.newSayingsCheckInterval = null;
    this.isCheckingNewSayings = false;
    
    this.debugLog('SayingsManager 생성자 시작 - 설정 로드 대기 중');
    
    // 필터 이벤트 등록
    this.attachFilterEvents();
    
    this.debugLog('SayingsManager 생성자 완료');
    
    // ESC 키로 창 닫기 이벤트 등록
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        // 현재 창이 어록 관리 창인 경우 닫기
        if (window.location.href.includes('sayings.html')) {
          window.close();
          e.preventDefault();
        }
      }
    });
  }

  // 설정 로드 함수
  async loadConfig() {
    try {
      this.debugLog('chrome.storage에서 설정 로드 시작');
      
      // 1. sayings_config 우선 확인
      const configData = await chrome.storage.local.get('sayings_config');
      
      if (configData.sayings_config) {
        const config = configData.sayings_config;
        this.debugLog('sayings_config에서 설정 로드', {
          hasUrl: !!config.SUPABASE_URL,
          hasKey: !!config.SUPABASE_ANON_KEY,
          hasToken: !!config.ACCESS_TOKEN,
          debugMode: config.DEBUG_MODE,
          timestamp: config.timestamp,
          age: Date.now() - config.timestamp
        });
        
        // 설정이 너무 오래된 경우 (5분 이상) 경고
        if (Date.now() - config.timestamp > 5 * 60 * 1000) {
          this.debugLog('⚠️ 설정이 오래되었습니다', { age: Date.now() - config.timestamp });
        }
        
        this.SUPABASE_URL = config.SUPABASE_URL;
        this.SUPABASE_ANON_KEY = config.SUPABASE_ANON_KEY;
        this.DEBUG_MODE = config.DEBUG_MODE !== undefined ? config.DEBUG_MODE : true;
        this.ACCESS_TOKEN = config.ACCESS_TOKEN;
        
      } else {
        // 2. 개별 설정 확인 (fallback)
        this.debugLog('sayings_config가 없음, 개별 설정 확인 중');
        
        const storageData = await chrome.storage.local.get([
          'access_token',
          'SUPABASE_URL',
          'SUPABASE_ANON_KEY'
        ]);
        
        this.debugLog('개별 설정 조회 결과', {
          hasToken: !!storageData.access_token,
          hasUrl: !!storageData.SUPABASE_URL,
          hasKey: !!storageData.SUPABASE_ANON_KEY
        });
        
        // 기본값 설정
        this.SUPABASE_URL = storageData.SUPABASE_URL || 'http://146.56.101.199:8000';
        this.SUPABASE_ANON_KEY = storageData.SUPABASE_ANON_KEY || 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ey AgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE';
        this.ACCESS_TOKEN = storageData.access_token;
      }
      
      this.isConfigLoaded = true;
      
      this.debugLog('설정 로드 완료', {
        SUPABASE_URL: this.SUPABASE_URL,
        hasToken: !!this.ACCESS_TOKEN,
        tokenLength: this.ACCESS_TOKEN ? this.ACCESS_TOKEN.length : 0,
        DEBUG_MODE: this.DEBUG_MODE,
        isConfigLoaded: this.isConfigLoaded
      });
      
      // 설정 검증
      if (!this.SUPABASE_URL) {
        throw new Error('SUPABASE_URL이 설정되지 않았습니다');
      }
      if (!this.SUPABASE_ANON_KEY) {
        throw new Error('SUPABASE_ANON_KEY가 설정되지 않았습니다');
      }
      if (!this.ACCESS_TOKEN) {
        throw new Error('ACCESS_TOKEN이 없습니다. 로그인이 필요합니다');
      }
      
      return true;
      
    } catch (error) {
      this.debugLog('설정 로드 실패', { error: error.message });
      throw error;
    }
  }

  // 디버그 로깅 함수
  debugLog(message, data = null) {
    if (this.DEBUG_MODE) {
      console.log(`[Sayings] ${message}`, data || '');
      this.updateDebugUI(`[${new Date().toLocaleTimeString()}] ${message}`);
    }
  }

  // 디버그 UI 업데이트
  updateDebugUI(message) {
    const debugElement = document.getElementById('debug-info');
    if (debugElement) {
      if (this.DEBUG_MODE) {
        // 디버그 모드일 때만 표시
        const existingButton = debugElement.querySelector('button');
        const buttonHtml = existingButton ? existingButton.outerHTML : '';
        
        debugElement.innerHTML = `${message}<br>${buttonHtml}`;
        debugElement.style.display = "block";
        
        // 버튼 이벤트 다시 등록
        if (existingButton) {
          const newButton = debugElement.querySelector('button');
          if (newButton && !newButton.onclick) {
            newButton.addEventListener('click', this.showDebugLogs.bind(this));
          }
        }
      } else {
        // 디버그 모드가 아닐 때는 숨김
        debugElement.style.display = "none";
        debugElement.innerHTML = "";
      }
    }
  }

  // 초기화 및 데이터 로드
  async initialize() {
    try {
      this.debugLog('SayingsManager 초기화 시작');
      
      // 1) 설정 로드 (chrome.storage에서)
      this.debugLog('설정 로드 중...');
      await this.loadConfig();
      
      // 2) 토큰 유효성 검증
      this.debugLog('토큰 유효성 검증 중...');
      await this.validateToken();

      // 3) 현재 사용자 정보 로드
      this.debugLog('현재 사용자 정보 로드 중...');
      await this.loadCurrentUser();

      // 4) 어록 등록 모달 이벤트 등록
      this.debugLog('어록 등록 모달 이벤트 등록 중...');
      this.attachAddSayingEvents();

      // 5) 카테고리와 타겟 옵션 로드
      this.debugLog('카테고리와 타겟 옵션 로드 중...');
      await this.loadCategoryAndTargetOptions();

      // 6) 어록 목록 로드
      this.debugLog('어록 목록 로드 시작');
      await this.loadSayings();
      
      // 7) 새 어록 감지 시작
      this.debugLog('새 어록 감지 기능 시작');
      this.startNewSayingsMonitoring();
      
      this.debugLog('SayingsManager 초기화 완료');
      
    } catch (error) {
      this.debugLog('초기화 실패', { error: error.message });
      this.renderError(error.message);
    }
  }

  // 토큰 유효성 검증
  async validateToken() {
    try {
      this.debugLog('토큰 검증 API 호출 준비', {
        url: `${this.SUPABASE_URL}/auth/v1/user`,
        hasToken: !!this.ACCESS_TOKEN,
        tokenLength: this.ACCESS_TOKEN ? this.ACCESS_TOKEN.length : 0
      });

      const authRes = await fetch(`${this.SUPABASE_URL}/auth/v1/user`, {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
          'apikey': this.SUPABASE_ANON_KEY,
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        mode: 'cors',
        credentials: 'omit'
      });
      
      this.debugLog('토큰 검증 API 응답', {
        status: authRes.status,
        statusText: authRes.statusText,
        ok: authRes.ok
      });
      
      if (!authRes.ok) {
        const errorText = await authRes.text();
        this.debugLog('토큰 검증 실패', { 
          status: authRes.status,
          error: errorText
        });
        throw new Error(`토큰이 유효하지 않습니다 (${authRes.status}: ${authRes.statusText})`);
      }
      
      const userData = await authRes.json();
      this.debugLog('토큰 검증 성공', { 
        email: userData.email, 
        id: userData.id
      });
      
      return userData;
      
    } catch (error) {
      this.debugLog('토큰 검증 중 오류', { 
        errorName: error.name,
        errorMessage: error.message
      });
      
      if (error.name === 'TypeError' && error.message.includes('fetch')) {
        throw new Error(`네트워크 연결 오류: 서버에 연결할 수 없습니다.`);
      }
      
      throw error;
    }
  }

  // 어록 목록 로드
  async loadSayings() {
    this.debugLog('어록 로딩 시작');
    
    try {
      // 로딩 표시
      document.getElementById('sayings-container').innerHTML = '<div class="loading">📚 어록을 불러오는 중...</div>';
      
      // API 호출을 위한 헤더 설정
      const headers = {
        'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
        'apikey': this.SUPABASE_ANON_KEY,
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      };
      
      // 승인된 어록만 가져오는 쿼리
      const query = `${this.SUPABASE_URL}/rest/v1/tanya_sayings?admin_approval=eq.true&order=created_at.desc`;
      
      this.debugLog('어록 API 호출', { 
        url: query, 
        headers: Object.keys(headers) 
      });
      
      const response = await fetch(query, {
        method: 'GET',
        headers: headers
      });
      
      if (!response.ok) {
        const errorText = await response.text();
        this.debugLog('어록 로딩 실패', { 
          status: response.status, 
          statusText: response.statusText,
          error: errorText 
        });
        throw new Error(`어록 로딩 실패: ${response.status} ${response.statusText}\n${errorText}`);
      }
      
      const sayings = await response.json();
      
      this.debugLog('어록 로딩 성공', { 
        count: sayings.length,
        firstSaying: sayings.length > 0 ? sayings[0].saying_title : 'N/A'
      });
      
      // 데이터 저장
      this.allSayings = sayings;
      this.filteredSayings = [...sayings];
      
      // 필터 이벤트 연결
      this.attachFilterEvents();
      
      // 어록 표시
      await this.displaySayings();
      
    } catch (error) {
      this.debugLog('어록 로딩 에러', { error: error.message });
      this.renderError('어록을 불러오는데 실패했습니다', error.message);
    }
  }

  // 어록 표시
  async displaySayings() {
    this.debugLog('어록 표시 시작');
    
    const container = document.getElementById('sayings-container');
    const stats = this.calculateStats();
    
    // 통계 업데이트
    const statsText = `총 ${stats.total}개의 어록 (${Object.entries(stats.byCategory).map(([cat, count]) => `${cat}: ${count}개`).join(', ')})`;
    document.getElementById('sayings-stats').textContent = statsText;
    
    this.debugLog('어록 통계 계산 완료', stats);
    
    if (this.filteredSayings.length === 0) {
      container.innerHTML = '<div class="empty-state">📝 표시할 어록이 없습니다.</div>';
      this.debugLog('표시할 어록 없음');
      return;
    }
    
    // 어록 카드 생성 (비동기 처리)
    const sayingCards = await Promise.all(this.filteredSayings.map(async saying => {
      // Markdown을 HTML로 변환 (비동기)
      const contentHtml = await this.convertMarkdownToHtml(saying.saying);
      
      // 날짜 포맷팅
      const date = new Date(saying.created_at);
      const formattedDate = date.toLocaleDateString('ko-KR', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
      
      // 등록자 정보 (register 필드 사용)
      const authorName = saying.register || saying.user_name || '알 수 없음';
      
      return `
        <div class="saying-card" data-category="${saying.cat}" data-target="${saying.target}">
          <div class="saying-header">
            <h3 class="saying-title">${this.escapeHtml(saying.saying_title)}</h3>
            <div class="saying-meta">
              <span class="saying-category">${this.escapeHtml(saying.cat)}</span>
              <span class="saying-target">${this.escapeHtml(saying.target)}</span>
            </div>
          </div>
          <div class="saying-content">
            ${contentHtml}
          </div>
          <div class="saying-footer">
            <span class="saying-author">👤 ${this.escapeHtml(authorName)}</span>
            <span class="saying-date">📅 ${formattedDate}</span>
          </div>
        </div>
      `;
    }));
    
    container.innerHTML = sayingCards.join('');
    
    this.debugLog('어록 표시 완료', { 
      filteredCount: this.filteredSayings.length,
      cardsGenerated: sayingCards.length 
    });
  }
  
  // 마크다운을 HTML로 변환하는 함수 (비동기)
  async convertMarkdownToHtml(content) {
    // 빈 내용 체크
    if (!content || typeof content !== 'string') {
      console.warn('⚠️ 변환할 마크다운 내용이 없습니다');
      return '';
    }

    try {
      // 마크다운 라이브러리가 로드되었는지 확인
      if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
        console.log('✅ 마크다운 라이브러리 사용 가능');
        
        // marked로 마크다운을 HTML로 변환
        const rawHtml = marked.parse(content);
        
        // DOMPurify로 HTML 정화
        const cleanHtml = DOMPurify.sanitize(rawHtml);
        
        console.log('🎯 마크다운 변환 완료');
        return cleanHtml;
      } else {
        console.warn('⚠️ 마크다운 라이브러리가 로드되지 않음, 기본 처리 사용');
        return this.basicMarkdownToHtml(content);
      }
    } catch (error) {
      console.error('❌ 마크다운 변환 중 오류:', error);
      // 오류 발생 시 기본 마크다운 처리로 폴백
      return this.basicMarkdownToHtml(content);
    }
  }

  // 기본 마크다운 처리 (라이브러리 없이) - 개선된 버전
  basicMarkdownToHtml(markdown) {
    let html = this.escapeHtml(markdown);
    
    // 기본적인 마크다운 문법 처리 (순서 중요)
    html = html
      // 코드 블록 (```)
      .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
      // 인라인 코드 (`)
      .replace(/`([^`]+)`/g, '<code>$1</code>')
      // 볼드 텍스트 (**)
      .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
      // 이탤릭 텍스트 (*)
      .replace(/\*([^*]+)\*/g, '<em>$1</em>')
      // 헤더 (###, ##, #)
      .replace(/^### (.+)$/gm, '<h3>$1</h3>')
      .replace(/^## (.+)$/gm, '<h2>$1</h2>')
      .replace(/^# (.+)$/gm, '<h1>$1</h1>')
      // 인용문 (>)
      .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
      // 링크 [텍스트](URL)
      .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
      // 리스트 (- 또는 *)
      .replace(/^[*-] (.+)$/gm, '<li>$1</li>')
      // 줄바꿈 처리
      .replace(/\n\n/g, '</p><p>')
      .replace(/\n/g, '<br>');
    
    // 리스트 태그로 감싸기
    html = html.replace(/(<li>.*<\/li>)/gs, '<ul>$1</ul>');
    
    // 단락 태그로 감싸기 (이미 p 태그가 있는 경우 제외)
    if (!html.includes('<p>') && !html.includes('<h1>') && !html.includes('<h2>') && !html.includes('<h3>')) {
      html = '<p>' + html + '</p>';
    }
    
    this.debugLog('기본 마크다운 변환 완료', { 
      원본길이: markdown.length,
      변환길이: html.length 
    });
    
    return html;
  }
  
  // HTML 이스케이프
  escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  // 에러 렌더링
  renderError(message) {
    const container = document.getElementById("sayings-container");
    const statsDiv = document.getElementById("sayings-stats");
    
    if (container) {
      container.innerHTML = `
        <div class="empty-state">
          <div class="icon">❌</div>
          <div class="title">오류가 발생했습니다</div>
          <div class="description">${message}</div>
        </div>
      `;
    }
    
    if (statsDiv) {
      statsDiv.innerHTML = `<div style="color: red;">오류: ${message}</div>`;
    }
    
    this.debugLog('에러 렌더링 완료', { message });
  }

  // 로그 확인 함수
  showDebugLogs() {
    const statusInfo = [
      `📊 총 어록 수: ${this.sayings ? this.sayings.length : 0}개`,
      `🔍 필터된 어록 수: ${document.querySelectorAll('.saying-item').length}개`,
      `🎯 현재 카테고리 필터: ${document.getElementById('categoryFilter').value || '전체'}`,
      `🏷️ 현재 타겟 필터: ${document.getElementById('targetFilter').value || '전체'}`,
      `👤 현재 사용자: ${this.currentUser ? this.currentUser.email : '로그인 필요'}`,
      `🔔 백그라운드 새 어록 감지: 활성화 (1분 간격)`,
      `⏰ 백그라운드 마지막 확인: 백그라운드 스크립트에서 관리`,
      `📱 브라우저 알림: 활성화`,
      `💾 로컬 스토리지 상태: ${Object.keys(localStorage).length}개 항목`
    ].join('\n');
    
    const userConfirmed = confirm(`🛠️ 어록 관리 시스템 상태\n\n${statusInfo}\n\n새 어록 감지 기능을 테스트하시겠습니까?`);
    
    if (userConfirmed) {
      this.checkBackgroundNewSayings();
    }
  }

  // 현재 사용자 정보 로드
  async loadCurrentUser() {
    try {
      this.debugLog('현재 사용자 정보 로드 시작');
      
      // 현재 사용자 정보 가져오기
      const authRes = await fetch(`${this.SUPABASE_URL}/auth/v1/user`, {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
          'apikey': this.SUPABASE_ANON_KEY,
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        mode: 'cors',
        credentials: 'omit'
      });
      
      if (!authRes.ok) {
        throw new Error('사용자 인증 실패');
      }
      
      const authUser = await authRes.json();
      
      // 사용자 닉네임 가져오기
      const userRes = await fetch(`${this.SUPABASE_URL}/rest/v1/users?select=id,nickname&email=eq.${encodeURIComponent(authUser.email)}&limit=1`, {
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
          'apikey': this.SUPABASE_ANON_KEY,
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        mode: 'cors',
        credentials: 'omit'
      });
      
      if (!userRes.ok) {
        throw new Error('사용자 정보 조회 실패');
      }
      
      const userData = await userRes.json();
      if (!userData || userData.length === 0) {
        throw new Error('사용자 데이터를 찾을 수 없습니다');
      }
      
      this.currentUser = {
        id: userData[0].id,
        nickname: userData[0].nickname || authUser.email,
        email: authUser.email
      };
      
      this.debugLog('현재 사용자 정보 로드 완료', this.currentUser);
      
      // UI에 사용자 정보 표시 (헤더)
      const currentUserElement = document.getElementById('current-user');
      if (currentUserElement) {
        currentUserElement.innerHTML = `👤 ${this.currentUser.nickname}`;
      }
      
      // UI에 사용자 정보 표시 (모달)
      const modalCurrentUserElement = document.getElementById('modal-current-user');
      if (modalCurrentUserElement) {
        modalCurrentUserElement.innerHTML = `👤 ${this.currentUser.nickname}`;
        modalCurrentUserElement.style.color = '#2c3e50';
        modalCurrentUserElement.style.fontWeight = 'bold';
      }
      
    } catch (error) {
      this.debugLog('현재 사용자 정보 로드 실패', { error: error.message });
      
      // 에러 상태 표시
      const currentUserElement = document.getElementById('current-user');
      if (currentUserElement) {
        currentUserElement.innerHTML = '👤 사용자 정보 로드 실패';
        currentUserElement.style.color = '#e74c3c';
      }
      
      const modalCurrentUserElement = document.getElementById('modal-current-user');
      if (modalCurrentUserElement) {
        modalCurrentUserElement.innerHTML = '❌ 사용자 정보를 불러올 수 없습니다';
        modalCurrentUserElement.style.color = '#e74c3c';
      }
      
      throw error;
    }
  }

  // 어록 등록 모달 이벤트 등록
  attachAddSayingEvents() {
    this.debugLog('어록 등록 모달 이벤트 등록 시작');
    
    const addBtn = document.getElementById('add-saying-btn');
    const modal = document.getElementById('add-saying-modal');
    const closeBtn = document.getElementById('modal-close');
    const cancelBtn = document.getElementById('cancel-btn');
    const submitBtn = document.getElementById('submit-btn');
    const form = document.getElementById('saying-form');
    
    // 모달 열기
    if (addBtn) {
      addBtn.addEventListener('click', () => {
        this.debugLog('어록 등록 모달 열기');
        modal.style.display = 'flex';
        document.getElementById('saying-title').focus();
      });
    }
    
    // 모달 닫기
    const closeModal = () => {
      this.debugLog('어록 등록 모달 닫기');
      modal.style.display = 'none';
      form.reset();
      this.resetPreviewTabs();
    };
    
    if (closeBtn) {
      closeBtn.addEventListener('click', closeModal);
    }
    
    if (cancelBtn) {
      cancelBtn.addEventListener('click', closeModal);
    }
    
    // 모달 외부 클릭 시 닫기
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        closeModal();
      }
    });
    
    // ESC 키로 모달 닫기
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && modal.style.display === 'flex') {
        closeModal();
      }
    });
    
    // 마크다운 미리보기 탭 이벤트
    this.attachPreviewTabEvents();
    
    // 폼 제출 이벤트
    if (form) {
      form.addEventListener('submit', (e) => {
        e.preventDefault();
        this.handleSayingSubmit();
      });
    }
    
    if (submitBtn) {
      submitBtn.addEventListener('click', (e) => {
        e.preventDefault();
        this.handleSayingSubmit();
      });
    }
    
    this.debugLog('어록 등록 모달 이벤트 등록 완료');
  }

  // 마크다운 미리보기 탭 이벤트 등록
  attachPreviewTabEvents() {
    const previewTabs = document.querySelectorAll('.preview-tab');
    const contentTextarea = document.getElementById('saying-content');
    const previewDiv = document.getElementById('markdown-preview');
    
    previewTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        // 모든 탭에서 active 클래스 제거
        previewTabs.forEach(t => t.classList.remove('active'));
        
        // 클릭된 탭에 active 클래스 추가
        tab.classList.add('active');
        
        const tabType = tab.getAttribute('data-tab');
        
        if (tabType === 'edit') {
          // 편집 모드
          contentTextarea.style.display = 'block';
          previewDiv.style.display = 'none';
        } else if (tabType === 'preview') {
          // 미리보기 모드
          contentTextarea.style.display = 'none';
          previewDiv.style.display = 'block';
          
          // 마크다운 렌더링
          this.renderMarkdownPreview();
        }
      });
    });
    
    // 실시간 미리보기 업데이트
    contentTextarea.addEventListener('input', () => {
      const activeTab = document.querySelector('.preview-tab.active');
      if (activeTab && activeTab.getAttribute('data-tab') === 'preview') {
        // 미리보기 탭이 활성화된 경우 실시간 업데이트
        this.renderMarkdownPreview();
      }
    });
  }

  // 마크다운 미리보기 렌더링 (비동기)
  async renderMarkdownPreview() {
    const contentTextarea = document.getElementById('saying-content');
    const previewDiv = document.getElementById('markdown-preview');
    
    if (!contentTextarea || !previewDiv) {
      console.error('❌ 미리보기 요소를 찾을 수 없습니다');
      return;
    }
    
    const content = contentTextarea.value.trim();
    
    if (!content) {
      previewDiv.innerHTML = '<div style="padding: 20px; text-align: center; color: #999;">미리보기할 내용을 입력해주세요</div>';
      return;
    }
    
    // 로딩 상태 표시
    previewDiv.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">미리보기 생성 중...</div>';
    
    try {
      // 마크다운을 HTML로 변환
      const htmlContent = await this.convertMarkdownToHtml(content);
      
      // 변환된 HTML을 미리보기에 표시
      previewDiv.innerHTML = htmlContent || '<div style="padding: 20px; text-align: center; color: #999;">내용을 변환할 수 없습니다</div>';
      
      console.log('✅ 마크다운 미리보기 렌더링 완료');
    } catch (error) {
      console.error('❌ 마크다운 미리보기 렌더링 실패:', error);
      previewDiv.innerHTML = '<div style="padding: 20px; text-align: center; color: #f44336;">미리보기 생성 중 오류가 발생했습니다</div>';
    }
  }

  // 어록 제출 처리
  async handleSayingSubmit() {
    this.debugLog('어록 제출 처리 시작');
    
    const title = document.getElementById('saying-title').value.trim();
    const content = document.getElementById('saying-content').value.trim();
    const category = document.getElementById('saying-category').value;
    const target = document.getElementById('saying-target').value;
    const submitBtn = document.getElementById('submit-btn');
    
    // 유효성 검사
    if (!title) {
      alert('❌ 어록 제목을 입력해주세요.');
      document.getElementById('saying-title').focus();
      return;
    }
    
    if (!content) {
      alert('❌ 어록 내용을 입력해주세요.');
      document.getElementById('saying-content').focus();
      return;
    }
    
    if (!category) {
      alert('❌ 카테고리를 선택해주세요.');
      document.getElementById('saying-category').focus();
      return;
    }
    
    if (!target) {
      alert('❌ 타겟을 선택해주세요.');
      document.getElementById('saying-target').focus();
      return;
    }
    
    if (!this.currentUser) {
      alert('❌ 사용자 정보를 불러올 수 없습니다. 페이지를 새로고침해주세요.');
      return;
    }
    
    try {
      // 버튼 상태 변경
      const originalText = submitBtn.textContent;
      submitBtn.textContent = '🔄 등록 중...';
      submitBtn.disabled = true;
      
      this.debugLog('어록 등록 API 호출', {
        title,
        contentLength: content.length,
        category,
        target,
        userId: this.currentUser.id,
        userNickname: this.currentUser.nickname
      });
      
      // 어록 데이터 생성 (register 필드 사용)
      const sayingData = {
        saying_title: title,
        saying: content,
        cat: category,
        target: target,
        register: this.currentUser.nickname, // 등록자 필드명 변경
        user_id: this.currentUser.id, // RLS 정책을 위한 사용자 ID 추가
        admin_approval: false, // 기본적으로 승인 대기 상태
        created_at: new Date().toISOString()
      };
      
      // API 호출
      const response = await fetch(`${this.SUPABASE_URL}/rest/v1/tanya_sayings`, {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${this.ACCESS_TOKEN}`,
          'apikey': this.SUPABASE_ANON_KEY,
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(sayingData)
      });
      
      this.debugLog('어록 등록 API 응답', {
        status: response.status,
        statusText: response.statusText,
        ok: response.ok
      });
      
      if (!response.ok) {
        const errorDetail = await response.text();
        this.debugLog('어록 등록 실패', { 
          status: response.status, 
          error: errorDetail 
        });
        throw new Error(`어록 등록 실패 (${response.status}: ${response.statusText})\n응답: ${errorDetail}`);
      }
      
      this.debugLog('어록 등록 성공');
      
      // 성공 팝업 표시
      this.showSuccessPopup(title, category, target);
      
      // 모달 닫기
      document.getElementById('add-saying-modal').style.display = 'none';
      document.getElementById('saying-form').reset();
      this.resetPreviewTabs();
      
      // 어록 목록 새로고침 (승인된 어록만 표시되므로 새로 등록한 어록은 보이지 않음)
      await this.loadSayings();
      
    } catch (error) {
      this.debugLog('어록 등록 실패', { error: error.message });
      alert(`❌ 어록 등록 중 오류가 발생했습니다:\n${error.message}`);
    } finally {
      // 버튼 상태 복원
      submitBtn.textContent = '📝 등록하기';
      submitBtn.disabled = false;
    }
  }

  // 성공 팝업 표시
  showSuccessPopup(title, category, target) {
    const popup = document.createElement('div');
    popup.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      z-index: 2000;
      text-align: center;
      min-width: 400px;
      border: 3px solid #28a745;
    `;
    
    popup.innerHTML = `
      <div style="font-size: 48px; margin-bottom: 16px;">🎉</div>
      <h3 style="margin: 0 0 16px 0; color: #28a745;">어록 등록 완료!</h3>
      <div style="margin-bottom: 20px; color: #666;">
        <div style="margin-bottom: 8px;"><strong>제목:</strong> ${title}</div>
        <div style="margin-bottom: 8px;"><strong>카테고리:</strong> ${category}</div>
        <div style="margin-bottom: 8px;"><strong>타겟:</strong> ${target}</div>
        <div style="margin-bottom: 8px;"><strong>등록자:</strong> ${this.currentUser.nickname}</div>
      </div>
      <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px; margin-bottom: 20px; color: #856404;">
        <strong>📋 안내사항</strong><br>
        등록된 어록은 관리자 승인 후 목록에 표시됩니다.
      </div>
      <button id="close-popup" style="
        padding: 10px 20px;
        background: #28a745;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
      ">확인</button>
    `;
    
    // 팝업을 body에 추가
    document.body.appendChild(popup);
    
    // 확인 버튼 이벤트
    const closeBtn = popup.querySelector('#close-popup');
    closeBtn.addEventListener('click', () => {
      document.body.removeChild(popup);
    });
    
    // 3초 후 자동으로 닫기
    setTimeout(() => {
      if (document.body.contains(popup)) {
        document.body.removeChild(popup);
      }
    }, 5000);
    
    this.debugLog('성공 팝업 표시 완료', { title, category, target });
  }

  // 카테고리와 타겟 옵션을 백엔드에서 로드
  async loadCategoryAndTargetOptions() {
    this.debugLog('카테고리와 타겟 옵션 로드 시작');
    
    try {
      // 카테고리 데이터 가져오기
      this.debugLog('카테고리 데이터 요청 중...');
      const categoryResponse = await fetch(`${this.SUPABASE_URL}/rest/v1/sayings_cat?select=saying_cat&order=saying_cat.asc`, {
        headers: {
          'apikey': this.SUPABASE_ANON_KEY,
          'Authorization': `Bearer ${this.SUPABASE_ANON_KEY}`,
          'Content-Type': 'application/json'
        }
      });

      // 타겟 데이터 가져오기  
      this.debugLog('타겟 데이터 요청 중...');
      const targetResponse = await fetch(`${this.SUPABASE_URL}/rest/v1/sayings_target?select=target&order=target.asc`, {
        headers: {
          'apikey': this.SUPABASE_ANON_KEY,
          'Authorization': `Bearer ${this.SUPABASE_ANON_KEY}`,
          'Content-Type': 'application/json'
        }
      });

      // 카테고리 응답 처리
      if (categoryResponse.ok) {
        const categoryData = await categoryResponse.json();
        this.debugLog('카테고리 데이터 로드 성공', { count: categoryData.length });
        
        if (categoryData.length === 0) {
          throw new Error('카테고리 데이터가 비어있습니다. sayings_cat 테이블을 확인해주세요.');
        }
        
        // 카테고리 드롭다운 업데이트
        this.updateCategoryDropdowns(categoryData);
      } else {
        const errorText = await categoryResponse.text();
        this.debugLog('카테고리 데이터 로드 실패', { 
          status: categoryResponse.status, 
          statusText: categoryResponse.statusText,
          error: errorText 
        });
        throw new Error(`카테고리 데이터 로드 실패: ${categoryResponse.status} ${categoryResponse.statusText}`);
      }

      // 타겟 응답 처리
      if (targetResponse.ok) {
        const targetData = await targetResponse.json();
        this.debugLog('타겟 데이터 로드 성공', { count: targetData.length });
        
        if (targetData.length === 0) {
          throw new Error('타겟 데이터가 비어있습니다. sayings_target 테이블을 확인해주세요.');
        }
        
        // 타겟 드롭다운 업데이트
        this.updateTargetDropdowns(targetData);
      } else {
        const errorText = await targetResponse.text();
        this.debugLog('타겟 데이터 로드 실패', { 
          status: targetResponse.status, 
          statusText: targetResponse.statusText,
          error: errorText 
        });
        throw new Error(`타겟 데이터 로드 실패: ${targetResponse.status} ${targetResponse.statusText}`);
      }

      this.debugLog('카테고리와 타겟 옵션 로드 완료');
      
    } catch (error) {
      this.debugLog('카테고리/타겟 옵션 로드 중 오류 발생', { error: error.message });
      
      // 에러를 다시 던져서 앱 초기화를 중단
      throw new Error(`백엔드에서 드롭다운 데이터를 가져올 수 없습니다: ${error.message}`);
    }
  }

  // 카테고리 드롭다운 업데이트
  updateCategoryDropdowns(categoryData) {
    const categorySelect = document.getElementById('saying-category');
    if (!categorySelect) return;
    
    // 기존 옵션 제거 (첫 번째 "선택하세요" 옵션 제외)
    while (categorySelect.children.length > 1) {
      categorySelect.removeChild(categorySelect.lastChild);
    }
    
    // 새 카테고리 옵션 추가
    categoryData.forEach(item => {
      const option = document.createElement('option');
      option.value = item.saying_cat;
      option.textContent = item.saying_cat;
      categorySelect.appendChild(option);
    });
    
    // "아무거나" 기본값 설정
    const defaultCategory = categoryData.find(item => item.saying_cat === '아무거나');
    if (defaultCategory) {
      categorySelect.value = defaultCategory.saying_cat;
      this.debugLog('카테고리 기본값 설정', { 기본값: defaultCategory.saying_cat });
    }
    
    // 필터 드롭다운도 업데이트
    this.updateFilterCategoryOptions(categoryData);
    
    this.debugLog('카테고리 드롭다운 업데이트 완료', {
      옵션개수: categorySelect.children.length - 1,
      기본값: categorySelect.value || '없음'
    });
  }

  // 타겟 드롭다운 업데이트
  updateTargetDropdowns(targetData) {
    const targetSelect = document.getElementById('saying-target');
    if (!targetSelect) return;
    
    // 기존 옵션 제거 (첫 번째 "선택하세요" 옵션 제외)
    while (targetSelect.children.length > 1) {
      targetSelect.removeChild(targetSelect.lastChild);
    }
    
    // 새 타겟 옵션 추가
    targetData.forEach(item => {
      const option = document.createElement('option');
      option.value = item.target;
      option.textContent = item.target;
      targetSelect.appendChild(option);
    });
    
    // "누구나" 기본값 설정
    const defaultTarget = targetData.find(item => item.target === '누구나');
    if (defaultTarget) {
      targetSelect.value = defaultTarget.target;
      this.debugLog('타겟 기본값 설정', { 기본값: defaultTarget.target });
    }
    
    // 필터 드롭다운도 업데이트
    this.updateFilterTargetOptions(targetData);
    
    this.debugLog('타겟 드롭다운 업데이트 완료', {
      옵션개수: targetSelect.children.length - 1,
      기본값: targetSelect.value || '없음'
    });
  }

  // 필터용 카테고리 옵션 업데이트
  updateFilterCategoryOptions(categoryData) {
    const categoryFilter = document.getElementById('category-filter');
    if (!categoryFilter) return;
    
    // 기존 옵션 제거 (첫 번째 "모든 카테고리" 옵션 제외)
    while (categoryFilter.children.length > 1) {
      categoryFilter.removeChild(categoryFilter.lastChild);
    }
    
    // 새 카테고리 옵션 추가
    categoryData.forEach(item => {
      const option = document.createElement('option');
      option.value = item.saying_cat;
      option.textContent = item.saying_cat;
      categoryFilter.appendChild(option);
    });
    
    this.debugLog('필터용 카테고리 옵션 업데이트 완료', {
      옵션개수: categoryFilter.children.length - 1
    });
  }

  // 필터용 타겟 옵션 업데이트
  updateFilterTargetOptions(targetData) {
    const targetFilter = document.getElementById('target-filter');
    if (!targetFilter) return;
    
    // 기존 옵션 제거 (첫 번째 "모든 타겟" 옵션 제외)
    while (targetFilter.children.length > 1) {
      targetFilter.removeChild(targetFilter.lastChild);
    }
    
    // 새 타겟 옵션 추가
    targetData.forEach(item => {
      const option = document.createElement('option');
      option.value = item.target;
      option.textContent = item.target;
      targetFilter.appendChild(option);
    });
    
    this.debugLog('필터용 타겟 옵션 업데이트 완료', {
      옵션개수: targetFilter.children.length - 1
    });
  }

  // 통계 계산
  calculateStats() {
    const stats = {
      total: this.filteredSayings.length,
      byCategory: {},
      byTarget: {}
    };
    
    this.filteredSayings.forEach(saying => {
      // 카테고리별 통계
      const category = saying.cat || '기타';
      stats.byCategory[category] = (stats.byCategory[category] || 0) + 1;
      
      // 타겟별 통계
      const target = saying.target || '기타';
      stats.byTarget[target] = (stats.byTarget[target] || 0) + 1;
    });
    
    return stats;
  }

  // 필터 적용
  async applyFilters() {
    this.debugLog('필터 적용 시작');
    
    const categoryFilter = document.getElementById('category-filter').value;
    const targetFilter = document.getElementById('target-filter').value;
    const dateFilter = document.getElementById('date-filter').value;
    const searchText = document.getElementById('search-input').value.toLowerCase().trim();
    
    this.debugLog('필터 조건', {
      category: categoryFilter,
      target: targetFilter,
      date: dateFilter,
      search: searchText
    });
    
    this.filteredSayings = this.allSayings.filter(saying => {
      // 카테고리 필터
      if (categoryFilter && categoryFilter !== 'all') {
        if (saying.cat !== categoryFilter) return false;
      }
      
      // 타겟 필터
      if (targetFilter && targetFilter !== 'all') {
        if (saying.target !== targetFilter) return false;
      }
      
      // 날짜 필터
      if (dateFilter && dateFilter !== 'all') {
        const sayingDate = new Date(saying.created_at);
        const now = new Date();
        
        switch (dateFilter) {
          case 'today':
            if (sayingDate.toDateString() !== now.toDateString()) return false;
            break;
          case 'week':
            const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
            if (sayingDate < weekAgo) return false;
            break;
          case 'month':
            const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
            if (sayingDate < monthAgo) return false;
            break;
        }
      }
      
      // 검색 텍스트 필터
      if (searchText) {
        const searchableText = [
          saying.saying_title || '',
          saying.saying || '',
          saying.register || saying.user_name || '',
          saying.cat || '',
          saying.target || ''
        ].join(' ').toLowerCase();
        
        if (!searchableText.includes(searchText)) return false;
      }
      
      return true;
    });
    
    this.debugLog('필터 적용 완료', {
      원본개수: this.allSayings.length,
      필터링된개수: this.filteredSayings.length
    });
    
    await this.displaySayings();
  }

  // 필터 이벤트 연결
  attachFilterEvents() {
    this.debugLog('필터 이벤트 연결 시작');
    
    // 카테고리 필터
    const categoryFilter = document.getElementById('category-filter');
    if (categoryFilter) {
      categoryFilter.addEventListener('change', async () => await this.applyFilters());
    }
    
    // 타겟 필터
    const targetFilter = document.getElementById('target-filter');
    if (targetFilter) {
      targetFilter.addEventListener('change', async () => await this.applyFilters());
    }
    
    // 날짜 필터
    const dateFilter = document.getElementById('date-filter');
    if (dateFilter) {
      dateFilter.addEventListener('change', async () => await this.applyFilters());
    }
    
    // 검색 입력
    const searchInput = document.getElementById('search-input');
    if (searchInput) {
      searchInput.addEventListener('input', () => {
        clearTimeout(this.searchTimeout);
        this.searchTimeout = setTimeout(async () => await this.applyFilters(), 300);
      });
    }
    
    // 필터 초기화 버튼
    const resetButton = document.getElementById('reset-filters');
    if (resetButton) {
      resetButton.addEventListener('click', async () => await this.resetFilters());
    }
    
    this.debugLog('필터 이벤트 연결 완료');
  }
  
  // 필터 초기화
  async resetFilters() {
    this.debugLog('필터 초기화 시작');
    
    // 모든 필터 초기화
    const categoryFilter = document.getElementById('category-filter');
    const targetFilter = document.getElementById('target-filter');
    const dateFilter = document.getElementById('date-filter');
    const searchInput = document.getElementById('search-input');
    
    if (categoryFilter) categoryFilter.value = 'all';
    if (targetFilter) targetFilter.value = 'all';
    if (dateFilter) dateFilter.value = 'all';
    if (searchInput) searchInput.value = '';
    
    // 필터 적용
    await this.applyFilters();
    
    this.debugLog('필터 초기화 완료');
  }

  // 미리보기 탭 초기화
  resetPreviewTabs() {
    const previewTabs = document.querySelectorAll('.preview-tab');
    const contentTextarea = document.getElementById('saying-content');
    const previewDiv = document.getElementById('markdown-preview');
    
    // 모든 탭에서 active 클래스 제거
    previewTabs.forEach(tab => tab.classList.remove('active'));
    
    // 편집 탭을 활성화
    const editTab = document.querySelector('.preview-tab[data-tab="edit"]');
    if (editTab) {
      editTab.classList.add('active');
    }
    
    // 편집 모드로 전환
    if (contentTextarea) {
      contentTextarea.style.display = 'block';
    }
    if (previewDiv) {
      previewDiv.style.display = 'none';
      previewDiv.innerHTML = '';
    }
    
    this.debugLog('미리보기 탭 초기화 완료');
  }

  // 새 어록 감지 시작 (기존 코드 제거하고 백그라운드 연동 방식으로 교체)
  startNewSayingsMonitoring() {
    this.debugLog('새 어록 감지 시작');
    
    // 기존 인터벌이 있으면 정리
    if (this.newSayingsCheckInterval) {
      clearInterval(this.newSayingsCheckInterval);
    }
    
    // 새 어록 감지 시작 (백그라운드 연동)
    this.startNewSayingsDetection();
  }

  // 새 어록 감지 체크 (제거됨 - 백그라운드에서 처리)
  // async checkForNewSayings() { ... } - 이 함수는 제거됨

  // 새 어록 모달 표시 (카운트다운 포함)
  showNewSayingsModal(newSayings) {
    console.log(`[SayingsManager] 새 어록 모달 표시: ${newSayings.length}개`);
    
    // 기존 모달이 있으면 제거
    const existingModal = document.getElementById('newSayingsModal');
    if (existingModal) {
      existingModal.remove();
    }
    
    // 모달 HTML 생성
    const modalHtml = `
      <div id="newSayingsModal" class="modal-overlay" style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        animation: fadeIn 0.3s ease-out;
      ">
        <div class="modal-content" style="
          background: white;
          border-radius: 12px;
          padding: 24px;
          max-width: 600px;
          max-height: 80vh;
          overflow-y: auto;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
          animation: slideIn 0.3s ease-out;
          position: relative;
        ">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h2 style="margin: 0; color: #2c3e50; font-size: 24px;">🎉 새 어록 알림</h2>
            <div id="countdownTimer" style="
              background: #e74c3c;
              color: white;
              padding: 8px 12px;
              border-radius: 20px;
              font-weight: bold;
              font-size: 14px;
            ">10초 후 자동 닫힘</div>
          </div>
          
          <p style="margin-bottom: 20px; color: #34495e; font-size: 16px;">
            <strong>${newSayings.length}개</strong>의 새로운 어록이 등록되었습니다!
          </p>
          
          <div id="newSayingsList" style="margin-bottom: 20px;">
            ${newSayings.map(saying => `
              <div style="
                border: 1px solid #ecf0f1;
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 12px;
                background: #f8f9fa;
              ">
                <div style="font-weight: bold; color: #2c3e50; margin-bottom: 8px;">
                  "${saying.title || saying.saying_title}"
                </div>
                <div style="color: #7f8c8d; font-size: 14px; margin-bottom: 4px;">
                  👤 ${saying.author || saying.register || '알 수 없음'} | 📂 ${saying.sayings_cat?.name || saying.cat || '미분류'} | 🎯 ${saying.sayings_target?.name || saying.target || '전체'}
                </div>
                <div style="color: #95a5a6; font-size: 12px;">
                  📅 ${new Date(saying.created_at).toLocaleString('ko-KR')}
                </div>
              </div>
            `).join('')}
          </div>
          
          <div style="display: flex; gap: 12px; justify-content: flex-end;">
            <button id="dismissNewSayings" style="
              padding: 10px 20px;
              border: 1px solid #bdc3c7;
              background: white;
              color: #7f8c8d;
              border-radius: 6px;
              cursor: pointer;
              font-size: 14px;
            ">나중에</button>
            <button id="viewNewSayings" style="
              padding: 10px 20px;
              border: none;
              background: #3498db;
              color: white;
              border-radius: 6px;
              cursor: pointer;
              font-size: 14px;
              font-weight: bold;
            ">새 어록 보기</button>
          </div>
        </div>
      </div>
      
      <style>
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        
        @keyframes slideIn {
          from { transform: translateY(-30px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }
        
        #newSayingsModal button:hover {
          opacity: 0.8;
          transform: translateY(-1px);
        }
      </style>
    `;
    
    // 모달을 body에 추가
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // 카운트다운 시작
    let countdown = 10;
    const countdownElement = document.getElementById('countdownTimer');
    const countdownInterval = setInterval(() => {
      countdown--;
      if (countdown > 0) {
        countdownElement.textContent = `${countdown}초 후 자동 닫힘`;
      } else {
        clearInterval(countdownInterval);
        this.closeNewSayingsModal();
      }
    }, 1000);
    
    // 이벤트 리스너 추가
    const modal = document.getElementById('newSayingsModal');
    const dismissBtn = document.getElementById('dismissNewSayings');
    const viewBtn = document.getElementById('viewNewSayings');
    
    // 오버레이 클릭으로 닫기
    modal.addEventListener('click', (e) => {
      if (e.target === modal) {
        clearInterval(countdownInterval);
        this.closeNewSayingsModal();
      }
    });
    
    // 나중에 버튼
    dismissBtn.addEventListener('click', () => {
      clearInterval(countdownInterval);
      this.closeNewSayingsModal();
    });
    
    // 새 어록 보기 버튼
    viewBtn.addEventListener('click', () => {
      clearInterval(countdownInterval);
      this.closeNewSayingsModal();
      this.loadSayings(); // 어록 목록 새로고침
    });
    
    // 모달 참조 저장 (카운트다운 정리용)
    this.currentModalCountdown = countdownInterval;
  }
  
  // 새 어록 모달 닫기
  closeNewSayingsModal() {
    const modal = document.getElementById('newSayingsModal');
    if (modal) {
      modal.style.animation = 'fadeOut 0.3s ease-out';
      setTimeout(() => {
        modal.remove();
      }, 300);
    }
    
    // 카운트다운 정리
    if (this.currentModalCountdown) {
      clearInterval(this.currentModalCountdown);
      this.currentModalCountdown = null;
    }
  }

  // 새 어록 감지 정리
  cleanup() {
    console.log('[SayingsManager] 새 어록 감지 정리');
    
    if (this.newSayingsCheckInterval) {
      clearInterval(this.newSayingsCheckInterval);
      this.newSayingsCheckInterval = null;
    }
    
    if (this.currentModalCountdown) {
      clearInterval(this.currentModalCountdown);
      this.currentModalCountdown = null;
    }
    
    // 모달 제거
    const modal = document.getElementById('newSayingsModal');
    if (modal) {
      modal.remove();
    }
  }

  // 새 어록 감지 시작
  startNewSayingsDetection() {
    console.log('[SayingsManager] 새 어록 감지 시작');
    
    // 기존 타이머가 있으면 정리
    if (this.newSayingsTimer) {
      clearInterval(this.newSayingsTimer);
    }
    
    // 페이지 로드 시 백그라운드에서 감지된 새 어록 확인
    this.checkBackgroundNewSayings();
    
    // 1분마다 새 어록 확인 (백그라운드와 동기화)
    this.newSayingsTimer = setInterval(() => {
      this.checkBackgroundNewSayings();
    }, 60000); // 1분
    
    console.log('[SayingsManager] 새 어록 감지 타이머 설정 완료 (1분 간격)');
  }
  
  // 백그라운드에서 감지된 새 어록 확인
  async checkBackgroundNewSayings() {
    try {
      const { hasNewSayings, pendingNewSayings } = await new Promise((resolve) => {
        chrome.storage.local.get(['hasNewSayings', 'pendingNewSayings'], resolve);
      });
      
      if (hasNewSayings && pendingNewSayings && pendingNewSayings.length > 0) {
        console.log(`[SayingsManager] 백그라운드에서 감지된 새 어록: ${pendingNewSayings.length}개`);
        this.showNewSayingsModal(pendingNewSayings);
        
        // 표시 후 플래그 제거
        chrome.storage.local.remove(['hasNewSayings', 'pendingNewSayings']);
      }
    } catch (error) {
      console.error('[SayingsManager] 백그라운드 새 어록 확인 오류:', error);
    }
  }
}

// 페이지 로드 시 초기화
document.addEventListener('DOMContentLoaded', async () => {
  console.log('=== 어록 관리 페이지 초기화 시작 ===');
  console.log('현재 시간:', new Date().toLocaleString());
  
  // chrome.storage에서 설정 확인
  let debugMode = false; // 기본값
  try {
    const configData = await chrome.storage.local.get('sayings_config');
    console.log('chrome.storage 설정 확인:', {
      hasSayingsConfig: !!configData.sayings_config,
      config: configData.sayings_config ? {
        hasUrl: !!configData.sayings_config.SUPABASE_URL,
        hasKey: !!configData.sayings_config.SUPABASE_ANON_KEY,
        hasToken: !!configData.sayings_config.ACCESS_TOKEN,
        debugMode: configData.sayings_config.DEBUG_MODE,
        timestamp: configData.sayings_config.timestamp
      } : null
    });
    
    // DEBUG_MODE 설정 확인
    if (configData.sayings_config && configData.sayings_config.DEBUG_MODE !== undefined) {
      debugMode = configData.sayings_config.DEBUG_MODE;
    }
    
  } catch (error) {
    console.error('chrome.storage 설정 확인 실패:', error);
  }
  
  // 디버그 요소 표시/숨김 처리
  const debugElement = document.getElementById('debug-info');
  if (debugElement) {
    if (debugMode) {
      debugElement.style.display = "block";
      console.log('디버그 모드 활성화 - 디버그 정보 표시');
    } else {
      debugElement.style.display = "none";
      console.log('디버그 모드 비활성화 - 디버그 정보 숨김');
    }
  }
  
  // 로그 확인 버튼 이벤트 등록 (DEBUG_MODE일 때만)
  const logCheckBtn = document.getElementById('log-check-btn');
  if (logCheckBtn) {
    if (debugMode) {
      console.log('디버그 모드: 로그 확인 버튼 이벤트 등록');
      logCheckBtn.style.display = "inline-block";
      
      logCheckBtn.addEventListener('click', async (e) => {
        e.preventDefault();
        console.log('로그 확인 버튼 클릭됨');
        
        // 버튼 상태 변경
        const originalText = logCheckBtn.textContent;
        logCheckBtn.textContent = '🔄 확인 중...';
        logCheckBtn.disabled = true;
        
        try {
          // SayingsManager가 초기화되었는지 확인
          if (window.sayingsManager && typeof window.sayingsManager.showDebugLogs === 'function') {
            await window.sayingsManager.showDebugLogs();
          } else {
            console.error('SayingsManager가 초기화되지 않았습니다');
            alert('❌ 관리자가 초기화되지 않았습니다. 페이지를 새로고침해주세요.');
          }
        } finally {
          // 버튼 상태 복원
          logCheckBtn.textContent = originalText;
          logCheckBtn.disabled = false;
        }
      });
      console.log('로그 확인 버튼 이벤트 등록 완료');
    } else {
      console.log('디버그 모드 비활성화: 로그 확인 버튼 숨김');
      logCheckBtn.style.display = "none";
    }
  }
  
  try {
    // SayingsManager 초기화
    console.log('SayingsManager 인스턴스 생성 중...');
    window.sayingsManager = new SayingsManager();
    
    console.log('SayingsManager 초기화 시작...');
    await window.sayingsManager.initialize();
    
    console.log('✅ 어록 관리 페이지 초기화 완료');
    
  } catch (error) {
    console.error('❌ 초기화 실패:', error);
    
    // UI에 오류 표시
    const statsElement = document.getElementById('sayings-stats');
    if (statsElement) {
      statsElement.innerHTML = `
        <div style="color: red; text-align: center; padding: 20px;">
          ❌ 초기화 실패<br>
          ${error.message}<br>
          <small>로그인 후 다시 시도해주세요.</small>
        </div>
      `;
    }
    
    const container = document.getElementById("sayings-container");
    if (container) {
      container.innerHTML = `
        <div class="empty-state">
          <div class="icon">❌</div>
          <div class="title">초기화 실패</div>
          <div class="description">${error.message}</div>
        </div>
      `;
    }
    
    // 디버그 정보에도 표시 (DEBUG_MODE일 때만)
    if (debugMode) {
      const debugElement = document.getElementById('debug-info');
      if (debugElement) {
        debugElement.innerHTML = `❌ 초기화 실패: ${error.message}<br><button id="log-check-btn" style="display: inline-block;">📋 로그 확인</button>`;
        debugElement.style.display = "block";
        
        // 버튼 이벤트 다시 등록
        const newBtn = document.getElementById('log-check-btn');
        if (newBtn) {
          newBtn.addEventListener('click', async (e) => {
            e.preventDefault();
            
            // 간단한 로그 정보 표시
            const logInfo = `❌ 초기화 실패 상태\n\n오류: ${error.message}\n\n시간: ${new Date().toLocaleString()}`;
            alert(logInfo);
          });
        }
      }
    }
  }
  
  console.log('=== DOMContentLoaded 이벤트 처리 완료 ===');
});

// 페이지 언로드 시 정리
window.addEventListener('beforeunload', () => {
  console.log('페이지 언로드 - 새 어록 감지 기능 정리');
  if (window.sayingsManager) {
    window.sayingsManager.cleanup();
  }
});

// 전역 함수로 등록
window.sayingsManager = null;