"use client";

/**
 * TASK-0123 — the shared "Ask AI" submenu content, used by BOTH single-block
 * entry points (the right-click context menu and the block hover toolbar's
 * "⋯" menu). It keeps the two places in lockstep (labels, order, testids):
 *
 *   - Chat with AI     → the TASK-0122 AI panel (testid `block-ask-ai` — the
 *                        pinned chat entry; preserved, not removed).
 *   - Writing tools    → the four actions (Summarize / Rewrite / Improve
 *                        writing / Translate → language picker) via the shared
 *                        `WritingActionsList`; the parent opens the
 *                        `WritingDialog` for the single block.
 *
 * The parent renders this inside its own positioned container and owns the
 * open state; this component is pure menu content.
 */
import { Sparkles } from "lucide-react";
import { WritingActionsList } from "./writing-actions-menu";
import type { WritingAction } from "@/lib/ai";
import type { Block } from "@/lib/types";

export interface AskAiSubmenuProps {
  block: Block;
  /** Open the TASK-0122 AI chat panel for this block (the original behavior). */
  onChat: () => void;
  /** Pick a writing action for this single block (the parent opens the dialog).
   *  Omitted → only "Chat with AI" is shown (back-compat for callers that
   *  have no writing-dialog wiring). */
  onWritingAction?: (action: WritingAction, blockIds: string[], language?: string) => void;
}

export function AskAiSubmenu({ block, onChat, onWritingAction }: AskAiSubmenuProps) {
  return (
    <>
      <button
        type="button"
        role="menuitem"
        data-testid="block-ask-ai"
        onClick={onChat}
        className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
      >
        <span className="inline-flex items-center gap-1.5">
          <Sparkles className="size-4 shrink-0 text-muted-foreground" aria-hidden />
          Chat with AI
        </span>
      </button>

      {onWritingAction ? (
        <>
          <div className="my-1 h-px bg-border" aria-hidden />
          <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">Writing tools</p>
          <WritingActionsList onPick={(action, language) => onWritingAction(action, [block.id], language)} />
        </>
      ) : null}
    </>
  );
}