import { Game } from '../modules/game.js';
import { CommonCanvas } from '../modules/canvas_utils.js';

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('game2048Canvas');
    // 공통 템플릿 사용 시 ID 확인 필요, 없을 시 HTML에서 ID 수정 필요
    // 여기서는 파일명에 맞게 game_2048.js 로 작성하지만, HTML의 canvas id="game2048Canvas" 여야 함.
    if (!canvas) return;

    const V = 600, PAD = 15, CELL = (600 - PAD*5)/4;
    const common = CommonCanvas.init(canvas, V, V+100);
    const { ctx, resize, showSuccessOverlay, fillRoundRect } = common;

    let grid = Array(16).fill(0);
    let score = 0, isGameOver = false;

    // 타일 색상
    const colors = {
        0: "#cdc1b4", 2: "#eee4da", 4: "#ede0c8", 8: "#f2b179", 16: "#f59563",
        32: "#f67c5f", 64: "#f65e3b", 128: "#edcf72", 256: "#edcc61", 1024: "#edc53f", 2048: "#edc22e"
    };

    function draw() {
        ctx.clearRect(0, 0, V, V+100);

        // 보드 배경
        fillRoundRect(0, 0, V, V, 10, "#bbada0");

        // 타일
        grid.forEach((v, i) => {
            const x = PAD + (i%4)*(CELL+PAD);
            const y = PAD + Math.floor(i/4)*(CELL+PAD);
            const bgColor = colors[v] || "#3c3a32";
            fillRoundRect(x, y, CELL, CELL, 5, bgColor);

            if (v > 0) {
                ctx.fillStyle = (v <= 4) ? "#776e65" : "#f9f6f2";
                ctx.font = `bold ${v < 100 ? 50 : v < 1000 ? 40 : 30}px Arial`;
                ctx.textAlign = "center";
                ctx.fillText(v, x+CELL/2, y+CELL/2+15);
            }
        });

        // 점수
        ctx.fillStyle = "#333";
        ctx.font = "bold 30px Arial";
        ctx.textAlign = "center";
        ctx.fillText(`SCORE: ${score}`, V/2, V + 60);
    }

    function addRandom() {
        const avail = grid.map((v, i) => v === 0 ? i : -1).filter(i => i !== -1);
        if (avail.length > 0) grid[avail[Math.floor(Math.random()*avail.length)]] = Math.random()<0.9 ? 2 : 4;
    }

    function init() {
        grid.fill(0); score = 0; isGameOver = false;
        addRandom(); addRandom();
        draw();
    }

    // 게임 로직 (이동 및 병합)
    function move(dir) {
        if (isGameOver) return;
        let rotated = [...grid]; // 복사

        // 방향에 따라 회전하여 '왼쪽으로 이동' 문제로 변환
        // (간소화를 위해 로직 직접 구현)
        const getVal = (r, c) => rotated[r*4 + c];
        const setVal = (r, c, v) => rotated[r*4 + c] = v;

        let moved = false;
        let scoreAdd = 0;

        // 각 행/열 처리 로직은 복잡하므로, 가장 직관적인 '벡터' 방식 사용
        // 여기서는 기존 DOM 버전의 로직을 Canvas 데이터 구조(1차원 배열)에 맞게 변환
        const vector = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -4, ArrowDown: 4 }[dir];
        if (!vector) return;

        // ... (전통적인 2048 알고리즘 구현 생략 - 너무 길어짐.
        // 대신 기존 DOM 버전의 moveRow 로직을 차용하여 구현)

        // 행 단위 처리 (좌우)
        if (dir === 'ArrowLeft' || dir === 'ArrowRight') {
            for (let r=0; r<4; r++) {
                let row = [grid[r*4], grid[r*4+1], grid[r*4+2], grid[r*4+3]];
                if (dir === 'ArrowRight') row.reverse();

                // 병합 로직
                let filtered = row.filter(v => v);
                for(let i=0; i<filtered.length-1; i++) {
                    if (filtered[i] === filtered[i+1]) {
                        filtered[i] *= 2; score += filtered[i];
                        filtered[i+1] = 0;
                    }
                }
                filtered = filtered.filter(v => v); // 0 제거
                while(filtered.length < 4) filtered.push(0);

                if (dir === 'ArrowRight') filtered.reverse();

                for(let c=0; c<4; c++) {
                    if (grid[r*4+c] !== filtered[c]) moved = true;
                    grid[r*4+c] = filtered[c];
                }
            }
        }
        // 열 단위 처리 (상하)
        else {
            for (let c=0; c<4; c++) {
                let col = [grid[c], grid[c+4], grid[c+8], grid[c+12]];
                if (dir === 'ArrowDown') col.reverse();

                let filtered = col.filter(v => v);
                for(let i=0; i<filtered.length-1; i++) {
                    if (filtered[i] === filtered[i+1]) {
                        filtered[i] *= 2; score += filtered[i];
                        filtered[i+1] = 0;
                    }
                }
                filtered = filtered.filter(v => v);
                while(filtered.length < 4) filtered.push(0);

                if (dir === 'ArrowDown') filtered.reverse();

                for(let r=0; r<4; r++) {
                    if (grid[r*4+c] !== filtered[r]) moved = true;
                    grid[r*4+c] = filtered[r];
                }
            }
        }

        if (moved) {
            addRandom();
            draw();
            if (grid.every(v => v !== 0) && !canMove()) {
                isGameOver = true;
                showSuccessOverlay({ title: "GAME OVER", scoreValue: score });
                // 실패 처리는 모달 없이 오버레이만 띄움
            } else if (grid.includes(2048)) { // 2048 도달 시 승리
                showSuccessOverlay({ title: "2048 CLEAR!", scoreValue: score });
                setTimeout(() => Game.showSuccessModal({ gameType: 'GAME_2048', primaryScore: score }), 2500);
            }
        }
    }

    function canMove() {
        for(let i=0; i<16; i++) {
            if (i%4 < 3 && grid[i] === grid[i+1]) return true; // 가로 인접
            if (i < 12 && grid[i] === grid[i+4]) return true; // 세로 인접
        }
        return false;
    }

    window.addEventListener('keydown', e => move(e.key));

    // 터치 지원
    let tsx, tsy;
    canvas.addEventListener('touchstart', e => { tsx=e.touches[0].clientX; tsy=e.touches[0].clientY; });
    canvas.addEventListener('touchend', e => {
        let dx = e.changedTouches[0].clientX - tsx;
        let dy = e.changedTouches[0].clientY - tsy;
        if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx)>30) move(dx>0 ? 'ArrowRight' : 'ArrowLeft');
        else if (Math.abs(dy)>30) move(dy>0 ? 'ArrowDown' : 'ArrowUp');
    });

    resize(); init();
});