import { createEffect, on, onMount } from "solid-js";

// M15/THREAT-006: allow-list sanitizer for note bodies. The editor writes
// arbitrary HTML directly to innerHTML; without this any note body could
// inject iframe/base/meta/form/script. Allow-list is intentional — adding
// to it requires reviewing the attack surface of the new tag.
const ALLOWED_NOTE_TAGS = new Set([
  "b", "i", "u", "s", "strong", "em",
  "h2", "h3", "ul", "ol", "li", "br", "hr", "p",
]);

function sanitizeNoteElement(el: Element): void {
  for (const child of Array.from(el.children)) {
    if (!ALLOWED_NOTE_TAGS.has(child.tagName.toLowerCase())) {
      child.replaceWith(document.createTextNode(child.textContent ?? ""));
    } else {
      while (child.attributes.length > 0) {
        child.removeAttribute(child.attributes[0]!.name);
      }
      sanitizeNoteElement(child);
    }
  }
}

export function toHtml(raw: string): string {
  if (!/<\/?[a-z]/i.test(raw)) {
    return raw
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/\n/g, "<br>");
  }
  const doc = new DOMParser().parseFromString(raw, "text/html");
  sanitizeNoteElement(doc.body);
  return doc.body.innerHTML;
}

const BoldIcon = () => <span style="font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:11px;">B</span>;
const ItalicIcon = () => <span style="font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;">I</span>;
const UnderlineIcon = () => <span style="text-decoration:underline;font-size:10px;font-family:'IBM Plex Mono',monospace;">U</span>;
const StrikeIcon = () => <span style="text-decoration:line-through;font-size:10px;font-family:'IBM Plex Mono',monospace;">S</span>;
const HeadingIcon = () => <span style="font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:10px;letter-spacing:0.03em;">H</span>;

const BulletIcon = () => (
  <svg width="12" height="11" viewBox="0 0 12 11" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
    <circle cx="1.5" cy="2.5" r="1" fill="currentColor" stroke="none"/>
    <line x1="4" y1="2.5" x2="11" y2="2.5"/>
    <circle cx="1.5" cy="6" r="1" fill="currentColor" stroke="none"/>
    <line x1="4" y1="6" x2="11" y2="6"/>
    <circle cx="1.5" cy="9.5" r="1" fill="currentColor" stroke="none"/>
    <line x1="4" y1="9.5" x2="11" y2="9.5"/>
  </svg>
);

const NumberedIcon = () => (
  <svg width="12" height="11" viewBox="0 0 12 11" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
    <text x="0" y="4" font-size="4" fill="currentColor" stroke="none" font-family="monospace">1.</text>
    <line x1="4" y1="2.5" x2="11" y2="2.5"/>
    <text x="0" y="7.5" font-size="4" fill="currentColor" stroke="none" font-family="monospace">2.</text>
    <line x1="4" y1="6" x2="11" y2="6"/>
    <text x="0" y="11" font-size="4" fill="currentColor" stroke="none" font-family="monospace">3.</text>
    <line x1="4" y1="9.5" x2="11" y2="9.5"/>
  </svg>
);

const RuleIcon = () => (
  <svg width="12" height="8" viewBox="0 0 12 8" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round">
    <line x1="0" y1="4" x2="12" y2="4"/>
    <line x1="2" y1="1.5" x2="2" y2="6.5" stroke-width="0.6" opacity="0.5"/>
    <line x1="10" y1="1.5" x2="10" y2="6.5" stroke-width="0.6" opacity="0.5"/>
  </svg>
);

export type ExecFn = (cmd: string, val?: string) => void;

