import { createEffect, createSignal, onCleanup, onMount, Show } from "solid-js";
import { api, joinedSpaces, joinSpace, type Config, type InviteInfo, type Me, type SpaceMembership } from "./api";
import { theme, toggleTheme } from "./theme";
import { SpacePage } from "./SpacePage";

type Route =
  | { kind: "home" }
  | { kind: "space"; uri: string }
  | { kind: "join"; space: string; invite: string };

/** Hash routes: #/ , #/s/<space-uri> , #/join/<space-uri>/<invite-uri> (both encoded). */
function parseRoute(hash: string): Route {
  const h = hash.replace(/^#/, "");
  if (h.startsWith("/s/")) return { kind: "space", uri: decodeURIComponent(h.slice(3)) };
  if (h.startsWith("/join/")) {
    const [space, invite] = h.slice(6).split("/").map(decodeURIComponent);
    if (space && invite) return { kind: "join", space, invite };
  }
  return { kind: "home" };
}

function spaceName(uri: string): string {
  return uri.split("/").pop() ?? uri;
}

export function App() {
  const [me, setMe] = createSignal<Me | null>(null);
  const [booted, setBooted] = createSignal(false);
  const [spaces, setSpaces] = createSignal<SpaceMembership[]>([]);
  const [route, setRoute] = createSignal<Route>(parseRoute(location.hash));
  const [menuOpen, setMenuOpen] = createSignal(false);

  const onHash = () => setRoute(parseRoute(location.hash));
  onMount(() => window.addEventListener("hashchange", onHash));
  onCleanup(() => window.removeEventListener("hashchange", onHash));

  // Server is the source of truth (membership lives in zds); URIs
  // joined via links or pasted before survive via localStorage merge.
  const loadSpaces = async () => {
    const mine = (await api.mySpaces()).spaces;
    const local = joinedSpaces()
      .filter((uri) => !mine.some((m) => m.uri === uri))
      .map((uri) => ({ uri, isOwner: false }));
    setSpaces([...mine, ...local]);
  };

  onMount(async () => {
    try {
      setMe(await api.me());
      await loadSpaces();
    } catch {
      // not logged in
    }
    setBooted(true);
  });

  const activeUri = (): string | null => {
    const r = route();
    if (r.kind === "space") return r.uri;
    return spaces()[0]?.uri ?? null;
  };

  // Display rule: the owner's name wins, the skey (last URI segment) is
  // the fallback everywhere a space is labelled.
  const activeName = (): string => {
    const uri = activeUri();
    if (!uri) return "linji";
    return spaces().find((s) => s.uri === uri)?.name ?? spaceName(uri);
  };

  return (
    <Show when={booted()}>
      <Show
        when={me()}
        fallback={<Landing route={route()} onLogin={(m) => { setMe(m); void loadSpaces(); }} />}
      >
        {(m) => (
          <Show
            when={route().kind === "join"}
            fallback={
              <div class="shell">
                <Topbar
                  spaceName={activeName()}
                  onMenu={() => document.getElementById("sidebar")?.classList.add("open")}
                />
                <div
                  class="sidebar-scrim"
                  onClick={() => document.getElementById("sidebar")?.classList.remove("open")}
                />
                <Sidebar
                  me={m()}
                  spaces={spaces()}
                  active={activeUri()}
                  onSelect={(uri) => {
                    location.hash = `#/s/${encodeURIComponent(uri)}`;
                    document.getElementById("sidebar")?.classList.remove("open");
                  }}
                  onSpacesChanged={loadSpaces}
                  onOpenMenu={() => setMenuOpen(true)}
                />
                <Show
                  when={activeUri()}
                  fallback={
                    <main class="empty">
                      <div class="empty-card">
                        <p>No spaces yet.</p>
                        <p>Create one with <strong>Add space</strong>, or open an invite link from a friend.</p>
                      </div>
                    </main>
                  }
                >
                  {(uri) => (
                    <SpacePage
                      space={uri()}
                      meDid={m().did}
                      owner={spaces().find((s) => s.uri === uri())?.isOwner ?? false}
                      name={spaces().find((s) => s.uri === uri())?.name ?? null}
                      onRenamed={loadSpaces}
                    />
                  )}
                </Show>
                <AccountMenu me={m()} open={menuOpen()} onClose={() => setMenuOpen(false)} />
              </div>
            }
          >
            <JoinScreen
              route={route() as { kind: "join"; space: string; invite: string }}
              me={m()}
              onJoined={async (space) => {
                joinSpace(space);
                await loadSpaces();
                location.hash = `#/s/${encodeURIComponent(space)}`;
              }}
            />
          </Show>
        )}
      </Show>
    </Show>
  );
}

function Topbar(props: { spaceName: string; onMenu: () => void }) {
  return (
    <div class="topbar">
      <button class="ghost" aria-label="Menu" onClick={props.onMenu}>☰</button>
      <span class="space-name">{props.spaceName}</span>
    </div>
  );
}

function Sidebar(props: {
  me: Me;
  spaces: SpaceMembership[];
  active: string | null;
  onSelect: (uri: string) => void;
  onSpacesChanged: () => Promise<void>;
  onOpenMenu: () => void;
}) {
  const [addOpen, setAddOpen] = createSignal(false);
  return (
    <aside class="sidebar" id="sidebar">
      <div class="who">
        <span class="handle" title={props.me.handle}>{props.me.handle}</span>
      </div>
      <div class="space-list">
        {props.spaces.map((s) => (
          <button
            classList={{ space: true, active: props.active === s.uri }}
            onClick={() => props.onSelect(s.uri)}
            title={s.uri}
          >
            <span class="name">{s.name ?? spaceName(s.uri)}</span>
            {s.isOwner ? <span class="star">★</span> : ""}
          </button>
        ))}
      </div>
      <button class="add-space" onClick={() => setAddOpen(true)}>＋ Add space</button>
      <div class="sidebar-footer">
        <button class="ghost" onClick={props.onOpenMenu}>Account…</button>
      </div>
      <AddSpaceDialog open={addOpen()} onClose={() => setAddOpen(false)} onCreated={props.onSpacesChanged} onSelect={props.onSelect} />
    </aside>
  );
}

/** Create a space, redeem an invite link, or (advanced) open a space URI. */
function AddSpaceDialog(props: {
  open: boolean;
  onClose: () => void;
  onCreated: () => Promise<void>;
  onSelect: (uri: string) => void;
}) {
  let dialog!: HTMLDialogElement;
  const [name, setName] = createSignal("");
  const [link, setLink] = createSignal("");
  const [advanced, setAdvanced] = createSignal(false);
  const [uri, setUri] = createSignal("");
  const [error, setError] = createSignal("");
  const [busy, setBusy] = createSignal(false);

  // Native <dialog> is not reactive; drive it from the open prop.
  createEffect(() => {
    if (!dialog) return;
    if (props.open && !dialog.open) dialog.showModal();
    if (!props.open && dialog.open) dialog.close();
  });
  const close = () => dialog.close();

  const create = async () => {
    const skey = name().trim();
    if (!skey) return;
    setBusy(true);
    setError("");
    try {
      const { uri } = await api.createSpace(skey);
      await props.onCreated();
      props.onSelect(uri);
      setName("");
      close();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not create the space");
    }
    setBusy(false);
  };

  const redeemLink = () => {
    const text = link().trim();
    // Accept a full linji invite URL (#/join/<space>/<invite>) or the two
    // raw at:// URIs separated by whitespace.
    try {
      let m = text.match(/#\/join\/([^/]+)\/([^/?#]+)/);
      if (m) {
        location.hash = `#/join/${m[1]}/${m[2]}`;
        close();
        return;
      }
      const parts = text.split(/\s+/);
      if (parts.length === 2 && parts.every((p) => p.startsWith("at://"))) {
        location.hash = `#/join/${encodeURIComponent(parts[0])}/${encodeURIComponent(parts[1])}`;
        close();
        return;
      }
      setError("That doesn't look like an invite link");
    } catch {
      setError("That doesn't look like an invite link");
    }
  };

  const openUri = async () => {
    const u = uri().trim();
    if (!u.startsWith("at://")) return;
    joinSpace(u);
    await props.onCreated();
    props.onSelect(u);
    setUri("");
    close();
  };

  return (
    <dialog ref={dialog} onClose={props.onClose} onClick={(e) => { if (e.target === dialog) props.onClose(); }}>
      <h3>Add space</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          void create();
        }}
      >
        <input placeholder="New space name" value={name()} onInput={(e) => setName(e.currentTarget.value)} />
        <div class="row">
          <button type="submit" disabled={busy() || !name().trim()}>Create</button>
        </div>
      </form>
      <hr />
      <form
        onSubmit={(e) => {
          e.preventDefault();
          redeemLink();
        }}
      >
        <p class="muted">Have an invite link? Paste it here.</p>
        <input placeholder="https://app0.linji.at/#/join/…" value={link()} onInput={(e) => setLink(e.currentTarget.value)} />
        <div class="row">
          <button type="submit" class="ghost" disabled={!link().trim()}>Open invite</button>
        </div>
      </form>
      <Show when={error()}>
        <p class="error">{error()}</p>
      </Show>
      <hr />
      <Show
        when={advanced()}
        fallback={
          <button class="ghost" onClick={() => setAdvanced(true)}>Advanced: open by space URI</button>
        }
      >
        <form
          onSubmit={(e) => {
            e.preventDefault();
            void openUri();
          }}
        >
          <input placeholder="at://… space URI" value={uri()} onInput={(e) => setUri(e.currentTarget.value)} />
          <div class="row">
            <button type="submit" class="ghost" disabled={!uri().startsWith("at://")}>Open</button>
          </div>
        </form>
      </Show>
      <div class="row">
        <button class="ghost" onClick={close}>Close</button>
      </div>
    </dialog>
  );
}

