import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Fragment, useEffect, useMemo, useRef, useState } from "react";

import { languageName, needsTranslation, sameLanguage, translate, useLocale, useT } from "../../i18n";
import type { MessageKey } from "../../i18n/en";
import { personHue } from "../../lib/avatarColor";
import { setDarkMessages, useDarkMessages } from "../../lib/darkMessage";
import { api } from "../../lib/api";
import { printMessages } from "../../lib/print";
import { replyTargets } from "../../lib/replyTargets";
import { useTheme } from "../../lib/theme";
import { useIsMobile } from "../../lib/useIsMobile";
import { getDateLocale, getHour12 } from "../../lib/timeFormat";
import type { AccountOut, MailboxOut, MessageEnvelope } from "../../lib/types";
import { PluginSlot } from "../../plugins/PluginSlot";
import { Composer, type ComposerInit } from "../compose/Composer";
import { Icon } from "../Icon";
import { AvatarImage } from "../SenderAvatar";
import { clearPdfPasswordCache } from "./AttachmentPreview";
import { LabelChips } from "../mail/LabelChips";
import { useSubscriptionActions } from "../list/SubscriptionsList";
import { MessageBody } from "./MessageBody";

// Direction-agnostic thread view (invariant I-5 / SPEC §9.4).
// `messages` is ALWAYS ascending (oldest first); the ONLY branch on `order` is the
// visual reversal below. The composer anchor is attached to the newest message.
export interface ThreadViewProps {
  subject: string;
  messages: MessageEnvelope[];
  order: "asc" | "desc";
  mailboxes?: MailboxOut[];
  accounts?: AccountOut[];
  replyKindSignal?: { kind: string; seq: number };
}

function formatAddress(a: { name: string; email: string } | undefined): string {
  if (!a || !a.email) return "(unknown)";
  return a.name ? `${a.name} (${a.email})` : a.email;
}

function formatList(addrs: { name: string; email: string }[]): string {
  return addrs.length > 0 ? addrs.map(formatAddress).join(", ") : "(no recipient)";
}

function recipientSummary(addrs: { name: string; email: string }[]): string {
  if (addrs.length === 0) return "(no recipient)";
  const first = addrs[0].name || addrs[0].email;
  return addrs.length > 1 ? `${first} +${addrs.length - 1}` : first;
}

function attributionFor(msg: MessageEnvelope): string {
  const d = new Date(msg.date);
  const date = d.toLocaleDateString(getDateLocale(), {
    weekday: "short",
    month: "short",
    day: "numeric",
    year: "numeric",
  });
  const time = d.toLocaleTimeString(getDateLocale(), {
    hour: "numeric",
    minute: "2-digit",
    hour12: getHour12(),
  });
  const who = msg.from_addr[0]?.name || msg.from_addr[0]?.email || "";
  return translate("compose.attribution", { date, time, who });
}

/** The header block above a forwarded message, as mail programs write it:
 *  who sent it (name and address), when, its subject and recipients. */
function forwardHeaderFor(msg: MessageEnvelope, subject: string): string {
  const d = new Date(msg.date);
  const date = d.toLocaleString(getDateLocale(), {
    weekday: "short",
    year: "numeric",
    month: "short",
    day: "numeric",
    hour: "numeric",
    minute: "2-digit",
    hour12: getHour12(),
  });
  const person = (a: { name: string; email: string }) =>
    a.name && a.name !== a.email ? `${a.name} <${a.email}>` : a.email;
  const lines = [
    "---------- Forwarded message ---------",
    `From: ${msg.from_addr.map(person).join(", ")}`,
    `Date: ${date}`,
    `Subject: ${msg.subject || subject}`,
  ];
  if (msg.to_addr.length) lines.push(`To: ${msg.to_addr.map(person).join(", ")}`);
  if (msg.cc_addr.length) lines.push(`Cc: ${msg.cc_addr.map(person).join(", ")}`);
  return lines.join("\n");
}

function buildReplyInit(
  subject: string,
  msg: MessageEnvelope,
  kind: string,
  own: Set<string>,
): ComposerInit {
  const norm = subject.replace(/^\s*(re|fwd?):\s*/i, "");
  const quote = { attribution: attributionFor(msg), messageId: msg.id };
  if (kind === "forward") {
    return {
      accountId: msg.account_id,
      threadId: msg.thread_id,
      replyToMessageId: msg.id,
      kind,
      subject: `Fwd: ${norm}`,
      quote: { attribution: forwardHeaderFor(msg, subject), messageId: msg.id },
      forwardFrom: msg.id,
    };
  }
  const targets = replyTargets(msg, own, kind);
  const to = targets.to.join(", ");
  const cc = targets.cc.join(", ");
  return {
    accountId: msg.account_id,
    threadId: msg.thread_id,
    replyToMessageId: msg.id,
    kind,
    to,
    cc,
    subject: `Re: ${norm}`,
    quote,
  };
}

