// daily-patrol.js - 일일순회점검 페이지 JavaScript

// 전역 상태
let currentSession = null;
let categories = []; // 공장(대분류) 목록
let workplaces = []; // 작업장 목록
let checklistItems = []; // 체크리스트 항목
let checkRecords = {}; // 체크 기록 (workplace_id -> records)
let selectedWorkplace = null;
let itemTypes = []; // 물품 유형
let workplaceItems = []; // 현재 작업장 물품
let isItemEditMode = false;
let workplaceDetail = null; // 작업장 상세 정보

// XSS 방지를 위한 HTML 이스케이프 함수
function escapeHtml(str) {
  if (str === null || str === undefined) return '';
  return String(str)
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;');
}

// 이미지 URL 헬퍼 함수 (정적 파일용 - /api 경로 제외)
function getImageUrl(path) {
  if (!path) return '';
  // 이미 http로 시작하면 그대로 반환
  if (path.startsWith('http')) return path;
  // API_BASE_URL에서 /api 제거하여 정적 파일 서버 URL 생성
  // /uploads 경로는 인증 없이 접근 가능한 정적 파일 경로
  const staticUrl = window.API_BASE_URL.replace(/\/api$/, '');
  return staticUrl + path;
}

// 페이지 초기화
document.addEventListener('DOMContentLoaded', async () => {
  await waitForAxiosConfig();
  initializePage();
});

// axios 설정 대기
function waitForAxiosConfig() {
  return new Promise((resolve) => {
    const check = setInterval(() => {
      if (axios.defaults.baseURL) {
        clearInterval(check);
        resolve();
      }
    }, 50);
    setTimeout(() => {
      clearInterval(check);
      resolve();
    }, 5000);
  });
}

// 자동 날짜/시간대 결정
function getAutoPatrolDateTime() {
  const now = new Date();
  const patrolDate = now.toISOString().slice(0, 10);
  const hour = now.getHours();
  // 오전(~12시), 오후(12시~)
  const patrolTime = hour < 12 ? 'morning' : 'afternoon';
  return { patrolDate, patrolTime };
}

// 페이지 초기화
async function initializePage() {
  // 데이터 로드
  await Promise.all([
    loadCategories(),
    loadItemTypes(),
    loadTodayStatus()
  ]);

  // 저장된 세션 상태 복원 (구역 상세에서 돌아온 경우)
  await restoreSessionState();
}

// 세션 상태 저장 (페이지 이동 전)
function saveSessionState() {
  if (currentSession) {
    const state = {
      session: currentSession,
      categoryId: currentSession.category_id,
      checkRecords: checkRecords,
      timestamp: Date.now()
    };
    sessionStorage.setItem('patrolSessionState', JSON.stringify(state));
  }
}

// 세션 상태 복원
async function restoreSessionState() {
  const savedState = sessionStorage.getItem('patrolSessionState');
  if (!savedState) return;

  try {
    const state = JSON.parse(savedState);
    // 5분 이내의 상태만 복원
    if (Date.now() - state.timestamp > 5 * 60 * 1000) {
      sessionStorage.removeItem('patrolSessionState');
      return;
    }

    // categories가 비어있으면 복원 불가
    if (!categories || categories.length === 0) {
      console.log('카테고리 목록이 없어 세션 복원 불가');
      sessionStorage.removeItem('patrolSessionState');
      return;
    }

    // 해당 카테고리가 존재하는지 확인
    const category = categories.find(c => c.category_id == state.categoryId);
    if (!category) {
      console.log('저장된 카테고리를 찾을 수 없음:', state.categoryId);
      sessionStorage.removeItem('patrolSessionState');
      return;
    }

    // 세션 복원
    currentSession = state.session;
    checkRecords = state.checkRecords || {};

    // 작업장 목록 로드
    await loadWorkplaces(state.categoryId);

    // 체크리스트 항목 로드
    await loadChecklistItems(state.categoryId);

    // UI 표시
    document.getElementById('startPatrolBtn').style.display = 'none';
    document.getElementById('factorySelectionArea').style.display = 'none';
    document.getElementById('patrolArea').style.display = 'block';
    renderSessionInfo();
    renderWorkplaceMap();

    console.log('세션 상태 복원 완료:', state.categoryId);

    // 복원 후 저장 상태 삭제
    sessionStorage.removeItem('patrolSessionState');
  } catch (error) {
    console.error('세션 상태 복원 실패:', error);
    sessionStorage.removeItem('patrolSessionState');
  }
}

// 공장(대분류) 목록 로드
async function loadCategories() {
  try {
    const response = await axios.get('/workplaces/categories');
    if (response.data.success) {
      categories = response.data.data;
    }
  } catch (error) {
    console.error('공장 목록 로드 실패:', error);
  }
}

// 공장 선택 화면 표시
function showFactorySelection() {
  const { patrolDate, patrolTime } = getAutoPatrolDateTime();
  const timeLabel = patrolTime === 'morning' ? '오전' : '오후';
  const dateObj = new Date(patrolDate);
  const dateLabel = dateObj.toLocaleDateString('ko-KR', { month: 'long', day: 'numeric', weekday: 'short' });

  // 세션 정보 표시
  document.getElementById('patrolSessionInfo').textContent = `${dateLabel} ${timeLabel} 순회점검`;

  // 공장 카드 렌더링
  const container = document.getElementById('factoryCardsContainer');
  container.innerHTML = categories.map(c => `
    <div class="factory-card" onclick="selectFactory(${parseInt(c.category_id) || 0})">
      <div class="factory-card-icon">
        ${c.layout_image ? `<img src="${escapeHtml(getImageUrl(c.layout_image))}" alt="${escapeHtml(c.category_name)}">` : '<span>🏭</span>'}
      </div>
      <div class="factory-card-name">${escapeHtml(c.category_name)}</div>
    </div>
  `).join('');

  // 시작 버튼 숨기고 공장 선택 영역 표시
  document.getElementById('startPatrolBtn').style.display = 'none';
  document.getElementById('factorySelectionArea').style.display = 'block';
}