/** Account menu: theme, notifications, data rights, sign out. */
function AccountMenu(props: { me: Me; open: boolean; onClose: () => void }) {
  let dialog!: HTMLDialogElement;
  const [busy, setBusy] = createSignal(false);

  // Native <dialog> is not reactive; drive it from the open prop.
  const sync = (open: boolean) => {
    if (!dialog) return;
    if (open && !dialog.open) dialog.showModal();
    if (!open && dialog.open) dialog.close();
  };
  createEffect(() => sync(props.open));

  return (
    <dialog
      ref={dialog}
      onClose={props.onClose}
      onClick={(e) => {
        if (e.target === dialog) props.onClose();
      }}
    >
      <h3>{props.me.handle}</h3>
      <div class="dialog-body account-menu">
        <div class="theme-row">
          <span>Theme</span>
          <button class="ghost" onClick={toggleTheme}>
            {theme() === "dark" ? "Dark ☾" : "Light ☀"}
          </button>
        </div>
        <div class="theme-row">
          <span>Notifications</span>
          <PushBell />
        </div>
        <hr />
        <a class="ghost" href={api.accountExportUrl()} download>
          Export my data
        </a>
        <button
          class="ghost danger"
          disabled={busy()}
          onClick={async () => {
            if (busy()) return;
            if (!confirm("Delete every post and thread you've written, in all your spaces? This can't be undone, and it leaves gaps in other people's conversations — replies to you lose their context.")) return;
            if (!confirm("Really delete? Your account stays, but all your linji data is removed.")) return;
            setBusy(true);
            try {
              const r = await api.accountDelete();
              alert(`Deleted ${r.posts} posts and ${r.threads} threads.`);
              location.reload();
            } catch (err) {
              alert(err instanceof Error ? err.message : "Delete failed");
              setBusy(false);
            }
          }}
        >
          Delete my data
        </button>
        <hr />
        <button
          class="ghost"
          onClick={async () => {
            try {
              await api.logout();
            } finally {
              location.reload();
            }
          }}
        >
          Sign out
        </button>
      </div>
    </dialog>
  );
}

