import { el, clear } from '../lib/dom.js';
import { loadSnapshot } from '../data/snapshot.js';
import { settings } from '../store/settings.js';
import { Sprite } from './Sprite.js';
import { TypeChip } from './TypeChip.js';
import { dragToClose } from '../lib/sheet-drag.js';

let openInstance = null;

/**
 * A summonable overlay to pick a Pokémon from the full snapshot list.
 * `onPick(id)` fires per selection; the sheet stays open so you can add
 * several. Dismiss with the backdrop, ✕, or Escape.
 */
export async function openPokemonPicker(onPick, { closeAfterPick = false } = {}) {
  if (openInstance) return;
  const snap = await loadSnapshot();

  const backdrop = el('div', {
    class: 'sheet-backdrop',
    onclick: (e) => {
      if (e.target === backdrop) close();
    },
  });
  const panel = el('div', {
    class: 'gsheet',
    role: 'dialog',
    'aria-modal': 'true',
    'aria-label': 'Add a Pokémon',
  });

  const onKey = (e) => {
    if (e.key === 'Escape') close();
  };
  function close() {
    document.removeEventListener('keydown', onKey);
    backdrop.classList.remove('is-open');
    setTimeout(() => {
      backdrop.remove();
      openInstance = null;
    }, 220);
  }

  const results = el('div', { class: 'picker__list' });
  const input = el('input', {
    class: 'search__input',
    type: 'search',
    placeholder: 'Name, number or type…',
    autofocus: true,
    oninput: (e) => run(e.target.value),
  });

  function run(raw) {
    const q = raw.trim().toLowerCase();
    clear(results);
    if (!q) return;
    const style = settings.get().spriteStyle;
    const matches = snap.species
      .filter(
        (s) =>
          s.name.replace(/-/g, ' ').includes(q) ||
          String(s.id) === q ||
          (s.types || []).some((t) => t === q),
      )
      .slice(0, 50);
    for (const s of matches) {
      results.append(
        el(
          'button',
          {
            class: 'picker__row',
            type: 'button',
            onclick: () => {
              onPick(s.id);
              if (closeAfterPick) close();
            },
          },
          Sprite(s.id, { style, alt: s.name, size: 44 }),
          el('span', { class: 'search__num' }, `#${String(s.id).padStart(4, '0')}`),
          el('span', { class: 'search__name' }, s.name.replace(/-/g, ' ')),
          el('span', { class: 'search__types' }, ...(s.types || []).map(TypeChip)),
        ),
      );
    }
  }

  const head = el(
    'div',
    { class: 'gsheet__head' },
    el('h2', {}, 'Add a Pokémon'),
    el(
      'button',
      { class: 'gsheet__close', type: 'button', 'aria-label': 'Close', onclick: close },
      '✕',
    ),
  );
  dragToClose(panel, head, close);
  panel.append(head, input, results);
  backdrop.append(panel);
  document.body.append(backdrop);
  document.addEventListener('keydown', onKey);
  openInstance = backdrop;
  requestAnimationFrame(() => backdrop.classList.add('is-open'));
}