// 공장 선택 후 점검 시작
async function selectFactory(categoryId) {
  const { patrolDate, patrolTime } = getAutoPatrolDateTime();

  try {
    // 세션 생성 또는 조회
    const response = await axios.post('/patrol/sessions', {
      patrol_date: patrolDate,
      patrol_time: patrolTime,
      category_id: categoryId
    });

    if (response.data.success) {
      currentSession = response.data.data;
      currentSession.patrol_date = patrolDate;
      currentSession.patrol_time = patrolTime;
      currentSession.category_id = categoryId;

      // 작업장 목록 로드
      await loadWorkplaces(categoryId);

      // 체크리스트 항목 로드
      await loadChecklistItems(categoryId);

      // 공장 선택 영역 숨기고 점검 영역 표시
      document.getElementById('factorySelectionArea').style.display = 'none';
      document.getElementById('patrolArea').style.display = 'block';
      renderSessionInfo();
      renderWorkplaceMap();
    }
  } catch (error) {
    console.error('순회점검 시작 실패:', error);
    alert('순회점검을 시작할 수 없습니다.');
  }
}

// 물품 유형 로드
async function loadItemTypes() {
  try {
    const response = await axios.get('/patrol/item-types');
    if (response.data.success) {
      itemTypes = response.data.data;
      renderItemTypesSelect();
      renderItemsLegend();
    }
  } catch (error) {
    console.error('물품 유형 로드 실패:', error);
  }
}

// 오늘 점검 현황 로드
async function loadTodayStatus() {
  try {
    const response = await axios.get('/patrol/today-status');
    if (response.data.success) {
      renderTodayStatus(response.data.data);
    }
  } catch (error) {
    console.error('오늘 현황 로드 실패:', error);
  }
}

// 오늘 점검 현황 렌더링
function renderTodayStatus(statusList) {
  const container = document.getElementById('todayStatusSummary');
  if (!statusList || statusList.length === 0) {
    container.innerHTML = `
      <div class="status-card">
        <div class="status-label">오전</div>
        <div class="status-value pending">미점검</div>
      </div>
      <div class="status-card">
        <div class="status-label">오후</div>
        <div class="status-value pending">미점검</div>
      </div>
    `;
    return;
  }

  const morning = statusList.find(s => s.patrol_time === 'morning');
  const afternoon = statusList.find(s => s.patrol_time === 'afternoon');

  container.innerHTML = `
    <div class="status-card">
      <div class="status-label">오전</div>
      <div class="status-value ${morning?.status === 'completed' ? 'completed' : 'pending'}">
        ${morning ? (morning.status === 'completed' ? '완료' : '진행중') : '미점검'}
      </div>
      ${morning ? `<div class="status-sub">${escapeHtml(morning.inspector_name || '')}</div>` : ''}
    </div>
    <div class="status-card">
      <div class="status-label">오후</div>
      <div class="status-value ${afternoon?.status === 'completed' ? 'completed' : 'pending'}">
        ${afternoon ? (afternoon.status === 'completed' ? '완료' : '진행중') : '미점검'}
      </div>
      ${afternoon ? `<div class="status-sub">${escapeHtml(afternoon.inspector_name || '')}</div>` : ''}
    </div>
  `;
}


// 작업장 목록 로드
async function loadWorkplaces(categoryId) {
  try {
    // 작업장 목록 로드
    const response = await axios.get(`/workplaces?category_id=${categoryId}`);
    if (response.data.success) {
      workplaces = response.data.data;
    }

    // 지도 영역(좌표) 로드
    try {
      const regionsResponse = await axios.get(`/workplaces/categories/${categoryId}/map-regions`);
      if (regionsResponse.data.success && regionsResponse.data.data) {
        // 작업장에 좌표 정보 병합
        const regions = regionsResponse.data.data;
        workplaces = workplaces.map(wp => {
          const region = regions.find(r => r.workplace_id === wp.workplace_id);
          if (region) {
            // x_start, y_start를 x_percent, y_percent로 매핑
            return {
              ...wp,
              x_percent: region.x_start,
              y_percent: region.y_start,
              x_end: region.x_end,
              y_end: region.y_end
            };
          }
          return wp;
        });
      }
    } catch (regError) {
      console.log('지도 영역 로드 스킵:', regError.message);
    }
  } catch (error) {
    console.error('작업장 목록 로드 실패:', error);
  }
}

// 체크리스트 항목 로드
async function loadChecklistItems(categoryId) {
  try {
    const response = await axios.get(`/patrol/checklist?category_id=${categoryId}`);
    if (response.data.success) {
      checklistItems = response.data.data.items;
    }
  } catch (error) {
    console.error('체크리스트 항목 로드 실패:', error);
  }
}

