"use client";

/**
 * Floating hover toolbar rendered in the row's left gutter: grip drag
 * handle (dnd-kit listeners passed in from the sortable row), a "type"
 * button (opens the TypeMenu turn-into grid) and a "more" menu (delete,
 * duplicate — actions are dispatched via the editor store / direct API).
 */
import { useState } from "react";
import { MoreHorizontal, Type as TypeIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import { useEditorStore } from "@/stores/editor-store";
import { toast, useUiStore } from "@/stores/ui-store";
import { blockApi } from "@/lib/api";
import { useUpdateBlock } from "@/hooks/use-blocks";
import { AskAiSubmenu } from "@/components/ai/ask-ai-submenu";
import { TypeMenu } from "./type-menu";
import type { WritingAction } from "@/lib/ai";
import type { Block, BlockType } from "@/lib/types";

interface BlockToolbarProps {
  block: Block;
  /** dnd-kit useSortable attributes + listeners for the grip handle. */
  gripProps?: {
    attributes?: Record<string, unknown>;
    listeners?: Record<string, unknown>;
  };
  /** TASK-0123 — a writing action from the "Ask AI" submenu (the parent
   *  opens the WritingDialog for this single block). */
  onWritingAction?: (action: WritingAction, blockIds: string[], language?: string) => void;
}

export function BlockToolbar({ block, gripProps, onWritingAction }: BlockToolbarProps) {
  const [typeOpen, setTypeOpen] = useState(false);
  const [moreOpen, setMoreOpen] = useState(false);
  const setAiPanel = useUiStore((s) => s.setAiPanel);

  const { updateBlock } = useUpdateBlock(block.pageId);

  const turnInto = async (type: BlockType) => {
    setTypeOpen(false);
    if (type === block.type) return;
    try {
      // useUpdateBlock INVALIDATES the page's block query on success — the
      // row re-renders with the new type immediately (the old fire-and-forget
      // `blockApi.update` never invalidated, so "Turn into" appeared dead).
      // The API preserves content and clears type-specific properties on a
      // type change.
      await updateBlock(block.id, { type }, true);
    } catch (e) {
      toast("error", "Turn into failed", e instanceof Error ? e.message : undefined);
    }
  };

  const duplicate = async () => {
    setMoreOpen(false);
    try {
      const dup = await blockApi.duplicate(block.id, { afterBlockId: block.id });
      useEditorStore.getState().setSelection(dup.id);
    } catch (e) {
      toast("error", "Duplicate failed", e instanceof Error ? e.message : undefined);
    }
  };

  const remove = () => {
    setMoreOpen(false);
    void blockApi.remove(block.id);
    useEditorStore.getState().setSelection(null);
  };

  return (
    <div className="flex items-center rounded-md border border-border bg-background shadow-sm">
      {gripProps ? (
        <button
          type="button"
          className="cursor-grab rounded-l-md px-1.5 py-1 text-muted-foreground hover:bg-accent hover:text-foreground active:cursor-grabbing"
          aria-label="Drag to move block"
          data-testid="drag-handle"
          {...gripProps.attributes}
          {...gripProps.listeners}
        >
          <svg width="10" height="14" viewBox="0 0 10 14" aria-hidden>
            <g fill="currentColor">
              <circle cx="2.5" cy="2.5" r="1.1" />
              <circle cx="7.5" cy="2.5" r="1.1" />
              <circle cx="2.5" cy="7" r="1.1" />
              <circle cx="7.5" cy="7" r="1.1" />
              <circle cx="2.5" cy="11.5" r="1.1" />
              <circle cx="7.5" cy="11.5" r="1.1" />
            </g>
          </svg>
        </button>
      ) : null}

      <div className="relative">
        <button
          type="button"
          onClick={() => setTypeOpen((v) => !v)}
          className={cn("px-2 py-1 text-xs font-medium hover:bg-accent", typeOpen && "bg-accent")}
          aria-haspopup="menu"
          aria-expanded={typeOpen}
          aria-label="Turn into"
        >
          <span className="inline-flex items-center gap-1">
            <TypeIcon className="size-3.5" aria-hidden />
            {block.type}
          </span>
        </button>
        {typeOpen ? <TypeMenu blockType={block.type} onPick={turnInto} onOpenChange={setTypeOpen} /> : null}
      </div>

      <div className="relative">
        <button
          type="button"
          onClick={() => setMoreOpen((v) => !v)}
          className={cn("rounded-r-md px-1.5 py-1 text-muted-foreground hover:bg-accent hover:text-foreground", moreOpen && "bg-accent")}
          aria-haspopup="menu"
          aria-expanded={moreOpen}
          aria-label="More block actions"
        >
          <MoreHorizontal className="size-3.5" aria-hidden />
        </button>
        {moreOpen ? (
          <div className="absolute left-0 top-7 z-50 w-56 rounded-md border border-border bg-popover p-1 shadow-lg" role="menu">
            <AskAiSubmenu
              block={block}
              onChat={() => {
                setMoreOpen(false);
                setAiPanel(true, { pageId: block.pageId, blockId: block.id });
              }}
              onWritingAction={(action, blockIds, language) => {
                setMoreOpen(false);
                onWritingAction?.(action, blockIds, language);
              }}
            />
            <div className="my-1 h-px bg-border" aria-hidden />
            {/* "Turn into" is also reachable from the ⋮ menu (QA issue #4:
                the three-dots menu should offer converting the block). It
                opens the same TypeMenu the "Aa" button does. */}
            <button
              type="button"
              role="menuitem"
              onClick={() => {
                setMoreOpen(false);
                setTypeOpen(true);
              }}
              className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
            >
              Turn into…
            </button>
            <button
              type="button"
              role="menuitem"
              onClick={() => void duplicate()}
              className="block w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
            >
              Duplicate
            </button>
            <button
              type="button"
              role="menuitem"
              onClick={remove}
              className="block w-full rounded px-2 py-1.5 text-left text-sm text-red-600 hover:bg-accent"
            >
              Delete
            </button>
          </div>
        ) : null}
      </div>
    </div>
  );
}