/* ui.jsx — shared primitives: icons, buttons, editable fields, modal, flourishes. */ // ── Icon set (stroke-based, 24×24, currentColor) ──────────────────────────── const ICON_PATHS = { users: '', spark: '', flag: '', scroll: '', key: '', map: '', mask: '', sword: '', gem: '', plus: '', trash: '', play: '', pen: '', book: '', sparkles: '', eye: '', eyeoff: '', back: '', cal: '', check: '', x: '', dots: '', grip: '', copy: '', chevron: '', flame: '', clock: '', feather: '', settings: '', import: '', export: '', expand: '', image: '', skull: '', person: '', }; function Icon({ name, size = 20, sw = 1.7, style, className }) { return ( ); } // ── Decorative flourish — a thin filigree divider ─────────────────────────── function Flourish({ w = 120 }) { return ( ); } // ── Buttons ────────────────────────────────────────────────────────────────── function Button({ children, onClick, variant = "ghost", icon, size = "md", title, type = "button", style }) { return ( ); } function IconButton({ name, onClick, title, danger, size = 16, active }) { return ( ); } // ── Editable fields (contentEditable-free; auto-growing textarea / input) ──── function EditableLine({ value, placeholder, onChange, className, big, wrap, ...rest }) { const fitRef = React.useCallback((el) => { if (!el) return; el.style.height = "auto"; el.style.height = el.scrollHeight + "px"; }, []); if (wrap) { return (

{ onChange(e.target.value); fitRef(e.currentTarget); }}
        onInput={(e) => fitRef(e.currentTarget)}
        onKeyDown={(e) => { if (e.key === "Enter") e.preventDefault(); }}
        spellCheck={false}
        {...rest} />
    );
  }
  return (
    <input
      className={`ed-line${big ? " ed-line-big" : ""} ${className || ""}`}
      value={value || ""}
      placeholder={placeholder}
      onChange={(e) => onChange(e.target.value)}
      spellCheck={false}
      {...rest} />
  );
}

const BLOCK_START = /^(#{1,6} |[-*+] |\d+\. |>|```|~~~)/;

// Preserve blank lines as visible spacers. End with \n\n so the <br> HTML block is
  // properly terminated and the following text starts a new paragraph (otherwise marked
  // absorbs the text into the HTML block and double-spaces are never processed).
  return withHardBreaks.replace(/\n{2,}/g, m => {
    const brs = Math.max(1, m.length - 2);
    return '\n\n' + '<br>\n'.repeat(brs - 1) + '<br>\n\n';
  });
}

function EditableArea({ value, placeholder, onChange, className, minRows = 2, highlight, onCardLinkClick, cardIndex, ...rest }) {
  const [focused, setFocused] = React.useState(false);
  const [suggest, setSuggest] = React.useState(null);
  const focusPending = React.useRef(false);
  const taRef = React.useRef(null);

const textareaRef = React.useCallback((el) => {
    taRef.current = el;
    if (el && focusPending.current) {
      focusPending.current = false;
      el.focus();
      const len = (el.value || "").length;
      el.selectionStart = el.selectionEnd = len;
      el.style.height = "auto";
      el.style.height = el.scrollHeight + "px";
    }
  }, []);

const fit = React.useCallback((el) => {
    if (!el) return;
    el.style.height = "auto";
    el.style.height = el.scrollHeight + "px";
  }, []);

if (!focused && value && value.trim()) {
    let html = window.marked.parse(renderableMarkdown(value));
    if (highlight) {
      const esc = highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      html = html.replace(
        new RegExp(`(<[^>]*>)|(${esc})`, 'gi'),
        (m, tag, word) => tag ? tag : `<mark class="run-hl">${word}</mark>`
      );
    }
    return (
      <div
        className={`ed-area-display ${className || ""}`}
        tabIndex={0}
        onMouseDown={(e) => {
          if (onCardLinkClick) {
            const link = e.target.closest('.card-link');
            if (link) e.preventDefault(); // prevent focus change so edit mode doesn't open
          }
        }}
        onClick={(e) => {
          if (onCardLinkClick) {
            const link = e.target.closest('.card-link');
            if (link) { onCardLinkClick(link.dataset.cardTitle); return; }
          }
          focusPending.current = true; setFocused(true);
        }}
        onFocus={() => { focusPending.current = true; setFocused(true); }}
        dangerouslySetInnerHTML={{ __html: html }} />
    );
  }

return (
    <div style={{ position: "relative" }}>
      <textarea
        ref={textareaRef}
        className={`ed-area ${className || ""}`}
        value={value || ""}
        placeholder={placeholder}
        rows={minRows}
        onChange={(e) => { onChange(e.target.value); fit(e.currentTarget); if (cardIndex) checkSuggest(e.currentTarget); }}
        onKeyDown={handleKeyDown}
        onInput={(e) => fit(e.currentTarget)}
        onFocus={() => setFocused(true)}
        onBlur={() => { setFocused(false); setSuggest(null); }}
        {...rest} />
      {suggest && (
        <div className="card-link-suggest" onMouseDown={(e) => e.preventDefault()}>
          <button type="button" className="card-link-suggest-btn" onClick={applyLink}>
            Link to “{suggest.title}”
          </button>
          <button type="button" className="card-link-suggest-dismiss" onClick={() => setSuggest(null)}>✕</button>
        </div>
      )}
    </div>
  );
}

