import Link from "next/link";
import type { CSSProperties } from "react";

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

import { getModules, getSectors, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href, MODULES } from "@/lib/routes";

/**
 * THE FOUR LANES.
 *
 * Nexys as four kinds of business day, one under the other, each a full-width
 * band with its own ruling. A lane is not a card: it is a document silhouette
 * — the ledger's rule pairs, the delivery note's numbered lines, the payslip's
 * grid, the table map's cells — beside the product's name, its one verified
 * sentence and who it is for. The silhouettes are structure, not pictures of
 * software: they draw the *shape* of what each module produces, with nothing
 * in them that could be mistaken for a screen.
 *
 * The ruling draws once when the chapter enters, and that is the lane's whole
 * motion. The silhouette is `aria-hidden`; everything it says, the text says.
 */
export function Lanes({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const modules = getModules(locale);
  const sectors = getSectors(locale);

  return (
    <ol className={styles.lanes}>
      {MODULES.map((meta, index) => {
        const content = modules.find((m) => m.id === meta.id);
        if (!content) return null;
        const forWhom = sectors.filter((sector) => content.sectors.includes(sector.id));

        return (
          <li
            key={meta.id}
            className={styles.lane}
            data-module={meta.id}
            style={{ "--i": index } as CSSProperties}
          >
            <Link href={href({ key: "module", module: meta.id }, locale)} className={styles.link}>
              <span className={styles.text}>
                <span className={styles.head}>
                  <span className={styles.code}>{meta.code}</span>
                  <span className={styles.brand}>{meta.brandName}</span>
                  <span className={styles.name}>{content.name}</span>
                </span>
                <span className={styles.line}>{content.oneLiner}</span>
                <span className={styles.unit}>{content.unit.join(" · ")}</span>
                {forWhom.length > 0 ? (
                  <span className={styles.forWhom}>
                    <span className={styles.forLabel}>{t("sectors.forWhom")}</span>
                    {forWhom.map((sector) => sector.name).join(" · ")}
                  </span>
                ) : null}
              </span>
              <Silhouette kind={content.sheet.kind} />
            </Link>
          </li>
        );
      })}
    </ol>
  );
}

/**
 * The shape of the document each module produces.
 *
 *   ledger  three posted lines with a debit and a credit, a double rule
 *   pos     four numbered lines — the delivery note, quantities at the end
 *   table   a payslip grid: rows of people, columns of figures
 *   tables  a table map: six places, two of them open
 */
function Silhouette({ kind }: { kind: "ledger" | "pos" | "table" | "tables" }) {
  if (kind === "tables") {
    return (
      <span className={styles.sil} data-kind={kind} aria-hidden="true">
        {[0, 1, 2, 3, 4, 5].map((n) => (
          <span key={n} className={styles.cell} data-open={n === 1 || n === 4 ? "" : undefined} />
        ))}
      </span>
    );
  }

  if (kind === "table") {
    return (
      <span className={styles.sil} data-kind={kind} aria-hidden="true">
        {[0, 1, 2, 3].map((r) => (
          <span key={r} className={styles.gridRow} style={{ "--r": r } as CSSProperties}>
            <span className={styles.gridName} />
            <span className={styles.gridFig} />
            <span className={styles.gridFig} />
            <span className={styles.gridFig} data-net="" />
          </span>
        ))}
      </span>
    );
  }

  const rows = kind === "ledger" ? [0, 1, 2] : [0, 1, 2, 3];
  return (
    <span className={styles.sil} data-kind={kind} aria-hidden="true">
      {rows.map((r) => (
        <span key={r} className={styles.row} style={{ "--r": r } as CSSProperties}>
          <span className={styles.nr} />
          <span className={styles.desc} />
          <span className={styles.fig} />
          {kind === "ledger" ? <span className={styles.fig} /> : null}
        </span>
      ))}
      <span className={styles.total} />
    </span>
  );
}