// 세션 정보 렌더링
function renderSessionInfo() {
  const container = document.getElementById('sessionInfo');
  const category = categories.find(c => c.category_id == currentSession.category_id);
  const checkedCount = Object.values(checkRecords).flat().filter(r => r.is_checked).length;
  const totalCount = workplaces.length * checklistItems.length;
  const progress = totalCount > 0 ? Math.round(checkedCount / totalCount * 100) : 0;

  container.innerHTML = `
    <div class="session-info">
      <div class="session-info-item">
        <span class="session-info-label">점검일자</span>
        <span class="session-info-value">${escapeHtml(formatDate(currentSession.patrol_date))}</span>
      </div>
      <div class="session-info-item">
        <span class="session-info-label">시간대</span>
        <span class="session-info-value">${currentSession.patrol_time === 'morning' ? '오전' : '오후'}</span>
      </div>
      <div class="session-info-item">
        <span class="session-info-label">공장</span>
        <span class="session-info-value">${escapeHtml(category?.category_name || '')}</span>
      </div>
    </div>
    <div class="session-progress">
      <div class="progress-bar">
        <div class="progress-fill" style="width: ${parseInt(progress) || 0}%"></div>
      </div>
      <span class="progress-text">${parseInt(progress) || 0}%</span>
    </div>
  `;
}

// 작업장 지도/목록 렌더링
function renderWorkplaceMap() {
  const mapContainer = document.getElementById('patrolMapContainer');
  const listContainer = document.getElementById('workplaceListContainer');
  const category = categories.find(c => c.category_id == currentSession.category_id);

  // 지도 이미지가 있으면 지도 표시
  if (category?.layout_image) {
    mapContainer.innerHTML = `<img src="${escapeHtml(getImageUrl(category.layout_image))}" alt="${escapeHtml(category.category_name)} 지도">`;
    mapContainer.style.display = 'block';

    // 좌표가 있는 작업장만 마커 추가
    const hasMarkers = workplaces.some(wp => wp.x_percent !== undefined && wp.y_percent !== undefined);

    // 마커 위치 정보를 먼저 계산
    const markerData = workplaces
      .filter(wp => wp.x_percent !== undefined && wp.y_percent !== undefined)
      .map(wp => {
        let centerX = parseFloat(wp.x_percent) || 0;
        let centerY = parseFloat(wp.y_percent) || 0;
        if (wp.x_end && wp.y_end) {
          centerX = (parseFloat(wp.x_percent) + parseFloat(wp.x_end)) / 2;
          centerY = (parseFloat(wp.y_percent) + parseFloat(wp.y_end)) / 2;
        }
        return { wp, centerX, centerY };
      });

    // y좌표 기준 정렬 (아래에 있을수록 나중에 추가 = 위에 표시)
    markerData.sort((a, b) => a.centerY - b.centerY);

    markerData.forEach((data, index) => {
      const { wp, centerX, centerY } = data;
      const marker = document.createElement('div');
      marker.className = 'workplace-marker';

      // 밀집도 체크 - 근처에 다른 마커가 있으면 compact 클래스 추가
      const nearbyMarkers = markerData.filter(other =>
        other !== data &&
        Math.abs(other.centerX - centerX) < 12 &&
        Math.abs(other.centerY - centerY) < 12
      );
      if (nearbyMarkers.length > 0) {
        marker.classList.add('compact');
      }

      marker.style.left = `${centerX}%`;
      marker.style.top = `${centerY}%`;
      // y좌표가 클수록 (아래쪽일수록) z-index가 높아서 위에 표시
      marker.style.zIndex = Math.floor(centerY) + 10;
      marker.textContent = wp.workplace_name;
      marker.dataset.workplaceId = wp.workplace_id;
      marker.onclick = () => goToZoneDetail(wp.workplace_id);

      // 점검 상태에 따른 스타일
      const records = checkRecords[wp.workplace_id];
      if (records && records.some(r => r.is_checked)) {
        marker.classList.add(records.every(r => r.is_checked) ? 'completed' : 'in-progress');
      }

      mapContainer.appendChild(marker);
    });

    // 좌표가 없는 작업장이 있으면 카드 목록도 표시
    const hasWorkplacesWithoutCoords = workplaces.some(wp => wp.x_percent === undefined || wp.y_percent === undefined);
    if (!hasMarkers || hasWorkplacesWithoutCoords) {
      listContainer.style.display = 'grid';
      renderWorkplaceCards(listContainer);
    } else {
      listContainer.style.display = 'none';
    }
  } else {
    // 지도 없으면 카드 목록으로 표시
    mapContainer.style.display = 'none';
    listContainer.style.display = 'grid';
    renderWorkplaceCards(listContainer);
  }
}

// 구역 상세 페이지로 이동
function goToZoneDetail(workplaceId) {
  // 현재 세션 상태 저장
  saveSessionState();
  window.location.href = `/pages/inspection/zone-detail.html?id=${workplaceId}`;
}

// 작업장 카드 렌더링
function renderWorkplaceCards(container) {
  container.innerHTML = workplaces.map(wp => {
    const records = checkRecords[wp.workplace_id];
    const isCompleted = records && records.length > 0 && records.every(r => r.is_checked);
    const isInProgress = records && records.some(r => r.is_checked);
    const workplaceId = parseInt(wp.workplace_id) || 0;

    return `
      <div class="workplace-card ${isCompleted ? 'completed' : ''} ${isInProgress && !isCompleted ? 'in-progress' : ''} ${selectedWorkplace?.workplace_id === wp.workplace_id ? 'selected' : ''}"
           data-workplace-id="${workplaceId}"
           onclick="goToZoneDetail(${workplaceId})">
        <div class="workplace-card-name">${escapeHtml(wp.workplace_name)}</div>
        <div class="workplace-card-status">
          ${isCompleted ? '점검완료' : (isInProgress ? '점검중' : '미점검')}
        </div>
      </div>
    `;
  }).join('');
}

