#![allow(non_snake_case)]

use dioxus::prelude::*;
use mumble_web2_client::{
    network_entrypoint, reqwest, AudioSettings, ChannelId, Command, ConfigSystem,
    ConfigSystemInterface as _, ConnectTarget, ConnectionState, Platform, PlatformInterface as _,
    SharedState, State, UserId, UserState,
};
use mumble_web2_common::{ProxyOverrides, ServerEntry};
use Command::*;
use ConnectionState::*;

const ADDRESS_PATTERN: &str = "[A-Za-z0-9.-]+";

fn address_is_valid(addr: &str) -> bool {
    !addr.is_empty() && !addr.contains(':')
}

#[derive(Clone, Copy, PartialEq, Eq)]
pub enum UserIcon {
    Normal,
    Muted,
    Deafened,
    Suppressed,
    None,
}

impl UserIcon {
    pub fn icon(user: &UserState) -> UserIcon {
        if user.deaf || user.self_deaf {
            UserIcon::Deafened
        } else if user.mute || user.self_mute {
            UserIcon::Muted
        } else if user.suppress {
            UserIcon::Suppressed
        } else {
            UserIcon::Normal
        }
    }

    pub fn url(self) -> Option<Asset> {
        // speaker from https://www.svgrepo.com/collection/ikono-bold-line-icons/
        // mic from https://www.svgrepo.com/collection/hashicorp-line-interface-icons/

        use UserIcon::*;
        Some(match self {
            Normal => asset!("assets/mic-svgrepo-com.svg"),
            Muted | Suppressed => asset!("assets/mic-off-svgrepo-com.svg"),
            Deafened => asset!("assets/speaker-muted-svgrepo-com.svg"),
            None => return Option::None,
        })
    }
}

#[component]
pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
    let color = match icon {
        UserIcon::Normal => "var(--accent-normal)",
        UserIcon::Muted => "var(--accent-muted)",
        UserIcon::Suppressed | UserIcon::Deafened => "var(--accent-deafened)",
        UserIcon::None => "var(--accent-normal)",
    };

    rsx!(
        div {
            class: match isself { true => "userpil is_self", false => "userpil" },
            style: "background-color: {color}",
            { icon.url().map(|url| rsx!(img { src: url })) }
            "\u{00A0}{name}\u{00A0}"
        }
    )
}

#[component]
pub fn User(id: UserId) -> Element {
    let state = use_context::<SharedState>();
    let server = state.server.read();
    match server.users.get(&id) {
        Some(state) => rsx!(UserPill {
            name: state.name.clone(),
            icon: UserIcon::icon(state),
            isself: server.session.unwrap() == id,
        }),
        None => rsx!(UserPill {
            name: format!("unknown user ({id})"),
            icon: UserIcon::None,
            isself: false,
        }),
    }
}

#[component]
pub fn Channel(id: ChannelId) -> Element {
    let net: Coroutine<Command> = use_coroutine_handle();
    let state = use_context::<SharedState>();
    let server = state.server.read();
    let user = server.session.unwrap();
    let Some(state) = server.channels_state.channels.get(&id) else {
        return rsx!("missing channel {id}");
    };

    let mut open = use_signal(|| true);

    let has_children = !state.users.is_empty() || !state.children.is_empty();

    rsx!(
        div {
            class: "channel_details",

            div {
                class: "channel_header",
                // Arrow: only toggles open
                if has_children {
                    span {
                        class: "channel_arrow",
                        onclick: move |evt| {
                            evt.stop_propagation();
                            evt.prevent_default();
                            let mut w = open.write();
                            *w = !*w;
                        },
                        if *open.read() { "▾" } else { "▸" }
                    }
                } else {
                    span {
                        class: "channel_arrow channel_arrow--placeholder",
                        " "
                    }
                }

                // Clickable row area (everything except the arrow)
                div {
                    class: "channel_row_click",
                    ondblclick: move |evt| {
                        evt.stop_propagation();
                        evt.prevent_default();
                        net.send(EnterChannel { channel: id, user })
                    },
                    // remove dblclick from the inner span
                    span {
                        class: "channel_title",
                        "{state.name}"
                    }
                    // if you add icons/badges later, put them here too
                }
            }

            if *open.read() && has_children {
                div {
                    class: "channel_children",
                    for id in state.users.iter() {
                        User { id: *id }
                    }
                    for child in state.children.iter() {
                        Channel { id: *child }
                    }
                }
            }
        }
    )
}

