"use client";

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

export function RichTextEditor({ value, onChange }: { value: string; onChange: (html: string) => void }) {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Link.configure({ openOnClick: false }),
      Placeholder.configure({ placeholder: "Write the story, guide, analysis, or vlog notes..." })
    ],
    content: value,
    editorProps: {
      attributes: {
        class: "min-h-[320px] rounded-b-lg border-x border-b border-white/10 bg-white/[.03] p-4 text-white outline-none"
      }
    },
    onUpdate: ({ editor }) => onChange(editor.getHTML()),
    immediatelyRender: false
  });

  if (!editor) return null;

  function setLink() {
    const url = window.prompt("URL");
    if (!url) return;
    editor.chain().focus().setLink({ href: url }).run();
  }

  const button = "rounded-md border border-white/10 p-2 text-white/70 hover:border-cyanx hover:text-cyanx";

  return (
    <div>
      <div className="flex flex-wrap gap-2 rounded-t-lg border border-white/10 bg-white/[.04] p-2">
        <button type="button" className={button} onClick={() => editor.chain().focus().toggleBold().run()} aria-label="Bold"><Bold size={16} /></button>
        <button type="button" className={button} onClick={() => editor.chain().focus().toggleItalic().run()} aria-label="Italic"><Italic size={16} /></button>
        <button type="button" className={button} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} aria-label="Heading"><Heading2 size={16} /></button>
        <button type="button" className={button} onClick={() => editor.chain().focus().toggleBulletList().run()} aria-label="List"><List size={16} /></button>
        <button type="button" className={button} onClick={setLink} aria-label="Link"><LinkIcon size={16} /></button>
        <button type="button" className={button} onClick={() => editor.chain().focus().undo().run()} aria-label="Undo"><Undo2 size={16} /></button>
      </div>
      <EditorContent editor={editor} />
    </div>
  );
}