import { Container, Sprite, NineSliceSprite, TilingSprite, Text } from "pixi.js";
import { t } from "../i18n.js";

export const LOGIN_COLORS = {
    PANEL_BG: 0x0b192c,
    PATTERN: 0x00f0ff,
    TAB_ACTIVE: 0x00f0ff,
    TAB_INACTIVE: 0xaaaaaa,
    TAB_HOVER: 0xffffff,
    BTN_DEFAULT: 0x00aa00,
    BTN_HOVER: 0x00ff00,
    LOGO: 0x00f0ff
};

/**
 * Baut alle visuellen PixiJS-Elemente für den Login-Screen.
 * 
 * @param {Container} uiContainer - Der Haupt-Container für die Login-Ebene
 * @param {Object} sheet - Das geladene Sprite-Sheet
 * 
 * @returns {Object} - Ein Paket mit allen wichtigen Element-Referenzen für die main.js
 */
export function buildLoginScene(uiContainer, sheet) {
    const frameInput = 'SPR_SciFiMenus_Menu_Item_Selected_19';
    const frameBtn = 'SPR_SciFiMenus_Menu_Item_Selected_10';
    const menuBgName = 'SPR_SciFiMenus_Menu_Item_Background_07';
    const panelBgName = 'SPR_SciFiMenus_Frame_Box_Large_02_Background';
    const patternBgName = 'SPR_SciFiMenus_Background_Hexagons_01';
    const panelFmName = 'SPR_SciFiMenus_Frame_Box_Large_02';

    const iconUserName = 'ICON_SciFiMenus_Menu_Solo_01_Clean';
    const iconEmailName = 'ICON_SciFi_Map_Message';
    const iconLockName = 'ICON_SciFiMenus_Menu_Lock_Closed_01_Clean';
    const logoRingName = 'SPR_SciFiMenus_Ring_Medium_13';

    const discordFrameName = 'SPR_SciFiMenus_Frame_Box_Large_12';
    const discordBgName = 'SPR_SciFiMenus_Frame_Box_Large_12_Background';
    const discordIconName = 'ICON_Social_Discord';

    // --- Hilfsfunktion zum Erstellen der Input/Button-Rahmen ---
    function createUIItem(x, y, width, height, frameTextureName, iconTextureName, fillTint, fillAlpha) {
        const itemContainer = new Container();
        itemContainer.position.set(x, y);

        const fill = new NineSliceSprite({
            texture: sheet.textures[menuBgName],
            leftWidth: 120,
            topHeight: 120,
            rightWidth: 120,
            bottomHeight: 120
        });

        fill.width = width;
        fill.height = height;
        fill.tint = fillTint;
        fill.alpha = fillAlpha;
        itemContainer.addChild(fill);

        const frame = new NineSliceSprite({
            texture: sheet.textures[frameTextureName],
            leftWidth: 100,
            topHeight: 120,
            rightWidth: 140,
            bottomHeight: 120
        });

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

        if (iconTextureName) {
            const icon = new Sprite(sheet.textures[iconTextureName]);
            icon.position.set(-45, (height - (icon.height * 0.15)) / 2 - 5);
            icon.scale.set(0.15);
            itemContainer.addChild(icon);
        }

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

    const panelBackground = new Sprite(sheet.textures[panelBgName]);
    panelBackground.tint = LOGIN_COLORS.PANEL_BG;
    panelBackground.width = 500;
    panelBackground.height = 520;
    panelBackground.position.set(0, -10);
    uiContainer.addChild(panelBackground);

    const pattern = new TilingSprite({
        texture: sheet.textures[patternBgName],
        width: 430,
        height: 520,
    });
    pattern.tileScale.set(0.3);
    pattern.position.set(25, -10);
    pattern.alpha = 0.05;
    pattern.tint = LOGIN_COLORS.PATTERN;
    uiContainer.addChild(pattern);

    const panelFrame = new NineSliceSprite({
        texture: sheet.textures[panelFmName],
        leftWidth: 510,
        topHeight: 510,
        rightWidth: 510,
        bottomHeight: 510
    });
    panelFrame.width = 500;
    panelFrame.height = 500;
    uiContainer.addChild(panelFrame);

    // --- Logo ---
    const logoContainer = new Container();
    logoContainer.position.set(250, -120);

    const logoRing = new Sprite(sheet.textures[logoRingName]);
    logoRing.anchor.set(0.5);
    logoRing.tint = LOGIN_COLORS.LOGO;
    logoRing.alpha = 1.0;
    logoRing.scale.set(0.2);
    logoContainer.addChild(logoRing);

    const logoText = new Text({
        text: 'Void-Genesis',
        style: {
            fontFamily: 'Logo Font',
            fontSize: 50,
            fill: LOGIN_COLORS.LOGO,
            letterSpacing: 8,
        }
    });
    logoText.anchor.set(0.5);
    logoContainer.addChild(logoText);
    uiContainer.addChild(logoContainer);

    const tabLogin = createUIItem(65, 60, 180, 40, frameBtn, null, LOGIN_COLORS.INACTIVE, 0.6);
    const tabRegister = createUIItem(255, 60, 180, 40, frameBtn, null, LOGIN_COLORS.ACTIVE, 0.4);
    const inputUser = createUIItem(115, 135, 300, 50, frameInput, iconUserName, LOGIN_COLORS.PANEL_BG, 0.8);
    const inputEmail = createUIItem(115, 200, 300, 50, frameInput, iconEmailName, LOGIN_COLORS.PANEL_BG, 0.8);
    const inputLock = createUIItem(115, 265, 300, 50, frameInput, iconLockName, LOGIN_COLORS.PANEL_BG, 0.8);
    const btnRegister = createUIItem(65, 390, 370, 55, frameBtn, null, LOGIN_COLORS.BTN_DEFAULT, 0.6);

    const discordContainer = new Container();
    discordContainer.position.set(640, 380);

    const discordBackground = new NineSliceSprite({
        texture: sheet.textures[discordBgName],
        leftWidth: 0,
        topHeight: 0,
        rightWidth: 0,
        bottomHeight: 0
    });
    discordBackground.tint = LOGIN_COLORS.PANEL_BG;
    discordBackground.width = 255;
    discordBackground.height = 75;
    discordContainer.addChild(discordBackground);

    const discordPattern = new TilingSprite({
        texture: sheet.textures[patternBgName],
        width: 255,
        height: 75,
    });
    discordPattern.tileScale.set(0.3);
    discordPattern.tint = LOGIN_COLORS.PATTERN;
    discordPattern.alpha = 0.05;
    discordContainer.addChild(discordPattern);

    const discordFrame = new NineSliceSprite({
        texture: sheet.textures[discordFrameName],
        leftWidth: 0,
        topHeight: 0,
        rightWidth: 0,
        bottomHeight: 0
    });
    discordFrame.width = 280;
    discordFrame.height = 85;
    discordFrame.position.set(-15, -10);
    discordContainer.addChild(discordFrame);

    const discordIcon = new Sprite(sheet.textures[discordIconName]);
    discordIcon.position.set(10, 15);
    discordIcon.scale.set(0.15);
    discordIcon.tint = LOGIN_COLORS.TAB_INACTIVE;
    discordContainer.addChild(discordIcon);

    const discordText = new Text({
        text: t('discord_text'),
        style: {
            fontFamily: 'UI Font',
            fontSize: 20,
            fill: LOGIN_COLORS.TAB_INACTIVE,
            wordWrap: false,
            wordWrapWidth: 120
        }
    });
    discordText.position.set(60, 20);
    discordContainer.addChild(discordText);
    uiContainer.addChild(discordContainer);

    return {
        tabLogin, tabRegister, inputUser, inputEmail, inputLock, btnRegister,
        discordIcon, discordText, logoContainer, discordContainer, panelFrame
    };
}