import type { Editor, Range } from "@tiptap/react";
import {
  Heading1,
  Heading2,
  Heading3,
  List,
  ListOrdered,
  ListChecks,
  Table as TableIcon,
  Quote,
  Code,
  Minus,
  Pilcrow,
  BarChart3,
  FileText,
  BellRing,
  ImagePlus,
  Sticker as StickerIcon,
  type LucideIcon,
} from "lucide-react";
import { STICKERS } from "@/lib/notes/note-stickers";

export interface SlashCommandItem {
  title: string;
  description: string;
  icon: LucideIcon;
  keywords: string[];
  command: (props: { editor: Editor; range: Range }) => void;
}

export const SLASH_COMMANDS: SlashCommandItem[] = [
  {
    title: "Text",
    description: "Normaler Textabsatz",
    icon: Pilcrow,
    keywords: ["text", "paragraph", "absatz"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setParagraph().run();
    },
  },
  {
    title: "Heading 1",
    description: "Große Überschrift",
    icon: Heading1,
    keywords: ["h1", "heading", "titel", "überschrift"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
    },
  },
  {
    title: "Heading 2",
    description: "Mittlere Überschrift",
    icon: Heading2,
    keywords: ["h2", "heading", "titel", "überschrift"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
    },
  },
  {
    title: "Heading 3",
    description: "Kleine Überschrift",
    icon: Heading3,
    keywords: ["h3", "heading", "titel", "überschrift"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
    },
  },
  {
    title: "Bullet list",
    description: "Einfache Aufzählung",
    icon: List,
    keywords: ["bullet", "liste", "aufzählung", "ul"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).toggleBulletList().run();
    },
  },
  {
    title: "Numbered list",
    description: "Nummerierte Liste",
    icon: ListOrdered,
    keywords: ["numbered", "ordered", "liste", "nummeriert", "ol"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).toggleOrderedList().run();
    },
  },
  {
    title: "Checklist",
    description: "To-do-Liste mit Checkboxen",
    icon: ListChecks,
    keywords: ["todo", "checklist", "checkbox", "aufgabe", "task"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).toggleTaskList().run();
    },
  },
  {
    title: "Table",
    description: "Tabelle mit Zeilen und Spalten",
    icon: TableIcon,
    keywords: ["table", "tabelle", "excel", "grid"],
    command: ({ editor, range }) => {
      editor
        .chain()
        .focus()
        .deleteRange(range)
        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
        .run();
    },
  },
  {
    title: "Quote",
    description: "Zitat-Block",
    icon: Quote,
    keywords: ["quote", "zitat", "blockquote"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setBlockquote().run();
    },
  },
  {
    title: "Code block",
    description: "Formatierter Code-Block",
    icon: Code,
    keywords: ["code", "codeblock", "snippet"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setCodeBlock().run();
    },
  },
  {
    title: "Divider",
    description: "Horizontale Trennlinie",
    icon: Minus,
    keywords: ["divider", "trenner", "linie", "hr"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setHorizontalRule().run();
    },
  },
  {
    title: "Image",
    description: "Bild hochladen und einbetten",
    icon: ImagePlus,
    keywords: ["image", "bild", "foto", "picture", "upload"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).insertContent({ type: "noteImage" }).run();
    },
  },
  {
    title: "Chart",
    description: "Balken-, Linien- oder Kreisdiagramm mit eigenen Daten",
    icon: BarChart3,
    keywords: ["chart", "diagramm", "graph", "statistik"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).insertContent({ type: "chartBlock" }).run();
    },
  },
  {
    title: "Sub-page",
    description: "Neue verknüpfte Notiz, die in dieser Notiz eingebettet wird",
    icon: FileText,
    keywords: ["subpage", "unterseite", "notiz", "note", "verlinkung", "page"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).insertContent({ type: "noteLink" }).run();
    },
  },
  {
    title: "Reminder",
    description: "Erinnerung setzen, verknüpft mit den Mindavio Remindern",
    icon: BellRing,
    keywords: ["reminder", "erinnerung", "termin", "notification"],
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).insertContent({ type: "reminderBlock" }).run();
    },
  },
  {
    title: "Sticker",
    description: "Verschiebbaren, skalierbaren Sticker zur Notiz hinzufügen",
    icon: StickerIcon,
    keywords: ["sticker", "aufkleber", "emoji", "decoration", "deko"],
    command: ({ editor, range }) => {
      // Only pick from free stickers here — this shortcut skips the picker
      // (and its purchase flow), so it must never hand out a paid one.
      const freeStickers = STICKERS.filter((s) => s.price === 0);
      const sticker = freeStickers[Math.floor(Math.random() * freeStickers.length)];
      editor
        .chain()
        .focus()
        .deleteRange(range)
        .insertContent({ type: "stickerBlock", attrs: { stickerId: sticker.id } })
        .run();
    },
  },
];

export function filterSlashCommands(query: string): SlashCommandItem[] {
  if (!query) return SLASH_COMMANDS;
  const q = query.toLowerCase();
  return SLASH_COMMANDS.filter(
    (item) =>
      item.title.toLowerCase().includes(q) ||
      item.keywords.some((keyword) => keyword.includes(q)),
  );
}