// 작업 분석 페이지 JavaScript

// API 설정 import
import './api-config.js';

// 전역 변수
let currentMode = 'period';
let currentTab = 'worker';
let analysisData = null;
let projectChart = null;
let errorByProjectChart = null;
let errorTimelineChart = null;

// 페이지 초기화
document.addEventListener('DOMContentLoaded', function() {
  
  initializePage();
  loadInitialData();
});

// 페이지 초기화
function initializePage() {
  // 시간 업데이트 시작
  updateCurrentTime();
  setInterval(updateCurrentTime, 1000);
  
  // 사용자 정보 업데이트
  updateUserInfo();
  
  // 프로필 메뉴 토글
  setupProfileMenu();
  
  // 로그아웃 버튼
  setupLogoutButton();
  
  // 기본 날짜 설정은 HTML에서 처리됨 (새로운 UI)
}

// 현재 시간 업데이트 (시 분 초 형식으로 고정)
function updateCurrentTime() {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const timeString = `${hours}시 ${minutes}분 ${seconds}초`;

  const timeElement = document.getElementById('timeValue');
  if (timeElement) {
    timeElement.textContent = timeString;
  }
}

// 사용자 정보 업데이트 - navbar/sidebar는 app-init.js에서 공통 처리
function updateUserInfo() {
  // app-init.js가 navbar 사용자 정보를 처리하므로 여기서는 아무것도 하지 않음
}

// 프로필 메뉴 설정
function setupProfileMenu() {
  const userProfile = document.getElementById('userProfile');
  const profileMenu = document.getElementById('profileMenu');
  
  if (userProfile && profileMenu) {
    userProfile.addEventListener('click', function(e) {
      e.stopPropagation();
      const isVisible = profileMenu.style.display === 'block';
      profileMenu.style.display = isVisible ? 'none' : 'block';
    });
    
    // 외부 클릭 시 메뉴 닫기
    document.addEventListener('click', function() {
      profileMenu.style.display = 'none';
    });
  }
}

// 로그아웃 버튼 설정
function setupLogoutButton() {
  const logoutBtn = document.getElementById('logoutBtn');
  if (logoutBtn) {
    logoutBtn.addEventListener('click', function() {
      if (confirm('로그아웃 하시겠습니까?')) {
        if (window.clearSSOAuth) window.clearSSOAuth();
        window.location.href = window.getLoginUrl ? window.getLoginUrl() : '/login';
      }
    });
  }
}

// 초기 데이터 로드
async function loadInitialData() {
  try {
    
    // 프로젝트 목록 로드
    const projects = await apiCall('/projects/active/list', 'GET');
    const projectData = Array.isArray(projects) ? projects : (projects.data || []);
    
    // 프로젝트 필터 옵션 업데이트
    updateProjectFilters(projectData);
    
    
  } catch (error) {
    console.error('초기 데이터 로딩 오류:', error);
    showToast('초기 데이터를 불러오는데 실패했습니다.', 'error');
  }
}

// 프로젝트 필터 업데이트
function updateProjectFilters(projects) {
  const projectFilter = document.getElementById('projectFilter');
  const projectModeSelect = document.getElementById('projectModeSelect');
  
  if (projectFilter) {
    projectFilter.innerHTML = '<option value="">전체 프로젝트</option>';
    projects.forEach(project => {
      projectFilter.innerHTML += `<option value="${project.project_id}">${project.project_name}</option>`;
    });
  }
  
  if (projectModeSelect) {
    projectModeSelect.innerHTML = '<option value="">프로젝트를 선택하세요</option>';
    projects.forEach(project => {
      projectModeSelect.innerHTML += `<option value="${project.project_id}">${project.project_name}</option>`;
    });
  }
}

// 분석 모드 전환
function switchAnalysisMode(mode) {
  currentMode = mode;
  
  // 탭 버튼 활성화 상태 변경
  document.querySelectorAll('.mode-tab').forEach(tab => {
    tab.classList.remove('active');
  });
  document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
  
  // 모드 콘텐츠 표시/숨김
  document.querySelectorAll('.analysis-mode').forEach(content => {
    content.classList.remove('active');
  });
  document.getElementById(`${mode}-mode`).classList.add('active');
  
}

