use dioxus::prelude::*;

use crate::api;
use crate::app::{Lang, Route};
use crate::components::plant_card::PlantCard;
use crate::i18n::{pick_name, t};

#[component]
pub fn Home() -> Element {
    let lang = use_context::<Lang>().0;
    let mut search_query = use_signal(|| String::new());
    let species = use_resource(|| async { api::list_species(1, 12, None, None).await });
    let l = lang.read().clone();

    rsx! {
        div { class: "page home-page",
            h1 { "HerbAPI" }
            p { class: "subtitle", "{t(&l, \"subtitle\")}" }

            div { class: "search-bar",
                input {
                    r#type: "text",
                    placeholder: "{t(&l, \"search.placeholder\")}",
                    value: "{search_query}",
                    oninput: move |e| search_query.set(e.value()),
                    onkeydown: move |e| {
                        if e.key() == Key::Enter {
                            let nav = navigator();
                            nav.push(Route::SearchPage {});
                        }
                    },
                }
            }

            h2 { "{t(&l, \"page.recent_species\")}" }
            match &*species.read() {
                None => rsx! { p { "{t(&l, \"loading\")}" } },
                Some(Err(e)) => rsx! { p { class: "error", "Error: {e}" } },
                Some(Ok(data)) => rsx! {
                    div { class: "card-grid",
                        for s in data.data.iter().take(12) {
                            {
                                let card_common = pick_name(&lang.read(), &s.name_de, &s.name_en, &s.name_scientific);
                                let show_common = if card_common == s.name_scientific { None } else { Some(card_common) };
                                rsx! {
                                    PlantCard {
                                        key: "{s.id}",
                                        slug: s.slug.clone(),
                                        name: s.name_scientific.clone(),
                                        name_common: show_common,
                                        entity_type: "species".to_string(),
                                    }
                                }
                            }
                        }
                    }
                },
            }
        }
    }
}