"use client";

/**
 * MD editor wrapper. @uiw/react-md-editor needs window/document, so we
 * dynamic-import with ssr:false. Component owns local state and a hidden
 * input named "content" so it can live inside a server-action <form>.
 */
import { useState } from "react";
import dynamic from "next/dynamic";
import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";

const MDEditor = dynamic(() => import("@uiw/react-md-editor"), { ssr: false });

export function MarkdownEditor({
  name = "content",
  defaultValue = "",
  height = 480,
}: {
  name?: string;
  defaultValue?: string;
  height?: number;
}) {
  const [value, setValue] = useState<string>(defaultValue);

  return (
    <div data-color-mode="dark">
      <input type="hidden" name={name} value={value} />
      <MDEditor
        value={value}
        onChange={(v) => setValue(v ?? "")}
        height={height}
        preview="live"
        visibleDragbar={false}
        textareaProps={{
          placeholder: "Viết nội dung bằng Markdown...",
          spellCheck: false,
        }}
      />
      <div className="text-ink-muted mt-2 text-xs">
        {value.length.toLocaleString("vi-VN")} ký tự ·{" "}
        {value.trim().split(/\s+/).filter(Boolean).length} từ
      </div>
    </div>
  );
}