#[cfg(any(feature = "desktop", feature = "web"))]
pub fn pick_and_send_file(net: &Coroutine<Command>) {
    let state = use_context::<SharedState>();
    let channels = if let Some(user) = state.server.read().this_user() {
        vec![user.channel]
    } else {
        return;
    };
    let dialog = rfd::AsyncFileDialog::new().pick_file();
    let sender = net.tx();
    spawn(async move {
        let Some(handle) = dialog.await else { return };
        let name = handle.file_name();
        let bytes = handle.read().await;
        let mime = mumble_web2_client::mime_guess::from_path(&name).first();
        let _ = sender.unbounded_send(SendFile {
            bytes,
            name,
            mime,
            channels,
        });
    });
}
#[cfg(not(any(feature = "desktop", feature = "web")))]
pub fn pick_and_send_file(net: &Coroutine<Command>) {}

#[component]
pub fn ChatView() -> Element {
    let net: Coroutine<Command> = use_coroutine_handle();
    let state = use_context::<SharedState>();
    let server = state.server.read();
    let mut draft = use_signal(|| "".to_string());

    let mut do_send = move || {
        let state = use_context::<SharedState>();
        let server = state.server.read();
        if let Some(user) = server.this_user() {
            net.send(SendChat {
                markdown: draft.write().split_off(0),
                channels: vec![user.channel],
            });
        }
    };

    rsx!(
        div {
            class: "chat_panel",
            div {
                class: "chat_history",
                for chat in server.chat.iter() {
                    div {
                        class: "chat_message",
                        if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
                            UserPill {
                                name: sender.name.clone(),
                                icon: UserIcon::None,
                                isself: false,
                            }
                        }
                        span {
                            dangerous_inner_html: "{chat.dangerous_html}",
                        }
                    }
                }
            }
            div {
                class: "chat_box_wrapper",
                div {
                    class: "chat_box",
                    input {
                        placeholder: "say something",
                        value: "{draft.read()}",
                        oninput: move |evt| draft.set(evt.value().clone()),
                        onkeypress: move |evt: Event<KeyboardData>| {
                            if evt.code() == Code::Enter && evt.modifiers().is_empty() {
                                do_send();
                            }
                        }
                    }
                    div {
                        span {
                            onclick: move |_| pick_and_send_file(&net),
                            class: "material-symbols-outlined",
                            style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
                            "attach_file",
                        }
                    }
                    div {
                        span {
                            onclick: move |_| do_send(),
                            class: "material-symbols-outlined",
                            style: "color: rgba(255, 255, 255, 0.5); font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48; vertical-align: middle; font-size: 35px; user-select: none;",
                            "send",
                        }
                    }
                }
                //button {
                //    onclick: move |_| do_send(),
                //    "Send"
                //}
            }
        }
    )
}

