/**
 * Popular Requests standalone page route.
 *
 * Provides a standalone view of the PopularRequestsPanel. In Angular,
 * popular requests were embedded in OnlineBoard and Schedule start pages.
 * This route provides a direct-access path for the MF remote and allows
 * independent rendering/testing.
 *
 * URL: /{lang}/popular
 */

import { lazy, Suspense, useCallback } from "react";
import { useParams, useNavigate } from "@modern-js/runtime/router";
import type { PopularRequest } from "@/features/popular-requests/types.js";

const PopularRequestsPanel = lazy(() =>
  import("@/features/popular-requests/components/PopularRequestsPanel.js").then(
    (m) => ({ default: m.PopularRequestsPanel }),
  ),
);

export default function PopularPage(): JSX.Element {
  const routeParams = useParams<{ lang: string }>();
  const lang = routeParams.lang ?? "ru";
  const navigate = useNavigate();

  const handleRequestClick = useCallback(
    (request: PopularRequest) => {
      switch (request.mode) {
        case "FlightNumber":
        case "Arrival":
        case "Departure":
          void navigate(`/${lang}/onlineboard`);
          return;
        case "Route":
          if (request.type === "Onlineboard") {
            void navigate(`/${lang}/onlineboard`);
          } else {
            void navigate(`/${lang}/schedule`);
          }
          return;
        case "RouteWithBack":
          void navigate(`/${lang}/schedule`);
          return;
      }
    },
    [lang, navigate],
  );

  return (
    <Suspense fallback={<div aria-busy="true">Loading...</div>}>
      <PopularRequestsPanel onRequestClick={handleRequestClick} />
    </Suspense>
  );
}