/** Logged-out landing: what linji is + sign in. Stumblers arrive here. */
function Landing(props: { route: Route; onLogin: (m: Me) => void }) {
  const [name, setName] = createSignal("");
  const [password, setPassword] = createSignal("");
  const [config, setConfig] = createSignal<Config>({ handleDomain: "linji.at" });
  const [error, setError] = createSignal("");
  const [busy, setBusy] = createSignal(false);

  onMount(async () => {
    try {
      setConfig(await api.config());
    } catch {
      // defaults are fine
    }
  });

  return (
    <main class="landing">
      <div class="landing-card">
        <div>
          <h1>linji</h1>
          <p class="tagline">A calmer place for topical conversation.</p>
        </div>
        <Show when={props.route.kind === "join"}>
          <p class="invite-banner">You've been invited to a space — sign in to join it.</p>
        </Show>
        <p class="pitch">
          Spaces hold <strong>threads</strong>, threads hold the conversation. Sign in with{" "}
          <strong>any atproto account</strong> (Bluesky included) — your identity and your words stay
          yours. Spaces are member-only; you get in with an <strong>invite link</strong>.
        </p>
        <div class="login">
          <form
            onSubmit={async (e) => {
              e.preventDefault();
              setBusy(true);
              setError("");
              try {
                if (!password()) {
                  // Real flow: hand off to the PDS consent page. (The
                  // password path below is the dev-rig scripted consent —
                  // it only works when the PDS shares our loopback.)
                  const q = new URLSearchParams({ handle: name().trim() });
                  location.href = `/api/login?${q}`;
                  return;
                }
                props.onLogin(await api.login(name().trim(), password()));
              } catch {
                setError("Sign-in failed — check the name and password");
              }
              setBusy(false);
            }}
          >
            <input
              placeholder="alice or alice.bsky.social"
              value={name()}
              onInput={(e) => setName(e.currentTarget.value)}
              autofocus
              autocapitalize="off"
              autocorrect="off"
              spellcheck={false}
            />
            <p class="hint">
              Any atproto account works. Members of .{config().handleDomain} can type just their name.
            </p>
            <input
              type="password"
              placeholder="Password"
              value={password()}
              onInput={(e) => setPassword(e.currentTarget.value)}
            />
            <p class="hint">Leave empty to sign in at your PDS. The password box is for dev rigs.</p>
            <Show when={error()}>
              <p class="error">{error()}</p>
            </Show>
            <button type="submit" disabled={busy() || !name()}>
              {busy() ? <span class="spinner" /> : "Sign in"}
            </button>
          </form>
        </div>
      </div>
    </main>
  );
}

