use api::{
    Challenge, ChallengeAnswer, ChangePassword, Device, DeviceToken, Link, NewDevice, NewLink,
    NewShare, NewUser, Passkey, ResetPassword, SetRetention, SetRole, SetTwoFactor, Share,
    ShareSettings, Shares, User,
};
use leptos::prelude::*;
use leptos::task::spawn_local;
use wasm_bindgen::prelude::*;

use crate::i18n::tr;
use crate::{Account, ago, fmt_time, http, map, now_secs, passkey};

#[derive(Clone, Copy, PartialEq)]
enum Tab {
    Sharing,
    Links,
    Devices,
    History,
    Security,
    Users,
}

#[component]
pub fn Settings() -> impl IntoView {
    let account = expect_context::<Account>();
    let tab = RwSignal::new(Tab::Sharing);
    let is_admin = move || account.me().is_some_and(|m| m.is_admin);
    let tab_button = move |t: Tab, label: &'static str| {
        let label = tr(label);
        view! { <button class:active=move || tab.get() == t on:click=move |_| tab.set(t)>{label}</button> }
    };
    view! {
        <div class="settings">
            <nav class="tabs">
                {tab_button(Tab::Sharing, "Sharing")}
                {tab_button(Tab::Links, "Guest links")}
                {tab_button(Tab::Devices, "Devices")}
                {tab_button(Tab::History, "History")}
                {tab_button(Tab::Security, "Security")}
                <Show when=is_admin>{tab_button(Tab::Users, "Users")}</Show>
            </nav>
            {move || match tab.get() {
                Tab::Sharing => view! { <SharesSection /> }.into_any(),
                Tab::Links => view! { <Links /> }.into_any(),
                Tab::Devices => view! { <Devices /> }.into_any(),
                Tab::History => view! { <History /> }.into_any(),
                Tab::Security => view! { <Security /> }.into_any(),
                Tab::Users => view! { <Users /> }.into_any(),
            }}
        </div>
    }
}

fn confirm(msg: &str) -> bool {
    window().confirm_with_message(&tr(msg)).unwrap_or(false)
}

fn expiry(e: Option<i64>) -> String {
    match e {
        None => tr("never"),
        Some(t) => fmt_time(t),
    }
}

/// The base URL devices connect to.
fn server_url(account: Account) -> String {
    account
        .me()
        .and_then(|m| m.public_url)
        .unwrap_or_else(|| window().location().origin().unwrap_or_default())
}

/// Shows an Ok message or an Err message.
fn status(message: RwSignal<Option<Result<String, String>>>) -> impl IntoView {
    move || {
        message.get().map(|m| match m {
            Ok(text) => view! { <p>{text}</p> }.into_any(),
            Err(text) => view! { <p class="error">{text}</p> }.into_any(),
        })
    }
}

