mod app;
mod guest;
mod http;
mod locate;
mod map;
mod passkey;
mod settings;

use api::{Challenge, ChallengeAnswer, Credentials, Login, LoginResult, Me, SetupStatus};
use leptos::prelude::*;
use leptos::task::spawn_local;
use wasm_bindgen::JsValue;

fn main() {
    console_error_panic_hook::set_once();
    leptos::mount::mount_to_body(App);
}

#[derive(Clone, PartialEq)]
enum Session {
    Loading,
    Setup,
    LoggedOut,
    LoggedIn(Me),
}

/// The signed-in user, shared through context. `reload` fetches it again after a change.
#[derive(Clone, Copy)]
pub struct Account {
    session: RwSignal<Session>,
}

impl Account {
    pub fn me(&self) -> Option<Me> {
        match self.session.get() {
            Session::LoggedIn(me) => Some(me),
            _ => None,
        }
    }

    pub fn reload(self) {
        spawn_local(async move {
            let next = match http::get::<Me>("/api/me").await {
                Ok(me) => Session::LoggedIn(me),
                Err(_) => match http::get::<SetupStatus>("/api/setup").await {
                    Ok(s) if s.needed => Session::Setup,
                    _ => Session::LoggedOut,
                },
            };
            self.session.set(next);
        });
    }
}

#[derive(Clone, Copy, PartialEq)]
enum Page {
    Loading,
    Setup,
    Login,
    Main,
}

#[component]
fn App() -> impl IntoView {
    let hash = window().location().hash().unwrap_or_default();
    if let Some(token) = hash.strip_prefix("#l=") {
        return view! { <guest::GuestPage token=token.to_owned() /> }.into_any();
    }
    if hash == "#device" {
        return view! { <app::DevicePage /> }.into_any();
    }
    view! { <AccountApp pair=hash.starts_with("#pair") /> }.into_any()
}

/// `pair` shows the app pairing page instead of the main UI after sign-in.
#[component]
fn AccountApp(pair: bool) -> impl IntoView {
    let account = Account {
        session: RwSignal::new(Session::Loading),
    };
    provide_context(account);
    account.reload();
    // Only a change of state swaps the page. A reloaded Me must not reset the open tab.
    let page = Memo::new(move |_| match account.session.get() {
        Session::Loading => Page::Loading,
        Session::Setup => Page::Setup,
        Session::LoggedOut => Page::Login,
        Session::LoggedIn(_) => Page::Main,
    });
    move || match page.get() {
        Page::Loading => ().into_any(),
        Page::Setup => view! { <SetupForm /> }.into_any(),
        Page::Login => view! { <LoginForm /> }.into_any(),
        Page::Main if pair => view! { <app::PairPage /> }.into_any(),
        Page::Main => view! { <Shell /> }.into_any(),
    }
}

#[component]
fn SetupForm() -> impl IntoView {
    let account = expect_context::<Account>();
    let username = RwSignal::new(String::new());
    let password = RwSignal::new(String::new());
    let repeat = RwSignal::new(String::new());
    let error = RwSignal::new(None::<String>);

    let submit = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        if password.get_untracked() != repeat.get_untracked() {
            error.set(Some("The passwords do not match.".into()));
            return;
        }
        let body = Credentials {
            username: username.get_untracked(),
            password: password.get_untracked(),
        };
        spawn_local(async move {
            match http::post::<LoginResult>("/api/setup", &body).await {
                Ok(_) => account.reload(),
                Err(e) => error.set(Some(e.to_string())),
            }
        });
    };

    view! {
        <form class="login" on:submit=submit>
            <h1>"opentracker"</h1>
            <p>"Welcome. Create the admin account to finish the setup."</p>
            <label>"Username" <input autocomplete="username" required bind:value=username /></label>
            <label>
                "Password"
                <input type="password" autocomplete="new-password" minlength="8" required bind:value=password />
            </label>
            <label>
                "Repeat password"
                <input type="password" autocomplete="new-password" minlength="8" required bind:value=repeat />
            </label>
            <button class="primary">"Create admin account"</button>
            <p class="error">{move || error.get()}</p>
        </form>
    }
}

/// Answers a passkey challenge in the browser and sends the answer to the server.
async fn answer(challenge: Challenge) -> Result<LoginResult, String> {
    let credential = passkey::get(&challenge.options).await?;
    let body = ChallengeAnswer {
        state_id: challenge.state_id,
        credential,
        name: String::new(),
    };
    http::post::<LoginResult>("/api/passkey/login/finish", &body)
        .await
        .map_err(|e| e.to_string())
}

