"use client";

import { ChevronRight, X } from "lucide-react";
import {
  Children,
  cloneElement,
  forwardRef,
  isValidElement,
  useState,
  type HTMLAttributes,
  type MouseEvent,
  type ReactElement,
  type ReactNode,
} from "react";
import { toast } from "sonner";
import { ReferenceIcon } from "@/components/lovart/reference-icon";
import { CanvasToolbarIcon } from "@/components/canvas/CanvasToolbarIcon";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  saveImageToolbarPreferences,
  useImageToolbarPreferences,
  type ImageToolbarPreferences,
} from "@/lib/canvas-image-toolbar-preferences";

type ToolProps = HTMLAttributes<HTMLButtonElement> & {
  "data-tool-key"?: string;
  disabled?: boolean;
  children?: ReactNode;
};
type Tool = ReactElement<ToolProps>;
type Props = HTMLAttributes<HTMLDivElement> & {
  referencePresentation: boolean;
  defaultPinnedKeys: string[];
};

function toolLabel(tool: Tool) {
  return tool.props.title || "";
}
function toolIcon(tool: Tool, size: number) {
  const icon = Children.toArray(tool.props.children).find(isValidElement);
  if (
    !isValidElement<{
      className?: string;
      style?: object;
      referenceSize?: number;
    }>(icon)
  )
    return null;
  return cloneElement(icon, {
    className: "shrink-0",
    style: { width: size, height: size },
    ...(icon.type === CanvasToolbarIcon ? { referenceSize: size } : {}),
  });
}
function toolCredit(tool: Tool) {
  return Children.toArray(tool.props.children).find(
    (child) =>
      isValidElement<{ compact?: boolean; label?: string }>(child) &&
      child.props.compact &&
      child.props.label
  ) as
    | ReactElement<{ compact?: boolean; label?: string; className?: string }>
    | undefined;
}
function tooltipButton(tool: Tool, showNames: boolean) {
  const name = toolLabel(tool);
  // Clone the existing action so its handler, busy state and administrator icon override remain intact.
  const button = cloneElement(tool, {
    title: undefined,
    "aria-label": name,
    children: (
      <>
        {toolIcon(tool, 25)}
        {showNames && <span className="lovart-image-tool-label">{name}</span>}
      </>
    ),
  });
  return (
    <Tooltip key={tool.props["data-tool-key"] || name}>
      <TooltipTrigger asChild>{button}</TooltipTrigger>
      <TooltipContent
        className="lovart-image-tool-tooltip"
        side="top"
        sideOffset={8}
      >
        {name}
        {toolCredit(tool) &&
          cloneElement(toolCredit(tool)!, {
            compact: false,
            className: "lovart-image-tool-cost",
          })}
      </TooltipContent>
    </Tooltip>
  );
}

