"use client";

import { useEditor, EditorContent, ReactNodeViewRenderer } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { useEffect, useState, useRef } from "react";
import { AIAssist } from "./ai-assist";
import { Sparkles } from "lucide-react";
import { Toolbar } from "./editor/toolbar";
import { SlashCommand, getSuggestionItems, renderSuggestionItems } from "./editor/slash-command";
import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
import { lowlight } from 'lowlight';
import { CodeBlockComponent } from "./editor/code-block";
import Link from "@tiptap/extension-link";

import Underline from "@tiptap/extension-underline";
import Subscript from "@tiptap/extension-subscript";
import Superscript from "@tiptap/extension-superscript";
import Highlight from "@tiptap/extension-highlight";
import TaskList from "@tiptap/extension-task-list";
import TaskItem from "@tiptap/extension-task-item";
import { Callout } from "./editor/extensions/callout";
import { AIMark } from "./editor/extensions/ai-mark";
import { TaskItemComponent } from "./editor/extensions/task-item";
import { useSettingsStore } from "@/lib/settings-store";
import { Table } from "@tiptap/extension-table";
import TableRow from "@tiptap/extension-table-row";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import Image from "@tiptap/extension-image";
import Youtube from "@tiptap/extension-youtube";
import TextAlign from "@tiptap/extension-text-align";
import Gapcursor from "@tiptap/extension-gapcursor";
import { Markdown } from 'tiptap-markdown';

interface EditorProps {
    content: string;
    onChange: (content: string) => void;
    onEditorReady?: (editor: any) => void;
    onToggleAI?: () => void;
    onExport?: () => void;
    editable?: boolean;
}

