import { createFileRoute } from "@tanstack/react-router";
import { SpriteIcon, type SpriteIconName } from "@/components/SpriteIcon";
import { MarketingLayout } from "@/components/MarketingLayout";
import { getPageHead, getEducationalPageStructuredData, formatStructuredData, createPageLoader } from "@/lib/page-seo";
import { getHowToSchema } from "@/lib/structured-data";
import { useTranslations } from "@better-i18n/use-intl";
import { RelatedPages } from "@/components/RelatedPages";
import {
  IconCalendar1,
  IconTranslate,
  IconImages1,
  IconFiles,
} from "@central-icons-react/round-outlined-radius-2-stroke-2";

export const Route = createFileRoute("/$locale/what-is")({
  loader: createPageLoader(["marketing.whatIsPage"]),
  head: ({ loaderData }) => {
    const messages = loaderData?.messages || {};
    const locale = loaderData?.locale || "en";

    const howItWorksNs = (messages as Record<string, unknown>)?.marketing as
      | Record<string, unknown>
      | undefined;
    const whatIsPageNs = howItWorksNs?.whatIsPage as Record<string, unknown> | undefined;
    const howItWorks = whatIsPageNs?.howItWorks as Record<string, Record<string, string>> | undefined;

    const stepKeys = ["step1", "step2", "step3", "step4"];
    const howToSteps = howItWorks
      ? stepKeys
          .filter((key) => howItWorks[key]?.title && howItWorks[key]?.description)
          .map((key) => ({
            name: howItWorks[key].title,
            text: howItWorks[key].description,
          }))
      : [];

    const seoNs = whatIsPageNs?.seo as Record<string, any> | undefined;
    const structuredTitle = seoNs?.structuredDataTitle || "What is i18n? Internationalization & Localization Guide";
    const structuredDescription = seoNs?.structuredDataDescription || "Learn the difference between internationalization (i18n) and localization (l10n). Covers key concepts, a comparison table, and how to get started.";

    const educationalScripts = getEducationalPageStructuredData({
      title: structuredTitle,
      description: structuredDescription,
      url: `https://better-i18n.com/${locale}/what-is`,
      locale,
    });

    const howToScript = howToSteps.length > 0
      ? formatStructuredData(getHowToSchema({
          name: "How to Internationalize Your Application with Better I18N",
          description: "Step-by-step guide to setting up internationalization using Better I18N.",
          steps: howToSteps,
          totalTime: "PT15M",
          inLanguage: locale,
        }))
      : [];

    return getPageHead({
      messages,
      locale,
      pageKey: "whatIs",
      pathname: "/what-is",
      customStructuredData: [...educationalScripts, ...howToScript],
    });
  },
  component: WhatIsPage,
});

const COMPARISON_ROW_KEYS = [
  "fullName",
  "scope",
  "timing",
  "focus",
  "who",
  "example",
] as const;

const COVERS_ITEMS = [
  { icon: IconImages1, key: "ui" },
  { icon: IconCalendar1, key: "dateTime" },
  { icon: "code-brackets", key: "encoding" },
  { icon: "settings-gear", key: "numbers" },
  { icon: IconFiles, key: "content" },
  { icon: IconTranslate, key: "plurals" },
] as const;