// 분석 탭 전환
function switchAnalysisTab(tab) {
  currentTab = tab;
  
  // 탭 버튼 활성화 상태 변경
  document.querySelectorAll('.analysis-tab').forEach(tabBtn => {
    tabBtn.classList.remove('active');
  });
  document.querySelector(`[data-tab="${tab}"]`).classList.add('active');
  
  // 탭 콘텐츠 표시/숨김
  document.querySelectorAll('.analysis-content').forEach(content => {
    content.classList.remove('active');
  });
  document.getElementById(`${tab}-analysis`).classList.add('active');
  
}

// 기간별 분석 로드
async function loadPeriodAnalysis() {
  const startDate = document.getElementById('startDate').value;
  const endDate = document.getElementById('endDate').value;
  const projectId = document.getElementById('projectFilter').value;
  
  if (!startDate || !endDate) {
    showToast('시작일과 종료일을 모두 선택해주세요.', 'error');
    return;
  }
  
  if (new Date(startDate) > new Date(endDate)) {
    showToast('시작일이 종료일보다 늦을 수 없습니다.', 'error');
    return;
  }
  
  showLoading(true);
  
  try {
    
    // API 호출 파라미터 구성
    const params = new URLSearchParams({
      start: startDate,
      end: endDate
    });
    
    if (projectId) {
      params.append('project_id', projectId);
    }
    
    // 여러 API를 병렬로 호출하여 종합 분석 데이터 구성
    
    const [statsRes, workerStatsRes, projectStatsRes, errorAnalysisRes] = await Promise.all([
      apiCall(`/work-analysis/stats?${params}`, 'GET').catch(err => {
        console.error(' stats API 오류:', err);
        return { data: null };
      }),
      apiCall(`/work-analysis/worker-stats?${params}`, 'GET').catch(err => {
        console.error(' worker-stats API 오류:', err);
        return { data: [] };
      }),
      apiCall(`/work-analysis/project-stats?${params}`, 'GET').catch(err => {
        console.error(' project-stats API 오류:', err);
        return { data: [] };
      }),
      apiCall(`/work-analysis/error-analysis?${params}`, 'GET').catch(err => {
        console.error(' error-analysis API 오류:', err);
        return { data: {} };
      })
    ]);
    
    console.log('  - stats:', statsRes);
    console.log('  - worker-stats:', workerStatsRes);
    console.log('  - project-stats:', projectStatsRes);
    console.log('  - error-analysis:', errorAnalysisRes);
    
    // 종합 분석 데이터 구성
    analysisData = {
      summary: statsRes.data || statsRes,
      workerStats: workerStatsRes.data || workerStatsRes,
      projectStats: projectStatsRes.data || projectStatsRes,
      errorStats: errorAnalysisRes.data || errorAnalysisRes
    };
    
    
    // 결과 표시
    displayPeriodAnalysis(analysisData);
    
    // 결과 섹션 표시
    document.getElementById('periodResults').style.display = 'block';
    
    showToast('분석이 완료되었습니다.', 'success');
    
  } catch (error) {
    console.error('기간별 분석 오류:', error);
    showToast('분석 중 오류가 발생했습니다.', 'error');
  } finally {
    showLoading(false);
  }
}

// 기간별 분석 결과 표시
function displayPeriodAnalysis(data) {
  // 요약 통계 업데이트
  updateSummaryStats(data.summary || {});
  
  // 작업자별 분석 표시
  displayWorkerAnalysis(data.workerStats || []);
  
  // 프로젝트별 분석 표시
  displayProjectAnalysis(data.projectStats || []);
  
  // 오류 분석 표시 (전체 분석 데이터도 함께 전달)
  displayErrorAnalysis(data.errorStats || {}, data);
}

