/* ObsiGate — Native mobile editor UX (ROADMAP #69)
 *
 * Tactile-optimised editing experience, split in three areas:
 *   1. Editor  — floating Markdown toolbar (bold/italic/code/list/link),
 *                persistent "Paste" button (iOS clipboard workaround),
 *                pinch-zoom font size and adjustable editor height.
 *   2. Viewer  — swipe shortcuts (left → backlinks, right → table of contents)
 *                and a distraction-free reading mode with horizontal page
 *                navigation.
 *
 * The pure helpers at the top are exported for unit testing (JSDOM).
 * All UI wiring happens in initMobileEditor(), called once from app.js.
 */
import { state } from './state.js';
import { t } from './i18n.js';

// ── Constants ──────────────────────────────────────────────────────────────
export const FORMAT_ACTIONS = ['bold', 'italic', 'code', 'list', 'link'];
export const SWIPE_THRESHOLD = 60;
export const MIN_EDITOR_FONT = 10;
export const MAX_EDITOR_FONT = 28;
export const DEFAULT_EDITOR_FONT = 13.5;
export const MIN_EDITOR_HEIGHT = 140;

const FONT_KEY = 'obsigate-editor-font-size';
const HEIGHT_KEY = 'obsigate-editor-height';
const READING_KEY = 'obsigate-reading-mode';

// ── Pure helpers (unit tested) ─────────────────────────────────────────────

/** Clamp a font size to the supported range; non-numeric falls back to 13.5. */
export function clampZoom(value, min = MIN_EDITOR_FONT, max = MAX_EDITOR_FONT) {
  const n = Number(value);
  if (!Number.isFinite(n)) return DEFAULT_EDITOR_FONT;
  return Math.min(max, Math.max(min, n));
}

/** Detect a horizontal swipe from a delta. Returns 'left' | 'right' | null. */
export function detectSwipe(dx, dy, threshold = SWIPE_THRESHOLD) {
  if (Math.abs(dx) < threshold) return null;
  if (Math.abs(dy) > Math.abs(dx)) return null;
  return dx < 0 ? 'left' : 'right';
}

/**
 * Compute the text change produced by a Markdown formatting action.
 *
 * @param {string} text   Full document text.
 * @param {number} from   Selection start.
 * @param {number} to     Selection end.
 * @param {string} action One of FORMAT_ACTIONS.
 * @returns {{changes:{from:number,to:number,insert:string},selection:{anchor:number,head:number}}|null}
 */
export function formatChange(text, from, to, action) {
  const selected = text.slice(from, to);

  const wrap = (marker) => {
    // Toggle off when the selection already carries the markers.
    if (
      selected.length >= marker.length * 2 &&
      selected.startsWith(marker) &&
      selected.endsWith(marker)
    ) {
      const inner = selected.slice(marker.length, -marker.length);
      return {
        changes: { from, to, insert: inner },
        selection: { anchor: from, head: from + inner.length },
      };
    }
    const insert = marker + selected + marker;
    return {
      changes: { from, to, insert },
      selection: { anchor: from + marker.length, head: to + marker.length },
    };
  };

  switch (action) {
    case 'bold':
      return wrap('**');
    case 'italic':
      return wrap('*');
    case 'code':
      return wrap('`');
    case 'list': {
      const lineStart = text.lastIndexOf('\n', from - 1) + 1;
      let lineEnd = text.indexOf('\n', to);
      if (lineEnd === -1) lineEnd = text.length;
      const block = text.slice(lineStart, lineEnd);
      const lines = block.split('\n');
      const allList = lines.every((l) => l.startsWith('- '));
      const prefixed = lines
        .map((l) => (allList ? l.replace(/^- /, '') : l.startsWith('- ') ? l : '- ' + l))
        .join('\n');
      return {
        changes: { from: lineStart, to: lineEnd, insert: prefixed },
        selection: { anchor: lineStart, head: lineStart + prefixed.length },
      };
    }
    case 'link': {
      const insert = `[${selected}](url)`;
      const urlStart = from + 1 + selected.length + 2;
      return {
        changes: { from, to, insert },
        selection: { anchor: urlStart, head: urlStart + 3 },
      };
    }
    default:
      return null;
  }
}

