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::{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| {
        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(msg).unwrap_or(false)
}

fn expiry(e: Option<i64>) -> String {
    match e {
        None => "never".into(),
        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(),
        })
    }
}

#[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>"Add a device"</h2>
            <form on:submit=add>
                <label>"Name" <input placeholder="phone" required bind:value=name /></label>
                <button class="primary">"Create token"</button>
            </form>
            {move || {
                new_token
                    .get()
                    .map(|token| {
                        view! {
                            <p>"The token is shown only once. Set up the device with:"</p>
                            <p><code class="copy">{format!("ot use-token {token_url} {token}")}</code></p>
                        }
                    })
            }}
            <p class="hint">"The Android app needs no token. Enter " <code>{url}</code> " in the app and sign in."</p>
            <p class="error">{move || error.get()}</p>
        </section>
        <section>
            <h2>"Devices"</h2>
            {move || {
                devices
                    .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">"No devices yet."</p> }.into_any(),
                        Ok(list) => {
                            view! {
                                <table>
                                    <tr><th>"Name"</th><th>"Added"</th><th>"Last upload"</th><th></th></tr>
                                    {list
                                        .into_iter()
                                        .map(|d| {
                                            view! {
                                                <tr>
                                                    <td>
                                                        {d.name.clone()}
                                                        {d.web.then(|| view! { <div class="hint">"The web app, in any browser"</div> })}
                                                    </td>
                                                    <td>{fmt_time(d.created_at)}</td>
                                                    <td>{d.last_seen_at.map_or("never".into(), ago)}</td>
                                                    <td class="actions"><button on:click=move |_| remove(&d)>"Remove"</button></td>
                                                </tr>
                                            }
                                        })
                                        .collect_view()}
                                </table>
                            }
                                .into_any()
                        }
                    })
            }}
        </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("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>
            "For"
            <select bind:value=duration>
                <option value="0">"until I stop it"</option>
                <option value="3600">"1 hour"</option>
                <option value="28800">"8 hours"</option>
                <option value="86400">"1 day"</option>
                <option value="604800">"1 week"</option>
                <option value="2592000">"1 month"</option>
            </select>
        </label>
        <label>
            "Precision"
            <select bind:value=precision>
                <option value="0">"exact"</option>
                <option value="100">"about 100 m"</option>
                <option value="1000">"about 1 km"</option>
                <option value="10000">"about 10 km"</option>
            </select>
        </label>
        <label>
            "Trail"
            <select bind:value=history>
                <option value="none">"none, current position only"</option>
                <option value="now">"from now on"</option>
                <option value="since">"since a time"</option>
                <option value="all">"full history"</option>
            </select>
        </label>
        <Show when=move || history.get() == "since">
            <label>"Since" <input type="datetime-local" bind:value=since /></label>
        </Show>
        <fieldset>
            <legend>"Devices"</legend>
            <label class="radio">
                <input type="radio" name="share-devices" prop:checked=all_devices on:change=move |_| all_devices.set(true) />
                "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) />
                "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, _) => "all devices".to_string(),
        (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) => "some devices".to_string(),
    };
    let trail = match s.trail_since {
        None => "current position only".to_string(),
        Some(0) => "full trail".to_string(),
        Some(t) => format!("trail since {}", fmt_time(t)),
    };
    let precision = match s.precision_m {
        0 => "exact".to_string(),
        m @ ..1000 => format!("about {m} m"),
        m => 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">"Nobody."</p> }.into_any();
        }
        let mine = devices.get();
        view! {
            <table>
                <tr><th>"User"</th><th>"Shows"</th><th>"Expires"</th><th></th></tr>
                {list
                    .into_iter()
                    .map(|s| {
                        let (label, question) = if outgoing {
                            ("Stop", format!("Stop sharing your location with {}?", s.username))
                        } else {
                            ("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>"Share my location"</h2>
            <form on:submit=submit>
                <label>
                    "With"
                    <input placeholder="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">"Share"</button>
            </form>
            <p class="hint">"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>"I share my location with"</h2>
                                {table(s.outgoing, true)}
                            </section>
                            <section>
                                <h2>"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("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 {
                        "Link created and copied.".into()
                    } else {
                        "Link created.".into()
                    })));
                }
                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>"Create a guest link"</h2>
            <p class="hint">"Anyone with the link sees your location, without an account."</p>
            <form on:submit=create>
                <label>"Name" <input placeholder="for Anna" maxlength="100" bind:value=name /></label>
                <ShareOptionsFields opts devices />
                <label>
                    "Password (optional)"
                    <input type="password" autocomplete="new-password" minlength="8" bind:value=password />
                </label>
                <button class="primary">"Create link"</button>
            </form>
            {status(message)}
        </section>
        <section>
            <h2>"Guest links"</h2>
            {move || {
                links
                    .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">"No links yet."</p> }.into_any(),
                        Ok(list) => {
                            let mine = devices.get();
                            view! {
                                <table>
                                    <tr><th>"Name"</th><th>"Shows"</th><th>"Expires"</th><th></th></tr>
                                    {list
                                        .into_iter()
                                        .map(|l| {
                                            let link = url(&l.token);
                                            let mut shows = describe(&l.settings, Some(&mine));
                                            if l.has_password {
                                                shows.push_str(" · password");
                                            }
                                            view! {
                                                <tr>
                                                    <td>{if l.name.is_empty() { "unnamed".to_string() } 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("Link copied.".into())));
                                                                }
                                                            });
                                                        }>"Copy"</button>
                                                        " "
                                                        <button on:click=move |_| remove(&l)>"Delete"</button>
                                                    </td>
                                                </tr>
                                            }
                                        })
                                        .collect_view()}
                                </table>
                            }
                                .into_any()
                        }
                    })
            }}
        </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("Enter a number of days.".into())));
                    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("Saved.".into())));
                    account.reload();
                }
                Err(e) => message.set(Some(Err(e.to_string()))),
            }
        });
    };

    let server_limit = match max {
        Some(d) => format!("The server keeps points for {d} days. You can choose a shorter time."),
        None => "The server keeps points forever. You can choose a limit.".into(),
    };
    let placeholder = max.map_or("forever".into(), |d| d.to_string());
    view! {
        <section>
            <h2>"Location history"</h2>
            <p class="hint">{server_limit}</p>
            <form on:submit=submit>
                <label>
                    "Keep my points for (days)"
                    <input type="number" min="1" max=max placeholder=placeholder bind:value=days />
                </label>
                <button class="primary">"Save"</button>
            </form>
            <p class="hint">"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("The new passwords do not match.".into())));
            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(
                        "Password saved. Your other sessions are logged out.".into(),
                    )));
                    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("Password removed.".into())));
                    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(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>"Password"</h2>
            <form on:submit=change_password>
                <Show when=has_password>
                    <label>
                        "Current"
                        <input type="password" autocomplete="current-password" required bind:value=old />
                    </label>
                </Show>
                <label>
                    "New"
                    <input type="password" autocomplete="new-password" minlength="8" required bind:value=new />
                </label>
                <label>
                    "Repeat new"
                    <input type="password" autocomplete="new-password" minlength="8" required bind:value=repeat />
                </label>
                <button class="primary">{move || 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
                    >
                        "Remove password"
                    </button>
                    " "
                    <span class="hint">"Needs a passkey, and two-factor sign-in turned off."</span>
                </p>
            </Show>
            {status(pw_message)}
        </section>
        <section>
            <h2>"Passkeys"</h2>
            {move || {
                passkeys
                    .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">"No passkeys yet."</p> }.into_any(),
                        Ok(list) => {
                            view! {
                                <table>
                                    <tr><th>"Name"</th><th>"Added"</th><th>"Last used"</th><th></th></tr>
                                    {list
                                        .into_iter()
                                        .map(|k| {
                                            view! {
                                                <tr>
                                                    <td>{k.name.clone()}</td>
                                                    <td>{fmt_time(k.created_at)}</td>
                                                    <td>{k.last_used_at.map_or("never".into(), ago)}</td>
                                                    <td class="actions"><button on:click=move |_| remove_passkey(&k)>"Remove"</button></td>
                                                </tr>
                                            }
                                        })
                                        .collect_view()}
                                </table>
                            }
                                .into_any()
                        }
                    })
            }}
            <Show
                when=passkey::supported
                fallback=|| view! { <p class="hint">"This browser does not support passkeys."</p> }
            >
                <form on:submit=add_passkey>
                    <label>"Name" <input placeholder="laptop, phone, key" bind:value=key_name /></label>
                    <button class="primary">"Add passkey"</button>
                </form>
            </Show>
            {status(key_message)}
        </section>
        <section>
            <h2>"Sign-in"</h2>
            <label class="radio">
                <input type="radio" name="mode" prop:checked=move || !two_factor() on:change=move |_| set_mode(false) />
                "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)
                />
                "Password and passkey (two-factor)"
            </label>
            <p class="hint">"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(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(&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(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(format!(
                    "{name} is now {}.",
                    if is_admin { "an admin" } else { "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>"Add a user"</h2>
            <form on:submit=create>
                <label>"Username" <input autocomplete="off" required bind:value=username /></label>
                <label>
                    "Password"
                    <input type="password" autocomplete="new-password" minlength="8" required bind:value=password />
                </label>
                <label class="radio"><input type="checkbox" bind:checked=is_admin />"Admin"</label>
                <button class="primary">"Add"</button>
            </form>
            {status(message)}
        </section>
        <section>
            <h2>"Users"</h2>
            {move || {
                users
                    .get()
                    .map(|r| match r {
                        Err(e) => view! { <p class="error">{e.to_string()}</p> }.into_any(),
                        Ok(list) => {
                            view! {
                                <table>
                                    <tr><th>"Username"</th><th>"Role"</th><th>"Created"</th><th></th></tr>
                                    {list
                                        .into_iter()
                                        .map(|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="Role"
                                                            disabled=me
                                                            on:change:target=move |ev| set_role(&u3, ev.target().value() == "admin")
                                                        >
                                                            <option value="user" selected=!u.is_admin>"user"</option>
                                                            <option value="admin" selected=u.is_admin>"admin"</option>
                                                        </select>
                                                    </td>
                                                    <td>{fmt_time(u.created_at)}</td>
                                                    <td class="actions">
                                                        <button on:click=move |_| reset(&u2)>"Reset password"</button>
                                                        " "
                                                        <button disabled=me on:click=move |_| remove(&u)>"Delete"</button>
                                                    </td>
                                                </tr>
                                            }
                                        })
                                        .collect_view()}
                                </table>
                            }
                                .into_any()
                        }
                    })
            }}
        </section>
    }
}