fn setup_menu_ui(
    mut commands: Commands,
    difficulty: Res<Difficulty>,
    multiplayer_config: Res<MultiplayerConfig>,
    mut join_choice: ResMut<MultiplayerJoinChoice>,
    asset_server: Res<AssetServer>
) {
    let (default_choice, default_address) = match &multiplayer_config.mode {
        MultiplayerMode::Host { bind_addr } => (MultiplayerJoinChoice::Host, bind_addr.clone()),
        MultiplayerMode::Client { server_url } => (MultiplayerJoinChoice::Join, server_url.clone()),
        MultiplayerMode::Offline => (
            MultiplayerJoinChoice::Host,
            network::DEFAULT_HOST_BIND_ADDR.to_string(),
        ),
    };
    *join_choice = default_choice;

    commands
        .spawn((
            MenuScreen,
            MenuMainScreen,
            Node {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                ..default()
            },
            ImageNode::new(asset_server.load("knifet_title.png"))
                .with_mode(NodeImageMode::Stretch),
            Visibility::Visible,
        ))
        .with_children(|root| {
            root.spawn((
                Node {
                    flex_direction: FlexDirection::Column,
                    align_items: AlignItems::Center,
                    row_gap: Val::Px(14.0),
                    padding: UiRect::all(Val::Px(24.0)),
                    ..default()
                },
                BackgroundColor(Color::srgba(0.08, 0.08, 0.11, 0.92)),
            ))
            .with_children(|panel| {
                panel.spawn((
                    Text::new("knifet_pathfind"),
                    TextFont {
                        font_size: 44.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.97, 0.97, 0.99)),
                ));
                panel.spawn((
                    MenuMainErrorText,
                    Text::new(""),
                    TextFont {
                        font_size: 16.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.95, 0.45, 0.45)),
                ));
                panel
                    .spawn((
                        Button,
                        MenuMainPlayButton,
                        Node {
                            width: Val::Px(260.0),
                            height: Val::Px(56.0),
                            justify_content: JustifyContent::Center,
                            align_items: AlignItems::Center,
                            margin: UiRect::top(Val::Px(6.0)),
                            ..default()
                        },
                        BackgroundColor(play_button_color(Interaction::None)),
                    ))
                    .with_children(|button| {
                        button.spawn((
                            Text::new("Play"),
                            TextFont {
                                font_size: 24.0,
                                ..default()
                            },
                            TextColor(Color::srgb(0.98, 0.98, 0.99)),
                        ));
                    });
            });
        });

    commands
        .spawn((
            MenuScreen,
            MenuBotsScreen,
            Node {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                ..default()
            },
            ImageNode::new(asset_server.load("knifet_title.png"))
            .with_mode(NodeImageMode::Stretch),            
            Visibility::Hidden,
        ))
        .with_children(|root| {
            root.spawn((
                Node {
                    flex_direction: FlexDirection::Column,
                    align_items: AlignItems::Center,
                    row_gap: Val::Px(14.0),
                    padding: UiRect::all(Val::Px(24.0)),
                    ..default()
                },
                BackgroundColor(Color::srgba(0.08, 0.08, 0.11, 0.92)),
            ))
            .with_children(|panel| {
                panel.spawn((
                    Text::new("Choose Mode"),
                    TextFont {
                        font_size: 34.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.97, 0.97, 0.99)),
                ));
                panel
                    .spawn((
                        Button,
                        MenuBotsButton,
                        Node {
                            width: Val::Px(260.0),
                            height: Val::Px(56.0),
                            justify_content: JustifyContent::Center,
                            align_items: AlignItems::Center,
                            margin: UiRect::top(Val::Px(6.0)),
                            ..default()
                        },
                        BackgroundColor(play_button_color(Interaction::None)),
                    ))
                    .with_children(|button| {
                        button.spawn((
                            Text::new("<bots>"),
                            TextFont {
                                font_size: 24.0,
                                ..default()
                            },
                            TextColor(Color::srgb(0.98, 0.98, 0.99)),
                        ));
                    });

                panel
                    .spawn((
                        Button,
                        MenuMultiplayerButton,
                        Node {
                            width: Val::Px(260.0),
                            height: Val::Px(56.0),
                            justify_content: JustifyContent::Center,
                            align_items: AlignItems::Center,
                            ..default()
                        },
                        BackgroundColor(play_button_color(Interaction::None)),
                    ))
                    .with_children(|button| {
                        button.spawn((
                            Text::new("<multiplayer>"),
                            TextFont {
                                font_size: 24.0,
                                ..default()
                            },
                            TextColor(Color::srgb(0.98, 0.98, 0.99)),
                        ));
                    });
            });
        });

    commands
        .spawn((
            MenuScreen,
            MenuDifficultyScreen,
            Node {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                ..default()
            },
            ImageNode::new(asset_server.load("knifet_title.png"))
                .with_mode(NodeImageMode::Stretch),            
            Visibility::Hidden,
        ))
        .with_children(|root| {
            root.spawn((
                Node {
                    flex_direction: FlexDirection::Column,
                    align_items: AlignItems::Center,
                    row_gap: Val::Px(14.0),
                    padding: UiRect::all(Val::Px(24.0)),
                    ..default()
                },
                BackgroundColor(Color::srgba(0.08, 0.08, 0.11, 0.92)),
            ))
            .with_children(|panel| {
                panel.spawn((
                    Text::new("Difficulty"),
                    TextFont {
                        font_size: 34.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.97, 0.97, 0.99)),
                ));

                panel
                    .spawn(Node {
                        flex_direction: FlexDirection::Row,
                        column_gap: Val::Px(10.0),
                        ..default()
                    })
                    .with_children(|row| {
                        for level in [Difficulty::Easy, Difficulty::Medium, Difficulty::Hard] {
                            row.spawn((
                                Button,
                                MenuDifficultyButton { level },
                                Node {
                                    width: Val::Px(120.0),
                                    height: Val::Px(48.0),
                                    justify_content: JustifyContent::Center,
                                    align_items: AlignItems::Center,
                                    ..default()
                                },
                                BackgroundColor(difficulty_button_color(
                                    level,
                                    *difficulty == level,
                                    Interaction::None,
                                )),
                            ))
                            .with_children(|button| {
                                button.spawn((
                                    Text::new(difficulty_label(level)),
                                    TextFont {
                                        font_size: 20.0,
                                        ..default()
                                    },
                                    TextColor(Color::srgb(0.98, 0.98, 0.99)),
                                ));
                            });
                        }
                    });
            });
        });

    commands
        .spawn((
            MenuScreen,
            MenuMultiplayerScreen,
            Node {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                justify_content: JustifyContent::Center,
                align_items: AlignItems::Center,
                ..default()
            },
            ImageNode::new(asset_server.load("knifet_title.png"))
                .with_mode(NodeImageMode::Stretch),            
            Visibility::Hidden,
        ))
        .with_children(|root| {
            root.spawn((
                Node {
                    width: Val::Px(420.0),
                    flex_direction: FlexDirection::Column,
                    align_items: AlignItems::Stretch,
                    row_gap: Val::Px(10.0),
                    padding: UiRect::all(Val::Px(24.0)),
                    ..default()
                },
                BackgroundColor(Color::srgba(0.08, 0.08, 0.11, 0.92)),
            ))
            .with_children(|panel| {
                panel.spawn((
                    Text::new("Multiplayer Setup"),
                    TextFont {
                        font_size: 32.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.97, 0.97, 0.99)),
                ));

                panel
                    .spawn(Node {
                        flex_direction: FlexDirection::Row,
                        column_gap: Val::Px(10.0),
                        ..default()
                    })
                    .with_children(|row| {
                        row.spawn((
                            Button,
                            MenuMultiplayerHostButton,
                            Node {
                                width: Val::Px(120.0),
                                height: Val::Px(42.0),
                                justify_content: JustifyContent::Center,
                                align_items: AlignItems::Center,
                                ..default()
                            },
                            BackgroundColor(mode_toggle_color(
                                *join_choice == MultiplayerJoinChoice::Host,
                                Interaction::None,
                            )),
                        ))
                        .with_children(|button| {
                            button.spawn((
                                Text::new("Host"),
                                TextFont {
                                    font_size: 20.0,
                                    ..default()
                                },
                                TextColor(Color::srgb(0.98, 0.98, 0.99)),
                            ));
                        });

                        row.spawn((
                            Button,
                            MenuMultiplayerJoinButton,
                            Node {
                                width: Val::Px(120.0),
                                height: Val::Px(42.0),
                                justify_content: JustifyContent::Center,
                                align_items: AlignItems::Center,
                                ..default()
                            },
                            BackgroundColor(mode_toggle_color(
                                *join_choice == MultiplayerJoinChoice::Join,
                                Interaction::None,
                            )),
                        ))
                        .with_children(|button| {
                            button.spawn((
                                Text::new("Join"),
                                TextFont {
                                    font_size: 20.0,
                                    ..default()
                                },
                                TextColor(Color::srgb(0.98, 0.98, 0.99)),
                            ));
                        });
                    });

                panel.spawn((
                    Text::new("Name"),
                    TextFont {
                        font_size: 16.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.82, 0.84, 0.9)),
                ));

                panel.spawn((
                    TextInput,
                    MenuMultiplayerNameInput,
                    TextInputValue(multiplayer_config.name.clone()),
                    TextInputInactive(true),
                    TextInputPlaceholder {
                        value: "Player name".to_string(),
                        ..default()
                    },
                    Node {
                        width: Val::Percent(100.0),
                        height: Val::Px(42.0),
                        padding: UiRect::axes(Val::Px(8.0), Val::Px(6.0)),
                        border: UiRect::all(Val::Px(2.0)),
                        ..default()
                    },
                    BorderColor::all(Color::srgb(0.22, 0.24, 0.34)),
                    BackgroundColor(Color::srgb(0.2, 0.2, 0.2)),
                ));

                panel.spawn((
                    Text::new("Address"),
                    TextFont {
                        font_size: 16.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.82, 0.84, 0.9)),
                ));

                panel.spawn((
                    TextInput,
                    MenuMultiplayerAddressInput,
                    TextInputValue(default_address),
                    TextInputInactive(true),
                    TextInputPlaceholder {
                        value: "host bind (127.0.0.1:9002) or join url (ws://...)".to_string(),
                        ..default()
                    },
                    Node {
                        width: Val::Percent(100.0),
                        height: Val::Px(42.0),
                        padding: UiRect::axes(Val::Px(8.0), Val::Px(6.0)),
                        border: UiRect::all(Val::Px(2.0)),
                        ..default()
                    },
                    BorderColor::all(Color::srgb(0.22, 0.24, 0.34)),
                    BackgroundColor(Color::srgb(0.2, 0.2, 0.2)),
                ));

                panel
                    .spawn((
                        Button,
                        MenuMultiplayerStartButton,
                        Node {
                            width: Val::Percent(100.0),
                            height: Val::Px(48.0),
                            justify_content: JustifyContent::Center,
                            align_items: AlignItems::Center,
                            margin: UiRect::top(Val::Px(6.0)),
                            ..default()
                        },
                        BackgroundColor(play_button_color(Interaction::None)),
                    ))
                    .with_children(|button| {
                        button.spawn((
                            Text::new("Start Multiplayer"),
                            TextFont {
                                font_size: 22.0,
                                ..default()
                            },
                            TextColor(Color::srgb(0.98, 0.98, 0.99)),
                        ));
                    });

                panel.spawn((
                    MenuMultiplayerMessageText,
                    Text::new("Enter a name, choose host or join, then start."),
                    TextFont {
                        font_size: 14.0,
                        ..default()
                    },
                    TextColor(Color::srgb(0.87, 0.66, 0.5)),
                ));
            });
        });
}
