<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS Tetris Pro</title>
    <style>
        body {
            background: #202028;
            color: #fff;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .main-container {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .side-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .box-label { font-size: 0.8em; color: #aaa; margin-bottom: 5px; text-align: center;}
        .mini-canvas { background-color: #000; border: 1px solid #333; display: block; }
        
        canvas#tetris {
            border: 2px solid #333;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            background-color: #000;
            display: block;
        }

        .ui-panel-right {
            width: 140px;
        }
        
        .stat-value { font-size: 1.5em; margin-bottom: 15px; font-weight: bold; color: #fff; text-align: center;}
        .high-score-val { color: #FFD700; }

        .controls {
            margin-top: 20px;
            font-size: 0.8em;
            color: #aaa;
            text-align: center;
            background: #111;
            padding: 10px;
            border-radius: 5px;
        }
        
        kbd { background-color: #333; padding: 2px 6px; border-radius: 4px; border: 1px solid #555; font-size: 0.8em;}
    </style>
</head>
<body>

    <div class="main-container">
        <!-- Left Panel: Hold Piece -->
        <div class="side-panel">
            <div>
                <div class="box-label">HOLD</div>
                <canvas id="hold" class="mini-canvas" width="80" height="80"></canvas>
            </div>
            
            <div class="controls">
                <p><kbd>Shift</kbd> to Hold/Recall</p>
                <p><kbd>C</kbd> also works</p>
            </div>
        </div>

        <!-- Center: Main Game -->
        <div style="position: relative;">
            <canvas id="tetris" width="240" height="400"></canvas>
            
            <div class="ui-panel-right">
                <div class="box-label">SCORE</div>
                <div id="score" class="stat-value">0</div>

                <div class="box-label">HIGH SCORE</div>
                <div id="highScore" class="stat-value high-score-val">0</div>

                <div class="box-label">LINES</div>
                <div id="lines" class="stat-value">0</div>
                
                <div class="box-label">LEVEL</div>
                <div id="level" class="stat-value">1</div>
            </div>
        </div>

        <!-- Right Panel: Next Piece -->
        <div class="side-panel">
             <div>
                <div class="box-label">NEXT</div>
                <canvas id="next" class="mini-canvas" width="80" height="80"></canvas>
            </div>

            <div class="controls" style="margin-top: 50px;">
                <p><kbd>↑</kbd> Rotate</p>
                <p><kbd>Space</kbd> Instant Drop</p>
                <p><kbd>←</kbd> <kbd>→</kbd> Move</p>
                <p><kbd>↓</kbd> Soft Drop</p>
            </div>
        </div>
    </div>

<script>
// --- Setup Canvases ---
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

// Scale up everything by 20 (1 unit = 20px)
context.scale(20, 20);

const nextCanvas = document.getElementById('next');
const nextContext = nextCanvas.getContext('2d');
nextContext.scale(20, 20);

const holdCanvas = document.getElementById('hold');
const holdContext = holdCanvas.getContext('2d');
holdContext.scale(20, 20);

// --- Game Constants & State ---
const COLORS = [
    null,
    '#FF0D72', // I - Cyan (Adjusted for visibility)
    '#0DC2FF', // L - Blue
    '#0DFF72', // J - Green
    '#F538FF', // O - Purple
    '#FF8E0D', // Z - Orange
    '#FFE138', // S - Yellow
    '#3877FF', // T - Red/Pinkish
];

// Standard Tetris Colors mapping correction for clarity
const PIECE_COLORS = {
    'T': '#a000f0', 
    'O': '#f0f000',
    'L': '#f0a000',
    'J': '#00a0f0',
    'I': '#00f0f0',
    'S': '#00f000',
    'Z': '#f00000'
};

// Re-mapping matrix values to specific colors
const PALETTE = [
    null,
    PIECE_COLORS['I'], // 1
    PIECE_COLORS['L'], // 2
    PIECE_COLORS['J'], // 3
    PIECE_COLORS['O'], // 4
    PIECE_COLORS['Z'], // 5
    PIECE_COLORS['S'], // 6
    PIECE_COLORS['T'], // 7
];

const arena = createMatrix(12, 20);

const player = {
    pos: {x: 0, y: 0},
    matrix: null,
    score: 0,
    lines: 0,
    level: 1,
};

let nextPieceMatrix = null;
let holdPieceMatrix = null;
let canHold = true; // Rule: Can only hold once per turn
let dropInterval = 1000;
let lastTime = 0;
let dropCounter = 0;

// --- Core Logic Functions ---

function createMatrix(w, h) {
    const matrix = [];
    while (h--) matrix.push(new Array(w).fill(0));
    return matrix;
}

function createPiece(type) {
    if (type === 'I') return [[0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0]];
    if (type === 'L') return [[0, 2, 0], [0, 2, 0], [0, 2, 2]];
    if (type === 'J') return [[0, 3, 0], [0, 3, 0], [3, 3, 0]];
    if (type === 'O') return [[4, 4], [4, 4]];
    if (type === 'Z') return [[5, 5, 0], [0, 5, 5], [0, 0, 0]];
    if (type === 'S') return [[0, 6, 6], [6, 6, 0], [0, 0, 0]];
    if (type === 'T') return [[0, 7, 0], [7, 7, 7], [0, 0, 0]];
}

function drawMatrix(matrix, offset, ctx = context, isGhost = false) {
    matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                ctx.fillStyle = PALETTE[value];
                
                if (isGhost) {
                    // Draw ghost outline only or transparent fill
                    ctx.globalAlpha = 0.3; 
                    ctx.fillRect(x + offset.x, y + offset.y, 1, 1);
                    ctx.strokeStyle = '#fff';
                    ctx.lineWidth = 0.05;
                    ctx.strokeRect(x + offset.x, y + offset.y, 1, 1);
                    ctx.globalAlpha = 1.0; // Reset
                } else {
                    ctx.fillRect(x + offset.x, y + offset.y, 1, 1);
                    // Inner shadow for depth
                    ctx.lineWidth = 0.05;
                    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
                    ctx.strokeRect(x + offset.x, y + offset.y, 1, 1);
                }
            }
        });
    });
}