export function Toolbar(props: { exec: ExecFn; class?: string }) {
  const e = props.exec;
  function toggleHeading() {
    const val = document.queryCommandValue("formatBlock").toLowerCase();
    e("formatBlock", val === "h2" ? "p" : "h2");
  }
  return (
    <div class={props.class ?? "peach-note-toolbar"}>
      <button class="peach-note-tool-btn" onMouseDown={(ev) => { ev.preventDefault(); e("bold"); }} title="Bold (⌘B)"><BoldIcon /></button>
      <button class="peach-note-tool-btn" onMouseDown={(ev) => { ev.preventDefault(); e("italic"); }} title="Italic (⌘I)"><ItalicIcon /></button>
      <button class="peach-note-tool-btn" onMouseDown={(ev) => { ev.preventDefault(); e("underline"); }} title="Underline (⌘U)"><UnderlineIcon /></button>
      <button class="peach-note-tool-btn" onMouseDown={(ev) => { ev.preventDefault(); e("strikeThrough"); }} title="Strikethrough"><StrikeIcon /></button>
      <div class="peach-note-tool-divider" />
      <button class="peach-note-tool-btn" onMouseDown={(ev) => { ev.preventDefault(); toggleHeading(); }} title="Heading"><HeadingIcon /></button>
      <button class="peach-note-tool-btn peach-note-tool-icon" onMouseDown={(ev) => { ev.preventDefault(); e("insertUnorderedList"); }} title="Bullet list"><BulletIcon /></button>
      <button class="peach-note-tool-btn peach-note-tool-icon" onMouseDown={(ev) => { ev.preventDefault(); e("insertOrderedList"); }} title="Numbered list"><NumberedIcon /></button>
      <div class="peach-note-tool-divider" />
      <button class="peach-note-tool-btn peach-note-tool-icon" onMouseDown={(ev) => { ev.preventDefault(); e("insertHorizontalRule"); }} title="Divider"><RuleIcon /></button>
    </div>
  );
}

/* ── Inline editor (Add.tsx, Entry.tsx note view) ── */

interface NoteEditorInlineProps {
  initialContent: string;
  onContentChange?: (html: string) => void;
  onBlur?: (html: string) => void;
  onReady?: (el: HTMLDivElement) => void;
  autoFocus?: boolean;
  /** When this key changes, the editor re-loads initialContent (e.g., switching between vault entries in-place). */
  entryKey?: string;
}

export function NoteEditorInline(props: NoteEditorInlineProps) {
  let editorRef: HTMLDivElement | undefined;

  onMount(() => {
    if (!editorRef) return;
    editorRef.innerHTML = toHtml(props.initialContent);
    if (props.autoFocus !== false) editorRef.focus();
    props.onReady?.(editorRef);
  });

  createEffect(on(() => props.entryKey, (key, prevKey) => {
    if (prevKey === undefined || key === prevKey || !editorRef) return;
    editorRef.innerHTML = toHtml(props.initialContent);
    props.onReady?.(editorRef);
  }));

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

  // Paste as plain text. The live editor writes innerHTML directly and only
  // load-time content is sanitized (toHtml); pasted HTML would otherwise carry
  // foreign inline styles (white-space:pre kills wrapping) and disallowed tags.
  // insertText keeps the body clean and wrapping intact, and fires `input` so
  // onContentChange persists the change.
  function handlePaste(e: ClipboardEvent) {
    e.preventDefault();
    const text = e.clipboardData?.getData("text/plain") ?? "";
    document.execCommand("insertText", false, text);
  }

  function handleKeyDown(e: KeyboardEvent) {
    const mod = e.metaKey || e.ctrlKey;
    // Only intercept shortcuts for non-alphanumeric keys to avoid swallowing
    // letter input. Letter keys (a–z, etc.) must always pass through freely.
    const isLetterKey = e.key.length === 1;
    if (isLetterKey) return;
    if (mod && e.key === "b") { e.preventDefault(); exec("bold"); }
    if (mod && e.key === "i") { e.preventDefault(); exec("italic"); }
    if (mod && e.key === "u") { e.preventDefault(); exec("underline"); }
  }

  return (
    <div class="peach-note-editor-inline">
      <div ref={editorRef}
        class="peach-note-editor-body peach-note-editor-body--inline"
        contenteditable="true"
        onKeyDown={handleKeyDown}
        onPaste={handlePaste}
        onInput={() => props.onContentChange?.(editorRef?.innerHTML ?? "")}
        onBlur={() => props.onBlur?.(editorRef?.innerHTML ?? "")}
        aria-multiline="true"
        aria-label="Note content"
      />
    </div>
  );
}