import { getT, getTrail, getTutorials, tutorialsInYear } from "@/lib/content";
import type { Locale } from "@/lib/locales";

import styles from "./Trail.module.css";

/**
 * The public trail — the site's continuity argument, and the only one it is
 * allowed to make about how long Sulsys has been working.
 *
 * Sulsys's own "20 years" line is Sulsys's claim, and it stays gated until
 * Kujto confirms the wording. What RRYM can show instead is stronger anyway,
 * because the reader can check it: a Facebook page running since July 2012, a
 * tutorial channel opening in July 2016 and still carrying the 2022
 * hospitality series. Dates, not adjectives.
 *
 * Two safeguards are built in rather than remembered. Every row names a fact
 * id and the loader drops it if that fact is not verified, so the section
 * shrinks rather than lies. And the video counts are measured from
 * `tutorials/index.json` at build time, so the number on the page is the
 * number in the library — a count typed into copy would be true until the
 * first time someone edits the library, and then quietly false forever.
 */
export function Trail({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const trail = getTrail(locale);
  const tutorials = getTutorials();

  if (trail.entries.length === 0) return null;

  return (
    <div className={styles.root}>
      <p className={styles.lead}>{trail.lead}</p>

      <ol className={styles.list} aria-label={t("trail.aria")}>
        {trail.entries.map((entry) => {
          const count = entry.countsTutorials ? tutorialsInYear(tutorials, entry.year) : 0;
          return (
            <li key={`${entry.year}-${entry.label}`} className={styles.entry}>
              <p className={styles.year}>
                <span className={styles.tick} aria-hidden="true" />
                {entry.year}
              </p>
              <p className={styles.label}>{entry.label}</p>
              <p className={styles.note}>{entry.note}</p>
              {count > 0 ? <p className={styles.count}>{t("trail.videos", { n: count })}</p> : null}
            </li>
          );
        })}
      </ol>

      <p className={styles.source}>{trail.source}</p>
    </div>
  );
}