import { onMount } from "solid-js";

interface NoteEditorProps {
  initialContent: string;
  saving: boolean;
  onSave: (html: string) => Promise<void>;
  onCancel: () => void;
}

function toHtml(raw: string): string {
  if (/<\/?[a-z]/i.test(raw)) return raw;
  return raw
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/\n/g, "<br>");
}

export function NoteEditor(props: NoteEditorProps) {
  let editorRef: HTMLDivElement | undefined;

  onMount(() => {
    if (!editorRef) return;
    editorRef.innerHTML = toHtml(props.initialContent);
    editorRef.focus();
    const sel = window.getSelection();
    if (sel) {
      const range = document.createRange();
      range.selectNodeContents(editorRef);
      range.collapse(false);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  });

  function exec(cmd: string, value?: string) {
    document.execCommand(cmd, false, value);
    editorRef?.focus();
  }

  function handleKeyDown(e: KeyboardEvent) {
    const mod = e.metaKey || e.ctrlKey;
    if (mod && e.key === "b") { e.preventDefault(); exec("bold"); return; }
    if (mod && e.key === "i") { e.preventDefault(); exec("italic"); return; }
    if (e.key === "Escape") { e.preventDefault(); props.onCancel(); }
  }

  return (
    <div class="peach-note-editor">
      <div class="peach-note-editor-header">
        <button
          class="peach-note-editor-back"
          onClick={props.onCancel}
          disabled={props.saving}
          aria-label="Cancel"
        >
          <svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round">
            <path d="M6 1L1 6L6 11" />
          </svg>
        </button>
        <span class="peach-note-editor-label">note</span>
        <button
          class="peach-note-editor-save-btn"
          onClick={() => void props.onSave(editorRef?.innerHTML ?? "")}
          disabled={props.saving}
        >
          {props.saving ? "saving…" : "save"}
        </button>
      </div>

      <div class="peach-note-toolbar">
        <button
          class="peach-note-tool-btn peach-note-tool-bold"
          onMouseDown={(e) => { e.preventDefault(); exec("bold"); }}
          aria-label="Bold"
          title="Bold (⌘B)"
        >B</button>
        <button
          class="peach-note-tool-btn peach-note-tool-italic"
          onMouseDown={(e) => { e.preventDefault(); exec("italic"); }}
          aria-label="Italic"
          title="Italic (⌘I)"
        >I</button>
        <div class="peach-note-tool-divider" />
        <button
          class="peach-note-tool-btn"
          onMouseDown={(e) => { e.preventDefault(); exec("fontSize", "1"); }}
          title="Small"
        >sm</button>
        <button
          class="peach-note-tool-btn"
          onMouseDown={(e) => { e.preventDefault(); exec("fontSize", "3"); }}
          title="Normal"
        >md</button>
        <button
          class="peach-note-tool-btn"
          onMouseDown={(e) => { e.preventDefault(); exec("fontSize", "5"); }}
          title="Large"
        >lg</button>
      </div>

      <div
        ref={editorRef}
        class="peach-note-editor-body"
        contenteditable="true"
        onKeyDown={handleKeyDown}
        aria-multiline="true"
        aria-label="Note content"
      />
    </div>
  );
}