/** Build a plain insertion change (used by the paste helper). */
export function insertText(from, to, insert) {
  return {
    changes: { from, to, insert },
    selection: { anchor: from + insert.length, head: from + insert.length },
  };
}

/** Apply a formatting action to a CodeMirror EditorView. */
export function applyFormatToView(view, action) {
  if (!view || !view.state) return false;
  const { from, to } = view.state.selection.main;
  const change = formatChange(view.state.doc.toString(), from, to, action);
  if (!change) return false;
  view.dispatch({ changes: change.changes, selection: change.selection });
  if (typeof view.focus === 'function') view.focus();
  return true;
}

/** Apply a formatting action to a plain textarea fallback editor. */
export function applyFormatToTextarea(ta, action) {
  if (!ta) return false;
  const change = formatChange(ta.value, ta.selectionStart, ta.selectionEnd, action);
  if (!change) return false;
  const { from, to, insert } = change.changes;
  ta.value = ta.value.slice(0, from) + insert + ta.value.slice(to);
  if (typeof ta.focus === 'function') ta.focus();
  ta.selectionStart = change.selection.anchor;
  ta.selectionEnd = change.selection.head;
  return true;
}

// ── Runtime helpers ────────────────────────────────────────────────────────

let _initialized = false;

function isMobileViewport() {
  if (typeof window === 'undefined') return false;
  if (window.matchMedia) return window.matchMedia('(max-width: 768px)').matches;
  return window.innerWidth <= 768;
}

async function showToastSafe(message, type) {
  try {
    const ui = await import('./ui.js');
    if (ui && typeof ui.showToast === 'function') ui.showToast(message, type);
  } catch (_) {
    /* UI module unavailable (tests) — silent */
  }
}

function currentEditorFontSize() {
  try {
    const saved = parseFloat(localStorage.getItem(FONT_KEY));
    if (Number.isFinite(saved)) return clampZoom(saved);
  } catch (_) {
    /* ignore */
  }
  return DEFAULT_EDITOR_FONT;
}

/** Apply a font size to every CodeMirror scroller + fallback textarea. */
export function applyEditorFontSize(size) {
  const s = clampZoom(size);
  try {
    localStorage.setItem(FONT_KEY, String(s));
  } catch (_) {
    /* ignore */
  }
  const px = s + 'px';
  document.querySelectorAll('.cm-editor .cm-scroller').forEach((el) => {
    if (el.style.fontSize !== px) el.style.fontSize = px;
  });
  if (state.fallbackEditorEl) state.fallbackEditorEl.style.fontSize = px;
  return s;
}

function bumpFontSize(delta) {
  return applyEditorFontSize(currentEditorFontSize() + delta);
}

// ── Formatting toolbar + clipboard ─────────────────────────────────────────

function handleFormat(action) {
  if (state.editorView) {
    applyFormatToView(state.editorView, action);
  } else if (state.fallbackEditorEl) {
    applyFormatToTextarea(state.fallbackEditorEl, action);
  }
}

async function handlePaste() {
  let text = '';
  try {
    if (navigator.clipboard && navigator.clipboard.readText) {
      text = await navigator.clipboard.readText();
    }
  } catch (_) {
    // iOS Safari / permission denied — fall through to the hint.
  }
  if (!text) {
    showToastSafe(t('mobile_editor.paste_hint'), 'info');
    return;
  }
  if (state.editorView) {
    const { from, to } = state.editorView.state.selection.main;
    const change = insertText(from, to, text);
    state.editorView.dispatch({ changes: change.changes, selection: change.selection });
    if (typeof state.editorView.focus === 'function') state.editorView.focus();
  } else if (state.fallbackEditorEl) {
    const ta = state.fallbackEditorEl;
    const from = ta.selectionStart;
    const to = ta.selectionEnd;
    ta.value = ta.value.slice(0, from) + text + ta.value.slice(to);
    ta.focus();
    ta.selectionStart = ta.selectionEnd = from + text.length;
  }
}