function draw() {
    // Clear Main Board
    context.fillStyle = '#000';
    context.fillRect(0, 0, canvas.width, canvas.height);

    // Draw Arena (Settled pieces)
    drawMatrix(arena, {x: 0, y: 0});

    // Calculate Ghost Position
    const ghostPos = { ...player.pos };
    while (!collide(arena, { matrix: player.matrix, pos: ghostPos })) {
        ghostPos.y++;
    }
    ghostPos.y--; // Step back one from collision
    
    // Draw Ghost Piece
    drawMatrix(player.matrix, ghostPos, context, true);

    // Draw Active Piece
    drawMatrix(player.matrix, player.pos);
    
    // Draw Next Piece (Centered in 4x4 grid roughly)
    nextContext.fillStyle = '#000';
    nextContext.fillRect(0, 0, nextCanvas.width, nextCanvas.height);
    if (nextPieceMatrix) {
        const offset = getCenterOffset(nextPieceMatrix);
        drawMatrix(nextPieceMatrix, offset, nextContext);
    }

    // Draw Hold Piece
    holdContext.fillStyle = '#000';
    holdContext.fillRect(0, 0, holdCanvas.width, holdCanvas.height);
    if (holdPieceMatrix) {
        const offset = getCenterOffset(holdPieceMatrix);
        drawMatrix(holdPieceMatrix, offset, holdContext);
        
        // If can't hold right now, dim the box
        if (!canHold) {
            holdContext.fillStyle = 'rgba(0,0,0,0.6)';
            holdContext.fillRect(0,0,4,4); 
        }
    }
}

function getCenterOffset(matrix) {
    const w = matrix[0].length;
    const h = matrix.length;
    // Center in 4x4 box (approx)
    return { x: (4 - w) / 2, y: (4 - h) / 2 };
}

function merge(arena, player) {
    player.matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) arena[y + player.pos.y][x + player.pos.x] = value;
        });
    });
}

