/**
 * Flights Map route page.
 *
 * Renders the start page with embedded map + filter.
 * Gated by the `flightsMap` feature flag -- renders 404 when disabled.
 *
 * URL: /{lang}/flights-map
 */

import { lazy, Suspense } from "react";
import { useParams, useLoaderData } from "@modern-js/runtime/router";
import { useTranslation } from "@/i18n/provider.js";
import { SeoHead } from "@/ui/seo/SeoHead.js";
import { buildFlightsMapSeo } from "@/features/flights-map/seo.js";
import { buildFlightsMapJsonLd } from "@/features/flights-map/json-ld.js";
import { useFeatureFlag } from "@/features/flights-map/hooks/useFeatureFlag.js";
import { getEnv } from "@/env/index.js";
const FlightsMapStartPage = lazy(() =>
  import("@/features/flights-map/components/FlightsMapStartPage.js").then(
    (m) => ({ default: m.FlightsMapStartPage }),
  ),
);

// Loader lives in ./data.ts (Modern.js conventional data file).

export default function FlightsMapPage(): JSX.Element {
  const { t } = useTranslation();
  const routeParams = useParams<{ lang: string }>();
  const locale = routeParams.lang ?? "ru-ru";
  const env = getEnv();
  const canonicalOrigin = env.PROD_ORIGIN;
  // Tile URL read on the server (where process.env is available) and passed
  // down as a prop — the client bundle can't read MAP_TILE_URL itself.
  const tileUrl = env.MAP_TILE_URL;
  const data = useLoaderData() as { today?: string } | null;
  const today = data?.today;
  const isEnabled = useFeatureFlag("flightsMap");

  if (!isEnabled) {
    return (
      <div data-testid="flights-map-disabled">
        <h1>404 — {t("PAGE404.HEADER")}</h1>
      </div>
    );
  }

  const seoProps = buildFlightsMapSeo(t, locale, canonicalOrigin);
  const jsonLd = buildFlightsMapJsonLd(locale, canonicalOrigin);

  return (
    <>
      <SeoHead {...seoProps} jsonLd={jsonLd} />
      <Suspense fallback={<div aria-busy="true">{t("SHARED.LOADING")}</div>}>
        <FlightsMapStartPage tileUrl={tileUrl} {...(today ? { today } : {})} />
      </Suspense>
    </>
  );
}
