import { el, clear } from '../lib/dom.js';
import { loadSnapshot } from '../data/snapshot.js';
import { settings } from '../store/settings.js';
import { prettify } from '../data/pokedex-resolver.js';
import { Sprite } from '../components/Sprite.js';

export async function AbilityDetail(id) {
  const view = el('section', { class: 'view lookup' });
  const snap = await loadSnapshot();
  const a = snap.abilityById.get(id);

  if (!a) {
    view.append(
      el(
        'div',
        { class: 'view--error' },
        el('h1', {}, 'Unknown ability'),
        el('a', { class: 'button', href: '#/search' }, 'Back to lookup'),
      ),
    );
    return view;
  }

  const style = settings.get().spriteStyle;
  const vg = settings.get().versionGroup;
  const gen = snap.versionGroupByKey.get(vg)?.generation ?? 9;

  // All-games: every species with the ability. A specific game: only those
  // that existed by its generation.
  let mons = a.pokemon.map((pid) => snap.speciesById.get(pid)).filter(Boolean);
  if (vg !== 'all') mons = mons.filter((sp) => sp.generation <= gen);
  mons.sort((x, y) => x.id - y.id);

  const CAP = 400;
  const grid = el('div', { class: 'ab-mons' });
  function paint(q) {
    const qq = (q || '').trim().toLowerCase().replace(/\s+/g, '-');
    const shown = qq ? mons.filter((sp) => sp.name.includes(qq)) : mons;
    clear(grid);
    if (!shown.length) {
      grid.append(el('p', { class: 'detail__muted' }, 'No matches.'));
      return;
    }
    for (const sp of shown.slice(0, CAP)) {
      grid.append(
        el(
          'a',
          { class: 'ab-mon', href: `#/pokemon/${sp.id}` },
          Sprite(sp.id, { style, alt: sp.name, size: 48 }),
          el('span', {}, sp.name.replace(/-/g, ' ')),
        ),
      );
    }
    if (shown.length > CAP) {
      grid.append(
        el('p', { class: 'detail__muted' }, `+${shown.length - CAP} more — filter to narrow.`),
      );
    }
  }
  paint('');
  const filterInput = el('input', {
    type: 'search',
    class: 'search__input learners__filter',
    placeholder: 'Filter Pokémon…',
    oninput: (e) => paint(e.target.value),
  });

  const predatesGame = vg !== 'all' && a.generation > gen;

  clear(view).append(
    el('nav', { class: 'lookup__nav' }, el('a', { class: 'link', href: '#/search' }, '‹ Lookup')),
    el(
      'header',
      { class: 'lookup__head lookup__head--item' },
      el(
        'div',
        {},
        el('h1', {}, a.name.replace(/-/g, ' ')),
        el('span', { class: 'lookup__class' }, `Introduced Gen ${a.generation}`),
      ),
    ),
    el(
      'section',
      { class: 'detail__section' },
      el('h2', {}, 'Effect'),
      el('p', {}, a.effect || 'No description available.'),
    ),
    el(
      'section',
      { class: 'detail__section' },
      el(
        'h2',
        {},
        `Pokémon with this ability${vg === 'all' ? '' : ` in ${prettify(vg)}`} (${mons.length})`,
      ),
      predatesGame
        ? el(
            'p',
            { class: 'detail__muted' },
            `Not in ${prettify(vg)} — this ability was introduced in Gen ${a.generation}.`,
          )
        : null,
      mons.length > 24 ? filterInput : null,
      mons.length
        ? grid
        : el('p', { class: 'detail__muted' }, 'None on record.'),
    ),
  );
  return view;
}