import { effect, h, signal } from '@ui-arch/frame';
import type { MentionItem, MentionsProps } from './types.js';

// 每个实例的 listbox id 前缀，保证 aria-activedescendant 唯一
let seq = 0;

/*** 取光标前的 @ 触发词（不含 @ 本身）：没有未闭合的 @ 片段时返回 null ***/
function tokenBefore(text: string, caret: number): string | null {
  const match = /@([^\s@]*)$/.exec(text.slice(0, caret));
  return match ? match[1] : null;
}

/*** 用选中的名字替换光标前的 @片段，返回替换后的全文与新光标位置 ***/
function applyPick(text: string, caret: number, name: string): { text: string; caret: number } {
  const head = text.slice(0, caret).replace(/@[^\s@]*$/, `@${name} `);
  return { text: head + text.slice(caret), caret: head.length };
}

/*** @提及输入：textarea 内键入 @ 弹候选，↑↓ 环形移动、Enter/Tab 选中、Esc 只收本层；弹层贴输入框下沿，选中按光标替换 @片段 ***/
export function mentions(props: MentionsProps): HTMLElement {
  const uid = `ua-mentions-${++seq}`;
  const items = props.items;
  const value = props.value ?? signal('');
  const open = signal(false); // 弹层开合
  const query = signal(''); // 当前 @ 后的过滤词
  const active = signal(0); // 高亮项下标
  const input = h('textarea', {
    class: 'ua-mentions-input',
    rows: String(props.rows ?? 3),
    placeholder: props.placeholder ?? '',
    'aria-autocomplete': 'list',
    'aria-controls': uid,
    'aria-expanded': 'false',
  }) as HTMLTextAreaElement;
  input.value = value();
  const list = h('div', { class: 'ua-mentions-pop', role: 'listbox', 'aria-label': '提及建议', id: uid });
  const wrap = h('div', { class: 'ua-mentions' }, input, list);

  // 候选：空过滤词给全量，否则按名字 / 关键词做包含匹配
  const filtered = (): MentionItem[] => (query()
    ? items.filter((it) => it.name.includes(query()) || (it.keywords ?? []).some((k) => k.includes(query())))
    : items);

  /*** 重绘弹层：同步显隐、高亮项与 aria-activedescendant（无候选时不开层） ***/
  const paint = (): void => {
    const shown = filtered();
    const visible = open() && shown.length > 0;
    wrap.classList.toggle('is-open', visible);
    input.setAttribute('aria-expanded', String(visible));
    list.replaceChildren(...shown.map((item, i) => h('div', {
      class: `ua-mentions-item${i === active() ? ' is-active' : ''}`,
      role: 'option',
      id: `${uid}-${i}`,
      'aria-selected': i === active() ? 'true' : 'false',
      onmousedown: (e: Event) => { e.preventDefault(); pick(item); }, // 阻止默认让 textarea 不失焦
    }, h('span', { class: 'ua-mentions-name' }, item.label),
    item.description ? h('span', { class: 'ua-mentions-desc' }, item.description) : null)));
    if (visible) input.setAttribute('aria-activedescendant', `${uid}-${active()}`);
    else input.removeAttribute('aria-activedescendant');
  };

  /*** 选中候选：替换光标前的 @片段、写回信号、光标落到插入文本之后 ***/
  const pick = (item: MentionItem): void => {
    const caret = input.selectionStart ?? input.value.length;
    const next = applyPick(input.value, caret, item.name);
    input.value = next.text;
    value(next.text);
    input.setSelectionRange(next.caret, next.caret);
    input.focus();
    open(false);
    query('');
    paint();
    props.onSelect?.(item);
  };

  input.addEventListener('input', () => {
    value(input.value);
    props.onInput?.(input.value);
    const token = tokenBefore(input.value, input.selectionStart ?? input.value.length);
    query(token ?? '');
    active(0); // 每次输入重新从第一项开始高亮
    open(token !== null);
    paint();
  });

  input.addEventListener('keydown', (e) => {
    if (!open()) return; // 未开层时所有按键交给浏览器
    const shown = filtered();
    if (e.key === 'Escape') {
      e.preventDefault();
      e.stopPropagation(); // 只收本层，不连带外层弹层
      open(false);
      paint();
      return;
    }
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault();
      active((active() + (e.key === 'ArrowDown' ? 1 : -1) + shown.length) % shown.length); // 环形移动
      paint();
      return;
    }
    if ((e.key === 'Enter' || e.key === 'Tab') && shown.length) {
      e.preventDefault();
      pick(shown[Math.min(active(), shown.length - 1)]);
    }
  });

  input.addEventListener('blur', () => { open(false); paint(); }); // 失焦收起
  effect(() => {
    const outer = value();
    if (outer !== input.value) input.value = outer; // 外部改信号时同步输入框
  });
  return wrap;
}