"use client";

import React, { useState, useEffect, useRef, useCallback } from "react";
import { useFocusTrap } from "@/hooks/use-focus-trap";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { X, Paperclip, Send, Save, Check, Loader2, AlertCircle, FileText, BookmarkPlus, ShieldCheck, Lock, CalendarClock, ChevronDown, MailCheck } from "lucide-react";
import { cn, formatFileSize, formatDateTime, generateUUID } from "@/lib/utils";
import { debug } from "@/lib/debug";
import { toast } from "@/stores/toast-store";
import { useContextMenu } from "@/hooks/use-context-menu";
import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
import { sanitizeSignatureHtml, sanitizeEmailHtml } from "@/lib/email-sanitization";
import { buildReplySubject, buildForwardSubject } from "@/lib/subject-prefix";
import { isFilePreviewable } from "@/lib/file-preview";
import { buildQuotedHtmlBlock, serializeEditorContent } from "@/components/email/quoted-html";
import { emailHooks, contactHooks } from "@/lib/plugin-hooks";
import type { OutgoingEmail, RecipientSuggestion } from "@/lib/plugin-types";
import { useAuthStore } from "@/stores/auth-store";
import { useIdentityStore } from "@/stores/identity-store";
import { useProMultiAccountIdentities, stripCrossAccountIdentityPrefix } from "@/hooks/use-pro-multi-account-identities";
import { useAccountStore } from "@/stores/account-store";
import { useSmimeStore } from "@/stores/smime-store";
import { useEmailStore } from "@/stores/email-store";
import { useSettingsStore } from "@/stores/settings-store";
import { buildMimeMessage, wrapCmsAsSmimeMessage } from "@/lib/smime/mime-builder";
import type { MimeAttachment } from "@/lib/smime/mime-builder";
import { smimeSign } from "@/lib/smime/smime-sign";
import { PluginSlot } from "@/components/plugins/plugin-slot";
import { Avatar } from "@/components/ui/avatar";
import { FilePreviewModal } from "@/components/files/file-preview-modal";
import { smimeEncrypt } from "@/lib/smime/smime-encrypt";
import { useContactStore } from "@/stores/contact-store";
import { useTemplateStore } from "@/stores/template-store";
import { SubAddressHelper } from "@/components/identity/sub-address-helper";
import { generateSubAddress } from "@/lib/sub-addressing";
import { substitutePlaceholders } from "@/lib/template-utils";
import { TemplatePicker } from "@/components/templates/template-picker";
import { TemplateForm } from "@/components/templates/template-form";
import type { EmailTemplate } from "@/lib/template-types";
import { appendPlainTextSignature, getPlainTextSignature } from "@/lib/signature-utils";
import { resolveReplyFrom } from "@/lib/reply-identity";
import { computeReplyThreadingHeaders } from "@/lib/email-threading";
import {
  rewriteCidImagesForEditor,
  replaceInlineImagePlaceholders,
  formatRecipient,
  parseRecipient,
  parseRecipientList,
  formatRecipientList,
  type Recipient,
} from "@/lib/email-composer-utils";
import { RichTextEditor } from "@/components/email/rich-text-editor";
import type { Editor } from "@tiptap/react";
import { htmlToPlainText as htmlToPlainTextShared } from "@/lib/html-to-text";

/**
 * Derives the text/plain alternative from the composer's HTML body, preserving
 * line structure from block elements and <br> tags. Paragraph spacing is on so
 * <p> blocks are separated by a blank line, matching their visual rendering (#421).
 */
function htmlToPlainText(html: string): string {
  return htmlToPlainTextShared(html, { paragraphSpacing: true });
}

/**
 * Build a floating drag image showing the recipient's address, mirroring the
 * email-list drag preview so dragging a chip feels consistent. The element is
 * positioned off-screen; the browser snapshots it for the drag cursor.
 */
function createChipDragPreview(label: string): HTMLElement {
  const preview = document.createElement("div");
  preview.className = "drag-preview";
  preview.style.cssText = `
    position: fixed;
    top: -9999px;
    left: 0;
    padding: 4px 12px;
    background-color: var(--color-primary, #3b82f6);
    color: var(--color-primary-foreground, #ffffff);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    font-weight: 500;
    z-index: 9999;
    white-space: nowrap;
    pointer-events: none;
  `;
  preview.textContent = label;
  document.body.appendChild(preview);
  return preview;
}

export interface ComposerDraftData {
  to: string;
  cc: string;
  bcc: string;
  subject: string;
  body: string;
  showCc: boolean;
  showBcc: boolean;
  selectedIdentityId: string | null;
  subAddressTag: string;
  mode: 'compose' | 'reply' | 'replyAll' | 'forward';
  replyTo?: EmailComposerProps['replyTo'];
  draftId: string | null;
  /** When set, overrides the header From: - sent through the selected identity's envelope. */
  fromOverrideEmail?: string;
  fromOverrideName?: string;
  fromOverrideEnabled?: boolean;
}

interface EmailComposerProps {
  onSend?: (data: {
    to: string[];
    cc: string[];
    bcc: string[];
    subject: string;
    body: string;
    htmlBody?: string;
    draftId?: string;
    fromEmail?: string;
    fromName?: string;
    identityId?: string;
    envelopeMailFrom?: string;
    /** Local account ID owning the selected identity. Set when the user
     *  picked an identity from a non-active account in the Pro multi-
     *  account dropdown; parents should send through that account's
     *  client instead of the currently-active one. */
    localAccountId?: string;
    attachments?: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }>;
    inReplyTo?: string[];
    references?: string[];
    delayedUntil?: string;
    requestReadReceipt?: boolean;
  }) => void | Promise<void>;
  onScheduledSendCreated?: () => void | Promise<void>;
  onClose?: () => void;
  onDiscardDraft?: (draftId: string) => void;
  onSaveState?: (data: ComposerDraftData) => void;
  className?: string;
  initialDraftText?: string;
  initialData?: ComposerDraftData | null;
  mode?: 'compose' | 'reply' | 'replyAll' | 'forward';
  replyTo?: {
    from?: { email?: string; name?: string }[];
    replyToAddresses?: { email?: string; name?: string }[];
    to?: { email?: string; name?: string }[];
    cc?: { email?: string; name?: string }[];
    bcc?: { email?: string; name?: string }[];
    subject?: string;
    body?: string;
    htmlBody?: string;
    receivedAt?: string;
    accountId?: string;
    attachments?: Array<{ blobId: string; name?: string; type: string; size: number; cid?: string; disposition?: string }>;
    // Threading: parent's Message-ID and References, used to set RFC 5322
    // In-Reply-To and References on outgoing replies. See #234.
    messageId?: string;
    inReplyTo?: string[];
    references?: string[];
    // Pre-built quote header block. Supplied by the composer opener after it
    // runs emailHooks.onBuildQuoteHeader through plugin transforms. When set,
    // the composer uses these verbatim instead of building its own default
    // "On X, Y wrote:" / "---------- Forwarded message ----------" block.
    quoteHeaderHtml?: string;
    quoteHeaderText?: string;
    /** Mirror of QuoteHeader.wrapInBlockquote. Defaults to true. */
    quoteWrapInBlockquote?: boolean;
  };
}

type ComposerAttachment = {
  file?: File;
  name: string;
  type: string;
  size: number;
  blobId?: string;
  uploading?: boolean;
  error?: boolean;
  abortController?: AbortController;
};

type SignatureIdentityLike = {
  htmlSignature?: string;
  textSignature?: string;
} | null | undefined;

// Render the embedded signature for "above quote" mode. Bracketed with
// `data-signature-block` marker paragraphs so we can swap the inner content
// when the user switches identity without losing the surrounding draft or
// quoted message. The markers are preserved through TipTap by the
// StyledParagraph extension.
function buildEmbeddedSignatureHtml(
  identity: SignatureIdentityLike,
  options: { embed: boolean; separator: boolean }
): string {
  if (!options.embed) return '';
  const startMarker = options.separator
    ? `<p data-signature-block="separator">-- </p>`
    : `<p data-signature-block="start"></p>`;
  const endMarker = `<p data-signature-block="end"></p>`;
  if (identity?.htmlSignature) {
    return `${startMarker}${sanitizeSignatureHtml(identity.htmlSignature)}${endMarker}`;
  }
  if (identity?.textSignature) {
    const escaped = identity.textSignature
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\n/g, '<br>');
    return `${startMarker}<p>${escaped}</p>${endMarker}`;
  }
  return '';
}

function formatLocalDateTimeInput(date: Date): string {
  const pad = (value: number) => String(value).padStart(2, '0');
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
}

function getDefaultScheduleValue(): string {
  const tomorrowAtEight = new Date();
  tomorrowAtEight.setDate(tomorrowAtEight.getDate() + 1);
  tomorrowAtEight.setHours(8, 0, 0, 0);
  return formatLocalDateTimeInput(tomorrowAtEight);
}