function rotate(matrix, dir) {
    for (let y = 0; y < matrix.length; ++y) {
        for (let x = 0; x < y; ++x) {
            [matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
        }
    }
    if (dir > 0) matrix.forEach(row => row.reverse());
    else matrix.reverse();
}

function playerRotate(dir) {
    const pos = player.pos.x;
    let offset = 1;
    rotate(player.matrix, dir);
    
    // Wall kick
    while (collide(arena, player)) {
        player.pos.x += offset;
        offset = -(offset + (offset > 0 ? 1 : -1));
        if (offset > player.matrix[0].length) {
            rotate(player.matrix, -dir);
            player.pos.x = pos;
            return;
        }
    }
}

function collide(arena, playerObj) {
    const [m, o] = [playerObj.matrix, playerObj.pos];
    for (let y = 0; y < m.length; ++y) {
        for (let x = 0; x < m[y].length; ++x) {
            if (m[y][x] !== 0 &&
               (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) {
                return true;
            }
        }
    }
    return false;
}

function playerReset() {
    const pieces = 'ILJOTSZ';
    if (!nextPieceMatrix) nextPieceMatrix = createPiece(pieces[pieces.length * Math.random() | 0]);
    
    player.matrix = nextPieceMatrix;
    nextPieceMatrix = createPiece(pieces[pieces.length * Math.random() | 0]);
    
    player.pos.y = 0;
    player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);
    
    canHold = true; // Reset hold ability for new piece

    if (collide(arena, player)) {
        arena.forEach(row => row.fill(0));
        player.score = 0;
        player.lines = 0;
        player.level = 1;
        dropInterval = 1000;
        updateScore();
        
        // Check Global High Score reset logic is handled in updateScore
    }
}

function playerDrop() {
    player.pos.y++;
    if (collide(arena, player)) {
        player.pos.y--;
        merge(arena, player);
        playerReset();
        arenaSweep();
        updateScore();
    }
    dropCounter = 0;
}

function hardDrop() {
    while (!collide(arena, { matrix: player.matrix, pos: { ...player.pos, y: player.pos.y + 1 } })) {
        player.pos.y++;
        player.score += 2; // Small bonus for hard drop
    }
    merge(arena, player);
    playerReset();
    arenaSweep();
    updateScore();
    dropCounter = 0;
}

function holdPiece() {
    if (!canHold) return;

    if (holdPieceMatrix === null) {
        holdPieceMatrix = player.matrix;
        playerReset(); // Gets next piece
    } else {
        const temp = player.matrix;
        player.matrix = holdPieceMatrix;
        holdPieceMatrix = temp;
        
        // Reset position
        player.pos.y = 0;
        player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);
    }
    
    canHold = false;
}

function arenaSweep() {
    let rowCount = 1;
    outer: for (let y = arena.length - 1; y > 0; --y) {
        for (let x = 0; x < arena[y].length; ++x) {
            if (arena[y][x] === 0) continue outer;
        }
        
        const row = arena.splice(y, 1)[0].fill(0);
        arena.unshift(row);
        ++y;

        player.score += rowCount * 10 * player.level;
        player.lines++;
        rowCount *= 2;
    }
    
    if (player.lines % 10 === 0 && player.lines > 0) {
        player.level = Math.floor(player.lines / 10) + 1;
        dropInterval = Math.max(100, 1000 - (player.level * 50));
    }
}

function updateScore() {
    document.getElementById('score').innerText = player.score;
    document.getElementById('lines').innerText = player.lines;
    document.getElementById('level').innerText = player.level;

    const currentHigh = localStorage.getItem('tetris_highScore') || 0;
    if (player.score > currentHigh) {
        localStorage.setItem('tetris_highScore', player.score);
        document.getElementById('highScore').innerText = player.score;
    } else {
        document.getElementById('highScore').innerText = currentHigh;
    }
}

// --- Game Loop ---

function update(time = 0) {
    const deltaTime = time - lastTime;
    lastTime = time;
    dropCounter += deltaTime;

    if (dropCounter > dropInterval) playerDrop();

    draw();
    requestAnimationFrame(update);
}

// --- Input Handling ---

document.addEventListener('keydown', event => {
    // Prevent default scrolling for game keys
    if([32, 37, 38, 39, 40].indexOf(event.keyCode) > -1) {
        event.preventDefault();
    }

    if (event.keyCode === 37) { // Left
        player.pos.x--;
        if (collide(arena, player)) player.pos.x++;
    } else if (event.keyCode === 39) { // Right
        player.pos.x++;
        if (collide(arena, player)) player.pos.x--;
    } else if (event.keyCode === 40) { // Down
        playerDrop();
    } else if (event.keyCode === 38) { // Up (Rotate)
        playerRotate(1);
    } else if (event.keyCode === 32) { // Space (Hard Drop)
        hardDrop();
    } else if (event.keyCode === 16 || event.keyCode === 67) { // Shift or C (Hold)
        holdPiece();
    }
});

// Initialize High Score Display
updateScore();

// Start
playerReset();
update();

</script>
</body>
</html>