#[component]
pub fn ControlView(overrides: Resource<ProxyOverrides>) -> Element {
    let net: Coroutine<Command> = use_coroutine_handle();
    let state = use_context::<SharedState>();
    let status = &state.status;
    let server = state.server.read();
    let audio = state.audio.read();
    let Some(&UserState {
        deaf,
        self_deaf,
        mute,
        suppress,
        self_mute,
        ref name,
        channel,
        ..
    }) = server.this_user()
    else {
        return rsx!();
    };

    let current_channel_name = server.channels_state.channels[&channel].name.clone();

    let proxy_url = overrides
        .read_unchecked()
        .as_ref()
        .and_then(|overrides| overrides.proxy_url.clone());

    let connecting_color = "yellow";
    let connected_color = "oklch(0.55 0.1184 141.35)";
    let disconnected_color = "gray";
    let failed_color = "red";

    let connection_status = match &*status.read() {
        Connecting => rsx! {
            div {
                class: "connection_status",
                style: "color: {connecting_color};",
                div {
                    span {
                        class: "material-symbols-outlined",
                        "signal_cellular_alt_2_bar"
                    }
                    span {
                        class: "status_text",
                        " Connecting"
                    }
                }
            }
        },
        Connected => rsx! {
            div {
                class: "connection_status",
                div {
                    style: "color: {connected_color};",
                    span {
                        class: "material-symbols-outlined",
                        "signal_cellular_alt"
                    }
                    span {
                        class: "status_text",
                        " Connected"
                    }
                }
                div {
                    class: "channel_text",
                    span { "{current_channel_name}" }
                }
            }
        },
        Disconnected => rsx! {
            div {
                class: "connection_status",
                style: "color: {disconnected_color};",
                div {
                    span {
                        class: "material-symbols-outlined",
                        "signal_disconnected"
                    }
                    span {
                        class: "status_text",
                        " Disconnected"
                    }
                }
            }
        },
        Failed(_) => rsx! {
            div {
                class: "connection_status",
                style: "color: {failed_color};",
                div {
                    span {
                        class: "material-symbols-outlined",
                        "error"
                    }
                    span {
                        class: "status_text",
                        " Failed"
                    }
                }
            }
        },
    };

    rsx!(
        // Server control
        div {
            class: "button_row",
            div {
                {connection_status}
            }
            span { class: "spacer" }
            button {
                class: "toggle_button",
                onclick: move |_| net.send(Disconnect),
                span {
                    class: "material-symbols-outlined",
                    "signal_disconnected"
                }
            }
        }
        hr { style: "width: 100%;" }
        // User control
        div {
            class: "button_row",
            button {
                class: "user_edit_button",
                span {
                    class: "material-symbols-outlined",
                    style: "color: oklch(0.65 0.2245 28.06);",
                    "person_edit"
                }
            }
            div {
                class: "user_info",
                div {
                    span { class: "user_name", "{name}" }
                }
                div {
                    span { class: "user_data", "some data" }
                }
            }
            span { class: "spacer" }
            button {
                class: match audio.denoise {
                    true => "toggle_button is_on",
                    false => "toggle_button",
                },
                role: "switch",
                aria_checked: audio.denoise,
                onclick: move |_| {
                    let state = use_context::<SharedState>();
                    let mut audio = state.audio.read().clone();
                    audio.denoise = !audio.denoise;
                    let denoise = audio.denoise;
                    *state.audio.write_unchecked() = audio;
                    net.send(UpdateAudioSettings(AudioSettings { denoise: denoise }));
                    let user_config = use_context::<ConfigSystem>();
                    user_config.config_set::<bool>("denoise", &denoise);
                },
                match audio.denoise {
                    true => rsx!(span { class: "material-symbols-outlined", "cadence"}),
                    false => rsx!(span { class: "material-symbols-outlined", "graphic_eq"}),
                }
            }
            button {
                class: match mute || suppress || self_mute {
                    true => "toggle_button is_on",
                    false => "toggle_button",
                },
                role: "switch",
                aria_checked: mute || suppress || self_mute,
                disabled: mute || suppress,
                onclick: move |_| net.send(SetMute { mute: !self_mute }),
                match mute || suppress || self_mute {
                    true => rsx!(span { class: "material-symbols-outlined", "mic_off"}),
                    false => rsx!(span { class: "material-symbols-outlined", "mic"}),
                }
            }
            button {
                class: match deaf || self_deaf {
                    true => "toggle_button in_on",
                    false => "toggle_button",
                },
                role: "switch",
                aria_checked: deaf || self_deaf,
                disabled: deaf,
                onclick: move |_| net.send(SetDeaf { deaf: !self_deaf }),
                match deaf || self_deaf {
                    true => rsx!(span { class: "material-symbols-outlined", "volume_off"}),
                    false => rsx!(span { class: "material-symbols-outlined", "volume_up"}),
                }
            }
        }
    )
}

