import { createFileRoute, notFound, Link } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/react-start";
import { getMarketingPage, getMarketingPages, type MarketingPageListItem } from "@/lib/content";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { RelatedPages } from "@/components/RelatedPages";
import BlogContent from "@/components/blog/BlogContent";
import { IconArrowLeft } from "@central-icons-react/round-outlined-radius-2-stroke-2";
import { BackToHub } from "@/components/BackToHub";
import {
  SITE_URL,
  getAlternateLinks,
  getCanonicalLink,
  buildOgImageUrl,
  formatMetaTags,
  truncateTitle,
} from "@/lib/meta";
import { getLocaleTier } from "@/seo/locale-tiers";
import {
  getEducationalPageStructuredData,
  getBreadcrumbSchema,
  formatStructuredData,
} from "@/lib/page-seo";
import { useT } from "@/lib/i18n";
import { getMessages } from "@better-i18n/use-intl/server";
import { i18nConfig } from "@/i18n.config";

const loadFeaturePage = createServerFn({ method: "GET" })
  .inputValidator((data: { slug: string; locale: string }) => data)
  .handler(async ({ data }) => {
    return getMarketingPage(data.slug, data.locale);
  });

const loadRelatedFeatures = createServerFn({ method: "GET" })
  .inputValidator((data: { slug: string; locale: string }) => data)
  .handler(async ({ data }) => {
    const pages = await getMarketingPages(data.locale, "feature");
    return pages.filter((p) => p.slug !== data.slug).slice(0, 6);
  });

export const Route = createFileRoute("/$locale/features/$slug")({
  loader: async ({ params, context }) => {
    const [page, relatedFeatures, allMessages] = await Promise.all([
      loadFeaturePage({
        data: { slug: params.slug, locale: params.locale },
      }),
      loadRelatedFeatures({
        data: { slug: params.slug, locale: params.locale },
      }),
      getMessages({ project: i18nConfig.project, locale: context.locale }),
    ]);
    if (!page) {
      throw notFound();
    }
    const { filterMessages } = await import("@/lib/page-namespaces");
    const messages = filterMessages(allMessages, ["breadcrumbs"]);
    return { page, locale: params.locale, relatedFeatures, messages };
  },
  head: ({ loaderData }) => {
    const page = loaderData?.page;
    const locale = loaderData?.locale || "en";
    const pathname = `/features/${page?.slug || ""}`;
    const canonicalUrl = `${SITE_URL}/${locale}${pathname}/`;

    const dynamicOgImage = buildOgImageUrl("og", {
      title: page?.title || "Feature",
    });

    const excerpt = page?.excerpt || page?.heroSubtitle || "";

    const educationalScripts = getEducationalPageStructuredData({
      title: page?.title || "Feature",
      description: excerpt,
      url: canonicalUrl,
    });

    const msgs = (loaderData?.messages ?? {}) as Record<string, any>;
    const breadcrumbScripts = formatStructuredData(
      getBreadcrumbSchema([
        { name: msgs["breadcrumbs.home"] ?? "Home", url: `${SITE_URL}/${locale}/` },
        { name: msgs["breadcrumbs.features"] ?? "Features", url: `${SITE_URL}/${locale}/features/` },
        { name: page?.title || "Feature", url: canonicalUrl },
      ]),
    );

    const meta = {
      title: truncateTitle(`${page?.title || "Feature"} | Better I18N`),
      description: excerpt,
      ogTitle: page?.title || "Feature",
      ogDescription: excerpt,
      ogImage: dynamicOgImage,
      ogType: "website" as const,
      canonicalUrl,
    };

    const metaTags = formatMetaTags(meta, {
      locale,
      noindex: getLocaleTier(locale) === "tier3",
    });

    const keywordTags = page?.targetKeywords
      ? [{ name: "keywords", content: page.targetKeywords }]
      : [];

    return {
      meta: [...metaTags, ...keywordTags],
      links: [
        ...getAlternateLinks(pathname),
        getCanonicalLink(locale, pathname),
      ],
      scripts: [...educationalScripts, ...breadcrumbScripts],
    };
  },
  component: FeaturePageComponent,
  notFoundComponent: FeatureNotFound,
});