// 작업장 선택
async function selectWorkplace(workplaceId) {
  selectedWorkplace = workplaces.find(w => w.workplace_id === workplaceId);

  // 마커/카드 선택 상태 업데이트
  document.querySelectorAll('.workplace-marker, .workplace-card').forEach(el => {
    el.classList.remove('selected');
    if (el.dataset.workplaceId == workplaceId) {
      el.classList.add('selected');
    }
  });

  // 기존 체크 기록 로드
  if (!checkRecords[workplaceId]) {
    try {
      const response = await axios.get(`/patrol/sessions/${currentSession.session_id}/records?workplace_id=${workplaceId}`);
      if (response.data.success) {
        checkRecords[workplaceId] = response.data.data;
      }
    } catch (error) {
      console.error('체크 기록 로드 실패:', error);
      checkRecords[workplaceId] = [];
    }
  }

  // 체크리스트 렌더링
  renderChecklist(workplaceId);

  // 물품 현황 로드 및 표시
  await loadWorkplaceItems(workplaceId);

  // 작업장 상세 정보 로드 (신고, TBM, 출입 등)
  await loadWorkplaceDetail(workplaceId);

  // 액션 버튼 표시
  document.getElementById('checklistActions').style.display = 'flex';
}

// 체크리스트 렌더링
function renderChecklist(workplaceId) {
  const header = document.getElementById('checklistHeader');
  const content = document.getElementById('checklistContent');
  const workplace = workplaces.find(w => w.workplace_id === workplaceId);

  header.innerHTML = `
    <h3>${escapeHtml(workplace?.workplace_name || '')} 체크리스트</h3>
    <p class="checklist-subtitle">각 항목을 점검하고 체크해주세요</p>
  `;

  // 카테고리별 그룹화
  const grouped = {};
  checklistItems.forEach(item => {
    if (!grouped[item.check_category]) {
      grouped[item.check_category] = [];
    }
    grouped[item.check_category].push(item);
  });

  const records = checkRecords[workplaceId] || [];

  content.innerHTML = Object.entries(grouped).map(([category, items]) => `
    <div class="checklist-category">
      <div class="checklist-category-title">${escapeHtml(getCategoryName(category))}</div>
      ${items.map(item => {
        const record = records.find(r => r.check_item_id === item.item_id);
        const isChecked = record?.is_checked;
        const checkResult = record?.check_result;
        const itemId = parseInt(item.item_id) || 0;
        const wpId = parseInt(workplaceId) || 0;

        return `
          <div class="check-item ${isChecked ? 'checked' : ''}"
               data-item-id="${itemId}"
               onclick="toggleCheckItem(${wpId}, ${itemId})">
            <div class="check-item-checkbox">
              ${isChecked ? '&#10003;' : ''}
            </div>
            <div class="check-item-content">
              <div class="check-item-text">
                ${escapeHtml(item.check_item)}
                ${item.is_required ? '<span class="check-item-required">*</span>' : ''}
              </div>
              ${isChecked ? `
                <div class="check-result-selector" onclick="event.stopPropagation()">
                  <button class="check-result-btn good ${checkResult === 'good' ? 'active' : ''}"
                          onclick="setCheckResult(${wpId}, ${itemId}, 'good')">양호</button>
                  <button class="check-result-btn warning ${checkResult === 'warning' ? 'active' : ''}"
                          onclick="setCheckResult(${wpId}, ${itemId}, 'warning')">주의</button>
                  <button class="check-result-btn bad ${checkResult === 'bad' ? 'active' : ''}"
                          onclick="setCheckResult(${wpId}, ${itemId}, 'bad')">불량</button>
                </div>
              ` : ''}
            </div>
          </div>
        `;
      }).join('')}
    </div>
  `).join('');
}

// 카테고리명 변환
function getCategoryName(code) {
  const names = {
    'SAFETY': '안전',
    'ORGANIZATION': '정리정돈',
    'EQUIPMENT': '설비',
    'ENVIRONMENT': '환경'
  };
  return names[code] || code;
}

// 체크 항목 토글
function toggleCheckItem(workplaceId, itemId) {
  if (!checkRecords[workplaceId]) {
    checkRecords[workplaceId] = [];
  }

  const records = checkRecords[workplaceId];
  const existingIndex = records.findIndex(r => r.check_item_id === itemId);

  if (existingIndex >= 0) {
    records[existingIndex].is_checked = !records[existingIndex].is_checked;
    if (!records[existingIndex].is_checked) {
      records[existingIndex].check_result = null;
    }
  } else {
    records.push({
      check_item_id: itemId,
      is_checked: true,
      check_result: 'good',
      note: null
    });
  }

  renderChecklist(workplaceId);
  renderWorkplaceMap();
  renderSessionInfo();
}

// 체크 결과 설정
function setCheckResult(workplaceId, itemId, result) {
  const records = checkRecords[workplaceId];
  const record = records.find(r => r.check_item_id === itemId);
  if (record) {
    record.check_result = result;
    renderChecklist(workplaceId);
  }
}

// 임시 저장
async function saveChecklistDraft() {
  if (!selectedWorkplace) return;

  try {
    const records = checkRecords[selectedWorkplace.workplace_id] || [];
    await axios.post(`/patrol/sessions/${currentSession.session_id}/records/batch`, {
      workplace_id: selectedWorkplace.workplace_id,
      records: records
    });
    alert('임시 저장되었습니다.');
  } catch (error) {
    console.error('임시 저장 실패:', error);
    alert('저장에 실패했습니다.');
  }
}

