webmail-client/frontend/src/routes/MailLayout.tsx

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useEffect, useRef, useState } from "react";
import { Link, useMatch, useNavigate } from "react-router-dom";

import { Composer, type ComposerInit, draftToInit } from "../components/compose/Composer";
import { DraftsList } from "../components/list/DraftsList";
import { Icon } from "../components/Icon";
import { MessageList } from "../components/list/MessageList";
import { Resizer } from "../components/Resizer";
import { ThemeToggle } from "../components/ThemeToggle";
import { ThreadView } from "../components/thread/ThreadView";
import { useT } from "../i18n";
import type { MessageKey } from "../i18n/en";
import { api } from "../lib/api";
import type { QuotaOut, ThreadSummary } from "../lib/types";
import { useKeyboardShortcuts } from "../lib/useKeyboardShortcuts";

function quotaLabel(q: QuotaOut): string {
  const pct = q.quota_bytes > 0 ? (q.used_bytes / q.quota_bytes) * 100 : 0;
  const pctStr = pct >= 10 ? String(Math.round(pct)) : String(Math.round(pct * 10) / 10);
  const gb = q.quota_bytes / 1024 ** 3;
  const gbStr = Number.isInteger(gb) ? String(gb) : gb.toFixed(1);
  return `${pctStr}% of ${gbStr} GB`;
}

// Threads shown per page in the mail list.
const PAGE_SIZE = 50;

// Collapsed sidebar width: just wide enough for the icons.
const COLLAPSED_W = 60;

// Unified per-folder views. "Spam" maps to the IMAP special-use "junk".
const FOLDERS: { view: string; icon: string; label: MessageKey }[] = [
  { view: "folder:inbox", icon: "inbox", label: "nav.inbox" },
  { view: "folder:archive", icon: "archive", label: "nav.archive" },
  { view: "folder:drafts", icon: "drafts", label: "nav.drafts" },
  { view: "folder:sent", icon: "sent", label: "nav.sent" },
  { view: "folder:junk", icon: "spam", label: "nav.spam" },
  { view: "folder:trash", icon: "trash", label: "nav.trash" },
];