/// A table with one row per item, an error, or the `empty` hint.
fn table<T, V>(
    items: LocalResource<Result<Vec<T>, http::Error>>,
    empty: &'static str,
    columns: [&'static str; 3],
    row: impl Fn(T) -> V + Copy + Send + Sync + 'static,
) -> impl IntoView
where
    T: Clone + 'static,
    V: IntoView + 'static,
{
    move || {
        items.get().map(|r| match r {
            Err(e) => view! { <p class="error">{e.to_string()}</p> }.into_any(),
            Ok(list) if list.is_empty() => view! { <p class="hint">{tr(empty)}</p> }.into_any(),
            Ok(list) => view! {
                <table>
                    <tr>{columns.map(|c| view! { <th>{tr(c)}</th> })}<th></th></tr>
                    {list.into_iter().map(row).collect_view()}
                </table>
            }
            .into_any(),
        })
    }
}

#[component]
fn Devices() -> impl IntoView {
    let account = expect_context::<Account>();
    let version = RwSignal::new(0);
    let error = RwSignal::new(None::<String>);
    let name = RwSignal::new(String::new());
    let new_token = RwSignal::new(None::<String>);
    let devices = LocalResource::new(move || {
        version.track();
        http::get::<Vec<Device>>("/api/devices")
    });
    let url = server_url(account);

    let add = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        let body = NewDevice {
            name: name.get_untracked(),
        };
        spawn_local(async move {
            match http::post::<DeviceToken>("/api/devices", &body).await {
                Ok(t) => {
                    new_token.set(Some(t.token));
                    name.set(String::new());
                    error.set(None);
                }
                Err(e) => error.set(Some(e.to_string())),
            }
            version.update(|v| *v += 1);
        });
    };

    let remove = move |d: &Device| {
        let question = if d.web {
            "Delete the location history of the web app? It starts again when a browser sends a position.".to_string()
        } else {
            format!(
                "Remove device \"{}\" and delete its location history? It can no longer upload positions.",
                d.name
            )
        };
        if !confirm(&question) {
            return;
        }
        let id = d.id;
        spawn_local(async move {
            match http::delete(&format!("/api/devices/{id}")).await {
                Ok(()) => error.set(None),
                Err(e) => error.set(Some(e.to_string())),
            }
            version.update(|v| *v += 1);
        });
    };

    let token_url = url.clone();
    view! {
        <section>
            <h2>{tr("Add a device")}</h2>
            <form on:submit=add>
                <label>{tr("Name")} <input placeholder=tr("phone") required bind:value=name /></label>
                <button class="primary">{tr("Create token")}</button>
            </form>
            {move || {
                new_token
                    .get()
                    .map(|token| {
                        view! {
                            <p>{tr("The token is shown only once. Set up the device with:")}</p>
                            <p>{tr("Address")} " " <code class="copy">{token_url.clone()}</code></p>
                            <p>{tr("Token")} " " <code class="copy">{token}</code></p>
                        }
                    })
            }}
            <p class="hint">{tr("The Android app needs no token. Enter this address in the app and sign in:")} " " <code>{url}</code></p>
            <p class="error">{move || error.get()}</p>
        </section>
        <section>
            <h2>{tr("Devices")}</h2>
            {table(devices, "No devices yet.", ["Name", "Added", "Last upload"], move |d| view! {
                <tr>
                    <td>
                        {d.name.clone()}
                        {d.web.then(|| view! { <div class="hint">{tr("The web app, in any browser")}</div> })}
                    </td>
                    <td>{fmt_time(d.created_at)}</td>
                    <td>{d.last_seen_at.map_or(tr("never"), ago)}</td>
                    <td class="actions"><button on:click=move |_| remove(&d)>{tr("Remove")}</button></td>
                </tr>
            })}
        </section>
    }
}

/// The form fields that shares and guest links have in common.
#[derive(Clone, Copy)]
struct ShareOptions {
    duration: RwSignal<String>,
    precision: RwSignal<String>,
    all_devices: RwSignal<bool>,
    chosen: RwSignal<Vec<i64>>,
    history: RwSignal<String>,
    since: RwSignal<String>,
}

impl ShareOptions {
    fn new() -> Self {
        let today = format!("{}T00:00", map::input_values(&js_sys::Date::new_0()).0);
        ShareOptions {
            duration: RwSignal::new("0".into()),
            precision: RwSignal::new("0".into()),
            all_devices: RwSignal::new(true),
            chosen: RwSignal::new(Vec::new()),
            history: RwSignal::new("none".into()),
            since: RwSignal::new(today),
        }
    }

    fn expires_at(&self) -> Option<i64> {
        let secs: i64 = self.duration.get_untracked().parse().unwrap_or(0);
        (secs > 0).then(|| now_secs() + secs)
    }

    fn settings(&self) -> Result<ShareSettings, String> {
        let trail_since = match self.history.get_untracked().as_str() {
            "none" => None,
            "now" => Some(now_secs()),
            "since" => Some(
                map::local_time(&self.since.get_untracked())
                    .ok_or_else(|| tr("Pick when the trail starts."))?,
            ),
            _ => Some(0),
        };
        Ok(ShareSettings {
            devices: (!self.all_devices.get_untracked()).then(|| self.chosen.get_untracked()),
            trail_since,
            precision_m: self.precision.get_untracked().parse().unwrap_or(0),
        })
    }
}

