import { Container, NineSliceSprite, Graphics, Sprite } from "pixi.js";
import { LOGIN_COLORS } from "./login-scene";

/**
 * Baut das statische Grundgerüst des Sektor-Browsers (Hintergrund & Scroll-Maske)
 */
export function buildLobbyBase(lobbyPixiContainer, sheet) {
    const sectorBrowserBg = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Frame_Box_Large_11_Background'],
        leftWidth: 100,
        topHeight: 100,
        rightWidth: 100,
        bottomHeight: 100
    });
    sectorBrowserBg.width = 1240,
    sectorBrowserBg.height = 650;
    sectorBrowserBg.alpha = 0.8;
    sectorBrowserBg.tint = LOGIN_COLORS.PANEL_BG;
    lobbyPixiContainer.addChild(sectorBrowserBg);

    const sectorPixiContainer = new Container();
    lobbyPixiContainer.addChild(sectorPixiContainer);

    const scrollMask = new Graphics();
    scrollMask.rect(30, 80, 1180, 540);
    scrollMask.fill(0xffffff);
    lobbyPixiContainer.addChild(scrollMask);
    sectorPixiContainer.mask = scrollMask;

    lobbyPixiContainer.bgSprite = sectorBrowserBg;
    lobbyPixiContainer.scrollMask = scrollMask;

    return sectorPixiContainer;
}

/**
 * Generiert einen Sektor-Tab (Meine Sektoren / Neue Sektoren)
 */
export function createSectorTabPixi(sheet, x, y, tint, alpha) {
    const itemContainer = new Container();
    itemContainer.position.set(x, y);

    const fill = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Menu_Item_Background_07'],
        leftWidth: 120,
        topHeight: 120,
        rightWidth: 120,
        bottomHeight: 120
    });
    fill.width = 180;
    fill.height = 40;
    fill.tint = tint;
    fill.alpha = alpha;
    itemContainer.addChild(fill);

    const frame = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Menu_Item_Selected_10'],
        leftWidth: 100,
        topHeight: 120,
        rightWidth: 140,
        bottomHeight: 120
    });
    frame.width = 180;
    frame.height = 40;
    frame.alpha = 0.8;
    itemContainer.addChild(frame);

    return { container: itemContainer, fill, frame };
}

/**
 * Generiert die PixiJS-Hintergründe und Icons für EINE Sektor-Karte.
 * Gibt Referenzen zurück, damit wir später Hover-Effekte im HTML-Link auslösen können.
 */
export function createSectorCardPixi(sheet, sectorPixiContainer, posX, posY) {
    const cardWidth = 270;
    const cardHeight = 90;

    const bgSprite = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Frame_Box_Large_11_Background'],
        leftWidth: 200,
        topHeight: 200,
        rightWidth: 200,
        bottomHeight: 200
    });
    bgSprite.width = cardWidth;
    bgSprite.height = cardHeight;
    bgSprite.position.set(posX, posY);
    bgSprite.tint = 0x0b192c;
    bgSprite.alpha = 0.6;
    sectorPixiContainer.addChild(bgSprite);

    const frameSprite = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Frame_Box_Large_11'],
        leftWidth: 200,
        topHeight: 200,
        rightWidth: 200,
        bottomHeight: 200
    });
    frameSprite.width = cardWidth;
    frameSprite.height = cardHeight;
    frameSprite.position.set(posX, posY);
    frameSprite.alpha = 0.8;
    sectorPixiContainer.addChild(frameSprite);

    const iconDetails = new Sprite(sheet.textures['ICON_SciFiMenus_Menu_Message_01_Clean']);
    iconDetails.anchor.set(0.5);
    iconDetails.position.set(posX + 25, posY + 27); 
    iconDetails.scale.set(0.08); iconDetails.tint = 0xaaaaaa;
    sectorPixiContainer.addChild(iconDetails);

    const iconAge = new Sprite(sheet.textures['ICON_SciFiMenus_Menu_Settings_01_Clean']);
    iconAge.anchor.set(0.5);
    iconAge.position.set(posX + 130, posY + 26); 
    iconAge.scale.set(0.08); iconAge.tint = 0xaaaaaa;
    sectorPixiContainer.addChild(iconAge);

    const iconPlayers = new Sprite(sheet.textures['ICON_SciFiMenus_Menu_Multiplayer_01_Clean']);
    iconPlayers.anchor.set(0.5);
    iconPlayers.position.set(posX + 25, posY + 62); 
    iconPlayers.scale.set(0.08); iconPlayers.tint = 0xaaaaaa;
    sectorPixiContainer.addChild(iconPlayers);

    const iconPlanets = new Sprite(sheet.textures['ICON_SciFiMenus_Menu_Planet_02_Clean']);
    iconPlanets.anchor.set(0.5);
    iconPlanets.position.set(posX + 155, posY + 62); 
    iconPlanets.scale.set(0.08); iconPlanets.tint = 0xaaaaaa;
    sectorPixiContainer.addChild(iconPlanets);

    return { bgSprite, frameSprite, iconDetails, iconPlayers, iconPlanets, iconAge };
}

