SRCmail/components/email/email-context-menu.tsx

"use client";

import { useTranslations } from "next-intl";
import { Email, Mailbox } from "@/lib/jmap/types";
import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuSubMenu,
  ContextMenuHeader,
} from "@/components/ui/context-menu";
import {
  Reply,
  ReplyAll,
  Forward,
  Mail,
  MailOpen,
  Star,
  Trash2,
  Archive,
  FolderInput,
  Tag,
  X,
  Check,
  Inbox,
  Send,
  File,
  Folder,
  ShieldAlert,
  ShieldCheck,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useSettingsStore, KEYWORD_PALETTE } from "@/stores/settings-store";

interface Position {
  x: number;
  y: number;
}

interface EmailContextMenuProps {
  email: Email;
  position: Position;
  isOpen: boolean;
  onClose: () => void;
  menuRef: React.RefObject<HTMLDivElement | null>;
  mailboxes: Mailbox[];
  selectedMailbox: string;
  currentMailboxRole?: string;
  isMultiSelect?: boolean;
  selectedCount?: number;
  // Single email actions
  onReply?: () => void;
  onReplyAll?: () => void;
  onForward?: () => void;
  onMarkAsRead?: (read: boolean) => void;
  onToggleStar?: () => void;
  onDelete?: () => void;
  onArchive?: () => void;
  onSetColorTag?: (color: string | null) => void;
  onMoveToMailbox?: (mailboxId: string) => void;
  onMarkAsSpam?: () => void;
  onUndoSpam?: () => void;
  // Batch actions
  onBatchMarkAsRead?: (read: boolean) => void;
  onBatchDelete?: () => void;
  onBatchMoveToMailbox?: (mailboxId: string) => void;
  onBatchMarkAsSpam?: () => void;
  onBatchUndoSpam?: () => void;
}

// Get mailbox icon based on role
const getMailboxIcon = (role?: string) => {
  switch (role) {
    case "inbox":
      return Inbox;
    case "sent":
      return Send;
    case "drafts":
      return File;
    case "trash":
      return Trash2;
    case "archive":
      return Archive;
    default:
      return Folder;
  }
};

// Get current label/color from email keywords (supports both $label: and legacy $color:)
const getCurrentColor = (keywords: Record<string, boolean> | undefined) => {
  if (!keywords) return null;
  for (const key of Object.keys(keywords)) {
    if ((key.startsWith("$label:") || key.startsWith("$color:")) && keywords[key] === true) {
      return key.startsWith("$label:")
        ? key.slice("$label:".length)
        : key.slice("$color:".length);
    }
  }
  return null;
};

