use crate::i18n::{t, Locale};
use dioxus::prelude::*;

/// Dropdown bar for selecting the LLM model for the current chat session.
///
/// Displays the currently selected model and a list of available models
/// from the Ollama instance. Fires `on_change` when the user selects
/// a different model.
///
/// # Arguments
///
/// * `selected_model` - The currently active model ID
/// * `available_models` - List of model names from Ollama
/// * `on_change` - Callback fired with the new model name
#[component]
pub fn ChatModelSelector(
    selected_model: String,
    available_models: Vec<String>,
    on_change: EventHandler<String>,
) -> Element {
    let locale = use_context::<Signal<Locale>>();
    let l = *locale.read();

    rsx! {
        div { class: "chat-model-bar",
            label { class: "chat-model-label",
                "{t(l, \"chat.model_label\")}"
            }
            select {
                class: "chat-model-select",
                value: "{selected_model}",
                onchange: move |e: Event<FormData>| {
                    on_change.call(e.value());
                },
                for model in &available_models {
                    option {
                        value: "{model}",
                        selected: *model == selected_model,
                        "{model}"
                    }
                }
                if available_models.is_empty() {
                    option { disabled: true,
                        "{t(l, \"chat.no_models\")}"
                    }
                }
            }
        }
    }
}