<LoginScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        Image:
            source: "resources/track.png"
            size_hint: (1, 0.66)  # 2/3 of the screen height

        TextInput:
            id: username_input
            hint_text: "Username"
            multiline: False
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: password_input
            hint_text: "Password"
            multiline: False
            password: True
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        BoxLayout:
            orientation: "horizontal"
            size_hint_y: None
            height: 50  # Fixed height for the button group
            size_hint_x: 0.8  # Match the width of the TextInput fields
            pos_hint: {"center_x": 0.5}  # Center horizontally
            spacing: 10

            Button:
                text: "Login"
                font_size: 20  # Match the font size of the TextInput fields
                size_hint_x: 0.5  # Half the width of the BoxLayout
                size_hint_y: None
                height: 50  # Fixed height for the button
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: root.login()

            Button:
                text: "Register"
                font_size: 20
                size_hint_x: 0.5
                size_hint_y: None
                height: 50
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: app.root.current = "register"  # Navigate to the RegisterScreen

<RegisterScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        Image:
            source: "resources/track.png"
            size_hint: (1, 0.66)  # 2/3 of the screen height

        TextInput:
            id: set_username_input
            hint_text: "Set Username"
            multiline: False
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: set_password_input
            hint_text: "Set Password"
            multiline: False
            password: True
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: confirm_password_input
            hint_text: "Confirm Password"
            multiline: False
            password: True
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: set_email_input
            hint_text: "Set Email"
            multiline: False
            font_size: 20  # Text size
            height: self.minimum_height
            size_hint_y: None  # Fix height
            size_hint_x: 0.8  # Center horizontally
            pos_hint: {"center_x": 0.5}
        
        

        Button:
            text: "Create Username"
            font_size: 20  # Match the font size of the TextInput fields
            size_hint_x: 0.8  # Match the width of the TextInput fields
            size_hint_y: None
            height: 50  # Fixed height for the button
            pos_hint: {"center_x": 0.5}
            on_press: root.create_user()

        Button:
            text: "Back to Login"
            font_size: 20
            size_hint_x: 0.8
            size_hint_y: None
            height: 50
            pos_hint: {"center_x": 0.5}
            on_press: app.root.current = "login"

        Label:
            id: result_label
            text: ""
            size_hint: (1, 0.2)

<HomeScreen>:
    BoxLayout:
        orientation: 'vertical'
        padding: [8, 8, 8, 8]
        spacing: 8
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Match app background
            Rectangle:
                pos: self.pos
                size: self.size

        Label:
            text: "Your Trips"
            font_size: 20
            size_hint_y: None
            height: 40
            color: 1, 1, 1, 1

        ScrollView:
            do_scroll_x: False
            GridLayout:
                id: projects_list
                cols: 1
                size_hint_y: None
                height: self.minimum_height
                spacing: 4

        Button:
            text: "Create New Trip"
            size_hint_y: None
            height: 48
            background_color: 0.341, 0.235, 0.980, 1
            color: 1, 1, 1, 1
            font_size: 16
            on_press: root.create_new_project()