export function MailLayout() {
  const t = useT();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const match = useMatch("/mail/t/:threadId");
  const threadId = match?.params.threadId;
  const [view, setView] = useState<string>("folder:inbox");
  const [term, setTerm] = useState("");
  const [filter, setFilter] = useState<"all" | "unread" | "pinned">("all");
  const [listOrder, setListOrder] = useState<"newest" | "oldest">(() =>
    localStorage.getItem("mail.listOrder") === "oldest" ? "oldest" : "newest",
  );
  const [page, setPage] = useState(0);
  const [refreshing, setRefreshing] = useState(false);
  const [composing, setComposing] = useState<ComposerInit | null>(null);
  const [composerExpanded, setComposerExpanded] = useState(false);
  // Bumped each time a composer is opened so the <Composer> remounts (fresh state)
  // when switching between drafts instead of keeping the previous draft's editor.
  const [composeKey, setComposeKey] = useState(0);
  const [replySignal, setReplySignal] = useState<{ kind: string; seq: number }>();
  const searchRef = useRef<HTMLInputElement>(null);

  // Resizable panel widths (persisted). Drag the dividers to adjust.
  const [sidebarW, setSidebarW] = useState(() => Number(localStorage.getItem("panel.sidebar")) || 240);
  const [listW, setListW] = useState(() => Number(localStorage.getItem("panel.list")) || 384);
  // Collapsed sidebar shows icons only (persisted).
  const [collapsed, setCollapsed] = useState(() => localStorage.getItem("panel.collapsed") === "1");
  const clampSidebar = (w: number) => Math.min(Math.max(w, 180), 420);
  // The list can be dragged up to 75% of the window width.
  const clampList = (w: number) => Math.min(Math.max(w, 260), window.innerWidth * 0.75);
  useEffect(() => localStorage.setItem("panel.sidebar", String(sidebarW)), [sidebarW]);
  useEffect(() => localStorage.setItem("panel.list", String(listW)), [listW]);
  useEffect(() => localStorage.setItem("panel.collapsed", collapsed ? "1" : "0"), [collapsed]);
  useEffect(() => localStorage.setItem("mail.listOrder", listOrder), [listOrder]);

  const isDrafts = view === "folder:drafts";
  // Which special-use folder the reading pane is showing (drives the toolbar).
  const currentFolder = view.startsWith("folder:") ? view.slice("folder:".length) : "inbox";
  const accountsQuery = useQuery({ queryKey: ["accounts"], queryFn: api.accounts });
  const mailboxesQuery = useQuery({ queryKey: ["mailboxes"], queryFn: api.mailboxes });
  const threadsQuery = useQuery({
    queryKey: ["threads", view],
    queryFn: () => api.threads(view),
    enabled: !isDrafts,
  });
  const draftsQuery = useQuery({
    queryKey: ["drafts"],
    queryFn: api.listDrafts,
    enabled: isDrafts,
  });
  const remoteDraftsQuery = useQuery({
    queryKey: ["drafts-remote"],
    queryFn: api.remoteDrafts,
    enabled: isDrafts,
  });
  const searchQuery = useQuery({
    queryKey: ["search", term],
    queryFn: () => api.search(term),
    enabled: term.trim().length > 0,
  });
  const settingsQuery = useQuery({ queryKey: ["settings"], queryFn: api.settings });
  const threadOrder: "asc" | "desc" = settingsQuery.data?.thread_order ?? "asc";
  const quotaQuery = useQuery({ queryKey: ["quota"], queryFn: api.quota });

  const allThreads: ThreadSummary[] = term.trim()
    ? (searchQuery.data?.threads ?? []).map((h) => h.thread)
    : (threadsQuery.data?.threads ?? []);
  const filtered = allThreads.filter((th) =>
    filter === "unread" ? th.unread_count > 0 : filter === "pinned" ? th.pinned : true,
  );
  // The backend returns threads newest-first; reverse for an oldest-first view.
  const threads = listOrder === "newest" ? filtered : [...filtered].reverse();

  // Client-side pagination of the (filtered, ordered) list.
  const total = threads.length;
  const maxPage = Math.max(0, Math.ceil(total / PAGE_SIZE) - 1);
  const curPage = Math.min(page, maxPage);
  const pageStart = curPage * PAGE_SIZE;
  const pageEnd = Math.min(pageStart + PAGE_SIZE, total);
  const pageThreads = threads.slice(pageStart, pageEnd);
  // Reset to the first page whenever the underlying list identity changes.
  useEffect(() => setPage(0), [view, filter, term, listOrder]);

  const threadsRef = useRef<ThreadSummary[]>(threads);
  threadsRef.current = threads;

  const detailQuery = useQuery({
    queryKey: ["thread", threadId, threadOrder, view],
    queryFn: () => api.thread(threadId!, threadOrder, view),
    enabled: Boolean(threadId),
  });

  const markRead = useMutation({
    mutationFn: (id: string) => api.threadFlags(id, ["\\Seen"], []),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["threads"] }),
  });
  useEffect(() => {
    const detail = detailQuery.data;
    if (detail && detail.messages.some((m) => m.is_unread)) markRead.mutate(detail.id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [detailQuery.data?.id]);

  // Open the composer with fresh state, remounting it if one is already open
  // (e.g. clicking a different draft replaces the current editor).
  const openComposer = (init: ComposerInit, expand = false) => {
    setComposing(init);
    setComposerExpanded(expand);
    setComposeKey((k) => k + 1);
  };

  const closeComposer = () => {
    setComposing(null);
    setComposerExpanded(false);
    queryClient.invalidateQueries({ queryKey: ["drafts"] });
    queryClient.invalidateQueries({ queryKey: ["drafts-remote"] });
  };

  // Leaving a folder closes any open composer/draft editor: the reading pane
  // should reflect the folder you navigated to, not a leftover draft editor.
  const firstView = useRef(true);
  useEffect(() => {
    if (firstView.current) {
      firstView.current = false;
      return;
    }
    closeComposer();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [view]);

  const afterMove = () => {
    queryClient.invalidateQueries({ queryKey: ["threads"] });
    queryClient.invalidateQueries({ queryKey: ["quota"] });
    navigate("/mail");
  };

  // Trigger a server-side sync of all folders; refresh the views once the worker
  // has had a moment to poll (live WebSocket events also update them).
  const doRefresh = async () => {
    setRefreshing(true);
    try {
      await api.syncNow();
    } catch {
      /* ignore */
    }
    window.setTimeout(() => {
      for (const key of ["threads", "drafts", "drafts-remote", "quota"]) {
        queryClient.invalidateQueries({ queryKey: [key] });
      }
      setRefreshing(false);
    }, 2500);
  };

  const archive = async () => {
    if (!threadId) return;
    await api.archiveThread(threadId);
    afterMove();
  };

  const trash = async () => {
    if (!threadId) return;
    await api.trashThread(threadId);
    afterMove();
  };

  const restore = async () => {
    if (!threadId) return;
    await api.restoreThread(threadId);
    afterMove();
  };

  const deletePermanent = async () => {
    if (!threadId) return;
    await api.deleteThreadPermanent(threadId);
    afterMove();
  };

  const togglePin = async () => {
    const detail = detailQuery.data;
    if (!detail) return;
    await api.threadFlags(
      detail.id,
      detail.pinned ? [] : ["\\Flagged"],
      detail.pinned ? ["\\Flagged"] : [],
    );
    queryClient.invalidateQueries({ queryKey: ["threads"] });
    queryClient.invalidateQueries({ queryKey: ["thread", detail.id] });
  };

  const openRelative = (delta: number) => {
    const list = threadsRef.current;
    if (list.length === 0) return;
    const idx = list.findIndex((th) => th.id === threadId);
    const next = Math.min(Math.max((idx < 0 ? -1 : idx) + delta, 0), list.length - 1);
    navigate(`/mail/t/${list[next].id}`);
  };

  useKeyboardShortcuts({
    onSearch: () => searchRef.current?.focus(),
    onCompose: () => accountsQuery.data?.[0] && openComposer({ accountId: accountsQuery.data[0].id, kind: "new" }),
    onReply: () => setReplySignal({ kind: "reply", seq: Date.now() }),
    onReplyAll: () => setReplySignal({ kind: "reply_all", seq: Date.now() }),
    onForward: () => setReplySignal({ kind: "forward", seq: Date.now() }),
    onArchive: archive,
    onGoInbox: () => {
      setView("folder:inbox");
      navigate("/mail");
    },
    onEscape: () => setComposing(null),
    onNext: () => openRelative(1),
    onPrev: () => openRelative(-1),
  });

  const accounts = accountsQuery.data ?? [];

  return (
    <div className="flex h-screen bg-app-bg text-app-fg">
      {/* Sidebar */}
      <aside
        style={{ width: collapsed ? COLLAPSED_W : sidebarW }}
        className="flex shrink-0 flex-col border-r border-app-border bg-app-bg"
      >
        <div
          className={`flex pb-1 pt-3 ${
            collapsed ? "flex-col items-center gap-1 px-2" : "items-center justify-between px-3"
          }`}
        >
          {!collapsed && (
            <span className="text-xs font-semibold uppercase tracking-wide text-app-faint">
              {t("common.appName")}
            </span>
          )}
          <div className={`flex items-center gap-1 ${collapsed ? "flex-col" : ""}`}>
            <button
              onClick={() => setCollapsed((v) => !v)}
              title={collapsed ? t("nav.expandSidebar") : t("nav.collapseSidebar")}
              aria-label={collapsed ? t("nav.expandSidebar") : t("nav.collapseSidebar")}
              className="rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
            >
              <Icon name={collapsed ? "show" : "hide"} size={16} />
            </button>
            <ThemeToggle />
          </div>
        </div>
        <div className={`pb-2 ${collapsed ? "px-2" : "px-3"}`}>
          <button
            className="flex w-full items-center justify-center gap-2 rounded-lg bg-app-accent py-2 text-sm font-medium text-app-accent-fg shadow-sm hover:opacity-90"
            title={collapsed ? t("nav.compose") : undefined}
            onClick={() => accounts[0] && openComposer({ accountId: accounts[0].id, kind: "new" })}
          >
            <Icon name="compose" size={16} />
            {!collapsed && t("nav.compose")}
          </button>
        </div>
        <nav className="flex-1 space-y-0.5 overflow-y-auto px-2 py-1 text-sm">
          {FOLDERS.map((f) => (
            <SidebarItem
              key={f.view}
              active={view === f.view}
              collapsed={collapsed}
              title={collapsed ? t(f.label) : undefined}
              onClick={() => {
                setView(f.view);
                navigate("/mail");
              }}
            >
              <Icon name={f.icon} size={18} />
              {!collapsed && t(f.label)}
            </SidebarItem>
          ))}
          {/* Per-account views are hidden entirely when collapsed. */}
          {!collapsed && (
            <>
              <div className="px-3 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-wide text-app-faint">
                {t("settings.accounts")}
              </div>
              {accounts.map((a) => (
                <SidebarItem
                  key={a.id}
                  active={view === `account:${a.id}`}
                  onClick={() => { setView(`account:${a.id}`); navigate("/mail"); }}
                >
                  <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: a.color }} />
                  <span className="truncate">{a.email}</span>
                </SidebarItem>
              ))}
            </>
          )}
        </nav>
        <div className="border-t border-app-border p-2 text-sm">
          <Link
            className={`flex items-center gap-2.5 rounded-lg py-2 text-app-muted hover:bg-app-hover hover:text-app-fg ${
              collapsed ? "justify-center px-0" : "px-3"
            }`}
            title={collapsed ? t("nav.settings") : undefined}
            to="/settings"
          >
            <Icon name="settings" size={16} />
            {!collapsed && t("nav.settings")}
          </Link>
          <button
            className={`flex w-full items-center gap-2.5 rounded-lg py-2 text-left text-app-muted hover:bg-app-hover hover:text-app-fg ${
              collapsed ? "justify-center px-0" : "px-3"
            }`}
            title={collapsed ? t("common.signOut") : undefined}
            onClick={async () => {
              await api.logout();
              queryClient.clear();
              navigate("/login");
            }}
          >
            <Icon name="log-out" size={16} />
            {!collapsed && t("common.signOut")}
          </button>
          {!collapsed && quotaQuery.data && (
            <div
              className="mt-1 border-t border-app-border px-3 pb-1 pt-2 text-xs text-app-faint"
              title={t("nav.storageQuota")}
            >
              {quotaLabel(quotaQuery.data)}
            </div>
          )}
        </div>
      </aside>

      {!collapsed && <Resizer onDelta={(dx) => setSidebarW((w) => clampSidebar(w + dx))} />}

      {/* Message list */}
      <div
        style={{ width: listW }}
        className="flex shrink-0 flex-col border-r border-app-border bg-app-surface"
      >
        <div className="flex h-[52px] shrink-0 items-center border-b border-app-border px-6">
          <input
            ref={searchRef}
            className="w-full rounded-lg border border-app-border bg-app-bg px-3 py-1.5 text-sm text-app-fg placeholder:text-app-faint focus:border-app-accent focus:outline-none"
            placeholder={t("nav.search")}
            value={term}
            onChange={(e) => setTerm(e.target.value)}
          />
        </div>
        {!isDrafts && (
          <div className="flex h-[44px] shrink-0 items-center gap-5 border-b border-app-border bg-app-bg px-6 text-sm">
            <FilterTab active={filter === "all"} onClick={() => setFilter("all")}>
              {t("filter.all")}
            </FilterTab>
            <FilterTab active={filter === "unread"} onClick={() => setFilter("unread")}>
              {t("filter.unread")}
            </FilterTab>
            <FilterTab active={filter === "pinned"} onClick={() => setFilter("pinned")}>
              {t("filter.pinned")}
            </FilterTab>
            <button
              className="-mr-1.5 ml-auto rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
              title={listOrder === "newest" ? t("filter.sortOldest") : t("filter.sortNewest")}
              aria-label={listOrder === "newest" ? t("filter.sortOldest") : t("filter.sortNewest")}
              onClick={() => setListOrder((o) => (o === "newest" ? "oldest" : "newest"))}
            >
              <SortIcon />
            </button>
          </div>
        )}
        <div className="min-h-0 flex-1">
          {isDrafts && !term.trim() ? (
            <DraftsList
              drafts={draftsQuery.data ?? []}
              remoteDrafts={remoteDraftsQuery.data ?? []}
              onOpen={(draft) => openComposer(draftToInit(draft), true)}
              onOpenRemote={async (remote) => {
                // Adopt the server draft into an editable local draft, then open it.
                const draft = await api.adoptDraft(remote.message_id);
                queryClient.invalidateQueries({ queryKey: ["drafts"] });
                queryClient.invalidateQueries({ queryKey: ["drafts-remote"] });
                openComposer(draftToInit(draft), true);
              }}
            />
          ) : (
            <MessageList threads={pageThreads} accounts={accounts} selectedId={threadId} onSelect={(id) => navigate(`/mail/t/${id}`)} />
          )}
        </div>
        <div className="flex items-center justify-between border-t border-app-border px-6 py-1.5 text-xs text-app-muted">
          <button
            className="-ml-1 rounded p-1 text-app-muted hover:bg-app-hover hover:text-app-fg disabled:opacity-60"
            title={t("nav.refresh")}
            aria-label={t("nav.refresh")}
            onClick={doRefresh}
            disabled={refreshing}
          >
            <RefreshIcon spinning={refreshing} />
          </button>
          {!isDrafts && total > 0 ? (
            <div className="flex items-center gap-3">
              <span>
                {pageStart + 1}–{pageEnd} of {total}
              </span>
              <div className="-mr-1 flex items-center gap-0.5">
                <PagerButton
                  disabled={curPage === 0}
                  onClick={() => setPage(curPage - 1)}
                  label={t("pager.prev")}
                  dir="left"
                />
                <PagerButton
                  disabled={pageEnd >= total}
                  onClick={() => setPage(curPage + 1)}
                  label={t("pager.next")}
                  dir="right"
                />
              </div>
            </div>
          ) : (
            <span />
          )}
        </div>
      </div>

      <Resizer onDelta={(dx) => setListW((w) => clampList(w + dx))} />

      {/* Thread pane */}
      <main className="relative min-w-0 flex-1 bg-app-surface">
        {threadId && detailQuery.data ? (
          <div className="flex h-full flex-col">
            <div className="flex h-[52px] shrink-0 items-center gap-1 border-b border-app-border bg-app-surface px-3 text-sm">
              {currentFolder === "archive" ? (
                <>
                  <ToolbarButton onClick={restore}>
                    <Icon name="inbox" size={16} />
                    {t("mail.restore")}
                  </ToolbarButton>
                  <ToolbarButton onClick={trash}>
                    <Icon name="trash" size={16} />
                    {t("mail.delete")}
                  </ToolbarButton>
                </>
              ) : currentFolder === "trash" ? (
                <>
                  <ToolbarButton onClick={restore}>
                    <Icon name="inbox" size={16} />
                    {t("mail.restore")}
                  </ToolbarButton>
                  <ToolbarButton onClick={deletePermanent}>
                    <Icon name="trash" size={16} />
                    {t("mail.delete")}
                  </ToolbarButton>
                </>
              ) : (
                <>
                  <ToolbarButton onClick={archive}>
                    <Icon name="archive" size={16} />
                    {t("mail.archive")}
                  </ToolbarButton>
                  <ToolbarButton onClick={togglePin} active={detailQuery.data.pinned}>
                    <Icon
                      name="pin"
                      size={16}
                      className={detailQuery.data.pinned ? "text-[rgb(220_129_143)]" : ""}
                    />
                    {detailQuery.data.pinned ? t("mail.unpin") : t("mail.pin")}
                  </ToolbarButton>
                  <ToolbarButton onClick={trash}>
                    <Icon name="trash" size={16} />
                    {t("mail.delete")}
                  </ToolbarButton>
                </>
              )}
              <span className="ml-auto text-xs text-app-faint">
                {t("mail.messageCount", { count: detailQuery.data.messages.length })}
              </span>
            </div>
            <div className="min-h-0 flex-1 overflow-hidden">
              <ThreadView
                subject={detailQuery.data.subject}
                messages={detailQuery.data.messages}
                order={detailQuery.data.order}
                mailboxes={mailboxesQuery.data ?? []}
                accounts={accounts}
                replyKindSignal={replySignal}
              />
            </div>
          </div>
        ) : (
          <div className="flex h-full items-center justify-center text-app-faint">
            {t("mail.selectConversation")}
          </div>
        )}

        {composing && (
          <div
            className={
              composerExpanded
                ? "absolute inset-0 z-30"
                : "absolute bottom-0 right-4 z-30 w-[47.5rem] max-w-[calc(100%-2rem)]"
            }
          >
            <Composer
              key={composeKey}
              init={composing}
              expanded={composerExpanded}
              onToggleExpand={() => setComposerExpanded((v) => !v)}
              onClose={closeComposer}
            />
          </div>
        )}
      </main>
    </div>
  );
}