function makeButton(id, label, title, onClick) {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.id = id;
  btn.className = 'me-btn';
  btn.title = title;
  btn.setAttribute('aria-label', title);
  btn.textContent = label;
  btn.addEventListener('click', onClick);
  return btn;
}

function buildFormattingToolbar() {
  const modal = document.getElementById('editor-modal');
  if (!modal || document.getElementById('me-toolbar')) return;

  const bar = document.createElement('div');
  bar.id = 'me-toolbar';
  bar.className = 'me-toolbar';
  bar.setAttribute('role', 'toolbar');
  bar.setAttribute('aria-label', t('mobile_editor.toolbar'));

  const formats = [
    { action: 'bold', label: 'B', title: t('mobile_editor.bold') },
    { action: 'italic', label: 'I', title: t('mobile_editor.italic') },
    { action: 'code', label: '<>', title: t('mobile_editor.code') },
    { action: 'list', label: '•', title: t('mobile_editor.list') },
    { action: 'link', label: '🔗', title: t('mobile_editor.link') },
  ];
  formats.forEach((f) => {
    const btn = makeButton('me-fmt-' + f.action, f.label, f.title, () => handleFormat(f.action));
    btn.dataset.action = f.action;
    btn.classList.add('me-btn-format');
    bar.appendChild(btn);
  });

  const sep = document.createElement('span');
  sep.className = 'me-sep';
  bar.appendChild(sep);

  bar.appendChild(
    makeButton('me-font-minus', 'A−', t('mobile_editor.font_smaller'), () => bumpFontSize(-1)),
  );
  bar.appendChild(
    makeButton('me-font-plus', 'A+', t('mobile_editor.font_larger'), () => bumpFontSize(1)),
  );

  const sep2 = document.createElement('span');
  sep2.className = 'me-sep';
  bar.appendChild(sep2);

  const pasteBtn = makeButton('me-paste', '📋', t('mobile_editor.paste'), handlePaste);
  pasteBtn.classList.add('me-btn-paste');
  bar.appendChild(pasteBtn);

  modal.appendChild(bar);
}

// ── Editor height resize + pinch zoom ──────────────────────────────────────

function applySavedHeight(bodyEl) {
  if (!isMobileViewport()) return;
  try {
    const saved = parseInt(localStorage.getItem(HEIGHT_KEY), 10);
    if (Number.isFinite(saved) && saved >= MIN_EDITOR_HEIGHT) {
      bodyEl.style.flex = '0 0 ' + saved + 'px';
      bodyEl.style.height = saved + 'px';
    }
  } catch (_) {
    /* ignore */
  }
}

function initHeightResize(bodyEl) {
  if (!bodyEl || document.getElementById('me-resize-handle')) return;
  const handle = document.createElement('div');
  handle.id = 'me-resize-handle';
  handle.className = 'me-resize-handle';
  handle.setAttribute('role', 'separator');
  handle.setAttribute('aria-orientation', 'horizontal');
  handle.title = t('mobile_editor.resize');
  (bodyEl.parentElement || bodyEl).insertBefore(handle, bodyEl.nextSibling);

  let dragging = false;
  let startY = 0;
  let startH = 0;

  handle.addEventListener('pointerdown', (e) => {
    dragging = true;
    startY = e.clientY;
    startH = bodyEl.getBoundingClientRect().height;
    if (handle.setPointerCapture) {
      try {
        handle.setPointerCapture(e.pointerId);
      } catch (_) {
        /* ignore */
      }
    }
    e.preventDefault();
  });
  handle.addEventListener('pointermove', (e) => {
    if (!dragging) return;
    const maxH = Math.max(MIN_EDITOR_HEIGHT, (window.innerHeight || 800) - 140);
    const h = Math.min(maxH, Math.max(MIN_EDITOR_HEIGHT, startH + (e.clientY - startY)));
    bodyEl.style.flex = '0 0 ' + h + 'px';
    bodyEl.style.height = h + 'px';
  });
  const stop = () => {
    if (!dragging) return;
    dragging = false;
    try {
      localStorage.setItem(HEIGHT_KEY, String(Math.round(bodyEl.getBoundingClientRect().height)));
    } catch (_) {
      /* ignore */
    }
  };
  handle.addEventListener('pointerup', stop);
  handle.addEventListener('pointercancel', stop);
}