#[component]
pub fn ServerView(overrides: Resource<ProxyOverrides>) -> Element {
    let net: Coroutine<Command> = use_coroutine_handle();
    let state = use_context::<SharedState>();
    let server = state.server.read();
    let Some(&UserState {
        deaf,
        self_deaf,
        mute,
        self_mute,
        ..
    }) = server.this_user()
    else {
        return rsx!();
    };

    rsx!(
        div {
            class: "server_grid",
            div {
                class: "server_channel_box",
                for (id, state) in server.channels_state.channels.iter() {
                    if state.parent.is_none() {
                        Channel { id: *id }
                    }
                }
            }
            div {
                class: "server_chat_box",
                ChatView {}
            }
            div {
                class: "server_control_box",
                ControlView { overrides }
            }
        }
    )
}

#[component]
fn OverrideLoginView(overrides: Resource<ProxyOverrides>) -> Element {
    let user_config = use_context::<ConfigSystem>();
    let net: Coroutine<Command> = use_coroutine_handle();
    let state = use_context::<SharedState>();

    let version = option_env!("MUMBLE_WEB2_VERSION");

    let proxy_url = overrides
        .read()
        .as_ref()
        .and_then(|c| c.proxy_url.clone())
        .unwrap_or_default();

    let mut username = use_signal(|| {
        user_config
            .config_get::<String>("username")
            .unwrap_or_default()
    });

    let is_connecting = matches!(&*state.status.read(), Connecting);

    rsx!(
        div {
            class: "server-list-page",
            h1 {
                "Mumble Web"
                match version {
                    Some(v) => rsx!(div { class: "login_version", "({v})" }),
                    None => rsx!(),
                }
            }
            div {
                class: "server-list",
                div {
                    class: "server-card",
                    img {
                        class: "server-card__icon",
                        src: asset!("assets/earth-14-svgrepo-com.svg"),
                        alt: "Server icon",
                    }
                    div {
                        class: "server-card__info",
                        span { class: "server-card__name", "Server" }
                        span { class: "server-card__address", "{proxy_url}" }
                    }
                }
                div {
                    class: "override-username-row",
                    input {
                        class: "override-username-input",
                        r#type: "text",
                        placeholder: "Username",
                        value: "{username.read()}",
                        oninput: move |evt| username.set(evt.value().clone()),
                    }
                    button {
                        class: "server-card__action server-card__action--connect",
                        disabled: is_connecting || username.read().is_empty(),
                        onclick: {
                            let proxy_url = proxy_url.clone();
                            let user_config = user_config.clone();
                            move |_| {
                                user_config.config_set("username", &*username.read());
                                net.send(Connect {
                                    target: ConnectTarget::Proxy(proxy_url.clone()),
                                    username: username.read().clone(),
                                    config: overrides.read().clone().unwrap_or_default(),
                                });
                            }
                        },
                        img {
                            src: asset!("assets/arrow-right-svgrepo-com.svg"),
                            alt: "Connect",
                        }
                    }
                }
                match &*state.status.read() {
                    Failed(msg) => rsx!(
                        div {
                            class: "login_error",
                            "Failed to connect:"
                            pre { "{msg}" }
                        }
                    ),
                    _ => rsx!(),
                }
            }
        }
    )
}

