<!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">
    <style>

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f4f7f9;
            padding: 20px;
        }

        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            text-align: center;
        }

        #generate-btn {
            padding: 12px 24px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.2s;
        }

        #generate-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        #generate-btn:hover:not(:disabled) {
            background-color: #0056b3;
        }

        #status-message {
            margin-top: 15px;
            font-size: 14px;
            color: #555;
            height: 20px;
        }

        #sudoku-board {
            display: grid;
            grid-template-columns: repeat(9, 40px);
            grid-template-rows: repeat(9, 40px);
            border: 3px solid #333;
            margin: 20px auto 0;
            width: 366px; /* (40px * 9) + 6px border */
        }

        .cell {
            width: 40px;
            height: 40px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        /* 3x3 구역을 위한 굵은 선 */
        .cell:nth-child(3n) { border-right: 2px solid #333; }
        .cell:nth-child(9n) { border-right: none; }
        .cell:nth-of-type(n+19):nth-of-type(-n+27),
        .cell:nth-of-type(n+46):nth-of-type(-n+54) {
            border-bottom: 2px solid #333;
        }
    </style>
    <script th:inline="javascript">
        document.addEventListener('DOMContentLoaded', () => {
            const generateBtn = document.getElementById('generate-btn');
            const boardElement = document.getElementById('sudoku-board');
            const statusMessage = document.getElementById('status-message');

            // 스도쿠 보드를 화면에 그리는 함수
            function renderBoard(puzzleString) {
                boardElement.innerHTML = ''; // 기존 보드 초기화
                if (!puzzleString || puzzleString.length !== 81) {
                    statusMessage.textContent = '잘못된 퍼즐 데이터입니다.';
                    return;
                }

                for (const char of puzzleString) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.textContent = char;
                    boardElement.appendChild(cell);
                }
            }

            // 생성 버튼 클릭 이벤트 리스너
            generateBtn.addEventListener('click', async () => {
                // 버튼 비활성화 및 상태 메시지 업데이트
                generateBtn.disabled = true;
                statusMessage.textContent = '새로운 스도쿠 퍼즐을 생성 중입니다... 🧠';
                boardElement.innerHTML = ''; // 보드 비우기

                try {
                    // 백엔드 API 호출 (POST 요청)
                    const response = await fetch('/puzzle/sudoku/sudoku_gen');

                    if (!response.ok) {
                        throw new Error(`서버 오류: ${response.statusText}`);
                    }

                    const result = await response.json();

                    // 성공 시 보드 렌더링
                    renderBoard(result.puzzle);
                    statusMessage.textContent = `✅ 퍼즐 생성 완료! (ID: ${result.puzzleKey})`;

                } catch (error) {
                    console.error('Error generating Sudoku:', error);
                    statusMessage.textContent = `❌ 생성 실패: ${error.message}`;
                } finally {
                    // 성공/실패 여부와 관계없이 버튼 다시 활성화
                    generateBtn.disabled = false;
                }
            });
        });
    </script>
</th:block >
<th:block layout:fragment="content">
    <div class="container">
        <h1>스도쿠 퍼즐 생성기</h1>
        <p>버튼을 누르면 새로운 스도쿠 퍼즐을 생성하여 DB에 저장하고 화면에 보여줍니다.</p>
        <button id="generate-btn">새 스도쿠 생성</button>
        <div id="status-message"></div>

        <h2>생성된 퍼즐</h2>
        <div id="sudoku-board">
        </div>
    </div>

</th:block>
</html>
