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

<?import javafx.geometry.Insets?>
<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.chart.PieChart?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.DatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<VBox spacing="15.0" style="-fx-background-color: #f8fafc;" stylesheets="@../styles/desktop-ui.css" xmlns="http://javafx.com/javafx/21" xmlns:fx="http://javafx.com/fxml/1" fx:controller="org.example.petshopdesktop.controllers.AnalyticsController">
    <padding>
        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
    </padding>

    <HBox alignment="CENTER_LEFT" spacing="20.0">
        <Label text="Sales Analytics" textFill="#2c3e50">
            <font>
                <Font name="System Bold" size="24.0" />
            </font>
        </Label>
        <Region HBox.hgrow="ALWAYS" />
        <Button fx:id="btnRefresh" onAction="#handleRefresh" style="-fx-background-color: #4ECDC4; -fx-text-fill: white; -fx-background-radius: 5; -fx-cursor: hand;" text="Refresh">
            <font>
                <Font size="13.0" />
            </font>
            <padding>
                <Insets bottom="8.0" left="16.0" right="16.0" top="8.0" />
            </padding>
        </Button>
    </HBox>

    <VBox style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;">
        <padding>
            <Insets bottom="10.0" left="12.0" right="12.0" top="10.0" />
        </padding>
        <children>
            <HBox alignment="CENTER_LEFT" spacing="10.0">
                <children>
                    <Button fx:id="btnToggleFilters" mnemonicParsing="false" onAction="#btnToggleFilters" style="-fx-background-color: transparent; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="▼  Filters" textFill="#2c3e50">
                        <font><Font name="System Bold" size="12.0" /></font>
                    </Button>
                    <Label fx:id="lblFilterSummary" text="All time" textFill="#64748b">
                        <font><Font size="12.0" /></font>
                    </Label>
                </children>
            </HBox>
            <VBox fx:id="vbFilterContent" spacing="8.0" visible="false" managed="false">
                <VBox.margin><Insets top="8.0" /></VBox.margin>
                <children>
                    <FlowPane alignment="CENTER_LEFT" hgap="8.0" vgap="8.0">
                        <children>
                            <DatePicker fx:id="dpStartDate" prefWidth="145.0" promptText="Start date" />
                            <Label text="to" textFill="#64748b" />
                            <DatePicker fx:id="dpEndDate" prefWidth="145.0" promptText="End date" />
                            <Button fx:id="btnPresetToday" mnemonicParsing="false" onAction="#btnPresetToday" style="-fx-background-color: #f1f5f9; -fx-background-radius: 6; -fx-border-color: #e2e8f0; -fx-border-radius: 6; -fx-border-width: 1; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Today" textFill="#475569">
                                <font><Font size="11.0" /></font>
                                <padding><Insets bottom="5.0" left="10.0" right="10.0" top="5.0" /></padding>
                            </Button>
                            <Button fx:id="btnPreset7D" mnemonicParsing="false" onAction="#btnPreset7D" style="-fx-background-color: #f1f5f9; -fx-background-radius: 6; -fx-border-color: #e2e8f0; -fx-border-radius: 6; -fx-border-width: 1; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="7D" textFill="#475569">
                                <font><Font size="11.0" /></font>
                                <padding><Insets bottom="5.0" left="10.0" right="10.0" top="5.0" /></padding>
                            </Button>
                            <Button fx:id="btnPreset30D" mnemonicParsing="false" onAction="#btnPreset30D" style="-fx-background-color: #f1f5f9; -fx-background-radius: 6; -fx-border-color: #e2e8f0; -fx-border-radius: 6; -fx-border-width: 1; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="30D" textFill="#475569">
                                <font><Font size="11.0" /></font>
                                <padding><Insets bottom="5.0" left="10.0" right="10.0" top="5.0" /></padding>
                            </Button>
                            <Button fx:id="btnPreset3M" mnemonicParsing="false" onAction="#btnPreset3M" style="-fx-background-color: #f1f5f9; -fx-background-radius: 6; -fx-border-color: #e2e8f0; -fx-border-radius: 6; -fx-border-width: 1; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="3M" textFill="#475569">
                                <font><Font size="11.0" /></font>
                                <padding><Insets bottom="5.0" left="10.0" right="10.0" top="5.0" /></padding>
                            </Button>
                            <Button fx:id="btnPreset1Y" mnemonicParsing="false" onAction="#btnPreset1Y" style="-fx-background-color: #f1f5f9; -fx-background-radius: 6; -fx-border-color: #e2e8f0; -fx-border-radius: 6; -fx-border-width: 1; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="1Y" textFill="#475569">
                                <font><Font size="11.0" /></font>
                                <padding><Insets bottom="5.0" left="10.0" right="10.0" top="5.0" /></padding>
                            </Button>
                            <Button fx:id="btnPresetAll" mnemonicParsing="false" onAction="#btnPresetAll" style="-fx-background-color: #f1f5f9; -fx-background-radius: 6; -fx-border-color: #e2e8f0; -fx-border-radius: 6; -fx-border-width: 1; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="All" textFill="#475569">
                                <font><Font size="11.0" /></font>
                                <padding><Insets bottom="5.0" left="10.0" right="10.0" top="5.0" /></padding>
                            </Button>
                        </children>
                    </FlowPane>
                    <HBox alignment="CENTER_LEFT" spacing="8.0">
                        <children>
                            <ComboBox fx:id="cbPaymentFilter" prefWidth="145.0" promptText="All Payments" />
                            <ComboBox fx:id="cbTopN" prefWidth="110.0" />
                            <Region HBox.hgrow="ALWAYS" />
                            <Button fx:id="btnApplyFilter" mnemonicParsing="false" onAction="#btnApplyFilter" style="-fx-background-color: #4ECDC4; -fx-background-radius: 6; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Apply" textFill="WHITE">
                                <font><Font name="System Bold" size="12.0" /></font>
                                <padding><Insets bottom="6.0" left="18.0" right="18.0" top="6.0" /></padding>
                            </Button>
                            <Button fx:id="btnResetFilter" mnemonicParsing="false" onAction="#btnResetFilter" style="-fx-background-color: transparent; -fx-border-color: #cbd5e1; -fx-border-radius: 6; -fx-background-radius: 6; -fx-cursor: hand; -fx-focus-color: transparent; -fx-faint-focus-color: transparent;" text="Reset" textFill="#64748b">
                                <font><Font size="12.0" /></font>
                                <padding><Insets bottom="6.0" left="14.0" right="14.0" top="6.0" /></padding>
                            </Button>
                        </children>
                    </HBox>
                </children>
            </VBox>
        </children>
    </VBox>

    <Label fx:id="lblStatus" textFill="#64748b" visible="false" managed="true">
        <font>
            <Font size="13.0" />
        </font>
    </Label>

    <Label fx:id="lblError" textFill="#FF6B6B" visible="false">
        <font>
            <Font size="13.0" />
        </font>
    </Label>

    <TabPane fx:id="tabPane" styleClass="analytics-tabs" VBox.vgrow="ALWAYS">
        <Tab text="Overview" closable="false">
            <VBox spacing="15.0">
                <padding>
                    <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                </padding>

                <HBox spacing="15.0">
                    <VBox alignment="CENTER" spacing="5.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" HBox.hgrow="ALWAYS">
                        <padding>
                            <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                        </padding>
                        <Label text="Total Revenue" textFill="#64748b">
                            <font>
                                <Font size="11.0" />
                            </font>
                        </Label>
                        <Label fx:id="lblTotalRevenue" text="0.00" textFill="#2c3e50">
                            <font>
                                <Font name="System Bold" size="20.0" />
                            </font>
                        </Label>
                    </VBox>

                    <VBox alignment="CENTER" spacing="5.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" HBox.hgrow="ALWAYS">
                        <padding>
                            <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                        </padding>
                        <Label text="Total Transactions" textFill="#64748b">
                            <font>
                                <Font size="11.0" />
                            </font>
                        </Label>
                        <Label fx:id="lblTotalTransactions" text="0" textFill="#2c3e50">
                            <font>
                                <Font name="System Bold" size="20.0" />
                            </font>
                        </Label>
                    </VBox>

                    <VBox alignment="CENTER" spacing="5.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" HBox.hgrow="ALWAYS">
                        <padding>
                            <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                        </padding>
                        <Label text="Avg Transaction" textFill="#64748b">
                            <font>
                                <Font size="11.0" />
                            </font>
                        </Label>
                        <Label fx:id="lblAvgTransaction" text="0.00" textFill="#2c3e50">
                            <font>
                                <Font name="System Bold" size="20.0" />
                            </font>
                        </Label>
                    </VBox>

                    <VBox alignment="CENTER" spacing="5.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" HBox.hgrow="ALWAYS">
                        <padding>
                            <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                        </padding>
                        <Label text="Items Sold" textFill="#64748b">
                            <font>
                                <Font size="11.0" />
                            </font>
                        </Label>
                        <Label fx:id="lblTotalItems" text="0" textFill="#2c3e50">
                            <font>
                                <Font name="System Bold" size="20.0" />
                            </font>
                        </Label>
                    </VBox>
                </HBox>

                <VBox spacing="8.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;">
                    <padding>
                        <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                    </padding>
                    <Label text="Sales Over Time" textFill="#2c3e50">
                        <font>
                            <Font name="System Bold" size="14.0" />
                        </font>
                    </Label>
                    <LineChart fx:id="chartSalesOverTime" animated="true" legendSide="BOTTOM" prefHeight="380.0">
                        <xAxis>
                            <NumberAxis fx:id="axisSalesDate" label="Date" side="BOTTOM" />
                        </xAxis>
                        <yAxis>
                            <NumberAxis label="Revenue" side="LEFT" />
                        </yAxis>
                    </LineChart>
                </VBox>
            </VBox>
        </Tab>

        <Tab text="Products" closable="false">
            <HBox spacing="15.0">
                <padding>
                    <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                </padding>

                <VBox spacing="8.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" minHeight="450.0" prefHeight="450.0" maxHeight="450.0" HBox.hgrow="ALWAYS">
                    <padding>
                        <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                    </padding>
                    <Label text="Top Products by Revenue" textFill="#2c3e50">
                        <font>
                            <Font name="System Bold" size="14.0" />
                        </font>
                    </Label>
                    <BarChart fx:id="chartTopRevenue" animated="true" legendSide="BOTTOM" prefHeight="380.0">
                        <xAxis>
                            <NumberAxis label="Revenue" side="BOTTOM" />
                        </xAxis>
                        <yAxis>
                            <CategoryAxis label="Product" side="LEFT" />
                        </yAxis>
                    </BarChart>
                </VBox>

                <VBox spacing="8.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" minHeight="450.0" prefHeight="450.0" maxHeight="450.0" HBox.hgrow="ALWAYS">
                    <padding>
                        <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                    </padding>
                    <Label text="Top Products by Quantity" textFill="#2c3e50">
                        <font>
                            <Font name="System Bold" size="14.0" />
                        </font>
                    </Label>
                    <BarChart fx:id="chartTopQuantity" animated="true" legendSide="BOTTOM" prefHeight="380.0">
                        <xAxis>
                            <NumberAxis label="Quantity Sold" side="BOTTOM" />
                        </xAxis>
                        <yAxis>
                            <CategoryAxis label="Product" side="LEFT" />
                        </yAxis>
                    </BarChart>
                </VBox>
            </HBox>
        </Tab>

        <Tab text="Operations" closable="false">
            <HBox spacing="15.0">
                <padding>
                    <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                </padding>

                <VBox spacing="8.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" minHeight="450.0" prefHeight="450.0" maxHeight="450.0" HBox.hgrow="ALWAYS">
                    <padding>
                        <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                    </padding>
                    <Label text="Payment Method Distribution" textFill="#2c3e50">
                        <font>
                            <Font name="System Bold" size="14.0" />
                        </font>
                    </Label>
                    <PieChart fx:id="chartPaymentMethods" animated="true" legendSide="BOTTOM" prefHeight="380.0" />
                </VBox>

                <VBox spacing="8.0" style="-fx-background-color: white; -fx-background-radius: 8; -fx-border-color: #e2e8f0; -fx-border-radius: 8; -fx-border-width: 1;" minHeight="450.0" prefHeight="450.0" maxHeight="450.0" HBox.hgrow="ALWAYS">
                    <padding>
                        <Insets bottom="15.0" left="15.0" right="15.0" top="15.0" />
                    </padding>
                    <Label text="Employee Performance" textFill="#2c3e50">
                        <font>
                            <Font name="System Bold" size="14.0" />
                        </font>
                    </Label>
                    <BarChart fx:id="chartEmployeePerformance" animated="true" legendSide="BOTTOM" prefHeight="380.0">
                        <xAxis>
                            <CategoryAxis label="Employee" side="BOTTOM" />
                        </xAxis>
                        <yAxis>
                            <NumberAxis label="Revenue" side="LEFT" />
                        </yAxis>
                    </BarChart>
                </VBox>
            </HBox>
        </Tab>
    </TabPane>
</VBox>