function initials(msg: MessageEnvelope): string {
  const name = (msg.from_addr[0]?.name || msg.from_addr[0]?.email || "?").trim();
  const words = name.split(/\s+/).filter(Boolean);
  if (words.length >= 2) return (words[0][0] + words[1][0]).toUpperCase();
  return name.slice(0, 1).toUpperCase();
}

// Stable per-sender hue so a sender's avatar + name share a colour (like the mockup).
function hue(msg: MessageEnvelope): number {
  return personHue(msg.from_addr[0]?.email || msg.from_addr[0]?.name || "?");
}

function fmtRelative(iso: string): string {
  const d = new Date(iso);
  const base = d.toLocaleDateString(getDateLocale(), { month: "short", day: "numeric" });
  const diff = Date.now() - d.getTime();
  const mins = Math.round(diff / 60000);
  const hrs = Math.round(diff / 3600000);
  const days = Math.round(diff / 86400000);
  let rel = "";
  if (mins < 1) rel = translate("time.justNow");
  else if (mins < 60) rel = translate("time.minAgo", { count: mins });
  else if (hrs < 24) rel = translate("time.hoursAgo", { count: hrs });
  else if (days < 30) rel = translate("time.daysAgo", { count: days });
  return rel ? `${base} (${rel})` : `${base} ${d.getFullYear()}`;
}

function fmtFull(iso: string): string {
  return new Date(iso).toLocaleString(getDateLocale(), {
    weekday: "short",
    year: "numeric",
    month: "short",
    day: "numeric",
    hour: "numeric",
    minute: "2-digit",
    hour12: getHour12(),
  });
}

// "Unsubscribe" beside the sender of bulk mail (its List-Unsubscribe header),
// as Gmail has it; "Unsubscribed" once done.
function UnsubscribeLink({ message, name }: { message: MessageEnvelope; name: string }) {
  const t = useT();
  const { unsubscribe, dialog } = useSubscriptionActions();
  if (message.unsubscribed) {
    return <span className="shrink-0 text-xs text-app-faint">{t("subs.unsubscribed")}</span>;
  }
  return (
    <>
    {dialog}
    <button
      className="wm-online-only shrink-0 rounded text-xs font-medium text-app-accent hover:underline disabled:opacity-50"
      disabled={unsubscribe.isPending}
      onClick={() =>
        message.subscription_key &&
        message.unsubscribe_via &&
        unsubscribe.mutate({
          key: message.subscription_key,
          name,
          via: message.unsubscribe_via,
          messageId: message.id,
        })
      }
    >
      {t("subs.unsubscribe")}
    </button>
    </>
  );
}