function FeaturePageComponent() {
  const { page, locale, relatedFeatures } = Route.useLoaderData();
  const t = useT("featuresPage");

  return (
    <div className="bg-white">
      <Header className="bg-white" />
      <BackToHub hub="features" locale={locale} />
      <main className="py-16">
        <article className="mx-auto max-w-4xl px-6 lg:px-10">
          {/* Hero */}
          <header className="mb-12">
            <span className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-mist-500 mb-4">
              {t("featureBadge", "Feature")}
            </span>
            <h1 className="font-display text-3xl/[1.1] font-medium tracking-[-0.02em] text-mist-950 sm:text-4xl/[1.1] lg:text-5xl/[1.1]">
              {page.title}
            </h1>
            {page.heroSubtitle && (
              <p className="mt-6 text-lg/8 text-mist-700 max-w-2xl">
                {page.heroSubtitle}
              </p>
            )}
          </header>

          {/* Content */}
          {page.bodyHtml && (
            <div className="min-w-0">
              <BlogContent
                html={page.bodyHtml}
                className="prose prose-lg max-w-none
                  prose-headings:font-display prose-headings:font-medium prose-headings:tracking-[-0.02em] prose-headings:text-mist-950
                  prose-p:text-mist-700 prose-p:leading-relaxed
                  prose-a:text-mist-950 prose-a:underline-offset-4 prose-a:decoration-mist-300 hover:prose-a:decoration-mist-500
                  prose-strong:text-mist-900 prose-strong:font-semibold
                  prose-code:text-mist-900 prose-code:bg-mist-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-normal prose-code:before:content-none prose-code:after:content-none
                  prose-blockquote:border-l-mist-300 prose-blockquote:text-mist-600 prose-blockquote:not-italic
                  prose-img:rounded-xl
                  prose-li:text-mist-700
                  prose-hr:border-mist-100"
              />
            </div>
          )}
        </article>

        {/* Related Features */}
        {relatedFeatures.length > 0 && (
          <div className="mx-auto max-w-7xl px-6 lg:px-10 mt-16">
            <h2 className="font-display text-2xl font-medium text-mist-950 mb-8">
              {t("exploreMore", "Explore more features")}
            </h2>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {relatedFeatures.map((feature: MarketingPageListItem) => (
                <Link
                  key={feature.slug}
                  to="/$locale/features/$slug"
                  params={{ locale, slug: feature.slug }}
                  className="group p-6 rounded-xl bg-mist-50 border border-mist-100 hover:border-mist-200 transition-colors"
                >
                  <h3 className="text-base font-medium text-mist-950 group-hover:text-mist-700 transition-colors">
                    {feature.title}
                  </h3>
                  {feature.heroSubtitle && (
                    <p className="mt-2 text-sm text-mist-600 leading-relaxed line-clamp-2">
                      {feature.heroSubtitle}
                    </p>
                  )}
                </Link>
              ))}
            </div>
          </div>
        )}
      </main>
      <RelatedPages currentPage="features" locale={locale} variant="for" />
      <Footer />
    </div>
  );
}

function FeatureNotFound() {
  const { locale } = Route.useParams();
  const t = useT("featuresPage");

  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", "Feature not found")}
          </h1>
          <p className="mt-4 text-lg text-mist-600">
            {t("notFound.description", "The feature page you're looking for doesn't exist.")}
          </p>
          <Link
            to="/$locale/features"
            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"
          >
            <IconArrowLeft className="w-4 h-4" />
            {t("allFeatures", "All Features")}
          </Link>
        </div>
      </main>
      <Footer />
    </div>
  );
}
