import { createFileRoute, redirect, notFound, Link } from "@tanstack/react-router";
import { SpriteIcon } from "@/components/SpriteIcon";
import { POSTS_PER_PAGE, type BlogPostListItem } from "@/lib/content";
import { loadBlogIndex } from "@/lib/blog-index";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import BlogCard from "@/components/blog/BlogCard";
import Pagination from "@/components/blog/Pagination";
import { RelatedPages } from "@/components/RelatedPages";
import { useT } from "@/lib/i18n";
import { IconPageText } from "@central-icons-react/round-outlined-radius-2-stroke-2";
import {
  getLocalizedMeta,
  formatMetaTags,
  getAlternateLinks,
  getCanonicalLink,
  buildOgImageUrl,
  SITE_URL,
} from "@/lib/meta";
import {
  getBreadcrumbSchema,
  formatStructuredData,
  getOrganizationSchema,
  getWebSiteSchema,
  getCollectionPageSchema,
} from "@/lib/structured-data";
import { getMessages } from "@better-i18n/use-intl/server";
import { i18nConfig } from "@/i18n.config";

export const Route = createFileRoute("/$locale/blog/page/$page")({
  loader: async ({ params, context }) => {
    const pageNum = parseInt(params.page, 10);

    // /blog/page/1/ → 301 redirect to /blog/
    if (pageNum === 1) {
      throw redirect({
        to: "/$locale/blog",
        params: { locale: params.locale },
        statusCode: 301,
      });
    }

    // Invalid page number → 404
    if (isNaN(pageNum) || pageNum < 1) {
      throw notFound();
    }

    const index = await loadBlogIndex(params.locale);
    const totalPages = Math.max(
      1,
      Math.ceil(index.allPosts.length / POSTS_PER_PAGE),
    );

    // Page out of range → 404
    if (pageNum > totalPages) {
      throw notFound();
    }

    const start = (pageNum - 1) * POSTS_PER_PAGE;
    const posts = index.allPosts.slice(start, start + POSTS_PER_PAGE);

    const { filterMessages } = await import("@/lib/page-namespaces");
    const allMessages = await getMessages({ project: i18nConfig.project, locale: context.locale });
    const messages = filterMessages(allMessages, ["meta", "breadcrumbs"]);
    return {
      posts,
      totalPages,
      currentPage: pageNum,
      messages,
      locale: context.locale,
    };
  },
  head: ({ loaderData }) => {
    const locale = loaderData?.locale || "en";
    const currentPage = loaderData?.currentPage ?? 2;
    const totalPages = loaderData?.totalPages ?? 1;
    const pathname = `/blog/page/${currentPage}`;

    const meta = getLocalizedMeta(loaderData?.messages || {}, "blog", {
      locale,
      pathname,
      ogImage: buildOgImageUrl("og", {
        title: `Blog — Page ${currentPage}`,
        description: "Latest posts from the Better I18N team",
        site: "blog",
      }),
    });

    const msgs = (loaderData?.messages ?? {}) as Record<string, any>;
    const breadcrumbSchema = getBreadcrumbSchema([
      { name: msgs["breadcrumbs.home"] ?? "Home", url: `${SITE_URL}/${locale}/` },
      { name: msgs["breadcrumbs.blog"] ?? "Blog", url: `${SITE_URL}/${locale}/blog/` },
      { name: (msgs["breadcrumbs.page"] ?? "Page {page}").replace("{page}", String(currentPage)), url: `${SITE_URL}/${locale}/blog/page/${currentPage}/` },
    ]);

    // Pagination rel links
    const paginationLinks: { rel: string; href: string }[] = [];
    // rel="prev" — page 2 points to /blog/, page 3+ points to /blog/page/{N-1}/
    if (currentPage === 2) {
      paginationLinks.push({ rel: "prev", href: `${SITE_URL}/${locale}/blog/` });
    } else if (currentPage > 2) {
      paginationLinks.push({ rel: "prev", href: `${SITE_URL}/${locale}/blog/page/${currentPage - 1}/` });
    }
    // rel="next"
    if (currentPage < totalPages) {
      paginationLinks.push({ rel: "next", href: `${SITE_URL}/${locale}/blog/page/${currentPage + 1}/` });
    }

    return {
      meta: formatMetaTags(meta, {
        locale,
        noindex: true,
      }),
      links: [
        ...getAlternateLinks(pathname),
        getCanonicalLink(locale, pathname),
        ...paginationLinks,
      ],
      scripts: formatStructuredData([
        getOrganizationSchema({ locale }),
        getWebSiteSchema(locale),
        breadcrumbSchema,
        getCollectionPageSchema({
          name: `${msgs["breadcrumbs.blog"] ?? "Blog"} — ${(msgs["breadcrumbs.page"] ?? "Page {page}").replace("{page}", String(currentPage))} | Better I18N`,
          description: meta.description || "Latest updates, tutorials, and insights about internationalization and localization.",
          url: `${SITE_URL}/${locale}/blog/page/${currentPage}/`,
          inLanguage: locale,
        }),
      ]),
    };
  },
  component: PaginatedBlogPage,
  notFoundComponent: PaginatedBlogNotFound,
});

