"use client";

import React, { useEffect, useState } from "react";
import { useTranslations, useLocale } from "next-intl";
import { EditorContent, useEditor } from "@tiptap/react";

import { Document } from "@tiptap/extension-document";
import { Text } from "@tiptap/extension-text";
import { Paragraph } from "@tiptap/extension-paragraph";
import { Dropcursor, Gapcursor, TrailingNode } from "@tiptap/extensions";
import { HardBreak } from "@tiptap/extension-hard-break";
import { TextStyle } from "@tiptap/extension-text-style";
import { ListItem } from "@tiptap/extension-list";

import { RichTextProvider } from "reactjs-tiptap-editor";
import { Bold, RichTextBold } from "reactjs-tiptap-editor/bold";
import {
  BulletList,
  RichTextBulletList,
} from "reactjs-tiptap-editor/bulletlist";
import { Color, RichTextColor } from "reactjs-tiptap-editor/color";
import {
  FontFamily,
  RichTextFontFamily,
} from "reactjs-tiptap-editor/fontfamily";
import { FontSize, RichTextFontSize } from "reactjs-tiptap-editor/fontsize";
import { Heading, RichTextHeading } from "reactjs-tiptap-editor/heading";
import { Highlight, RichTextHighlight } from "reactjs-tiptap-editor/highlight";
import {
  History,
  RichTextUndo,
  RichTextRedo,
} from "reactjs-tiptap-editor/history";
import { Italic, RichTextItalic } from "reactjs-tiptap-editor/italic";
import { localeActions } from "reactjs-tiptap-editor/locale-bundle";

import "reactjs-tiptap-editor/style.css";

const BaseKit = [
  Document,
  Text,
  Paragraph,
  Dropcursor,
  Gapcursor,
  HardBreak,
  TrailingNode,
  ListItem,
  TextStyle,
];

const extensions = [
  ...BaseKit,
  Heading,
  Italic,
  Bold,
  BulletList,
  Color,
  Highlight,
  FontFamily,
  FontSize,
  History,
];

interface TiptapEditorProps {
  valueDEFAULT: string;
  onChangeValue: (value: string) => void;
}

export default function TiptapEditor({
  valueDEFAULT,
  onChangeValue,
}: TiptapEditorProps) {
  const t = useTranslations();
  const currentLocale = useLocale();

  const [hasMounted, setHasMounted] = useState(false);
  const [isDark, setIsDark] = useState(false);

  // SSR-safe
  useEffect(() => {
    setHasMounted(true);
    const theme = localStorage.getItem("theme");
    setIsDark(theme === "dark");
  }, []);

  const editor = useEditor({
    extensions,
    content: valueDEFAULT ?? "",
    immediatelyRender: false, // required for Next.js SSR
    onUpdate: ({ editor }) => {
      onChangeValue(editor.getHTML());
    },
  });

  // Sync editor content when the value changes externally
  useEffect(() => {
    if (!editor) return;
    const current = editor.getHTML();
    if (valueDEFAULT !== current) {
      editor.commands.setContent(valueDEFAULT ?? "", { emitUpdate: false });
    }
  }, [valueDEFAULT, editor]);

  // Locale setup
  useEffect(() => {
    if (!currentLocale) return;

    if (currentLocale === "ar") {
      localeActions.setMessage("ar", {
        "editor.fontSize.default.tooltip": t("toolbar.fontSize"),
        "editor.bold.tooltip": t("toolbar.bold"),
        "editor.italic.tooltip": t("toolbar.italic"),
        "editor.underline.tooltip": t("toolbar.underline"),
        "editor.heading.tooltip": t("toolbar.heading"),
        "editor.paragraph.tooltip": t("toolbar.paragraph"),
        "editor.heading.h1.tooltip": t("toolbar.headingTools.h1"),
        "editor.heading.h2.tooltip": t("toolbar.headingTools.h2"),
        "editor.heading.h3.tooltip": t("toolbar.headingTools.h3"),
        "editor.heading.h4.tooltip": t("toolbar.headingTools.h4"),
        "editor.heading.h5.tooltip": t("toolbar.headingTools.h5"),
        "editor.heading.h6.tooltip": t("toolbar.headingTools.h6"),
        "editor.bulletlist.tooltip": t("toolbar.bulletList"),
        "editor.fontSize.tooltip": t("toolbar.fontSize"),
        "editor.fontFamily.tooltip": t("toolbar.fontFamily"),
        "editor.fontFamily.default.tooltip": t("toolbar.fontFamily"),
        "editor.color.tooltip": t("toolbar.color"),
        "editor.highlight.tooltip": t("toolbar.highlight"),
        "editor.undo.tooltip": t("toolbar.undo"),
        "editor.redo.tooltip": t("toolbar.redo"),
        "editor.characters": t("toolbar.charCount"),
        "editor.remove": t("toolbar.remove"),
        "editor.copy": t("toolbar.copy"),
        "editor.copyToClipboard": t("toolbar.copyToClipboard"),
        "editor.draghandle.tooltip": t("toolbar.dragHandle"),
        "editor.content": t("toolbar.content"),
      });
      localeActions.setLang("ar");
    } else {
      localeActions.setLang("en");
    }
  }, [currentLocale, t]);

  if (!hasMounted || !editor) return null;

  return (
    <RichTextProvider editor={editor} dark={isDark}>
      <div className="flex items-center gap-1 flex-wrap border-b border-solid p-1">
        <RichTextHeading />
        <RichTextBold />
        <RichTextItalic />
        <RichTextBulletList />
        <RichTextColor />
        <RichTextHighlight />
        <RichTextFontFamily />
        <RichTextFontSize />
        <RichTextUndo />
        <RichTextRedo />
      </div>
      <EditorContent editor={editor} />
    </RichTextProvider>
  );
}