#[component]
fn ShareOptionsFields(
    opts: ShareOptions,
    #[prop(into)] devices: Signal<Vec<Device>>,
) -> impl IntoView {
    let ShareOptions {
        duration,
        precision,
        all_devices,
        chosen,
        history,
        since,
    } = opts;
    view! {
        <label>
            {tr("For")}
            <select bind:value=duration>
                <option value="0">{tr("until I stop it")}</option>
                <option value="3600">{tr("1 hour")}</option>
                <option value="28800">{tr("8 hours")}</option>
                <option value="86400">{tr("1 day")}</option>
                <option value="604800">{tr("1 week")}</option>
                <option value="2592000">{tr("1 month")}</option>
            </select>
        </label>
        <label>
            {tr("Precision")}
            <select bind:value=precision>
                <option value="0">{tr("exact")}</option>
                <option value="100">{tr("about 100 m")}</option>
                <option value="1000">{tr("about 1 km")}</option>
                <option value="10000">{tr("about 10 km")}</option>
            </select>
        </label>
        <label>
            {tr("Trail")}
            <select bind:value=history>
                <option value="none">{tr("none, current position only")}</option>
                <option value="now">{tr("from now on")}</option>
                <option value="since">{tr("since a time")}</option>
                <option value="all">{tr("full history")}</option>
            </select>
        </label>
        <Show when=move || history.get() == "since">
            <label>{tr("Since")} <input type="datetime-local" bind:value=since /></label>
        </Show>
        <fieldset>
            <legend>{tr("Devices")}</legend>
            <label class="radio">
                <input type="radio" name="share-devices" prop:checked=all_devices on:change=move |_| all_devices.set(true) />
                {tr("All devices, also ones I add later")}
            </label>
            <label class="radio">
                <input type="radio" name="share-devices" prop:checked=move || !all_devices.get() on:change=move |_| all_devices.set(false) />
                {tr("Only these devices:")}
            </label>
            <div class="device-choice">
                {move || {
                    devices
                        .get()
                        .into_iter()
                        .map(|d| {
                            let id = d.id;
                            view! {
                                <label class="radio">
                                    <input
                                        type="checkbox"
                                        disabled=all_devices
                                        prop:checked=move || chosen.with(|c| c.contains(&id))
                                        on:change:target=move |ev| {
                                            let on = ev.target().checked();
                                            chosen.update(|c| {
                                                c.retain(|x| *x != id);
                                                if on {
                                                    c.push(id);
                                                }
                                            });
                                        }
                                    />
                                    {d.name}
                                </label>
                            }
                        })
                        .collect_view()
                }}
            </div>
        </fieldset>
    }
}

/// A short summary of what a share shows. Device names are known only for the caller's own devices.
fn describe(s: &ShareSettings, mine: Option<&[Device]>) -> String {
    let devices = match (&s.devices, mine) {
        (None, _) => tr("all devices"),
        (Some(ids), Some(mine)) => ids
            .iter()
            .filter_map(|id| mine.iter().find(|d| d.id == *id).map(|d| d.name.clone()))
            .collect::<Vec<_>>()
            .join(", "),
        (Some(_), None) => tr("some devices"),
    };
    let trail = match s.trail_since {
        None => tr("current position only"),
        Some(0) => tr("full trail"),
        Some(t) => tr(&format!("trail since {}", fmt_time(t))),
    };
    let precision = match s.precision_m {
        0 => tr("exact"),
        m @ ..1000 => tr(&format!("about {m} m")),
        m => tr(&format!("about {} km", m / 1000)),
    };
    format!("{devices} · {trail} · {precision}")
}

fn my_devices() -> Signal<Vec<Device>> {
    let devices = LocalResource::new(|| http::get::<Vec<Device>>("/api/devices"));
    Signal::derive(move || devices.get().and_then(Result::ok).unwrap_or_default())
}