export function EmailComposer({
  onSend,
  onScheduledSendCreated,
  onClose,
  onDiscardDraft,
  onSaveState,
  className,
  initialDraftText,
  initialData,
  mode = 'compose',
  replyTo
}: EmailComposerProps) {
  const t = useTranslations('email_composer');
  const tCommon = useTranslations('common');
  const tQuote = useTranslations('quote_header');
  const timeFormat = useSettingsStore((state) => state.timeFormat);
  const plainTextMode = useSettingsStore((state) => state.plainTextMode);
  const subAddressDelimiter = useSettingsStore((state) => state.subAddressDelimiter);
  const autoSelectReplyIdentity = useSettingsStore((state) => state.autoSelectReplyIdentity);
  const attachmentReminderEnabled = useSettingsStore((state) => state.attachmentReminderEnabled);
  const attachmentReminderKeywords = useSettingsStore((state) => state.attachmentReminderKeywords);
  const sendDelaySeconds = useSettingsStore((state) => state.sendDelaySeconds);
  const signaturePosition = useSettingsStore((state) => state.signaturePosition);
  const signatureSeparatorEnabled = useSettingsStore((state) => state.signatureSeparatorEnabled);
  const requestReadReceiptDefault = useSettingsStore((state) => state.requestReadReceiptDefault);
  const activeIdentities = useIdentityStore((s) => s.identities);
  // Pro shell: surface identities from every connected account, grouped
  // for the From dropdown's <optgroup>s. Outside Pro this collapses to
  // the active account's identities only.
  const multiAccountIdentities = useProMultiAccountIdentities();
  const identities = multiAccountIdentities.enabled
    ? multiAccountIdentities.allIdentities
    : activeIdentities;
  const identityGroups = multiAccountIdentities.enabled
    ? multiAccountIdentities.groups
    : [];
  const primaryIdentity = activeIdentities[0] ?? null;

  // The signature identity used when embedding the signature into the initial
  // body for "above quote" mode. Mirrors the signatureIdentity derivation
  // below, but uses initialData (or primary) since selectedIdentityId state
  // does not exist yet at this point.
  const initialCurrentIdentityForSig = initialData?.selectedIdentityId
    ? identities.find((i) => i.id === initialData.selectedIdentityId) || primaryIdentity
    : primaryIdentity;
  const initialSignatureIdentity = (initialCurrentIdentityForSig?.htmlSignature || initialCurrentIdentityForSig?.textSignature)
    ? initialCurrentIdentityForSig
    : primaryIdentity;
  const hasInitialSignature = !!(initialSignatureIdentity?.htmlSignature || initialSignatureIdentity?.textSignature);
  const shouldEmbedSignatureAboveQuote =
    (mode === 'reply' || mode === 'replyAll' || mode === 'forward') &&
    signaturePosition === 'above_quote' &&
    hasInitialSignature;
  // New-mail composes always embed the signature into the editor body so it's
  // editable/removable (the previous read-only preview below the editor was
  // never spec-correct - see #329). Compose mode also ignores any leftover
  // `replyTo` from a still-selected email; getInitialBody short-circuits below.
  const shouldEmbedSignatureInNewMail = mode === 'compose' && hasInitialSignature;

  // Format a single EmailAddress for display in the composer input
  const toRecipient = (r: { name?: string; email?: string }): Recipient =>
    ({ name: r.name && r.name !== r.email ? r.name : undefined, email: r.email ?? "" });

  // Initialize with reply/forward data if provided
  const getInitialTo = (): Recipient[] => {
    if (!replyTo) return [];
    // RFC 5322: use Reply-To header if present, otherwise fall back to From
    const replyTarget = replyTo.replyToAddresses?.length
      ? replyTo.replyToAddresses.filter(r => r.email).map(toRecipient)
      : (replyTo.from?.[0]?.email ? [toRecipient(replyTo.from[0])] : []);
    if (mode === 'reply') {
      return replyTarget;
    } else if (mode === 'replyAll') {
      const ownEmails = new Set(identities.map(i => i.email?.trim().toLowerCase()).filter(Boolean));
      const originalTo = (replyTo.to ?? [])
        .filter(r => r.email && !ownEmails.has(r.email.trim().toLowerCase()))
        .map(toRecipient);
      return [...replyTarget, ...originalTo];
    }
    return [];
  };

  const getInitialCc = (): Recipient[] => {
    if (!replyTo || mode !== 'replyAll') return [];
    const ownEmails = new Set(identities.map(i => i.email?.trim().toLowerCase()).filter(Boolean));
    return (replyTo.cc ?? [])
      .filter(r => r.email && !ownEmails.has(r.email.trim().toLowerCase()))
      .map(toRecipient);
  };

  const getInitialSubject = () => {
    if (!replyTo?.subject) return "";
    if (mode === 'forward') {
      return buildForwardSubject(replyTo.subject, t('prefix.forward'));
    } else if (mode === 'reply' || mode === 'replyAll') {
      return buildReplySubject(replyTo.subject, t('prefix.reply'));
    }
    return "";
  };

  const getInitialBody = () => {
    if (plainTextMode) {
      // Plain text mode: produce plain text body with no HTML
      const prefix = initialDraftText || "";
      // Compose mode: ignore any leftover replyTo (e.g. a selected mail in the
      // viewer) and embed the signature directly into the body so it's
      // editable. Fixes #329 (A,B).
      if (mode === 'compose') {
        if (!shouldEmbedSignatureInNewMail) return prefix;
        const sep = signatureSeparatorEnabled ? '\n\n-- \n' : '\n\n';
        return `${prefix}${sep}${getPlainTextSignature(initialSignatureIdentity)}`;
      }
      if (!replyTo?.body && !replyTo?.htmlBody) return prefix;

      const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : "";
      const from = replyTo.from?.[0];
      const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
      // Forward "From:" shows the full sender incl. address; reply line keeps
      // the bare name (reads naturally in the localized "On … wrote:" line).
      const fromStrFull = from
        ? (from.name && from.email && from.name !== from.email
            ? `${from.name} <${from.email}>`
            : (from.email || from.name || tCommon('unknown')))
        : tCommon('unknown');

      const originalText = replyTo.body || (replyTo.htmlBody ? htmlToPlainText(replyTo.htmlBody) : '');
      const quotedText = originalText.split('\n').map(line => `> ${line}`).join('\n');

      // When "above quote" is configured, splice signature between the user's
      // drafting area and the quoted content so it reads naturally as a
      // closing for the reply body. Send-time append is skipped - see
      // shouldEmbedSignatureAboveQuote.
      const plainSep = signatureSeparatorEnabled ? '\n\n-- \n' : '\n\n';
      const signatureBlock = shouldEmbedSignatureAboveQuote
        ? `${plainSep}${getPlainTextSignature(initialSignatureIdentity)}`
        : '';

      // Plugin override (resolved at composer open via onBuildQuoteHeader).
      if (replyTo.quoteHeaderText !== undefined && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
        const body = mode === 'forward' ? originalText : quotedText;
        return `${prefix}${signatureBlock}\n\n${replyTo.quoteHeaderText}\n${body}`;
      }

      if (mode === 'forward') {
        return `${prefix}${signatureBlock}\n\n${tQuote('forwarded_separator')}\n${tQuote('from_label')}: ${fromStrFull}\n${tQuote('date_label')}: ${date}\n${tQuote('subject_label')}: ${replyTo.subject || ''}\n\n${originalText}`;
      } else if (mode === 'reply' || mode === 'replyAll') {
        return `${prefix}${signatureBlock}\n\n${tQuote('reply_line', { date, from: fromStr })}\n${quotedText}`;
      }
      return prefix;
    }

    const prefix = initialDraftText ? `<p>${initialDraftText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>` : "";
    // Compose mode: ignore any leftover replyTo and embed the signature
    // directly into the body so the user can edit/delete it. The leading
    // empty paragraph gives the cursor a place to land above the signature.
    if (mode === 'compose') {
      if (!shouldEmbedSignatureInNewMail) return prefix;
      const composePrefix = prefix || '<p></p>';
      const embedded = buildEmbeddedSignatureHtml(initialSignatureIdentity, {
        embed: true,
        separator: signatureSeparatorEnabled,
      });
      return `${composePrefix}${embedded}`;
    }
    if (!replyTo?.body && !replyTo?.htmlBody) return prefix;

    const date = replyTo.receivedAt ? formatDateTime(replyTo.receivedAt, timeFormat, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' }) : "";
    const from = replyTo.from?.[0];
    const fromStr = from ? `${from.name || from.email}` : tCommon('unknown');
    const fromStrFull = from
      ? (from.name && from.email && from.name !== from.email
          ? `${from.name} <${from.email}>`
          : (from.email || from.name || tCommon('unknown')))
      : tCommon('unknown');

    const signatureBlock = buildEmbeddedSignatureHtml(initialSignatureIdentity, {
      embed: shouldEmbedSignatureAboveQuote,
      separator: signatureSeparatorEnabled,
    });

    // Plugin override (resolved at composer open via onBuildQuoteHeader).
    if (replyTo.quoteHeaderHtml !== undefined && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
      if (replyTo.htmlBody) {
        // Layout-heavy original: embed verbatim as a QuotedHtml island so
        // nested tables / MJML survive 1:1 (sanitize strips scripts/styles
        // first; cid rewrite runs after so its data-cid markers survive).
        const island = buildQuotedHtmlBlock(
          rewriteCidImagesForEditor(sanitizeEmailHtml(replyTo.htmlBody))
        );
        return `${prefix}${signatureBlock}<br>${replyTo.quoteHeaderHtml}${island}`;
      }
      const escaped = replyTo.body
        ? replyTo.body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')
        : '';
      const wrap = replyTo.quoteWrapInBlockquote !== false;
      const bodyHtml = wrap
        ? `<blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${escaped}</blockquote>`
        : escaped;
      return `${prefix}${signatureBlock}<br>${replyTo.quoteHeaderHtml}${bodyHtml}`;
    }

    // Build quoted content as HTML
    if (replyTo.htmlBody && (mode === 'reply' || mode === 'replyAll' || mode === 'forward')) {
      const quoteHeader = mode === 'forward'
        ? `${tQuote('forwarded_separator')}<br>${tQuote('from_label')}: ${fromStrFull}<br>${tQuote('date_label')}: ${date}<br>${tQuote('subject_label')}: ${replyTo.subject || ''}<br><br>`
        : `${tQuote('reply_line', { date, from: fromStr })}<br>`;
      // Embed the original as a QuotedHtml island (verbatim, schema-free) so
      // its layout survives the editor round-trip. Sanitize first to strip
      // scripts/styles/head; cid rewrite afterwards so data-cid markers
      // aren't dropped by the sanitizer's ALLOW_DATA_ATTR:false.
      const island = buildQuotedHtmlBlock(
        rewriteCidImagesForEditor(sanitizeEmailHtml(replyTo.htmlBody))
      );
      return `${prefix}${signatureBlock}<br><div>${quoteHeader}</div>${island}`;
    }

    if (replyTo.body) {
      const escapedOriginal = replyTo.body.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>');
      if (mode === 'forward') {
        return `${prefix}${signatureBlock}<br><br>${tQuote('forwarded_separator')}<br>${tQuote('from_label')}: ${fromStrFull}<br>${tQuote('date_label')}: ${date}<br>${tQuote('subject_label')}: ${replyTo.subject || ''}<br><br>${escapedOriginal}`;
      } else if (mode === 'reply' || mode === 'replyAll') {
        return `${prefix}${signatureBlock}<br><br>${tQuote('reply_line', { date, from: fromStr })}<br><blockquote style="margin:0 0 0 0.8ex;border-left:2px solid #ccc;padding-left:1ex">${escapedOriginal}</blockquote>`;
      }
    }
    return prefix;
  };

  // Committed recipients are structured arrays; the in-progress text the user
  // is typing lives in a separate `*Input` string per field. This keeps a
  // display name containing a comma (e.g. "Doo, John") intact instead of
  // tearing it apart on a delimiter.
  const [to, setTo] = useState<Recipient[]>(initialData ? parseRecipientList(initialData.to) : getInitialTo());
  const [cc, setCc] = useState<Recipient[]>(initialData ? parseRecipientList(initialData.cc) : getInitialCc());
  const [bcc, setBcc] = useState<Recipient[]>(initialData ? parseRecipientList(initialData.bcc) : []);
  const [toInput, setToInput] = useState('');
  const [ccInput, setCcInput] = useState('');
  const [bccInput, setBccInput] = useState('');
  const [subject, setSubject] = useState(initialData?.subject ?? getInitialSubject());
  const [body, setBody] = useState(initialData?.body ?? getInitialBody());
  const [showCc, setShowCc] = useState(initialData?.showCc ?? getInitialCc().length > 0);
  const [showBcc, setShowBcc] = useState(initialData?.showBcc ?? false);
  // Committed recipients plus any not-yet-committed text the user has typed.
  // Send/validation/draft paths treat a typed-but-uncommitted address as a
  // real recipient, matching the previous string-based behavior.
  const withInput = (chips: Recipient[], input: string): Recipient[] =>
    input.trim() ? [...chips, parseRecipient(input)] : chips;
  const [isDraggingChipOverCc, setIsDraggingChipOverCc] = useState(false);
  const [isDraggingChipOverBcc, setIsDraggingChipOverBcc] = useState(false);
  const [requestReadReceipt, setRequestReadReceipt] = useState(requestReadReceiptDefault);
  const [draftId, setDraftId] = useState<string | null>(initialData?.draftId ?? null);
  // Mirror of draftId for synchronous reads inside chained saves; React's
  // setDraftId is async, so a queued saveDraft would otherwise see the old
  // value and try to destroy a draft that was just replaced.
  const draftIdRef = useRef<string | null>(initialData?.draftId ?? null);
  const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
  const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const lastSavedDataRef = useRef<string>("");
  // Tracks the currently-running saveDraft so concurrent callers (autosave
  // timer + send button) serialize instead of issuing parallel destroy/create
  // requests with the same draftId. See bug #303.
  const inflightSaveRef = useRef<Promise<string | null> | null>(null);
  const [attachments, setAttachments] = useState<ComposerAttachment[]>(() => {
    if (mode === 'forward' && replyTo?.attachments?.length) {
      return replyTo.attachments
        // Skip inline cid-referenced images - they're embedded in the forwarded HTML body
        // (matches the viewer's hideInlineImageAttachments logic).
        .filter(att => !(att.cid && att.disposition === 'inline' && (att.type || '').startsWith('image/')))
        .map(att => ({
          name: att.name || 'attachment',
          type: att.type || 'application/octet-stream',
          size: att.size,
          blobId: att.blobId,
        }));
    }
    return [];
  });
  const inlineImagesRef = useRef<Array<{ cid: string; blobId: string; type: string; name: string; size: number; dataUrl: string }>>([]);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [validationErrors, setValidationErrors] = useState<{ to?: boolean; subject?: boolean; body?: boolean }>({});
  const [shakeField, setShakeField] = useState<string | null>(null);
  const [selectedIdentityId, setSelectedIdentityId] = useState<string | null>(initialData?.selectedIdentityId ?? null);
  const [subAddressTag, setSubAddressTag] = useState<string>(initialData?.subAddressTag ?? '');
  const [fromOverrideEnabled, setFromOverrideEnabled] = useState<boolean>(initialData?.fromOverrideEnabled ?? false);
  const [fromOverrideEmail, setFromOverrideEmail] = useState<string>(initialData?.fromOverrideEmail ?? '');
  const [fromOverrideName, setFromOverrideName] = useState<string>(initialData?.fromOverrideName ?? '');
  const [showTemplatePicker, setShowTemplatePicker] = useState(false);
  const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false);
  const [showCloseDialog, setShowCloseDialog] = useState(false);
  const [showAllAttachments, setShowAllAttachments] = useState(false);
  const [previewAttachment, setPreviewAttachment] = useState<ComposerAttachment | null>(null);
  const [smimeSign_, setSmimeSign] = useState(false);
  const [smimeEncrypt_, setSmimeEncrypt] = useState(false);
  const [smimePassphrasePrompt, setSmimePassphrasePrompt] = useState<{ keyId: string; resolve: (passphrase: string) => void; reject: () => void } | null>(null);
  const [smimePassphraseInput, setSmimePassphraseInput] = useState('');
  const [smimePassphraseError, setSmimePassphraseError] = useState('');
  const [showAttachmentWarning, setShowAttachmentWarning] = useState(false);
  const [attachmentWarningKeyword, setAttachmentWarningKeyword] = useState('');
  const [attachmentWarningDelayedUntil, setAttachmentWarningDelayedUntil] = useState<string | undefined>();
  const [showScheduleDialog, setShowScheduleDialog] = useState(false);
  const [scheduleValue, setScheduleValue] = useState('');
  const [scheduleError, setScheduleError] = useState('');
  const [showSendMenu, setShowSendMenu] = useState(false);
  const sendMenuRef = useRef<HTMLDivElement>(null);

  const saveTemplateModalRef = useFocusTrap({
    isActive: showSaveAsTemplate,
    onEscape: () => setShowSaveAsTemplate(false),
    restoreFocus: true,
  });

  const closeDialogRef = useFocusTrap({
    isActive: showCloseDialog,
    onEscape: () => setShowCloseDialog(false),
    restoreFocus: true,
  });

  const attachmentWarningRef = useFocusTrap({
    isActive: showAttachmentWarning,
    onEscape: () => setShowAttachmentWarning(false),
    restoreFocus: true,
  });

  const { client } = useAuthStore();
  const currentIdentity = selectedIdentityId
    ? identities.find((identity) => identity.id === selectedIdentityId) || primaryIdentity
    : primaryIdentity;

  // When the selected identity belongs to a non-active account (Pro
  // multi-account dropdown), `currentIdentity.id` carries a "<localId>::"
  // namespace and JMAP calls must be routed through that account's
  // client with the un-prefixed id. `composerClient` and
  // `currentIdentityRawId` are what save/send code should use.
  const currentIdentityParts = currentIdentity?.id
    ? stripCrossAccountIdentityPrefix(currentIdentity.id)
    : { localAccountId: null, rawId: undefined };
  const composerClient = currentIdentityParts.localAccountId
    ? (useAuthStore.getState().getClientForAccount(currentIdentityParts.localAccountId) ?? client)
    : client;
  const currentIdentityRawId = currentIdentityParts.rawId ?? currentIdentity?.id;
  // Alias identities often lack a configured signature - fall back to the primary
  // identity's signature so replies (which auto-select a matching alias) still
  // populate the user's signature.
  const signatureIdentity = (currentIdentity?.htmlSignature || currentIdentity?.textSignature)
    ? currentIdentity
    : primaryIdentity;

  // Hold the TipTap editor instance so we can swap the embedded signature
  // when the user switches identity in "above quote" mode without rebuilding
  // the whole body (which would lose user edits to the surrounding draft).
  const editorRef = useRef<Editor | null>(null);
  const prevSignatureIdentityIdRef = useRef<string | null | undefined>(signatureIdentity?.id);
  const prevSignatureSeparatorRef = useRef<boolean>(signatureSeparatorEnabled);

  useEffect(() => {
    const editor = editorRef.current;
    const identityChanged = prevSignatureIdentityIdRef.current !== signatureIdentity?.id;
    const separatorChanged = prevSignatureSeparatorRef.current !== signatureSeparatorEnabled;
    prevSignatureIdentityIdRef.current = signatureIdentity?.id;
    prevSignatureSeparatorRef.current = signatureSeparatorEnabled;
    if (!editor) return;
    if (!identityChanged && !separatorChanged) return;
    if (plainTextMode) return;
    // Replies/forwards only embed when configured for "above quote". Compose
    // always embeds (see getInitialBody), so swap on identity change there too.
    const isReplyLike = mode === 'reply' || mode === 'replyAll' || mode === 'forward';
    if (!isReplyLike && mode !== 'compose') return;
    if (isReplyLike && signaturePosition !== 'above_quote') return;

    // serializeEditorContent (not getHTML) so a QuotedHtml island's verbatim
    // body isn't lost during the signature splice + setContent round-trip.
    const currentHtml = serializeEditorContent(editor);
    const doc = new DOMParser().parseFromString(currentHtml, 'text/html');
    const startEl = doc.querySelector('[data-signature-block="separator"], [data-signature-block="start"]');
    if (!startEl) return;
    const endEl = doc.querySelector('[data-signature-block="end"]');

    const newSignature = buildEmbeddedSignatureHtml(signatureIdentity, {
      embed: true,
      separator: signatureSeparatorEnabled,
    });
    if (!newSignature) return;

    // Build a temporary container holding the replacement nodes so we can
    // splice them in without re-serializing/parsing twice.
    const replacementHost = doc.createElement('div');
    replacementHost.innerHTML = newSignature;
    const replacementNodes = Array.from(replacementHost.childNodes);

    const parent = startEl.parentNode;
    if (!parent) return;

    // Remove the existing signature range [startEl … endEl] inclusive, or
    // from startEl to the next quote boundary if no end marker is present.
    // The quote boundary is either a legacy <blockquote> or the QuotedHtml
    // island wrapper (<div data-quoted-html>) - stop before either so the
    // signature splice never eats into the quoted body.
    const removeUntil = endEl && endEl.parentNode === parent ? endEl : null;
    const isQuoteBoundary = (n: Node | null): boolean => {
      if (!n || n.nodeType !== 1) return false;
      const el = n as Element;
      return el.tagName === 'BLOCKQUOTE' || el.hasAttribute('data-quoted-html');
    };
    const toRemove: Node[] = [];
    let cursor: Node | null = startEl;
    while (cursor) {
      toRemove.push(cursor);
      if (cursor === removeUntil) break;
      const next: Node | null = cursor.nextSibling;
      if (!removeUntil && isQuoteBoundary(next)) break;
      cursor = next;
    }
    const insertBefore = toRemove[toRemove.length - 1]?.nextSibling ?? null;
    toRemove.forEach((node) => parent.removeChild(node));
    replacementNodes.forEach((node) => parent.insertBefore(node, insertBefore));

    const nextHtml = doc.body.innerHTML;
    if (nextHtml !== currentHtml) {
      editor.commands.setContent(nextHtml, { emitUpdate: true });
    }
  }, [signatureIdentity?.id, signatureIdentity?.htmlSignature, signatureIdentity?.textSignature, signatureSeparatorEnabled, signaturePosition, mode, plainTextMode]);

  useEffect(() => {
    const handleClickOutsideSendMenu = (event: MouseEvent) => {
      if (!sendMenuRef.current?.contains(event.target as Node)) {
        setShowSendMenu(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutsideSendMenu);
    return () => document.removeEventListener('mousedown', handleClickOutsideSendMenu);
  }, []);

  const openScheduleDialog = useCallback(() => {
    setScheduleError('');
    setScheduleValue(getDefaultScheduleValue());
    setShowScheduleDialog(true);
    setShowSendMenu(false);
  }, []);

  useEffect(() => {
    if (!autoSelectReplyIdentity) return;
    if (selectedIdentityId || initialData?.selectedIdentityId) return;
    if (mode !== 'reply' && mode !== 'replyAll') return;

    const resolved = resolveReplyFrom(identities, {
      to: replyTo?.to,
      cc: replyTo?.cc,
      bcc: replyTo?.bcc,
    });

    if (resolved) {
      setSelectedIdentityId(resolved.identityId);
      if (resolved.overrideEmail && !fromOverrideEnabled) {
        setFromOverrideEnabled(true);
        setFromOverrideEmail(resolved.overrideEmail);
        if (resolved.overrideName) setFromOverrideName(resolved.overrideName);
      }
      return;
    }

    // Fallback: match identity by the account's email when replying from unified view
    if (replyTo?.accountId) {
      const account = useAccountStore.getState().getAccountById(replyTo.accountId);
      if (account?.email) {
        const accountEmail = account.email.trim().toLowerCase();
        const accountIdentity = identities.find(
          (identity) => identity.email.trim().toLowerCase() === accountEmail
        );
        if (accountIdentity) {
          setSelectedIdentityId(accountIdentity.id);
        }
      }
    }
  }, [
    autoSelectReplyIdentity,
    fromOverrideEnabled,
    identities,
    initialData?.selectedIdentityId,
    mode,
    replyTo?.accountId,
    replyTo?.bcc,
    replyTo?.cc,
    replyTo?.to,
    selectedIdentityId,
  ]);

  // Hydrate inline images referenced by the quoted body (issue #163).
  // `getInitialBody` rewrites `<img src="cid:xxx">` to placeholder src +
  // data-cid; here we (1) register each inline attachment in inlineImagesRef
  // so the send path re-attaches the blob with the right cid, and (2) fetch
  // each blob as a data URL and swap it into the body so the editor actually
  // shows the image instead of a blank placeholder.
  useEffect(() => {
    if (plainTextMode) return;
    if (mode !== 'reply' && mode !== 'replyAll' && mode !== 'forward') return;
    if (!composerClient || !replyTo?.attachments?.length) return;

    const inlineAtts = replyTo.attachments.filter((att) =>
      att.cid && att.disposition === 'inline' && (att.type || '').startsWith('image/')
    );
    if (inlineAtts.length === 0) return;

    // Seed the ref synchronously so a fast Send still attaches the right blobs
    // even if the FileReader work below hasn't resolved yet.
    for (const att of inlineAtts) {
      if (!att.cid) continue;
      if (inlineImagesRef.current.some((e) => e.cid === att.cid)) continue;
      inlineImagesRef.current.push({
        cid: att.cid,
        blobId: att.blobId,
        type: att.type,
        name: att.name || 'inline',
        size: att.size,
        dataUrl: '',
      });
    }

    let cancelled = false;
    (async () => {
      const updates = new Map<string, string>();
      for (const att of inlineAtts) {
        if (!att.cid) continue;
        try {
          const buffer = await composerClient.fetchBlobArrayBuffer(
            att.blobId,
            att.name || 'inline',
            att.type,
          );
          if (cancelled) return;
          const blob = new Blob([buffer], { type: att.type });
          const dataUrl = await new Promise<string>((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result as string);
            reader.onerror = () => reject(reader.error);
            reader.readAsDataURL(blob);
          });
          if (cancelled) return;
          const entry = inlineImagesRef.current.find((e) => e.cid === att.cid);
          if (entry) entry.dataUrl = dataUrl;
          updates.set(att.cid, dataUrl);
        } catch (err) {
          debug.error('Failed to load inline image for compose', err);
        }
      }
      if (cancelled || updates.size === 0) return;
      setBody((prev) => replaceInlineImagePlaceholders(prev, updates));
    })();

    return () => {
      cancelled = true;
    };
    // We deliberately hydrate once per composer open - subsequent replyTo
    // object identity churn from parent renders shouldn't refetch.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [composerClient, plainTextMode, mode]);

  const composerSignatureHtml = signatureIdentity?.htmlSignature
    ? `<div>${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}</div>`
    : signatureIdentity?.textSignature
      ? `<div>${getPlainTextSignature(signatureIdentity).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</div>`
      : '';
  const getAutocomplete = useContactStore((s) => s.getAutocomplete);
  const addToTrustedSendersBook = useContactStore((s) => s.addToTrustedSendersBook);
  const addTrustedSender = useSettingsStore((s) => s.addTrustedSender);
  const trustedSendersAddressBook = useSettingsStore((s) => s.trustedSendersAddressBook);
  const addTemplate = useTemplateStore((s) => s.addTemplate);
  const sendRawEmail = useEmailStore((s) => s.sendRawEmail);
  const smimeStore = useSmimeStore();

  // Determine S/MIME availability for the selected identity
  const currentSmimeIdentityId = selectedIdentityId || primaryIdentity?.id;
  const smimeKeyRecord = currentSmimeIdentityId ? smimeStore.getKeyRecordForIdentity(currentSmimeIdentityId) : undefined;
  const canSmimeSign = !!smimeKeyRecord;
  const canSmimeEncrypt = (() => {
    if (!smimeKeyRecord) return false;
    const allRecipients = [
      ...withInput(to, toInput),
      ...withInput(cc, ccInput),
      ...withInput(bcc, bccInput),
    ].map(r => r.email);
    if (allRecipients.length === 0) return false;
    const { missing } = smimeStore.getRecipientCerts(allRecipients);
    return missing.length === 0;
  })();

  // Initialize S/MIME defaults from store when identity changes
  useEffect(() => {
    if (currentSmimeIdentityId) {
      setSmimeSign(!!smimeStore.defaultSignIdentity[currentSmimeIdentityId] && canSmimeSign);
    }
    setSmimeEncrypt(smimeStore.defaultEncrypt && canSmimeEncrypt);
  // Only run when identity changes, not on every recipient edit
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [currentSmimeIdentityId]);

  // Serialized recipient strings for ComposerDraftData (string-shaped) and for
  // by-value dirty comparison. Folds in any uncommitted typed text.
  const toStr = formatRecipientList(withInput(to, toInput));
  const ccStr = formatRecipientList(withInput(cc, ccInput));
  const bccStr = formatRecipientList(withInput(bcc, bccInput));

  // Keep a ref to current state for the unmount save
  const stateRef = useRef({ to: toStr, cc: ccStr, bcc: bccStr, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId, fromOverrideEnabled, fromOverrideEmail, fromOverrideName });
  stateRef.current = { to: toStr, cc: ccStr, bcc: bccStr, subject, body, showCc, showBcc, selectedIdentityId, subAddressTag, draftId, fromOverrideEnabled, fromOverrideEmail, fromOverrideName };

  // Track initial values for dirty detection (captured once on first render)
  const initialValuesRef = useRef({ to: toStr, cc: ccStr, bcc: bccStr, subject, body, attachmentCount: attachments.length });
  const isDirtyRef = useRef(false);
  isDirtyRef.current = toStr !== initialValuesRef.current.to || ccStr !== initialValuesRef.current.cc ||
    bccStr !== initialValuesRef.current.bcc || subject !== initialValuesRef.current.subject ||
    body !== initialValuesRef.current.body || attachments.length > initialValuesRef.current.attachmentCount;

  // Ref to latest saveDraft for use in event handlers with stale closures
  const saveDraftRef = useRef<() => Promise<string | null>>(() => Promise.resolve(null));

  // Set by the explicit close paths (clean close, save-and-close, discard) so
  // the unmount auto-save below doesn't fire and stash a stale pendingDraft
  // on the parent (#329 D). Without this, "Reply → Discard → New mail" would
  // open the next composer with the discarded reply's mode/replyTo.
  const explicitCloseRef = useRef(false);

  // Auto-save state on unmount (when user navigates away without explicitly closing)
  useEffect(() => {
    return () => {
      if (explicitCloseRef.current) return;
      if (onSaveState && isDirtyRef.current) {
        const s = stateRef.current;
        onSaveState({
          ...s,
          mode,
          replyTo,
        });
      }
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Auto-save draft to server on page close (best-effort)
  useEffect(() => {
    const handleBeforeUnload = () => {
      if (isDirtyRef.current) {
        saveDraftRef.current();
      }
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, []);

  // Auto-focus the To field when composing a new email or forwarding
  useEffect(() => {
    if (mode === 'forward' || mode === 'compose') {
      // Small delay to ensure the input is rendered
      const timer = setTimeout(() => {
        toInputRef.current?.focus();
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [mode]);

  const [autocompleteResults, setAutocompleteResults] = useState<Array<{ name: string; email: string }>>([]);
  const [activeAutoField, setActiveAutoField] = useState<'to' | 'cc' | 'bcc' | null>(null);
  const [autoSelectedIndex, setAutoSelectedIndex] = useState(-1);
  const autocompleteTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const toInputRef = useRef<HTMLInputElement>(null);
  const ccInputRef = useRef<HTMLInputElement>(null);
  const bccInputRef = useRef<HTMLInputElement>(null);
  const subjectInputRef = useRef<HTMLInputElement>(null);
  const bodyRef = useRef<HTMLTextAreaElement>(null);
  const editorContainerRef = useRef<HTMLDivElement>(null);
  const toDropdownRef = useRef<HTMLDivElement>(null);
  const ccDropdownRef = useRef<HTMLDivElement>(null);
  const bccDropdownRef = useRef<HTMLDivElement>(null);

  const focusSubject = useCallback(() => {
    subjectInputRef.current?.focus();
  }, []);

  const focusBody = useCallback(() => {
    if (plainTextMode) {
      bodyRef.current?.focus();
    } else {
      const proseMirror = editorContainerRef.current?.querySelector('.ProseMirror') as HTMLElement | null;
      proseMirror?.focus();
    }
  }, [plainTextMode]);

  const handleMoveChip = useCallback((recipient: Recipient, fromField: 'to' | 'cc' | 'bcc', toField: 'to' | 'cc' | 'bcc') => {
    if (fromField === toField) return;
    const setters = { to: setTo, cc: setCc, bcc: setBcc };
    const sameRecipient = (a: Recipient, b: Recipient) => a.email === b.email && (a.name ?? '') === (b.name ?? '');
    setters[fromField](prev => {
      const idx = prev.findIndex(r => sameRecipient(r, recipient));
      return idx === -1 ? prev : prev.filter((_, i) => i !== idx);
    });
    setters[toField](prev => prev.some(r => sameRecipient(r, recipient)) ? prev : [...prev, recipient]);
    if (toField === 'cc') setShowCc(true);
    if (toField === 'bcc') setShowBcc(true);
  }, [setTo, setCc, setBcc, setShowCc, setShowBcc]);

  const handleAutocomplete = useCallback((inputText: string, field: 'to' | 'cc' | 'bcc') => {
    if (autocompleteTimeoutRef.current) {
      clearTimeout(autocompleteTimeoutRef.current);
    }

    const query = inputText.trim();
    if (query.length < 1) {
      setAutocompleteResults([]);
      setActiveAutoField(null);
      setAutoSelectedIndex(-1);
      return;
    }

    autocompleteTimeoutRef.current = setTimeout(async () => {
      const localResults = getAutocomplete(query);
      // Let plugins contribute extra suggestions (Slack handles, GitHub, CRM, …).
      const initial: RecipientSuggestion[] = localResults.map(r => ({ name: r.name, email: r.email }));
      const merged = await contactHooks.onProvideRecipientSuggestions.transform(initial, { query });
      setAutocompleteResults(merged.map(s => ({ name: s.name, email: s.email })));
      setActiveAutoField(merged.length > 0 ? field : null);
      setAutoSelectedIndex(-1);
    }, 200);
  }, [getAutocomplete]);

  const insertAutocomplete = (suggestion: { name: string; email: string }, field: 'to' | 'cc' | 'bcc') => {
    const setter = field === 'to' ? setTo : field === 'cc' ? setCc : setBcc;
    const inputSetter = field === 'to' ? setToInput : field === 'cc' ? setCcInput : setBccInput;

    setter(prev => [...prev, toRecipient(suggestion)]);
    inputSetter('');
    setAutocompleteResults([]);
    setActiveAutoField(null);
    setAutoSelectedIndex(-1);

    const ref = field === 'to' ? toInputRef : field === 'cc' ? ccInputRef : bccInputRef;
    ref.current?.focus();
  };

  const handleAutoBlur = useCallback((e: React.FocusEvent, field: 'to' | 'cc' | 'bcc') => {
    const dropdownRef = field === 'to' ? toDropdownRef : field === 'cc' ? ccDropdownRef : bccDropdownRef;
    const relatedTarget = e.relatedTarget as Node | null;
    if (relatedTarget && dropdownRef.current?.contains(relatedTarget)) {
      return;
    }
    if (activeAutoField === field) {
      setActiveAutoField(null);
      setAutoSelectedIndex(-1);
    }
  }, [activeAutoField]);

  const handleAutoKeyDown = (e: React.KeyboardEvent, field: 'to' | 'cc' | 'bcc') => {
    if (!activeAutoField || autocompleteResults.length === 0) return;

    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setAutoSelectedIndex((prev) => Math.min(prev + 1, autocompleteResults.length - 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setAutoSelectedIndex((prev) => Math.max(prev - 1, -1));
    } else if (e.key === 'Enter' && autoSelectedIndex >= 0) {
      e.preventDefault();
      insertAutocomplete(autocompleteResults[autoSelectedIndex], field);
    } else if (e.key === 'Escape') {
      setAutocompleteResults([]);
      setActiveAutoField(null);
      setAutoSelectedIndex(-1);
    }
  };

  const handleTemplateSelect = useCallback((template: EmailTemplate, filledValues: Record<string, string>) => {
    const filledSubject = Object.keys(filledValues).length > 0
      ? substitutePlaceholders(template.subject, filledValues)
      : template.subject;
    const filledBody = Object.keys(filledValues).length > 0
      ? substitutePlaceholders(template.body, filledValues)
      : template.body;

    // In plain text mode, use template body as-is; otherwise convert to HTML
    const bodyContent = plainTextMode
      ? filledBody
      : `<p>${filledBody.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}</p>`;

    if (mode === 'compose') {
      setSubject(filledSubject);
      setBody(bodyContent);
      if (template.defaultRecipients?.to?.length) {
        setTo(template.defaultRecipients.to.map(parseRecipient));
      }
      if (template.defaultRecipients?.cc?.length) {
        setCc(template.defaultRecipients.cc.map(parseRecipient));
        setShowCc(true);
      }
      if (template.defaultRecipients?.bcc?.length) {
        setBcc(template.defaultRecipients.bcc.map(parseRecipient));
        setShowBcc(true);
      }
    } else {
      setBody((prev) => bodyContent + (plainTextMode ? '\n' : '') + prev);
    }

    if (template.identityId) {
      setSelectedIdentityId(template.identityId);
    }

    setShowTemplatePicker(false);
  }, [mode, plainTextMode]);

  useEffect(() => {
    const handleTemplateKey = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
      const tag = target?.tagName?.toLowerCase();
      if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
      if (target?.getAttribute('contenteditable') === 'true') return;
      if (e.key === 't' && !e.ctrlKey && !e.metaKey && !e.altKey) {
        e.preventDefault();
        setShowTemplatePicker(true);
      }
    };
    window.addEventListener('keydown', handleTemplateKey);
    return () => window.removeEventListener('keydown', handleTemplateKey);
  }, []);

  const addFiles = useCallback(async (files: File[]) => {
    if (!client || files.length === 0) return;

    // Let plugins veto each upload before it's queued.
    const allowedFiles: File[] = [];
    for (const file of files) {
      const ok = await emailHooks.onBeforeAttachmentUpload.intercept({
        name: file.name,
        type: file.type || 'application/octet-stream',
        size: file.size,
      });
      if (ok) allowedFiles.push(file);
    }
    if (allowedFiles.length === 0) return;
    files = allowedFiles;

    const newAttachments: ComposerAttachment[] = files.map(file => {
      const controller = new AbortController();
      return {
        file,
        name: file.name,
        type: file.type || 'application/octet-stream',
        size: file.size,
        uploading: true,
        abortController: controller,
      };
    });
    setAttachments(prev => [...prev, ...newAttachments]);

    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const controller = newAttachments[i].abortController;
      try {
        if (controller?.signal.aborted) continue;
        const { blobId } = await client.uploadBlob(file);

        if (controller?.signal.aborted) continue;
        setAttachments(prev =>
          prev.map(att =>
            att.file === file
              ? { ...att, blobId, uploading: false, abortController: undefined }
              : att
          )
        );
        emailHooks.onAfterAttachmentUpload.emit({
          name: file.name,
          type: file.type || 'application/octet-stream',
          size: file.size,
          blobId,
        });
      } catch (error) {
        if (controller?.signal.aborted) continue;
        debug.error(`Failed to upload ${file.name}:`, error);
        toast.error(t('upload_failed', { filename: file.name }));

        setAttachments(prev =>
          prev.map(att =>
            att.file === file
              ? { ...att, uploading: false, error: true, abortController: undefined }
              : att
          )
        );
      }
    }
  }, [client, t]);

  const handleImageUpload = useCallback(async (
    file: File,
  ): Promise<{ src: string; cid: string } | null> => {
    if (!client) return null;
    try {
      const readAsDataUrl = new Promise<string | null>((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve((e.target?.result as string) ?? null);
        reader.onerror = () => resolve(null);
        reader.readAsDataURL(file);
      });
      const [{ blobId }, dataUrl] = await Promise.all([
        client.uploadBlob(file),
        readAsDataUrl,
      ]);
      if (!dataUrl) throw new Error('Failed to read image as data URL');
      const cid = `${generateUUID()}@webmail`;
      inlineImagesRef.current.push({
        cid,
        blobId,
        type: file.type || 'application/octet-stream',
        name: file.name,
        size: file.size,
        dataUrl,
      });
      return { src: dataUrl, cid };
    } catch (error) {
      debug.error(`Failed to upload inline image ${file.name}:`, error);
      toast.error(t('upload_failed', { filename: file.name }));
      return null;
    }
  }, [client, t]);

  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
    if (!event.target.files) return;
    await addFiles(Array.from(event.target.files));
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
  };

  const [isDraggingOver, setIsDraggingOver] = useState(false);
  const dragTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  const clearDragState = useCallback(() => {
    if (dragTimeoutRef.current) clearTimeout(dragTimeoutRef.current);
    dragTimeoutRef.current = null;
    setIsDraggingOver(false);
  }, []);

  const resetDragTimeout = useCallback(() => {
    if (dragTimeoutRef.current) clearTimeout(dragTimeoutRef.current);
    dragTimeoutRef.current = setTimeout(clearDragState, 150);
  }, [clearDragState]);

  const handleDragEnter = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (e.dataTransfer.types.includes('Files')) {
      setIsDraggingOver(true);
      resetDragTimeout();
    }
  }, [resetDragTimeout]);

  const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    resetDragTimeout();
  }, [resetDragTimeout]);

  const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    resetDragTimeout();
  }, [resetDragTimeout]);

  const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
    clearDragState();
    if (e.dataTransfer.files?.length) {
      addFiles(Array.from(e.dataTransfer.files));
    }
  }, [addFiles, clearDragState]);

  const removeAttachment = (index: number) => {
    const att = attachments[index];
    att?.abortController?.abort();
    setAttachments(prev => prev.filter((_, i) => i !== index));
  };

  // Inline preview for composer attachments, reusing the message viewer's
  // FilePreviewModal (so previewability and the open-in-new-tab safety gate are
  // handled there). Prefer the local File - no network - and fall back to the
  // uploaded blob (forwarded attachments, which carry only a blobId).
  const getPreviewAttachmentContent = useCallback(async () => {
    if (!previewAttachment) throw new Error('No attachment selected');
    if (previewAttachment.file) {
      return {
        blob: previewAttachment.file,
        contentType: previewAttachment.type || previewAttachment.file.type || 'application/octet-stream',
      };
    }
    if (composerClient && previewAttachment.blobId) {
      const blob = await composerClient.fetchBlob(previewAttachment.blobId, previewAttachment.name, previewAttachment.type);
      return { blob, contentType: previewAttachment.type || blob.type || 'application/octet-stream' };
    }
    throw new Error('No attachment content available');
  }, [previewAttachment, composerClient]);

  const handlePreviewAttachmentDownload = useCallback(async () => {
    if (!previewAttachment) return;
    if (previewAttachment.file) {
      const url = URL.createObjectURL(previewAttachment.file);
      const a = document.createElement('a');
      a.href = url;
      a.download = previewAttachment.name;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      return;
    }
    if (composerClient && previewAttachment.blobId) {
      await composerClient.downloadBlob(previewAttachment.blobId, previewAttachment.name, previewAttachment.type);
    }
  }, [previewAttachment, composerClient]);

  // Auto-save draft functionality
  const saveDraftOnce = async (): Promise<string | null> => {
    if (!client || !composerClient) return null;

    const toAddresses = withInput(to, toInput).map(r => formatRecipient(r.name, r.email));
    const ccAddresses = withInput(cc, ccInput).map(r => formatRecipient(r.name, r.email));
    const bccAddresses = withInput(bcc, bccInput).map(r => formatRecipient(r.name, r.email));

    if (!toAddresses.length && !subject && !(plainTextMode ? body.trim() : htmlToPlainText(body).trim())) {
      return null;
    }

    // Prepare attachments for draft
    const uploadedAttachments = attachments
      .filter(att => att.blobId && !att.uploading)
      .map(att => ({
        blobId: att.blobId!,
        name: att.name,
        type: att.type,
        size: att.size,
      }));

    // Create a hash of current data to compare with last saved
    const currentData = JSON.stringify({ to: toAddresses, cc: ccAddresses, bcc: bccAddresses, subject, body, attachments: uploadedAttachments, identityId: selectedIdentityId, subAddressTag });

    // Only save if data has changed
    if (currentData === lastSavedDataRef.current) {
      return draftIdRef.current;
    }

    setSaveStatus('saving');

    // Get the selected identity or primary identity
    // Generate sub-addressed email if tag is set
    const identityFromEmail = currentIdentity?.email
      ? subAddressTag
        ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter)
        : currentIdentity.email
      : undefined;
    const fromEmail = (fromOverrideEnabled && fromOverrideEmail.trim())
      ? fromOverrideEmail.trim()
      : identityFromEmail;
    const fromName = (fromOverrideEnabled && fromOverrideEmail.trim())
      ? (fromOverrideName.trim() || undefined)
      : (currentIdentity?.name || undefined);

    try {
      const previousDraftId = draftIdRef.current;
      // Use the JMAP client and raw identity id for the *owning* account
      // - falls back to active client for single-account / same-account
      // identities. See `composerClient` derivation above.
      const savedDraftId = await composerClient.createDraft(
        toAddresses,
        subject || t('no_subject'),
        plainTextMode ? body : htmlToPlainText(body),
        ccAddresses,
        bccAddresses,
        currentIdentityRawId,
        fromEmail,
        previousDraftId || undefined,
        uploadedAttachments,
        fromName,
        plainTextMode ? undefined : body
      );

      // Update the ref synchronously so a queued save sees the new id and
      // doesn't try to destroy the just-replaced draft.
      draftIdRef.current = savedDraftId;
      setDraftId(savedDraftId);
      lastSavedDataRef.current = currentData;
      setSaveStatus('saved');

      // Reset status after 2 seconds
      setTimeout(() => setSaveStatus('idle'), 2000);

      return savedDraftId;
    } catch (error) {
      console.error('Failed to save draft:', error);
      setSaveStatus('error');
      setTimeout(() => setSaveStatus('idle'), 3000);
      return null;
    }
  };

  // Serialize saves: each call waits for the previous in-flight save before
  // running. This prevents the autosave timer and the send button from
  // racing two `Email/set { destroy, create }` requests against the same
  // draftId, which left orphan drafts and (when EmailSubmission failed)
  // looked like "send didn't happen" (#303).
  const saveDraft = (): Promise<string | null> => {
    const previous = inflightSaveRef.current;
    const promise = (async (): Promise<string | null> => {
      if (previous) {
        try { await previous; } catch { /* prior failure already reported */ }
      }
      return saveDraftOnce();
    })();
    inflightSaveRef.current = promise;
    promise.finally(() => {
      if (inflightSaveRef.current === promise) {
        inflightSaveRef.current = null;
      }
    });
    return promise;
  };

  // Keep saveDraftRef pointing to latest saveDraft
  saveDraftRef.current = saveDraft;

  // Trigger auto-save when content changes (only if user modified something)
  useEffect(() => {
    // Clear existing timeout
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }

    // Don't auto-save if nothing has changed from initial state
    if (!isDirtyRef.current) {
      return;
    }

    // Set new timeout for auto-save (2 seconds after last change)
    saveTimeoutRef.current = setTimeout(() => {
      // Clear the ref so handleSend can distinguish "save scheduled" from
      // "save in flight" - the former still needs flushing, the latter is
      // tracked via inflightSaveRef.
      saveTimeoutRef.current = null;
      // Plugin observers (AI assist, grammar, …) get a debounced snapshot here.
      emailHooks.onDraftChange.emit({
        to: withInput(to, toInput).map(r => formatRecipient(r.name, r.email)),
        cc: withInput(cc, ccInput).map(r => formatRecipient(r.name, r.email)),
        bcc: withInput(bcc, bccInput).map(r => formatRecipient(r.name, r.email)),
        subject,
        htmlBody: plainTextMode ? '' : body,
        textBody: plainTextMode ? body : htmlToPlainText(body),
        identityId: selectedIdentityId || '',
        attachments: attachments
          .filter(a => a.blobId && !a.uploading && !a.error)
          .map(a => ({ name: a.name, type: a.type || 'application/octet-stream', size: a.size })),
      });
      saveDraft();
    }, 2000);

    // Cleanup on unmount
    return () => {
      if (saveTimeoutRef.current) {
        clearTimeout(saveTimeoutRef.current);
      }
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps -- saveDraft reads current state when called, not when effect is set up
  }, [toStr, ccStr, bccStr, subject, body, attachments]);

  useEffect(() => {
    return () => {
      if (autocompleteTimeoutRef.current) {
        clearTimeout(autocompleteTimeoutRef.current);
      }
    };
  }, []);

  const toAddresses = withInput(to, toInput);
  const bodyPlainText = plainTextMode ? body.trim() : htmlToPlainText(body).trim();
  const hasContent = bodyPlainText || attachments.some(att => att.blobId && !att.uploading);
  const canSend = toAddresses.length > 0 && !!subject && hasContent;

  const getSendTooltip = (): string | undefined => {
    if (canSend) return undefined;
    if (toAddresses.length === 0) return t('validation.recipient_required');
    if (!subject) return t('validation.subject_required');
    if (!hasContent) return t('validation.body_required');
    return undefined;
  };

  const validateScheduleValue = (value: string): string | null => {
    if (!value) return t('schedule_send_required');
    const time = new Date(value).getTime();
    if (!Number.isFinite(time)) return t('schedule_send_invalid');
    if (time <= Date.now()) return t('schedule_send_future');
    if (composerClient) {
      const maxDelayedSend = composerClient.getMaxDelayedSend();
      if (maxDelayedSend > 0 && time > Date.now() + maxDelayedSend * 1000) {
        return t('schedule_send_too_late');
      }
    }
    return null;
  };

  const resolveDelayedUntil = async (requestedDelayedUntil?: string): Promise<string | undefined> => {
    if (requestedDelayedUntil) return requestedDelayedUntil;
    if (sendDelaySeconds === 0) return undefined;
    if (composerClient?.hasDelayedSend()) {
      return new Date(Date.now() + sendDelaySeconds * 1000).toISOString();
    }
    const confirmed = window.confirm(t('send_delay_unsupported_confirm'));
    if (!confirmed) {
      throw new Error(t('send_delay_unsupported'));
    }
    return undefined;
  };

  // Rewrite data: URLs of dropped images (tagged with data-cid) into cid:
  // references so recipient clients that strip data URIs can still render them.
  const rewriteInlineImages = (html: string): {
    html: string;
    attachments: Array<{ blobId: string; name: string; type: string; size: number; disposition: 'inline'; cid: string }>;
  } => {
    const known = inlineImagesRef.current;
    const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
    const used = new Map<string, typeof known[number]>();

    if (known.length > 0) {
      doc.querySelectorAll('img[data-cid]').forEach((img) => {
        const cid = img.getAttribute('data-cid');
        if (!cid) return;
        const entry = known.find((e) => e.cid === cid);
        if (!entry) return;
        img.setAttribute('src', `cid:${cid}`);
        img.removeAttribute('data-cid');
        used.set(cid, entry);
      });
    }

    // Recipient mail clients apply default <p> margins inside table cells,
    // inflating row height. Tiptap wraps cell text in <p>, so force margin:0
    // to match the composer's tight rows.
    doc.querySelectorAll('td > p, th > p').forEach((p) => {
      const existing = p.getAttribute('style') || '';
      p.setAttribute('style', `margin:0;${existing}`);
    });

    return {
      html: doc.body.innerHTML,
      attachments: Array.from(used.values()).map((e) => ({
        blobId: e.blobId,
        name: e.name,
        type: e.type,
        size: e.size,
        disposition: 'inline' as const,
        cid: e.cid,
      })),
    };
  };

  const handleSend = async (skipAttachmentCheck = false, delayedUntil?: string) => {
    const ccAddresses = withInput(cc, ccInput);
    const bccAddresses = withInput(bcc, bccInput);

    if (!canSend) {
      const errors: { to?: boolean; subject?: boolean; body?: boolean } = {};
      if (toAddresses.length === 0) errors.to = true;
      if (!subject) errors.subject = true;
      if (!hasContent) errors.body = true;
      setValidationErrors(errors);

      if (errors.to) {
        setShakeField('to');
        setTimeout(() => setShakeField(null), 400);
        toInputRef.current?.focus();
      }
      return;
    }

    // Attachment reminder check
    if (!skipAttachmentCheck && attachmentReminderEnabled) {
      const hasAttachments = attachments.some(att => att.blobId && !att.uploading && !att.error);
      if (!hasAttachments) {
        const bodyText = htmlToPlainText(body);
        const searchText = `${subject} ${bodyText}`.toLowerCase();
        const matched = attachmentReminderKeywords.find(kw => searchText.includes(kw.toLowerCase()));
        if (matched) {
          setAttachmentWarningKeyword(matched);
          setAttachmentWarningDelayedUntil(delayedUntil);
          setShowAttachmentWarning(true);
          return;
        }
      }
    }

    // Resolve the freshest draftId we can. Two cases:
    //   1. An autosave is currently in flight - wait for it; don't issue a
    //      parallel destroy/create that would race with it on the same id.
    //   2. A debounced save is scheduled (timer set) - cancel it and flush
    //      now so the latest body content lands on the server.
    // Use draftIdRef (not the React state) because state updates from
    // the in-flight save may not have rendered yet when we read here.
    let finalDraftId = draftIdRef.current;
    if (inflightSaveRef.current) {
      try {
        const savedId = await inflightSaveRef.current;
        if (savedId) finalDraftId = savedId;
      } catch (err) {
        debug.error('In-flight draft save failed before send:', err);
      }
    }
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
      saveTimeoutRef.current = null;
      try {
        const savedId = await saveDraft();
        if (savedId) finalDraftId = savedId;
      } catch (err) {
        debug.error('Failed to save draft before send:', err);
      }
    }

    const identityFromEmail = currentIdentity?.email
      ? subAddressTag
        ? generateSubAddress(currentIdentity.email, subAddressTag, subAddressDelimiter)
        : currentIdentity.email
      : undefined;
    // When the user has typed a From override, that becomes the header From
    // (and MIME-builder From in the S/MIME path). The identity still drives
    // the SMTP envelope MAIL FROM - set explicitly so it doesn't mistakenly
    // default to the override address.
    const overrideActive = fromOverrideEnabled && fromOverrideEmail.trim().length > 0;
    const fromEmail = overrideActive ? fromOverrideEmail.trim() : identityFromEmail;
    const fromName = overrideActive
      ? (fromOverrideName.trim() || undefined)
      : (currentIdentity?.name || undefined);
    const envelopeMailFrom = overrideActive ? identityFromEmail : undefined;

    // Body is already HTML from the rich text editor (or plain text in plain text mode).
    // The signature is embedded into the body during init for compose mode
    // (when the initial identity had a signature) and for above-quote
    // replies/forwards - skip the trailing append in those cases so we don't
    // duplicate it.
    const signatureAlreadyInBody =
      shouldEmbedSignatureInNewMail ||
      ((mode === 'reply' || mode === 'replyAll' || mode === 'forward') &&
        signaturePosition === 'above_quote');

    // Build HTML signature block (used only in rich text mode)
    const buildSignatureHtml = (): string => {
      if (signatureAlreadyInBody) return '';
      const sep = signatureSeparatorEnabled ? `<br><br>-- <br>` : `<br><br>`;
      if (signatureIdentity?.htmlSignature) {
        return `${sep}${sanitizeSignatureHtml(signatureIdentity.htmlSignature)}`;
      }
      if (signatureIdentity?.textSignature) {
        return `${sep}${signatureIdentity.textSignature.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>')}`;
      }
      return '';
    };

    // RFC 5322 §3.6.4 threading - only continues the chain on a reply, not a forward.
    const threadingHeaders = (mode === 'reply' || mode === 'replyAll')
      ? computeReplyThreadingHeaders(replyTo)
      : null;

    // In plain text mode, send text/plain only (no HTML body)
    const signatureOpts = { separator: signatureSeparatorEnabled };
    const finalBody = plainTextMode
      ? (signatureAlreadyInBody ? body : appendPlainTextSignature(body, signatureIdentity, signatureOpts))
      : (signatureAlreadyInBody ? htmlToPlainText(body) : appendPlainTextSignature(htmlToPlainText(body), signatureIdentity, signatureOpts));

    const rewritten = plainTextMode ? null : rewriteInlineImages(body);
    const finalHtmlBody = plainTextMode
      ? undefined
      : `<div>${rewritten!.html}</div>${buildSignatureHtml()}`;
    const inlineAttachments = rewritten?.attachments ?? [];

    try {
      const effectiveDelayedUntil = await resolveDelayedUntil(delayedUntil);
      // Let plugins veto the send (external-mail warning, mistyped-domain
      // guards, etc.). Returning false from any handler aborts before either
      // the S/MIME or standard JMAP path runs.
      const sendablePreview: OutgoingEmail = {
        to: toAddresses.map(r => formatRecipient(r.name, r.email)),
        cc: ccAddresses.map(r => formatRecipient(r.name, r.email)),
        bcc: bccAddresses.map(r => formatRecipient(r.name, r.email)),
        subject,
        htmlBody: finalHtmlBody || '',
        textBody: finalBody,
        identityId: currentIdentity?.id || '',
        fromEmail,
        attachments: attachments
          .filter(att => att.blobId && !att.uploading && !att.error)
          .map(a => ({ name: a.name, type: a.type || 'application/octet-stream', size: a.size })),
        inReplyTo: threadingHeaders?.inReplyTo?.[0],
      };
      const sendAllowed = await emailHooks.onBeforeEmailSend.intercept(sendablePreview);
      if (!sendAllowed) return;

      // S/MIME send pipeline: build raw MIME → sign → encrypt → sendRawEmail
      if ((smimeSign_ || smimeEncrypt_) && client && currentIdentity?.id) {
        // S/MIME keys are scoped to one JMAP account's identity - sending
        // from a cross-account identity via S/MIME would mix accounts'
        // certs/clients. Refuse upfront and tell the user to switch.
        const crossAccount = stripCrossAccountIdentityPrefix(currentIdentity.id);
        if (crossAccount.localAccountId) {
          throw new Error('S/MIME sending from another account’s identity is not supported. Switch to that account first.');
        }
        // 1. Resolve S/MIME key
        if (smimeSign_ && !smimeKeyRecord) {
          throw new Error('No S/MIME key bound to this identity');
        }
        // S/MIME binds to the identity's key; sending from an override address
        // would produce a signature whose Subject differs from the visible
        // From, which most clients reject or flag. Refuse up front.
        if (overrideActive) {
          throw new Error('Cannot use From override with S/MIME - disable one to send.');
        }

        // 2. Ensure key is unlocked for signing
        if (smimeSign_ && smimeKeyRecord && !smimeStore.isKeyUnlocked(smimeKeyRecord.id)) {
          const passphrase = await new Promise<string>((resolve, reject) => {
            setSmimePassphrasePrompt({ keyId: smimeKeyRecord.id, resolve, reject });
          });
          try {
            await smimeStore.unlockKey(smimeKeyRecord.id, passphrase);
          } finally {
            setSmimePassphrasePrompt(null);
            setSmimePassphraseInput('');
            setSmimePassphraseError('');
          }
        }

        // 3. Resolve attachments as ArrayBuffers
        const mimeAttachments: MimeAttachment[] = [];
        for (const att of attachments) {
          if (att.error || att.uploading) continue;
          let content: ArrayBuffer;
          if (att.file && att.file.size > 0) {
            content = await att.file.arrayBuffer();
          } else if (att.blobId && client) {
            content = await client.fetchBlobArrayBuffer(att.blobId, att.name, att.type);
          } else {
            continue;
          }
          mimeAttachments.push({
            filename: att.name,
            contentType: att.type || 'application/octet-stream',
            content,
          });
        }
        for (const inline of inlineAttachments) {
          if (!client) break;
          const content = await client.fetchBlobArrayBuffer(inline.blobId, inline.name, inline.type);
          mimeAttachments.push({
            filename: inline.name,
            contentType: inline.type,
            content,
            cid: inline.cid,
          });
        }

        // 4. Build canonical MIME
        // mime-builder takes inReplyTo as a single ref-form msg-id (with brackets);
        // references stays an array. threadingHeaders contains bare msg-ids.
        const mimeInReplyTo = threadingHeaders?.inReplyTo[0]
          ? `<${threadingHeaders.inReplyTo[0]}>`
          : undefined;
        const mimeReferences = threadingHeaders?.references.length
          ? threadingHeaders.references.map(id => `<${id}>`)
          : undefined;
        const mimeBytes = buildMimeMessage({
          from: { name: currentIdentity.name || undefined, email: fromEmail || currentIdentity.email },
          to: toAddresses,
          cc: ccAddresses.length > 0 ? ccAddresses : undefined,
          bcc: bccAddresses.length > 0 ? bccAddresses : undefined,
          subject,
          inReplyTo: mimeInReplyTo,
          references: mimeReferences,
          textBody: finalBody,
          htmlBody: finalHtmlBody,
          attachments: mimeAttachments.length > 0 ? mimeAttachments : undefined,
        });

        let payload: Blob = new Blob([mimeBytes.buffer as ArrayBuffer], { type: 'message/rfc822' });

        const smimeHeaders = {
          from: { name: currentIdentity.name || undefined, email: fromEmail || currentIdentity.email },
          to: toAddresses,
          cc: ccAddresses.length > 0 ? ccAddresses : undefined,
          subject,
          inReplyTo: mimeInReplyTo,
          references: mimeReferences,
        };

        // 5. Sign if enabled
        if (smimeSign_ && smimeKeyRecord) {
          const privateKey = smimeStore.getUnlockedKey(smimeKeyRecord.id);
          if (!privateKey) throw new Error('S/MIME key is not unlocked');
          const cmsBlob = await smimeSign(
            mimeBytes,
            privateKey,
            smimeKeyRecord.certificate,
            smimeKeyRecord.certificateChain || [],
          );
          const cmsBytes = new Uint8Array(await cmsBlob.arrayBuffer());
          payload = wrapCmsAsSmimeMessage(cmsBytes, { ...smimeHeaders, smimeType: 'signed-data' });
        }

        // 6. Encrypt if enabled
        if (smimeEncrypt_ && smimeKeyRecord) {
          const allRecipients = [...toAddresses, ...ccAddresses, ...bccAddresses].map(r => r.email);
          const { found, missing } = smimeStore.getRecipientCerts(allRecipients);
          if (missing.length > 0) {
            throw new Error(`Missing certificates for: ${missing.join(', ')}`);
          }
          const recipientCertsDer = found.map(c => c.certificate instanceof ArrayBuffer ? c.certificate : new Uint8Array(c.certificate as ArrayBuffer).buffer);
          const payloadBytes = new Uint8Array(await payload.arrayBuffer());
          const cmsBlob = await smimeEncrypt(
            payloadBytes,
            recipientCertsDer,
            smimeKeyRecord.certificate,
          );
          const cmsBytes = new Uint8Array(await cmsBlob.arrayBuffer());
          payload = wrapCmsAsSmimeMessage(cmsBytes, { ...smimeHeaders, smimeType: 'enveloped-data' });
        }

        // 7. Send via raw email path
        const result = await sendRawEmail(client, payload, currentIdentity.id, effectiveDelayedUntil, [...toAddresses, ...ccAddresses, ...bccAddresses].map(r => r.email));
        if (effectiveDelayedUntil && finalDraftId) {
          client.deleteEmail(finalDraftId).catch(err => {
            debug.warn('email', 'Scheduled S/MIME send created, but plaintext draft cleanup failed:', err);
            toast.warning(t('schedule_send_cleanup_warning'));
          });
        }
        if (result.scheduled) {
          await onScheduledSendCreated?.();
        }
      } else {
        // Standard JMAP send path
        // Collect uploaded attachment blobIds for the send request
        const uploadedAttachments: Array<{ blobId: string; name: string; type: string; size: number; disposition?: 'attachment' | 'inline'; cid?: string }> = attachments
          .filter(att => att.blobId && !att.uploading && !att.error)
          .map(att => ({ blobId: att.blobId!, name: att.name, type: att.type || 'application/octet-stream', size: att.size }));
        uploadedAttachments.push(...inlineAttachments);

        // Let plugins (signatures, link-rewriting, encryption, AI rewrite, …)
        // transform the outgoing message immediately before submission.
        const transformInput: OutgoingEmail = {
          to: toAddresses.map(r => formatRecipient(r.name, r.email)),
          cc: ccAddresses.map(r => formatRecipient(r.name, r.email)),
          bcc: bccAddresses.map(r => formatRecipient(r.name, r.email)),
          subject,
          htmlBody: finalHtmlBody || '',
          textBody: finalBody,
          identityId: currentIdentity?.id || '',
          fromEmail,
          attachments: uploadedAttachments.map(a => ({ name: a.name, type: a.type, size: a.size })),
          inReplyTo: threadingHeaders?.inReplyTo?.[0],
        };
        const outgoing = await emailHooks.onTransformOutgoingEmail.transform(transformInput);

        // Strip the cross-account namespace from the identity id before
        // handing it to the parent - the JMAP server only knows the raw
        // id. The owning local account travels alongside so the parent
        // can route the send through the right client.
        const rawIdentityId = outgoing.identityId || currentIdentity?.id;
        const { localAccountId: identityLocalAccountId, rawId } = rawIdentityId
          ? stripCrossAccountIdentityPrefix(rawIdentityId)
          : { localAccountId: null, rawId: undefined };

        await onSend?.({
          to: outgoing.to,
          cc: outgoing.cc,
          bcc: outgoing.bcc,
          subject: outgoing.subject,
          body: outgoing.textBody,
          htmlBody: outgoing.htmlBody || undefined,
          draftId: finalDraftId || undefined,
          fromEmail,
          fromName,
          identityId: rawId,
          envelopeMailFrom,
          localAccountId: identityLocalAccountId ?? undefined,
          attachments: uploadedAttachments.length > 0 ? uploadedAttachments : undefined,
          inReplyTo: threadingHeaders?.inReplyTo,
          references: threadingHeaders?.references,
          requestReadReceipt,
          delayedUntil: effectiveDelayedUntil,
        });

        if (mode === 'reply' || mode === 'replyAll') {
          for (const recipient of [...outgoing.to, ...outgoing.cc].filter(Boolean)) {
            if (trustedSendersAddressBook && client) {
              addToTrustedSendersBook(client, recipient).catch(err => {
                debug.error('Failed to add trusted sender to address book:', err);
              });
            } else {
              addTrustedSender(recipient);
            }
          }
        }
      }

      setTo([]);
      setCc([]);
      setBcc([]);
      setToInput("");
      setCcInput("");
      setBccInput("");
      setSubject("");
      setBody("");
      draftIdRef.current = null;
      setDraftId(null);
      setSubAddressTag("");
      setValidationErrors({});
      setShowScheduleDialog(false);
      setScheduleValue('');
      setScheduleError('');
      // Clear ref so unmount effect doesn't re-save
      stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    } catch (err) {
      debug.error('Failed to send email:', err);
      toast.error(err instanceof Error ? err.message : t('send_failed'));
    }
  };

  const handleScheduleSend = () => {
    if (!composerClient?.hasDelayedSend()) {
      setScheduleError(t('schedule_send_unsupported'));
      return;
    }
    const error = validateScheduleValue(scheduleValue);
    if (error) {
      setScheduleError(error);
      return;
    }
    handleSend(false, new Date(scheduleValue).toISOString());
  };

  // Ctrl+Enter (Win/Linux) / Cmd+Enter (macOS) sends the open compose
  // draft. Scoped to events whose target lives inside this composer's
  // DOM tree — in Pro mode multiple composer tabs can be mounted at
  // once (inactive tabs are CSS-hidden, not unmounted), so a window
  // listener would otherwise fire every mounted composer's handleSend
  // on a single keystroke. handleSend is rebound every render, so we
  // route through a ref to keep the listener stable.
  const composerRootRef = useRef<HTMLDivElement | null>(null);
  const handleSendRef = useRef<((skipAttachmentCheck?: boolean) => Promise<void>) | undefined>(undefined);
  handleSendRef.current = handleSend;
  useEffect(() => {
    const handleSendShortcut = (e: KeyboardEvent) => {
      if (e.key !== 'Enter') return;
      if (!(e.ctrlKey || e.metaKey)) return;
      if (e.altKey || e.shiftKey) return;
      const root = composerRootRef.current;
      if (!root || !(e.target instanceof Node) || !root.contains(e.target)) return;
      e.preventDefault();
      void handleSendRef.current?.();
    };
    window.addEventListener('keydown', handleSendShortcut);
    return () => window.removeEventListener('keydown', handleSendShortcut);
  }, []);

  const cleanClose = () => {
    explicitCloseRef.current = true;
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }
    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    onClose?.();
  };

  const handleSaveDraftAndClose = async () => {
    explicitCloseRef.current = true;
    setShowCloseDialog(false);
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }
    await saveDraft();
    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    onClose?.();
  };

  const handleDiscardAndClose = () => {
    explicitCloseRef.current = true;
    setShowCloseDialog(false);
    if (saveTimeoutRef.current) {
      clearTimeout(saveTimeoutRef.current);
    }
    if (draftId && onDiscardDraft) {
      onDiscardDraft(draftId);
    }
    stateRef.current = { to: '', cc: '', bcc: '', subject: '', body: '', showCc: false, showBcc: false, selectedIdentityId: null, subAddressTag: '', draftId: null, fromOverrideEnabled: false, fromOverrideEmail: '', fromOverrideName: '' };
    onClose?.();
  };

  const handleClose = () => {
    if (isDirtyRef.current) {
      setShowCloseDialog(true);
    } else {
      cleanClose();
    }
  };

  const handleComposerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.defaultPrevented) return;

    const isPlainEscape = e.key === 'Escape' && !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
    const hasPrimaryModifier = e.ctrlKey || e.metaKey;
    const isSendShortcut = e.key === 'Enter' && hasPrimaryModifier && !e.altKey && !e.shiftKey;
    const isScheduleShortcut = e.key === 'Enter' && hasPrimaryModifier && !e.altKey && e.shiftKey;
    if (!isPlainEscape && !isSendShortcut && !isScheduleShortcut) return;

    if (
      showTemplatePicker ||
      showSaveAsTemplate ||
      showScheduleDialog ||
      smimePassphrasePrompt ||
      showAttachmentWarning ||
      showCloseDialog
    ) return;

    if (isPlainEscape) {
      if (activeAutoField) return;
      e.preventDefault();
      handleClose();
      return;
    }

    if (isSendShortcut) {
      if (e.repeat) {
        e.preventDefault();
        return;
      }

      e.preventDefault();
      handleSend();
      return;
    }

    if (isScheduleShortcut) {
      e.preventDefault();
      if (!e.repeat && composerClient?.hasDelayedSend()) openScheduleDialog();
    }
  };

  return (
    <div ref={composerRootRef} className={cn("flex h-full bg-background", className)}>
      <PluginSlot
        name="composer-sidebar"
        className="hidden md:flex shrink-0 h-full overflow-hidden border-r border-border"
      />
      {/* Right-side composer sidebar slot is rendered after the main content div below. */}
    <div
      className="flex flex-col h-full bg-background relative flex-1 min-w-0"
      data-tour="composer"
      onDragEnter={handleDragEnter}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      onKeyDown={handleComposerKeyDown}
    >
      {/* Drag overlay */}
      {isDraggingOver && (
        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 border-2 border-dashed border-primary rounded-lg pointer-events-none">
          <div className="flex flex-col items-center gap-2 text-primary">
            <Paperclip className="w-8 h-8" />
            <span className="text-sm font-medium">{t('drop_files')}</span>
          </div>
        </div>
      )}
      {/* Header - mobile: clean bar with close/send, desktop: title bar */}
      <div className="flex items-center justify-between px-4 py-3 border-b bg-background">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" onClick={handleClose} className="h-9 w-9 md:h-8 md:w-8">
            <X className="w-5 h-5 md:w-4 md:h-4" />
          </Button>
          <div className="flex items-center gap-2">
            <h3 className="font-semibold text-base">{t('new_message')}</h3>
            {saveStatus === 'saving' && (
              <div className="flex items-center gap-1 text-xs text-muted-foreground">
                <Save className="w-3 h-3 animate-pulse" />
                <span className="hidden md:inline">{t('saving')}</span>
              </div>
            )}
            {saveStatus === 'saved' && (
              <div className="flex items-center gap-1 text-xs text-green-600">
                <Check className="w-3 h-3" />
                <span className="hidden md:inline">{t('draft_saved')}</span>
              </div>
            )}
            {saveStatus === 'error' && (
              <div className="flex items-center gap-1 text-xs text-red-600">
                <X className="w-3 h-3" />
                <span className="hidden md:inline">{t('save_failed')}</span>
              </div>
            )}
          </div>
        </div>
        {/* Mobile: send button in header */}
        <Button
          onClick={() => handleSend()}
          disabled={!canSend}
          title={getSendTooltip()}
          size="sm"
          className="md:hidden h-9 px-4"
        >
          <Send className="w-4 h-4 mr-1.5" />
          {t('send')}
        </Button>
      </div>

      <div className="flex-1 min-h-0 overflow-auto">
        {/* Fields section */}
        <div className="space-y-0 border-b">
          {/* From field */}
          <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/50">
            <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('from')}:</span>
            <div className="flex-1 flex items-center gap-1 min-w-0">
              {fromOverrideEnabled ? (
                <div className="flex-1 flex items-center gap-1 min-w-0">
                  <Input
                    value={fromOverrideName}
                    onChange={(e) => setFromOverrideName(e.target.value)}
                    placeholder={t('from_override.name_placeholder')}
                    className="h-7 text-sm w-32 md:w-40 shrink-0"
                    aria-label={t('from_override.name_label')}
                  />
                  <Input
                    value={fromOverrideEmail}
                    onChange={(e) => setFromOverrideEmail(e.target.value)}
                    placeholder={t('from_override.email_placeholder')}
                    type="email"
                    className="h-7 text-sm flex-1 min-w-0 font-mono"
                    aria-label={t('from_override.email_label')}
                  />
                </div>
              ) : identities.length > 1 ? (
                <select
                  value={selectedIdentityId || primaryIdentity?.id || ''}
                  onChange={(e) => setSelectedIdentityId(e.target.value)}
                  className="flex-1 bg-transparent text-sm text-foreground outline-none cursor-pointer hover:text-muted-foreground transition-colors min-w-0 truncate"
                >
                  {identityGroups.length > 0
                    ? identityGroups.map((group) => (
                        <optgroup key={group.localAccountId} label={group.accountLabel}>
                          {group.identities.map((identity) => {
                            const displayEmail = subAddressTag
                              ? generateSubAddress(identity.email, subAddressTag, subAddressDelimiter)
                              : identity.email;
                            return (
                              <option key={identity.id} value={identity.id}>
                                {identity.name ? `${identity.name} <${displayEmail}>` : displayEmail}
                              </option>
                            );
                          })}
                        </optgroup>
                      ))
                    : identities.map((identity) => {
                        const displayEmail = subAddressTag
                          ? generateSubAddress(identity.email, subAddressTag, subAddressDelimiter)
                          : identity.email;
                        return (
                          <option key={identity.id} value={identity.id}>
                            {identity.name ? `${identity.name} <${displayEmail}>` : displayEmail}
                          </option>
                        );
                      })}
                </select>
              ) : (
                <span className="text-sm text-foreground flex-1 truncate">
                  {subAddressTag ? (
                    <span className="font-mono">
                      {generateSubAddress(primaryIdentity?.email || '', subAddressTag, subAddressDelimiter)}
                    </span>
                  ) : (
                    <>
                      {primaryIdentity?.name
                        ? `${primaryIdentity.name} <${primaryIdentity.email}>`
                        : primaryIdentity?.email || ''}
                    </>
                  )}
                </span>
              )}
              {!fromOverrideEnabled && (
                <SubAddressHelper
                  baseEmail={
                    (selectedIdentityId
                      ? identities.find(id => id.id === selectedIdentityId)?.email
                      : primaryIdentity?.email) || ''
                  }
                  recipientEmails={withInput(to, toInput).map(r => r.email)}
                  onSelectTag={setSubAddressTag}
                />
              )}
              {!fromOverrideEnabled && subAddressTag && (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  onClick={() => setSubAddressTag('')}
                  className="h-6 px-2 text-xs"
                  title={t('remove_sub_address')}
                >
                  <X className="w-3 h-3" />
                </Button>
              )}
              <Button
                type="button"
                variant={fromOverrideEnabled ? 'outline' : 'ghost'}
                size="sm"
                onClick={() => {
                  if (fromOverrideEnabled) {
                    setFromOverrideEnabled(false);
                  } else {
                    setFromOverrideEnabled(true);
                    if (!fromOverrideEmail && currentIdentity?.email) {
                      setFromOverrideEmail(currentIdentity.email);
                    }
                    if (!fromOverrideName && currentIdentity?.name) {
                      setFromOverrideName(currentIdentity.name);
                    }
                  }
                }}
                className="h-6 px-2 text-xs shrink-0"
                title={t('from_override.toggle_tooltip')}
              >
                {fromOverrideEnabled ? t('from_override.toggle_on') : t('from_override.toggle_off')}
              </Button>
            </div>
          </div>

          {/* To field */}
          <div className={cn("flex items-center gap-2 px-4 py-2.5 border-b border-border/50 relative", shakeField === 'to' && "animate-shake")}>
            <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('to')}:</span>
            <RecipientChipInput
              chips={to}
              onChipsChange={(next) => {
                setTo(next);
                if (validationErrors.to) setValidationErrors(prev => ({ ...prev, to: false }));
              }}
              inputText={toInput}
              onInputChange={setToInput}
              inputRef={toInputRef}
              placeholder={t('to_placeholder')}
              field="to"
              onAutocomplete={handleAutocomplete}
              onAutoKeyDown={handleAutoKeyDown}
              onAutoBlur={handleAutoBlur}
              activeAutoField={activeAutoField}
              autocompleteResults={autocompleteResults}
              autoSelectedIndex={autoSelectedIndex}
              dropdownRef={toDropdownRef}
              onInsertAutocomplete={insertAutocomplete}
              validationError={validationErrors.to}
              validationMessage={t('validation.recipient_required')}
              onTab={focusSubject}
              onMoveChip={handleMoveChip}
            />
            <div className="flex gap-0.5 shrink-0">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setShowCc(!showCc)}
                className={cn("text-xs h-7 px-2", isDraggingChipOverCc && "ring-2 ring-primary/50")}
                onDragOver={(e) => {
                  if (!e.dataTransfer.types.includes('application/x-recipient-chip')) return;
                  e.preventDefault();
                  e.dataTransfer.dropEffect = 'move';
                  setIsDraggingChipOverCc(true);
                }}
                onDragLeave={() => setIsDraggingChipOverCc(false)}
                onDrop={(e) => {
                  e.preventDefault();
                  setIsDraggingChipOverCc(false);
                  const raw = e.dataTransfer.getData('application/x-recipient-chip');
                  if (!raw) return;
                  const { recipient, fromField } = JSON.parse(raw) as { recipient: Recipient; fromField: 'to' | 'cc' | 'bcc' };
                  if (fromField !== 'cc') handleMoveChip(recipient, fromField, 'cc');
                  setShowCc(true);
                }}
              >
                Cc
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setShowBcc(!showBcc)}
                className={cn("text-xs h-7 px-2", isDraggingChipOverBcc && "ring-2 ring-primary/50")}
                onDragOver={(e) => {
                  if (!e.dataTransfer.types.includes('application/x-recipient-chip')) return;
                  e.preventDefault();
                  e.dataTransfer.dropEffect = 'move';
                  setIsDraggingChipOverBcc(true);
                }}
                onDragLeave={() => setIsDraggingChipOverBcc(false)}
                onDrop={(e) => {
                  e.preventDefault();
                  setIsDraggingChipOverBcc(false);
                  const raw = e.dataTransfer.getData('application/x-recipient-chip');
                  if (!raw) return;
                  const { recipient, fromField } = JSON.parse(raw) as { recipient: Recipient; fromField: 'to' | 'cc' | 'bcc' };
                  if (fromField !== 'bcc') handleMoveChip(recipient, fromField, 'bcc');
                  setShowBcc(true);
                }}
              >
                Bcc
              </Button>
            </div>
          </div>

          {/* Cc field */}
          {showCc && (
            <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/50 relative">
              <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('cc_label')}</span>
              <RecipientChipInput
                chips={cc}
                onChipsChange={setCc}
                inputText={ccInput}
                onInputChange={setCcInput}
                inputRef={ccInputRef}
                placeholder={t('cc_placeholder')}
                field="cc"
                onAutocomplete={handleAutocomplete}
                onAutoKeyDown={handleAutoKeyDown}
                onAutoBlur={handleAutoBlur}
                activeAutoField={activeAutoField}
                autocompleteResults={autocompleteResults}
                autoSelectedIndex={autoSelectedIndex}
                dropdownRef={ccDropdownRef}
                onInsertAutocomplete={insertAutocomplete}
                onMoveChip={handleMoveChip}
              />
            </div>
          )}

          {/* Bcc field */}
          {showBcc && (
            <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border/50 relative">
              <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('bcc_label')}</span>
              <RecipientChipInput
                chips={bcc}
                onChipsChange={setBcc}
                inputText={bccInput}
                onInputChange={setBccInput}
                inputRef={bccInputRef}
                placeholder={t('bcc_placeholder')}
                field="bcc"
                onAutocomplete={handleAutocomplete}
                onAutoKeyDown={handleAutoKeyDown}
                onAutoBlur={handleAutoBlur}
                activeAutoField={activeAutoField}
                autocompleteResults={autocompleteResults}
                autoSelectedIndex={autoSelectedIndex}
                dropdownRef={bccDropdownRef}
                onInsertAutocomplete={insertAutocomplete}
                onMoveChip={handleMoveChip}
              />
            </div>
          )}

          {/* Subject field */}
          <div className="flex items-center gap-2 px-4 py-2.5">
            <span className="text-sm text-muted-foreground w-12 md:w-16 shrink-0">{t('subject_label')}</span>
            <Input
              ref={subjectInputRef}
              type="text"
              placeholder={t('subject_placeholder')}
              value={subject}
              onChange={(e) => {
                setSubject(e.target.value);
                if (validationErrors.subject) setValidationErrors(prev => ({ ...prev, subject: false }));
              }}
              onKeyDown={(e) => {
                if (e.key === 'Tab' && !e.shiftKey) {
                  e.preventDefault();
                  focusBody();
                }
              }}
              className={cn(
                "flex-1 border-0 focus-visible:ring-0 h-8 px-0 text-sm",
                validationErrors.subject && "ring-2 ring-red-500 dark:ring-red-400"
              )}
              aria-invalid={validationErrors.subject || undefined}
            />
          </div>
        </div>

        {/* Body */}
        {plainTextMode ? (
          <textarea
            ref={bodyRef}
            value={body}
            onChange={(e) => {
              setBody(e.target.value);
              if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
            }}
            placeholder={t('body_placeholder')}
            className={cn(
              "w-full min-h-[300px] px-4 py-3 text-sm text-foreground bg-transparent resize-y focus:outline-none font-mono",
              validationErrors.body && "ring-2 ring-red-500 dark:ring-red-400 rounded"
            )}
            style={{ height: 'calc(100vh - 350px)' }}
            aria-invalid={validationErrors.body || undefined}
          />
        ) : (
          <div ref={editorContainerRef}>
            <RichTextEditor
              content={body}
              onChange={(html) => {
                setBody(html);
                if (validationErrors.body) setValidationErrors(prev => ({ ...prev, body: false }));
              }}
              onImageUpload={handleImageUpload}
              placeholder={t('body_placeholder')}
              hasError={validationErrors.body}
              onEditorReady={(ed) => { editorRef.current = ed; }}
            />
          </div>
        )}

        {/* Hide the visual signature preview when the signature has already been
            embedded into the body (compose, or above-quote replies). */}
        {(shouldEmbedSignatureInNewMail
          || ((mode === 'reply' || mode === 'replyAll' || mode === 'forward') && signaturePosition === 'above_quote')) ? null
          : plainTextMode ? (
          getPlainTextSignature(signatureIdentity) ? (
            <div className="px-4 pb-3 text-sm leading-6 text-muted-foreground break-words whitespace-pre-wrap font-mono">
              {signatureSeparatorEnabled ? '-- \n' : ''}{getPlainTextSignature(signatureIdentity)}
            </div>
          ) : null
        ) : composerSignatureHtml ? (
          <div
            className="px-4 pb-3 text-sm leading-6 text-foreground break-words [&_a]:text-primary [&_a]:underline-offset-2 [&_a:hover]:underline"
            dangerouslySetInnerHTML={{ __html: `${signatureSeparatorEnabled ? '<div>-- </div>' : ''}${composerSignatureHtml}` }}
          />
        ) : null}
      </div>

        {/* Attachments */}
        {attachments.length > 0 && (
          <div className="px-4 py-2 border-t shrink-0">
            <div className="flex flex-wrap gap-2">
              {(showAllAttachments ? attachments : attachments.slice(0, 3)).map((att, index) => {
                // Clickable to preview only once it has content (local File or an
                // uploaded blob) and the type is previewable; never mid-upload.
                const canPreview = !att.uploading && !att.error
                  && (!!att.file || !!att.blobId)
                  && isFilePreviewable(att.name, att.type);
                const label = (
                  <>
                    <span className="max-w-[150px] md:max-w-[200px] truncate">{att.name}</span>
                    <span className="text-xs text-muted-foreground whitespace-nowrap">
                      ({formatFileSize(att.size)})
                    </span>
                  </>
                );
                return (
                <div
                  key={index}
                  className={cn(
                    "relative flex items-center gap-2 px-3 py-1.5 rounded-md text-sm overflow-hidden",
                    att.error ? "bg-red-500/10 text-red-600 dark:text-red-400" : "bg-muted text-foreground"
                  )}
                >
                  {att.uploading && (
                    <div className="absolute inset-0 pointer-events-none">
                      <div className="h-full bg-primary/10 animate-pulse" />
                      <div className="absolute bottom-0 left-0 h-0.5 bg-primary/40 animate-[indeterminate_1.5s_ease-in-out_infinite]" style={{ width: '40%' }} />
                    </div>
                  )}
                  <div className="relative flex items-center gap-2">
                    {att.uploading ? (
                      <Loader2 className="w-3 h-3 animate-spin flex-shrink-0" />
                    ) : att.error ? (
                      <AlertCircle className="w-3 h-3 flex-shrink-0" />
                    ) : (
                      <Paperclip className="w-3 h-3 flex-shrink-0" />
                    )}
                    {canPreview ? (
                      <button
                        type="button"
                        onClick={() => setPreviewAttachment(att)}
                        title={att.name}
                        className="flex items-center gap-2 min-w-0 hover:underline"
                      >
                        {label}
                      </button>
                    ) : (
                      <div className="flex items-center gap-2 min-w-0">{label}</div>
                    )}
                    <button
                      onClick={() => removeAttachment(index)}
                      className="ml-1 hover:text-red-500 min-w-[20px] min-h-[20px] flex items-center justify-center"
                      title={att.uploading ? t('upload_cancel') : undefined}
                    >
                      <X className="w-3 h-3" />
                    </button>
                  </div>
                </div>
                );
              })}
              {attachments.length > 3 && (
                <button
                  onClick={() => setShowAllAttachments(prev => !prev)}
                  className="flex items-center gap-1 px-3 py-1.5 rounded-md text-sm bg-muted text-muted-foreground hover:text-foreground transition-colors"
                >
                  {showAllAttachments ? t('show_less') : `+${attachments.length - 3}`}
                </button>
              )}
            </div>
          </div>
        )}

        {/* Bottom toolbar */}
        <div className="flex items-center justify-between px-4 py-2.5 border-t bg-background shrink-0 pb-[calc(0.625rem+env(safe-area-inset-bottom)/2)]">
          {/* Left side actions */}
          <div className="flex items-center gap-1">
            <input
              ref={fileInputRef}
              type="file"
              multiple
              onChange={handleFileSelect}
              className="hidden"
              accept="*/*"
            />
            <Button
              variant="ghost"
              size="icon"
              onClick={() => fileInputRef.current?.click()}
              className="h-9 w-9"
              title={t('attach')}
            >
              <Paperclip className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setShowTemplatePicker(true)}
              title={t('use_template')}
              className="h-9 w-9"
            >
              <FileText className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setShowSaveAsTemplate(true)}
              title={t('save_as_template')}
              className="h-9 w-9"
            >
              <BookmarkPlus className="w-4 h-4" />
            </Button>
            {/* S/MIME toggles */}
            {canSmimeSign && (
              <>
                <div className="w-px h-5 bg-border mx-1" />
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSmimeSign(v => !v)}
                  className={cn("h-9 w-9", smimeSign_ && "bg-primary/10 text-primary")}
                  title={smimeSign_ ? t('smime_sign_on') : t('smime_sign_off')}
                >
                  <ShieldCheck className="w-4 h-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSmimeEncrypt(v => !v)}
                  disabled={!canSmimeEncrypt}
                  className={cn("h-9 w-9", smimeEncrypt_ && "bg-primary/10 text-primary")}
                  title={smimeEncrypt_ ? t('smime_encrypt_on') : canSmimeEncrypt ? t('smime_encrypt_off') : t('smime_encrypt_unavailable')}
                >
                  <Lock className="w-4 h-4" />
                </Button>
              </>
            )}

            {/* Read-receipt request toggle */}
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setRequestReadReceipt(v => !v)}
              className={cn(
                "h-9 w-9",
                requestReadReceipt && "bg-green-600 text-white hover:bg-green-600 hover:text-white dark:bg-green-600 dark:hover:bg-green-600"
              )}
              title={requestReadReceipt ? t('read_receipt_on') : t('read_receipt_off')}
              aria-pressed={requestReadReceipt}
            >
              <MailCheck className="w-4 h-4" />
            </Button>
            <PluginSlot name="composer-toolbar" />
          </div>

          {/* Right side - Discard + Send (desktop) */}
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={handleClose}
              className="text-sm text-muted-foreground hover:text-red-500 transition-colors px-2 py-1"
            >
              {t('discard')}
            </button>
            {composerClient?.hasDelayedSend() ? (
              <div ref={sendMenuRef} className="relative hidden md:inline-flex">
                <Button
                  onClick={() => handleSend()}
                  disabled={!canSend}
                  title={getSendTooltip()}
                  className="rounded-r-none border-r border-primary-foreground/20"
                >
                  <Send className="w-4 h-4 mr-2" />
                  {t('send')}
                </Button>
                <Button
                  type="button"
                  onClick={() => setShowSendMenu((open) => !open)}
                  disabled={!canSend}
                  title={t('schedule_send')}
                  className="rounded-l-none px-2"
                  aria-haspopup="menu"
                  aria-expanded={showSendMenu}
                >
                  <ChevronDown className="w-4 h-4" />
                </Button>
                {showSendMenu && (
                  <div
                    role="menu"
                    className="absolute right-0 bottom-full z-50 mb-2 min-w-44 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
                  >
                    <button
                      type="button"
                      role="menuitem"
                      onClick={openScheduleDialog}
                      className="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-left text-sm hover:bg-accent hover:text-accent-foreground"
                    >
                      <CalendarClock className="w-4 h-4" />
                      {t('schedule_send')}
                    </button>
                  </div>
                )}
              </div>
            ) : (
              <Button
                onClick={() => handleSend()}
                disabled={!canSend}
                title={getSendTooltip()}
                className="hidden md:inline-flex"
              >
                <Send className="w-4 h-4 mr-2" />
                {t('send')}
              </Button>
            )}
          </div>
        </div>

      {showTemplatePicker && (
        <TemplatePicker
          isOpen={showTemplatePicker}
          onClose={() => setShowTemplatePicker(false)}
          onSelect={handleTemplateSelect}
        />
      )}

      {showSaveAsTemplate && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
          <div
            ref={saveTemplateModalRef}
            role="dialog"
            aria-modal="true"
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-lg p-6 animate-in zoom-in-95 duration-200"
          >
            <h3 className="text-lg font-semibold text-foreground mb-4">{t('save_as_template')}</h3>
            <TemplateForm
              initialData={{
                subject,
                body,
                to: withInput(to, toInput).map(r => formatRecipient(r.name, r.email)),
                cc: withInput(cc, ccInput).map(r => formatRecipient(r.name, r.email)),
                bcc: withInput(bcc, bccInput).map(r => formatRecipient(r.name, r.email)),
              }}
              onSave={(data) => {
                addTemplate(data);
                setShowSaveAsTemplate(false);
              }}
              onCancel={() => setShowSaveAsTemplate(false)}
            />
          </div>
        </div>
      )}

      {showScheduleDialog && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 animate-in fade-in duration-150">
          <div className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md p-6 animate-in zoom-in-95 duration-200">
            <h3 className="text-lg font-semibold text-foreground mb-2">{t('schedule_send')}</h3>
            <p className="text-sm text-muted-foreground mb-4">{t('schedule_send_description')}</p>
            <Input
              type="datetime-local"
              value={scheduleValue}
              onChange={(e) => {
                setScheduleValue(e.target.value);
                setScheduleError('');
              }}
              className={cn(scheduleError && "border-destructive focus-visible:ring-destructive")}
            />
            {scheduleError && <p className="mt-2 text-sm text-destructive">{scheduleError}</p>}
            <div className="mt-5 flex justify-end gap-2">
              <Button variant="ghost" onClick={() => setShowScheduleDialog(false)}>{tCommon('cancel')}</Button>
              <Button onClick={handleScheduleSend} disabled={!canSend}>{t('schedule_send')}</Button>
            </div>
          </div>
        </div>
      )}

      {/* S/MIME passphrase prompt */}
      {smimePassphrasePrompt && (
        <div
          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
        >
          <div
            role="dialog"
            aria-modal="true"
            onClick={(e) => e.stopPropagation()}
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-sm animate-in zoom-in-95 duration-200"
          >
            <div className="p-6">
              <h2 className="text-lg font-semibold text-foreground">{t('smime_unlock_title')}</h2>
              <p className="mt-2 text-sm text-muted-foreground">{t('smime_unlock_message')}</p>
              <input
                type="password"
                autoFocus
                value={smimePassphraseInput}
                onChange={(e) => {
                  setSmimePassphraseInput(e.target.value);
                  setSmimePassphraseError('');
                }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && smimePassphraseInput) {
                    smimePassphrasePrompt.resolve(smimePassphraseInput);
                  }
                }}
                placeholder={t('smime_passphrase_placeholder')}
                className="mt-3 w-full px-3 py-2 border border-border rounded-md text-sm bg-background text-foreground outline-none focus:ring-2 focus:ring-primary"
              />
              {smimePassphraseError && (
                <p className="mt-1 text-xs text-red-500">{smimePassphraseError}</p>
              )}
            </div>
            <div className="flex items-center justify-end gap-3 px-6 pb-6">
              <Button variant="outline" onClick={() => {
                smimePassphrasePrompt.reject();
                setSmimePassphrasePrompt(null);
                setSmimePassphraseInput('');
                setSmimePassphraseError('');
              }}>
                {t('cancel')}
              </Button>
              <Button
                disabled={!smimePassphraseInput}
                onClick={() => smimePassphrasePrompt.resolve(smimePassphraseInput)}
              >
                {t('smime_unlock_button')}
              </Button>
            </div>
          </div>
        </div>
      )}

      {showAttachmentWarning && (
        <div
          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
          onClick={() => setShowAttachmentWarning(false)}
        >
          <div
            ref={attachmentWarningRef}
            role="alertdialog"
            aria-modal="true"
            onClick={(e) => e.stopPropagation()}
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
          >
            <div className="p-6">
              <h2 className="text-lg font-semibold text-foreground">{t('forgot_attachment.title')}</h2>
              <p className="mt-2 text-sm text-muted-foreground">
                {t('forgot_attachment.message', { keyword: attachmentWarningKeyword })}
              </p>
            </div>
            <div className="flex items-center justify-end gap-3 px-6 pb-6">
              <Button variant="outline" onClick={() => setShowAttachmentWarning(false)}>
                {t('forgot_attachment.back')}
              </Button>
              <Button onClick={() => { setShowAttachmentWarning(false); handleSend(true, attachmentWarningDelayedUntil); setAttachmentWarningDelayedUntil(undefined); }}>
                {t('forgot_attachment.send_anyway')}
              </Button>
            </div>
          </div>
        </div>
      )}

      {showCloseDialog && (
        <div
          className="fixed inset-0 bg-black/50 backdrop-blur-[1px] flex items-center justify-center z-[60] p-4 animate-in fade-in duration-150"
          onClick={() => setShowCloseDialog(false)}
        >
          <div
            ref={closeDialogRef}
            role="alertdialog"
            aria-modal="true"
            onClick={(e) => e.stopPropagation()}
            className="bg-background border border-border rounded-lg shadow-xl w-full max-w-md animate-in zoom-in-95 duration-200"
          >
            <div className="p-6">
              <h2 className="text-lg font-semibold text-foreground">{t('close_draft_title')}</h2>
              <p className="mt-2 text-sm text-muted-foreground">{t('close_draft_message')}</p>
            </div>
            <div className="flex items-center justify-end gap-3 px-6 pb-6">
              <Button variant="outline" onClick={() => setShowCloseDialog(false)}>
                {t('cancel')}
              </Button>
              <Button variant="destructive" onClick={handleDiscardAndClose}>
                {t('discard')}
              </Button>
              <Button onClick={handleSaveDraftAndClose}>
                <Save className="w-4 h-4 mr-2" />
                {t('save_draft')}
              </Button>
            </div>
          </div>
        </div>
      )}

      {previewAttachment && (
        <FilePreviewModal
          name={previewAttachment.name}
          onClose={() => setPreviewAttachment(null)}
          onDownload={handlePreviewAttachmentDownload}
          getFileContent={getPreviewAttachmentContent}
        />
      )}
    </div>
      <PluginSlot
        name="composer-sidebar-right"
        className="hidden md:flex shrink-0 h-full overflow-hidden border-l border-border"
      />
    </div>
  );
}