#[component]
fn LoginForm() -> impl IntoView {
    let account = expect_context::<Account>();
    let username = RwSignal::new(String::new());
    let password = RwSignal::new(String::new());
    let error = RwSignal::new(None::<String>);
    let busy = RwSignal::new(false);

    // Follows a sign-in step to its end: a session, or a passkey prompt after the password.
    let handle = move |result: Result<LoginResult, String>| {
        spawn_local(async move {
            let mut result = result;
            if let Ok(LoginResult {
                passkey_challenge: Some(ch),
                ..
            }) = result
            {
                result = answer(ch).await;
            }
            match result {
                Ok(r) if r.ok => account.reload(),
                Ok(_) => error.set(Some("Sign-in failed.".into())),
                Err(e) => error.set(Some(e)),
            }
            busy.set(false);
        });
    };

    let submit = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        busy.set(true);
        let body = Login {
            username: username.get_untracked(),
            password: password.get_untracked(),
        };
        spawn_local(async move {
            let result = http::post::<LoginResult>("/api/login", &body)
                .await
                .map_err(|e| match e.status {
                    401 => "Wrong username or password.".to_string(),
                    429 => "Too many failed attempts. Try again in 15 minutes.".to_string(),
                    _ => e.to_string(),
                });
            handle(result);
        });
    };

    let with_passkey = move |_| {
        busy.set(true);
        spawn_local(async move {
            let result = match http::post::<Challenge>("/api/passkey/login", &()).await {
                Ok(ch) => answer(ch).await,
                Err(e) => Err(e.to_string()),
            };
            handle(result);
        });
    };

    view! {
        <form class="login" on:submit=submit>
            <h1>"opentracker"</h1>
            <label>"Username" <input autocomplete="username webauthn" required bind:value=username /></label>
            <label>
                "Password"
                <input type="password" autocomplete="current-password" required bind:value=password />
            </label>
            <button class="primary" disabled=busy>"Log in"</button>
            <Show when=passkey::supported>
                <button type="button" disabled=busy on:click=with_passkey>"Sign in with a passkey"</button>
            </Show>
            <p class="error">{move || error.get()}</p>
        </form>
    }
}

#[derive(Clone, Copy, PartialEq)]
enum Tab {
    Map,
    Settings,
}

#[component]
fn Shell() -> impl IntoView {
    let account = expect_context::<Account>();
    locate::Locator::provide();
    let tab = RwSignal::new(Tab::Map);
    let logout = move |_| {
        spawn_local(async move {
            let _ = http::post::<()>("/api/logout", &()).await;
            account.reload();
        })
    };
    view! {
        <header>
            <img class="brand" src="/icon.svg" alt="opentracker" width="28" height="28" />
            <nav>
                <button class:active=move || tab.get() == Tab::Map on:click=move |_| tab.set(Tab::Map)>
                    "Map"
                </button>
                <button
                    class:active=move || tab.get() == Tab::Settings
                    on:click=move |_| tab.set(Tab::Settings)
                >
                    "Settings"
                </button>
            </nav>
            <ThemeToggle />
            <span class="user">{move || account.me().map(|m| m.username)}</span>
            <button on:click=logout>"Log out"</button>
        </header>
        <main>
            {move || match tab.get() {
                Tab::Map => view! { <map::MapPage /> }.into_any(),
                Tab::Settings => view! { <settings::Settings /> }.into_any(),
            }}
        </main>
    }
}

/// Auto follows the system setting. The choice lives in localStorage, where index.html reads it at load.
#[component]
pub fn ThemeToggle() -> impl IntoView {
    let storage = || window().local_storage().ok().flatten();
    let initial = storage()
        .and_then(|s| s.get_item("theme").ok().flatten())
        .unwrap_or_default();
    let theme = RwSignal::new(initial);
    let choose = move |value: &'static str| {
        theme.set(value.to_owned());
        let root = document().document_element().unwrap();
        let _ = match value {
            "" => root.remove_attribute("data-theme"),
            v => root.set_attribute("data-theme", v),
        };
        if let Some(s) = storage() {
            let _ = match value {
                "" => s.remove_item("theme"),
                v => s.set_item("theme", v),
            };
        }
    };
    // Each click moves to the next theme: auto, light, dark, auto.
    let next = move || match theme.get().as_str() {
        "" => "light",
        "light" => "dark",
        _ => "",
    };
    let label = move || match theme.get().as_str() {
        "light" => "light",
        "dark" => "dark",
        _ => "auto",
    };
    view! {
        <button
            class="theme"
            title=move || format!("Theme: {}", label())
            aria-label=move || format!("Theme: {}. Click to change.", label())
            on:click=move |_| choose(next())
            inner_html=move || {
                icon(match theme.get().as_str() {
                    "light" => SUN,
                    "dark" => MOON,
                    _ => AUTO,
                })
            }
        ></button>
    }
}

const SUN: &str = r#"<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>"#;
const MOON: &str = r#"<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>"#;
/// A half-filled circle: the system decides.
const AUTO: &str =
    r#"<circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor"/>"#;

fn icon(body: &str) -> String {
    format!(
        r#"<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">{body}</svg>"#
    )
}

pub fn now_secs() -> i64 {
    (js_sys::Date::now() / 1000.0) as i64
}

pub fn fmt_time(ts: i64) -> String {
    js_sys::Date::new(&JsValue::from_f64(ts as f64 * 1000.0))
        .to_locale_string("default", &JsValue::UNDEFINED)
        .into()
}

pub fn ago(ts: i64) -> String {
    match (now_secs() - ts).max(0) {
        d @ 0..60 => format!("{d} s ago"),
        d @ 60..3600 => format!("{} min ago", d / 60),
        d @ 3600..86400 => format!("{} h ago", d / 3600),
        _ => fmt_time(ts),
    }
}