/* ==========================================================================
   SHARP LEGACY - /en/legacy and /ar/legacy
   --------------------------------------------------------------------------
   The full programme record stays available from the CMS. The page introduces
   each phase with a short story, its own gallery, and three highlights.
   ========================================================================== */

import { useRef, useState } from "react";
import { Link } from "react-router";

import { ArrowIcon, Button } from "~/components/ui/Button";
import { createTranslator, sectionPath, type Translator } from "~/i18n";
import { buildBreadcrumbJsonLd, buildMeta } from "~/lib/seo";

import type { Route } from "./+types/legacy";
import type { CmsLegacyPage } from "./_page-kit/cms-types";
import { loadSingle, toImage } from "./_page-kit/cms.server";
import type { LegacyGalleryImage, LegacyStageCopy } from "./_page-kit/copy";
import { pageCopy } from "./_page-kit/copy";
import { resolveLegacyStage } from "./_page-kit/legacy-cms.server";
import { routeLocale } from "./_page-kit/locale";
import { cx, PageHero, PageSection, SectionHeader } from "./_page-kit/sections";
import { RichText } from "./_page-kit/rich-text";

import "./_page-kit/motion.css";

const STAGES = [
  {
    id: "sharp-i",
    band: true,
  },
  {
    id: "sharp-ii",
    band: false,
  },
] as const;