function initPinchZoom(bodyEl) {
  if (!bodyEl) return;
  let startDist = 0;
  let startSize = 0;
  const distance = (touches) =>
    Math.hypot(
      touches[0].clientX - touches[1].clientX,
      touches[0].clientY - touches[1].clientY,
    );

  bodyEl.addEventListener(
    'touchstart',
    (e) => {
      if (e.touches.length === 2) {
        startDist = distance(e.touches);
        startSize = currentEditorFontSize();
      }
    },
    { passive: true },
  );
  bodyEl.addEventListener(
    'touchmove',
    (e) => {
      if (e.touches.length === 2 && startDist > 0) {
        applyEditorFontSize(startSize * (distance(e.touches) / startDist));
        if (e.cancelable) e.preventDefault();
      }
    },
    { passive: false },
  );
  bodyEl.addEventListener('touchend', () => {
    startDist = 0;
  });
}

// ── Bottom sheet (backlinks / TOC) ─────────────────────────────────────────

function ensureSheet() {
  let sheet = document.getElementById('me-sheet');
  if (sheet) return sheet;

  sheet = document.createElement('div');
  sheet.id = 'me-sheet';
  sheet.className = 'me-sheet';
  sheet.setAttribute('role', 'dialog');
  sheet.setAttribute('aria-modal', 'true');

  const handle = document.createElement('div');
  handle.className = 'me-sheet-handle';

  const header = document.createElement('div');
  header.className = 'me-sheet-header';
  const title = document.createElement('span');
  title.className = 'me-sheet-title';
  const close = document.createElement('button');
  close.type = 'button';
  close.className = 'me-sheet-close';
  close.textContent = '✕';
  close.setAttribute('aria-label', t('mobile_editor.close'));
  header.appendChild(title);
  header.appendChild(close);

  const list = document.createElement('div');
  list.className = 'me-sheet-list';

  sheet.appendChild(handle);
  sheet.appendChild(header);
  sheet.appendChild(list);

  const overlay = document.createElement('div');
  overlay.id = 'me-sheet-overlay';
  overlay.className = 'me-sheet-overlay';

  document.body.appendChild(overlay);
  document.body.appendChild(sheet);

  close.addEventListener('click', () => closeSheet(sheet));
  overlay.addEventListener('click', () => closeSheet(sheet));
  return sheet;
}

function openSheet(sheet) {
  sheet.classList.add('open');
  const overlay = document.getElementById('me-sheet-overlay');
  if (overlay) overlay.classList.add('visible');
}

function closeSheet(sheet) {
  if (sheet) sheet.classList.remove('open');
  const overlay = document.getElementById('me-sheet-overlay');
  if (overlay) overlay.classList.remove('visible');
}

function renderSheetItems(sheet, items, emptyLabel) {
  const list = sheet.querySelector('.me-sheet-list');
  if (!list) return;
  list.innerHTML = '';
  if (!items.length) {
    const empty = document.createElement('div');
    empty.className = 'me-sheet-empty';
    empty.textContent = emptyLabel;
    list.appendChild(empty);
    return;
  }
  items.forEach((item) => {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'me-sheet-item';
    btn.textContent = item.label;
    btn.addEventListener('click', item.onClick);
    list.appendChild(btn);
  });
}

async function openBacklinksSheet() {
  const vault = state.currentVault;
  const path = state.currentPath;
  if (!vault || !path) return;
  const sheet = ensureSheet();
  sheet.querySelector('.me-sheet-title').textContent = t('mobile_editor.backlinks');
  openSheet(sheet);
  renderSheetItems(sheet, [], t('mobile_editor.loading'));
  try {
    const { api } = await import('./auth.js');
    const data = await api(
      `/api/file/${encodeURIComponent(vault)}/backlinks?path=${encodeURIComponent(path)}`,
    );
    const backlinks = data.backlinks || [];
    renderSheetItems(
      sheet,
      backlinks.map((bl) => ({
        label: bl.title || bl.path.split('/').pop().replace(/\.md$/i, ''),
        onClick: async () => {
          closeSheet(sheet);
          if (window.TabManager && typeof window.TabManager.openPreview === 'function') {
            window.TabManager.openPreview(bl.vault, bl.path);
          } else {
            const viewer = await import('./viewer.js');
            viewer.openFile(bl.vault, bl.path);
          }
        },
      })),
      t('mobile_editor.no_backlinks'),
    );
  } catch (_) {
    renderSheetItems(sheet, [], t('mobile_editor.error'));
  }
}