export const ReferenceImageToolbar = forwardRef<HTMLDivElement, Props>(
  function ReferenceImageToolbar(
    { referencePresentation, defaultPinnedKeys, children, ...rootProps },
    ref
  ) {
    const saved = useImageToolbarPreferences();
    const [draft, setDraft] = useState<ImageToolbarPreferences | null>(null);
    const [draggedKey, setDraggedKey] = useState<string | null>(null);
    const elements = Children.toArray(children).filter(
      isValidElement
    ) as ReactElement<ToolProps>[];
    const tools = elements.filter(
      (element) =>
        element.props["data-tool-key"] &&
        !["addToChat", "download"].includes(element.props["data-tool-key"]!)
    );
    const toolMap = new Map(
      tools.map((tool) => [tool.props["data-tool-key"]!, tool])
    );
    const preferences = saved || {
      pinnedKeys: defaultPinnedKeys,
      showNames: false,
    };
    const pinned = preferences.pinnedKeys.filter((key) => toolMap.has(key));
    const moreTools = tools.filter(
      (tool) => !pinned.includes(tool.props["data-tool-key"]!)
    );
    const addToChat = elements.find(
      (element) => element.props["data-tool-key"] === "addToChat"
    );
    const download = elements.find(
      (element) => element.props["data-tool-key"] === "download"
    );
    const originalMenu = elements.find(
      (element) => element.type === DropdownMenu
    );
    const menuChildren = originalMenu
      ? (Children.toArray(originalMenu.props.children).filter(
          isValidElement
        ) as ReactElement<{ children?: ReactNode }>[])
      : [];
    const menuTrigger = menuChildren.find(
      (element) => element.type === DropdownMenuTrigger
    );
    const moreButton =
      menuTrigger &&
      (Children.toArray(menuTrigger.props.children).find(isValidElement) as
        | Tool
        | undefined);
    const extras = menuChildren.find(
      (element) => element.type === DropdownMenuContent
    )?.props.children;
    const openCustomizer = () =>
      setDraft({
        pinnedKeys: [...preferences.pinnedKeys],
        showNames: preferences.showNames,
      });
    const toggle = (key: string) =>
      setDraft((current) =>
        current
          ? {
              ...current,
              pinnedKeys: current.pinnedKeys.includes(key)
                ? current.pinnedKeys.filter((item) => item !== key)
                : [...current.pinnedKeys, key],
            }
          : current
      );
    const move = (key: string, target: string) =>
      setDraft((current) => {
        if (!current || key === target) return current;
        const next = [...current.pinnedKeys];
        const from = next.indexOf(key),
          to = next.indexOf(target);
        if (from < 0 || to < 0) return current;
        next.splice(from, 1);
        next.splice(to, 0, key);
        return { ...current, pinnedKeys: next };
      });
    if (!referencePresentation)
      return (
        <div {...rootProps} ref={ref}>
          {children}
        </div>
      );
    return (
      <>
        <div
          {...rootProps}
          ref={ref}
          style={{ ...rootProps.style, overflowX: "auto" }}
          data-show-tool-names={preferences.showNames ? "true" : "false"}
        >
          {addToChat && tooltipButton(addToChat, preferences.showNames)}
          {addToChat && <div className="w-px" />}
          {pinned.map((key) =>
            tooltipButton(toolMap.get(key)!, preferences.showNames)
          )}
          <DropdownMenu>
            {moreButton && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <DropdownMenuTrigger asChild>
                    {cloneElement(moreButton, {
                      title: undefined,
                      "aria-label": toolLabel(moreButton),
                      children: toolIcon(moreButton, 25),
                    })}
                  </DropdownMenuTrigger>
                </TooltipTrigger>
                <TooltipContent
                  className="lovart-image-tool-tooltip"
                  sideOffset={8}
                >
                  {toolLabel(moreButton)}
                </TooltipContent>
              </Tooltip>
            )}
            <DropdownMenuContent
              className="lovart-image-action-menu lovart-image-custom-more"
              side="bottom"
              align="end"
            >
              {moreTools.map((tool) => (
                <DropdownMenuItem
                  key={tool.props["data-tool-key"]}
                  disabled={tool.props.disabled}
                  onClick={(event) =>
                    tool.props.onClick?.(
                      event as unknown as MouseEvent<HTMLButtonElement>
                    )
                  }
                >
                  {toolIcon(tool, 18)}
                  <span>{toolLabel(tool)}</span>
                  {toolCredit(tool) &&
                    cloneElement(toolCredit(tool)!, {
                      compact: false,
                      className: "lovart-image-tool-cost",
                    })}
                </DropdownMenuItem>
              ))}
              {extras}
              <DropdownMenuSeparator />
              <DropdownMenuItem
                className="lovart-customize-entry"
                onSelect={openCustomizer}
              >
                自定义工具栏
                <ChevronRight size={14} />
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          {download && (
            <>
              <div className="w-px" />
              {tooltipButton(download, preferences.showNames)}
            </>
          )}
        </div>
        <Dialog
          open={Boolean(draft)}
          onOpenChange={(open) => {
            if (!open) setDraft(null);
          }}
        >
          <DialogContent
            hideCloseButton
            className="lovart-toolbar-customizer"
            overlayClassName="lovart-toolbar-customizer-overlay"
            onPointerDown={(event) => event.stopPropagation()}
            onClick={(event) => event.stopPropagation()}
          >
            <header className="lovart-customizer-header">
              <div>
                <DialogTitle>自定义工具栏</DialogTitle>
                <DialogDescription>
                  选择你想在编辑栏中使用的工具
                </DialogDescription>
              </div>
              <div className="lovart-customizer-header-actions">
                <button
                  type="button"
                  aria-label="恢复默认工具栏"
                  onClick={() =>
                    setDraft({
                      pinnedKeys: [...defaultPinnedKeys],
                      showNames: false,
                    })
                  }
                >
                  <ReferenceIcon name="toolbar-reset" size={16} />
                </button>
                <button
                  type="button"
                  aria-label="关闭自定义工具栏"
                  onClick={() => setDraft(null)}
                >
                  <ReferenceIcon name="toolbar-close" size={16} />
                </button>
              </div>
            </header>
            <div className="lovart-customizer-body">
              <div
                className="lovart-customizer-preview"
                aria-label="工具栏预览"
              >
                <div className="lovart-customizer-preview-bar">
                  {addToChat && (
                    <span className="lovart-preview-fixed">
                      {toolIcon(addToChat, 18)}
                      {draft?.showNames && toolLabel(addToChat)}
                    </span>
                  )}
                  {draft?.pinnedKeys
                    .filter((key) => toolMap.has(key))
                    .map((key, index, keys) => {
                      const tool = toolMap.get(key)!;
                      return (
                        <div
                          className="lovart-preview-chip"
                          key={key}
                          draggable
                          onDragStart={(event) => {
                            setDraggedKey(key);
                            event.dataTransfer.setData("text/plain", key);
                            event.dataTransfer.effectAllowed = "move";
                          }}
                          onDragEnd={() => setDraggedKey(null)}
                          onDragOver={(event) => event.preventDefault()}
                          onDrop={(event) => {
                            event.preventDefault();
                            if (draggedKey) move(draggedKey, key);
                            setDraggedKey(null);
                          }}
                        >
                          <button
                            type="button"
                            className="lovart-preview-handle"
                            aria-label={`${toolLabel(tool)}，按左右方向键调整顺序`}
                            onKeyDown={(event) => {
                              const offset =
                                event.key === "ArrowLeft"
                                  ? -1
                                  : event.key === "ArrowRight"
                                    ? 1
                                    : 0;
                              if (offset && keys[index + offset]) {
                                event.preventDefault();
                                move(key, keys[index + offset]);
                              }
                            }}
                          >
                            {toolIcon(tool, 18)}
                            {draft.showNames && <span>{toolLabel(tool)}</span>}
                          </button>
                          <button
                            type="button"
                            aria-label={`移除${toolLabel(tool)}`}
                            onClick={() => toggle(key)}
                          >
                            <X size={12} />
                          </button>
                        </div>
                      );
                    })}
                </div>
              </div>
              <div className="lovart-customizer-tools">
                {tools.map((tool) => {
                  const key = tool.props["data-tool-key"]!;
                  const isPinned = Boolean(draft?.pinnedKeys.includes(key));
                  return (
                    <button
                      key={key}
                      type="button"
                      aria-label={`${isPinned ? "取消固定" : "固定"}${toolLabel(tool)}`}
                      aria-pressed={isPinned}
                      onClick={() => toggle(key)}
                    >
                      {toolIcon(tool, 18)}
                      <span>{toolLabel(tool)}</span>
                      <ReferenceIcon
                        name={
                          isPinned
                            ? "toolbar-pin-filled"
                            : "toolbar-pin-outline"
                        }
                        size={13}
                      />
                    </button>
                  );
                })}
              </div>
            </div>
            <footer className="lovart-customizer-footer">
              <label>
                <button
                  type="button"
                  role="switch"
                  aria-label="显示工具名称"
                  aria-checked={Boolean(draft?.showNames)}
                  className="lovart-customizer-switch"
                  onClick={() =>
                    setDraft((current) =>
                      current
                        ? { ...current, showNames: !current.showNames }
                        : current
                    )
                  }
                >
                  <span />
                </button>
                显示工具名称
              </label>
              <div>
                <button type="button" onClick={() => setDraft(null)}>
                  取消
                </button>
                <button
                  type="button"
                  className="lovart-customizer-save"
                  onClick={() => {
                    if (draft && saveImageToolbarPreferences(draft))
                      setDraft(null);
                    else
                      toast.error("无法保存工具栏设置，请检查浏览器存储权限");
                  }}
                >
                  保存
                </button>
              </div>
            </footer>
          </DialogContent>
        </Dialog>
      </>
    );
  }
);