#[component]
pub fn LoginView(overrides: Resource<ProxyOverrides>) -> Element {
    let user_config = use_context::<ConfigSystem>();
    let net: Coroutine<Command> = use_coroutine_handle();
    let state = use_context::<SharedState>();

    let mut servers = use_signal(|| {
        user_config
            .config_get::<Vec<ServerEntry>>("servers")
            .unwrap_or_default()
    });
    let mut show_add_modal = use_signal(|| false);
    let mut editing_index = use_signal(|| None::<usize>);

    let version = option_env!("MUMBLE_WEB2_VERSION");

    let is_override_mode = overrides.read().as_ref().is_some_and(|c| !c.any_server);

    // --- Overrides mode: single preset server, username-only input ---
    if is_override_mode {
        return rsx!(OverrideLoginView { overrides });
    }

    // --- Normal mode: editable server list ---
    rsx!(
        div {
            class: "server-list-page",
            h1 {
                "Mumble Web"
                match version {
                    Some(v) => rsx!(div { class: "login_version", "({v})" }),
                    None => rsx!(),
                }
            }
            div {
                class: "server-list",
                for (idx, server) in servers.read().iter().enumerate() {
                    {
                        let address = format!("{}:{}", server.address, server.port);
                        let connect_entry = server.clone();
                        rsx!(
                            div {
                                key: "{idx}",
                                class: "server-card",
                                img {
                                    class: "server-card__icon",
                                    src: asset!("assets/earth-14-svgrepo-com.svg"),
                                    alt: "Server icon",
                                }
                                div {
                                    class: "server-card__info",
                                    span { class: "server-card__name", "{server.name}" }
                                    span { class: "server-card__address", "{address}" }
                                }
                                ServerPingInfo {
                                    address: server.address.clone(),
                                    port: server.port,
                                }
                                button {
                                    class: "server-card__action",
                                    onclick: move |_| editing_index.set(Some(idx)),
                                    img {
                                        src: asset!("assets/edit-3-svgrepo-com.svg"),
                                        alt: "Edit",
                                    }
                                }
                                button {
                                    class: "server-card__action server-card__action--connect",
                                    onclick: {
                                        let entry = connect_entry.clone();
                                        let user_config = user_config.clone();
                                        move |_| {
                                            user_config.config_set("username", &entry.username);
                                            net.send(Connect {
                                                target: ConnectTarget::Direct {
                                                    host: entry.address.clone(),
                                                    port: entry.port,
                                                },
                                                username: entry.username.clone(),
                                                config: overrides.read().clone().unwrap_or_default(),
                                            });
                                        }
                                    },
                                    img {
                                        src: asset!("assets/arrow-right-svgrepo-com.svg"),
                                        alt: "Connect",
                                    }
                                }
                            }
                        )
                    }
                }
            }
            match &*state.status.read() {
                Failed(msg) => rsx!(
                    div {
                        class: "server-list",
                        div {
                            class: "login_error",
                            "Failed to connect:"
                            pre { "{msg}" }
                        }
                    }
                ),
                _ => rsx!(),
            }
            button {
                class: "add-server-btn",
                onclick: move |_| show_add_modal.set(true),
                "+ Add Server"
            }

            if *show_add_modal.read() {
                {
                    let user_config = user_config.clone();
                    rsx!(AddServerModal {
                        on_save: move |entry: ServerEntry| {
                            servers.write().push(entry);
                            user_config.config_set("servers", &*servers.read());
                            show_add_modal.set(false);
                        },
                        on_cancel: move |_| show_add_modal.set(false),
                    })
                }
            }

            if let Some(idx) = *editing_index.read() {
                if let Some(entry) = servers.read().get(idx).cloned() {
                    {
                        let user_config_save = user_config.clone();
                        let user_config_del = user_config.clone();
                        rsx!(EditServerModal {
                            entry,
                            on_save: move |updated: ServerEntry| {
                                servers.write()[idx] = updated;
                                user_config_save.config_set("servers", &*servers.read());
                                editing_index.set(None);
                            },
                            on_delete: move |_| {
                                servers.write().remove(idx);
                                user_config_del.config_set("servers", &*servers.read());
                                editing_index.set(None);
                            },
                            on_cancel: move |_| editing_index.set(None),
                        })
                    }
                }
            }
        }
    )
}

#[component]
fn ServerPingInfo(address: String, port: u16) -> Element {
    let ping_result = use_resource(move || {
        let addr = format!("{}:{}", address.clone(), port);
        async move {
            let client = reqwest::Client::new();
            Platform::get_status(&client, &addr).await
        }
    });

    let read = ping_result.read();
    match &*read {
        Some(Ok(status)) => {
            let users_text = match (status.users, status.max_users) {
                (Some(u), Some(m)) => format!("{u}/{m}"),
                (Some(u), None) => format!("{u} online"),
                _ => String::new(),
            };
            rsx!(
                div {
                    class: "server-card__ping",
                    if !users_text.is_empty() {
                        span { "{users_text}" }
                    }
                }
            )
        }
        Some(Err(_)) => rsx!(
            div {
                class: "server-card__ping",
                span { "offline" }
            }
        ),
        None => rsx!(
            div {
                class: "server-card__ping",
                span { "..." }
            }
        ),
    }
}

