import { ContentEditable } from "@common/components/ContentEditable";
import { highlight } from "@common/highlight";
import { useAppState, type Tab } from "../contexts/state";
import styles from '../assets/editor.module.css';
import { useMemo } from "preact/hooks";
import clsx from "clsx";
import { CharacterEditor } from "./character-editor";
import { LocationEditor } from "./location-editor";
import { ChaptersEditor } from "./chapters-editor";
import { LoreEditor } from "./lore-editor";
import { useInputCallback } from "@common/hooks/useInputCallback";
import Prompt from "../utils/prompt";

const TABS: { id: Tab; label: string; right?: boolean }[] = [
    { id: "story", label: "Story" },
    { id: "chapters", label: "Chapters" },
    { id: "lore", label: "Lore" },
    { id: "characters", label: "Characters" },
    { id: "locations", label: "Locations" },
    { id: "prompt", label: "Prompt", right: true },
];

export const Editor = () => {
    const appState = useAppState();
    const { currentStory, dispatch } = appState;

    const handleInput = useInputCallback((text: string) => {
        if (!currentStory) return;
        dispatch({
            type: 'EDIT_STORY',
            id: currentStory.id,
            text,
        });
    }, [currentStory?.id]);

    const handleTabChange = (tab: Tab) => {
        if (!currentStory) return;
        dispatch({
            type: 'SET_CURRENT_TAB',
            id: currentStory.id,
            tab,
        });
    };

    const storyValue = useMemo(() => currentStory ? highlight(currentStory.text) : '', [currentStory?.text]);
    const promptPreview = useMemo(() => {
        if (currentStory?.currentTab !== 'prompt') return '';
        const text = Prompt.formatSystemPrompt(appState);
        return highlight(text, false);
    }, [currentStory?.currentTab, appState]);

    if (!currentStory) {
        return <div class={styles.editor} />;
    }

    return (
        <div class={styles.editor}>
            <div class={styles.title}>
                {currentStory.title}
            </div>
            <div class={styles.content}>
                {currentStory.currentTab === "story" && (
                    <ContentEditable
                        class={styles.editable}
                        value={storyValue}
                        onInput={handleInput}
                        placeholder="Start writing your story..."
                    />
                )}
                {currentStory.currentTab === "lore" && (
                    <LoreEditor />
                )}
                {currentStory.currentTab === "characters" && (
                    <CharacterEditor />
                )}
                {currentStory.currentTab === "locations" && (
                    <LocationEditor />
                )}
                {currentStory.currentTab === "chapters" && (
                    <ChaptersEditor />
                )}
                {currentStory.currentTab === "prompt" && (
                    <div class={styles.promptPreview} dangerouslySetInnerHTML={{ __html: promptPreview }} />
                )}
            </div>
            <div class={styles.tabs}>
                {TABS.map((tab) => (
                    <button
                        key={tab.id}
                        class={clsx(styles.tab, currentStory.currentTab === tab.id && styles.active, tab.right && styles.tabRight)}
                        onClick={() => handleTabChange(tab.id)}
                    >
                        {tab.label}
                    </button>
                ))}
            </div>
        </div>
    );
};