import { type Component, createSignal, createEffect, For } from "solid-js";
import {
    Bold,
    Italic,
    Underline,
    Highlighter,
    AlignLeft,
    AlignCenter,
    AlignRight,
    Heading1,
    Heading2,
    Heading3,
    Eraser,
    ListTodo,
    Grid3X3
} from "lucide-solid";
import { cn } from "@/lib/utils";
import type { Editor } from "@tiptap/core";

interface GenericAction {
    label: string;
    icon: Component;
    isActive?: () => boolean;
    command: () => void;
    iconClass?: string;
}

interface FormatGroup {
    name: string;
    actions: GenericAction[];
}

export const TextBubbleMenu: Component<{ editor: Editor }> = (props) => {
    // Track state of active styles so we can highlight the buttons
    const [activeFormats, setActiveFormats] = createSignal<Record<string, boolean>>({});

    createEffect(() => {
        const updateState = () => {
            const editor = props.editor;
            if (!editor) return;

            setActiveFormats({
                bold: editor.isActive('bold'),
                italic: editor.isActive('italic'),
                underline: editor.isActive('underline'),
                highlight: editor.isActive('highlight'),
                alignLeft: editor.isActive({ textAlign: 'left' }),
                alignCenter: editor.isActive({ textAlign: 'center' }),
                alignRight: editor.isActive({ textAlign: 'right' }),
                h1: editor.isActive('heading', { level: 1 }),
                h2: editor.isActive('heading', { level: 2 }),
                h3: editor.isActive('heading', { level: 3 }),
                checklist: editor.isActive('taskList'),
                table: editor.isActive('table'),
            });
        };

        props.editor.on("selectionUpdate", updateState);
        props.editor.on("transaction", updateState);

        return () => {
            props.editor.off("selectionUpdate", updateState);
            props.editor.off("transaction", updateState);
        };
    });

    const groups: FormatGroup[] = [
        {
            name: "Style",
            actions: [
                { label: "Bold", icon: () => <Bold size={16} />, isActive: () => activeFormats().bold, command: () => props.editor.chain().focus().toggleBold().run() },
                { label: "Italic", icon: () => <Italic size={16} />, isActive: () => activeFormats().italic, command: () => props.editor.chain().focus().toggleItalic().run() },
                { label: "Underline", icon: () => <Underline size={16} />, isActive: () => activeFormats().underline, command: () => props.editor.chain().focus().toggleUnderline().run() },
                { label: "Highlight", icon: () => <Highlighter size={16} />, isActive: () => activeFormats().highlight, command: () => props.editor.chain().focus().toggleHighlight().run() },
            ]
        },
        {
            name: "Headings",
            actions: [
                { label: "Heading 1", icon: () => <Heading1 size={16} />, isActive: () => activeFormats().h1, command: () => props.editor.chain().focus().toggleHeading({ level: 1 }).run() },
                { label: "Heading 2", icon: () => <Heading2 size={16} />, isActive: () => activeFormats().h2, command: () => props.editor.chain().focus().toggleHeading({ level: 2 }).run() },
                { label: "Heading 3", icon: () => <Heading3 size={16} />, isActive: () => activeFormats().h3, command: () => props.editor.chain().focus().toggleHeading({ level: 3 }).run() },
            ]
        },
        {
            name: "Alignment",
            actions: [
                { label: "Align Left", icon: () => <AlignLeft size={16} />, isActive: () => activeFormats().alignLeft, command: () => props.editor.chain().focus().setTextAlign('left').run() },
                { label: "Align Center", icon: () => <AlignCenter size={16} />, isActive: () => activeFormats().alignCenter, command: () => props.editor.chain().focus().setTextAlign('center').run() },
                { label: "Align Right", icon: () => <AlignRight size={16} />, isActive: () => activeFormats().alignRight, command: () => props.editor.chain().focus().setTextAlign('right').run() },
            ]
        },
        {
            name: "Blocks",
            actions: [
                { label: "Checklist", icon: () => <ListTodo size={16} />, isActive: () => activeFormats().checklist, command: () => props.editor.chain().focus().toggleTaskList().run() },
                { label: "Table", icon: () => <Grid3X3 size={16} />, isActive: () => activeFormats().table, command: () => props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() },
            ]
        },
        {
            name: "Clear",
            actions: [
                { label: "Clear Formatting", icon: () => <Eraser size={16} />, command: () => props.editor.chain().focus().clearNodes().unsetAllMarks().run() },
            ]
        }
    ];

    return (
        <div
            class={cn(
                "relative z-[140] w-full bg-background/80 backdrop-blur-md border-b border-border transition-all duration-300 ease-in-out overflow-hidden flex flex-col h-9 opacity-100"
            )}
            onMouseDown={(e) => {
                e.preventDefault();
                e.stopPropagation();
            }}
        >
            <div class="flex items-center justify-center h-full px-2 max-w-4xl mx-auto w-full">
                <div class="flex items-center gap-1">
                    <For each={groups}>
                        {(group, groupIdx) => (
                            <>
                                <div class="flex items-center gap-0 px-0.5">
                                    <For each={group.actions}>
                                        {(action) => (
                                            <button
                                                type="button"
                                                onClick={(e) => {
                                                    e.preventDefault();
                                                    e.stopPropagation();
                                                    action.command();
                                                }}
                                                class={cn(
                                                    "p-1.5 rounded-md transition-colors group relative shrink-0",
                                                    action.isActive?.() 
                                                        ? "bg-primary/20 text-primary" 
                                                        : "text-muted-foreground hover:bg-muted hover:text-foreground",
                                                    action.iconClass
                                                )}
                                            >
                                                <action.icon />
                                                <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-2 py-1 text-[10px] font-bold bg-foreground text-background rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-[200] shadow-lg">
                                                    {action.label}
                                                </span>
                                            </button>
                                        )}
                                    </For>
                                </div>
                                {groupIdx() < groups.length - 1 && (
                                    <div class="w-[1px] h-4 bg-border/50 mx-1" />
                                )}
                            </>
                        )}
                    </For>
                </div>
            </div>
        </div>
    );
};