<GetTripFromServer>:
    BoxLayout:
        orientation: "vertical"
        padding: [12, 0, 12, 12]
        spacing: 18

        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1
            Rectangle:
                pos: self.pos
                size: self.size

        # Responsive Server info row
        BoxLayout:
            id: server_info_box
            orientation: 'horizontal' if self.width > 400 else 'vertical'
            size_hint_y: None
            height: 40 if self.width > 400 else 80
            spacing: 10
            padding: [10, 10, 10, 10]
            canvas.before:
                Color:
                    rgba: root.server_box_color
                Rectangle:
                    pos: self.pos
                    size: self.size
            Label:
                id: server_info_label
                text: root.server_info_text
                font_size: 15
                size_hint_x: 0.7 if server_info_box.orientation == 'horizontal' else 1
                size_hint_y: 1
                halign: 'left'
                valign: 'middle'
                text_size: self.size
            Button:
                text: "Settings"
                size_hint_x: 0.3 if server_info_box.orientation == 'horizontal' else 1
                size_hint_y: 1
                font_size: 15
                background_color: 0.341, 0.235, 0.980, 1
                on_press: app.root.current = "settings"

        # Device and date selection
        BoxLayout:
            orientation: "vertical"
            size_hint_y: None
            height: 300
            spacing: 14
            padding: 14
            canvas.before:
                Color:
                    rgba: 0.2, 0.2, 0.2, 1
                Rectangle:
                    pos: self.pos
                    size: self.size

            Label:
                text: "Select device and date"
                font_size: 15
                size_hint_y: None
                height: 22

            Spinner:
                id: devices_spinner
                text: "Loading devices..."
                values: []
                size_hint_y: None
                height: 38
                font_size: 15
                on_text: root.on_device_selected(self.text)

            BoxLayout:
                orientation: "horizontal"
                size_hint_y: None
                height: 38
                spacing: 8
                Label:
                    text: "Start"
                    font_size: 13
                    size_hint_x: 0.18
                Button:
                    id: start_date_picker_button
                    text: "Start Date"
                    size_hint_x: 0.42
                    font_size: 13
                    on_press: root.open_date_picker('start')
                Button:
                    id: start_hour_button
                    text: "00"
                    size_hint_x: 0.18
                    font_size: 13
                    on_press: root.open_hour_picker('start')

            BoxLayout:
                orientation: "horizontal"
                size_hint_y: None
                height: 38
                spacing: 8
                Label:
                    text: "End"
                    font_size: 13
                    size_hint_x: 0.18
                Button:
                    id: end_date_picker_button
                    text: "End Date"
                    size_hint_x: 0.42
                    font_size: 13
                    on_press: root.open_date_picker('end')
                Button:
                    id: end_hour_button
                    text: "23"
                    size_hint_x: 0.18
                    font_size: 13
                    on_press: root.open_hour_picker('end')

            # Responsive button row
            BoxLayout:
                id: trip_button_box
                orientation: 'horizontal' if self.width > 400 else 'vertical'
                size_hint_y: None
                height: 38 if self.width > 400 else 90
                spacing: 10
                Button:
                    id: get_trip_data_button
                    text: "Get trip data"
                    font_size: 15
                    background_color: 0.341, 0.235, 0.980, 1
                    on_press: root.get_trip_server_data()

        # Route info and save
        BoxLayout:
            orientation: "vertical"
            size_hint_y: None
            height: 120
            spacing: 14
            padding: 14
            canvas.before:
                Color:
                    rgba: 0.15, 0.15, 0.15, 1
                Rectangle:
                    pos: self.pos
                    size: self.size

            Label:
                id: points_count_label
                text: "Points: 0"
                font_size: 15
                size_hint_y: None
                height: 24

            BoxLayout:
                orientation: "horizontal"
                size_hint_y: None
                height: 38
                spacing: 8
                Label:
                    text: "Route:"
                    font_size: 15
                    size_hint_x: 0.25
                TextInput:
                    id: route_name_input
                    hint_text: "Route name"
                    multiline: False
                    font_size: 15
                    size_hint_x: 0.5
                # Responsive save button row
                BoxLayout:
                    id: save_button_box
                    orientation: 'horizontal' if self.width > 400 else 'vertical'
                    size_hint_x: 0.25
                    size_hint_y: None
                    height: 38 if self.width > 400 else 90
                    spacing: 10
                    Button:
                        text: "Save"
                        font_size: 15
                        background_color: 0.008, 0.525, 0.290, 1
                        on_press: root.save_route()

        # Result label
        Label:
            id: result_label
            text: ""
            font_size: 15
            size_hint_y: None
            height: 28

        # Add empty space before the back button
        Widget:
            size_hint_y: None
            height: 40

        # Back button
        Button:
            text: "Back to Home"
            size_hint_y: None
            height: 48
            font_size: 15
            background_color: 0.341, 0.235, 0.980, 1
            on_press: app.root.current = "home"

<SettingsScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Background color: #1C1A27
            Rectangle:
                pos: self.pos
                size: self.size

        Image:
            source: "resources/track.png"
            size_hint: (1, 0.66)  # 2/3 of the screen height

        TextInput:
            id: server_url_input
            hint_text: "Traccar Server URL"
            multiline: False
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: username_input
            hint_text: "Username"
            multiline: False
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: password_input
            hint_text: "Password"
            multiline: False
            password: True
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}

        TextInput:
            id: token_input
            hint_text: "Token"
            multiline: False
            font_size: 20
            size_hint_y: None
            height: self.minimum_height
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}    

        BoxLayout:
            orientation: "horizontal"
            size_hint_y: None
            height: 50
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}
            spacing: 10

            Button:
                text: "Test Connection"
                size_hint_x: 0.5  # Half the width of the BoxLayout
                size_hint_y: None
                height: 50
                background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
                on_press: root.test_connection()

            Button:
                text: "Save Settings"
                size_hint_x: 0.5  # Half the width of the BoxLayout
                size_hint_y: None
                height: 50
                background_color: 0.008, 0.525, 0.290, 1  # Purple color (#573CFA)
                on_press: root.save_settings()

        Label:
            id: result_label
            text: "Waiting to test connection..."
            size_hint_y: None
            height: 50
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}
            canvas.before:
                Color:
                    rgba: 1, 1, 1, 1  # White color
                Line:
                    width: 1.5
                    rectangle: self.x, self.y, self.width, self.height

        Button:
            text: "Return to Home"
            size_hint_y: None
            height: 50
            size_hint_x: 0.8
            pos_hint: {"center_x": 0.5}
            background_color: 0.341, 0.235, 0.980, 1  # Purple color (#573CFA)
            on_press: app.root.current = "home"

<CreateAnimationScreen>:
    BoxLayout:
        orientation: "vertical"
        padding: 20
        spacing: 20
        canvas.before:
            Color:
                rgba: 0.11, 0.10, 0.15, 1  # Same background as other screens
            Rectangle:
                pos: self.pos
                size: self.size

        Label:
            text: "Create Animation Screen"
            font_size: 24
            color: 1, 1, 1, 1

        Button:
            text: "Back to Home"
            size_hint_y: None
            height: 50
            background_color: 0.341, 0.235, 0.980, 1
            on_press: app.root.current = "home"