use yew::prelude::*;
use yew_router::prelude::*;

use crate::api;
use crate::pages::Route;
use crate::types::ArtistListItem;

#[function_component(LibraryPage)]
pub fn library_page() -> Html {
    let artists = use_state(|| None::<Vec<ArtistListItem>>);
    let error = use_state(|| None::<String>);

    let fetch_artists = {
        let artists = artists.clone();
        let error = error.clone();
        Callback::from(move |_: ()| {
            let artists = artists.clone();
            let error = error.clone();
            wasm_bindgen_futures::spawn_local(async move {
                match api::list_artists(200, 0).await {
                    Ok(a) => artists.set(Some(a)),
                    Err(e) => error.set(Some(e.0)),
                }
            });
        })
    };

    {
        let fetch = fetch_artists.clone();
        use_effect_with((), move |_| {
            fetch.emit(());
        });
    }

    if let Some(ref err) = *error {
        return html! { <div class="error">{ format!("Error: {err}") }</div> };
    }

    let Some(ref artists) = *artists else {
        return html! { <p class="loading">{ "Loading..." }</p> };
    };

    html! {
        <div>
            <div class="page-header">
                <h2>{ "Library" }</h2>
                <p>{ format!("{} artists", artists.len()) }</p>
            </div>

            if artists.is_empty() {
                <p class="text-muted">{ "No artists in library. Use Search to add some!" }</p>
            } else {
                <table>
                    <thead>
                        <tr>
                            <th>{ "Name" }</th>
                            <th>{ "Monitored" }</th>
                            <th>{ "Owned" }</th>
                            <th>{ "Watched" }</th>
                            <th>{ "Tracks" }</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        { for artists.iter().map(|a| {
                            let artist_id = a.id;
                            let error = error.clone();
                            let fetch = fetch_artists.clone();
                            let on_remove = Callback::from(move |_: MouseEvent| {
                                let error = error.clone();
                                let fetch = fetch.clone();
                                wasm_bindgen_futures::spawn_local(async move {
                                    match api::delete_artist(artist_id).await {
                                        Ok(_) => fetch.emit(()),
                                        Err(e) => error.set(Some(e.0)),
                                    }
                                });
                            });
                            html! {
                            <tr>
                                <td>
                                    <Link<Route> to={Route::Artist { id: a.id.to_string() }}>
                                        { &a.name }
                                    </Link<Route>>
                                </td>
                                <td style="text-align: center;">
                                    if a.monitored {
                                        <span style="color: var(--success);" title="Monitored">{ "\u{2713}" }</span>
                                    }
                                </td>
                                if a.enriched {
                                    <td>
                                        <span class="text-sm" style={
                                            if a.total_owned >= a.total_watched && a.total_watched > 0 { "color: var(--success);" }
                                            else if a.total_owned > 0 { "color: var(--warning);" }
                                            else { "color: var(--text-muted);" }
                                        }>
                                            { format!("{}/{}", a.total_owned, a.total_watched) }
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-sm" style={
                                            if a.total_watched > 0 { "color: var(--accent);" }
                                            else { "color: var(--text-muted);" }
                                        }>
                                            { format!("{}/{}", a.total_watched, a.total_items) }
                                        </span>
                                    </td>
                                } else {
                                    <td colspan="2" class="text-sm text-muted loading">
                                        { "Awaiting artist enrichment..." }
                                    </td>
                                }
                                <td class="text-muted text-sm">
                                    if a.enriched && a.total_items > 0 {
                                        { a.total_items }
                                    }
                                </td>
                                <td>
                                    <button class="btn btn-sm btn-danger" onclick={on_remove}>
                                        { "Remove" }
                                    </button>
                                </td>
                            </tr>
                            }
                        })}
                    </tbody>
                </table>
            }
        </div>
    }
}