/**
 * Responsive Game Layout Module
 * Handles responsive layout for games with configurable toolbars and board sizing.
 */
class ResponsiveGameLayout {
    constructor(config) {
        this.config = Object.assign({
            gameScreenId: 'game-screen',
            topBarSelector: '.game-top-bar',
            bottomBarSelector: '.control-panel',
            boardWrapperSelector: '.game-board-wrapper',
            boardId: 'game-board',
            hasTopLeftBar: true,
            hasBottomRightBar: true,
            boardSizeMode: 'square', // 'square' | 'fill'
            gap: 24, // Gap in pixels
            onLayoutChange: null // (isPortrait, dimensions) => {}
        }, config);

        this.init();
    }

    init() {
        this.gameScreen = document.getElementById(this.config.gameScreenId);
        this.topBar = document.querySelector(this.config.topBarSelector);
        this.bottomBar = document.querySelector(this.config.bottomBarSelector);
        this.boardWrapper = document.querySelector(this.config.boardWrapperSelector);
        this.board = document.getElementById(this.config.boardId);

        if (!this.gameScreen) {
            console.error('ResponsiveGameLayout: Game screen not found');
            return;
        }

        // Add base class
        this.gameScreen.classList.add('responsive-game-screen');
        if (this.topBar) this.topBar.classList.add('layout-bar-top-left');
        if (this.bottomBar) this.bottomBar.classList.add('layout-bar-bottom-right');
        if (this.boardWrapper) this.boardWrapper.classList.add('layout-board-wrapper');
        if (this.board) this.board.classList.add('responsive-game-board');

        // Setup ResizeObserver
        this.observer = new ResizeObserver(() => {
            requestAnimationFrame(() => this.performLayout());
        });

        this.observer.observe(this.gameScreen);
        if (this.topBar) this.observer.observe(this.topBar);
        if (this.bottomBar) this.observer.observe(this.bottomBar);

        window.addEventListener('resize', () => this.performLayout());
        
        // Initial layout
        this.performLayout();
    }

    performLayout() {
        if (!this.gameScreen || !this.board) return;

        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const isPortrait = windowHeight > windowWidth;

        // 1. Apply Orientation Classes
        if (isPortrait) {
            this.gameScreen.classList.add('portrait');
            this.gameScreen.classList.remove('landscape');
            document.body.classList.add('portrait');
            document.body.classList.remove('landscape');
        } else {
            this.gameScreen.classList.add('landscape');
            this.gameScreen.classList.remove('portrait');
            document.body.classList.add('landscape');
            document.body.classList.remove('portrait');
        }

        // 2. Calculate Available Space
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                let availableWidth, availableHeight;
                const GAP = this.config.gap;

                // Measure bars
                let topHeight = 0, bottomHeight = 0;
                let leftWidth = 0, rightWidth = 0;

                if (this.config.hasTopLeftBar && this.topBar) {
                    if (isPortrait) topHeight = this.topBar.offsetHeight;
                    else leftWidth = this.topBar.offsetWidth;
                }

                if (this.config.hasBottomRightBar && this.bottomBar) {
                    if (isPortrait) bottomHeight = this.bottomBar.offsetHeight;
                    else rightWidth = this.bottomBar.offsetWidth;
                }

                if (isPortrait) {
                    availableWidth = windowWidth - (GAP * 2);
                    availableHeight = windowHeight - topHeight - bottomHeight - (GAP * 2);
                } else {
                    availableWidth = windowWidth - leftWidth - rightWidth - (GAP * 2);
                    availableHeight = windowHeight - (GAP * 2);
                }

                // 3. Apply Size to Board
                let boardW, boardH;

                if (this.config.boardSizeMode === 'square') {
                    const size = Math.max(0, Math.min(availableWidth, availableHeight));
                    boardW = size;
                    boardH = size;
                } else {
                    boardW = Math.max(0, availableWidth);
                    boardH = Math.max(0, availableHeight);
                }

                this.board.style.width = `${boardW}px`;
                this.board.style.height = `${boardH}px`;
                
                // Clear max constraints
                this.board.style.maxWidth = 'none';
                this.board.style.maxHeight = 'none';

                if (this.config.onLayoutChange) {
                    this.config.onLayoutChange(isPortrait, { width: boardW, height: boardH });
                }
            });
        });
    }
}

// Export for module usage if needed, or just global
window.ResponsiveGameLayout = ResponsiveGameLayout;