#[component]
fn AddServerModal(on_save: EventHandler<ServerEntry>, on_cancel: EventHandler<()>) -> Element {
    let user_config = use_context::<ConfigSystem>();
    let mut name = use_signal(|| String::new());
    let mut address = use_signal(|| String::new());
    let mut port = use_signal(|| "64738".to_string());
    let mut username = use_signal(|| {
        user_config
            .config_get::<String>("username")
            .unwrap_or_default()
    });
    let mut password = use_signal(|| String::new());

    let do_save = move |_| {
        let port_num: u16 = port.read().parse().unwrap_or(64738);
        on_save.call(ServerEntry {
            name: name.read().clone(),
            address: address.read().clone(),
            port: port_num,
            username: username.read().clone(),
            password: if password.read().is_empty() {
                None
            } else {
                Some(password.read().clone())
            },
        });
    };

    rsx! {
        div {
            class: "modal-backdrop",
            onclick: move |_| on_cancel.call(()),
        }
        div {
            class: "modal-container",
            onclick: move |evt| evt.stop_propagation(),
            div {
                class: "modal",
                h2 { "Add Server" }
                div {
                    class: "modal-field",
                    label { "Name" }
                    input {
                        r#type: "text",
                        placeholder: "My Mumble Server",
                        value: "{name.read()}",
                        oninput: move |evt| name.set(evt.value().clone()),
                        required: true,
                    }
                }
                div {
                    class: "modal-field",
                    label { "Address" }
                    input {
                        r#type: "text",
                        placeholder: "mumble.example.com",
                        pattern: ADDRESS_PATTERN,
                        value: "{address.read()}",
                        oninput: move |evt| address.set(evt.value().clone()),
                        required: true,
                    }
                    div {
                        class: "modal-field__error",
                        "Enter a hostname or IP address only — do not include a port."
                    }
                }
                div {
                    class: "modal-field",
                    label { "Port" }
                    input {
                        r#type: "number",
                        placeholder: "64738",
                        value: "{port.read()}",
                        oninput: move |evt| port.set(evt.value().clone()),
                        required: true,
                    }
                }
                div {
                    class: "modal-field",
                    label { "Username" }
                    input {
                        r#type: "text",
                        placeholder: "Nickname",
                        value: "{username.read()}",
                        oninput: move |evt| username.set(evt.value().clone()),
                        required: true,
                    }
                }
                div {
                    class: "modal-field",
                    label { "Password (optional)" }
                    input {
                        r#type: "password",
                        placeholder: "Password",
                        value: "{password.read()}",
                        oninput: move |evt| password.set(evt.value().clone()),
                    }
                }
                div {
                    class: "modal-actions",
                    button {
                        class: "modal-btn",
                        onclick: move |_| on_cancel.call(()),
                        "Cancel"
                    }
                    button {
                        class: "modal-btn modal-btn--primary",
                        disabled: !address_is_valid(&address.read()) || username.read().is_empty(),
                        onclick: do_save,
                        "Save"
                    }
                }
            }
        }
    }
}

