import { Application, Assets, Sprite, Container, Text, Graphics, NineSliceSprite } from 'pixi.js';
import { initFooter } from './components/footer/footer.js';
import { initTopbar } from './components/topbar/topbar.js';
import { menuConfig, renderSideMenu } from './components/side-menu/side-menu.js';
import { planetConfig, renderPlanetMenu } from './components/planet-menu/planet-menu.js';
import { setupResize } from './utils/resize.js';
import { startDomSync } from './utils/domSync.js';
import { startSimulation } from './game/simulation.js';
import { buildBackground, buildLogo, buildResourceIcons, buildSideMenuGraphics, buildPlanetMenuGraphics } from './pixi/uiBuilder.js';

async function initSector() {
    const app = new Application();
    
    await app.init({
        resizeTo: window,
        backgroundAlpha: 0, 
        antialias: true,
        resolution: window.devicePixelRatio || 1,
        autoDensity: true
    });

    document.getElementById('pixi-container').appendChild(app.canvas);

    let background = null;
    let logoContainer = null;
    let pixiIcons = {};
    let pixiMenuMask = null;
    let pixiMenuItems = {};
    let pixiPlanetLimitContainer = null;
    let pixiPlanetMask = null;
    let pixiPlanetItems = {};
    let pixiPlanetIcons = {};
    let pixiMoonIcons = {};
    let iconSheet = null;
    let frameSheet = null;

    // --- Asset Loading ---
    try {
        await document.fonts.load('16px "Logo Font"');
        await document.fonts.load('16px "UI Font"');
        
        // Wir laden nun auch explizit den Hintergrund für den Sektor
        const assetsToLoad = {
            bg: 'src/assets/backgrounds/Background_D.png',
            icons: 'src/assets/icons.json',
            frames: 'src/assets/frames.json'
        };

        const bgTexture = await Assets.load(assetsToLoad.bg);
        iconSheet = await Assets.load(assetsToLoad.icons);
        frameSheet = await Assets.load(assetsToLoad.frames);
        
        background = buildBackground(app, bgTexture);
        logoContainer = buildLogo(app, frameSheet);
        pixiIcons = buildResourceIcons(app, iconSheet);

        const sideMenuData = buildSideMenuGraphics(app, frameSheet, menuConfig);
        pixiMenuMask = sideMenuData.pixiMenuMask;
        pixiMenuItems = sideMenuData.pixiMenuItems;

        const planetMenuData = buildPlanetMenuGraphics(app, frameSheet, iconSheet, planetConfig);
        pixiPlanetLimitContainer = planetMenuData.pixiPlanetLimitContainer;
        pixiPlanetMask = planetMenuData.pixiPlanetMask;
        pixiPlanetItems = planetMenuData.pixiPlanetItems;
        pixiPlanetIcons = planetMenuData.pixiPlanetIcons;
        pixiMoonIcons = planetMenuData.pixiMoonIcons;

    } catch (error) {
        console.error("[PixiJS] Fehler beim Laden der Assets:", error);
    }

    renderSideMenu(pixiMenuItems);
    renderPlanetMenu(pixiPlanetItems);
    initFooter();
    initTopbar();

    startDomSync(app, {
        logoContainer,
        pixiMenuMask,
        pixiPlanetMask,
        pixiIcons,
        pixiMenuItems,
        pixiPlanetItems,
        pixiPlanetIcons,
        pixiMoonIcons,
        pixiPlanetLimitContainer
    });

    setupResize(app, background);
    startSimulation();
}

initSector();