TK-FB-Project/web-ui/js/page-access-management.js

// page-access-management.js - 페이지 권한 관리

// 전역 변수
let allUsers = [];
let allPages = [];
let currentUserId = null;
let currentFilter = 'all';

// DOM이 로드되면 초기화
document.addEventListener('DOMContentLoaded', async () => {
  console.log('🚀 페이지 권한 관리 시스템 초기화');

  // API 함수가 로드될 때까지 대기
  let retryCount = 0;
  while (!window.apiCall && retryCount < 50) {
    await new Promise(resolve => setTimeout(resolve, 100));
    retryCount++;
  }

  if (!window.apiCall) {
    showToast('시스템을 초기화할 수 없습니다. 페이지를 새로고침해주세요.', 'error');
    return;
  }

  // 이벤트 리스너 설정
  setupEventListeners();

  // 데이터 로드
  await loadInitialData();
});

// 이벤트 리스너 설정
function setupEventListeners() {
  // 필터 버튼
  document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
      e.target.classList.add('active');
      currentFilter = e.target.dataset.filter;
      filterUsers();
    });
  });

  // 저장 버튼
  const saveBtn = document.getElementById('savePageAccessBtn');
  if (saveBtn) {
    saveBtn.addEventListener('click', savePageAccess);
  }
}

// 초기 데이터 로드
async function loadInitialData() {
  try {
    // 페이지 목록 로드
    const pagesResponse = await window.apiCall('/pages');
    if (pagesResponse && pagesResponse.success) {
      allPages = pagesResponse.data;
      console.log('✅ 페이지 목록 로드:', allPages.length + '개');
    }

    // 사용자 목록 로드 - 계정이 있는 작업자만
    const workersResponse = await window.apiCall('/workers?limit=1000');
    if (workersResponse) {
      const workers = Array.isArray(workersResponse) ? workersResponse : (workersResponse.data || []);

      // user_id가 있고 활성 상태인 작업자만 필터링
      const usersWithAccounts = workers.filter(w => w.user_id && w.is_active);

      // 각 사용자의 페이지 권한 수 조회
      allUsers = await Promise.all(usersWithAccounts.map(async (worker) => {
        try {
          const accessResponse = await window.apiCall(`/users/${worker.user_id}/page-access`);
          const grantedPagesCount = accessResponse && accessResponse.success
            ? accessResponse.data.pageAccess.filter(p => p.can_access).length
            : 0;

          return {
            user_id: worker.user_id,
            username: worker.username || 'N/A',
            name: worker.name || worker.worker_name,
            role_name: worker.role_name || 'User',
            worker_name: worker.worker_name,
            worker_id: worker.worker_id,
            granted_pages_count: grantedPagesCount
          };
        } catch (error) {
          console.error(`권한 조회 오류 (user_id: ${worker.user_id}):`, error);
          return {
            ...worker,
            granted_pages_count: 0
          };
        }
      }));

      console.log('✅ 사용자 목록 로드:', allUsers.length + '명');
      displayUsers();
    }

  } catch (error) {
    console.error('❌ 데이터 로드 오류:', error);
    showToast('데이터를 불러오는 중 오류가 발생했습니다.', 'error');
  }
}

// 사용자 목록 표시
function displayUsers() {
  const tbody = document.getElementById('usersTableBody');
  const emptyState = document.getElementById('emptyState');

  if (allUsers.length === 0) {
    tbody.innerHTML = '';
    emptyState.style.display = 'block';
    return;
  }

  emptyState.style.display = 'none';

  const filteredUsers = filterUsersByStatus();

  if (filteredUsers.length === 0) {
    tbody.innerHTML = `
      <tr>
        <td colspan="6" style="text-align: center; padding: 2rem; color: #6b7280;">
          <p>필터 조건에 맞는 사용자가 없습니다.</p>
        </td>
      </tr>
    `;
    return;
  }

  tbody.innerHTML = filteredUsers.map(user => `
    <tr>
      <td>
        <div style="display: flex; align-items: center; gap: 0.5rem;">
          <div style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem;">
            ${(user.name || user.username).charAt(0)}
          </div>
          <span style="font-weight: 600;">${user.name || user.username}</span>
        </div>
      </td>
      <td>${user.username}</td>
      <td>
        <span class="badge ${user.role_name === 'Admin' ? 'badge-warning' : 'badge-info'}">
          ${user.role_name}
        </span>
      </td>
      <td>${user.worker_name || '-'}</td>
      <td>
        <span style="font-weight: 600; color: ${user.granted_pages_count > 0 ? '#16a34a' : '#6b7280'};">
          ${user.granted_pages_count}개
        </span>
        <span style="color: #9ca3af;"> / ${allPages.length}개</span>
      </td>
      <td>
        <button class="btn btn-sm btn-primary" onclick="openPageAccessModal(${user.user_id})">
          권한 설정
        </button>
      </td>
    </tr>
  `).join('');
}

// 사용자 필터링
function filterUsersByStatus() {
  if (currentFilter === 'all') {
    return allUsers;
  } else if (currentFilter === 'with-access') {
    return allUsers.filter(u => u.granted_pages_count > 0);
  } else if (currentFilter === 'no-access') {
    return allUsers.filter(u => u.granted_pages_count === 0);
  }
  return allUsers;
}

function filterUsers() {
  displayUsers();
}

