// PIXI.js Application setup
let app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight });
document.body.appendChild(app.view);

// Hexagon settings
const hexRadius = 50;
const hexWidth = Math.sqrt(3) * hexRadius;
const hexHeight = 2 * hexRadius;

// Number of rows and columns in the grid
const rows = 10;
const cols = 10;

// Container for the hex grid
const hexContainer = new PIXI.Container();
app.stage.addChild(hexContainer);

// Utility function to calculate the hexagon corners
function createHexagon(x, y) {
    const hex = new PIXI.Graphics();
    hex.lineStyle(2, 0xFFFFFF);
    hex.beginFill(0x0000FF, 0.1);
    hex.drawPolygon([
        hexRadius, 0,
        hexRadius / 2, hexRadius * Math.sqrt(3) / 2,
        -hexRadius / 2, hexRadius * Math.sqrt(3) / 2,
        -hexRadius, 0,
        -hexRadius / 2, -hexRadius * Math.sqrt(3) / 2,
        hexRadius / 2, -hexRadius * Math.sqrt(3) / 2,
    ]);
    hex.endFill();
    hex.x = x;
    hex.y = y;
    return hex;
}

// Create the hexagonal grid
function createHexGrid() {
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            const xOffset = (col * hexWidth * 0.75);
            const yOffset = (row * hexHeight) + (col % 2 === 0 ? 0 : hexHeight / 2);
            const hex = createHexagon(xOffset, yOffset);
            hexContainer.addChild(hex);
        }
    }
}

// Create a draggable token
function createToken() {
    const token = new PIXI.Graphics();
    token.beginFill(0xFF0000);
    token.drawCircle(0, 0, hexRadius / 2);
    token.endFill();

    // Initial position on one hex
    token.x = hexWidth / 2;
    token.y = hexHeight / 2;
    
    // Make token interactive
    token.interactive = true;
    token.buttonMode = true;
    token.anchor = 0.5;
    
    // Enable dragging
    token
        .on('pointerdown', onDragStart)
        .on('pointerup', onDragEnd)
        .on('pointerupoutside', onDragEnd)
        .on('pointermove', onDragMove);

    return token;
}

let dragging = false;
let draggedToken;

// Dragging logic
function onDragStart(event) {
    dragging = true;
    draggedToken = this;
    this.alpha = 0.5;
    this.data = event.data;
}

function onDragEnd() {
    dragging = false;
    this.alpha = 1;
    this.data = null;
    snappedPosition(this);  // Snap to nearest hex when released
}

function onDragMove() {
    if (dragging) {
        const newPosition = this.data.getLocalPosition(this.parent);
        this.x = newPosition.x;
        this.y = newPosition.y;
    }
}

// Snapping logic to snap token to nearest hex
function snappedPosition(token) {
    const nearestCol = Math.round(token.x / (hexWidth * 0.75));
    const nearestRow = Math.round((token.y - (nearestCol % 2 === 0 ? 0 : hexHeight / 2)) / hexHeight);
    
    const xOffset = nearestCol * hexWidth * 0.75;
    const yOffset = nearestRow * hexHeight + (nearestCol % 2 === 0 ? 0 : hexHeight / 2);
    
    token.x = xOffset + hexWidth / 2;
    token.y = yOffset + hexHeight / 2;
}

// Initialize the hex grid and add the token
createHexGrid();
const token = createToken();
app.stage.addChild(token);