"use client";

/**
 * TASK-0123 — the shared "AI writing actions" menu list (the four tools +
 * the translate language picker). Reused by every entry point so the labels,
 * order and testids are identical:
 *   - the selection toolbar's "AI" dropdown (multi-block selection);
 *   - the block context menu's "Writing tools" submenu (single block);
 *   - the block hover toolbar (⋯) "Writing tools" submenu (single block).
 *
 * `onPick(action, language?)` fires when a non-translate action is chosen, or
 * when a language (or "Other…") is picked under Translate. The parent owns
 * opening the `WritingDialog`; this component is a pure menu list.
 *
 * Pinned testids (do not rename): `writing-action-*`, `writing-language-*`,
 * `writing-language-other`.
 */
import { useState } from "react";
import { Check, Languages, ListChecks, Sparkles, Wand2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { WRITING_LANGUAGES, type WritingAction } from "@/lib/ai";

const ACTIONS: { action: WritingAction; label: string; icon: typeof Sparkles }[] = [
  { action: "summarize", label: "Summarize", icon: ListChecks },
  { action: "rewrite", label: "Rewrite", icon: Wand2 },
  { action: "improve", label: "Improve writing", icon: Sparkles },
  { action: "translate", label: "Translate…", icon: Languages }
];

export interface WritingActionsListProps {
  onPick: (action: WritingAction, language?: string) => void;
}

export function WritingActionsList({ onPick }: WritingActionsListProps) {
  const [langOpen, setLangOpen] = useState(false);
  const [otherOpen, setOtherOpen] = useState(false);
  const [otherDraft, setOtherDraft] = useState("");

  const pick = (action: WritingAction, language?: string) => {
    setLangOpen(false);
    setOtherOpen(false);
    setOtherDraft("");
    onPick(action, language);
  };

  return (
    <>
      {ACTIONS.map(({ action, label, icon: Icon }) => {
        const isTranslate = action === "translate";
        return (
          <div key={action} className="relative">
            <button
              type="button"
              role="menuitem"
              data-testid={`writing-action-${action}`}
              onClick={() => {
                if (isTranslate) setLangOpen((v) => !v);
                else pick(action);
              }}
              className={cn(
                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent",
                isTranslate && langOpen && "bg-accent"
              )}
              aria-haspopup={isTranslate ? "menu" : undefined}
              aria-expanded={isTranslate ? langOpen : undefined}
            >
              <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
              {label}
            </button>

            {isTranslate && langOpen ? (
              <div
                className="absolute left-full top-0 z-50 ml-1 w-44 rounded-md border border-border bg-popover p-1 shadow-lg"
                role="menu"
                aria-label="Translate to"
              >
                <p className="px-2 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">Translate to</p>
                {WRITING_LANGUAGES.map((l) => (
                  <button
                    key={l.id}
                    type="button"
                    role="menuitem"
                    data-testid={`writing-language-${l.id}`}
                    onClick={() => pick("translate", l.id)}
                    className="flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm hover:bg-accent"
                  >
                    <span className="size-3.5 rounded-full border border-border" aria-hidden />
                    {l.label}
                  </button>
                ))}
                {otherOpen ? (
                  <input
                    autoFocus
                    data-testid="writing-language-other"
                    value={otherDraft}
                    onChange={(e) => setOtherDraft(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === "Enter" && otherDraft.trim()) pick("translate", otherDraft.trim().slice(0, 64));
                    }}
                    placeholder="Other language…"
                    aria-label="Other language"
                    maxLength={64}
                    className="mx-1 my-1 block w-full rounded-md border border-primary bg-background px-2 py-1 text-xs outline-none"
                  />
                ) : (
                  <button
                    type="button"
                    role="menuitem"
                    data-testid="writing-language-other"
                    onClick={() => setOtherOpen(true)}
                    className="flex w-full items-center gap-2 rounded px-2 py-1 text-left text-sm hover:bg-accent"
                  >
                    <Check className="size-4 shrink-0 text-muted-foreground" aria-hidden />
                    Other…
                  </button>
                )}
              </div>
            ) : null}
          </div>
        );
      })}
    </>
  );
}