"use client";

import { useState } from "react";
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Link from "@tiptap/extension-link";
import {
  Bold,
  Italic,
  List,
  ListOrdered,
  Heading2,
  Link as LinkIcon,
} from "lucide-react";

interface RichTextEditorProps {
  name: string;
  label: string;
  defaultValue?: string;
  error?: string;
}

export function RichTextEditor({
  name,
  label,
  defaultValue,
  error,
}: RichTextEditorProps) {
  const [html, setHtml] = useState(defaultValue ?? "");

  const editor = useEditor({
    extensions: [StarterKit, Link.configure({ openOnClick: false })],
    content: defaultValue ?? "",
    immediatelyRender: false,
    editorProps: {
      attributes: {
        class:
          "article-content min-h-[200px] rounded-b-lg border border-t-0 border-gray-300 px-3 py-2 focus:outline-none",
      },
    },
    onUpdate: ({ editor }) => {
      setHtml(editor.getHTML());
    },
  });

  if (!editor) {
    return null;
  }

  const setLink = () => {
    const url = window.prompt("Masukkan URL link:");
    if (url) {
      editor.chain().focus().setLink({ href: url }).run();
    }
  };

  return (
    <div>
      <label className="mb-1 block text-sm font-medium text-heading">
        {label}
      </label>

      <div className="flex flex-wrap items-center gap-1 rounded-t-lg border border-gray-300 bg-bg-light px-2 py-1.5">
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={`rounded p-1.5 transition hover:bg-white ${
            editor.isActive("bold") ? "bg-white text-merah-ranata" : ""
          }`}
        >
          <Bold className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={`rounded p-1.5 transition hover:bg-white ${
            editor.isActive("italic") ? "bg-white text-merah-ranata" : ""
          }`}
        >
          <Italic className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 2 }).run()
          }
          className={`rounded p-1.5 transition hover:bg-white ${
            editor.isActive("heading", { level: 2 })
              ? "bg-white text-merah-ranata"
              : ""
          }`}
        >
          <Heading2 className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          className={`rounded p-1.5 transition hover:bg-white ${
            editor.isActive("bulletList") ? "bg-white text-merah-ranata" : ""
          }`}
        >
          <List className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
          className={`rounded p-1.5 transition hover:bg-white ${
            editor.isActive("orderedList") ? "bg-white text-merah-ranata" : ""
          }`}
        >
          <ListOrdered className="h-4 w-4" />
        </button>
        <button
          type="button"
          onClick={setLink}
          className={`rounded p-1.5 transition hover:bg-white ${
            editor.isActive("link") ? "bg-white text-merah-ranata" : ""
          }`}
        >
          <LinkIcon className="h-4 w-4" />
        </button>
      </div>

      <EditorContent editor={editor} />

      <input type="hidden" name={name} value={html} readOnly />

      {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
    </div>
  );
}