use crate::i18n;
use leptos::prelude::*;
use wasm_bindgen_futures::spawn_local;

use crate::api::{self, Me, input_value};
use crate::app::AuthPhase;
use crate::components::logo::Logo;

#[component]
pub fn LoginView(
    set_me: WriteSignal<Option<Me>>,
    set_phase: WriteSignal<AuthPhase>,
) -> impl IntoView {
    let (error, set_error) = signal(String::new());
    let (busy, set_busy) = signal(false);

    let on_submit = move |ev: web_sys::SubmitEvent| {
        ev.prevent_default();
        let name = input_value("login-name");
        let pass = input_value("login-pass");
        if name.trim().is_empty() || pass.is_empty() {
            set_error.set(i18n::t(i18n::k::LOGIN_ERROR).into());
            return;
        }
        set_error.set(String::new());
        set_busy.set(true);
        let name = name.trim().to_string();
        spawn_local(async move {
            match api::login(name, pass).await {
                Ok(_) => match api::me().await {
                    Ok(m) => {
                        // Keep the current hash: deep links (e.g. #/users) survive
                        // the sign-in. A non-admin landing on an admin section is
                        // redirected to the files view by the shell instead.
                        set_me.set(Some(m));
                        set_phase.set(AuthPhase::Authed);
                    }
                    Err(e) => {
                        set_error.set(e.to_string());
                        set_busy.set(false);
                    }
                },
                Err(e) => {
                    set_error.set(e.to_string());
                    set_busy.set(false);
                }
            }
        });
    };

    view! {
        <div class="center-screen">
            <div class="card auth-card">
                <Logo class="auth-logo".to_string()/>
                <h1>"filebrowser-ng"</h1>
                <p class="muted">{i18n::tr(i18n::k::LOGIN_SUBTITLE)}</p>
                <form on:submit=on_submit>
                    <label class="field">
                        <span>{i18n::tr(i18n::k::NAME)}</span>
                        <input
                            id="login-name"
                            type="text"
                            autofocus=true
                            autocomplete="username"
                        />
                    </label>
                    <label class="field">
                        <span>{i18n::tr(i18n::k::PASSWORD)}</span>
                        <input
                            id="login-pass"
                            type="password"
                            autocomplete="current-password"
                        />
                    </label>
                    <p class="error">{move || error.get()}</p>
                    <button class="btn-primary" type="submit" disabled=move || busy.get()>
                        {i18n::tr(i18n::k::SIGN_IN)}
                    </button>
                </form>
            </div>
        </div>
    }
}