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;
use crate::router::{Location, navigate};

#[component]
pub fn SetupView(
    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("setup-name");
        let pass = input_value("setup-pass");
        let confirm = input_value("setup-confirm");
        let name = name.trim();

        if name.is_empty() || name.len() > 64 {
            set_error.set(i18n::t(i18n::k::SETUP_NAME_ERR).into());
            return;
        }
        if pass.len() < 8 {
            set_error.set(i18n::t(i18n::k::PW_SHORT).into());
            return;
        }
        if pass != confirm {
            set_error.set(i18n::t(i18n::k::SETUP_PW_MISMATCH).into());
            return;
        }

        set_error.set(String::new());
        set_busy.set(true);
        let (name, pass) = (name.to_string(), pass);
        spawn_local(async move {
            match api::setup(name, pass).await {
                Ok(_) => match api::me().await {
                    Ok(m) => {
                        navigate(&Location::root());
                        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::SETUP_INTRO)}</p>
                <form on:submit=on_submit>
                    <label class="field">
                        <span>{i18n::tr(i18n::k::NAME)}</span>
                        <input
                            id="setup-name"
                            type="text"
                            autofocus=true
                            autocomplete="username"
                        />
                    </label>
                    <label class="field">
                        <span>{i18n::tr(i18n::k::PASSWORD)}</span>
                        <input
                            id="setup-pass"
                            type="password"
                            autocomplete="new-password"
                        />
                    </label>
                    <label class="field">
                        <span>{i18n::tr(i18n::k::REPEAT_PASSWORD)}</span>
                        <input
                            id="setup-confirm"
                            type="password"
                            autocomplete="new-password"
                        />
                    </label>
                    <p class="error">{move || error.get()}</p>
                    <button class="btn-primary" type="submit" disabled=move || busy.get()>
                        {i18n::tr(i18n::k::CREATE_ADMIN)}
                    </button>
                </form>
            </div>
        </div>
    }
}