#[component]
fn SharesSection() -> impl IntoView {
    let version = RwSignal::new(0);
    let error = RwSignal::new(None::<String>);
    let viewer = RwSignal::new(String::new());
    let opts = ShareOptions::new();
    let usernames = LocalResource::new(|| http::get::<Vec<String>>("/api/usernames"));
    let devices = my_devices();
    let shares = LocalResource::new(move || {
        version.track();
        http::get::<Shares>("/api/shares")
    });

    let submit = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        let settings = match opts.settings() {
            Ok(s) => s,
            Err(e) => return error.set(Some(e)),
        };
        let body = NewShare {
            viewer: viewer.get_untracked(),
            expires_at: opts.expires_at(),
            settings,
        };
        spawn_local(async move {
            match http::post::<Share>("/api/shares", &body).await {
                Ok(_) => {
                    viewer.set(String::new());
                    error.set(None);
                }
                Err(e) => error.set(Some(e.to_string())),
            }
            version.update(|v| *v += 1);
        });
    };

    let remove = move |s: &Share, question: String| {
        if !confirm(&question) {
            return;
        }
        let id = s.id;
        spawn_local(async move {
            if let Err(e) = http::delete(&format!("/api/shares/{id}")).await {
                error.set(Some(e.to_string()));
            }
            version.update(|v| *v += 1);
        });
    };

    let table = move |list: Vec<Share>, outgoing: bool| {
        if list.is_empty() {
            return view! { <p class="hint">{tr("Nobody.")}</p> }.into_any();
        }
        let mine = devices.get();
        view! {
            <table>
                <tr><th>{tr("User")}</th><th>{tr("Shows")}</th><th>{tr("Expires")}</th><th></th></tr>
                {list
                    .into_iter()
                    .map(|s| {
                        let (label, question) = if outgoing {
                            (tr("Stop"), format!("Stop sharing your location with {}?", s.username))
                        } else {
                            (tr("Remove"), format!("Stop seeing the location of {}?", s.username))
                        };
                        view! {
                            <tr>
                                <td>{s.username.clone()}</td>
                                <td>{describe(&s.settings, outgoing.then_some(&mine[..]))}</td>
                                <td>{expiry(s.expires_at)}</td>
                                <td class="actions"><button on:click=move |_| remove(&s, question.clone())>{label}</button></td>
                            </tr>
                        }
                    })
                    .collect_view()}
            </table>
        }
            .into_any()
    };

    view! {
        <section>
            <h2>{tr("Share my location")}</h2>
            <form on:submit=submit>
                <label>
                    {tr("With")}
                    <input placeholder=tr("username") list="usernames" autocomplete="off" required bind:value=viewer />
                </label>
                <datalist id="usernames">
                    {move || {
                        usernames
                            .get()
                            .and_then(Result::ok)
                            .unwrap_or_default()
                            .into_iter()
                            .map(|name| view! { <option value=name></option> })
                            .collect_view()
                    }}
                </datalist>
                <ShareOptionsFields opts devices />
                <button class="primary">{tr("Share")}</button>
            </form>
            <p class="hint">{tr("Sharing again with the same person replaces the settings.")}</p>
            <p class="error">{move || error.get()}</p>
        </section>
        {move || {
            shares
                .get()
                .map(|r| match r {
                    Err(e) => view! { <section><p class="error">{e.to_string()}</p></section> }.into_any(),
                    Ok(s) => {
                        view! {
                            <section>
                                <h2>{tr("I share my location with")}</h2>
                                {table(s.outgoing, true)}
                            </section>
                            <section>
                                <h2>{tr("Shared with me")}</h2>
                                {table(s.incoming, false)}
                            </section>
                        }
                            .into_any()
                    }
                })
        }}
    }
}

#[wasm_bindgen(inline_js = r#"
export function copyText(text) {
  if (!navigator.clipboard) return Promise.resolve(false);
  return navigator.clipboard.writeText(text).then(() => true, () => false);
}
"#)]
extern "C" {
    #[wasm_bindgen(js_name = copyText)]
    async fn copy_text(text: &str) -> JsValue;
}

