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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Priority?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<BorderPane prefHeight="680.0" prefWidth="900.0" style="-fx-background-color: linear-gradient(to bottom right, #f8fafc, #e2e8f0);" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.ChatController">
    <left>
        <VBox prefWidth="290.0" spacing="12.0" style="-fx-background-color: #ffffff; -fx-border-color: #dbe4ee; -fx-border-width: 0 1 0 0;">
            <padding>
                <Insets bottom="18.0" left="18.0" right="18.0" top="18.0" />
            </padding>
            <children>
                <HBox alignment="CENTER_LEFT" spacing="10.0">
                    <children>
                        <Label text="Chat Inbox" textFill="#1f2937">
                            <font>
                                <Font name="System Bold" size="24.0" />
                            </font>
                        </Label>
                        <Region HBox.hgrow="ALWAYS" />
                        <Button fx:id="btnRefresh" mnemonicParsing="false" onAction="#btnRefreshClicked" style="-fx-background-color: #0f766e; -fx-background-radius: 10; -fx-text-fill: white; -fx-cursor: hand;" text="Refresh">
                            <padding>
                                <Insets bottom="8.0" left="14.0" right="14.0" top="8.0" />
                            </padding>
                        </Button>
                    </children>
                </HBox>
                <Label fx:id="lblChatStatus" text="Connecting chat..." textFill="#64748b" />
                <Separator />
                <ListView fx:id="lvConversations" prefHeight="620.0" styleClass="chat-conversation-list" style="-fx-background-color: transparent; -fx-border-color: transparent;" VBox.vgrow="ALWAYS" />
            </children>
        </VBox>
    </left>
    <center>
        <VBox spacing="14.0">
            <padding>
                <Insets bottom="18.0" left="18.0" right="18.0" top="18.0" />
            </padding>
            <children>
                <HBox alignment="CENTER_LEFT" spacing="12.0">
                    <children>
                        <Label fx:id="lblConversationTitle" text="Select a conversation" textFill="#0f172a">
                            <font>
                                <Font name="System Bold" size="24.0" />
                            </font>
                        </Label>
                        <Region HBox.hgrow="ALWAYS" />
                        <Button fx:id="btnClose" mnemonicParsing="false" onAction="#btnCloseClicked" style="-fx-background-color: #dc2626; -fx-background-radius: 10; -fx-text-fill: white; -fx-cursor: hand;" text="Close Chat" visible="false" managed="false">
                            <padding>
                                <Insets bottom="8.0" left="14.0" right="14.0" top="8.0" />
                            </padding>
                        </Button>
                    </children>
                </HBox>
                <ScrollPane fx:id="spMessages" fitToWidth="true" hbarPolicy="NEVER" styleClass="chat-messages-scroll-pane" style="-fx-background-color: transparent; -fx-background: transparent;" VBox.vgrow="ALWAYS">
                    <content>
                        <VBox fx:id="vbMessages" spacing="10.0" style="-fx-background-color: rgba(255,255,255,0.72); -fx-background-radius: 18; -fx-padding: 18;" />
                    </content>
                </ScrollPane>
                <VBox spacing="10.0" style="-fx-background-color: #ffffff; -fx-background-radius: 16; -fx-padding: 14;">
                    <children>
                        <TextArea fx:id="txtMessage" prefRowCount="4" promptText="Reply to the selected conversation..." wrapText="true" />
                        <HBox alignment="CENTER_RIGHT" spacing="10.0">
                            <children>
                                <Button fx:id="btnAttachment" mnemonicParsing="false" onAction="#btnAttachmentClicked" style="-fx-background-color: #e2e8f0; -fx-background-radius: 12; -fx-text-fill: #475569; -fx-cursor: hand;" text="📎">
                                    <padding>
                                        <Insets bottom="10.0" left="14.0" right="14.0" top="10.0" />
                                    </padding>
                                    <font>
                                        <Font size="14.0" />
                                    </font>
                                </Button>
                                <Button fx:id="btnSend" mnemonicParsing="false" onAction="#btnSendClicked" style="-fx-background-color: #1d4ed8; -fx-background-radius: 12; -fx-text-fill: white; -fx-cursor: hand;" text="Send Message">
                                    <padding>
                                        <Insets bottom="10.0" left="18.0" right="18.0" top="10.0" />
                                    </padding>
                                </Button>
                            </children>
                        </HBox>
                    </children>
                </VBox>
            </children>
        </VBox>
    </center>
</BorderPane>