// 요약 통계 업데이트
function updateSummaryStats(summary) {
  // API 응답 구조에 맞게 필드명 조정
  document.getElementById('totalHours').textContent = `${summary.totalHours || summary.total_hours || 0}h`;
  document.getElementById('totalWorkers').textContent = `${summary.activeworkers || summary.activeWorkers || summary.total_workers || 0}명`;
  document.getElementById('totalProjects').textContent = `${summary.activeProjects || summary.active_projects || summary.total_projects || 0}개`;
  document.getElementById('errorRate').textContent = `${summary.errorRate || summary.error_rate || 0}%`;
}

// 작업자별 분석 표시
function displayWorkerAnalysis(workerStats) {
  const grid = document.getElementById('workerAnalysisGrid');
  
  
  if (!workerStats || (Array.isArray(workerStats) && workerStats.length === 0)) {
    grid.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">👥</div>
        <h3>분석할 작업자 데이터가 없습니다.</h3>
        <p>선택한 기간에 등록된 작업이 없습니다.</p>
      </div>
    `;
    return;
  }
  
  let gridHtml = '';
  
  workerStats.forEach(worker => {
    const workerName = worker.worker_name || worker.name || '알 수 없음';
    const totalHours = worker.total_hours || worker.totalHours || 0;
    
    gridHtml += `
      <div class="worker-card">
        <div class="worker-header">
          <div class="worker-info">
            <div class="worker-avatar">${workerName.charAt(0)}</div>
            <div class="worker-name">${workerName}</div>
          </div>
          <div class="worker-total-hours">${totalHours}h</div>
        </div>
        <div class="worker-projects">
    `;
    
    // API 응답 구조에 따라 프로젝트 데이터 처리
    const projects = worker.projects || worker.project_details || [];
    if (projects.length > 0) {
      projects.forEach(project => {
        const projectName = project.project_name || project.name || '프로젝트';
        gridHtml += `
          <div class="project-item">
            <div class="project-name">${projectName}</div>
            <div class="work-items">
        `;
        
        const works = project.works || project.work_details || project.tasks || [];
        if (works.length > 0) {
          works.forEach(work => {
            const workName = work.work_name || work.task_name || work.name || '작업';
            const workHours = work.hours || work.total_hours || work.work_hours || 0;
            gridHtml += `
              <div class="work-item">
                <div class="work-name">${workName}</div>
                <div class="work-hours">${workHours}h</div>
              </div>
            `;
          });
        } else {
          gridHtml += `
            <div class="work-item">
              <div class="work-name">총 작업시간</div>
              <div class="work-hours">${project.total_hours || project.hours || 0}h</div>
            </div>
          `;
        }
        
        gridHtml += `
            </div>
          </div>
        `;
      });
    } else {
      gridHtml += `
        <div class="project-item">
          <div class="project-name">전체 작업</div>
          <div class="work-items">
            <div class="work-item">
              <div class="work-name">총 작업시간</div>
              <div class="work-hours">${totalHours}h</div>
            </div>
          </div>
        </div>
      `;
    }
    
    gridHtml += `
        </div>
      </div>
    `;
  });
  
  grid.innerHTML = gridHtml;
}

// 프로젝트별 분석 표시
function displayProjectAnalysis(projectStats) {
  const detailsContainer = document.getElementById('projectDetails');
  
  
  if (projectStats && projectStats.length > 0) {
  }
  
  if (!projectStats || projectStats.length === 0) {
    detailsContainer.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">📁</div>
        <h3>분석할 프로젝트 데이터가 없습니다.</h3>
      </div>
    `;
    return;
  }
  
  // 프로젝트 상세 정보 표시
  let detailsHtml = '';
  
  // 전체 시간 계산 (퍼센트 계산용)
  const totalAllHours = projectStats.reduce((sum, p) => {
    return sum + (p.totalHours || p.total_hours || p.hours || 0);
  }, 0);
  
  projectStats.forEach(project => {
    
    const projectName = project.project_name || project.name || project.projectName || '프로젝트';
    const totalHours = project.totalHours || project.total_hours || project.hours || 0;
    
    // 퍼센트 계산
    let percentage = project.percentage || project.percent || 0;
    if (percentage === 0 && totalAllHours > 0) {
      percentage = Math.round((totalHours / totalAllHours) * 100);
    }
    
    detailsHtml += `
      <div class="project-detail-card">
        <div class="project-detail-header">
          <div class="project-detail-name">${projectName}</div>
          <div class="project-percentage">${percentage}%</div>
        </div>
        <div class="project-hours">${totalHours}시간</div>
      </div>
    `;
  });
  
  detailsContainer.innerHTML = detailsHtml;
  
  // 차트 업데이트
  updateProjectChart(projectStats);
}

