//! Pages for the Android app: `#device` inside its WebView, `#pair` in the browser.

use api::{PairBegin, PairCode};
use leptos::prelude::*;
use leptos::task::spawn_local;
use wasm_bindgen::prelude::*;

use crate::i18n::tr;
use crate::{http, map};

#[wasm_bindgen(inline_js = r#"
export function appToken() {
  return window.OtApp ? window.OtApp.token() : null;
}
"#)]
extern "C" {
    #[wasm_bindgen(js_name = appToken)]
    fn app_token() -> Option<String>;
}

/// The map of this device only. The app hands over its token through a JavaScript bridge.
#[component]
pub fn DevicePage() -> impl IntoView {
    match app_token() {
        Some(token) => {
            view! { <main class="device"><map::MapPage source=map::Source::Device(token) /></main> }
                .into_any()
        }
        None => {
            view! { <p class="login">{tr("This page is for the opentracker app.")}</p> }.into_any()
        }
    }
}

/// A query parameter of `#pair?challenge=…&name=…`.
fn hash_param(key: &str) -> Option<String> {
    let hash = window().location().hash().ok()?;
    let query = hash.split_once('?')?.1;
    web_sys::UrlSearchParams::new_with_str(query).ok()?.get(key)
}

/// Confirms a new device for the signed-in user, then hands a one-time code back to the app.
#[component]
pub fn PairPage() -> impl IntoView {
    let challenge = hash_param("challenge");
    let name = RwSignal::new(hash_param("name").unwrap_or_else(|| "Android".into()));
    let error = RwSignal::new(None::<String>);
    let done = RwSignal::new(None::<String>);
    let busy = RwSignal::new(false);
    let has_challenge = challenge.is_some();

    let connect = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        let Some(challenge) = challenge.clone() else {
            return;
        };
        busy.set(true);
        let body = PairBegin {
            challenge,
            name: name.get_untracked(),
        };
        spawn_local(async move {
            match http::post::<PairCode>("/api/devices/pair/begin", &body).await {
                Ok(c) => {
                    let url = format!("opentracker://paired?code={}", c.code);
                    let _ = window().location().assign(&url);
                    done.set(Some(url));
                }
                Err(e) => error.set(Some(e.to_string())),
            }
            busy.set(false);
        });
    };

    view! {
        <form class="login" on:submit=connect>
            <h1>{tr("Connect the app")}</h1>
            {move || match (has_challenge, done.get()) {
                (false, _) => view! { <p class="error">{tr("This link is incomplete. Start again in the app.")}</p> }.into_any(),
                // Browsers may block opening the app without a tap, so the link stays as a fallback.
                (true, Some(url)) => view! {
                    <p>{tr("Done. Return to the app to finish.")}</p>
                    <a class="button primary" href=url>{tr("Open the app")}</a>
                }
                    .into_any(),
                (true, None) => view! {
                    <p>{tr("The opentracker app asks to upload positions to your account as a new device.")}</p>
                    <label>{tr("Device name")} <input required maxlength="100" bind:value=name /></label>
                    <button class="primary" disabled=busy>{tr("Connect")}</button>
                }
                    .into_any(),
            }}
            <p class="error">{move || error.get()}</p>
        </form>
    }
}