// ── Aspects editor — chips of evocative descriptors ─────────────────────────
function AspectsEditor({ value, onChange, placeholder }) {
  const list = Array.isArray(value) ? value : [];
  const [draft, setDraft] = React.useState("");
  const add = () => {
    const v = draft.trim();
    if (!v) return;
    onChange([...list, v]);
    setDraft("");
  };
  return (
    <div className="aspects">
      {list.map((a, i) =>
        <span className="aspect-chip" key={i}>
          {a}
          <button type="button"
            style={{ display:"flex", alignItems:"center", justifyContent:"center", width:18, height:18, minWidth:18, minHeight:18, flexShrink:0, background:"none", border:0, padding:0, opacity:0.55, borderRadius:"50%", cursor:"pointer", color:"inherit" }}
            onClick={() => onChange(list.filter((_, j) => j !== i))} aria-label="Remove aspect">
            <Icon name="x" size={11} sw={2.4} />
          </button>
        </span>
      )}
      <input
        className="aspect-input"
        value={draft}
        placeholder={list.length ? "add aspect…" : placeholder || "add aspect…"}
        onChange={(e) => setDraft(e.target.value)}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === ",") { e.preventDefault(); add(); } }}
        onBlur={add} />
    </div>
  );
}

// ── Modal shell ──────────────────────────────────────────────────────────────
function Modal({ title, onClose, children, width = 460 }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return ReactDOM.createPortal(
    <div className="modal-scrim" onMouseDown={onClose}>
      <div className="modal" style={{ maxWidth: width }} onMouseDown={(e) => e.stopPropagation()}>
        <div className="modal-hd">
          <h3>{title}</h3>
          <IconButton name="x" onClick={onClose} title="Close" size={18} />
        </div>
        <div className="modal-body">{children}</div>
      </div>
    </div>,
    document.querySelector('.app') || document.body
  );
}

// ── ConfirmDelete: trash button → modal confirmation ──────────────────────────
function ConfirmDelete({ onConfirm, label = "Delete" }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <button type="button" className="icon-btn danger" title={label}
        onClick={(e) => { e.stopPropagation(); setOpen(true); }}>
        <Icon name="trash" size={16} sw={1.8} />
      </button>
      {open && (
        <Modal title="Delete?" onClose={() => setOpen(false)} width={320}>
          <div className="confirm-modal-body">
            <p className="confirm-modal-msg">This can't be undone.</p>
            <div className="confirm-modal-btns">
              <button type="button" className="btn btn-sm btn-ghost" onClick={() => setOpen(false)}>Cancel</button>
              <button type="button" className="btn btn-sm btn-danger"
                onClick={() => { setOpen(false); onConfirm(); }}>Delete</button>
            </div>
          </div>
        </Modal>
      )}
    </>
  );
}

function NotesSectionImg({ src, size = "thumb", onRemove, onSizeChange }) {
  const [open, setOpen] = React.useState(false);
  const [blobUrl, setBlobUrl] = React.useState(null);

React.useEffect(() => {
    if (!open || !src) return;
    const isData = src.startsWith("data:");
    const url = isData ? window.dataUriToBlobUrl(src) : src;
    setBlobUrl(url);
    return () => { if (isData) URL.revokeObjectURL(url); setBlobUrl(null); };
  }, [open, src]);

React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);