#[component]
fn EditServerModal(
    entry: ServerEntry,
    on_save: EventHandler<ServerEntry>,
    on_delete: EventHandler<()>,
    on_cancel: EventHandler<()>,
) -> Element {
    let mut name = use_signal(|| entry.name.clone());
    let mut address = use_signal(|| entry.address.clone());
    let mut port = use_signal(|| entry.port.to_string());
    let mut username = use_signal(|| entry.username.clone());
    let mut password = use_signal(|| entry.password.clone().unwrap_or_default());

    let do_save = move |_| {
        let port_num: u16 = port.read().parse().unwrap_or(64738);
        on_save.call(ServerEntry {
            name: name.read().clone(),
            address: address.read().clone(),
            port: port_num,
            username: username.read().clone(),
            password: if password.read().is_empty() {
                None
            } else {
                Some(password.read().clone())
            },
        });
    };

    rsx! {
        div {
            class: "modal-backdrop",
            onclick: move |_| on_cancel.call(()),
        }
        div {
            class: "modal-container",
            onclick: move |evt| evt.stop_propagation(),
            div {
                class: "modal",
                h2 { "Edit Server" }
                div {
                    class: "modal-field",
                    label { "Name" }
                    input {
                        r#type: "text",
                        placeholder: "My Mumble Server",
                        value: "{name.read()}",
                        oninput: move |evt| name.set(evt.value().clone()),
                        required: true,
                    }
                }
                div {
                    class: "modal-field modal-field--strict",
                    label { "Address" }
                    input {
                        r#type: "text",
                        placeholder: "mumble.example.com",
                        pattern: ADDRESS_PATTERN,
                        value: "{address.read()}",
                        oninput: move |evt| address.set(evt.value().clone()),
                        required: true,
                    }
                    div {
                        class: "modal-field__error",
                        "Enter a hostname or IP address only — do not include a port."
                    }
                }
                div {
                    class: "modal-field",
                    label { "Port" }
                    input {
                        r#type: "number",
                        placeholder: "64738",
                        value: "{port.read()}",
                        oninput: move |evt| port.set(evt.value().clone()),
                        required: true,
                    }
                }
                div {
                    class: "modal-field",
                    label { "Username" }
                    input {
                        r#type: "text",
                        placeholder: "Nickname",
                        value: "{username.read()}",
                        oninput: move |evt| username.set(evt.value().clone()),
                        required: true,
                    }
                }
                div {
                    class: "modal-field",
                    label { "Password (optional)" }
                    input {
                        r#type: "password",
                        placeholder: "Password",
                        value: "{password.read()}",
                        oninput: move |evt| password.set(evt.value().clone()),
                    }
                }
                div {
                    class: "modal-actions",
                    button {
                        class: "modal-btn modal-btn--danger",
                        onclick: move |_| on_delete.call(()),
                        "Delete"
                    }
                    span { class: "modal-actions__spacer" }
                    button {
                        class: "modal-btn",
                        onclick: move |_| on_cancel.call(()),
                        "Cancel"
                    }
                    button {
                        class: "modal-btn modal-btn--primary",
                        disabled: !address_is_valid(&address.read()) || username.read().is_empty(),
                        onclick: do_save,
                        "Save"
                    }
                }
            }
        }
    }
}

#[component]
pub fn app() -> Element {
    static STYLE: Asset = asset!("/assets/main.scss");

    use_effect(|| {
        Platform::request_permissions();
    });

    let user_config = use_root_context(|| ConfigSystem::new().unwrap());
    let state = use_root_context(|| {
        SharedState::new(State {
            status: Signal::new(Disconnected),
            server: Signal::new(Default::default()),
            audio: Signal::new(AudioSettings {
                denoise: user_config.config_get::<bool>("denoise").unwrap_or(true),
            }),
        })
    });

    let network_state = state.clone();
    use_coroutine(move |rx: UnboundedReceiver<Command>| {
        network_entrypoint(rx, network_state.clone())
    });
    let overrides = use_resource(|| async move {
        match Platform::load_proxy_overrides().await {
            Ok(overrides) => overrides,
            Err(_) => ProxyOverrides::default(),
        }
    });

    rsx!(
        document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" }
        document::Link{ rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" }
        document::Link{ rel: "stylesheet", href: STYLE }

        match *state.status.read() {
            Connected => rsx!(ServerView { overrides }),
            _ => rsx!(LoginView { overrides }),
        }
    )
}

pub fn main() {
    Platform::init_logging();
    dioxus::LaunchBuilder::new()
        .with_cfg(desktop! {
            dioxus::desktop::Config::new()
            // Reduce white flash on startup by setting background color and hiding main element
            .with_background_color((0, 0, 0, 255))
            .with_custom_head("<style>html, body { background: black; } #main { visibility: hidden; }</style>".into())
            .with_disable_context_menu(cfg!(not(debug_assertions)))
            .with_window(
                dioxus::desktop::WindowBuilder::new()
                    .with_title("Mumble Web 2")
                    .with_min_inner_size(dioxus::desktop::LogicalSize::new(600.0, 300.0))
                    .with_inner_size(dioxus::desktop::LogicalSize::new(900.0, 700.0))
                    .with_maximized(false),
            )
        })
        .launch(app);
}