/**
 * Baut die PixiJS-Elemente für das Sektor-Onboarding-Modal (Charaktererstellung)
 * 
 * @param {Container} parentContainer - Die Hauptebene (app.stage, auf die das Modal gelegt wird
 * @param {Object} sheet - Das globale Sprite-Sheet für die Texturen
 * 
 * @returns {Container} - Die Referenz auf den fertigen Pixi Container
 */
export function buildOnboardingModalPixi(parentContainer, sheet) {
    const modalContainer = new Container();
    modalContainer.visible = false;

    const darkOverlay = new Graphics();
    darkOverlay.rect(-3000, -3000, 6000, 6000);
    darkOverlay.fill(0x000000);
    darkOverlay.alpha = 0.85;
    darkOverlay.eventMode = 'static';
    modalContainer.addChild(darkOverlay);

    function createPixiUIItem(x, y, width, height, fillTint, fillAlpha, isBtn) {
        const itemContainer = new Container();
        itemContainer.position.set(x, y);

        const fill = new NineSliceSprite({
            texture: sheet.textures['SPR_SciFiMenus_Menu_Item_Background_07'],
            leftWidth: 120,
            topHeight: 120, 
            rightWidth: 120, 
            bottomHeight: 120
        });
        fill.width = width;
        fill.height = height;
        fill.tint = fillTint;
        fill.alpha = fillAlpha;
        itemContainer.addChild(fill);

        let frame = null;
        if (isBtn) {
            frame = new NineSliceSprite({
                texture: sheet.textures['SPR_SciFiMenus_Menu_Item_Selected_10'],
                leftWidth: 100, 
                topHeight: 120, 
                rightWidth: 140, 
                bottomHeight: 120
            });
        } else {
            frame = new NineSliceSprite({
                texture: sheet.textures['SPR_SciFiMenus_Menu_Item_Selected_19'],
                leftWidth: 100, 
                topHeight: 120, 
                rightWidth: 140, 
                bottomHeight: 120
            });
        }

        frame.width = width;
        frame.height = height;
        frame.alpha = 0.8;
        itemContainer.addChild(frame);

        modalContainer.addChild(itemContainer);
        return { container: itemContainer, fill, frame };
    }

    const modalBG = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Frame_Box_Large_12_Background'],
        leftWidth: 200,
        topHeight: 200,
        rightWidth: 200,
        bottomHeight: 200
    });
    modalBG.width = 450;
    modalBG.height = 550;
    modalBG.tint = LOGIN_COLORS.PANEL_BG;
    modalBG.alpha = 1.0;
    modalContainer.addChild(modalBG);

    const modalFrame = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Frame_Box_Large_12'],
        leftWidth: 512,
        topHeight: 256,
        rightWidth: 512,
        bottomHeight: 256
    });
    modalFrame.width = 450;
    modalFrame.height = 550;
    modalContainer.addChild(modalFrame);

    const avatarBox = new NineSliceSprite({
        texture: sheet.textures['SPR_SciFiMenus_Menu_Item_Background_05'],
        leftWidth: 50,
        topHeight: 50,
        rightWidth: 50,
        bottomHeight: 50
    });
    avatarBox.width = 150;
    avatarBox.height = 150;
    avatarBox.position.set(150, 60); 
    avatarBox.tint = 0x00f0ff;
    avatarBox.alpha = 0.2;
    modalContainer.addChild(avatarBox);

    const iconAvatar = new Sprite(sheet.textures['ICON_SciFiMenus_Menu_Solo_01_Clean']);
    iconAvatar.anchor.set(0.5);
    iconAvatar.position.set(225, 132.5); 
    iconAvatar.scale.set(0.7);
    iconAvatar.tint = 0xaaaaaa;
    modalContainer.addChild(iconAvatar);

    const inputName = createPixiUIItem(75, 250, 300, 50, LOGIN_COLORS.PANEL_BG, 0.8, false);
    const btnMale = createPixiUIItem(75, 320, 140, 50, LOGIN_COLORS.TAB_ACTIVE, 0.6, true);
    const btnFemale = createPixiUIItem(235, 320, 140, 50, LOGIN_COLORS.TAB_INACTIVE, 0.4, true);
    const btnCancel = createPixiUIItem(75, 460, 140, 50, LOGIN_COLORS.BTN_DEFAULT, 0.6, true);
    const btnJoin = createPixiUIItem(235, 460, 140, 50, LOGIN_COLORS.BTN_DEFAULT, 0.6, true);

    parentContainer.addChild(modalContainer);
    return {
        container: modalContainer,
        inputName, btnMale, btnFemale, btnCancel, btnJoin
    };
}