export function Editor({ content, onChange, onEditorReady, onToggleAI, onExport, editable = true }: EditorProps) {
    const [showAI, setShowAI] = useState(false);
    const [isGenerating, setIsGenerating] = useState(false);
    const abortControllerRef = useRef<AbortController | null>(null);
    const { fontFamily, fontSize } = useSettingsStore();

    const editor = useEditor({
        extensions: [
            Gapcursor,
            StarterKit.configure({
                heading: {
                    levels: [1, 2, 3],
                },
                codeBlock: false,
                bulletList: {
                    keepMarks: true,
                    keepAttributes: false,
                },
                orderedList: {
                    keepMarks: true,
                    keepAttributes: false,
                },
            }),
            SlashCommand.configure({
                suggestion: {
                    items: getSuggestionItems,
                    render: renderSuggestionItems,
                },
            }),
            CodeBlockLowlight
                .extend({
                    addNodeView() {
                        return ReactNodeViewRenderer(CodeBlockComponent)
                    }
                })
                .configure({ lowlight, defaultLanguage: 'plaintext' }),
            Link.configure({
                openOnClick: false,
                HTMLAttributes: {
                    class: 'cursor-pointer text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 transition-colors',
                },
            }),
            Underline,
            Subscript,
            Superscript,
            Highlight.configure({
                multicolor: true,
            }),
            TaskList,
            TaskItem.configure({
                nested: true,
            }).extend({
                addNodeView() {
                    return ReactNodeViewRenderer(TaskItemComponent)
                }
            }),
            Callout,
            AIMark,
            Table.configure({
                resizable: true,
            }),
            TableRow,
            TableHeader,
            TableCell,
            Image.configure({
                inline: true,
                allowBase64: true,
            }),
            Youtube.configure({
                controls: false,
            }),
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
            Markdown.configure({
                html: true,                  // Allow HTML input/output
                transformPastedText: true,   // Auto-transform pasted markdown
                transformCopiedText: true,   // Auto-transform copied markdown
            })
        ],
        content: content,
        onUpdate: ({ editor }) => {
            if (editor.getHTML() !== content) {
                onChange(editor.getHTML());
            }
        },
        editorProps: {
            attributes: {
                class: "prose prose-zinc dark:prose-invert max-w-none focus:outline-none min-h-[300px]",
                style: `font-family: ${fontFamily}; font-size: ${fontSize}px; --editor-line-height: ${useSettingsStore.getState().lineHeight}; --table-line-height: ${useSettingsStore.getState().tableLineHeight};`,
                spellcheck: "false",
            },
        },
        editable: editable,
        immediatelyRender: false,
    });

    useEffect(() => {
        if (editor) {
            editor.setEditable(editable);
        }
    }, [editor, editable]);

    useEffect(() => {
        if (editor && content !== editor.getHTML()) {
            queueMicrotask(() => {
                editor.commands.setContent(content);
            });
        }
        if (editor && onEditorReady) {
            onEditorReady(editor);
        }
    }, [content, editor, onEditorReady]);

    const handleStopAI = () => {
        if (abortControllerRef.current) {
            abortControllerRef.current.abort();
            abortControllerRef.current = null;
        }
        setIsGenerating(false);
    };

    const handleAISuggest = async (prompt: any) => {
        if (!editor) return;

        const { aiConfig } = useSettingsStore.getState();
        if (!aiConfig.apiKey) {
            alert("请先在设置中配置 AI API Key");
            return;
        }

        const { from, to } = editor.state.selection;
        const selectedText = editor.state.doc.textBetween(from, to, " ");

        // Custom prompt logic
        const systemPrompt = prompt.systemPrompt || "You are a helpful assistant.";
        let userPrompt = selectedText;

        if (!userPrompt) {
            const pos = from;
            userPrompt = editor.state.doc.textBetween(Math.max(0, pos - 1000), pos, "\n");
        }

        setShowAI(false);
        setIsGenerating(true);
        abortControllerRef.current = new AbortController();

        try {
            const response = await fetch("/api/ai/chat", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    config: aiConfig,
                    messages: [
                        { role: "system", content: systemPrompt },
                        { role: "user", content: userPrompt }
                    ]
                }),
                signal: abortControllerRef.current.signal
            });

            if (!response.ok || !response.body) {
                throw new Error(await response.text());
            }

            const reader = response.body.getReader();
            const decoder = new TextDecoder();

            editor.chain().focus().insertContent("\n\n").toggleMark('aiMark').run();

            while (true) {
                const { done, value } = await reader.read();
                if (done) break;

                const chunk = decoder.decode(value);
                const lines = chunk.split('\n');
                for (const line of lines) {
                    if (line.startsWith('data: ') && line !== 'data: [DONE]') {
                        try {
                            const data = JSON.parse(line.slice(6));
                            const content = data.choices[0]?.delta?.content;
                            if (content) {
                                editor.commands.insertContent(content);
                            }
                        } catch (e) {
                            // ignore
                        }
                    }
                }
            }
            editor.chain().focus().insertContent("\n\n").unsetMark('aiMark').run();

        } catch (e: any) {
            if (e.name === 'AbortError') {
                editor.chain().focus().insertContent(" [已停止]").unsetMark('aiMark').run();
            } else {
                console.error("AI Error", e);
                alert("AI 请求失败，请检查配置或网络");
            }
        } finally {
            setIsGenerating(false);
            abortControllerRef.current = null;
        }
    };

    if (!editor) return null;

    return (
        <div className="relative group/editor flex flex-col min-h-full">
            <Toolbar editor={editor} onToggleAI={onToggleAI} onExport={onExport} />

            {showAI && (
                <div className="absolute top-12 right-4 z-50">
                    <AIAssist
                        isOpen={showAI}
                        onSuggest={handleAISuggest}
                        onClose={() => setShowAI(false)}
                    />
                </div>
            )}

            <div className="flex-1 mt-4">
                <EditorContent editor={editor} />
            </div>

            <button
                onClick={(e) => {
                    e.preventDefault();
                    if (isGenerating) {
                        handleStopAI();
                    } else {
                        setShowAI(!showAI);
                    }
                }}
                className={`fixed bottom-8 right-8 p-3 rounded-full shadow-lg hover:scale-110 transition-transform z-40 ${isGenerating
                    ? "bg-red-500 text-white animate-pulse"
                    : "bg-primary text-primary-foreground"
                    }`}
                title={isGenerating ? "停止生成 (Stop)" : "AI 助手 (AI Assist)"}
            >
                {isGenerating ? <div className="h-5 w-5 bg-current rounded-sm" /> : <Sparkles size={20} />}
            </button>


        </div>
    );
}