// 저장 후 다음
async function saveChecklist() {
  if (!selectedWorkplace) return;

  try {
    const records = checkRecords[selectedWorkplace.workplace_id] || [];
    await axios.post(`/patrol/sessions/${currentSession.session_id}/records/batch`, {
      workplace_id: selectedWorkplace.workplace_id,
      records: records
    });

    // 다음 미점검 작업장으로 이동
    const currentIndex = workplaces.findIndex(w => w.workplace_id === selectedWorkplace.workplace_id);
    const nextWorkplace = workplaces.slice(currentIndex + 1).find(w => {
      const records = checkRecords[w.workplace_id];
      return !records || records.length === 0 || !records.every(r => r.is_checked);
    });

    if (nextWorkplace) {
      selectWorkplace(nextWorkplace.workplace_id);
    } else {
      alert('모든 작업장 점검이 완료되었습니다!');
    }
  } catch (error) {
    console.error('저장 실패:', error);
    alert('저장에 실패했습니다.');
  }
}

// 순회점검 완료
async function completePatrol() {
  if (!currentSession) return;

  // 미점검 작업장 확인
  const uncheckedCount = workplaces.filter(w => {
    const records = checkRecords[w.workplace_id];
    return !records || records.length === 0;
  }).length;

  if (uncheckedCount > 0) {
    if (!confirm(`아직 ${uncheckedCount}개 작업장이 미점검 상태입니다. 그래도 완료하시겠습니까?`)) {
      return;
    }
  }

  try {
    const notes = document.getElementById('patrolNotes').value;
    if (notes) {
      await axios.patch(`/patrol/sessions/${currentSession.session_id}/notes`, { notes });
    }

    await axios.patch(`/patrol/sessions/${currentSession.session_id}/complete`);

    alert('순회점검이 완료되었습니다.');
    location.reload();
  } catch (error) {
    console.error('순회점검 완료 실패:', error);
    alert('순회점검 완료에 실패했습니다.');
  }
}

// ==================== 물품 현황 ====================

// 작업장 물품 로드
async function loadWorkplaceItems(workplaceId) {
  try {
    const response = await axios.get(`/patrol/workplaces/${workplaceId}/items`);
    if (response.data.success) {
      workplaceItems = response.data.data;
      renderItemsSection(workplaceId);
    }
  } catch (error) {
    console.error('물품 로드 실패:', error);
    workplaceItems = [];
  }
}

// 물품 섹션 렌더링
function renderItemsSection(workplaceId) {
  const section = document.getElementById('itemsSection');
  const workplace = workplaces.find(w => w.workplace_id === workplaceId);
  const container = document.getElementById('itemsMapContainer');

  document.getElementById('selectedWorkplaceName').textContent = workplace?.workplace_name || '';

  // 작업장 레이아웃 이미지가 있으면 표시
  if (workplace?.layout_image) {
    container.innerHTML = `<img src="${escapeHtml(getImageUrl(workplace.layout_image))}" alt="${escapeHtml(workplace.workplace_name)}">`;

    // 물품 마커 추가
    workplaceItems.forEach(item => {
      if (item.x_percent && item.y_percent) {
        const marker = document.createElement('div');
        // item_type은 화이트리스트로 검증
        const safeItemType = ['container', 'plate', 'material', 'tool', 'other'].includes(item.item_type) ? item.item_type : 'other';
        marker.className = `item-marker ${safeItemType}`;
        marker.style.left = `${parseFloat(item.x_percent) || 0}%`;
        marker.style.top = `${parseFloat(item.y_percent) || 0}%`;
        marker.style.width = `${parseFloat(item.width_percent) || 5}%`;
        marker.style.height = `${parseFloat(item.height_percent) || 5}%`;
        marker.textContent = item.icon || getItemTypeIcon(item.item_type); // textContent 사용
        marker.title = `${item.item_name || item.type_name} (${parseInt(item.quantity) || 0}개)`;
        marker.dataset.itemId = item.item_id;
        marker.onclick = () => openItemModal(item);
        container.appendChild(marker);
      }
    });
  } else {
    container.innerHTML = '<p style="padding: 2rem; text-align: center; color: #64748b;">작업장 레이아웃 이미지가 없습니다.</p>';
  }

  section.style.display = 'block';
}

// 물품 유형 아이콘
function getItemTypeIcon(typeCode) {
  const icons = {
    'container': '📦',
    'plate': '🔲',
    'material': '🧱',
    'tool': '🔧',
    'other': '📍'
  };
  return icons[typeCode] || '📍';
}

// 물품 유형 셀렉트 렌더링
function renderItemTypesSelect() {
  const select = document.getElementById('itemType');
  if (!select) return;
  select.innerHTML = itemTypes.map(t =>
    `<option value="${escapeHtml(t.type_code)}">${escapeHtml(t.icon)} ${escapeHtml(t.type_name)}</option>`
  ).join('');
}

// 물품 범례 렌더링
function renderItemsLegend() {
  const container = document.getElementById('itemsLegend');
  if (!container) return;
  // 색상 값 검증 (hex color만 허용)
  const isValidColor = (color) => /^#[0-9A-Fa-f]{3,6}$/.test(color);
  container.innerHTML = itemTypes.map(t => {
    const safeColor = isValidColor(t.color) ? t.color : '#888888';
    return `
    <div class="item-legend-item">
      <div class="item-legend-icon" style="background: ${safeColor}20; border: 1px solid ${safeColor};">
        ${escapeHtml(t.icon)}
      </div>
      <span>${escapeHtml(t.type_name)}</span>
    </div>
  `;
  }).join('');
}

