import { initStandardListPage } from '../core/app-grid-factory.js';
import { readPageConfig } from '../core/app-page-config.js';
import { warnOnce } from '../core/app-dom.js';
import { getAppBase, escapeHtml } from './app-list-utils.js';

const config = readPageConfig('search-index');
if (config) {
  const appBase = getAppBase();
  const gridSearch = config.gridSearch ?? null;
  const filterSchema = config.filterSchema ?? [];
  const labels = config.labels ?? {};

  const renderResult = (cell) => {
    const title = escapeHtml(cell?.title ?? '');
    const description = escapeHtml(cell?.description ?? '');
    const url = cell?.url ?? '#';
    const image = cell?.image ?? '';
    const icon = escapeHtml(cell?.icon ?? 'bi-search');
    const avatar = image
      ? `<img class="search-result-avatar" src="${image}" alt="" loading="lazy">`
      : `<span class="search-result-avatar-placeholder"><i class="bi ${icon}"></i></span>`;

    return gridjs.html(`
      <div class="search-result-row">
        ${avatar}
        <div class="search-result-content">
          <a class="search-result-title" href="${url}">${title}</a>
          ${description ? `<p class="search-result-desc">${description}</p>` : ''}
        </div>
      </div>
    `);
  };

  const renderType = (cell) => gridjs.html(`<span class="search-result-type">${escapeHtml(cell ?? '')}</span>`);

  const { gridConfig } = initStandardListPage({
    grid: {
      gridjs: window.gridjs,
      container: '#search-results-grid',
      dataUrl: 'search/data',
      appBase,
      columns: [
        {
          name: labels.result || 'Result',
          sort: false,
          formatter: (cell) => renderResult(cell),
        },
        {
          name: labels.type || 'Type',
          sort: false,
          formatter: (cell) => renderType(cell),
        },
      ],
      sortColumns: [null, null],
      paginationLimit: 10,
      language: config.gridLang ?? {},
      mapData: (data) => data.data.map((row) => [row, row.type]),
      search: gridSearch,
      filterSchema,
      urlSync: true,
    },
    filters: {
      mode: 'search-only',
    },
  });

  if (!gridConfig || !gridConfig.grid) {
    warnOnce('UI_INIT_FAIL', 'Search results grid init failed', { module: 'search-index', component: 'grid' });
  }
}