return (
    <>
      <div className="notes-section-img" onClick={() => setOpen(true)}>
        <img src={src} alt="" />
        <div className="notes-section-img-controls" onClick={(e) => e.stopPropagation()}>
          <div className="notes-section-img-sizes">
            {[["thumb", "S", "Thumbnail"], ["medium", "M", "Medium"], ["full", "L", "Full image"]].map(([s, label, title]) => (
              <button key={s} className={`notes-img-size-btn${size === s ? " active" : ""}`}
                onClick={() => onSizeChange(s)} title={title}>
                {label}
              </button>
            ))}
          </div>
          <button className="notes-section-img-remove" title="Remove image" onClick={onRemove}>
            <Icon name="trash" size={11} />
          </button>
        </div>
      </div>
      {open && (blobUrl || !src.startsWith("data:")) && (
        <div className="img-lightbox" onClick={() => setOpen(false)}>
          <img src={open && !src.startsWith("data:") ? src : blobUrl} alt=""
            className="img-lightbox-img" onClick={(e) => e.stopPropagation()} />
        </div>
      )}
    </>
  );
}

function NotesSections({ sections, onChange, bodyPlaceholder, ctx = {}, highlight }) {
  const [imageModalId, setImageModalId] = React.useState(null);
  const imageModalSection = (sections || []).find((s) => s.id === imageModalId) || null;

// onChange is called with an updater function so every edit derives from the
  // freshest section list. Passing a pre-computed array here would let a second
  // edit that fires before React commits clobber the first (lost/scrambled text,
  // sections vanishing). The functional form threads through to App's setState.
  const add = () =>
    onChange((prev) => [...(prev || []), { id: window.RPG.uid(), title: "", body: "", image: null, imageSize: "thumb" }]);

// A focused EditableArea body collapses from <textarea> to a rendered-markdown
  // <div> on blur, which shifts everything below it. If a click on one of these
  // controls were allowed to blur the body first, that reflow would move the
  // button out from under the pointer mid-click — the click misses (add does
  // nothing) or lands on a neighbouring control (e.g. delete, wiping the section).
  // preventDefault on mousedown keeps focus where it is, so no reflow happens and
  // the click lands on the intended button. The click handler still fires.
  const keepFocus = (e) => e.preventDefault();
  const update = (id, patch) =>
    onChange((prev) => (prev || []).map((s) => (s.id === id ? { ...s, ...patch } : s)));
  const remove = (id) => {
    const sec = (sections || []).find((s) => s.id === id);
    if (sec?.image && window.RPGStorage) window.RPGStorage.remove(sec.image);
    onChange((prev) => (prev || []).filter((s) => s.id !== id));
  };

return (
    <div className="notes-sections">
      {(sections || []).map((sec) => (
        <div key={sec.id} className={`notes-section-card${sec.image ? ` nsc--${sec.imageSize || "thumb"}` : ""}`}>
          <div className="notes-section-tools" onMouseDown={keepFocus}>
            <IconButton name="image" size={14} title="Add / change image" active={!!sec.image}
              onClick={() => setImageModalId(sec.id)} />
            <IconButton name="trash" size={14} danger title="Delete section"
              onClick={() => remove(sec.id)} />
          </div>
          <div className="nsc-text">
            <EditableLine value={sec.title} placeholder="Section title…" wrap
              className="notes-section-title"
              onChange={(v) => update(sec.id, { title: v })} />
            <EditableArea value={sec.body} placeholder={bodyPlaceholder || "Notes…"}
              className="notes-section-body"
              highlight={highlight}
              onChange={(v) => update(sec.id, { body: v })} />
          </div>
          {sec.image && (
            <NotesSectionImg src={sec.image} size={sec.imageSize || "thumb"}
              onSizeChange={(sz) => update(sec.id, { imageSize: sz })}
              onRemove={() => {
                if (window.RPGStorage) window.RPGStorage.remove(sec.image);
                update(sec.id, { image: null });
              }} />
          )}
        </div>
      ))}
      <button type="button" className="notes-add-btn" onMouseDown={keepFocus} onClick={add}>
        <Icon name="plus" size={14} /> Add section
      </button>
      {imageModalSection && (
        <window.ImageModal
          item={imageModalSection}
          step={{ name: "notes", itemNoun: "section" }}
          ctx={ctx}
          onUse={async (url) => {
            const stored = window.RPGStorage ? await window.RPGStorage.ensureUploaded(url) : url;
            if (imageModalSection.image && imageModalSection.image !== stored && window.RPGStorage)
              window.RPGStorage.remove(imageModalSection.image);
            update(imageModalSection.id, { image: stored });
            setImageModalId(null);
          }}
          onClose={() => setImageModalId(null)} />
      )}
    </div>
  );
}

Object.assign(window, {
  Icon, Flourish, Button, IconButton,
  EditableLine, EditableArea, AspectsEditor, Modal, ConfirmDelete,
  NotesSections,
  ICON_PATHS,
  renderableMarkdown,
});