export function EmailContextMenu({
  email,
  position,
  isOpen,
  onClose,
  menuRef,
  mailboxes,
  selectedMailbox,
  currentMailboxRole,
  isMultiSelect = false,
  selectedCount = 1,
  onReply,
  onReplyAll,
  onForward,
  onMarkAsRead,
  onToggleStar,
  onDelete,
  onArchive,
  onSetColorTag,
  onMoveToMailbox,
  onMarkAsSpam,
  onUndoSpam,
  onBatchMarkAsRead,
  onBatchDelete,
  onBatchMoveToMailbox,
  onBatchMarkAsSpam,
  onBatchUndoSpam,
}: EmailContextMenuProps) {
  const t = useTranslations("context_menu");
  const tColor = useTranslations("email_viewer.color_tag");
  const emailKeywords = useSettingsStore((state) => state.emailKeywords);
  const isUnread = !email.keywords?.$seen;
  const isStarred = email.keywords?.$flagged;
  const currentColor = getCurrentColor(email.keywords);
  const showBatchActions = isMultiSelect && selectedCount > 1;
  const isInJunkFolder = currentMailboxRole === 'junk';

  // Build color options from keyword definitions in settings
  const colorOptions = emailKeywords.map((kw) => ({
    name: kw.label,
    value: kw.id,
    color: KEYWORD_PALETTE[kw.color]?.dot || "bg-gray-500",
  }));

  // Filter mailboxes for move-to submenu (exclude current, drafts, virtual nodes)
  const moveTargets = mailboxes.filter(
    (m) =>
      m.id !== selectedMailbox &&
      m.role !== "drafts" &&
      !m.id.startsWith("shared-") &&
      m.myRights?.mayAddItems
  );

  const handleAction = (action: () => void) => {
    action();
    onClose();
  };

  return (
    <ContextMenu
      ref={menuRef}
      isOpen={isOpen}
      position={position}
      onClose={onClose}
    >
      {/* Batch header */}
      {showBatchActions && (
        <ContextMenuHeader>
          {t("items_selected", { count: selectedCount })}
        </ContextMenuHeader>
      )}

      {/* Single email actions - Reply, Reply All, Forward */}
      {!showBatchActions && (
        <>
          <ContextMenuItem
            icon={Reply}
            label={t("reply")}
            onClick={() => handleAction(onReply!)}
            disabled={!onReply}
          />
          <ContextMenuItem
            icon={ReplyAll}
            label={t("reply_all")}
            onClick={() => handleAction(onReplyAll!)}
            disabled={!onReplyAll}
          />
          <ContextMenuItem
            icon={Forward}
            label={t("forward")}
            onClick={() => handleAction(onForward!)}
            disabled={!onForward}
          />
          <ContextMenuSeparator />
        </>
      )}

      {/* Mark as read/unread */}
      <ContextMenuItem
        icon={isUnread ? MailOpen : Mail}
        label={isUnread ? t("mark_read") : t("mark_unread")}
        onClick={() =>
          handleAction(() =>
            showBatchActions
              ? onBatchMarkAsRead?.(isUnread)
              : onMarkAsRead?.(isUnread)
          )
        }
      />

      {/* Star/Unstar - only for single email */}
      {!showBatchActions && (
        <ContextMenuItem
          icon={Star}
          label={isStarred ? t("unstar") : t("star")}
          onClick={() => handleAction(onToggleStar!)}
          disabled={!onToggleStar}
        />
      )}

      <ContextMenuSeparator />

      {/* Move to submenu */}
      {moveTargets.length > 0 && (
        <ContextMenuSubMenu icon={FolderInput} label={t("move_to")}>
          {moveTargets.map((mailbox) => {
            const Icon = getMailboxIcon(mailbox.role);
            return (
              <ContextMenuItem
                key={mailbox.id}
                icon={Icon}
                label={mailbox.name}
                onClick={() =>
                  handleAction(() =>
                    showBatchActions
                      ? onBatchMoveToMailbox?.(mailbox.id)
                      : onMoveToMailbox?.(mailbox.id)
                  )
                }
              />
            );
          })}
        </ContextMenuSubMenu>
      )}

      {/* Archive */}
      <ContextMenuItem
        icon={Archive}
        label={t("archive")}
        onClick={() => handleAction(onArchive!)}
        disabled={!onArchive}
      />

      <ContextMenuSeparator />

      {/* Spam - contextual based on folder */}
      <ContextMenuItem
        icon={isInJunkFolder ? ShieldCheck : ShieldAlert}
        label={isInJunkFolder ? t("not_spam") : t("mark_as_spam")}
        onClick={() =>
          handleAction(
            showBatchActions
              ? (isInJunkFolder ? onBatchUndoSpam! : onBatchMarkAsSpam!)
              : (isInJunkFolder ? onUndoSpam! : onMarkAsSpam!)
          )
        }
        disabled={showBatchActions ? (isInJunkFolder ? !onBatchUndoSpam : !onBatchMarkAsSpam) : (isInJunkFolder ? !onUndoSpam : !onMarkAsSpam)}
        destructive={!isInJunkFolder}
      />

      <ContextMenuSeparator />

      {/* Set tag submenu - only for single email */}
      {!showBatchActions && (
        <ContextMenuSubMenu icon={Tag} label={t("color_tag")}>
          {colorOptions.map((option) => (
            <button
              key={option.value}
              role="menuitem"
              onClick={() => handleAction(() => onSetColorTag?.(option.value))}
              className={cn(
                "w-full px-3 py-1.5 text-sm text-left flex items-center gap-2 hover:bg-muted cursor-pointer",
                currentColor === option.value && "bg-accent font-medium"
              )}
            >
              <span className={cn("w-3 h-3 rounded-full flex-shrink-0", option.color)} />
              <span className="flex-1">{option.name}</span>
              {currentColor === option.value && (
                <Check className="w-3.5 h-3.5 flex-shrink-0 text-foreground" />
              )}
            </button>
          ))}
          {currentColor && (
            <>
              <ContextMenuSeparator />
              <ContextMenuItem
                icon={X}
                label={t("remove_color")}
                onClick={() => handleAction(() => onSetColorTag?.(null))}
              />
            </>
          )}
        </ContextMenuSubMenu>
      )}

      <ContextMenuSeparator />

      {/* Delete */}
      <ContextMenuItem
        icon={Trash2}
        label={t("delete")}
        onClick={() =>
          handleAction(showBatchActions ? onBatchDelete! : onDelete!)
        }
        disabled={showBatchActions ? !onBatchDelete : !onDelete}
        destructive
      />
    </ContextMenu>
  );
}