// 페이지 권한 설정 모달 열기
async function openPageAccessModal(userId) {
  currentUserId = userId;
  const user = allUsers.find(u => u.user_id === userId);

  if (!user) {
    showToast('사용자 정보를 찾을 수 없습니다.', 'error');
    return;
  }

  // 모달 열기
  document.getElementById('pageAccessModal').style.display = 'flex';
  document.body.style.overflow = 'hidden';

  // 사용자 정보 표시
  document.getElementById('modalUserInitial').textContent = (user.name || user.username).charAt(0);
  document.getElementById('modalUserName').textContent = user.name || user.username;
  document.getElementById('modalUsername').textContent = user.username;
  document.getElementById('modalWorkerName').textContent = user.worker_name || '작업자 정보 없음';

  // 페이지 목록 로드
  try {
    const response = await window.apiCall(`/users/${userId}/page-access`);

    if (response && response.success) {
      const pageAccess = response.data.pageAccess;
      renderPageList(pageAccess);
    } else {
      showToast('페이지 권한 정보를 불러올 수 없습니다.', 'error');
    }
  } catch (error) {
    console.error('페이지 권한 조회 오류:', error);
    showToast('페이지 권한 정보를 불러오는 중 오류가 발생했습니다.', 'error');
  }
}

// 페이지 목록 렌더링
function renderPageList(pageAccess) {
  const container = document.getElementById('pageListContainer');

  // 카테고리별로 그룹화
  const grouped = {};
  pageAccess.forEach(page => {
    const category = page.category || 'common';
    if (!grouped[category]) {
      grouped[category] = [];
    }
    grouped[category].push(page);
  });

  const categoryNames = {
    'dashboard': '대시보드',
    'management': '관리',
    'common': '공통',
    'admin': '관리자',
    'work': '작업',
    'guest': '게스트'
  };

  container.innerHTML = Object.keys(grouped).map(category => `
    <div style="margin-bottom: 1rem;">
      <div style="font-weight: 600; font-size: 0.875rem; color: #6b7280; padding: 0.5rem; background: #f9fafb; border-radius: 0.375rem; margin-bottom: 0.5rem;">
        ${categoryNames[category] || category}
      </div>
      ${grouped[category].map(page => `
        <div style="padding: 0.75rem; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: space-between;">
          <label style="display: flex; align-items: center; gap: 0.75rem; cursor: pointer; flex: 1;">
            <input
              type="checkbox"
              class="page-checkbox"
              data-page-id="${page.page_id}"
              ${page.can_access || page.is_default ? 'checked' : ''}
              ${page.is_default ? 'disabled' : ''}
              style="width: 18px; height: 18px; cursor: pointer;"
            />
            <div style="flex: 1;">
              <div style="font-weight: 500; color: #111827;">${page.page_name}</div>
              <div style="font-size: 0.75rem; color: #9ca3af;">${page.page_path}</div>
            </div>
          </label>
          ${page.is_default ? '<span style="font-size: 0.75rem; color: #16a34a; font-weight: 600;">기본 권한</span>' : ''}
        </div>
      `).join('')}
    </div>
  `).join('');
}

// 페이지 권한 저장
async function savePageAccess() {
  if (!currentUserId) return;

  const checkboxes = document.querySelectorAll('.page-checkbox:not([disabled]):checked');
  const pageIds = Array.from(checkboxes).map(cb => parseInt(cb.dataset.pageId));

  try {
    document.getElementById('savePageAccessBtn').disabled = true;
    document.getElementById('savePageAccessBtn').textContent = '저장 중...';

    const response = await window.apiCall(
      `/users/${currentUserId}/page-access`,
      'POST',
      { pageIds, canAccess: true }
    );

    if (response && response.success) {
      showToast('페이지 권한이 저장되었습니다.', 'success');
      closePageAccessModal();
      await loadInitialData(); // 목록 새로고침
    } else {
      throw new Error(response.error || '저장에 실패했습니다.');
    }
  } catch (error) {
    console.error('페이지 권한 저장 오류:', error);
    showToast('페이지 권한 저장 중 오류가 발생했습니다.', 'error');
  } finally {
    document.getElementById('savePageAccessBtn').disabled = false;
    document.getElementById('savePageAccessBtn').textContent = '저장';
  }
}

// 모달 닫기
function closePageAccessModal() {
  document.getElementById('pageAccessModal').style.display = 'none';
  document.body.style.overflow = 'auto';
  currentUserId = null;
}

// 토스트 알림
function showToast(message, type = 'info', duration = 3000) {
  const container = document.getElementById('toastContainer');
  if (!container) return;

  const toast = document.createElement('div');
  toast.className = `toast ${type}`;

  const iconMap = {
    success: '✅',
    error: '❌',
    warning: '⚠️',
    info: 'ℹ️'
  };

  toast.innerHTML = `
    <div class="toast-icon">${iconMap[type] || 'ℹ️'}</div>
    <div class="toast-message">${message}</div>
    <button class="toast-close" onclick="this.parentElement.remove()">×</button>
  `;

  container.appendChild(toast);

  setTimeout(() => {
    if (toast.parentElement) {
      toast.remove();
    }
  }, duration);
}

// 전역 함수로 export
window.openPageAccessModal = openPageAccessModal;
window.closePageAccessModal = closePageAccessModal;