/// The clipboard needs HTTPS or localhost. Elsewhere the link appears in a prompt to copy by hand.
async fn copy(text: String) -> bool {
    let copied = copy_text(&text).await.as_bool() == Some(true);
    if !copied {
        let _ = window().prompt_with_message_and_default(&tr("Copy this link:"), &text);
    }
    copied
}

#[component]
fn Links() -> impl IntoView {
    let account = expect_context::<Account>();
    let version = RwSignal::new(0);
    let message = RwSignal::new(None::<Result<String, String>>);
    let name = RwSignal::new(String::new());
    let password = RwSignal::new(String::new());
    let opts = ShareOptions::new();
    let devices = my_devices();
    let links = LocalResource::new(move || {
        version.track();
        http::get::<Vec<Link>>("/api/links")
    });
    let base = StoredValue::new(server_url(account));
    let url = move |token: &str| format!("{}/#l={token}", base.get_value());

    let create = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        let settings = match opts.settings() {
            Ok(s) => s,
            Err(e) => return message.set(Some(Err(e))),
        };
        let pw = password.get_untracked();
        let body = NewLink {
            name: name.get_untracked(),
            expires_at: opts.expires_at(),
            settings,
            password: (!pw.is_empty()).then_some(pw),
        };
        spawn_local(async move {
            match http::post::<Link>("/api/links", &body).await {
                Ok(link) => {
                    name.set(String::new());
                    password.set(String::new());
                    let copied = copy(url(&link.token)).await;
                    message.set(Some(Ok(if copied {
                        tr("Link created and copied.")
                    } else {
                        tr("Link created.")
                    })));
                }
                Err(e) => message.set(Some(Err(e.to_string()))),
            }
            version.update(|v| *v += 1);
        });
    };

    let remove = move |l: &Link| {
        if !confirm("Delete this link? Everyone who has it loses access.") {
            return;
        }
        let id = l.id;
        spawn_local(async move {
            if let Err(e) = http::delete(&format!("/api/links/{id}")).await {
                message.set(Some(Err(e.to_string())));
            }
            version.update(|v| *v += 1);
        });
    };

    view! {
        <section>
            <h2>{tr("Create a guest link")}</h2>
            <p class="hint">{tr("Anyone with the link sees your location, without an account.")}</p>
            <form on:submit=create>
                <label>{tr("Name")} <input placeholder=tr("for Anna") maxlength="100" bind:value=name /></label>
                <ShareOptionsFields opts devices />
                <label>
                    {tr("Password (optional)")}
                    <input type="password" autocomplete="new-password" minlength="8" bind:value=password />
                </label>
                <button class="primary">{tr("Create link")}</button>
            </form>
            {status(message)}
        </section>
        <section>
            <h2>{tr("Guest links")}</h2>
            {table(links, "No links yet.", ["Name", "Shows", "Expires"], move |l| {
                let link = url(&l.token);
                let mut shows = devices.with(|mine| describe(&l.settings, Some(mine)));
                if l.has_password {
                    shows = format!("{shows} · {}", tr("password"));
                }
                view! {
                    <tr>
                        <td>{if l.name.is_empty() { tr("unnamed") } else { l.name.clone() }}</td>
                        <td>{shows}</td>
                        <td>{expiry(l.expires_at)}</td>
                        <td class="actions">
                            <button on:click=move |_| {
                                let link = link.clone();
                                spawn_local(async move {
                                    if copy(link).await {
                                        message.set(Some(Ok(tr("Link copied."))));
                                    }
                                });
                            }>{tr("Copy")}</button>
                            " "
                            <button on:click=move |_| remove(&l)>{tr("Delete")}</button>
                        </td>
                    </tr>
                }
            })}
        </section>
    }
}