function fmtSize(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

// A message's folder, named as in the sidebar (in the interface language).
const LOCATION_LABEL: Record<string, MessageKey> = {
  inbox: "nav.inbox",
  sent: "nav.sent",
  archive: "nav.archive",
  drafts: "nav.drafts",
  trash: "nav.trash",
  junk: "nav.spam",
};

function ActionsMenu({
  messageId,
  mailboxId,
  onReply,
  onPrint,
  onDelete,
  replyDisabled = false,
  allLabels,
  messageLabels,
  onToggleLabel,
  onCreateLabel,
  translateLanguages,
  translateTo,
  onTranslateTo,
}: {
  messageId: string;
  /** The message's folder: a move gives plugin items a fresh start. */
  mailboxId: string;
  onReply: (kind: string) => void;
  onPrint: () => void;
  onDelete: () => void;
  replyDisabled?: boolean;
  allLabels: string[];
  messageLabels: string[];
  onToggleLabel: (label: string) => void;
  onCreateLabel: (name: string) => void;
  /** Languages a message can be translated into; empty: translation is off. */
  translateLanguages: string[];
  translateTo: string | null;
  onTranslateTo: (code: string | null) => void;
}) {
  const t = useT();
  const { locale } = useLocale();
  const [open, setOpen] = useState(false);
  const [labelsOpen, setLabelsOpen] = useState(false);
  const [translateOpen, setTranslateOpen] = useState(false);
  const [creating, setCreating] = useState(false);
  const [newName, setNewName] = useState("");
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    // Clicking inside the sandboxed message-body iframe doesn't reach document
    // mousedown, but it blurs the parent window — close the menu on that too.
    const onBlur = () => setOpen(false);
    document.addEventListener("mousedown", onDoc);
    window.addEventListener("blur", onBlur);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      window.removeEventListener("blur", onBlur);
    };
  }, [open]);
  useEffect(() => {
    if (!open) { setLabelsOpen(false); setTranslateOpen(false); setCreating(false); setNewName(""); }
  }, [open]);

  const item = (label: string, onClick: () => void, disabled = false) => (
    <button
      disabled={disabled}
      className={`block w-full px-3 py-1.5 text-left text-xs ${
        disabled
          ? "cursor-not-allowed text-app-faint"
          : "text-app-fg hover:bg-app-hover"
      }`}
      onClick={() => {
        setOpen(false);
        onClick();
      }}
    >
      {label}
    </button>
  );

  return (
    <div ref={ref} className="relative">
      <button
        className="wm-online-only flex items-center gap-1 rounded px-1.5 py-1 text-xs text-app-muted hover:bg-app-hover hover:text-app-fg"
        onClick={() => setOpen((v) => !v)}
      >
        {t("mail.actions")}
        <span className="text-[11px]">▾</span>
      </button>
      {/* Always rendered, hidden while closed: plugin items (below) load with
          the message, not when the menu opens — on a slow connection their
          fetch would otherwise hold them back for seconds. */}
      <div
        hidden={!open}
        className="absolute right-0 z-20 mt-1 w-52 overflow-hidden rounded-md border border-app-border bg-app-elevated py-1 shadow-lg"
      >
        {item(t("mail.reply"), () => onReply("reply"), replyDisabled)}
        {item(t("mail.replyAll"), () => onReply("reply_all"), replyDisabled)}
        {item(t("mail.forward"), () => onReply("forward"), replyDisabled)}
        {item(t("mail.forwardAsAttachment"), () => onReply("forward"), replyDisabled)}
        {item(t("mail.print"), onPrint)}
        {translateLanguages.length > 0 && (
          <>
            {/* Translate to…: any language the server has; ✓ the one shown. */}
            <button
              className="flex w-full items-center justify-between px-3 py-1.5 text-left text-xs text-app-fg hover:bg-app-hover"
              onClick={() => setTranslateOpen((v) => !v)}
            >
              {t("mail.translateTo")}
              <span className="text-[11px] text-app-muted">{translateOpen ? "▾" : "▸"}</span>
            </button>
            {translateOpen && (
              <div className="max-h-56 overflow-auto border-y border-app-border bg-app-surface/40">
                {translateTo &&
                  item(t("mail.showOriginal"), () => onTranslateTo(null))}
                {translateLanguages
                  .map((code) => ({ code, name: languageName(code, locale) }))
                  .sort((a, b) => a.name.localeCompare(b.name, locale))
                  .map(({ code, name }) => (
                    <button
                      key={code}
                      className="flex w-full items-center gap-2 px-3 py-1 text-left text-xs text-app-fg hover:bg-app-hover"
                      onClick={() => {
                        setOpen(false);
                        onTranslateTo(code);
                      }}
                    >
                      <span className="w-3 shrink-0 text-app-accent">{translateTo === code ? "✓" : ""}</span>
                      <span className="truncate first-letter:uppercase">{name}</span>
                    </button>
                  ))}
              </div>
            )}
          </>
        )}
        <div className="my-1 border-t border-app-border" />
        {/* Labels submenu: multi-select checkboxes (menu stays open) + create new. */}
        <button
          className="flex w-full items-center justify-between px-3 py-1.5 text-left text-xs text-app-fg hover:bg-app-hover"
          onClick={() => setLabelsOpen((v) => !v)}
        >
          {t("mail.labels")}
          <span className="text-[11px] text-app-muted">{labelsOpen ? "▾" : "▸"}</span>
        </button>
        {labelsOpen && (
          <div className="max-h-52 overflow-auto border-y border-app-border bg-app-surface/40">
            {allLabels.map((l) => (
              <label
                key={l}
                className="flex cursor-pointer items-center gap-2 px-3 py-1 text-xs text-app-fg hover:bg-app-hover"
              >
                <input
                  type="checkbox"
                  className="h-3.5 w-3.5 accent-app-accent"
                  checked={messageLabels.includes(l)}
                  onChange={() => onToggleLabel(l)}
                />
                <span className="truncate">{l}</span>
              </label>
            ))}
            {allLabels.length === 0 && (
              <div className="px-3 py-1.5 text-xs text-app-faint">{t("mail.noLabels")}</div>
            )}
            {creating ? (
              <input
                autoFocus
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && newName.trim()) {
                    onCreateLabel(newName.trim());
                    setNewName("");
                    setCreating(false);
                  } else if (e.key === "Escape") {
                    setCreating(false);
                    setNewName("");
                  }
                }}
                placeholder={t("mail.labelName")}
                className="m-1 w-[calc(100%-0.5rem)] rounded border border-app-border bg-app-surface px-2 py-1 text-xs outline-none focus:border-app-accent"
              />
            ) : (
              <button
                className="block w-full px-3 py-1.5 text-left text-xs text-app-accent hover:bg-app-hover"
                onClick={() => setCreating(true)}
              >
                {t("mail.createLabel")}
              </button>
            )}
          </div>
        )}
        {/* Plugin verbs that belong in the menu rather than on the header
            (SPEC §11.3 message.actions.menu). Clicking anything inside closes
            the menu, so a bundle only has to perform its action. */}
        <div onClick={() => setOpen(false)}>
          <PluginSlot
            key={`${messageId}:${mailboxId}`}
            name="message.actions.menu"
            props={{ messageId }}
          />
        </div>
        <div className="my-1 border-t border-app-border" />
        {item(t("mail.delete"), onDelete)}
      </div>
    </div>
  );
}

