openpylon/src/components/card-detail/MarkdownEditor.tsx

import { useState, useRef, useEffect, useCallback } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { Button } from "@/components/ui/button";
import { useBoardStore } from "@/stores/board-store";

const OS_OPTIONS = {
  scrollbars: { theme: "os-theme-pylon" as const, autoHide: "scroll" as const, autoHideDelay: 600, clickScroll: true },
};

interface MarkdownEditorProps {
  cardId: string;
  value: string;
}

export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
  const [mode, setMode] = useState<"edit" | "preview">("preview");
  const [draft, setDraft] = useState(value);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const updateCard = useBoardStore((s) => s.updateCard);
  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  // Sync draft when value changes externally (e.g. undo)
  useEffect(() => {
    setDraft(value);
  }, [value]);

  // Auto-focus and auto-size textarea when switching to edit mode
  useEffect(() => {
    if (mode === "edit" && textareaRef.current) {
      const el = textareaRef.current;
      el.style.height = "auto";
      el.style.height = el.scrollHeight + "px";
      el.focus();
    }
  }, [mode]);

  const save = useCallback(
    (text: string) => {
      if (text !== value) {
        updateCard(cardId, { description: text });
      }
    },
    [cardId, value, updateCard]
  );

  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
    const text = e.target.value;
    setDraft(text);

    // Auto-size textarea to fit content (parent OverlayScrollbars handles overflow)
    e.target.style.height = "auto";
    e.target.style.height = e.target.scrollHeight + "px";

    // Debounced auto-save
    if (debounceRef.current) clearTimeout(debounceRef.current);
    debounceRef.current = setTimeout(() => {
      save(text);
    }, 300);
  }

  function handleBlur() {
    if (debounceRef.current) {
      clearTimeout(debounceRef.current);
      debounceRef.current = null;
    }
    save(draft);
  }

  return (
    <div className="flex flex-col gap-2">
      {/* Mode toggle */}
      <div className="flex gap-1">
        <Button
          variant={mode === "edit" ? "secondary" : "ghost"}
          size="xs"
          onClick={() => setMode("edit")}
          className="font-mono text-xs"
        >
          Edit
        </Button>
        <Button
          variant={mode === "preview" ? "secondary" : "ghost"}
          size="xs"
          onClick={() => {
            // Save before switching to preview
            if (mode === "edit") {
              if (debounceRef.current) {
                clearTimeout(debounceRef.current);
                debounceRef.current = null;
              }
              save(draft);
            }
            setMode("preview");
          }}
          className="font-mono text-xs"
        >
          Preview
        </Button>
      </div>

      {/* Editor / Preview */}
      {mode === "edit" ? (
        <OverlayScrollbarsComponent
          className="max-h-[160px] rounded-md border border-pylon-text-secondary/20 bg-pylon-surface focus-within:border-pylon-accent focus-within:ring-1 focus-within:ring-pylon-accent"
          options={{ ...OS_OPTIONS, overflow: { x: "hidden" as const } }}
          defer
        >
          <textarea
            ref={textareaRef}
            value={draft}
            onChange={handleChange}
            onBlur={handleBlur}
            placeholder="Add a description... (Markdown supported)"
            className="min-h-[100px] w-full resize-none overflow-hidden bg-transparent px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60"
          />
        </OverlayScrollbarsComponent>
      ) : (
        <OverlayScrollbarsComponent
          className="min-h-[100px] max-h-[160px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
          options={{ ...OS_OPTIONS, overflow: { x: "hidden" as const } }}
          defer
          onClick={() => setMode("edit")}
        >
          {draft ? (
            <div className="prose prose-sm max-w-none text-pylon-text prose-headings:text-pylon-text prose-p:text-pylon-text prose-strong:text-pylon-text prose-a:text-pylon-accent prose-code:rounded prose-code:bg-pylon-column prose-code:px-1 prose-code:py-0.5 prose-code:text-pylon-text prose-pre:bg-pylon-column prose-pre:text-pylon-text">
              <ReactMarkdown remarkPlugins={[remarkGfm]}>
                {draft}
              </ReactMarkdown>
            </div>
          ) : (
            <p className="text-sm italic text-pylon-text-secondary/60">
              Click to add a description...
            </p>
          )}
        </OverlayScrollbarsComponent>
      )}
    </div>
  );
}