#[component]
fn History() -> impl IntoView {
    let account = expect_context::<Account>();
    let me = account.me().unwrap();
    let max = me.max_retention_days;
    let days = RwSignal::new(me.retention_days.map(|d| d.to_string()).unwrap_or_default());
    let message = RwSignal::new(None::<Result<String, String>>);

    let submit = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        let text = days.get_untracked();
        let value = match text.trim() {
            "" => None,
            t => match t.parse::<i64>() {
                Ok(d) => Some(d),
                Err(_) => {
                    message.set(Some(Err(tr("Enter a number of days."))));
                    return;
                }
            },
        };
        let shorter = match (value, account.me().and_then(|m| m.retention_days).or(max)) {
            (Some(new), Some(old)) => new < old,
            (Some(_), None) => true,
            _ => false,
        };
        if shorter && !confirm("Points older than this are deleted now. Continue?") {
            return;
        }
        spawn_local(async move {
            match http::put::<()>("/api/me/retention", &SetRetention { days: value }).await {
                Ok(()) => {
                    message.set(Some(Ok(tr("Saved."))));
                    account.reload();
                }
                Err(e) => message.set(Some(Err(e.to_string()))),
            }
        });
    };

    let server_limit = match max {
        Some(d) => tr(&format!(
            "The server keeps points for {d} days. You can choose a shorter time."
        )),
        None => tr("The server keeps points forever. You can choose a limit."),
    };
    let placeholder = max.map_or(tr("forever"), |d| d.to_string());
    view! {
        <section>
            <h2>{tr("Location history")}</h2>
            <p class="hint">{server_limit}</p>
            <form on:submit=submit>
                <label>
                    {tr("Keep my points for (days)")}
                    <input type="number" min="1" max=max placeholder=placeholder bind:value=days />
                </label>
                <button class="primary">{tr("Save")}</button>
            </form>
            <p class="hint">{tr("Leave the field empty to use the server setting.")}</p>
            {status(message)}
        </section>
    }
}

