"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils/index.js";
import { Bold, Italic, Link, List, ListOrdered } from "lucide-react";
import { Button } from "./button.js";
import { Textarea } from "./textarea.js";
function RichTextEditor({
  value,
  onChange,
  placeholder = "Enter content...",
  className,
  disabled = false,
  "data-cy": dataCy
}) {
  const textareaRef = React.useRef(null);
  const insertTag = (openTag, closeTag) => {
    const textarea = textareaRef.current;
    if (!textarea) return;
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const selectedText = value.substring(start, end);
    const before = value.substring(0, start);
    const after = value.substring(end);
    const newValue = `${before}${openTag}${selectedText}${closeTag}${after}`;
    onChange(newValue);
    setTimeout(() => {
      textarea.focus();
      const newCursorPos = start + openTag.length + selectedText.length + closeTag.length;
      textarea.setSelectionRange(newCursorPos, newCursorPos);
    }, 0);
  };
  const handleBold = () => insertTag("<strong>", "</strong>");
  const handleItalic = () => insertTag("<em>", "</em>");
  const handleLink = () => {
    const url = window.prompt("Enter URL:", "https://");
    if (url) {
      insertTag(`<a href="${url}">`, "</a>");
    }
  };
  const handleList = () => insertTag("<ul>\n  <li>", "</li>\n</ul>");
  const handleOrderedList = () => insertTag("<ol>\n  <li>", "</li>\n</ol>");
  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 p-1 border rounded-md bg-muted/30", children: [
      /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          className: "h-8 w-8 p-0",
          onClick: handleBold,
          disabled,
          title: "Bold",
          children: /* @__PURE__ */ jsx(Bold, { className: "h-4 w-4" })
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          className: "h-8 w-8 p-0",
          onClick: handleItalic,
          disabled,
          title: "Italic",
          children: /* @__PURE__ */ jsx(Italic, { className: "h-4 w-4" })
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          className: "h-8 w-8 p-0",
          onClick: handleLink,
          disabled,
          title: "Insert Link",
          children: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" })
        }
      ),
      /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1" }),
      /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          className: "h-8 w-8 p-0",
          onClick: handleList,
          disabled,
          title: "Bullet List",
          children: /* @__PURE__ */ jsx(List, { className: "h-4 w-4" })
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          type: "button",
          variant: "ghost",
          size: "sm",
          className: "h-8 w-8 p-0",
          onClick: handleOrderedList,
          disabled,
          title: "Numbered List",
          children: /* @__PURE__ */ jsx(ListOrdered, { className: "h-4 w-4" })
        }
      )
    ] }),
    /* @__PURE__ */ jsx(
      Textarea,
      {
        ref: textareaRef,
        value,
        onChange: (e) => onChange(e.target.value),
        placeholder,
        disabled,
        rows: 6,
        className: "font-mono text-sm",
        "data-cy": dataCy
      }
    ),
    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Supports HTML formatting. Use toolbar buttons or write HTML directly." })
  ] });
}
export {
  RichTextEditor
};