// 편집 모드 토글
function toggleItemEditMode() {
  isItemEditMode = !isItemEditMode;
  document.getElementById('itemEditModeText').textContent = isItemEditMode ? '편집모드 종료' : '편집모드';

  if (isItemEditMode) {
    // 지도 클릭으로 물품 추가
    const container = document.getElementById('itemsMapContainer');
    container.style.cursor = 'crosshair';
    container.onclick = (e) => {
      if (e.target === container || e.target.tagName === 'IMG') {
        const rect = container.getBoundingClientRect();
        const x = ((e.clientX - rect.left) / rect.width * 100).toFixed(2);
        const y = ((e.clientY - rect.top) / rect.height * 100).toFixed(2);
        openItemModal(null, x, y);
      }
    };
  } else {
    const container = document.getElementById('itemsMapContainer');
    container.style.cursor = 'default';
    container.onclick = null;
  }
}

// 물품 모달 열기
function openItemModal(item = null, x = null, y = null) {
  const modal = document.getElementById('itemModal');
  const title = document.getElementById('itemModalTitle');
  const deleteBtn = document.getElementById('deleteItemBtn');

  if (item) {
    title.textContent = '물품 수정';
    document.getElementById('itemId').value = item.item_id;
    document.getElementById('itemType').value = item.item_type;
    document.getElementById('itemName').value = item.item_name || '';
    document.getElementById('itemQuantity').value = item.quantity || 1;
    deleteBtn.style.display = 'inline-block';
  } else {
    title.textContent = '물품 추가';
    document.getElementById('itemForm').reset();
    document.getElementById('itemId').value = '';
    document.getElementById('itemId').dataset.x = x;
    document.getElementById('itemId').dataset.y = y;
    deleteBtn.style.display = 'none';
  }

  modal.style.display = 'flex';
}

// 물품 모달 닫기
function closeItemModal() {
  document.getElementById('itemModal').style.display = 'none';
}

// 물품 저장
async function saveItem() {
  if (!selectedWorkplace) return;

  const itemId = document.getElementById('itemId').value;
  const data = {
    item_type: document.getElementById('itemType').value,
    item_name: document.getElementById('itemName').value,
    quantity: parseInt(document.getElementById('itemQuantity').value) || 1,
    patrol_session_id: currentSession?.session_id
  };

  // 새 물품일 경우 위치 추가
  if (!itemId) {
    data.x_percent = parseFloat(document.getElementById('itemId').dataset.x);
    data.y_percent = parseFloat(document.getElementById('itemId').dataset.y);
    data.width_percent = 5;
    data.height_percent = 5;
  }

  try {
    if (itemId) {
      await axios.put(`/patrol/items/${itemId}`, data);
    } else {
      await axios.post(`/patrol/workplaces/${selectedWorkplace.workplace_id}/items`, data);
    }

    closeItemModal();
    await loadWorkplaceItems(selectedWorkplace.workplace_id);
  } catch (error) {
    console.error('물품 저장 실패:', error);
    alert('물품 저장에 실패했습니다.');
  }
}

// 물품 삭제
async function deleteItem() {
  const itemId = document.getElementById('itemId').value;
  if (!itemId) return;

  if (!confirm('이 물품을 삭제하시겠습니까?')) return;

  try {
    await axios.delete(`/patrol/items/${itemId}`);
    closeItemModal();
    await loadWorkplaceItems(selectedWorkplace.workplace_id);
  } catch (error) {
    console.error('물품 삭제 실패:', error);
    alert('물품 삭제에 실패했습니다.');
  }
}

// 유틸리티 함수
function formatDate(dateStr) {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'short' });
}

// ESC 키로 모달 닫기
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeItemModal();
    closeWorkplaceDetailPanel();
  }
});

// ==================== 작업장 상세 정보 패널 ====================

// 작업장 상세 정보 로드
async function loadWorkplaceDetail(workplaceId) {
  try {
    const today = new Date().toISOString().slice(0, 10);
    const response = await axios.get(`/patrol/workplaces/${workplaceId}/detail?date=${today}`);
    if (response.data.success) {
      workplaceDetail = response.data.data;
      renderWorkplaceDetailPanel();
    }
  } catch (error) {
    console.error('작업장 상세 정보 로드 실패:', error);
    // 에러 발생 시에도 기본 패널 표시
    workplaceDetail = null;
    renderWorkplaceDetailPanel();
  }
}