function MessageItem({
  message,
  expanded,
  location,
  align,
  accentColor,
  boxClassName,
  zIndex,
  showReplyBar,
  canReply,
  alsoIn,
  onToggle,
  onReply,
  onMailto,
  onToggleRead,
  onPrint,
  onDelete,
  innerRef,
  allLabels,
  messageLabels,
  onToggleLabel,
  onCreateLabel,
  ownAddresses,
}: {
  message: MessageEnvelope;
  expanded: boolean;
  location: string;
  align: "start" | "end";
  accentColor: string | null;
  boxClassName: string;
  zIndex: number;
  showReplyBar: boolean;
  canReply: boolean;
  alsoIn: string[];
  onToggle: () => void;
  onReply: (kind: string) => void;
  onMailto: (email: string) => void;
  onToggleRead: () => void;
  onPrint: () => void;
  onDelete: () => void;
  innerRef?: (el: HTMLDivElement | null) => void;
  allLabels: string[];
  messageLabels: string[];
  onToggleLabel: (label: string) => void;
  onCreateLabel: (name: string) => void;
  ownAddresses: Set<string>;
}) {
  const t = useT();
  const { locale } = useLocale();
  const [showDetails, setShowDetails] = useState(false);
  // Translation (app/translation.py): the message's languages, as the server
  // found them ("zh-Hans,pl,en"), and the language it is shown in (null: as sent).
  const [language, setLanguage] = useState(message.content_language ?? "");
  const [translateTo, setTranslateTo] = useState<string | null>(null);
  const translation = useQuery({
    queryKey: ["translation-languages"],
    queryFn: api.translationLanguages,
    staleTime: 10 * 60_000,
  });
  const translateCodes = translation.data?.available
    ? translation.data.languages.map((l) => l.code)
    : [];
  const offerTranslate =
    translateCodes.length > 0 &&
    (translateTo !== null || needsTranslation(language, locale));
  const target = translateCodes.find((c) => sameLanguage(c, locale)) ?? null;
  const replyBtn = (kind: string, label: string, icon: string) => (
    <button
      className="flex items-center gap-1.5 rounded-md border border-app-border px-3 py-1.5 text-xs text-app-fg hover:bg-app-hover"
      onClick={() => onReply(kind)}
    >
      <Icon name={icon} size={14} />
      {label}
    </button>
  );
  const h = hue(message);
  // Our own IMAP accounts use their assigned colour; everyone else a stable hue.
  const avatarBg = accentColor ?? `hsl(${h} 45% 45%)`;
  const nameColor = accentColor ?? `hsl(${h} 55% 62%)`;
  const avatar = () => (
    <span
      className="relative flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full text-sm font-semibold text-white"
      style={{ backgroundColor: avatarBg }}
    >
      {initials(message)}
      <AvatarImage email={message.from_addr[0]?.email} />
    </span>
  );
  const senderName = (
    <span className="font-semibold" style={{ color: nameColor }}>
      {message.from_addr[0]?.name || message.from_addr[0]?.email || "(unknown)"}
    </span>
  );
  // Reply all only when it would reach more than one person (not counting you).
  const allTargets = replyTargets(message, ownAddresses, "reply_all");
  const multiRecipient = allTargets.to.length + allTargets.cc.length > 1;

  return (
    <div
      data-testid="message"
      data-message-id={message.id}
      ref={innerRef}
      style={{ zIndex }}
      className={`relative ${boxClassName}`}
    >
      {!expanded ? (
        // Collapsed: single-line row (avatar · sender · inline snippet · date).
        // Aligned to the visible (non-overlapped) edge of the stacked card.
        <button
          className={`flex w-full gap-3 px-4 py-2.5 text-left hover:bg-app-hover ${
            align === "end" ? "items-end" : "items-start"
          }`}
          onClick={onToggle}
        >
          {avatar()}
          <span className="min-w-0 flex-1 truncate text-[15px]">
            {senderName}
            <span className="ml-2 text-xs text-app-faint">{message.snippet}</span>
          </span>
          <span className="shrink-0 text-xs text-app-faint">{fmtRelative(message.date)}</span>
        </button>
      ) : (
        <div>
          <div className="flex items-start gap-3 px-4 pb-2 pt-3">
            {avatar()}
            <div className="min-w-0 flex-1">
              {/* line 1: sender + email · Unsubscribe ··········· date (the row collapses) */}
              <div className="flex w-full items-baseline gap-2">
                <button className="min-w-0 truncate text-left text-[15px]" onClick={onToggle}>
                  {senderName}
                  {message.from_addr[0]?.email && (
                    <span className="text-app-faint"> &lt;{message.from_addr[0].email}&gt;</span>
                  )}
                </button>
                {message.subscription_key && message.unsubscribe_via && (
                  <UnsubscribeLink
                    message={message}
                    name={message.from_addr[0]?.name || message.from_addr[0]?.email || ""}
                  />
                )}
                <button
                  className="min-w-4 flex-1 self-stretch"
                  onClick={onToggle}
                  tabIndex={-1}
                  aria-hidden
                />
                <button className="shrink-0 text-xs text-app-faint" onClick={onToggle}>
                  {fmtRelative(message.date)}
                </button>
              </div>
              {/* line 2: to … ▼   ·············   location ○ reply actions */}
              <div className="mt-0.5 flex items-center justify-between gap-2">
                <button
                  className="flex min-w-0 items-center gap-1 text-left text-xs text-app-muted"
                  onClick={() => setShowDetails((v) => !v)}
                  aria-expanded={showDetails}
                >
                  <span className="truncate">
                    {t("mail.to")} {recipientSummary(message.to_addr)}
                  </span>
                  <span className="text-[11px] text-app-faint">{showDetails ? "▲" : "▼"}</span>
                </button>
                <div className="flex shrink-0 items-center gap-3 text-xs">
                  {location && <span className="font-semibold text-app-fg">{location}</span>}
                  <button
                    title={t("mail.markReadUnread")}
                    aria-label={t("mail.markReadUnread")}
                    onClick={onToggleRead}
                    className="wm-online-only grid h-4 w-4 place-items-center"
                  >
                    <span
                      className={`h-3 w-3 rounded-full border ${
                        message.is_unread
                          ? "border-app-accent bg-app-accent"
                          : "border-app-faint"
                      }`}
                    />
                  </button>
                  {canReply && (
                    <button
                      className="flex items-center gap-1 text-app-muted hover:text-app-fg"
                      onClick={() => onReply(multiRecipient ? "reply_all" : "reply")}
                    >
                      <Icon name={multiRecipient ? "reply-all" : "reply"} size={14} />
                      {multiRecipient ? t("mail.replyAll") : t("mail.reply")}
                    </button>
                  )}
                  {offerTranslate && (target || translateTo) && (
                    <button
                      className="wm-online-only flex items-center gap-1 text-app-muted hover:text-app-fg"
                      onClick={() => setTranslateTo(translateTo ? null : target)}
                    >
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                        <path d="M4 5h9M8.5 3v2M6 5c.6 3.4 2.6 6 6 7.5M11 5c-.6 3.4-2.8 6.3-7 8" />
                        <path d="M13 21l4-10 4 10M14.5 17.5h5" />
                      </svg>
                      {translateTo ? t("mail.showOriginal") : t("mail.translate")}
                    </button>
                  )}
                  <ActionsMenu
                    messageId={message.id}
                    mailboxId={message.mailbox_id}
                    translateLanguages={translateCodes}
                    translateTo={translateTo}
                    onTranslateTo={setTranslateTo}
                    onReply={onReply}
                    onPrint={onPrint}
                    onDelete={onDelete}
                    replyDisabled={!canReply}
                    allLabels={allLabels}
                    messageLabels={messageLabels}
                    onToggleLabel={onToggleLabel}
                    onCreateLabel={onCreateLabel}
                  />
                  {/* Plugin-contributed per-message actions (SPEC §11.3 message.actions). */}
                  <PluginSlot name="message.actions" props={{ messageId: message.id }} />
                </div>
              </div>
              {alsoIn.length > 0 && (
                <div className="mt-0.5 truncate text-xs text-app-faint">
                  {t("mail.alsoIn")} {alsoIn.join(", ")}
                </div>
              )}
              {showDetails && (
                <dl className="mt-2 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-t border-app-border pt-2 text-xs text-app-muted">
                  <dt className="text-app-faint">{t("mail.from")}</dt>
                  <dd className="truncate">{formatList(message.from_addr)}</dd>
                  <dt className="text-app-faint">{t("mail.to")}</dt>
                  <dd className="truncate">{formatList(message.to_addr)}</dd>
                  {message.cc_addr.length > 0 && (
                    <>
                      <dt className="text-app-faint">Cc</dt>
                      <dd className="truncate">{formatList(message.cc_addr)}</dd>
                    </>
                  )}
                  <dt className="text-app-faint">{t("mail.subjectLabel")}</dt>
                  <dd className="truncate">{message.subject || "(no subject)"}</dd>
                  <dt className="text-app-faint">{t("mail.dateLabel")}</dt>
                  <dd>{fmtFull(message.date)}</dd>
                  <dt className="text-app-faint">{t("mail.sizeLabel")}</dt>
                  <dd>{fmtSize(message.size_bytes)}</dd>
                </dl>
              )}
            </div>
          </div>
          {/* Plugin-contributed per-message banner (SPEC §11.3 message.banner). */}
          <PluginSlot
            name="message.banner"
            props={{ messageId: message.id, hasAttachments: message.has_attachments }}
          />
          <div className="px-4 pb-3">
            <MessageBody
              message={message}
              onMailto={onMailto}
              translateTo={translateTo}
              onLanguage={setLanguage}
              onShowOriginal={() => setTranslateTo(null)}
            />
          </div>
          {showReplyBar && canReply && (
            <div className="flex gap-2 border-t border-app-border px-4 py-3">
              {replyBtn("reply", t("mail.reply"), "reply")}
              {replyBtn("reply_all", t("mail.replyAll"), "reply-all")}
              {replyBtn("forward", t("mail.forward"), "forward")}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export function ThreadView({
  subject,
  messages,
  order,
  mailboxes,
  accounts,
  replyKindSignal,
}: ThreadViewProps) {
  const t = useT();
  const queryClient = useQueryClient();
  const newest = messages.length > 0 ? messages[messages.length - 1] : undefined;

  const defaultExpanded = useMemo(() => {
    const ids = new Set<string>();
    for (const m of messages) if (m.is_unread) ids.add(m.id);
    if (newest) ids.add(newest.id);
    return ids;
  }, [messages, newest]);

  const [expanded, setExpanded] = useState<Set<string>>(defaultExpanded);
  useEffect(() => setExpanded(defaultExpanded), [defaultExpanded]);

  const [composing, setComposing] = useState<{ anchorId: string; init: ComposerInit } | null>(null);

  const flags = useMutation({
    mutationFn: ({ id, add, remove }: { id: string; add: string[]; remove: string[] }) =>
      api.messageFlags(id, add, remove),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["thread"] });
      queryClient.invalidateQueries({ queryKey: ["threads"] });
      // Mark read/unread changes the Inbox unread badge.
      queryClient.invalidateQueries({ queryKey: ["folder-counts"] });
    },
  });

  // --- labels: per-message storage + a thread union for display (chips + list) ---
  const messageIds = useMemo(() => messages.map((m) => m.id), [messages]);
  const threadId = messages[0]?.thread_id ?? null;
  // Forget remembered protected-PDF passwords when the open thread changes or closes.
  useEffect(() => () => clearPdfPasswordCache(), [threadId]);
  const allLabelsQuery = useQuery({ queryKey: ["labels-all"], queryFn: api.labelsAll });
  const msgLabelsQuery = useQuery({
    queryKey: ["message-labels", messageIds],
    queryFn: () => api.messageLabelsBatch(messageIds),
    enabled: messageIds.length > 0,
  });
  const allLabels = allLabelsQuery.data ?? [];
  const msgLabels = msgLabelsQuery.data ?? {};
  const threadLabels = useMemo(
    () => [...new Set(Object.values(msgLabels).flat())].sort((a, b) => a.localeCompare(b)),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [msgLabelsQuery.data],
  );
  // Recompute + persist the thread's label union (list chips read this), then tell
  // the sidebar + other queries a label change happened.
  const persistUnionAndNotify = async () => {
    const fresh = await api.messageLabelsBatch(messageIds);
    const union = [...new Set(Object.values(fresh).flat())].sort((a, b) => a.localeCompare(b));
    if (threadId) await api.setThreadLabels(threadId, union);
  };
  const onLabelsChanged = () => {
    queryClient.invalidateQueries({ queryKey: ["message-labels"] });
    queryClient.invalidateQueries({ queryKey: ["thread-labels"] });
    queryClient.invalidateQueries({ queryKey: ["labels-all"] });
    queryClient.invalidateQueries({ queryKey: ["threads"] });
    window.dispatchEvent(new Event("webmail:labels-changed"));
  };
  const applyLabels = useMutation({
    mutationFn: async ({ messageId, labels }: { messageId: string; labels: string[] }) => {
      await api.setMessageLabels(messageId, labels);
      await persistUnionAndNotify();
    },
    onSuccess: onLabelsChanged,
  });
  const removeThreadLabel = useMutation({
    mutationFn: async (label: string) => {
      for (const m of messages) {
        const cur = msgLabels[m.id] ?? [];
        if (cur.includes(label)) await api.setMessageLabels(m.id, cur.filter((x) => x !== label));
      }
      await persistUnionAndNotify();
    },
    onSuccess: onLabelsChanged,
  });
  const toggleLabel = (messageId: string, label: string) => {
    const cur = msgLabels[messageId] ?? [];
    const next = cur.includes(label) ? cur.filter((x) => x !== label) : [...cur, label];
    applyLabels.mutate({ messageId, labels: next });
  };
  const createLabel = async (name: string, messageId: string) => {
    await api.labelsCreate(name);
    toggleLabel(messageId, name);
  };
  const move = useMutation({
    mutationFn: ({ id, mailboxId }: { id: string; mailboxId: string }) =>
      api.moveMessage(id, mailboxId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["thread"] });
      queryClient.invalidateQueries({ queryKey: ["threads"] });
      queryClient.invalidateQueries({ queryKey: ["folder-counts"] });
    },
  });

  const specialUse = useMemo(() => {
    const m = new Map<string, string | null>();
    for (const mb of mailboxes ?? []) m.set(mb.id, mb.special_use);
    return m;
  }, [mailboxes]);
  const locationFor = (msg: MessageEnvelope) => {
    const su = specialUse.get(msg.mailbox_id);
    if (!su) return "";
    return LOCATION_LABEL[su] ? t(LOCATION_LABEL[su]) : su.charAt(0).toUpperCase() + su.slice(1);
  };
  const trashFor = (accountId: string) =>
    (mailboxes ?? []).find((m) => m.account_id === accountId && m.special_use === "trash")?.id;

  const accountColor = useMemo(() => {
    const m = new Map<string, string>();
    for (const a of accounts ?? []) m.set(a.email.toLowerCase(), a.color);
    return m;
  }, [accounts]);
  // Your own addresses (every account's): replies never go back to them.
  const ownAddresses = useMemo(() => new Set(accountColor.keys()), [accountColor]);
  const accentFor = (msg: MessageEnvelope) =>
    accountColor.get((msg.from_addr[0]?.email ?? "").toLowerCase()) ?? null;

  const toggleRead = (msg: MessageEnvelope) =>
    flags.mutate(
      msg.is_unread ? { id: msg.id, add: ["\\Seen"], remove: [] } : { id: msg.id, add: [], remove: ["\\Seen"] },
    );
  const deleteMessage = (msg: MessageEnvelope) => {
    const trash = trashFor(msg.account_id);
    if (trash) move.mutate({ id: msg.id, mailboxId: trash });
  };

  const openReply = (msg: MessageEnvelope, kind: string) => {
    if (specialUse.get(msg.mailbox_id) === "trash") return; // no reply/forward from Trash
    setExpanded((prev) => new Set(prev).add(msg.id));
    setComposing({ anchorId: msg.id, init: buildReplyInit(subject, msg, kind, ownAddresses) });
  };

  // A mailto: link in the message body opens a fresh composer to that address,
  // sent from the account this message belongs to.
  const openMailto = (msg: MessageEnvelope, email: string) => {
    setExpanded((prev) => new Set(prev).add(msg.id));
    setComposing({
      anchorId: msg.id,
      init: { accountId: msg.account_id, kind: "new", to: email, subject: "" },
    });
  };

  useEffect(() => {
    if (replyKindSignal && newest) openReply(newest, replyKindSignal.kind);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [replyKindSignal?.seq]);

  const newestRef = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    newestRef.current?.scrollIntoView?.({ block: "nearest" });
  }, [newest?.id]);

  const visual = order === "asc" ? messages : [...messages].reverse();
  const allExpanded = messages.length > 0 && messages.every((m) => expanded.has(m.id));

  const toggle = (id: string) =>
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  // Default action expands everything; collapsing leaves only the latest message open.
  const toggleAll = () =>
    setExpanded(
      allExpanded ? new Set(newest ? [newest.id] : []) : new Set(messages.map((m) => m.id)),
    );

  const composerRef = useRef<HTMLDivElement | null>(null);
  // On a phone, reply/reply-all/forward open full screen rather than inline.
  const mobile = useIsMobile();
  const resolvedTheme = useTheme().resolved;
  const darkMessages = useDarkMessages();
  // Bring the inline composer into view when it opens (reply/reply-all/forward).
  useEffect(() => {
    if (composing && !mobile) {
      composerRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  }, [composing, mobile]);

  const composerFor = (id: string) =>
    composing?.anchorId === id ? (
      mobile ? (
        <div className="fixed inset-0 z-50 bg-app-elevated pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)]">
          <Composer init={composing.init} onClose={() => setComposing(null)} fullWindow />
        </div>
      ) : (
        <div ref={composerRef} className="px-4 py-3">
          <Composer init={composing.init} onClose={() => setComposing(null)} />
        </div>
      )
    ) : null;

  return (
    <div data-testid="thread-view" className="flex h-full flex-col overflow-y-auto bg-app-bg">
      <div className="sticky top-0 z-10 flex h-[52px] shrink-0 items-center justify-between gap-2 border-b border-app-border bg-app-surface px-4">
        <div className="flex min-w-0 items-center gap-2">
          <h2 className="truncate text-[17px] font-semibold text-app-fg">{subject || "(no subject)"}</h2>
          <LabelChips labels={threadLabels} onRemove={(l) => removeThreadLabel.mutate(l)} />
        </div>
        <div className="flex shrink-0 items-center gap-1">
          {/* Dark message mode (lib/darkMessage.ts) — only the dark theme has it. */}
          {resolvedTheme === "dark" && (
            <button
              role="switch"
              aria-checked={darkMessages}
              className="flex items-center gap-1.5 rounded px-1.5 py-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
              title={darkMessages ? t("mail.darkMessagesOn") : t("mail.darkMessagesOff")}
              aria-label={t("mail.darkMessages")}
              onClick={() => setDarkMessages(!darkMessages)}
            >
              <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
              </svg>
              <span
                aria-hidden
                className={`relative inline-block h-4 w-7 rounded-full transition-colors ${
                  darkMessages ? "bg-app-accent" : "bg-app-border"
                }`}
              >
                <span
                  className={`absolute top-0.5 h-3 w-3 rounded-full bg-white shadow transition-[left] ${
                    darkMessages ? "left-[14px]" : "left-0.5"
                  }`}
                />
              </span>
            </button>
          )}
          <button
            className="flex items-center justify-center rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
            title={t("mail.print")}
            aria-label={t("mail.print")}
            onClick={() => void printMessages(subject, visual)}
          >
            <Icon name="print" size={16} />
          </button>
          <button
            className="flex items-center justify-center rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
            title={allExpanded ? t("mail.collapseAll") : t("mail.expandAll")}
            aria-label={allExpanded ? t("mail.collapseAll") : t("mail.expandAll")}
            onClick={toggleAll}
          >
            <Icon name={allExpanded ? "collapse-all" : "expand-all"} size={16} />
          </button>
        </div>
      </div>
      <div className="p-3">
        {visual.map((message, i) => {
          const isNewest = Boolean(newest && newest.id === message.id);
          const isExpanded = expanded.has(message.id);
          const prev = i > 0 ? visual[i - 1] : undefined;
          const prevCollapsed = prev ? !expanded.has(prev.id) : false;
          // Cards overlap by a negative top margin (tuck up under the card above),
          // with the newer card kept on top by z-index. The card above is OLDER in
          // oldest-first but NEWER in newest-first, so the rule differs by order:
          //  - oldest-first: an expanded card tucks up over the older card above it
          //    (its own top stays clear). Only overlap a collapsed card above.
          //  - newest-first: the card above is newer, so tucking an expanded card up
          //    would hide its header under that newer card. Only collapsed cards tuck
          //    up; an expanded card keeps its gap, so its top stays clear of the newer
          //    message and the older card BELOW tucks under it instead.
          const overlap = order === "desc" ? !isExpanded : prevCollapsed;
          const margin = i === 0 ? "" : overlap ? "-mt-[20px]" : "mt-2";
          const z = order === "asc" ? i + 1 : visual.length - i;
          const boxClassName = `${margin} rounded-lg border border-app-border bg-app-surface ${
            isExpanded ? "" : "shadow-sm"
          }`;
          // Reply/Reply-all/Forward make no sense on a trashed message.
          const canReply = specialUse.get(message.mailbox_id) !== "trash";
          const alsoIn = (message.also_in_account_ids ?? [])
            .map((id) => accounts?.find((a) => a.id === id)?.email)
            .filter((e): e is string => Boolean(e));
          return (
            <Fragment key={message.id}>
              <MessageItem
                message={message}
                expanded={isExpanded}
                location={locationFor(message)}
                align={order === "asc" ? "start" : "end"}
                accentColor={accentFor(message)}
                boxClassName={boxClassName}
                zIndex={z}
                showReplyBar={isNewest && composing?.anchorId !== message.id}
                canReply={canReply}
                alsoIn={alsoIn}
                onToggle={() => toggle(message.id)}
                onReply={(kind) => openReply(message, kind)}
                onMailto={(email) => openMailto(message, email)}
                onToggleRead={() => toggleRead(message)}
                onPrint={() => void printMessages(subject, [message])}
                onDelete={() => deleteMessage(message)}
                innerRef={isNewest ? (el) => (newestRef.current = el) : undefined}
                allLabels={allLabels}
                messageLabels={msgLabels[message.id] ?? []}
                onToggleLabel={(l) => toggleLabel(message.id, l)}
                onCreateLabel={(name) => void createLabel(name, message.id)}
                ownAddresses={ownAddresses}
              />
              {isNewest && (
                <div data-testid="composer-anchor">
                  {composing?.anchorId === message.id ? composerFor(message.id) : null}
                </div>
              )}
              {composing?.anchorId === message.id && !isNewest && composerFor(message.id)}
            </Fragment>
          );
        })}
      </div>
    </div>
  );
}