#[component]
fn Security() -> impl IntoView {
    let account = expect_context::<Account>();
    let version = RwSignal::new(0);
    let passkeys = LocalResource::new(move || {
        version.track();
        http::get::<Vec<Passkey>>("/api/passkeys")
    });
    // Credential changes alter what the account allows, so Me is fetched again after each one.
    let changed = move || {
        version.update(|v| *v += 1);
        account.reload();
    };
    let has_password = move || account.me().is_some_and(|m| m.has_password);
    let two_factor = move || account.me().is_some_and(|m| m.two_factor);
    let passkey_count = move || passkeys.get().and_then(|r| r.ok()).map_or(0, |l| l.len());

    let old = RwSignal::new(String::new());
    let new = RwSignal::new(String::new());
    let repeat = RwSignal::new(String::new());
    let pw_message = RwSignal::new(None::<Result<String, String>>);
    let change_password = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        if new.get_untracked() != repeat.get_untracked() {
            pw_message.set(Some(Err(tr("The new passwords do not match."))));
            return;
        }
        let body = ChangePassword {
            old: has_password().then(|| old.get_untracked()),
            new: new.get_untracked(),
        };
        spawn_local(async move {
            match http::post::<()>("/api/me/password", &body).await {
                Ok(()) => {
                    for s in [old, new, repeat] {
                        s.set(String::new());
                    }
                    pw_message.set(Some(Ok(tr(
                        "Password saved. Your other sessions are logged out.",
                    ))));
                    changed();
                }
                Err(e) => pw_message.set(Some(Err(e.to_string()))),
            }
        });
    };
    let remove_password = move |_| {
        if !confirm("Remove your password? You then sign in with a passkey only.") {
            return;
        }
        spawn_local(async move {
            match http::delete("/api/me/password").await {
                Ok(()) => {
                    pw_message.set(Some(Ok(tr("Password removed."))));
                    changed();
                }
                Err(e) => pw_message.set(Some(Err(e.to_string()))),
            }
        });
    };

    let key_name = RwSignal::new(String::new());
    let key_message = RwSignal::new(None::<Result<String, String>>);
    let add_passkey = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        spawn_local(async move {
            let result = async {
                let ch = http::post::<Challenge>("/api/passkeys/register", &())
                    .await
                    .map_err(|e| e.to_string())?;
                let credential = passkey::create(&ch.options).await?;
                let body = ChallengeAnswer {
                    state_id: ch.state_id,
                    credential,
                    name: key_name.get_untracked(),
                };
                http::post::<Passkey>("/api/passkeys/register/finish", &body)
                    .await
                    .map_err(|e| e.to_string())
            }
            .await;
            match result {
                Ok(k) => {
                    key_name.set(String::new());
                    key_message.set(Some(Ok(tr(&format!("Added \"{}\".", k.name)))));
                    changed();
                }
                Err(e) => key_message.set(Some(Err(e))),
            }
        });
    };
    let remove_passkey = move |k: &Passkey| {
        if !confirm(&format!("Remove the passkey \"{}\"?", k.name)) {
            return;
        }
        let id = k.id;
        spawn_local(async move {
            match http::delete(&format!("/api/passkeys/{id}")).await {
                Ok(()) => key_message.set(None),
                Err(e) => key_message.set(Some(Err(e.to_string()))),
            }
            changed();
        });
    };

    let mode_message = RwSignal::new(None::<Result<String, String>>);
    let set_mode = move |enabled: bool| {
        spawn_local(async move {
            match http::put::<()>("/api/me/two-factor", &SetTwoFactor { enabled }).await {
                Ok(()) => mode_message.set(None),
                Err(e) => mode_message.set(Some(Err(e.to_string()))),
            }
            changed();
        });
    };

    view! {
        <section>
            <h2>{tr("Password")}</h2>
            <form on:submit=change_password>
                <Show when=has_password>
                    <label>
                        {tr("Current")}
                        <input type="password" autocomplete="current-password" required bind:value=old />
                    </label>
                </Show>
                <label>
                    {tr("New")}
                    <input type="password" autocomplete="new-password" minlength="8" required bind:value=new />
                </label>
                <label>
                    {tr("Repeat new")}
                    <input type="password" autocomplete="new-password" minlength="8" required bind:value=repeat />
                </label>
                <button class="primary">{move || tr(if has_password() { "Change" } else { "Set password" })}</button>
            </form>
            <Show
                when=has_password
                fallback=|| view! { <p class="hint">"You have no password. You sign in with a passkey."</p> }
            >
                <p>
                    <button
                        disabled=move || passkey_count() == 0 || two_factor()
                        on:click=remove_password
                    >
                        {tr("Remove password")}
                    </button>
                    " "
                    <span class="hint">{tr("Needs a passkey, and two-factor sign-in turned off.")}</span>
                </p>
            </Show>
            {status(pw_message)}
        </section>
        <section>
            <h2>{tr("Passkeys")}</h2>
            {table(passkeys, "No passkeys yet.", ["Name", "Added", "Last used"], move |k| view! {
                <tr>
                    <td>{k.name.clone()}</td>
                    <td>{fmt_time(k.created_at)}</td>
                    <td>{k.last_used_at.map_or(tr("never"), ago)}</td>
                    <td class="actions"><button on:click=move |_| remove_passkey(&k)>{tr("Remove")}</button></td>
                </tr>
            })}
            <Show
                when=passkey::supported
                fallback=|| view! { <p class="hint">"This browser does not support passkeys."</p> }
            >
                <form on:submit=add_passkey>
                    <label>{tr("Name")} <input placeholder=tr("laptop, phone, key") bind:value=key_name /></label>
                    <button class="primary">{tr("Add passkey")}</button>
                </form>
            </Show>
            {status(key_message)}
        </section>
        <section>
            <h2>{tr("Sign-in")}</h2>
            <label class="radio">
                <input type="radio" name="mode" prop:checked=move || !two_factor() on:change=move |_| set_mode(false) />
                {tr("Password or passkey")}
            </label>
            <label class="radio">
                <input
                    type="radio"
                    name="mode"
                    prop:checked=two_factor
                    disabled=move || !has_password() || passkey_count() == 0
                    on:change=move |_| set_mode(true)
                />
                {tr("Password and passkey (two-factor)")}
            </label>
            <p class="hint">{tr("Two-factor sign-in needs a password and at least one passkey.")}</p>
            {status(mode_message)}
        </section>
    }
}

