import { RecordTable, type Row } from "@/components/RecordTable";
import { Section } from "@/components/Section";
import { StructuredData } from "@/components/StructuredData";
import { SupportForm, type ModuleOption } from "@/components/SupportForm";
import { TutorialLibrary } from "@/components/TutorialLibrary";
import { getModules, getSupport, getT, getTutorials } 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 { tutorialFilters, tutorialItems, TUTORIAL_LIBRARY_STRINGS } from "./tutorials";

/**
 * /mbeshtetje — the support home, and the page the old site most needed: the
 * YouTube library had no home anywhere (Audit v1).
 *
 * Hours and a remote-support tool are UNKNOWN, so those channel rows are
 * filtered out by the loader and nothing stands in their place.
 */
export function SupportView({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const support = getSupport(locale);
  const modules = getModules(locale);
  const tutorials = getTutorials();

  const channelRows: Row[] = support.channels.map((channel) => ({
    id: channel.kind,
    cells: [
      channel.label,
      channel.href ? (
        <a
          key={channel.kind}
          href={channel.href}
          data-event={
            channel.kind === "phone"
              ? "call_click"
              : channel.kind === "email"
                ? "email_click"
                : channel.kind === "whatsapp"
                  ? "whatsapp_click"
                  : undefined
          }
          {...(channel.href.startsWith("http")
            ? { target: "_blank", rel: "noopener noreferrer" }
            : {})}
        >
          {channel.value}
        </a>
      ) : (
        channel.value
      ),
    ],
  }));

  const moduleOptions: ModuleOption[] = MODULES.map((meta) => {
    const content = modules.find((m) => m.id === meta.id);
    return {
      value: meta.id,
      label: content ? `${meta.code} ${meta.brandName} — ${content.name}` : meta.brandName,
    };
  });

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

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

      <Section label={t("label.channels")} heading={t("heading.channels")}>
        <div className={styles.measure}>
          <RecordTable
            columns={[
              { key: "channel", label: t("table.item"), subject: true },
              { key: "value", label: t("table.value") },
            ]}
            rows={channelRows}
            caption={t("label.channels")}
          />
        </div>
      </Section>

      <Section
        label={t("label.library")}
        heading={t("heading.library")}
        lead={support.tutorialsIntro}
        surface="alt"
      >
        <TutorialLibrary
          items={tutorialItems(locale, tutorials)}
          filters={tutorialFilters(locale)}
          strings={TUTORIAL_LIBRARY_STRINGS(locale)}
        />
      </Section>

      <Section
        label={t("label.request")}
        heading={t("support.requestTitle")}
        lead={support.requestIntro}
      >
        <div className={styles.measure}>
          <SupportForm
            locale={locale}
            modules={moduleOptions}
            strings={{
              name: t("form.name"),
              company: t("form.company"),
              module: t("form.module"),
              modulePlaceholder: t("form.modulePlaceholder"),
              phone: t("form.phone"),
              description: t("form.description"),
              optional: t("form.optional"),
              consent: t("form.consent"),
              privacyLabel: t("form.privacyLink"),
              privacyHref: href({ key: "privacy" }, locale),
              send: t("cta.send"),
              sending: t("cta.sending"),
              successTitle: t("form.successTitle"),
              successBody: t("form.successSupport"),
              errorTitle: t("form.errorTitle"),
              errorSummaryAria: t("form.errorSummaryAria"),
            }}
          />
        </div>
      </Section>
    </>
  );
}