<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>

<!--
    Dieses Fenster wird später mit den Serveranfragen verknüpft,
    um Nachrichten von Mitspielern und Systemmeldungen in Echtzeit anzuzeigen.

    Der Chat unterscheidet intern zwischen:
    - Player-to-Player (Privater 2-Personen-Chat)
    - Lobby-Chat (Aktueller Raum)
    - Globaler Chat (Gesamter Server)

    Features, die später implementiert werden sollen:
    - Schicke Chat-Bubbles mit Namen und Uhrzeit.
-->

<VBox xmlns="http://javafx.com/javafx/21"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="ch.unibas.dmi.dbis.cs108.casono.client.ui.chatui.ChatController"
      alignment="CENTER"
      stylesheets="@chatui.css">

    <!-- Innenabstand: Schafft oben, rechts und unten 30 Pixel Platz, links nur 10 Pixel (asymmetrisch) -->
    <padding>
        <Insets top="30" right="30" bottom="30" left="10"/>
    </padding>

    <children>
        <VBox VBox.vgrow="ALWAYS"
              styleClass="chat-box"
              spacing="10"
              maxWidth="Infinity">

            <children>
                <Label text="== CHAT ==" styleClass="chat-header" alignment="CENTER" maxWidth="Infinity"/>
                <Region minHeight="4" styleClass="chat-separator"/>

                <!-- Chatnachrichten werden hier hinzugefügt -->
                <ScrollPane fx:id="chatScrollPane" fitToWidth="true" vbarPolicy="AS_NEEDED" hbarPolicy="NEVER" VBox.vgrow="ALWAYS" styleClass="chat-scroll-pane">
                    <content>
                        <VBox fx:id="chatVBox" spacing="10" styleClass="chat-VBox"/>
                    </content>
                </ScrollPane>

                <!-- Eingabebereich -->
                <HBox spacing="10">
                    <!-- TODO: Größe des TextFields dynamisch anpassen -->
                    <TextField fx:id="inputField" HBox.hgrow="ALWAYS" promptText="Nachricht eingeben..." styleClass="gray-input-field" onAction="#sendMessage"/>
                    <Button fx:id="sendButton" text="SENDEN" onAction="#sendMessage" styleClass="yellow-button"/>
                </HBox>
            </children>
        </VBox>
    </children>
</VBox>