/** Invite redemption: preview the invite, then join. */
function JoinScreen(props: {
  route: { kind: "join"; space: string; invite: string };
  me: Me;
  onJoined: (space: string) => Promise<void>;
}) {
  const [info, setInfo] = createSignal<InviteInfo | null>(null);
  const [error, setError] = createSignal("");
  const [busy, setBusy] = createSignal(false);

  onMount(async () => {
    try {
      setInfo(await api.inviteInfo(props.route.space, props.route.invite));
    } catch (err) {
      setError(err instanceof Error ? err.message : "Could not load the invite");
    }
  });

  const expiryText = (iso: string): string => {
    const ms = new Date(iso).getTime() - Date.now();
    if (ms <= 0) return "expired";
    const days = Math.floor(ms / 86_400_000);
    if (days >= 1) return `expires in ${days} day${days === 1 ? "" : "s"}`;
    const hours = Math.ceil(ms / 3_600_000);
    return `expires in ${hours} hour${hours === 1 ? "" : "s"}`;
  };

  const reasonText = (reason?: string): string =>
    ({
      expired: "This invite has expired. Ask for a fresh link.",
      "not-found": "This invite no longer exists — it may have been revoked.",
      "wrong-authority": "This invite wasn't issued by the space owner.",
      "wrong-space": "This invite is for a different space.",
    })[reason ?? ""] ?? "This invite can't be used.";

  return (
    <main class="empty">
      <div class="empty-card">
        <Show when={!info() && !error()}>
          <div class="skeleton skel-msg" style={{ width: "16rem" }} />
        </Show>
        <Show when={error()}>
          <p class="error">{error()}</p>
        </Show>
        <Show when={info() && !info()!.valid}>
          <p>{reasonText(info()!.reason)}</p>
          <a href="#/">Go home</a>
        </Show>
        <Show when={info()?.valid}>
          <h1 style={{ margin: 0, "font-size": "1.2rem" }}>{info()!.name ?? info()!.skey ?? "A space"}</h1>
          <p>
            Invited by <strong>{info()!.inviterHandle ?? info()!.inviter}</strong>
            {info()!.expiresAt ? ` · ${expiryText(info()!.expiresAt!)}` : ""}
          </p>
          <button
            disabled={busy()}
            onClick={async () => {
              setBusy(true);
              setError("");
              try {
                await api.joinWithInvite(props.route.space, props.route.invite);
                await props.onJoined(props.route.space);
              } catch (err) {
                const e = err as Error & { reason?: string };
                setError(e.reason ? reasonText(e.reason) : e.message || "Could not join");
                setBusy(false);
              }
            }}
          >
            {busy() ? "Joining…" : "Join space"}
          </button>
          <Show when={error()}>
            <p class="error">{error()}</p>
          </Show>
        </Show>
      </div>
    </main>
  );
}