#[component]
fn Users() -> impl IntoView {
    let account = expect_context::<Account>();
    let my_id = account.me().map(|m| m.id);
    let version = RwSignal::new(0);
    let message = RwSignal::new(None::<Result<String, String>>);
    let users = LocalResource::new(move || {
        version.track();
        http::get::<Vec<User>>("/api/users")
    });
    let username = RwSignal::new(String::new());
    let password = RwSignal::new(String::new());
    let is_admin = RwSignal::new(false);

    let create = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        let body = NewUser {
            username: username.get_untracked(),
            password: password.get_untracked(),
            is_admin: is_admin.get_untracked(),
        };
        spawn_local(async move {
            match http::post::<User>("/api/users", &body).await {
                Ok(u) => {
                    username.set(String::new());
                    password.set(String::new());
                    is_admin.set(false);
                    message.set(Some(Ok(tr(&format!("Created {}.", u.username)))));
                }
                Err(e) => message.set(Some(Err(e.to_string()))),
            }
            version.update(|v| *v += 1);
        });
    };

    let reset = move |u: &User| {
        let prompt = format!(
            "New password for {}. This also removes their passkeys, disconnects their devices, turns off two-factor sign-in and logs them out.",
            u.username
        );
        let Ok(Some(password)) = window().prompt_with_message(&tr(&prompt)) else {
            return;
        };
        let (id, name) = (u.id, u.username.clone());
        spawn_local(async move {
            match http::post::<()>(
                &format!("/api/users/{id}/password"),
                &ResetPassword { password },
            )
            .await
            {
                Ok(()) => message.set(Some(Ok(tr(&format!("Password reset for {name}."))))),
                Err(e) => message.set(Some(Err(e.to_string()))),
            }
        });
    };

    let set_role = move |u: &User, is_admin: bool| {
        let (id, name) = (u.id, u.username.clone());
        spawn_local(async move {
            match http::put::<()>(&format!("/api/users/{id}/role"), &SetRole { is_admin }).await {
                Ok(()) => message.set(Some(Ok(tr(&if is_admin {
                    format!("{name} is now an admin.")
                } else {
                    format!("{name} is now a user.")
                })))),
                Err(e) => message.set(Some(Err(e.to_string()))),
            }
            version.update(|v| *v += 1);
        });
    };

    let remove = move |u: &User| {
        if !confirm(&format!("Delete {} and all their data?", u.username)) {
            return;
        }
        let id = u.id;
        spawn_local(async move {
            if let Err(e) = http::delete(&format!("/api/users/{id}")).await {
                message.set(Some(Err(e.to_string())));
            }
            version.update(|v| *v += 1);
        });
    };

    view! {
        <section>
            <h2>{tr("Add a user")}</h2>
            <form on:submit=create>
                <label>{tr("Username")} <input autocomplete="off" required bind:value=username /></label>
                <label>
                    {tr("Password")}
                    <input type="password" autocomplete="new-password" minlength="8" required bind:value=password />
                </label>
                <label class="radio"><input type="checkbox" bind:checked=is_admin />{tr("Admin")}</label>
                <button class="primary">{tr("Add")}</button>
            </form>
            {status(message)}
        </section>
        <section>
            <h2>{tr("Users")}</h2>
            // The list always contains the admin who views it.
            {table(users, "", ["Username", "Role", "Created"], move |u| {
                let me = Some(u.id) == my_id;
                let u2 = u.clone();
                let u3 = u.clone();
                view! {
                    <tr>
                        <td>{u.username.clone()}</td>
                        <td>
                            <select
                                aria-label=tr("Role")
                                disabled=me
                                on:change:target=move |ev| set_role(&u3, ev.target().value() == "admin")
                            >
                                <option value="user" selected=!u.is_admin>{tr("user")}</option>
                                <option value="admin" selected=u.is_admin>{tr("admin")}</option>
                            </select>
                        </td>
                        <td>{fmt_time(u.created_at)}</td>
                        <td class="actions">
                            <button on:click=move |_| reset(&u2)>{tr("Reset password")}</button>
                            " "
                            <button disabled=me on:click=move |_| remove(&u)>{tr("Delete")}</button>
                        </td>
                    </tr>
                }
            })}
        </section>
    }
}