import { config } from '../config.ts';
import type { PlatformSpec } from '../platforms/types.ts';
import { html } from './html.ts';
import { badge, layout } from './layout.ts';

/**
 * There is no useful landing page for a redirect target, so this is the
 * reference card instead: which prefixes exist, and the rewrite rules to
 * paste into StopTheMadness.
 */
export function renderIndex(platforms: readonly PlatformSpec[]): string {
  const origin = config.publicOrigin;

  const body = html`<article class="post post--index">
    <h1 class="index__title">antisocial</h1>
    <p class="index__lede">
      Point StopTheMadness at these and shared links open here instead of in an app.
    </p>
    <table class="index__table">
      <thead>
        <tr><th>Platform</th><th>Matches</th><th>Rewrites to</th></tr>
      </thead>
      <tbody>
        ${platforms.map(
          (p) => html`<tr>
            <td>${badge(p.id, p.label)}</td>
            <td><code>${p.canonicalHost}</code></td>
            <td><code>${origin}/${p.prefix}/…</code></td>
          </tr>`,
        )}
      </tbody>
    </table>
    <section class="picker" hidden>
      <label class="picker__label" for="open-in">Open original links in</label>
      <select class="picker__select" id="open-in"></select>
      <p class="picker__note">
        The rewrite rules catch the original link too, so in Safari “Open on …” comes
        straight back here. Another browser is a way out of that. Kept on this device.
      </p>
    </section>
  </article>`;

  return layout('antisocial', body);
}