// 프로젝트 차트 업데이트
function updateProjectChart(projectStats) {
  const ctx = document.getElementById('projectChart');
  
  if (projectChart) {
    projectChart.destroy();
  }
  
  const labels = projectStats.map(p => p.project_name || p.name || p.projectName || '프로젝트');
  const data = projectStats.map(p => p.totalHours || p.total_hours || p.hours || 0);
  
  const colors = [
    '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6',
    '#06b6d4', '#84cc16', '#f97316', '#ec4899', '#6366f1'
  ];
  
  projectChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [{
        data: data,
        backgroundColor: colors.slice(0, data.length),
        borderWidth: 2,
        borderColor: '#ffffff'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'bottom',
          labels: {
            padding: 20,
            usePointStyle: true
          }
        }
      }
    }
  });
}

// 오류 분석 표시
function displayErrorAnalysis(errorStats, allData) {
  
  // errorStats가 배열인 경우 첫 번째 요소 사용
  let errorData = errorStats;
  if (Array.isArray(errorStats) && errorStats.length > 0) {
    errorData = errorStats[0];
  }
  
  // 오류 요약 업데이트 - 실제 데이터 구조에 맞게 수정
  const errorHours = errorData.totalHours || errorData.total_hours || errorData.error_hours || 0;
  
  // 전체 작업 시간에서 오류 시간을 빼서 정규 시간 계산
  // 요약 통계에서 전체 시간을 가져와서 계산
  const totalHours = allData && allData.summary ? allData.summary.totalHours : 0;
  const normalHours = Math.max(0, totalHours - errorHours);
  
  
  document.getElementById('normalHours').textContent = `${normalHours}h`;
  document.getElementById('errorHours').textContent = `${errorHours}h`;
  
  // 프로젝트별 에러율 차트
  if (errorStats.projectErrorRates) {
    updateErrorByProjectChart(errorStats.projectErrorRates);
  }
  
  // 일별 오류 추이 차트
  if (errorStats.dailyErrorTrend) {
    updateErrorTimelineChart(errorStats.dailyErrorTrend);
  }
  
  // 오류 유형별 분석
  if (errorStats.errorTypes) {
    displayErrorTypes(errorStats.errorTypes);
  }
}

// 프로젝트별 에러율 차트 업데이트
function updateErrorByProjectChart(projectErrorRates) {
  const ctx = document.getElementById('errorByProjectChart');
  
  if (errorByProjectChart) {
    errorByProjectChart.destroy();
  }
  
  const labels = projectErrorRates.map(p => p.project_name);
  const data = projectErrorRates.map(p => p.error_rate);
  
  errorByProjectChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: '에러율 (%)',
        data: data,
        backgroundColor: 'rgba(239, 68, 68, 0.8)',
        borderColor: 'rgba(239, 68, 68, 1)',
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          max: 100,
          ticks: {
            callback: function(value) {
              return value + '%';
            }
          }
        }
      },
      plugins: {
        legend: {
          display: false
        }
      }
    }
  });
}

