pub fn setup_field_validation() {

    setup_blur_validation();

    setup_input_clear_validation();

}

fn setup_blur_validation() {

    let Some(document) = web_sys::window().and_then(|w| w.document()) else {

        return;

    let callback = Closure::wrap(Box::new(move |event: web_sys::FocusEvent| {

        let Some(target) = event.target() else {

            return;

        let Ok(input) = target.dyn_into::<HtmlInputElement>() else {

            return;

        let Some(field_id) = input.get_attribute("data-field") else {

            return;

        if matches!(

            field_id.as_str(),

            "amount"

                | "amount-converted"

                | "from-account"

                | "to-account"

                | "from-commodity"

                | "to-commodity"

        ) {

            validate_field(&input, &field_id);

        }

    }) as Box<dyn FnMut(_)>);

    let _ = document.add_event_listener_with_callback_and_bool(

        "focusout",

        callback.as_ref().unchecked_ref(),

        true,

    );

    callback.forget();

}

fn setup_input_clear_validation() {

    let Some(document) = web_sys::window().and_then(|w| w.document()) else {

        return;

    let callback = Closure::wrap(Box::new(move |event: web_sys::InputEvent| {

        let Some(target) = event.target() else {

            return;

        let Ok(input) = target.dyn_into::<HtmlInputElement>() else {

            return;

        let Some(field_id) = input.get_attribute("data-field") else {

            return;

        if matches!(

            field_id.as_str(),

            "from-account" | "to-account" | "from-commodity" | "to-commodity"

        ) {

            clear_validation_message(&input);

        }

    }) as Box<dyn FnMut(_)>);

    let _ = document.add_event_listener_with_callback_and_bool(

        "input",

        callback.as_ref().unchecked_ref(),

        true,

    );

    callback.forget();

}

fn validate_field(input: &HtmlInputElement, field_id: &str) {

    let Some(split_entry) = input.closest(".split-entry").ok().flatten() else {

        return;

    let feedback = split_entry

        .query_selector(".split-validation")

        .ok()

        .flatten();

    if let Some(ref fb) = feedback {

        fb.set_text_content(Some(""));

    }

    match field_id {

        "amount" | "amount-converted" => {

            let value = input.value();

            if let Err(msg) = validate_amount(&value)

                && let Some(fb) = feedback

            {

                fb.set_text_content(Some(&msg));

            }

        "from-account" | "to-account" | "from-commodity" | "to-commodity" => {

            if let Err(msg) = validate_autocomplete_field(&split_entry, input, field_id)

                && let Some(fb) = feedback

            {

                fb.set_text_content(Some(&msg));

            }

        _ => {}

}

fn clear_validation_message(input: &HtmlInputElement) {

    let Some(split_entry) = input.closest(".split-entry").ok().flatten() else {

        return;

    if let Some(feedback) = split_entry

        .query_selector(".split-validation")

        .ok()

        .flatten()

    {

        feedback.set_text_content(Some(""));

    }

}

fn validate_autocomplete_field(

    split_entry: &Element,

    display_input: &HtmlInputElement,

    field_id: &str,

) -> Result<(), String> {

    let suggestions_visible = split_entry

        .query_selector(".autocomplete-results")

        .ok()

        .flatten()

        .and_then(|el| el.dyn_into::<web_sys::HtmlElement>().ok())

        .is_some_and(|el| el.style().get_property_value("display").unwrap_or_default() == "block");

    if suggestions_visible {

        return Ok(());

    }

    let display_value = display_input.value();

    if display_value.trim().is_empty() {

        return Ok(());

    }

    let class_name = display_input.class_name();

    let value_class = if class_name.contains("account") {

        "account-value"

        "commodity-value"

    let hidden_input = split_entry

        .query_selector(&format!(r#".{value_class}[data-field="{field_id}"]"#))

        .ok()

        .flatten()

        .and_then(|el| el.dyn_into::<HtmlInputElement>().ok());

    let hidden_value = hidden_input.map(|i| i.value()).unwrap_or_default();

    if hidden_value.is_empty() {

        let field_name = field_id.replace('-', " ");

        return Err(format!("Please select a valid {field_name} from the list"));

    }

    Ok(())

}