const AutocompleteDropdown = React.forwardRef<HTMLDivElement, {
  id: string;
  results: Array<{ name: string; email: string }>;
  selectedIndex: number;
  onSelect: (suggestion: { name: string; email: string }) => void;
}>(function AutocompleteDropdown({ id, results, selectedIndex, onSelect }, ref) {
  return (
    <div ref={ref} id={id} role="listbox" className="absolute top-full left-0 right-0 z-50 mt-1 bg-background border border-border rounded-md shadow-lg max-h-48 overflow-y-auto">
      {results.map((r, i) => (
        <button
          key={i}
          id={`autocomplete-option-${i}`}
          type="button"
          role="option"
          aria-selected={i === selectedIndex}
          className={cn(
            "w-full px-3 py-2 text-left text-sm flex items-center gap-2",
            i === selectedIndex ? "bg-accent text-accent-foreground" : "hover:bg-muted"
          )}
          onMouseDown={(e) => {
            e.preventDefault();
            onSelect(r);
          }}
        >
          <Avatar name={r.name} email={r.email} size="sm" className="shrink-0 w-6 h-6 text-[10px]" />
          <span className="font-medium truncate">{r.name || r.email}</span>
          {r.name && (
            <span className="text-muted-foreground truncate">&lt;{r.email}&gt;</span>
          )}
        </button>
      ))}
    </div>
  );
});