// 일별 오류 추이 차트 업데이트
function updateErrorTimelineChart(dailyErrorTrend) {
  const ctx = document.getElementById('errorTimelineChart');
  
  if (errorTimelineChart) {
    errorTimelineChart.destroy();
  }
  
  const labels = dailyErrorTrend.map(d => formatDate(new Date(d.date)));
  const errorData = dailyErrorTrend.map(d => d.error_count);
  const totalData = dailyErrorTrend.map(d => d.total_count);
  
  errorTimelineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: '총 작업',
          data: totalData,
          borderColor: 'rgba(59, 130, 246, 1)',
          backgroundColor: 'rgba(59, 130, 246, 0.1)',
          fill: true
        },
        {
          label: '오류 작업',
          data: errorData,
          borderColor: 'rgba(239, 68, 68, 1)',
          backgroundColor: 'rgba(239, 68, 68, 0.1)',
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        legend: {
          position: 'top'
        }
      }
    }
  });
}

// 오류 유형별 분석 표시
function displayErrorTypes(errorTypes) {
  const container = document.getElementById('errorTypesAnalysis');
  
  if (!errorTypes || errorTypes.length === 0) {
    container.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">⚠️</div>
        <h3>오류 유형 데이터가 없습니다.</h3>
      </div>
    `;
    return;
  }
  
  let html = '<h4>🔍 오류 유형별 상세 분석</h4>';
  
  errorTypes.forEach(errorType => {
    html += `
      <div class="error-type-item">
        <div class="error-type-info">
          <div class="error-type-icon">⚠️</div>
          <div class="error-type-name">${errorType.error_name}</div>
        </div>
        <div class="error-type-stats">
          <div class="error-type-count">${errorType.count}건</div>
          <div class="error-type-percentage">${errorType.percentage}%</div>
        </div>
      </div>
    `;
  });
  
  container.innerHTML = html;
}

// 프로젝트별 분석 로드
async function loadProjectAnalysis() {
  const projectId = document.getElementById('projectModeSelect').value;
  const startDate = document.getElementById('projectStartDate').value;
  const endDate = document.getElementById('projectEndDate').value;
  
  if (!projectId) {
    showToast('프로젝트를 선택해주세요.', 'error');
    return;
  }
  
  showLoading(true);
  
  try {
    
    // API 호출 파라미터 구성
    const params = new URLSearchParams({
      project_id: projectId
    });
    
    if (startDate) params.append('start', startDate);
    if (endDate) params.append('end', endDate);
    
    // 프로젝트별 상세 분석 데이터 로드
    const response = await apiCall(`/work-analysis/project-worktype-analysis?${params}`, 'GET');
    const projectAnalysisData = response.data || response;
    
    
    // 결과 표시
    displayProjectModeAnalysis(projectAnalysisData);
    
    // 결과 섹션 표시
    document.getElementById('projectModeResults').style.display = 'block';
    
    showToast('프로젝트 분석이 완료되었습니다.', 'success');
    
  } catch (error) {
    console.error('프로젝트별 분석 오류:', error);
    showToast('프로젝트 분석 중 오류가 발생했습니다.', 'error');
  } finally {
    showLoading(false);
  }
}

// 프로젝트별 분석 결과 표시
function displayProjectModeAnalysis(data) {
  const container = document.getElementById('projectModeResults');
  
  // 프로젝트별 분석 결과 HTML 생성
  let html = `
    <div class="project-mode-analysis">
      <h3>📁 ${data.project_name} 분석 결과</h3>
      <!-- 프로젝트별 상세 분석 내용 -->
    </div>
  `;
  
  container.innerHTML = html;
}

// 로딩 상태 표시/숨김
function showLoading(show) {
  const overlay = document.getElementById('loadingOverlay');
  if (overlay) {
    overlay.style.display = show ? 'flex' : 'none';
  }
}

// 날짜 포맷팅
function formatDate(date) {
  if (!date) return '';
  
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
}

// showToast → api-base.js 전역 사용

// 전역 함수로 노출
window.switchAnalysisMode = switchAnalysisMode;
window.switchAnalysisTab = switchAnalysisTab;
window.loadPeriodAnalysis = loadPeriodAnalysis;
window.loadProjectAnalysis = loadProjectAnalysis;