use dioxus::prelude::*;

use crate::api;
use crate::app::Route;
use crate::components::plant_card::PlantCard;

#[component]
pub fn Home() -> Element {
    let mut search_query = use_signal(|| String::new());
    let species = use_resource(|| async { api::list_species(1, None, None).await });

    rsx! {
        div { class: "page home-page",
            h1 { "HerbAPI" }
            p { class: "subtitle", "Trilingual plant reference database" }

            div { class: "search-bar",
                input {
                    r#type: "text",
                    placeholder: "Search plants...",
                    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 { "Recent Species" }
            match &*species.read() {
                None => rsx! { p { "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) {
                            PlantCard {
                                key: "{s.id}",
                                slug: s.slug.clone(),
                                name: s.name_scientific.clone(),
                                name_common: s.name_en.clone(),
                                entity_type: "species".to_string(),
                            }
                        }
                    }
                },
            }
        }
    }
}