function WhatIsPage() {
  const t = useTranslations("marketing.whatIsPage");
  const { locale } = Route.useParams();
  const currentLocale = locale || "en";

  const benefits = [
    {
      icon: "rocket",
      titleKey: "benefits.speed.title",
      descKey: "benefits.speed.description",
    },
    {
      icon: "sparkles-soft",
      titleKey: "benefits.ai.title",
      descKey: "benefits.ai.description",
    },
    {
      icon: "github",
      titleKey: "benefits.git.title",
      descKey: "benefits.git.description",
    },
  ];

  return (
    <MarketingLayout showCTA={true}>
      {/* Hero Section */}
      <section className="py-16 sm:py-24">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-mist-100 text-mist-700 text-sm font-medium mb-6">
              <SpriteIcon name="globe" className="size-4" />
              {t("hero.badge")}
            </div>
            <h1 className="font-display text-4xl/[1.1] font-medium tracking-[-0.02em] text-mist-950 sm:text-5xl/[1.1] lg:text-6xl/[1.1]">
              {t("hero.title")}
              <span className="block text-mist-600">{t("hero.titleHighlight")}</span>
            </h1>
            <p className="mt-6 text-lg/8 text-mist-700 max-w-2xl">
              {t("hero.subtitle")}
            </p>
          </div>
        </div>
      </section>

      {/* What Does i18n Mean? */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-start">
            <div>
              <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl mb-6">
                {t("i18nDef.title")}
              </h2>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("i18nDef.paragraph1")}
              </p>
              <p className="text-mist-700 leading-relaxed">
                {t("i18nDef.paragraph2")}
              </p>
            </div>
            <div className="mt-10 lg:mt-0 p-8 rounded-2xl bg-mist-50 border border-mist-100">
              <h3 className="text-lg font-medium text-mist-950 mb-4">{t("i18nDef.etymologyTitle")}</h3>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("i18nDef.etymology")}
              </p>
              <div className="p-4 rounded-xl bg-white border border-mist-200">
                <code className="text-sm text-mist-900">i18n = i + (18 letters) + n</code>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* What Does l10n Mean? */}
      <section className="py-16 bg-mist-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-start">
            <div>
              <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl mb-6">
                {t("l10nDef.title")}
              </h2>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("l10nDef.paragraph1")}
              </p>
              <p className="text-mist-700 leading-relaxed">
                {t("l10nDef.paragraph2")}
              </p>
            </div>
            <div className="mt-10 lg:mt-0 p-8 rounded-2xl bg-white border border-mist-200">
              <h3 className="text-lg font-medium text-mist-950 mb-4">{t("l10nDef.etymologyTitle")}</h3>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("l10nDef.etymology")}
              </p>
              <div className="p-4 rounded-xl bg-mist-50 border border-mist-100">
                <code className="text-sm text-mist-900">l10n = l + (10 letters) + n</code>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Comparison Table */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="text-center mb-12">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
              {t("comparison.title")}
            </h2>
            <p className="mt-3 text-mist-700 max-w-2xl mx-auto">
              {t("comparison.subtitle")}
            </p>
          </div>
          <div className="overflow-x-auto">
            <table className="w-full border-collapse text-left">
              <thead>
                <tr className="border-b-2 border-mist-200">
                  <th className="py-4 px-6 text-sm font-medium text-mist-600 w-1/5">
                    {t("comparison.header.aspect")}
                  </th>
                  <th className="py-4 px-6 text-sm font-medium text-mist-950 w-2/5">
                    {t("comparison.header.i18n")}
                  </th>
                  <th className="py-4 px-6 text-sm font-medium text-mist-950 w-2/5">
                    {t("comparison.header.l10n")}
                  </th>
                </tr>
              </thead>
              <tbody>
                {COMPARISON_ROW_KEYS.map((rowKey) => (
                  <tr key={rowKey} className="border-b border-mist-100 even:bg-mist-50/50">
                    <td className="py-4 px-6 text-sm font-medium text-mist-700">
                      {t(`comparison.rows.${rowKey}.label`)}
                    </td>
                    <td className="py-4 px-6 text-sm text-mist-700">
                      {t(`comparison.rows.${rowKey}.i18n`)}
                    </td>
                    <td className="py-4 px-6 text-sm text-mist-700">
                      {t(`comparison.rows.${rowKey}.l10n`)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* What Does Internationalization Cover? */}
      <section className="py-16 bg-mist-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="text-center mb-12">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
              {t("covers.title")}
            </h2>
            <p className="mt-3 text-mist-700 max-w-2xl mx-auto">
              {t("covers.subtitle")}
            </p>
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {COVERS_ITEMS.map((item) => (
              <div key={item.key} className="p-6 rounded-xl bg-white border border-mist-200">
                <div className="size-10 rounded-lg bg-mist-100 flex items-center justify-center text-mist-700 mb-4">
                  {typeof item.icon === "string" ? <SpriteIcon name={item.icon} className="size-5" /> : <item.icon className="size-5" />}
                </div>
                <h3 className="text-base font-medium text-mist-950 mb-2">
                  {t(`covers.${item.key}.title`)}
                </h3>
                <p className="text-sm text-mist-700 leading-relaxed">
                  {t(`covers.${item.key}.description`)}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How Better I18N Simplifies the Process */}
      <section className="py-16 bg-white">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
            <div>
              <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl mb-6">
                {t("about.title")}
              </h2>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("about.paragraph1")}
              </p>
              <p className="text-mist-700 leading-relaxed mb-4">
                {t("about.paragraph2")}
              </p>
              <p className="text-mist-700 leading-relaxed">
                {t("about.paragraph3")}
              </p>
            </div>
            <div className="mt-10 lg:mt-0">
              <div className="grid grid-cols-1 gap-4">
                {benefits.map((benefit) => (
                  <div
                    key={benefit.titleKey}
                    className="p-5 rounded-xl bg-mist-50 border border-mist-100 flex items-start gap-4"
                  >
                    <div className="size-10 rounded-lg bg-mist-100 flex items-center justify-center text-mist-700 shrink-0">
                      <SpriteIcon name={benefit.icon as SpriteIconName} className="size-5" />
                    </div>
                    <div>
                      <h3 className="text-base font-medium text-mist-950">
                        {t(benefit.titleKey)}
                      </h3>
                      <p className="mt-1 text-sm text-mist-600">
                        {t(benefit.descKey)}
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases */}
      <section className="py-16 bg-mist-50">
        <div className="mx-auto max-w-7xl px-6 lg:px-10">
          <div className="text-center mb-12">
            <h2 className="font-display text-2xl font-medium text-mist-950 sm:text-3xl">
              {t("useCases.title")}
            </h2>
            <p className="mt-3 text-mist-700">
              {t("useCases.subtitle")}
            </p>
          </div>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <UseCaseCard title={t("useCases.saas.title")} description={t("useCases.saas.description")} />
            <UseCaseCard title={t("useCases.mobile.title")} description={t("useCases.mobile.description")} />
            <UseCaseCard title={t("useCases.ecommerce.title")} description={t("useCases.ecommerce.description")} />
          </div>
        </div>
      </section>

      {/* Related Pages */}
      <RelatedPages currentPage="what-is" locale={currentLocale} variant="mixed" />
    </MarketingLayout>
  );
}

function UseCaseCard({ title, description }: { title: string; description: string }) {
  return (
    <div className="p-6 rounded-xl bg-white border border-mist-200">
      <h3 className="text-base font-medium text-mist-950 mb-2">{title}</h3>
      <p className="text-sm text-mist-700 leading-relaxed">{description}</p>
    </div>
  );
}