// 상세 정보 패널 렌더링
function renderWorkplaceDetailPanel() {
  let panel = document.getElementById('workplaceDetailPanel');
  if (!panel) {
    panel = document.createElement('div');
    panel.id = 'workplaceDetailPanel';
    panel.className = 'workplace-detail-panel';
    document.body.appendChild(panel);
  }

  if (!workplaceDetail || !selectedWorkplace) {
    panel.style.display = 'none';
    return;
  }

  const { workplace, equipments, repairRequests, workIssues, visitRecords, tbmSessions, recentPatrol, summary } = workplaceDetail;

  panel.innerHTML = `
    <div class="detail-panel-header">
      <div class="detail-panel-title">
        <h3>${escapeHtml(workplace.workplace_name)}</h3>
        <span class="detail-panel-subtitle">${escapeHtml(workplace.category_name || '')}</span>
      </div>
      <button class="detail-panel-close" onclick="closeWorkplaceDetailPanel()">&times;</button>
    </div>

    <div class="detail-panel-summary">
      <div class="summary-item">
        <span class="summary-value">${summary.equipmentCount}</span>
        <span class="summary-label">설비</span>
      </div>
      <div class="summary-item ${summary.pendingRepairs > 0 ? 'warning' : ''}">
        <span class="summary-value">${summary.pendingRepairs}</span>
        <span class="summary-label">수리요청</span>
      </div>
      <div class="summary-item ${summary.openIssues > 0 ? 'danger' : ''}">
        <span class="summary-value">${summary.openIssues}</span>
        <span class="summary-label">미해결 신고</span>
      </div>
      <div class="summary-item info">
        <span class="summary-value">${summary.todayVisitors}</span>
        <span class="summary-label">금일 방문자</span>
      </div>
      <div class="summary-item info">
        <span class="summary-value">${summary.todayTbmSessions}</span>
        <span class="summary-label">금일 TBM</span>
      </div>
    </div>

    <div class="detail-panel-tabs">
      <button class="detail-tab active" data-tab="issues" onclick="switchDetailTab('issues')">
        🚨 신고/부적합 <span class="tab-badge ${workIssues.all.length > 0 ? 'show' : ''}">${workIssues.all.length}</span>
      </button>
      <button class="detail-tab" data-tab="equipment" onclick="switchDetailTab('equipment')">
        ⚙️ 설비 <span class="tab-badge ${summary.needsAttention > 0 ? 'show warning' : ''}">${summary.needsAttention}</span>
      </button>
      <button class="detail-tab" data-tab="visits" onclick="switchDetailTab('visits')">
        🚶 출입 <span class="tab-badge ${visitRecords.length > 0 ? 'show' : ''}">${visitRecords.length}</span>
      </button>
      <button class="detail-tab" data-tab="tbm" onclick="switchDetailTab('tbm')">
        📋 TBM <span class="tab-badge ${tbmSessions.length > 0 ? 'show' : ''}">${tbmSessions.length}</span>
      </button>
    </div>

    <div class="detail-panel-content">
      <!-- 신고/부적합 탭 -->
      <div class="detail-tab-content active" id="tab-issues">
        ${renderIssuesTab(workIssues)}
      </div>

      <!-- 설비 탭 -->
      <div class="detail-tab-content" id="tab-equipment">
        ${renderEquipmentTab(equipments, repairRequests)}
      </div>

      <!-- 출입 탭 -->
      <div class="detail-tab-content" id="tab-visits">
        ${renderVisitsTab(visitRecords)}
      </div>

      <!-- TBM 탭 -->
      <div class="detail-tab-content" id="tab-tbm">
        ${renderTbmTab(tbmSessions)}
      </div>
    </div>
  `;

  panel.style.display = 'flex';
}

// 신고/부적합 탭 렌더링
function renderIssuesTab(workIssues) {
  if (!workIssues.all.length) {
    return `<div class="detail-empty">최근 30일간 신고 내역이 없습니다.</div>`;
  }

  const safetyIssues = workIssues.safety;
  const nonconformityIssues = workIssues.nonconformity;

  let html = '';

  if (safetyIssues.length > 0) {
    html += `
      <div class="issue-section">
        <h4 class="issue-section-title">🛡️ 안전 신고 (${safetyIssues.length})</h4>
        ${safetyIssues.map(issue => renderIssueItem(issue)).join('')}
      </div>
    `;
  }

  if (nonconformityIssues.length > 0) {
    html += `
      <div class="issue-section">
        <h4 class="issue-section-title">⚠️ 부적합 사항 (${nonconformityIssues.length})</h4>
        ${nonconformityIssues.map(issue => renderIssueItem(issue)).join('')}
      </div>
    `;
  }

  return html || `<div class="detail-empty">신고 내역이 없습니다.</div>`;
}

// 신고 항목 렌더링
function renderIssueItem(issue) {
  const statusColors = {
    'pending': 'pending',
    'received': 'info',
    'in_progress': 'warning',
    'completed': 'success',
    'closed': 'muted'
  };
  const statusLabels = {
    'pending': '대기',
    'received': '접수',
    'in_progress': '처리중',
    'completed': '완료',
    'closed': '종료'
  };
  const severityLabels = {
    'low': '경미',
    'medium': '보통',
    'high': '중요',
    'critical': '긴급'
  };

  return `
    <div class="issue-item ${statusColors[issue.status] || ''}">
      <div class="issue-item-header">
        <span class="issue-title">${escapeHtml(issue.title)}</span>
        <span class="issue-status ${statusColors[issue.status] || ''}">${statusLabels[issue.status] || issue.status}</span>
      </div>
      <div class="issue-item-meta">
        <span class="issue-category">${escapeHtml(issue.category_name || '')}</span>
        <span class="issue-severity ${issue.severity}">${severityLabels[issue.severity] || ''}</span>
        <span class="issue-date">${formatDateTime(issue.created_at)}</span>
      </div>
      ${issue.description ? `<div class="issue-desc">${escapeHtml(issue.description).slice(0, 100)}${issue.description.length > 100 ? '...' : ''}</div>` : ''}
      <div class="issue-reporter">신고자: ${escapeHtml(issue.reporter_name || '익명')}</div>
    </div>
  `;
}

