import Link from "next/link";

import { BlueprintSheet } from "@/components/BlueprintSheet";
import { BusinessTypeList } from "@/components/BusinessTypeList";
import { DemoBlock } from "@/components/DemoBlock";
import { ReferenceTable } from "@/components/ReferenceTable";
import { Section } from "@/components/Section";
import { StructuredData } from "@/components/StructuredData";
import { TextLink } from "@/components/TextLink";
import {
  clientsForSector,
  getBusinessTypes,
  getModules,
  getPublicClients,
  getSector,
  getSectors,
  getT,
} from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href, MODULES, type SectorId } from "@/lib/routes";

import styles from "./Page.module.css";
import { PageTitle } from "./PageTitle";

/** /sektoret — the index. Ships only when at least one sector is enabled. */
export function SectorsView({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const sectors = getSectors(locale);
  const businessTypes = getBusinessTypes(locale);
  const modules = getModules(locale);

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

      <PageTitle title={t("sectors.title")} oneLiner={t("sectors.intro")} />

      <Section label={t("label.who")}>
        <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 className={styles.linkSub}>
                  {sector.modules
                    .map((id) => {
                      const meta = MODULES.find((m) => m.id === id);
                      const content = modules.find((m) => m.id === id);
                      return meta && content ? `${meta.code} ${content.name}` : null;
                    })
                    .filter(Boolean)
                    .join(" · ")}
                </span>
              </span>
              <span className={styles.linkLine}>{sector.forWhom}</span>
              <span className={styles.linkArrow} aria-hidden="true">
                →
              </span>
            </Link>
          ))}
        </div>
      </Section>

      <Section label={t("label.businessTypes")} surface="alt" heading={t("heading.businessTypes")}>
        <BusinessTypeList data={businessTypes} />
      </Section>

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

/** /sektoret/[sektor] — one sector page. */
export function SectorView({ locale, sectorId }: { locale: Locale; sectorId: SectorId }) {
  const t = getT(locale);
  const sector = getSector(locale, sectorId);
  const modules = getModules(locale);
  const allSectorClients = clientsForSector(getPublicClients(), sectorId);
  /*
   * On a sector page the summary shape would be one row repeating the page's
   * own title, so references appear here only once a name may be shown.
   */
  const clients = allSectorClients.some((client) => client.name !== null) ? allSectorClients : [];

  const sectorModules = sector.modules
    .map((id) => ({
      meta: MODULES.find((m) => m.id === id),
      content: modules.find((m) => m.id === id),
    }))
    .filter((row) => row.meta && row.content);

  return (
    <>
      <StructuredData
        locale={locale}
        crumbs={[
          { name: t("nav.home"), target: { key: "home" } },
          { name: t("sectors.title"), target: { key: "sectors" } },
          { name: sector.name, target: { key: "sector", sector: sectorId } },
        ]}
      />

      <PageTitle eyebrow={[t("sectors.forWhom")]} title={sector.name} oneLiner={sector.forWhom}>
        <p className={styles.partOf}>
          <TextLink href={href({ key: "sectors" }, locale)}>{t("sectors.title")}</TextLink>
        </p>
      </PageTitle>

      {/* The daily flow, mapped to modules */}
      <Section label={t("label.flow")} heading={t("heading.flow")} lead={sector.intro}>
        <div className={styles.split}>
          <ol className={styles.steps}>
            {sector.flow.map((step) => {
              const meta = step.module ? MODULES.find((m) => m.id === step.module) : undefined;
              return (
                <li key={step.step} className={styles.step}>
                  <span>{step.step}</span>
                  <span className={styles.stepModule}>{meta ? meta.code : ""}</span>
                </li>
              );
            })}
          </ol>
          <BlueprintSheet sheet={sector.sheet} locale={locale} />
        </div>
      </Section>

      {/* The modules this sector uses */}
      <Section label={t("label.modules")} heading={t("nav.modules")} surface="alt">
        <div className={styles.linkRows}>
          {sectorModules.map((row) => (
            <Link
              key={row.meta!.id}
              href={href({ key: "module", module: row.meta!.id }, locale)}
              className={styles.linkRow}
            >
              <span className={styles.linkCode}>{row.meta!.code}</span>
              <span className={styles.linkName}>
                {row.meta!.brandName}
                <span className={styles.linkSub}>{row.content!.name}</span>
              </span>
              <span className={styles.linkLine}>{row.content!.oneLiner}</span>
              <span className={styles.linkArrow} aria-hidden="true">
                →
              </span>
            </Link>
          ))}
        </div>
      </Section>

      {/* References of this sector — sector and town only until permission */}
      {clients.length > 0 ? (
        <Section
          label={t("label.references")}
          heading={t("clients.title")}
          lead={t("clients.intro")}
        >
          <ReferenceTable locale={locale} clients={clients} />
        </Section>
      ) : null}

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