function openTocSheet() {
  const sheet = ensureSheet();
  sheet.querySelector('.me-sheet-title').textContent = t('mobile_editor.toc');
  const headings = state.headingsCache || [];
  renderSheetItems(
    sheet,
    headings.map((h) => ({
      label: h.text,
      onClick: () => {
        closeSheet(sheet);
        const target = document.getElementById(h.id);
        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      },
    })),
    t('mobile_editor.no_headings'),
  );
  openSheet(sheet);
}

// ── Reading mode + page navigation ─────────────────────────────────────────

export function isReadingMode() {
  return document.body.classList.contains('reading-mode');
}

export function toggleReadingMode(force) {
  const on = typeof force === 'boolean' ? force : !isReadingMode();
  document.body.classList.toggle('reading-mode', on);
  const btn = document.getElementById('me-reading-btn');
  if (btn) btn.setAttribute('aria-pressed', String(on));
  try {
    localStorage.setItem(READING_KEY, on ? '1' : '0');
  } catch (_) {
    /* ignore */
  }
  try {
    if (on) {
      if (document.documentElement.requestFullscreen) {
        const p = document.documentElement.requestFullscreen();
        if (p && typeof p.catch === 'function') p.catch(() => {});
      }
    } else if (document.fullscreenElement && document.exitFullscreen) {
      const p = document.exitFullscreen();
      if (p && typeof p.catch === 'function') p.catch(() => {});
    }
  } catch (_) {
    /* Fullscreen unsupported (iOS) — CSS reading mode still applies. */
  }
  return on;
}

async function navigateAdjacentFile(direction) {
  const vault = state.currentVault;
  const path = state.currentPath;
  if (!vault || !path) return;
  const dir = path.includes('/') ? path.slice(0, path.lastIndexOf('/')) : '';
  try {
    const { api } = await import('./auth.js');
    const data = await api(
      `/api/vault/${encodeURIComponent(vault)}/files?dir=${encodeURIComponent(dir)}&recursive=false&limit=500`,
    );
    const files = (data.files || [])
      .filter((f) => /\.md$/i.test(f.path))
      .sort((a, b) => a.path.localeCompare(b.path));
    const idx = files.findIndex((f) => f.path === path);
    if (idx === -1) return;
    const next = files[idx + (direction > 0 ? 1 : -1)];
    if (!next) {
      showToastSafe(
        direction > 0 ? t('mobile_editor.no_next') : t('mobile_editor.no_prev'),
        'info',
      );
      return;
    }
    const viewer = await import('./viewer.js');
    viewer.openFile(vault, next.path);
  } catch (_) {
    /* network / offline — silent */
  }
}

function buildReadingControls() {
  if (document.getElementById('me-reading-btn')) return;
  const enter = document.createElement('button');
  enter.id = 'me-reading-btn';
  enter.type = 'button';
  enter.className = 'me-reading-btn';
  enter.title = t('mobile_editor.reading_enter');
  enter.setAttribute('aria-label', t('mobile_editor.reading_enter'));
  enter.setAttribute('aria-pressed', String(isReadingMode()));
  enter.textContent = '📖';
  enter.addEventListener('click', () => toggleReadingMode(true));

  const exit = document.createElement('button');
  exit.id = 'me-reading-exit';
  exit.type = 'button';
  exit.className = 'me-reading-exit';
  exit.title = t('mobile_editor.reading_exit');
  exit.setAttribute('aria-label', t('mobile_editor.reading_exit'));
  exit.textContent = '✕';
  exit.addEventListener('click', () => toggleReadingMode(false));

  document.body.appendChild(enter);
  document.body.appendChild(exit);
}

