//! Global leaderboard page.
use wasm_bindgen_futures::spawn_local;
use sycamore::prelude::*;

use crate::api;
use crate::components::toast::toast;
use crate::model::LeaderboardPage;

#[component]
pub fn LeaderboardPage() -> View {
    let page = create_signal(Option::<LeaderboardPage>::None);
    let error = create_signal(Option::<String>::None);

    spawn_local(async move {
        match api::leaderboard().await {
            Ok(p) => page.set(Some(p)),
            Err(e) => error.set(Some(e)),
        }
    });

    view! {
        div(class="page") {
            nav(class="top-nav") {
                a(href="/") { "← Lobby" }
                a(href="/history") { "My matches" }
            }
            h1 { "Leaderboard" }
            (toast(error))
            (move || match page.get_clone() {
                None => view! { p(class="status") { "Loading…" } },
                Some(p) => {
                    let rows = p
                        .results
                        .iter()
                        .cloned()
                        .enumerate()
                        .map(|(i, e)| {
                            view! {
                                tr {
                                    td { (i + 1) }
                                    td { (e.display_name.clone()) }
                                    td { (e.wins) }
                                    td { (e.matches) }
                                    td { (e.points) }
                                }
                            }
                        })
                        .collect::<Vec<_>>();
                    view! {
                        table(class="matches") {
                            thead {
                                tr {
                                    th { "#" }
                                    th { "Player" }
                                    th { "Wins" }
                                    th { "Matches" }
                                    th { "Points" }
                                }
                            }
                            tbody { (rows) }
                        }
                    }
                }
            })
        }
    }
}