function RecipientChipInput({
  chips,
  onChipsChange,
  inputText,
  onInputChange,
  inputRef,
  placeholder,
  field,
  onAutocomplete,
  onAutoKeyDown,
  onAutoBlur,
  activeAutoField,
  autocompleteResults,
  autoSelectedIndex,
  dropdownRef,
  onInsertAutocomplete,
  validationError,
  validationMessage,
  onTab,
  onMoveChip,
}: {
  chips: Recipient[];
  onChipsChange: (chips: Recipient[]) => void;
  inputText: string;
  onInputChange: (text: string) => void;
  inputRef: React.RefObject<HTMLInputElement | null>;
  placeholder: string;
  field: 'to' | 'cc' | 'bcc';
  onAutocomplete: (inputText: string, field: 'to' | 'cc' | 'bcc') => void;
  onAutoKeyDown: (e: React.KeyboardEvent, field: 'to' | 'cc' | 'bcc') => void;
  onAutoBlur: (e: React.FocusEvent, field: 'to' | 'cc' | 'bcc') => void;
  activeAutoField: 'to' | 'cc' | 'bcc' | null;
  autocompleteResults: Array<{ name: string; email: string }>;
  autoSelectedIndex: number;
  dropdownRef: React.RefObject<HTMLDivElement | null>;
  onInsertAutocomplete: (suggestion: { name: string; email: string }, field: 'to' | 'cc' | 'bcc') => void;
  validationError?: boolean;
  validationMessage?: string;
  onTab?: () => void;
  onMoveChip: (recipient: Recipient, fromField: 'to' | 'cc' | 'bcc', toField: 'to' | 'cc' | 'bcc') => void;
}) {
  const t = useTranslations('email_composer');
  const tCommon = useTranslations('common');
  const { contextMenu, openContextMenu, closeContextMenu, menuRef } = useContextMenu<{ index: number; recipient: Recipient }>();
  const [editingChip, setEditingChip] = useState<{ index: number; editType: 'email' | 'name' } | null>(null);
  const [editValue, setEditValue] = useState('');
  const [isDragOver, setIsDragOver] = useState(false);
  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
  const editInputRef = useRef<HTMLInputElement | null>(null);

  // Focus edit input when editing starts
  useEffect(() => {
    if (editingChip) {
      setTimeout(() => {
        if (editInputRef.current) {
          editInputRef.current.focus();
          editInputRef.current.select();
        }
      }, 0);
    }
  }, [editingChip]);

  // Format a recipient for display in a chip / context menu
  const formatChipDisplay = (r: Recipient): string =>
    r.name && r.name !== r.email ? `${r.name} (${r.email})` : r.email;

  // Handle saving an edited chip
  const handleSaveEdit = (newValue: string) => {
    if (!editingChip) return;
    const { index, editType } = editingChip;
    const chip = chips[index];
    if (!chip) {
      setEditingChip(null);
      return;
    }
    const trimmedNew = newValue.trim();

    let newChip: Recipient;
    if (editType === 'email') {
      // Update email, keep name. Empty email is a no-op (can't drop the email).
      if (!trimmedNew) {
        setEditingChip(null);
        return;
      }
      newChip = { name: chip.name, email: trimmedNew };
    } else {
      // Update name, keep email. Empty name clears the display name.
      newChip = { name: trimmedNew || undefined, email: chip.email };
    }

    const newChips = [...chips];
    newChips[index] = newChip;
    onChipsChange(newChips);
    setEditingChip(null);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newInputText = e.target.value;
    onInputChange(newInputText);
    onAutocomplete(newInputText, field);
  };

  const commitCurrentInput = () => {
    if (inputText.trim()) {
      onChipsChange([...chips, parseRecipient(inputText)]);
      onInputChange('');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (activeAutoField === field && autocompleteResults.length > 0) {
      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Escape' ||
          (e.key === 'Enter' && autoSelectedIndex >= 0)) {
        onAutoKeyDown(e, field);
        return;
      }
    }

    if ((e.key === ' ' || e.key === 'Enter' || e.key === 'Tab') && inputText.trim()) {
      if (e.key !== 'Tab') e.preventDefault();
      commitCurrentInput();
      if (e.key === 'Tab' && onTab) {
        e.preventDefault();
        setTimeout(() => onTab(), 0);
      } else {
        setTimeout(() => inputRef.current?.focus(), 0);
      }
      return;
    }

    if (e.key === 'Tab' && !e.shiftKey && onTab) {
      e.preventDefault();
      onTab();
      return;
    }

    // Backspace on an empty input pulls the last chip back into the input for
    // quick editing.
    if (e.key === 'Backspace' && !inputText && chips.length > 0) {
      const lastChip = chips[chips.length - 1];
      onChipsChange(chips.slice(0, -1));
      onInputChange(formatRecipient(lastChip.name, lastChip.email));
      return;
    }
  };

  const handleChipRemove = (index: number, e: React.MouseEvent) => {
    e.stopPropagation();
    onChipsChange(chips.filter((_, i) => i !== index));
  };

  const handleContextMenu = (e: React.MouseEvent, index: number, recipient: Recipient) => {
    openContextMenu(e, { index, recipient });
  };

  const handleEditEmail = () => {
    if (!contextMenu.data) return;
    const { index, recipient } = contextMenu.data;
    closeContextMenu();
    setEditValue(recipient.email);
    setEditingChip({ index, editType: 'email' });
  };

  const handleEditName = () => {
    if (!contextMenu.data) return;
    const { index, recipient } = contextMenu.data;
    closeContextMenu();
    setEditValue(recipient.name || '');
    setEditingChip({ index, editType: 'name' });
  };

  const handleBlur = (e: React.FocusEvent) => {
    const relatedTarget = e.relatedTarget as Node | null;
    if (relatedTarget && dropdownRef.current?.contains(relatedTarget)) {
      return;
    }
    commitCurrentInput();
    onAutoBlur(e, field);
  };

  const handleContainerDragOver = (e: React.DragEvent) => {
    if (!e.dataTransfer.types.includes('application/x-recipient-chip')) return;
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    setIsDragOver(true);
  };

  const handleContainerDragLeave = (e: React.DragEvent) => {
    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
      setIsDragOver(false);
    }
  };

  const handleContainerDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragOver(false);
    const raw = e.dataTransfer.getData('application/x-recipient-chip');
    if (!raw) return;
    const { recipient, fromField } = JSON.parse(raw) as { recipient: Recipient; fromField: 'to' | 'cc' | 'bcc' };
    if (fromField === field) return;
    onMoveChip(recipient, fromField, field);
  };

  return (
    <div className="flex-1 relative min-w-0">
      <div
        className={cn(
          "flex flex-wrap items-center gap-1 min-h-[32px] cursor-text",
          validationError && "ring-2 ring-red-500 dark:ring-red-400 rounded",
          isDragOver && "ring-2 ring-primary/50 rounded bg-accent/20"
        )}
        onClick={() => inputRef.current?.focus()}
        onDragOver={handleContainerDragOver}
        onDragLeave={handleContainerDragLeave}
        onDrop={handleContainerDrop}
      >
        {chips.map((chip, i) => {
          const isEditing = editingChip?.index === i;
          const chipDisplay = formatChipDisplay(chip);
          return (
            <span
              key={`${chip.email}-${i}`}
              draggable={!isEditing}
              onDragStart={(e) => {
                e.stopPropagation();
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('application/x-recipient-chip', JSON.stringify({ recipient: chip, fromField: field }));
                // Show the address while dragging, matching the email-list drag preview.
                const dragPreview = createChipDragPreview(chip.email);
                e.dataTransfer.setDragImage(dragPreview, 0, 0);
                requestAnimationFrame(() => dragPreview.remove());
                setDraggingIndex(i);
              }}
              onDragEnd={() => setDraggingIndex(null)}
              className={cn(
                "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-sm border border-border transition-colors",
                isEditing
                  ? "bg-background ring-1 ring-ring"
                  : "bg-secondary text-secondary-foreground hover:bg-accent cursor-grab active:cursor-grabbing",
                !isEditing && draggingIndex === i && "opacity-50"
              )}
              onContextMenu={isEditing ? undefined : (e) => handleContextMenu(e, i, chip)}
            >
              {isEditing ? (
                <input
                  ref={editInputRef}
                  type="text"
                  value={editValue}
                  onChange={(e) => setEditValue(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                      handleSaveEdit(editValue);
                    } else if (e.key === 'Escape') {
                      setEditingChip(null);
                    } else if (e.key === 'Tab') {
                      e.preventDefault();
                      handleSaveEdit(editValue);
                    }
                  }}
                  onBlur={(e) => {
                    const relatedTarget = e.relatedTarget as Node | null;
                    if (relatedTarget && dropdownRef.current?.contains(relatedTarget)) {
                      return;
                    }
                    handleSaveEdit(editValue);
                  }}
                  className="flex-1 min-w-[80px] border-0 outline-none h-5 text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
                  placeholder={editingChip?.editType === 'email' ? t('recipient_email_placeholder') : t('recipient_name_placeholder')}
                  data-bwignore="true"
                />
              ) : (
                <span className="truncate max-w-[200px]">{chipDisplay}</span>
              )}
              <button
                type="button"
                className="flex items-center justify-center w-4 h-4 rounded-full hover:bg-muted-foreground/20 transition-colors"
                onClick={(e) => {
                  e.stopPropagation();
                  if (isEditing) {
                    handleSaveEdit(editValue);
                  } else {
                    handleChipRemove(i, e);
                  }
                }}
                tabIndex={-1}
              >
                {isEditing ? (
                  <Check className="w-3 h-3" />
                ) : (
                  <X className="w-3 h-3" />
                )}
              </button>
            </span>
          );
        })}
        {!editingChip && (
          <input
            ref={inputRef}
            type="text"
            placeholder={chips.length === 0 ? placeholder : ''}
            value={inputText}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            onBlur={handleBlur}
            className="flex-1 min-w-[120px] border-0 outline-none h-7 text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
            role="combobox"
            aria-expanded={activeAutoField === field && autocompleteResults.length > 0}
            aria-autocomplete="list"
            aria-controls={activeAutoField === field ? `autocomplete-${field}` : undefined}
            aria-activedescendant={activeAutoField === field && autoSelectedIndex >= 0 ? `autocomplete-option-${autoSelectedIndex}` : undefined}
            aria-invalid={validationError || undefined}
            data-bwignore="true"
            data-1p-ignore
            data-op-ignore
            data-lpignore="true"
            data-form-type="other"
          />
        )}
      </div>
      {validationError && validationMessage && (
        <p className="text-xs text-red-600 dark:text-red-400 mt-0.5">{validationMessage}</p>
      )}
      {activeAutoField === field && autocompleteResults.length > 0 && (
        <AutocompleteDropdown
          ref={dropdownRef}
          id={`autocomplete-${field}`}
          results={autocompleteResults}
          selectedIndex={autoSelectedIndex}
          onSelect={(suggestion) => onInsertAutocomplete(suggestion, field)}
        />
      )}
      <ContextMenu
        isOpen={contextMenu.isOpen}
        position={contextMenu.position}
        onClose={closeContextMenu}
        ref={menuRef}
      >
        {contextMenu.data && (
          <>
            <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground truncate max-w-[200px]">
              {formatChipDisplay(contextMenu.data.recipient)}
            </div>
            <ContextMenuSeparator />
            <ContextMenuItem label={t('recipient_edit_email')} onClick={handleEditEmail} />
            <ContextMenuItem label={t('recipient_edit_name')} onClick={handleEditName} />
            <ContextMenuSeparator />
            <ContextMenuItem label={tCommon('delete')} onClick={() => {
              if (contextMenu.data) {
                handleChipRemove(contextMenu.data.index, { stopPropagation: () => {} } as React.MouseEvent);
              }
              closeContextMenu();
            }} destructive />
          </>
        )}
      </ContextMenu>
    </div>
  );
}