function PaginatedBlogPage() {
  const { posts, locale, totalPages, currentPage } = Route.useLoaderData();
  const t = useT("blog");

  return (
    <div className="bg-white">
      <Header className="bg-white" />
      <main className="py-16">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          {/* Header */}
          <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10 sm:mb-16">
            <div className="max-w-2xl">
              <h1 className="font-display text-3xl/[1.1] font-medium tracking-[-0.02em] text-mist-950 sm:text-4xl/[1.1]">
                {t("title", { defaultValue: "Blog" })}
              </h1>
              <p className="mt-4 text-lg/8 text-mist-700">
                {t("subtitle", {
                  defaultValue:
                    "Latest updates, tutorials, and insights about internationalization.",
                })}
              </p>
            </div>
            <Link
              to="/$locale"
              params={{ locale }}
              className="inline-flex items-center gap-1 text-sm font-medium text-mist-700 hover:text-mist-950 shrink-0"
            >
              {t("backToHome", { defaultValue: "Back to home" })}
              <SpriteIcon name="arrow-right" className="w-4 h-4" />
            </Link>
          </div>

          {/* Posts Grid */}
          {posts?.length > 0 ? (
            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
              {posts.map((post: BlogPostListItem) => (
                <BlogCard key={post.slug} post={post} locale={locale} />
              ))}
            </div>
          ) : (
            <div className="rounded-xl bg-mist-950/[0.025] p-12 text-center">
              <div className="mx-auto max-w-md">
                <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-mist-100 flex items-center justify-center">
                  <IconPageText className="h-6 w-6 text-mist-400" />
                </div>
                <h3 className="text-base font-medium text-mist-950">
                  {t("noPosts.title", { defaultValue: "No posts yet" })}
                </h3>
                <p className="mt-2 text-sm text-mist-600">
                  {t("noPosts.description", {
                    defaultValue: "Check back soon for new content!",
                  })}
                </p>
              </div>
            </div>
          )}

          {/* Pagination */}
          {posts?.length > 0 && (
            <Pagination
              currentPage={currentPage}
              totalPages={totalPages}
              locale={locale}
            />
          )}
        </div>
      </main>
      <RelatedPages currentPage="blog" locale={locale} variant="educational" />
      <Footer />
    </div>
  );
}

function PaginatedBlogNotFound() {
  const t = useT("blog");
  const { locale } = Route.useParams();

  return (
    <div className="bg-white">
      <Header className="bg-white" />
      <main className="py-24 sm:py-32">
        <div className="mx-auto max-w-2xl px-6 text-center">
          <h1 className="font-display text-3xl/[1.1] font-medium tracking-[-0.02em] text-mist-950 sm:text-4xl/[1.1]">
            {t("notFound.title", { defaultValue: "Page not found" })}
          </h1>
          <p className="mt-4 text-lg text-mist-600">
            {t("notFound.description", {
              defaultValue: "The page you're looking for doesn't exist.",
            })}
          </p>
          <Link
            to="/$locale/blog"
            params={{ locale }}
            className="mt-8 inline-flex items-center gap-2 rounded-full bg-mist-950 px-5 py-2.5 text-sm font-medium text-white hover:bg-mist-800 transition-colors"
          >
            {t("backToBlog", { defaultValue: "Back to Blog" })}
          </Link>
        </div>
      </main>
      <Footer />
    </div>
  );
}