// 설비 탭 렌더링
function renderEquipmentTab(equipments, repairRequests) {
  let html = '';

  // 수리 요청 먼저 표시
  if (repairRequests.length > 0) {
    html += `
      <div class="equipment-section">
        <h4 class="equipment-section-title">🔧 수리 요청 (${repairRequests.length})</h4>
        ${repairRequests.map(req => `
          <div class="repair-item ${req.priority}">
            <div class="repair-item-header">
              <span class="repair-equipment">${escapeHtml(req.equipment_name)} (${escapeHtml(req.equipment_code)})</span>
              <span class="repair-priority ${req.priority}">${getPriorityLabel(req.priority)}</span>
            </div>
            <div class="repair-category">${escapeHtml(req.repair_category)}</div>
            <div class="repair-desc">${escapeHtml(req.description || '')}</div>
            <div class="repair-date">${formatDate(req.request_date)}</div>
          </div>
        `).join('')}
      </div>
    `;
  }

  // 설비 목록
  if (equipments.length > 0) {
    html += `
      <div class="equipment-section">
        <h4 class="equipment-section-title">📦 설비 현황 (${equipments.length})</h4>
        <div class="equipment-list">
          ${equipments.map(eq => `
            <div class="equipment-item ${eq.needs_attention ? 'attention' : ''}">
              <span class="equipment-name">${escapeHtml(eq.equipment_name)}</span>
              <span class="equipment-code">${escapeHtml(eq.equipment_code)}</span>
              <span class="equipment-status ${eq.status}">${getEquipmentStatusLabel(eq.status)}</span>
            </div>
          `).join('')}
        </div>
      </div>
    `;
  } else {
    html += `<div class="detail-empty">등록된 설비가 없습니다.</div>`;
  }

  return html;
}

// 출입 탭 렌더링
function renderVisitsTab(visitRecords) {
  if (!visitRecords.length) {
    return `<div class="detail-empty">금일 승인된 방문자가 없습니다.</div>`;
  }

  return `
    <div class="visits-list">
      ${visitRecords.map(visit => `
        <div class="visit-item">
          <div class="visit-item-header">
            <span class="visit-name">${escapeHtml(visit.visitor_name)}</span>
            <span class="visit-company">${escapeHtml(visit.visitor_company || '')}</span>
          </div>
          <div class="visit-purpose">${escapeHtml(visit.purpose_name || visit.visit_purpose || '')}</div>
          <div class="visit-time">
            🕐 ${escapeHtml(visit.visit_time_from || '')} ~ ${escapeHtml(visit.visit_time_to || '')}
          </div>
          ${visit.companion_count > 0 ? `<div class="visit-companion">동행 ${visit.companion_count}명</div>` : ''}
          ${visit.vehicle_number ? `<div class="visit-vehicle">🚗 ${escapeHtml(visit.vehicle_number)}</div>` : ''}
        </div>
      `).join('')}
    </div>
  `;
}

// TBM 탭 렌더링
function renderTbmTab(tbmSessions) {
  if (!tbmSessions.length) {
    return `<div class="detail-empty">금일 TBM 세션이 없습니다.</div>`;
  }

  return `
    <div class="tbm-list">
      ${tbmSessions.map(tbm => `
        <div class="tbm-item">
          <div class="tbm-item-header">
            <span class="tbm-task">${escapeHtml(tbm.task_name || tbm.work_type_name || '작업')}</span>
            <span class="tbm-status ${tbm.status}">${getTbmStatusLabel(tbm.status)}</span>
          </div>
          <div class="tbm-location">📍 ${escapeHtml(tbm.work_location || '')}</div>
          <div class="tbm-leader">👷 ${escapeHtml(tbm.leader_name || tbm.leader_worker_name || '')}</div>
          ${tbm.work_content ? `<div class="tbm-content">작업내용: ${escapeHtml(tbm.work_content).slice(0, 80)}...</div>` : ''}
          ${tbm.team && tbm.team.length > 0 ? `
            <div class="tbm-team">
              <span class="tbm-team-label">팀원 (${tbm.team.length}명):</span>
              <span class="tbm-team-names">${tbm.team.map(m => escapeHtml(m.worker_name)).join(', ')}</span>
            </div>
          ` : ''}
          ${tbm.safety_measures ? `<div class="tbm-safety">⚠️ ${escapeHtml(tbm.safety_measures).slice(0, 60)}...</div>` : ''}
        </div>
      `).join('')}
    </div>
  `;
}

// 탭 전환
function switchDetailTab(tabName) {
  // 탭 버튼 활성화
  document.querySelectorAll('.detail-tab').forEach(tab => {
    tab.classList.toggle('active', tab.dataset.tab === tabName);
  });
  // 탭 콘텐츠 표시
  document.querySelectorAll('.detail-tab-content').forEach(content => {
    content.classList.toggle('active', content.id === `tab-${tabName}`);
  });
}

// 상세 패널 닫기
function closeWorkplaceDetailPanel() {
  const panel = document.getElementById('workplaceDetailPanel');
  if (panel) {
    panel.style.display = 'none';
  }
  workplaceDetail = null;
}

// 헬퍼 함수들
function getPriorityLabel(priority) {
  const labels = { 'emergency': '긴급', 'high': '높음', 'normal': '보통', 'low': '낮음' };
  return labels[priority] || priority;
}

function getEquipmentStatusLabel(status) {
  const labels = {
    'active': '정상',
    'inactive': '비활성',
    'repair_needed': '수리필요',
    'under_repair': '수리중',
    'disposed': '폐기'
  };
  return labels[status] || status;
}

function getTbmStatusLabel(status) {
  const labels = { 'draft': '작성중', 'in_progress': '진행중', 'completed': '완료' };
  return labels[status] || status;
}

function formatDateTime(dateStr) {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleString('ko-KR', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
}