// Time Speed Control Panel
// Add to UIScene.js

createTimeControlPanel() {
    const x = this.scale.width - 170;
    const y = 250; // Below resources

    // Container
    this.timeControlContainer = this.add.container(x, y);
    this.timeControlContainer.setDepth(1000);

    // Background
    const bg = this.add.graphics();
    bg.fillStyle(0x1a1a2a, 0.8);
    bg.fillRect(0, 0, 150, 100);
    bg.lineStyle(2, 0x4a90e2, 0.8);
    bg.strokeRect(0, 0, 150, 100);
    this.timeControlContainer.add(bg);

    // Title
    const title = this.add.text(75, 15, 'TIME SPEED', {
        fontSize: '12px',
        fontFamily: 'Courier New',
        fill: '#ffffff',
        fontStyle: 'bold'
    }).setOrigin(0.5, 0.5);
    this.timeControlContainer.add(title);

    // Speed buttons
    const speeds = [
        { label: '1x', value: 1.0, y: 40 },
        { label: '2x', value: 2.0, y: 60 },
        { label: '5x', value: 5.0, y: 80 }
    ];

    this.timeSpeedButtons = [];

    speeds.forEach((speed, i) => {
        const btn = this.add.text(75, speed.y, speed.label, {
            fontSize: '14px',
            fontFamily: 'Courier New',
            fill: '#4a90e2',
            fontStyle: 'bold',
            backgroundColor: '#1a1a2a',
            padding: { x: 20, y: 5 }
        }).setOrigin(0.5, 0.5);

        btn.setInteractive({ useHandCursor: true });
        btn.on('pointerdown', () => {
            this.setTimeSpeed(speed.value);
            this.highlightSpeedButton(i);
        });

        this.timeControlContainer.add(btn);
        this.timeSpeedButtons.push(btn);
    });

    // Highlight default (1x)
    this.highlightSpeedButton(0);

    // Pause button
    const pauseBtn = this.add.text(10, 15, '⏸️', {
        fontSize: '18px'
    }).setOrigin(0, 0.5);

    pauseBtn.setInteractive({ useHandCursor: true });
    pauseBtn.on('pointerdown', () => {
        this.toggleTimePause();
    });

    this.timeControlContainer.add(pauseBtn);
    this.pauseBtn = pauseBtn;
}

setTimeSpeed(speed) {
    if (this.gameScene && this.gameScene.timeSystem) {
        this.gameScene.timeSystem.timeScale = speed;
        console.log(`⏱️ Time speed: ${speed}x`);
    }
}

highlightSpeedButton(index) {
    this.timeSpeedButtons.forEach((btn, i) => {
        if (i === index) {
            btn.setStyle({ fill: '#ffff00', backgroundColor: '#2a4a6a' });
        } else {
            btn.setStyle({ fill: '#4a90e2', backgroundColor: '#1a1a2a' });
        }
    });
}

toggleTimePause() {
    if (!this.gameScene || !this.gameScene.timeSystem) return;

    const ts = this.gameScene.timeSystem;

    if (ts.timeScale === 0) {
        // Unpause
        ts.timeScale = this.lastTimeScale || 1.0;
        this.pauseBtn.setText('⏸️');
        console.log('▶️ Time resumed');
    } else {
        // Pause
        this.lastTimeScale = ts.timeScale;
        ts.timeScale = 0;
        this.pauseBtn.setText('▶️');
        console.log('⏸️ Time paused');
    }
}