<!DOCTYPE html>
<html
        xmlns:th="http://www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
        layout:decorate="~{layout/default_layout}"
>
<th:block  layout:fragment="head" id="head">
  <script th:inline="javascript">
    /**
     * ==============================================
     * upload.js (업로드 페이지 로직)
     * (★ 리팩토링: 통합 API 경로 사용)
     * ==============================================
     */
    let currentPuzzleData = null; // 업로드 성공 시 퍼즐 데이터 저장

    // (★ 수정 없음) 업로드 페이지용 성공 애니메이션 함수
    function showSuccessAnimation() {
      if (!currentPuzzleData) return;

      const puzzleContainer = document.getElementById('puzzle-container');
      const grayscaleImg = document.getElementById('grayscale-reveal');
      const originalImg = document.getElementById('original-reveal');

      // [수정] Base64 대신 URL 경로를 사용하도록 변경
      grayscaleImg.src = `/puzzle/images/${currentPuzzleData.grayscaleImageFile}`;
      originalImg.src = `/puzzle/images/${currentPuzzleData.originalImageFile}`;


      puzzleContainer.style.transition = 'opacity 0.5s';
      puzzleContainer.style.opacity = '0';
      grayscaleImg.style.opacity = '1';

      setTimeout(() => {
        grayscaleImg.style.opacity = '0';
        originalImg.style.opacity = '1';
      }, 2000);
    }

    // (★ 수정 없음) 업로드 페이지용 퍼즐 미리보기 그리기 함수
    function drawPuzzle(puzzleData) {
      const container = document.getElementById('puzzle-container');
      container.innerHTML = '';

      const { solutionGrid, rowClues, colClues } = puzzleData;
      const numRows = solutionGrid.length;
      const numCols = solutionGrid[0].length;

      container.style.gridTemplateColumns = `auto repeat(${numCols}, 1fr)`;
      container.style.gridTemplateRows = `auto repeat(${numRows}, 1fr)`;

      // 1. 코너
      const corner = document.createElement('div');
      corner.className = 'grid-cell';
      container.appendChild(corner);

      // 2. 열 힌트
      for (const clues of colClues) {
        const clueCell = document.createElement('div');
        clueCell.className = 'clue-cell';
        clueCell.innerHTML = clues.join('<br>');
        container.appendChild(clueCell);
      }

      // 3. 행 힌트 및 정답 그리드
      for (let i = 0; i < numRows; i++) {
        const rowClueCell = document.createElement('div');
        rowClueCell.className = 'clue-cell';
        rowClueCell.textContent = rowClues[i].join(' ');
        container.appendChild(rowClueCell);

        for (let j = 0; j < numCols; j++) {
          const cell = document.createElement('div');
          cell.className = 'solution-cell';
          if (solutionGrid[i][j] === 1) {
            cell.classList.add('filled');
          } else {
            cell.classList.add('empty');
          }
          container.appendChild(cell);
        }
      }
    }


    // upload.js의 DOMContentLoaded 리스너
    document.addEventListener('DOMContentLoaded', () => {

      const createBtn = document.getElementById('createBtn');

      // createBtn이 없는 nonogram.html(게임 페이지)에서는 이 리스너가 아무것도 실행하지 않음.
      if (!createBtn) {
        return;
      }

      // (업로드 페이지 전용 로직)
      createBtn.addEventListener('click', async () => {
        const uploader = document.getElementById('imageUploader');
        const statusDiv = document.getElementById('status');
        const puzzleContainer = document.getElementById('puzzle-container');
        const testSuccessBtn = document.getElementById('test-success-btn');
        const deleteBtn = document.getElementById('delete-btn');
        const playBtn = document.getElementById('play-btn');

        if (uploader.files.length === 0) {
          statusDiv.textContent = '이미지 파일을 선택해주세요.';
          return;
        }

        const imageFile = uploader.files[0];
        const formData = new FormData();
        formData.append('imageFile', imageFile);

        statusDiv.textContent = '문제를 생성하는 중...';
        puzzleContainer.innerHTML = '';

        try {
          // 1. 레이아웃의 meta 태그에서 CSRF 토큰 값을 읽어옵니다.
          const csrfToken = document.querySelector('meta[name="_csrf"]')?.getAttribute('content') || '';
          const csrfHeader = document.querySelector('meta[name="_csrf_header"]')?.getAttribute('content') || 'X-CSRF-TOKEN';


          // (★ 수정) API 경로 변경 -> 통합 컨트롤러의 /puzzle/upload.bjx 호출
          const response = await fetch('/puzzle/upload.bjx', {
            method: 'POST',
            headers: {
              [csrfHeader]: csrfToken
            },
            body: formData,
          });

          if (response.ok) {
            const puzzleData = await response.json();
            statusDiv.textContent = '문제 생성 성공!';
            drawPuzzle(puzzleData); // 미리보기 그리기

            currentPuzzleData = puzzleData;
            testSuccessBtn.addEventListener('click', showSuccessAnimation);

            testSuccessBtn.style.display = 'inline-block';
            deleteBtn.style.display = 'inline-block';
            playBtn.style.display = 'inline-block';
          } else {
            const errorMessage = await response.text();
            statusDiv.textContent = `생성 실패: ${errorMessage}`;
          }
        } catch (error) {
          console.error('네트워크 오류:', error);
          statusDiv.textContent = '서버와 통신 중 오류가 발생했습니다.';
        }

        deleteBtn.addEventListener('click', async () => {
          if (!currentPuzzleData || !currentPuzzleData.id) {
            showAlert("알림",'삭제할 퍼즐이 선택되지 않았습니다.');
            return;
          }
          if (!showConfirm("확인",'정말로 이 퍼즐을 삭제하시겠습니까?')) {
            return;
          }
          try {
            // (★ 수정) API 경로 변경 -> 통합 컨트롤러의 /puzzle/{id}.bjx 호출
            const response = await fetch(`/puzzle/${currentPuzzleData.id}.bjx`, {
              method: 'DELETE',
            });

            if (response.ok) {
              statusDiv.textContent = '퍼즐이 성공적으로 삭제되었습니다.';
              puzzleContainer.innerHTML = '';
              // (버그 수정) success-animation-container 내부의 img src를 초기화해야 함
              document.getElementById('grayscale-reveal').src = "";
              document.getElementById('original-reveal').src = "";

              testSuccessBtn.style.display = 'none';
              deleteBtn.style.display = 'none';
              playBtn.style.display = 'none';
              currentPuzzleData = null;
            } else {
              statusDiv.textContent = `삭제 실패: 서버 오류 (${response.status})`;
            }
          } catch (error) {
            console.error('삭제 중 네트워크 오류:', error);
            statusDiv.textContent = '삭제 중 오류가 발생했습니다.';
          }
        });

        playBtn.addEventListener('click', () => {
          if (currentPuzzleData && currentPuzzleData.id) {
            // (★ 수정 없음) 이 경로는 PuzzleController의 페이지 서빙 경로와 일치하므로 올바름.
            window.location.href = `/puzzle/play/${currentPuzzleData.id}`;
          }
        });
      });
    });
  </script>
</th:block >
<th:block layout:fragment="content">
  <div id="puzzle-container">
  </div>
  <div id="success-animation-container">
    <img id="grayscale-reveal" src="" alt="Grayscale version">
    <img id="original-reveal" src="" alt="Original version">
  </div>
  <hr>
  <h1>이미지로 네모로직 문제 만들기</h1>
  <input type="file" id="imageUploader" accept="image/*">
  <button id="createBtn">문제 생성</button>
  <div id="status"></div>
  <hr>
  <h2>결과</h2>
  <div id="result"></div>
  <button id="test-success-btn" style="display:none;">Test Success</button>
  <button id="delete-btn" style="display:none; background-color: #ffcccc;">Delete Puzzle</button>
  <button id="play-btn" style="display:none; background-color: #ccffcc;">Play Puzzle 🎮</button>
</th:block>
</html>