/** True when the BooksLM assistant panel is expanded on screen. */
function isAssistantOpen() {
  const panel = document.querySelector('.bookslm-panel');
  return !!(panel && panel.classList.contains('open') && !panel.classList.contains('hidden'));
}

/**
 * Show the floating reading-mode button only while a file is open and the
 * assistant panel is closed. Without this guard the button floats above the
 * full-screen mobile assistant and covers its send button.
 *
 * Called on init, whenever the content area changes and when the assistant
 * opens/closes.
 */
export function updateReadingButtonVisibility() {
  const btn = document.getElementById('me-reading-btn');
  if (!btn) return;
  const fileOpen = !!state.currentPath;
  btn.hidden = !fileOpen || isAssistantOpen();
}

// ── Swipe gestures ─────────────────────────────────────────────────────────

function initSwipeGestures() {
  const area = document.getElementById('content-area');
  if (!area || area.dataset.meSwipe === '1') return;
  area.dataset.meSwipe = '1';

  let startX = 0;
  let startY = 0;
  let tracking = false;

  area.addEventListener(
    'touchstart',
    (e) => {
      if (e.touches.length !== 1) {
        tracking = false;
        return;
      }
      tracking = true;
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
    },
    { passive: true },
  );

  area.addEventListener(
    'touchend',
    (e) => {
      if (!tracking) return;
      tracking = false;
      const touch = e.changedTouches[0];
      if (!touch) return;
      const direction = detectSwipe(touch.clientX - startX, touch.clientY - startY);
      if (!direction) return;
      if (isReadingMode()) {
        navigateAdjacentFile(direction === 'left' ? 1 : -1);
      } else if (direction === 'left') {
        openBacklinksSheet();
      } else {
        openTocSheet();
      }
    },
    { passive: true },
  );
}

// ── Init ───────────────────────────────────────────────────────────────────

export function initMobileEditor() {
  if (_initialized) return;
  _initialized = true;

  buildFormattingToolbar();
  buildReadingControls();
  initSwipeGestures();

  // Keep the reading button in sync with the current view: visible only when
  // a file is open and the assistant is closed.
  updateReadingButtonVisibility();
  document.addEventListener('bookslm:opened', updateReadingButtonVisibility);
  document.addEventListener('bookslm:closed', updateReadingButtonVisibility);
  const readingArea = document.getElementById('content-area');
  if (readingArea && typeof MutationObserver !== 'undefined') {
    new MutationObserver(updateReadingButtonVisibility).observe(readingArea, {
      childList: true,
      subtree: true,
    });
  }

  const bodyEl = document.getElementById('editor-body');
  if (bodyEl) {
    initPinchZoom(bodyEl);
    initHeightResize(bodyEl);

    const modal = document.getElementById('editor-modal');
    if (modal && typeof MutationObserver !== 'undefined') {
      const observer = new MutationObserver(() => {
        if (modal.classList.contains('active')) {
          applyEditorFontSize(currentEditorFontSize());
          applySavedHeight(bodyEl);
        }
      });
      observer.observe(modal, { attributes: true, attributeFilter: ['class'] });

      // CodeMirror is recreated on every openEditor()/file switch — re-apply the
      // persisted zoom whenever a new scroller is inserted. Observe direct
      // children only so per-keystroke DOM mutations don't retrigger this.
      const bodyObserver = new MutationObserver(() => {
        if (bodyEl.querySelector('.cm-editor .cm-scroller')) {
          applyEditorFontSize(currentEditorFontSize());
        }
      });
      bodyObserver.observe(bodyEl, { childList: true });
    }
  }

  // Keep the reading-mode class in sync when the user exits fullscreen (ESC).
  document.addEventListener('fullscreenchange', () => {
    if (!document.fullscreenElement && isReadingMode()) {
      document.body.classList.remove('reading-mode');
      try {
        localStorage.setItem(READING_KEY, '0');
      } catch (_) {
        /* ignore */
      }
    }
  });

  // Restore a previous reading-mode session on reload (mobile only).
  try {
    if (isMobileViewport() && localStorage.getItem(READING_KEY) === '1') {
      document.body.classList.add('reading-mode');
    }
  } catch (_) {
    /* ignore */
  }
}

export { isMobileViewport };