/** Notifications toggle. "on" = notifications enabled (permission
 *  granted) — these always work while the app is open. A background
 *  push subscription is attempted too, but is best-effort: when the
 *  app is closed we don't guarantee delivery. */
function PushBell() {
  const [state, setState] = createSignal<"off" | "on" | "denied" | "unsupported">("off");

  onMount(async () => {
    if (!("serviceWorker" in navigator) || !("Notification" in window)) {
      setState("unsupported");
      return;
    }
    if (Notification.permission === "denied") {
      setState("denied");
      return;
    }
    setState(Notification.permission === "granted" ? "on" : "off");
  });

  const toggle = async () => {
    if (state() === "on") {
      const reg = await navigator.serviceWorker.ready;
      const existing = await reg.pushManager.getSubscription();
      if (existing) {
        await existing.unsubscribe();
        await api.pushUnsubscribe(existing.endpoint);
      }
      setState("off");
      return;
    }
    if (Notification.permission !== "granted") {
      const perm = await Notification.requestPermission();
      if (perm !== "granted") {
        setState("denied");
        return;
      }
    }
    try {
      const config = await api.config();
      if (config.vapidKey) {
        const reg = await navigator.serviceWorker.ready;
        const sub = await reg.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: urlB64ToBytes(config.vapidKey) as BufferSource,
        });
        await api.pushSubscribe(sub.toJSON());
      }
    } catch {
      // background push unavailable (headless, no FCM, …) — fine
    }
    setState("on");
  };

  return (
    <Show when={state() !== "unsupported"}>
      <button
        class="ghost"
        title={
          state() === "on"
            ? "Notifications on while the app is open; click to turn off background push"
            : state() === "denied"
              ? "Notifications blocked by the browser"
              : "Turn on new-message notifications"
        }
        disabled={state() === "denied"}
        onClick={() => void toggle()}
      >
        {state() === "on" ? "🔔" : "🔕"}
      </button>
    </Show>
  );
}

/** base64url (VAPID key) -> Uint8Array for applicationServerKey. */
function urlB64ToBytes(b64: string): Uint8Array {
  const pad = "=".repeat((4 - (b64.length % 4)) % 4);
  const raw = atob(b64.replace(/-/g, "+").replace(/_/g, "/") + pad);
  const out = new Uint8Array(raw.length);
  for (let i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i);
  return out;
}