import { html, useMemo } from './vendor/htm-preact.js';
import { t } from './i18n.js';
import { Icon } from './icon.js';
import { formatSize } from './file-utils.js';

/**
 * The smallest application this platform can host, and the proof that adding
 * one costs nothing outside its own two files.
 *
 * Everything else in `docs/refactor-groups.md` §3 is asserted by tests that
 * read source. This is the other kind of evidence: an app nobody wrote a line
 * of plumbing for, that stores directories, appears as a tab, and lists files —
 * because the registry entry beside it is genuinely all there is.
 *
 * **Not shipped to operators.** It is registered with `dev: true`, which keeps
 * it out of the tab bar and the settings page unless the reader opts in with
 * `?dev=1` (same shape as transport.js's `?trace=1`). Deleting the flag would
 * put a toy app in everybody's group; deleting the app would leave the claim
 * resting entirely on tests that read text.
 *
 * It takes the standard props — see `docs/apps.md` §2 — and reads
 * `helloworldDirectories`, which nothing on the node knows about by name:
 * `ops.set_app_directories` keys the row by whatever the app is called.
 */
function HelloWorldApp({ entries, availableEntries, helloworldDirectories, status }) {
  const dirs = helloworldDirectories || [];
  const pool = availableEntries || entries || [];

  const files = useMemo(() => pool.filter((e) => {
    const p = e.path || '';
    return dirs.some((d) => p === d || p.startsWith(d + '/'));
  }).slice(0, 200), [pool, dirs]);

  if (status !== 'connected') {
    return html`<p class="page-message">${t('status.connecting_short')}</p>`;
  }

  return html`
    <div class="page-content">
      <h2>${t('helloworld.greeting')}</h2>
      ${dirs.length === 0 ? html`
        <p class="page-message">${t('helloworld.no_directory')}</p>
      ` : html`
        <p class="settings-hint">
          ${t('helloworld.counted', { n: files.length })}
          ${' — '}${dirs.join(', ')}
        </p>
        <ul class="hw-list">
          ${files.map((e) => html`
            <li key=${e.id} class="hw-item">
              <${Icon} name="folder" />
              <span class="hw-name">${e.name}</span>
              <span class="hw-size">${formatSize(e.size || 0)}</span>
            </li>
          `)}
        </ul>
      `}
    </div>
  `;
}

export { HelloWorldApp };