function FilterTab({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      className={`flex h-full items-center border-b-2 ${
        active
          ? "border-app-accent font-semibold text-app-fg"
          : "border-transparent text-app-muted hover:text-app-fg"
      }`}
    >
      {children}
    </button>
  );
}

function PagerButton({
  disabled,
  onClick,
  label,
  dir,
}: {
  disabled: boolean;
  onClick: () => void;
  label: string;
  dir: "left" | "right";
}) {
  return (
    <button
      disabled={disabled}
      onClick={onClick}
      title={label}
      aria-label={label}
      className="rounded p-1 text-app-muted hover:bg-app-hover hover:text-app-fg disabled:pointer-events-none disabled:text-app-faint disabled:opacity-40"
    >
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <path d={dir === "left" ? "M10 4l-4 4 4 4" : "M6 4l4 4-4 4"} />
      </svg>
    </button>
  );
}

function RefreshIcon({ spinning }: { spinning: boolean }) {
  return (
    <svg
      width="15"
      height="15"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      className={spinning ? "animate-spin" : ""}
    >
      <path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9" />
      <path d="M13.5 2v3h-3" />
    </svg>
  );
}

function SortIcon() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.4"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
    >
      <path d="M5 3v10M3 5l2-2 2 2M11 13V3M9 11l2 2 2-2" />
    </svg>
  );
}

function SidebarItem({
  active,
  onClick,
  collapsed = false,
  title,
  children,
}: {
  active: boolean;
  onClick: () => void;
  collapsed?: boolean;
  title?: string;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      title={title}
      className={`flex w-full items-center gap-2.5 rounded-lg py-1.5 text-left ${
        collapsed ? "justify-center px-0" : "px-3"
      } ${
        active ? "bg-app-active font-medium text-app-fg" : "text-app-muted hover:bg-app-hover hover:text-app-fg"
      }`}
    >
      {children}
    </button>
  );
}

function ToolbarButton({
  onClick,
  active = false,
  children,
}: {
  onClick: () => void;
  active?: boolean;
  children: React.ReactNode;
}) {
  return (
    <button
      className={`flex items-center gap-1.5 rounded px-2.5 py-1 hover:bg-app-hover hover:text-app-fg ${
        active ? "text-app-fg" : "text-app-muted"
      }`}
      onClick={onClick}
    >
      {children}
    </button>
  );
}