/* Overlays: command palette (fuzzy file finder), content search, context menu, toast */

const { ref, computed, onMounted, onUnmounted, watch, nextTick } = Vue;

// ---------------------------------------------------------------------------
// fuzzy(q, str) — verbatim port
// ---------------------------------------------------------------------------
function fuzzy(q, str) {
  q = q.toLowerCase(); const s = str.toLowerCase();
  let i = 0; const idx = [];
  for (let j = 0; j < s.length && i < q.length; j++) {
    if (s[j] === q[i]) { idx.push(j); i++; }
  }
  return i === q.length ? idx : null;
}

// ---------------------------------------------------------------------------
// Highlight — props: text, idx
// ---------------------------------------------------------------------------
const Highlight = {
  props: ['text', 'idx'],
  setup(props) {
    // Build an array of { ch, bold } for rendering
    const parts = computed(() => {
      const set = props.idx && props.idx.length ? new Set(props.idx) : null;
      return props.text.split('').map((ch, i) => ({ ch, bold: set ? set.has(i) : false }));
    });
    return { parts };
  },
  template: `
    <span>
      <template v-for="(p, i) in parts" :key="i">
        <b v-if="p.bold">{{ p.ch }}</b>
        <template v-else>{{ p.ch }}</template>
      </template>
    </span>
  `
};

