import type { CSSProperties, ReactNode } from "react";

import { BlueprintSheet } from "@/components/BlueprintSheet";
import { DemoBlock } from "@/components/DemoBlock";
import { Masthead } from "@/components/Masthead";
import { RecordPanel } from "@/components/RecordPanel";
import { Section } from "@/components/Section";
import { StructuredData } from "@/components/StructuredData";
import { ForwardLink } from "@/components/TextLink";
import { VideoMedia } from "@/components/VideoMedia";
import { Worlds, type World } from "@/components/Worlds";
import { CONTACT, getCompany, getHome, getModules, getProduct, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href, MODULES } from "@/lib/routes";

import { VIDEO_STRINGS, videoRecords } from "./evidence";
import styles from "./Home.module.css";

/**
 * The home page, V4.1. The opening is the crescendo; what follows has to
 * sustain it without competing with it, and it does that by changing state
 * every time the subject changes — scale, density, surface, media — rather
 * than by furnishing six sections the same way.
 *
 *   OPENING      navy   the mark forms from the documents and goes to its
 *                       corner; the headline, the company's sentence, the index
 *   THE WORLDS   paper  Nexys as one stage that changes between four kinds of
 *                       day — the real document of each, posting in its tempo
 *   AT WORK      navy   the recording of the program running, at full width,
 *                       framed by the first and last step of the day it shows
 *   THE RECORD   alt    the sentence the system is, set large, beside the
 *                       day's record posting line by line
 *   SULSYS       navy   the company in type: its sentence, its three verbs,
 *                       its number — no mark; the opening already signed
 *   THE ASK      paper  the closing statement, and the form
 *
 * Paper is a document the business holds; navy is the system running.
 */
export function HomeView({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const home = getHome(locale);
  const product = getProduct(locale);
  const company = getCompany(locale);
  const modules = getModules(locale);
  const videos = videoRecords(locale, "home");

  /* The four worlds and their documents, rendered here and switched there. */
  const worlds: World[] = [];
  const frames: ReactNode[] = [];
  for (const meta of MODULES) {
    const content = modules.find((m) => m.id === meta.id);
    if (!content) continue;
    const night = meta.id === "bar-restorant";
    worlds.push({
      id: meta.id,
      code: meta.code,
      brandName: meta.brandName,
      name: content.name,
      unit: content.unit,
      oneLiner: content.oneLiner,
      href: href({ key: "module", module: meta.id }, locale),
      night,
    });
    frames.push(
      <BlueprintSheet
        key={meta.id}
        sheet={content.sheet}
        locale={locale}
        variant="world"
        tone={night ? "navy" : "paper"}
      />,
    );
  }

  /*
   * The recording that leads, framed by the day it shows: the first and the
   * last step of that module's own workflow — the state the recording starts
   * from, and the result it ends in. Real terminology, nothing invented.
   */
  const lead = videos.find((v) => v.featured) ?? videos[0];
  const leadModule = lead ? modules.find((m) => m.id === lead.module) : undefined;
  const frame =
    leadModule && leadModule.workflow.length > 1
      ? {
          before: leadModule.workflow[0],
          after: leadModule.workflow[leadModule.workflow.length - 1],
          beforeIndex: "01",
          afterIndex: String(leadModule.workflow.length).padStart(2, "0"),
          label: leadModule.brandName,
        }
      : undefined;

  return (
    <>
      <StructuredData locale={locale} includeProduct />

      {/* 1 — the opening */}
      <Masthead locale={locale} />

      {/* 2 — the worlds: one stage, four kinds of day */}
      <Section first>
        <Worlds
          worlds={worlds}
          frames={frames}
          strings={{
            aria: t("nav.modules"),
            open: t("cta.openModule"),
            label: t("site.productName"),
            statement: t("nexys.familyLead"),
          }}
        />
        <p className={styles.worldsMore}>
          <ForwardLink href={href({ key: "nexys" }, locale)}>{t("cta.nexysOverview")}</ForwardLink>
        </p>
      </Section>

      {/* 3 — at work: the recording, at full width, framed by its day */}
      {videos.length > 0 ? (
        <Section surface="navy" heading={t("media.heading")}>
          <VideoMedia
            items={videos}
            strings={VIDEO_STRINGS(locale)}
            variant="feature"
            frame={frame}
          />
          <p className={styles.mediaMore}>
            <ForwardLink href={href({ key: "support" }, locale)}>
              {t("cta.allTutorials")}
            </ForwardLink>
          </p>
        </Section>
      ) : null}

      {/* 4 — the record: the sentence the system is, and the day posting */}
      <Section surface="alt">
        <div className={styles.record}>
          <div className={styles.recordLede}>
            <p className={styles.recordLabel}>{t("heading.chain")}</p>
            <h2 className={styles.recordStatement}>{product.chainSentence}</h2>
            <p className={styles.recordLead}>{home.productLead}</p>
          </div>
          <div className={styles.recordPanel}>
            <RecordPanel panel={home.panel} />
          </div>
          {home.factRows.length > 0 ? (
            <ul className={styles.factStrip}>
              {home.factRows.slice(0, 4).map((row) => (
                <li key={row.fact} className={styles.fact}>
                  <span className={styles.factHeading}>{row.heading}</span>
                  <span className={styles.factBody}>{row.body}</span>
                </li>
              ))}
            </ul>
          ) : null}
        </div>
      </Section>

      {/* 5 — Sulsys, in type */}
      <Section surface="navy">
        <div className={styles.company}>
          <div className={styles.companyLede}>
            <p className={styles.companyEyebrow}>
              {t("site.companyName")}
              <span className={styles.companyEyebrowSep} aria-hidden="true">
                ·
              </span>
              {t("site.companyDescriptor")}
            </p>
            <h2 className={styles.companyStatement}>{home.companyLead}</h2>
          </div>

          {/* What the company does, in the three words it uses for itself. */}
          <ol className={styles.verbs}>
            {home.works.map((work, index) => (
              <li key={work} className={styles.verb} style={{ "--i": index } as CSSProperties}>
                <span className={styles.verbRule} aria-hidden="true" />
                <span className={styles.verbWord}>{work}</span>
              </li>
            ))}
          </ol>

          <div className={styles.companyMeta}>
            <a
              href={`tel:${CONTACT.phoneE164}`}
              className={styles.companyPhone}
              data-event="call_click"
            >
              {CONTACT.phoneDisplay}
            </a>
            <ul className={styles.companyFacts}>
              {company.facts.slice(0, 3).map((fact) => (
                <li key={fact.fact} className={styles.companyFact}>
                  <span className={styles.companyFactLabel}>{fact.label}</span>
                  <span>{fact.value}</span>
                </li>
              ))}
            </ul>
            <div className={styles.companyActions}>
              <a
                href={CONTACT.whatsapp}
                className={styles.channel}
                target="_blank"
                rel="noopener noreferrer"
                data-event="whatsapp_click"
              >
                {t("cta.whatsapp")}
              </a>
              <ForwardLink href={href({ key: "company" }, locale)}>
                {t("cta.aboutCompany")}
              </ForwardLink>
            </div>
          </div>
        </div>
      </Section>

      {/* 6 — the ask, as an ending */}
      <DemoBlock locale={locale} closing />
    </>
  );
}