import { Application } from "pixi.js";

export const app = new Application();

let manuelResizeCallback = null;

/**
 * Startet die PixiJS-Engine und hängt das Canvas in das HTML-Dokument ein.
 * 
 * @param {string} containerId - Die HTML-ID des divs, in das PixiJS gerendert werden soll.
 */
export async function initPixi(containerId) {
    await app.init({
        resizeTo: window,
        backgroundAlpha: 0,
        antialias: true,
        resolution: window.devicePixelRatio || 1,
        autoDensity: true
    });
    document.getElementById(containerId).appendChild(app.canvas);
}

/**
 * Übernimmt die gesammte responsive Skalierungslogik für unsere PixiJS-Element.
 * Wir übergeben hier alle Container, die flexible auf Fenstergrößen reagieren müssen.
 * 
 * @param {Object} refs - Ein Paket mit allen UI-Containern.
 */
export function setupResize(refs) {
    const {
        background, discordContainer, logoContainer, uiContainer,
        panelFrame, lobbyPixiContainer, footerBackground, footerPattern,
        footerBackgroundContainer
    } = refs;
    
    function resize() {
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        if (background && background.texture) {
            const scaleX = screenWidth / background.texture.width;
            const scaleY = screenHeight / background.texture.height;
            const scale = Math.max(scaleX, scaleY);
            background.scale.set(scale);
            background.x = (screenWidth - background.width) / 2;
            background.y = (screenHeight - background.height) / 2;
        }

        let panelScale = 1.0;
        let panelOffsetY = 0;

        if (screenHeight <= 500){
            panelScale = 0.4;
            panelOffsetY = 0;
            discordContainer.position.set(-420, 350);
            logoContainer.position.set(-300, 150);
            logoContainer.scale.set(1.3);
        } else if (screenWidth <= 600) {
            panelScale = 0.7;
            panelOffsetY = 0;
            discordContainer.position.set(125, 520);
            logoContainer.position.set(250, -120);
            logoContainer.scale.set(0.7);
        } else {
            panelScale = 1.0;
            panelOffsetY = 0;
            discordContainer.position.set(640, 380);
            logoContainer.position.set(250, -120);
            logoContainer.scale.set(1.0);

            if (screenHeight <= 1050) {
                panelOffsetY = 80;
            }
        }

        uiContainer.scale.set(panelScale);
        uiContainer.x = (screenWidth - (panelFrame.width * panelScale)) / 2;
        uiContainer.y = ((screenHeight - (panelFrame.height * panelScale)) / 2) + panelOffsetY;

        let lobbyScale = 1.0;
        if (screenWidth <= 1300) {
            lobbyScale = screenWidth / 1300; 
        }
        if (screenHeight <= 750) {
            const hScale = screenHeight / 750;
            if (hScale < lobbyScale) lobbyScale = hScale;
        }

        lobbyPixiContainer.scale.set(lobbyScale);
        lobbyPixiContainer.x = (screenWidth - (1240 * lobbyScale)) / 2;
        lobbyPixiContainer.y = (screenHeight - (650 * lobbyScale)) / 2;

        const sectorHtmlLayer = document.getElementById('sector-browser-layer');
        if (sectorHtmlLayer) {
            sectorHtmlLayer.style.transform = `translate(-50%, -50%) scale(${lobbyScale})`;
        }

        const htmlFooter = document.getElementById('game-footer');
        const footerHeight = (htmlFooter && htmlFooter.style.display !== 'none') ? htmlFooter.offsetHeight : 0;

        const targetFooterHeight = Math.max(footerHeight, 40);
        footerBackground.height = targetFooterHeight;
        footerPattern.height = targetFooterHeight;

        footerBackground.width = screenWidth;
        footerPattern.width = screenWidth;
        
        footerBackgroundContainer.y = screenHeight - footerHeight;
    }
    
    app.renderer.on('resize', resize);
    manuelResizeCallback = resize;
    resize();
}

/**
 * Löst eine manuelle Neuberechnung des Layout aus (wichtig nach dem Wechsel zur Lobby)
 */
export function triggerResize() {
    if (manuelResizeCallback) {
        manuelResizeCallback();
    }
}