import Link from "next/link";

import { BusinessTypeList } from "@/components/BusinessTypeList";
import { DemoBlock } from "@/components/DemoBlock";
import { Evidence } from "@/components/Evidence";
import { Lanes } from "@/components/Lanes";
import { RecordTable, type Row } from "@/components/RecordTable";
import { Section } from "@/components/Section";
import { StructuredData } from "@/components/StructuredData";
import { ForwardLink } from "@/components/TextLink";
import { VideoMedia } from "@/components/VideoMedia";
import { getBusinessTypes, getModules, getProduct, getSectors, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href, MODULES } from "@/lib/routes";

import styles from "./Page.module.css";
import { PageTitle } from "./PageTitle";
import { EVIDENCE_STRINGS, evidenceRecords, VIDEO_STRINGS, videoRecords } from "./evidence";

/**
 * /nexys — the product overview.
 *
 * What it is, in three paragraphs; the four lanes; how it runs (the system,
 * on the system's surface); who it is for; what the archive shows; the ask.
 * The chain diagram is gone: its sentence stays, as the line the lanes
 * illustrate, and the lanes are the four parts it named.
 */
export function NexysView({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const product = getProduct(locale);
  const modules = getModules(locale);
  const sectors = getSectors(locale);
  const businessTypes = getBusinessTypes(locale);
  const videos = videoRecords(locale, "nexys");
  const evidence = evidenceRecords(locale, "nexys");

  const runtimeRows: Row[] = product.runtime.map((row) => ({
    id: row.fact,
    cells: [row.label, row.value],
  }));

  const platformRows: Row[] = product.platforms.map((row) => ({
    id: row.fact,
    cells: [row.label, row.value],
  }));

  return (
    <>
      <StructuredData
        locale={locale}
        includeProduct
        crumbs={[
          { name: t("nav.home"), target: { key: "home" } },
          { name: product.name, target: { key: "nexys" } },
        ]}
      />

      <PageTitle
        eyebrow={[t("site.productOf")]}
        title={product.name}
        oneLiner={product.oneLiner}
        aside={
          <dl className={styles.spec}>
            <div className={styles.specRow}>
              <dt className={styles.specLabel}>{t("label.modules")}</dt>
              <dd className={styles.specUnit}>{t("nexys.familyLead")}</dd>
            </div>
            {MODULES.map((meta) => {
              const content = modules.find((m) => m.id === meta.id);
              if (!content) return null;
              return (
                <div key={meta.id} className={styles.specRow}>
                  <dt className={styles.specLabel}>{meta.code}</dt>
                  <dd className={styles.specValue}>
                    <Link
                      href={href({ key: "module", module: meta.id }, locale)}
                      className={styles.specLink}
                    >
                      {meta.brandName}
                    </Link>
                    {" — "}
                    {content.name}
                  </dd>
                </div>
              );
            })}
          </dl>
        }
      />

      {/* What it is, and the line the lanes illustrate */}
      <Section first tight>
        <div className={styles.prose}>
          {product.intro.map((paragraph) => (
            <p key={paragraph}>{paragraph}</p>
          ))}
        </div>
      </Section>

      {/* The four lanes */}
      <Section surface="alt" heading={product.chainSentence} lead={t("nexys.modulesLead")}>
        <Lanes locale={locale} />
      </Section>

      {/* How it runs: the system, on the system's surface */}
      <Section surface="navy" heading={t("heading.runtime")}>
        <div className={`${styles.split} ${styles.onNavy}`}>
          <RecordTable
            columns={[
              { key: "item", label: t("table.item"), subject: true },
              { key: "value", label: t("table.value") },
            ]}
            rows={runtimeRows}
            caption={t("label.runtime")}
          />
          {platformRows.length > 1 ? (
            <div>
              <p className={styles.eyebrowNavy}>{t("label.platforms")}</p>
              <RecordTable
                columns={[
                  { key: "item", label: t("label.platforms"), subject: true },
                  { key: "value", label: t("table.value") },
                ]}
                rows={platformRows}
                caption={t("label.platforms")}
              />
            </div>
          ) : null}
        </div>
      </Section>

      {/* Who it is for */}
      <Section
        heading={t("sectors.title")}
        lead={t("sectors.intro")}
        action={
          sectors.length > 0 ? (
            <ForwardLink href={href({ key: "sectors" }, locale)}>{t("cta.allSectors")}</ForwardLink>
          ) : undefined
        }
      >
        {sectors.length > 0 ? (
          <div className={styles.linkRows}>
            {sectors.map((sector, index) => (
              <Link
                key={sector.id}
                href={href({ key: "sector", sector: sector.id }, locale)}
                className={styles.linkRow}
              >
                <span className={styles.linkCode}>{String(index + 1).padStart(2, "0")}</span>
                <span className={styles.linkName}>{sector.name}</span>
                <span className={styles.linkLine}>{sector.forWhom}</span>
                <span className={styles.linkArrow} aria-hidden="true">
                  →
                </span>
              </Link>
            ))}
          </div>
        ) : null}

        <div className={styles.stacked}>
          <p className={styles.eyebrow}>{t("label.businessTypes")}</p>
          <BusinessTypeList data={businessTypes} />
        </div>
      </Section>

      {/* What the public archive already shows about the system as a whole */}
      {videos.length > 0 || evidence.length > 0 ? (
        <Section
          surface="navy"
          heading={videos.length > 0 ? t("media.heading") : t("evidence.heading")}
        >
          {videos.length > 0 ? <VideoMedia items={videos} strings={VIDEO_STRINGS(locale)} /> : null}
          {evidence.length > 0 ? (
            <div className={videos.length > 0 ? styles.stacked : undefined}>
              <Evidence
                items={evidence}
                strings={EVIDENCE_STRINGS(locale)}
                showNote={videos.length === 0}
              />
            </div>
          ) : null}
        </Section>
      ) : null}

      <DemoBlock locale={locale} />
    </>
  );
}