import { createResource, createSignal, For, Show } from "solid-js";
import { api, type ShareInfo, type TokenInfo } from "./api";
import { ago, until } 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>

      <Sharing />
    </main>
  );
}

const PRECISIONS = [
  { m: 0, label: "exact" },
  { m: 100, label: "100 m" },
  { m: 500, label: "500 m" },
  { m: 1000, label: "1 km" },
  { m: 5000, label: "5 km" },
];

const EXPIRIES = [
  { s: null, label: "never" },
  { s: 3600, label: "1 hour" },
  { s: 8 * 3600, label: "8 hours" },
  { s: 24 * 3600, label: "24 hours" },
  { s: 7 * 86400, label: "7 days" },
];

function precisionWords(m: number): string {
  if (m === 0) return "exact";
  return m < 1000 ? `rounded to ${m} m` : `rounded to ${m / 1000} km`;
}

/**
 * Outgoing shares: who can see this account, and how much.
 *
 * The whole grant is on one row because the three settings only mean anything
 * together — "bob, live position only, rounded to 1 km" is the sentence a user
 * has to be able to check at a glance before trusting it.
 */
function Sharing() {
  const [shares, { refetch }] = createResource(() => api.shares());
  const [username, setUsername] = createSignal("");
  const [trailVisible, setTrailVisible] = createSignal(true);
  const [precision, setPrecision] = createSignal(0);
  const [expiresIn, setExpiresIn] = createSignal<number | null>(null);
  const [error, setError] = createSignal<string | null>(null);
  const now = Math.floor(Date.now() / 1000);

  async function create(e: Event) {
    e.preventDefault();
    setError(null);
    try {
      await api.createShare({
        username: username(),
        trail_visible: trailVisible(),
        precision_m: precision(),
        expires_in_s: expiresIn(),
      });
      setUsername("");
      setTrailVisible(true);
      setPrecision(0);
      setExpiresIn(null);
      void refetch();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  }

  async function revoke(sh: ShareInfo) {
    if (!confirm(`Stop sharing with ${sh.viewer_display_name}?`)) return;
    await api.revokeShare(sh.id);
    void refetch();
  }

  return (
    <section class="card">
      <h2>sharing</h2>
      <For each={shares()} fallback={<p class="muted">you are not sharing with anyone</p>}>
        {(sh) => (
          <div class="share">
            <div>
              <strong>{sh.viewer_display_name}</strong> <span class="muted">{sh.viewer_username}</span>
              <div class="muted">
                {sh.trail_visible ? "trail visible" : "live position only"}
                {` · ${precisionWords(sh.precision_m)}`}
                {sh.expires_at === null ? "" : ` · expires in ${until(sh.expires_at, now)}`}
              </div>
            </div>
            <button onClick={() => revoke(sh)}>stop</button>
          </div>
        )}
      </For>

      <form class="share-form" onSubmit={create}>
        <input placeholder="username to share with" autocomplete="off" value={username()} onInput={(e) => setUsername(e.currentTarget.value)} />
        <label>
          <input type="checkbox" checked={trailVisible()} onChange={(e) => setTrailVisible(e.currentTarget.checked)} />
          show my trail, not just where I am now
        </label>
        <label>
          precision
          <select value={precision()} onChange={(e) => setPrecision(Number(e.currentTarget.value))}>
            <For each={PRECISIONS}>{(p) => <option value={p.m}>{p.label}</option>}</For>
          </select>
        </label>
        <p class="muted">precision blurs your position before they see it, so they get the area and not the address.</p>
        <label>
          expires
          {/* A select cannot produce an out-of-range value, so the server's 400
              for a bad precision or expiry is unreachable from this form. */}
          <select value={String(expiresIn())} onChange={(e) => setExpiresIn(e.currentTarget.value === "null" ? null : Number(e.currentTarget.value))}>
            <For each={EXPIRIES}>{(x) => <option value={String(x.s)}>{x.label}</option>}</For>
          </select>
        </label>
        <Show when={error()}>{(msg) => <p class="error">{msg()}</p>}</Show>
        <button>share</button>
      </form>
    </section>
  );
}

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>
  );
}