// ---------------------------------------------------------------------------
// SearchModal — props: onOpen, onOpenAt, onClose, changeSet
// ---------------------------------------------------------------------------
const SearchModal = {
  props: ['onOpen', 'onOpenAt', 'onClose', 'changeSet'],
  setup(props) {
    const q = ref('');
    const sel = ref(0);
    const inputEl = ref(null);
    const leftEl = ref(null);

    // All paths — stable, PROJECT.files doesn't change at runtime
    const allPaths = computed(() => Object.keys(PROJECT.files));

    // Content hits (left panel) — substring search, min 2 chars
    const content = computed(() => {
      const term = q.value.trim();
      if (term.length < 2) return [];
      const low = term.toLowerCase();
      const groups = [];
      for (const [path, src] of Object.entries(PROJECT.files)) {
        const lines = src.split('\n');
        const hits = [];
        lines.forEach((ln, i) => {
          const ix = ln.toLowerCase().indexOf(low);
          if (ix >= 0) hits.push({ no: i + 1, ln, ix });
        });
        if (hits.length) groups.push({ path, hits });
      }
      return groups;
    });

    // File-name fuzzy matches (right panel)
    const files = computed(() => {
      const term = q.value.trim();
      if (!term) return [];
      const out = [];
      for (const p of allPaths.value) {
        const name = p.split('/').pop();
        const ni = fuzzy(term, name);
        if (ni) { out.push({ path: p, idx: ni, rank: 0, pos: ni[0] }); continue; }
        const pi = fuzzy(term, p);
        if (pi) out.push({ path: p, idx: null, rank: 1, pos: pi[0] });
      }
      out.sort((a, b) => a.rank - b.rank || a.pos - b.pos || a.path.length - b.path.length);
      return out;
    });

    // Flat list of content hits for keyboard nav + flat-index tracking
    // Each entry gets its flatIndex here so the template can use it directly
    const flat = computed(() => {
      const arr = [];
      content.value.forEach((g) => g.hits.forEach((h) => arr.push({ path: g.path, no: h.no })));
      return arr;
    });

    // Precomputed flat-index map: "path:lineNo" -> flatIndex
    // Used in template to assign .sel class without mutating during render
    const flatIndexMap = computed(() => {
      const map = {};
      let ix = 0;
      content.value.forEach((g) => {
        g.hits.slice(0, 12).forEach((h) => {
          map[`${g.path}:${h.no}`] = ix++;
        });
      });
      return map;
    });

    const totalHits = computed(() => flat.value.length);

    // Reset selection when query changes
    watch(q, () => { sel.value = 0; });

    // Scroll selected line into view when sel changes
    watch(sel, () => {
      nextTick(() => {
        const el = leftEl.value && leftEl.value.querySelector('.sr-line.sel');
        if (el) el.scrollIntoView({ block: 'nearest' });
      });
    });

    onMounted(() => { inputEl.value && inputEl.value.focus(); });

    function onKey(e) {
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        sel.value = Math.min(sel.value + 1, flat.value.length - 1);
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        sel.value = Math.max(sel.value - 1, 0);
      } else if (e.key === 'Enter') {
        e.preventDefault();
        if (flat.value[sel.value]) {
          props.onOpenAt(flat.value[sel.value].path, flat.value[sel.value].no);
          props.onClose();
        } else if (files.value[0]) {
          props.onOpen(files.value[0].path);
          props.onClose();
        }
      } else if (e.key === 'Escape') {
        e.preventDefault();
        props.onClose();
      }
    }

    // renderLine: returns { pre, mid, post } for a content line hit
    function renderLine(ln, ix, len) {
      return { pre: ln.slice(0, ix), mid: ln.slice(ix, ix + len), post: ln.slice(ix + len) };
    }

    return {
      q, sel, inputEl, leftEl,
      content, files, flat, flatIndexMap, totalHits,
      onKey, renderLine,
    };
  },
  template: `
    <div class="scrim" @mousedown="onClose">
      <div class="search-modal" @mousedown.stop>
        <div class="pi">
          <Icon name="search" :style="{ color: 'var(--fg-3)' }" />
          <input ref="inputEl" :value="q" @input="q = $event.target.value" @keydown="onKey"
            placeholder="Search content and file names…" :spellcheck="false" />
          <span class="mode-chip">{{ totalHits }} hit{{ totalHits === 1 ? '' : 's' }} · {{ files.length }} file{{ files.length === 1 ? '' : 's' }}</span>
        </div>
        <div class="search-cols">
          <div class="sc-left" ref="leftEl">
            <div class="sc-head">Content <span v-if="totalHits > 0" class="sc-ct">{{ totalHits }}</span></div>
            <div v-if="q.trim().length < 2" class="pempty">Type at least 2 characters</div>
            <div v-else-if="content.length === 0" class="pempty">No content matches</div>
            <template v-for="g in content" :key="g.path">
              <div class="sr-file" @click="onOpenAt(g.path, g.hits[0].no)">
                <FileIcon :path="g.path" />
                <span class="srf-name">{{ g.path }}</span>
                <span class="cnt">{{ g.hits.length }}</span>
              </div>
              <div v-for="h in g.hits.slice(0, 12)" :key="h.no"
                :class="'sr-line' + (flatIndexMap[g.path + ':' + h.no] === sel ? ' sel' : '')"
                @mouseenter="sel = flatIndexMap[g.path + ':' + h.no]"
                @click="onOpenAt(g.path, h.no); onClose()">
                <span class="no">{{ h.no }}</span>
                <span class="tx">{{ renderLine(h.ln, h.ix, q.trim().length).pre }}<mark>{{ renderLine(h.ln, h.ix, q.trim().length).mid }}</mark>{{ renderLine(h.ln, h.ix, q.trim().length).post }}</span>
              </div>
            </template>
          </div>
          <div class="sc-right">
            <div class="sc-head">Files <span v-if="files.length > 0" class="sc-ct">{{ files.length }}</span></div>
            <div v-if="!q.trim()" class="pempty sm">Start typing…</div>
            <div v-else-if="files.length === 0" class="pempty sm">No file names match</div>
            <div v-for="r in files.slice(0, 40)" :key="r.path" class="fres"
              @click="onOpen(r.path); onClose()" :title="r.path">
              <FileIcon :path="r.path" />
              <div class="fres-txt">
                <span class="fn"><Highlight :text="r.path.split('/').pop()" :idx="r.idx" /></span>
                <span v-if="r.path.split('/').slice(0,-1).join('/')" class="fd">{{ r.path.split('/').slice(0,-1).join('/') }}/</span>
              </div>
              <span v-if="changeSet.has(r.path)" class="tree-badge M" :style="{ fontFamily: 'var(--mono)', fontSize: '10px' }">•</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
};

// ---------------------------------------------------------------------------
// ContextMenu — props: menu, onClose
// ---------------------------------------------------------------------------
const ContextMenu = {
  props: ['menu', 'onClose'],
  setup(props) {
    const menuEl = ref(null);

    function outsideClick(e) {
      if (menuEl.value && !menuEl.value.contains(e.target)) props.onClose();
    }
    function escKey(e) {
      if (e.key === 'Escape') props.onClose();
    }

    onMounted(() => {
      document.addEventListener('mousedown', outsideClick);
      document.addEventListener('keydown', escKey);
    });
    onUnmounted(() => {
      document.removeEventListener('mousedown', outsideClick);
      document.removeEventListener('keydown', escKey);
    });

    const pos = computed(() => {
      if (!props.menu) return { x: 0, y: 0 };
      return {
        x: Math.min(props.menu.x, window.innerWidth - 270),
        y: Math.min(props.menu.y, window.innerHeight - (props.menu.items.length * 34 + 60)),
      };
    });

    return { menuEl, pos };
  },
  template: `
    <div v-if="menu" class="ctx" ref="menuEl" :style="{ left: pos.x + 'px', top: pos.y + 'px' }">
      <div v-if="menu.note" class="ctx-note">{{ menu.note }}</div>
      <template v-for="(it, i) in menu.items" :key="i">
        <div v-if="it.sep" class="ctx-sep" />
        <div v-else :class="'ctx-item' + (it.primary ? ' primary' : '')"
          @click="it.onClick(); onClose()">
          <span class="ic"><Icon :name="it.icon" /></span>
          <span>{{ it.label }}</span>
          <span v-if="it.kbd" class="kc">{{ it.kbd }}</span>
        </div>
      </template>
    </div>
  `
};

// ---------------------------------------------------------------------------
// Toasts — props: toasts
// ---------------------------------------------------------------------------
const Toasts = {
  props: ['toasts'],
  template: `
    <div class="toast-wrap">
      <div v-for="t in toasts" :key="t.id" class="toast">
        <Icon name="copy" :style="{ color: 'var(--accent)' }" />
        <span class="tt">{{ t.title }}</span>
        <span v-if="t.ref" class="tref">{{ t.ref }}</span>
      </div>
    </div>
  `
};

// ---------------------------------------------------------------------------
// PassPopup — props: x, y, refStr, onConfirm, onCancel
// ---------------------------------------------------------------------------
const PassPopup = {
  props: ['x', 'y', 'refStr', 'onConfirm', 'onCancel'],
  setup(props) {
    const text = ref('');
    const inputEl = ref(null);
    const boxEl = ref(null);

    onMounted(() => { inputEl.value && inputEl.value.focus(); });

    function outsideClick(e) {
      if (boxEl.value && !boxEl.value.contains(e.target)) props.onCancel();
    }
    // Capture phase — matches original's addEventListener(…, true)
    function escKey(e) {
      if (e.key === 'Escape') { e.preventDefault(); props.onCancel(); }
    }

    onMounted(() => {
      document.addEventListener('mousedown', outsideClick);
      document.addEventListener('keydown', escKey, true);
    });
    onUnmounted(() => {
      document.removeEventListener('mousedown', outsideClick);
      document.removeEventListener('keydown', escKey, true);
    });

    const left = computed(() => Math.min(props.x, window.innerWidth - 360));
    const top = computed(() => Math.min(props.y + 6, window.innerHeight - 150));

    const preview = computed(() => (text.value.trim() ? text.value.trim() + ' ' : '') + props.refStr);

    function onKeyDown(e) {
      if (e.key === 'Enter') { e.preventDefault(); props.onConfirm(text.value); }
      else if (e.key === 'Escape') { e.preventDefault(); props.onCancel(); }
    }

    return { text, inputEl, boxEl, left, top, preview, onKeyDown };
  },
  template: `
    <div class="pass-pop" ref="boxEl" :style="{ left: left + 'px', top: top + 'px' }">
      <div class="pass-head"><Icon name="spark" /><span>Pass on to Agent</span><span class="pass-esc">esc</span></div>
      <input ref="inputEl" class="pass-input" :value="text" :spellcheck="false"
        placeholder="Add a note (optional)…"
        @input="text = $event.target.value"
        @keydown="onKeyDown" />
      <div class="pass-preview"><span class="pp-lbl">inserts</span><code>{{ preview }}</code></div>
      <div class="pass-foot"><kbd>↵</kbd> insert into agent · <kbd>esc</kbd> cancel</div>
    </div>
  `
};

// ---------------------------------------------------------------------------
// Expose
// ---------------------------------------------------------------------------
window.HelderComponents = Object.assign(window.HelderComponents || {}, {
  Highlight, SearchModal, ContextMenu, Toasts, PassPopup,
});
window.fuzzy = fuzzy;