import { createResource, createSignal, For, Show } from "solid-js";
import { api, type TokenInfo } from "./api";
import { ago } from "./live";
import { useSession } from "./session";

/**
 * The only place individual phones are visible.
 *
 * Positions belong to the account, so a token is a credential and nothing else.
 * Listing them with last-seen is what makes a forgotten phone in a drawer — the
 * one that drags the live marker back and forth — visible and revocable.
 */
export default function Settings() {
  const me = useSession().me;
  const [tokens, { refetch }] = createResource(() => api.tokens());
  const [message, setMessage] = createSignal<string | null>(null);
  const now = Math.floor(Date.now() / 1000);

  async function revoke(t: TokenInfo) {
    if (!confirm(`Revoke "${t.name}"? That phone has to log in again.`)) return;
    await api.revokeToken(t.token_id);
    void refetch();
  }

  async function revokeOthers() {
    if (!confirm("Revoke every device token on this account?")) return;
    const { revoked } = await api.revokeOthers();
    setMessage(`${revoked} token(s) revoked`);
    void refetch();
  }

  return (
    <main class="settings">
      <section class="card">
        <h2>account</h2>
        <p class="muted">
          {me.display_name} ({me.username}){me.is_admin ? " · admin" : ""}
        </p>
        <PasswordForm />
      </section>

      <section class="card">
        <h2>devices</h2>
        <Show when={message()}>{(m) => <p class="muted">{m()}</p>}</Show>
        <For each={tokens()} fallback={<p class="muted">no devices logged in</p>}>
          {(t) => (
            <div class="token">
              <div>
                <strong>{t.name}</strong> <span class="muted">{t.platform}</span>
                <div class="muted">
                  {t.last_seen_at ? `seen ${ago(t.last_seen_at, now)} ago` : "never seen"}
                  {t.last_src_ip ? ` · ${t.last_src_ip}` : ""}
                  {t.last_transport ? ` · ${t.last_transport}` : ""}
                  {t.os_api_level ? ` · API ${t.os_api_level}` : ""}
                </div>
              </div>
              <button onClick={() => revoke(t)}>revoke</button>
            </div>
          )}
        </For>
        <button onClick={revokeOthers}>log out all devices</button>
      </section>
    </main>
  );
}

function PasswordForm() {
  const [current, setCurrent] = createSignal("");
  const [next, setNext] = createSignal("");
  const [status, setStatus] = createSignal<string | null>(null);

  async function submit(e: Event) {
    e.preventDefault();
    try {
      await api.changePassword(current(), next());
      // Changing the password revokes every device token, by design.
      setStatus("changed — every device must log in again");
      setCurrent("");
      setNext("");
    } catch (e) {
      setStatus(e instanceof Error ? e.message : String(e));
    }
  }

  return (
    <form class="password" onSubmit={submit}>
      <input type="password" placeholder="current password" autocomplete="current-password" value={current()} onInput={(e) => setCurrent(e.currentTarget.value)} />
      <input type="password" placeholder="new password (10+ characters)" autocomplete="new-password" value={next()} onInput={(e) => setNext(e.currentTarget.value)} />
      <button>change password</button>
      <Show when={status()}>{(s) => <p class="muted">{s()}</p>}</Show>
    </form>
  );
}