"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useSession } from "next-auth/react";
import { useChatSubscription } from "@/lib/use-chat-subscription";
import { useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";

import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { ChatComposer } from "./chat-composer";
import { useChatMutationRecovery } from "./use-chat-mutation-recovery";
import { ChatMessageList, type ChatMessageView } from "./chat-message-list";
import {
  advanceCatchUpWindow,
  chatBadge,
  createChatScope,
  mergeChatMessages,
  messageError,
  rootReadIsProven,
  type CatchUpWindow,
} from "./chat-utils";
import { api } from "@/lib/trpc";

const PAGE_SIZE = 50;

export function ReadFailureAlert({ onRetry }: { onRetry: () => void }) {
  return (
    <div role="alert" className="p-3 text-sm">
      Could not mark messages read. Unread status has not advanced.{" "}
      <Button variant="link" onClick={onRetry}>
        Retry
      </Button>
    </div>
  );
}
type PendingMessage = {
  key: string;
  body: string;
  parentMessageId?: string;
  failed: boolean;
  error?: string;
};

export function ChatWorkspace(props: { workspace: string; channelId?: string }) {
  const userId = useSession().data?.user?.id;
  return <ChatWorkspaceScope key={JSON.stringify([userId, props.workspace, props.channelId])} {...props} />;
}

function ChatWorkspaceScope({
  workspace,
  channelId,
}: {
  workspace: string;
  channelId?: string;
}) {
  const router = useRouter();
  const currentUserId = useSession().data?.user?.id;
  const utils = api.useUtils();
  const queryClient = useQueryClient();
  const scopeRef = useRef(createChatScope(workspace, channelId));
  // Render-time selection closes the gap before effects run after a route change.
  scopeRef.current.select(workspace, channelId);
  useEffect(() => {
    const scope = createChatScope(workspace, channelId);
    scopeRef.current = scope;
    return () => scope.dispose();
  }, [workspace, channelId]);
  const revoked = scopeRef.current.isRevoked();
  const purge = useCallback(() => {
    if (scopeRef.current.isRevoked()) return;
    scopeRef.current.revoke();
    const valid = scopeRef.current.captureCleanup();
    // Cancel in-flight reads before clearing cached chat data; stale responses
    // must not repopulate a revoked conversation during navigation.
    const chatQuery = {
      predicate: (query: { queryKey: readonly unknown[] }) => {
        const path = query.queryKey[0];
        const options = query.queryKey[1];
        return Array.isArray(path) && path[0] === "chat" &&
          !!options && typeof options === "object" && "input" in options &&
          !!options.input && typeof options.input === "object" &&
          "workspace" in options.input && options.input.workspace === workspace;
      },
    };
    void queryClient.cancelQueries(chatQuery).then(() => {
      if (valid()) queryClient.removeQueries(chatQuery);
    });
    setRecent([]);
    setPending([]);
    setMessageChange(null);
    setOlderRoots([]);
    setLatestRoots([]);
    setOlderReplies([]);
    setLatestReplies([]);
    setRefreshedRoot(null);
    setThreadId(null);
    router.replace(`/${workspace}/chat`);
  }, [queryClient, router, workspace]);
  const resolved = api.workspaces.resolve.useQuery({ handle: workspace });
  const viewer = api.chat.viewer.useQuery({ workspace });
  const channels = api.chat.listChannels.useQuery(
    { workspace },
    { refetchInterval: 15000 },
  );
  const summary = api.chat.unreadSummary.useQuery(
    { workspace },
    { refetchInterval: 15000 },
  );
  const channel = channels.data?.find((item) => item.id === channelId);
  useEffect(() => {
    if (channelId && channels.data && !channel && !channels.isError) purge();
  }, [channelId, channels.data, channels.isError, channel, purge]);
  const readable = !!channel && !!resolved.data && !revoked;
  const recovery = useChatMutationRecovery({ workspace, channelId, enabled: readable });
  const recoveryRefresh = recovery.refresh;
  useChatSubscription(workspace, channels.data?.map((item) => item.id) ?? [], recoveryRefresh);
  const denied = (
    error: { data?: { code?: string } | null } | null | undefined,
  ) => error?.data?.code === "NOT_FOUND" || error?.data?.code === "FORBIDDEN";
  const scope = { workspace, channelId: channelId ?? "" };
  const [before, setBefore] = useState<string | undefined>();
  const [olderRoots, setOlderRoots] = useState<ChatMessageView[]>([]);
  const [latestRoots, setLatestRoots] = useState<ChatMessageView[]>([]);
  const history = api.chat.history.useQuery(
    { ...scope, limit: PAGE_SIZE, before },
    { enabled: readable },
  );
  const [threadId, setThreadId] = useState<string | null>(null);
  const threadScope = useRef(createChatScope(workspace, threadId ?? undefined));
  threadScope.current.select(workspace, threadId ?? undefined);
  const [threadBefore, setThreadBefore] = useState<string | undefined>();
  const [olderReplies, setOlderReplies] = useState<ChatMessageView[]>([]);
  const [latestReplies, setLatestReplies] = useState<ChatMessageView[]>([]);
  const [refreshedRoot, setRefreshedRoot] = useState<ChatMessageView | null>(
    null,
  );
  const thread = api.chat.threadHistory.useQuery(
    {
      ...scope,
      rootMessageId: threadId ?? "",
      limit: PAGE_SIZE,
      before: threadBefore,
    },
    { enabled: readable && !!threadId },
  );
  const roots = useMemo(
    () =>
      mergeChatMessages(
        mergeChatMessages(olderRoots, latestRoots),
        history.data?.messages ?? [],
      ),
    [olderRoots, latestRoots, history.data],
  );
  // There is no channel-wide high-water endpoint. Start from the oldest loaded
  // root's predecessor so replies between loaded roots are never skipped.
  // Empty channels still need zero to discover their first message.
  const historyStart = history.data?.messages.reduce<string | null>(
    (min, item) =>
      min === null || BigInt(item.sequence) < BigInt(min) ? item.sequence : min,
    null,
  );
  const fallbackAfter = historyStart
    ? (BigInt(historyStart) - 1n).toString()
    : "0";
  const readBoundary =
    summary.data?.channels.find((item) => item.channelId === channelId)
      ?.readSequence ?? "0";
  // The visible page is a safe lower bound only when it is the entire root
  // history and none of those roots has a reply that could lie before it.
  const completeRootHistory =
    history.data?.hasMore === false &&
    history.data.messages.every((item) => item.replyCount === 0);
  const initialAfter =
    completeRootHistory || BigInt(readBoundary) >= BigInt(fallbackAfter)
      ? fallbackAfter
      : readBoundary;
  const [catchUpWindow, setCatchUpWindow] = useState<CatchUpWindow | null>(
    null,
  );
  const activeWindow = catchUpWindow ?? { after: initialAfter };
  const catchUp = api.chat.catchUp.useQuery(
    { ...scope, ...activeWindow, limit: 100 },
    {
      enabled: readable && !!history.data && !!summary.data,
      refetchInterval: 5000,
    },
  );
  const [scanned, setScanned] = useState<string | null>(null);
  const [unseenReply, setUnseenReply] = useState<string | null>(null);
  const [recent, setRecent] = useState<ChatMessageView[]>([]);
  const [pending, setPending] = useState<PendingMessage[]>([]);
  const [messageChange, setMessageChange] = useState<{
    message: ChatMessageView;
    type: "edit_message" | "delete_message";
    body: string;
    key: string;
    failed: boolean;
    error?: string;
  } | null>(null);
  const editMutation = api.chat.editMessage.useMutation();
  const deleteMutation = api.chat.deleteMessage.useMutation();
  const accessRevoked = [
    history.error,
    catchUp.error,
    thread.error,
    summary.error,
    viewer.error,
    recovery.error as { data?: { code?: string } } | null,
  ].some(denied);
  useEffect(() => {
    if (accessRevoked) purge();
  }, [accessRevoked, purge]);
  const previousScope = useRef(`${workspace}:${channelId ?? ""}`);
  useEffect(() => {
    const nextScope = `${workspace}:${channelId ?? ""}`;
    if (previousScope.current === nextScope) return;
    previousScope.current = nextScope;
    setRecent([]);
    setPending([]);
    setMessageChange(null);
    processedPage.current = undefined;
    setThreadId(null);
    setBefore(undefined);
    setOlderRoots([]);
    setLatestRoots([]);
    setRefreshedRoot(null);
    setThreadBefore(undefined);
    setOlderReplies([]);
    setCatchUpWindow(null);
    setScanned(null);
    setUnseenReply(null);
  }, [channelId, workspace]);
  useEffect(() => {
    setThreadBefore(undefined);
    setOlderReplies([]);
    setLatestReplies([]);
    setRefreshedRoot(null);
  }, [threadId]);
  // Previously paged roots and replies are held outside React Query. Mirror refreshed
  // cached pages into those arrays so edits to old pages become visible too.
  useEffect(
    () =>
      queryClient.getQueryCache().subscribe((event) => {
        if (
          event.type !== "updated" ||
          event.action.type !== "success" ||
          scopeRef.current.isRevoked()
        )
          return;
        const key = event.query.queryKey;
        const path = key[0];
        const options = key[1];
        if (
          !Array.isArray(path) ||
          path[0] !== "chat" ||
          (path[1] !== "history" && path[1] !== "threadHistory") ||
          !options ||
          typeof options !== "object" ||
          !("input" in options)
        )
          return;
        const input = options.input;
        if (
          !input ||
          typeof input !== "object" ||
          !("channelId" in input) ||
          !("workspace" in input) ||
          input.channelId !== channelId ||
          input.workspace !== workspace
        )
          return;
        const data: unknown = event.query.state.data;
        if (
          !data ||
          typeof data !== "object" ||
          !("messages" in data || "replies" in data)
        )
          return;
        if (
          path[1] === "history" &&
          "messages" in data &&
          Array.isArray(data.messages)
        ) {
          const messages = data.messages as ChatMessageView[];
          setOlderRoots((current) => mergeChatMessages(current, messages));
        }
        if (
          path[1] === "threadHistory" &&
          "replies" in data &&
          Array.isArray(data.replies) &&
          "rootMessageId" in input &&
          input.rootMessageId === threadId
        ) {
          setOlderReplies((current) =>
            mergeChatMessages(current, data.replies as ChatMessageView[]),
          );
          if ("root" in data && data.root && typeof data.root === "object")
            setRefreshedRoot((current) => mergeChatMessages(current ? [current] : [], [data.root as ChatMessageView])[0]);
        }
      }),
    [queryClient, workspace, channelId, threadId],
  );
  const processedPage = useRef<typeof catchUp.data>(undefined);
  useEffect(() => {
    const page = catchUp.data;
    if (!page || scopeRef.current.isRevoked() || processedPage.current === page) return;
    // A cached page from another interval must not advance this interval.
    if (
      BigInt(page.next) < BigInt(activeWindow.after) ||
      (activeWindow.through !== undefined &&
        page.through !== activeWindow.through)
    )
      return;
    processedPage.current = page;
    setRecent((current) => mergeChatMessages(current, page.messages));
    if (page.messages.length) {
      // Catch-up also carries durable revisions for messages already paged in.
      setOlderRoots((current) =>
        mergeChatMessages(
          current,
          page.messages.filter((item) => !item.parentMessageId),
        ),
      );
      setOlderReplies((current) =>
        mergeChatMessages(
          current,
          page.messages.filter((item) => item.parentMessageId === threadId),
        ),
      );
    }
    setScanned((current) =>
      current &&
      BigInt(current) > BigInt(page.hasMore ? page.next : page.through)
        ? current
        : page.hasMore
          ? page.next
          : page.through,
    );
    const reply = page.messages.find((item) => item.parentMessageId);
    if (reply)
      setUnseenReply((current) =>
        current && BigInt(current) < BigInt(reply.sequence)
          ? current
          : reply.sequence,
      );
    setCatchUpWindow((current) =>
      advanceCatchUpWindow(
        current ?? { after: activeWindow.after, through: activeWindow.through },
        page,
      ),
    );
  }, [catchUp.data, activeWindow.after, activeWindow.through, threadId]);
  const sendMutation = api.chat.send.useMutation();
  const readMutation = api.chat.markChannelRead.useMutation({
    onSuccess: () => {
      if (!scopeRef.current.isRevoked()) void utils.chat.unreadSummary.invalidate({ workspace });
    },
  });
  const reading = useRef<string | null>(null);
  const acknowledged = useRef("0");
  const [readFailure, setReadFailure] = useState<string | null>(null);
  useEffect(() => {
    reading.current = null;
    acknowledged.current = "0";
    setReadFailure(null);
  }, [channelId, workspace]);
  const viewed = useCallback(
    (sequence: string) => {
      if (
        !readable ||
        !channelId ||
        document.visibilityState !== "visible" ||
        readFailure ||
        !rootReadIsProven(sequence, scanned, unseenReply, readBoundary) ||
        reading.current
      )
        return;
      if (
        BigInt(sequence) <= BigInt(readBoundary) ||
        BigInt(sequence) <= BigInt(acknowledged.current)
      )
        return;
      const valid = scopeRef.current.capture();
      reading.current = sequence;
      readMutation.mutate(
        { workspace, channelId, sequence },
        {
          onSuccess: () => {
            if (valid()) acknowledged.current = sequence;
          },
          onError: (error) => {
            if (!valid()) return;
            if (denied(error)) purge();
            else setReadFailure(sequence);
          },
          onSettled: () => {
            if (valid()) reading.current = null;
          },
        },
      );
    },
    [
      readBoundary,
      readFailure,
      scanned,
      unseenReply,
      readable,
      channelId,
      readMutation,
      workspace,
      purge,
    ],
  );
  const send = useCallback(
    async (
      body: string,
      parentMessageId?: string,
      key = crypto.randomUUID(),
    ) => {
      if (!resolved.data || !channelId || !readable || channel?.archivedAt)
        return;
      const valid = scopeRef.current.capture();
      const requestedThread = threadId;
      const validThread = threadScope.current.capture();
      setPending((items) => [
        ...items.filter((item) => item.key !== key),
        { key, body, parentMessageId, failed: false },
      ]);
      try {
        const result = await sendMutation.mutateAsync({
          workspace,
          command: {
            type: "send_message",
            workspaceId: resolved.data.id,
            channelId,
            context: { type: "workspace", workspaceId: resolved.data.id },
            body,
            clientIdempotencyKey: key,
            ...(parentMessageId ? { parentMessageId } : {}),
          },
        });
        if (!valid()) return;
        const confirmed: ChatMessageView = {
          ...result.message,
          createdAt: new Date(),
        };
        if (parentMessageId && validThread()) {
          setLatestReplies((current) =>
            mergeChatMessages(current, [confirmed]),
          );
        } else if (!parentMessageId) {
          setLatestRoots((current) => mergeChatMessages(current, [confirmed]));
        }
        setPending((items) => items.filter((item) => item.key !== key));
        // Refreshes are best-effort after confirmation. A failed refresh must
        // never turn a persisted send into a retryable pending row.
        void Promise.allSettled([
          utils.chat.history.invalidate({ workspace, channelId }),
          utils.chat.history
            .fetch({ workspace, channelId, limit: PAGE_SIZE })
            .then((page) => {
              if (!valid()) return;
              setLatestRoots((current) =>
                mergeChatMessages(current, page.messages),
              );
            }),
          utils.chat.threadHistory.invalidate({ workspace, channelId }),
          ...(parentMessageId
            ? [
                utils.chat.threadHistory
                  .fetch({
                    workspace,
                    channelId,
                    rootMessageId: parentMessageId,
                    limit: PAGE_SIZE,
                  })
                  .then((page) => {
                    if (valid() && validThread() && requestedThread === parentMessageId)
                      setLatestReplies((current) =>
                        mergeChatMessages(current, page.replies),
                      );
                  }),
              ]
            : []),
          utils.chat.catchUp.invalidate({ workspace, channelId }),
          utils.chat.unreadSummary.invalidate({ workspace }),
        ]);
      } catch (error) {
        if (!valid()) return;
        const code =
          error &&
          typeof error === "object" &&
          "data" in error &&
          error.data &&
          typeof error.data === "object" &&
          "code" in error.data
            ? String(error.data.code)
            : undefined;
        if (code === "NOT_FOUND" || code === "FORBIDDEN") {
          purge();
        } else if (!scopeRef.current.isRevoked()) {
          setPending((items) =>
            items.map((item) =>
              item.key === key
                ? { ...item, failed: true, error: messageError(code) }
                : item,
            ),
          );
        }
      }
    },
    [
      resolved.data,
      channelId,
      channel?.archivedAt,
      readable,
      sendMutation,
      workspace,
      utils,
      purge,
      threadId,
    ],
  );
  const applyMessageChange = useCallback(
    async (change: NonNullable<typeof messageChange>) => {
      if (!resolved.data || !channelId || !readable || channel?.archivedAt)
        return;
      const valid = scopeRef.current.capture();
      const { message, type, body, key } = change;
      const command = {
        workspaceId: resolved.data.id,
        channelId,
        context: { type: "workspace" as const, workspaceId: resolved.data.id },
        messageId: message.id,
        expectedRevision: message.revision ?? 1,
        clientMutationId: key,
      };
      setMessageChange({ ...change, failed: false, error: undefined });
      try {
        const outcome =
          type === "edit_message"
            ? await editMutation.mutateAsync({
                workspace,
                command: { ...command, type, body },
              })
            : await deleteMutation.mutateAsync({
                workspace,
                command: { ...command, type },
              });
        if (!valid()) return;
        const updated: ChatMessageView = {
          ...message,
          revision: outcome.result.revision,
          status: outcome.result.status,
          body: type === "delete_message" ? "" : body.trim(),
          ...(type === "delete_message"
            ? { deletedAt: new Date() }
            : { editedAt: new Date() }),
        };
        setRecent((current) =>
          current.some((item) => item.id === updated.id)
            ? mergeChatMessages(current, [updated])
            : current,
        );
        setOlderRoots((current) =>
          current.map((item) =>
            item.id === updated.id
              ? mergeChatMessages([item], [updated])[0]
              : item,
          ),
        );
        if ("parentMessageId" in message && message.parentMessageId) {
          setLatestReplies((current) => mergeChatMessages(current, [updated]));
        } else {
          setLatestRoots((current) => mergeChatMessages(current, [updated]));
        }
        setOlderReplies((current) =>
          current.map((item) =>
            item.id === updated.id
              ? mergeChatMessages([item], [updated])[0]
              : item,
          ),
        );
        setMessageChange(null);
        // Old root and thread pages may be retained locally. Refetch every cached page,
        // not only the newest page; revision-aware merging prevents late stale responses
        // from resurrecting an older edit or a tombstone.
        void Promise.allSettled([
          queryClient.refetchQueries({
            predicate: (query) => {
              const path = query.queryKey[0];
              const options = query.queryKey[1];
              return (
                Array.isArray(path) &&
                path[0] === "chat" &&
                (path[1] === "history" ||
                  path[1] === "threadHistory" ||
                  path[1] === "catchUp") &&
                !!options && typeof options === "object" && "input" in options &&
                !!options.input && typeof options.input === "object" &&
                "workspace" in options.input && options.input.workspace === workspace
              );
            },
            type: "all",
          }),
          utils.chat.unreadSummary.invalidate({ workspace }),
        ]);
      } catch (error) {
        if (!valid()) return;
        if (denied(error as { data?: { code?: string } })) {
          purge();
          return;
        }
        const code =
          error &&
          typeof error === "object" &&
          "data" in error &&
          error.data &&
          typeof error.data === "object" &&
          "code" in error.data
            ? String(error.data.code)
            : undefined;
        if (code === "CONFLICT") {
          void queryClient.refetchQueries({
            predicate: (query) => {
              const path = query.queryKey[0];
              const options = query.queryKey[1];
              return (
                Array.isArray(path) &&
                path[0] === "chat" &&
                (path[1] === "history" || path[1] === "threadHistory") &&
                !!options && typeof options === "object" && "input" in options &&
                !!options.input && typeof options.input === "object" &&
                "workspace" in options.input && options.input.workspace === workspace
              );
            },
            type: "all",
          });
        }
        setMessageChange((current) =>
          current?.key === key
            ? {
                ...current,
                failed: true,
                error:
                  code === "CONFLICT"
                    ? "Message changed. Refresh messages before editing again."
                    : messageError(code),
              }
            : current,
        );
      }
    },
    [
      resolved.data,
      channelId,
      readable,
      channel?.archivedAt,
      editMutation,
      deleteMutation,
      workspace,
      queryClient,
      utils,
      purge,
    ],
  );
  const recovered = (messages: ChatMessageView[]) =>
    mergeChatMessages(messages, recovery.messages.flatMap((item) => {
      const loaded = messages.find((message) => message.id === item.id);
      return loaded ? [{ ...loaded, ...item }] : [];
    }));
  const rootsWithRecent = useMemo(
    () =>
      mergeChatMessages(
        mergeChatMessages(roots, latestRoots),
        recent.filter(
          (item) => !("parentMessageId" in item) || !item.parentMessageId,
        ) as typeof roots,
      ),
    [roots, latestRoots, recent],
  );
  const replies = useMemo(
    () =>
      mergeChatMessages(
        mergeChatMessages(olderReplies, latestReplies),
        thread.data?.replies ?? [],
      ),
    [olderReplies, latestReplies, thread.data],
  );
  const visibleReplies = useMemo(
    () =>
      mergeChatMessages(
        mergeChatMessages(replies, latestReplies),
        recent.filter(
          (item) =>
            "parentMessageId" in item && item.parentMessageId === threadId,
        ) as typeof replies,
      ),
    [replies, latestReplies, recent, threadId],
  );
  const canModerate =
    viewer.data?.role === "admin" ||
    viewer.data?.role === "owner" ||
    channel?.ownerUserId === currentUserId;
  const startChange = (
    message: ChatMessageView,
    type: "edit_message" | "delete_message",
  ) => {
    if (
      !message.revision ||
      channel?.archivedAt ||
      message.status === "deleted" ||
      message.deletedAt ||
      (type === "edit_message"
        ? message.authorUserId !== currentUserId
        : message.authorUserId !== currentUserId && !canModerate)
    )
      return;
    setMessageChange({
      message,
      type,
      body: message.body,
      key: crypto.randomUUID(),
      failed: false,
    });
  };
  const counts = new Map(
    summary.data?.channels.map((item) => [item.channelId, item]),
  );

  return (
    <main
      className="flex h-full min-h-0 min-w-0 flex-1"
      aria-label="Workspace chat"
    >
      <aside
        className="flex w-56 shrink-0 flex-col border-r"
        aria-label="Channels"
      >
        <h1 className="border-b p-4 text-lg font-semibold">Chat</h1>
        {channels.isLoading && <p className="p-3 text-sm">Loading channels…</p>}
        {channels.isError && (
          <p role="alert" className="p-3 text-sm">
            Could not load channels.{" "}
            <Button variant="link" onClick={() => void channels.refetch()}>
              Retry
            </Button>
          </p>
        )}
        {channels.data?.length === 0 && (
          <p className="p-3 text-sm text-muted-foreground">No channels yet.</p>
        )}
        <ScrollArea className="min-h-0 flex-1">
          <nav aria-label="Chat channels" className="flex flex-col gap-1 p-2">
            {channels.data
              ?.filter((item) => !item.archivedAt)
              .map((item) => {
                const unread = counts.get(item.id);
                const badge = chatBadge({
                  unreadCount: unread?.unreadCount ?? 0,
                  mentionCount: unread?.mentionCount ?? 0,
                  directUnreadCount:
                    item.kind === "direct"
                      ? Math.max(
                          0,
                          (unread?.unreadCount ?? 0) -
                            (unread?.mentionCount ?? 0),
                        )
                      : 0,
                });
                return (
                  <Link
                    key={item.id}
                    href={`/${workspace}/chat/${item.id}`}
                    aria-current={item.id === channelId ? "page" : undefined}
                    className="flex items-center justify-between gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-accent"
                  >
                    <span className="truncate">
                      {item.kind === "direct"
                        ? "Direct message"
                        : (item.name ?? "Channel")}
                    </span>
                    {(badge.dot || badge.count > 0) && (
                      <span
                        className="shrink-0 rounded-full bg-primary px-1.5 text-xs text-primary-foreground"
                        aria-label={
                          badge.count > 0
                            ? `${badge.count} mentions or direct unread messages`
                            : "Unread messages"
                        }
                      >
                        {badge.count > 0 ? badge.count : "●"}
                      </span>
                    )}
                  </Link>
                );
              })}
          </nav>
        </ScrollArea>
      </aside>
      {!channelId ? (
        <div className="flex flex-1 items-center justify-center p-6 text-sm text-muted-foreground">
          Select a channel to start chatting.
        </div>
      ) : channels.isLoading || resolved.isLoading ? (
        <div role="status" className="p-6">
          Loading channel…
        </div>
      ) : channels.isError || resolved.isError ? (
        <div role="alert" className="p-6">
          Could not load channel.{" "}
          <Button
            variant="outline"
            onClick={() => {
              void channels.refetch();
              void resolved.refetch();
            }}
          >
            Retry
          </Button>
        </div>
      ) : accessRevoked || !channel ? (
        <div role="alert" className="p-6">
          Channel unavailable or access removed.
        </div>
      ) : (
        <section
          className="flex min-h-0 min-w-0 flex-1 flex-col"
          aria-label={`Conversation: ${channel.name ?? "Direct message"}`}
        >
          <header className="border-b p-4 font-semibold">
            {channel.name ?? "Direct message"}
          </header>
          {history.isLoading && (
            <p role="status" className="p-4">
              Loading messages…
            </p>
          )}
          {history.isError && !accessRevoked && (
            <div role="alert" className="p-4">
              Could not load messages.{" "}
              <Button variant="outline" onClick={() => void history.refetch()}>
                Retry
              </Button>
            </div>
          )}
          <div
            className="min-h-0 flex-1 overflow-y-auto"
            role="region"
            aria-label="Channel messages"
          >
            {history.data?.hasMore && (
              <div className="p-3 text-center">
                <Button
                  variant="outline"
                  disabled={history.isFetching}
                  onClick={() => {
                    setOlderRoots((items) =>
                      mergeChatMessages(items, history.data?.messages ?? []),
                    );
                    setBefore(history.data?.next ?? undefined);
                  }}
                >
                  Load older messages
                </Button>
              </div>
            )}
            {!history.isLoading && !rootsWithRecent.length && (
              <p className="p-4 text-sm text-muted-foreground">
                No messages yet.
              </p>
            )}
            <ChatMessageList
              messages={recovered(rootsWithRecent)}
              onViewed={viewed}
              onThread={setThreadId}
              currentUserId={currentUserId}
              canModerate={canModerate}
              readOnly={!!channel.archivedAt}
              onEdit={(message) => startChange(message, "edit_message")}
              onDelete={(message) => startChange(message, "delete_message")}
              pending={pending
                .filter((item) => !item.parentMessageId)
                .map((item) => ({
                  ...item,
                  retry: () => void send(item.body, undefined, item.key),
                }))}
            />
            {messageChange && (
              <div
                className="border-t p-3"
                role="group"
                aria-label="Message change"
              >
                <p className="text-sm">
                  {messageChange.type === "edit_message"
                    ? "Edit message"
                    : "Delete message?"}
                </p>
                {messageChange.type === "edit_message" && (
                  <textarea
                    aria-label="Edited message"
                    className="w-full rounded border p-2"
                    value={messageChange.body}
                    onChange={(event) =>
                      setMessageChange((current) =>
                        current
                          ? {
                              ...current,
                              body: event.target.value,
                              key: crypto.randomUUID(),
                              failed: false,
                            }
                          : null,
                      )
                    }
                  />
                )}
                {messageChange.error && (
                  <p role="alert" className="text-sm">
                    {messageChange.error}
                  </p>
                )}
                <Button
                  type="button"
                  disabled={
                    editMutation.isPending ||
                    deleteMutation.isPending ||
                    (messageChange.type === "edit_message" &&
                      !messageChange.body.trim()) ||
                    (messageChange.failed &&
                      messageChange.error?.startsWith("Message changed"))
                  }
                  onClick={() => void applyMessageChange(messageChange)}
                >
                  {messageChange.failed
                    ? "Retry"
                    : messageChange.type === "edit_message"
                      ? "Save"
                      : "Confirm delete"}
                </Button>
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => setMessageChange(null)}
                >
                  Cancel
                </Button>
              </div>
            )}
            {readFailure && (
              <ReadFailureAlert
                onRetry={() => {
                  const sequence = readFailure;
                  setReadFailure(null);
                  reading.current = sequence;
                  readMutation.mutate(
                    { workspace, channelId, sequence },
                    {
                      onSuccess: () => {
                        acknowledged.current = sequence;
                      },
                      onError: (error) => {
                        if (denied(error)) purge();
                        else setReadFailure(sequence);
                      },
                      onSettled: () => {
                        reading.current = null;
                      },
                    },
                  );
                }}
              />
            )}
            {catchUp.isError && !accessRevoked && (
              <div role="alert" className="p-3 text-sm">
                Could not check for new messages.{" "}
                <Button variant="link" onClick={() => void catchUp.refetch()}>
                  Retry
                </Button>
              </div>
            )}
          </div>
          {!channel.archivedAt && (
            <ChatComposer
              onSend={(body) => void send(body)}
              label="Message channel"
            />
          )}
        </section>
      )}
      {channel && threadId && !accessRevoked && (
        <aside
          className="flex w-80 shrink-0 flex-col border-l"
          aria-label="Thread"
        >
          <div className="flex items-center justify-between border-b p-3">
            <h2 className="font-semibold">Replies</h2>
            <Button
              variant="ghost"
              onClick={() => setThreadId(null)}
              aria-label="Close thread"
            >
              Close
            </Button>
          </div>
          <div
            className="min-h-0 flex-1 overflow-y-auto"
            role="region"
            aria-label="Thread messages"
          >
            {thread.isError && (
              <p role="alert" className="p-3">
                Thread unavailable.{" "}
                <Button variant="link" onClick={() => void thread.refetch()}>
                  Retry
                </Button>
              </p>
            )}
            {thread.data?.root && (
              <ChatMessageList
                messages={recovered(mergeChatMessages(
                  [thread.data.root],
                  refreshedRoot ? [refreshedRoot] : [],
                ))}
                currentUserId={currentUserId}
                canModerate={canModerate}
                readOnly={!!channel.archivedAt}
                onEdit={(message) => startChange(message, "edit_message")}
                onDelete={(message) => startChange(message, "delete_message")}
              />
            )}
            {thread.data?.hasMore && (
              <Button
                variant="outline"
                onClick={() => {
                  setOlderReplies((items) =>
                    mergeChatMessages(items, thread.data?.replies ?? []),
                  );
                  setThreadBefore(thread.data?.next ?? undefined);
                }}
                disabled={thread.isFetching}
              >
                Load older replies
              </Button>
            )}
            <ChatMessageList
              messages={recovered(visibleReplies)}
              currentUserId={currentUserId}
              canModerate={canModerate}
              readOnly={!!channel.archivedAt}
              onEdit={(message) => startChange(message, "edit_message")}
              onDelete={(message) => startChange(message, "delete_message")}
              pending={pending
                .filter((item) => item.parentMessageId === threadId)
                .map((item) => ({
                  ...item,
                  retry: () => void send(item.body, threadId, item.key),
                }))}
            />
          </div>
          {!channel.archivedAt && (
            <ChatComposer
              key={threadId}
              onSend={(body) => void send(body, threadId)}
              label="Reply in thread"
            />
          )}
        </aside>
      )}
    </main>
  );
}