import { useEffect, useRef } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { getJSON } from "../../api";
import { langQuery, useI18n, type Lang } from "../../i18n";
import { useLocalizedPath } from "../../useLocalizedPath";
import { localizePath } from "../../languageRoutes";
import { MOCK_POSTS } from "../../mocks/mockPosts";
import { POST_STREAM_USES_MOCK } from "../../components/messageStream/hooks/usePostStream";
import { useToast } from "../../components/Toast";
import { Skeleton } from "../../components/Skeleton";
import type { Post } from "../../types/post";

function postLangToUiLang(code: string | undefined): Lang | null {
  if (!code) return null;
  const lc = code.trim().toLowerCase();
  if (lc === "zh" || lc === "zh-cn" || lc === "zh-hans") return "zh-CN";
  if (lc === "en") return "en";
  if (lc === "ja") return "ja";
  if (lc === "ko") return "ko";
  if (lc === "vi") return "vi";
  if (lc === "id") return "id";
  if (lc === "ms") return "ms";
  return null;
}

export function PostRedirect() {
  const { id } = useParams();
  const [sp] = useSearchParams();
  const singleMode = sp.get("single") === "1";
  const { lang, t } = useI18n();
  const navigate = useNavigate();
  const lp = useLocalizedPath();
  const { showToast } = useToast();
  const handledIdRef = useRef<string | null>(null);

  useEffect(() => {
    if (!id) {
      navigate(lp("/browse"), { replace: true });
      return;
    }
    if (handledIdRef.current === id) return;
    handledIdRef.current = id;

    if (POST_STREAM_USES_MOCK) {
      const post = MOCK_POSTS.find((p) => p.id === id);
      const suffix = singleMode ? "&single=1" : "";
      navigate(
        lp(
          post
            ? `/browse?post=${encodeURIComponent(post.id)}${suffix}`
            : "/browse",
        ),
        { replace: true },
      );
      return;
    }

    const goToPostInLang = (post: Post, targetLang: Lang) => {
      const suffix = singleMode ? "&single=1" : "";
      navigate(
        localizePath(
          `/browse?post=${encodeURIComponent(post.id)}${suffix}`,
          targetLang,
        ),
        { replace: true },
      );
    };

    getJSON<Post>(
      `/api/posts/${id}?lang=${encodeURIComponent(langQuery(lang))}`,
    )
      .then((post) => goToPostInLang(post, lang))
      .catch(() => {
        getJSON<Post>(`/api/posts/${id}`)
          .then((post) => {
            const sourceLang =
              postLangToUiLang(post.sourceLanguage) ||
              postLangToUiLang(post.language) ||
              lang;
            showToast(t("postShownInOriginalLanguage"));
            goToPostInLang(post, sourceLang);
          })
          .catch(() => navigate(lp("/browse"), { replace: true }));
      });
  }, [id, lang, navigate, lp, showToast, singleMode, t]);

  return (
    <div
      aria-live="polite"
      aria-label={t("loading")}
      className="mx-auto flex max-w-[1180px] flex-col gap-3 px-4 pt-4 md:px-0 md:pt-2"
    >
      {Array.from({ length: 6 }).map((_, i) => (
        <div
          key={i}
          className="mx-auto w-full max-w-[358px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
        >
          <Skeleton
            className={`rounded-2xl ${i % 3 === 0 ? "h-[220px]" : "h-[80px]"}`}
          />
        </div>
      ))}
    </div>
  );
}