/** Keep the short page narrative in step with the editor's CMS description. */
function storyPreview(markdown: string) {
  const [introduction = "", ...rawChapters] = markdown
    .trim()
    .replace(/\r\n?/g, "\n")
    .split(/\n(?=###\s)/);
  const chapters = rawChapters.flatMap((raw) => {
    const match = /^###\s+([^\n]+)\n([\s\S]*)$/.exec(raw.trim());
    return match
      ? [{ heading: match[1]!, body: match[2]!.trim() }]
      : [];
  });
  const featuredIndexes = new Set(
    chapters.length > 3 ? [1, 2, chapters.length - 1] : chapters.map((_, index) => index),
  );
  const firstSentences = (value: string, count: number) =>
    value.trim().split(/(?<=[.!?؟])\s+/u).slice(0, count).join(" ");

  return {
    introduction: firstSentences(introduction, 2),
    highlights: chapters
      .filter((_, index) => featuredIndexes.has(index))
      .map(({ heading, body }) => ({
        heading,
        preview: firstSentences(body.split(/\n\s*\n/)[0] ?? body, 2),
      })),
  };
}

export function loader({ params }: Route.LoaderArgs) {
  const locale = routeLocale(params);

  return loadSingle<CmsLegacyPage>("legacy-page", {
    locale,
    populate: {
      hero: { populate: { media: true, ctas: true } },
      stageOne: { populate: { metrics: true, focusAreas: true, images: true } },
      stageTwo: { populate: { metrics: true, focusAreas: true, images: true } },
      seo: { populate: { ogImage: true } },
    },
  }).then((page) => {
    const fallback = pageCopy(locale).legacy;
    return {
      locale,
      hero: {
        eyebrow: page?.hero?.eyebrow ?? null,
        title: page?.hero?.headline ?? null,
        lead: page?.hero?.subheading ?? null,
        media: toImage(page?.hero?.media, "large") ?? null,
      },
      stageOne: resolveLegacyStage(page?.stageOne, fallback.stageOne),
      stageTwo: resolveLegacyStage(page?.stageTwo, fallback.stageTwo),
      closingHeading: page?.closingHeading ?? null,
      closingBody: page?.closingBody ?? null,
      seo: {
        title: page?.seo?.metaTitle ?? null,
        description: page?.seo?.metaDescription ?? null,
        image: toImage(page?.seo?.ogImage, "large") ?? null,
        noIndex: page?.seo?.noIndex ?? false,
      },
    };
  });
}

export function meta({ loaderData, matches }: Route.MetaArgs) {
  const root = matches[0].loaderData;
  const locale = loaderData?.locale ?? root.locale;
  const t = createTranslator(locale);
  const copy = pageCopy(locale).legacy;
  const seo = loaderData?.seo;

  return buildMeta({
    locale,
    pathname: root.pathname,
    siteUrl: root.siteUrl,
    title: seo?.title ?? t("nav.sections.legacy"),
    description: seo?.description ?? loaderData?.hero.lead ?? copy.heroLead,
    ...(seo?.image
      ? { image: { url: seo.image.src, alt: seo.image.alt } }
      : {}),
    noIndex: seo?.noIndex ?? false,
    jsonLd: buildBreadcrumbJsonLd(root.siteUrl, [
      { name: t("nav.sections.home"), pathname: sectionPath("home", locale) },
      { name: t("nav.sections.about"), pathname: sectionPath("about", locale) },
      { name: t("nav.sections.legacy"), pathname: sectionPath("legacy", locale) },
    ]),
  });
}

function LegacyImageGallery({
  images,
  stageName,
  heading,
  empty,
  t,
}: {
  images: readonly LegacyGalleryImage[];
  stageName: string;
  heading: string;
  empty: string;
  t: Translator;
}) {
  const trackRef = useRef<HTMLUListElement>(null);
  const [activeIndex, setActiveIndex] = useState(0);

  const scrollToImage = (index: number) => {
    trackRef.current?.children.item(index)?.scrollIntoView({
      behavior: "auto",
      block: "nearest",
      inline: "start",
    });
    setActiveIndex(index);
  };

  const updateActiveImage = () => {
    const track = trackRef.current;
    if (!track) return;

    const bounds = track.getBoundingClientRect();
    const center = (bounds.left + bounds.right) / 2;
    let closestIndex = 0;
    let closestDistance = Number.POSITIVE_INFINITY;
    Array.from(track.children).forEach((slide, index) => {
      const rect = slide.getBoundingClientRect();
      const distance = Math.abs((rect.left + rect.right) / 2 - center);
      if (distance < closestDistance) {
        closestIndex = index;
        closestDistance = distance;
      }
    });
    setActiveIndex((current) => current === closestIndex ? current : closestIndex);
  };

  if (images.length === 0) {
    return (
      <div className="relative flex aspect-[4/3] flex-col justify-end overflow-hidden rounded-card border border-[var(--border-subtle)] bg-[var(--surface-card)] p-xl">
        <span aria-hidden="true" className="absolute -end-md -top-xl display-sm text-[var(--text-accent)] opacity-10">
          {stageName}
        </span>
        <p className="relative max-w-[20rem] body-md text-[var(--text-secondary)]">
          {empty}
        </p>
      </div>
    );
  }

  if (images.length === 1) {
    const image = images[0]!;
    return (
      <figure className="flex flex-col gap-sm">
        <img
          src={image.src}
          alt={image.alt}
          loading="lazy"
          decoding="async"
          className="aspect-[4/3] w-full rounded-card border border-[var(--border-subtle)] object-cover shadow-[var(--elevation-card)]"
        />
        {image.caption ? (
          <figcaption className="body-sm text-[var(--text-secondary)]">
            {image.caption}
          </figcaption>
        ) : null}
      </figure>
    );
  }

  return (
    <div role="region" aria-label={heading} className="flex min-w-0 flex-col gap-sm">
      <ul
        ref={trackRef}
        tabIndex={0}
        onScroll={updateActiveImage}
        className="flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain rounded-card motion-safe:scroll-smooth focus-visible:outline-[color:var(--focus-ring-color)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-[var(--focus-ring-offset)]"
      >
        {images.map((image, index) => (
          <li key={`${image.src}-${index}`} className="w-full shrink-0 snap-start">
            <figure className="flex flex-col gap-sm">
              <img
                src={image.src}
                alt={image.alt}
                loading="lazy"
                decoding="async"
                className="aspect-[4/3] w-full rounded-card border border-[var(--border-subtle)] object-cover shadow-[var(--elevation-card)]"
              />
              {image.caption ? (
                <figcaption className="body-sm text-[var(--text-secondary)]">
                  {image.caption}
                </figcaption>
              ) : null}
            </figure>
          </li>
        ))}
      </ul>
      <div className="flex items-center justify-between gap-sm">
        <p aria-live="polite" className="label-md text-[var(--text-secondary)]">
          {t("legacy.imageCount", { current: activeIndex + 1, total: images.length })}
        </p>
        <div className="flex items-center gap-xs">
          <button
            type="button"
            aria-label={t("legacy.previousImage", { programme: stageName })}
            disabled={activeIndex === 0}
            onClick={() => scrollToImage(activeIndex - 1)}
            className="flex size-11 items-center justify-center rounded-control border border-[var(--border-default)] text-[var(--text-primary)] transition-colors hover:border-[var(--border-accent)] hover:text-[var(--text-accent)] disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-[color:var(--focus-ring-color)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-[var(--focus-ring-offset)]"
          >
            <ArrowIcon direction="backward" />
          </button>
          <button
            type="button"
            aria-label={t("legacy.nextImage", { programme: stageName })}
            disabled={activeIndex === images.length - 1}
            onClick={() => scrollToImage(activeIndex + 1)}
            className="flex size-11 items-center justify-center rounded-control border border-[var(--border-default)] text-[var(--text-primary)] transition-colors hover:border-[var(--border-accent)] hover:text-[var(--text-accent)] disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-[color:var(--focus-ring-color)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-[var(--focus-ring-offset)]"
          >
            <ArrowIcon direction="forward" />
          </button>
        </div>
      </div>
      <div aria-hidden="true" className="flex gap-xs">
        {images.map((image, index) => (
          <span
            key={`${image.src}-${index}`}
            className={cx(
              "h-1 flex-1 rounded-chip transition-colors",
              index === activeIndex ? "bg-[var(--border-accent)]" : "bg-[var(--border-subtle)]",
            )}
          />
        ))}
      </div>
    </div>
  );
}

function StageSection({
  stage,
  id,
  band,
  t,
}: {
  stage: LegacyStageCopy;
  id: string;
  band: boolean;
  t: Translator;
}) {
  const story = storyPreview(stage.description);

  return (
    <PageSection
      id={id}
      aria-labelledby={`${id}-heading`}
      {...(band ? { band: true } : {})}
    >
      <div className="flex flex-col gap-2xl">
        <div className="grid items-center gap-xl lg:grid-cols-[minmax(0,0.88fr)_minmax(0,1.12fr)] lg:gap-2xl">
          <div className="flex min-w-0 flex-col gap-lg">
            <SectionHeader
              id={`${id}-heading`}
              eyebrow={stage.years}
              title={stage.name}
              lead={stage.summary}
              size="display"
            />
            {story.introduction ? (
              <p className="body-lg text-[var(--text-secondary)]">
                {story.introduction}
              </p>
            ) : null}
            <dl className="grid grid-cols-3 gap-sm border-t border-[var(--border-default)] pt-lg">
              {stage.metrics.slice(0, 3).map((metric) => (
                <div key={metric.label} className="flex min-w-0 flex-col gap-xs">
                  <dt className="order-2 label-md text-[var(--text-secondary)]">
                    {metric.label}
                  </dt>
                  <dd className="order-1 heading-h2 text-[var(--text-accent)]">
                    {metric.value}
                  </dd>
                </div>
              ))}
            </dl>
          </div>

          <div className={cx("flex min-w-0 flex-col gap-sm", id === "sharp-ii" && "lg:order-first")}>
            <h3 className="label-md uppercase text-[var(--text-accent)]">
              {stage.imageHeading}
            </h3>
            <LegacyImageGallery
              images={stage.images}
              stageName={stage.name}
              heading={stage.imageHeading}
              empty={stage.imageEmpty}
              t={t}
            />
          </div>
        </div>

        {story.highlights.length > 0 ? (
          <div className="grid gap-md md:grid-cols-3">
            {story.highlights.map((highlight) => (
              <article
                key={highlight.heading}
                className="flex flex-col gap-sm border-s-2 border-[var(--border-accent)] bg-[var(--surface-card)] p-lg"
              >
                <h3 className="heading-h3 text-[var(--text-primary)]">
                  {highlight.heading}
                </h3>
                <p className="body-md text-[var(--text-secondary)]">
                  {highlight.preview}
                </p>
              </article>
            ))}
          </div>
        ) : null}

        <details className="group rounded-card border border-[var(--border-subtle)] bg-[var(--surface-card)]">
          <summary className="flex cursor-pointer list-none items-center justify-between gap-md p-lg body-md-bold text-[var(--text-primary)] focus-visible:outline-[color:var(--focus-ring-color)] focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-[var(--focus-ring-offset)] [&::-webkit-details-marker]:hidden">
            {t("legacy.fullRecord", { programme: stage.name })}
            <span aria-hidden="true" className="heading-h3 text-[var(--text-accent)] group-open:rotate-45">
              +
            </span>
          </summary>
          <div className="flex flex-col gap-xl border-t border-[var(--border-subtle)] px-lg py-xl">
            <RichText markdown={stage.description} className="w-full" />
            {stage.focusAreas.length > 0 ? (
              <div className="flex flex-col gap-sm">
                <h3 className="heading-h3 text-[var(--text-primary)]">
                  {stage.focusHeading}
                </h3>
                <ul className="flex flex-wrap gap-sm">
                  {stage.focusAreas.map((area) => (
                    <li
                      key={area}
                      className="rounded-chip border border-[var(--border-subtle)] px-md py-xs body-sm text-[var(--text-secondary)]"
                    >
                      {area}
                    </li>
                  ))}
                </ul>
              </div>
            ) : null}
          </div>
        </details>
      </div>
    </PageSection>
  );
}

export default function Legacy({ loaderData }: Route.ComponentProps) {
  const locale = loaderData.locale;
  const t = createTranslator(locale);
  const copy = pageCopy(locale).legacy;
  const stageEntries = [
    { ...STAGES[0], stage: loaderData.stageOne },
    { ...STAGES[1], stage: loaderData.stageTwo },
  ] as const;

  return (
    <>
      <PageHero
        eyebrow={loaderData.hero.eyebrow ?? copy.heroEyebrow}
        title={loaderData.hero.title ?? copy.heroTitle}
        lead={loaderData.hero.lead ?? copy.heroLead}
        {...(loaderData.hero.media ? { media: loaderData.hero.media } : {})}
        ambient={[
          {
            top: -150,
            from: "start",
            offset: "5%",
            width: 560,
            height: 470,
          },
          {
            top: 100,
            from: "end",
            offset: "-80px",
            width: 460,
            height: 420,
            tone: "danger",
            reverse: true,
          },
        ]}
      />

      {stageEntries.map(({ stage, ...config }) => (
        <StageSection
          key={`${config.id}-${locale}`}
          stage={stage}
          t={t}
          {...config}
        />
      ))}

      <PageSection
        aria-labelledby="legacy-closing-heading"
        className="bg-[var(--surface-sunken)]"
      >
        <div className="mx-auto flex max-w-[var(--layout-prose-max)] flex-col items-start gap-lg">
          <SectionHeader
            id="legacy-closing-heading"
            title={loaderData.closingHeading ?? copy.closingHeading}
          />
          <p className="body-lg text-[var(--text-secondary)]">
            {(loaderData.closingBody ?? copy.closingParagraphs.join(" "))
              .trim()
              .split(/(?<=[.!?؟])\s+/u)
              .slice(0, 2)
              .join(" ")}
          </p>
          <Button
            as={Link}
            to={sectionPath("about", locale)}
            prefetch="intent"
            variant="primary"
            iconEnd={<ArrowIcon />}
          >
            {t("actions.discoverSharper")}
          </Button>
        </div>
      </PageSection>
    </>
  );
}