import { lazy, Suspense } from 'react';
import { useTranslation } from 'react-i18next';
import { CheckIcon } from '../ui/icons/CheckIcon';
import { LogoIcon } from '../ui/icons/LogoIcon';
import HomeFinalCta from '../home/HomeFinalCta';
import Footer from '../ui/Footer';
import { usePageMeta } from '../../hooks/usePageMeta';
import {
  getLocalizedSeoLandingPage,
  type SeoFaq,
  type SeoLandingKey,
  type SeoLink,
  type SeoSection,
} from '../../lib/seoLandingPages';
import { safeJsonLd } from '../../lib/json-ld';

const ProductShowcase = lazy(() => import('../home/ProductShowcase'));

function ProductShowcaseFallback() {
  return (
    <div className="mx-auto min-h-[28rem] max-w-6xl rounded-lg bg-navy-900" aria-hidden="true" />
  );
}

function JsonLd({ data }: { data: unknown }) {
  return (
    <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: safeJsonLd(data) }} />
  );
}

function FaqJsonLd({ faq }: { faq: SeoFaq[] }) {
  return (
    <JsonLd
      data={{
        '@context': 'https://schema.org',
        '@type': 'FAQPage',
        mainEntity: faq.map((item) => ({
          '@type': 'Question',
          name: item.question,
          acceptedAnswer: {
            '@type': 'Answer',
            text: item.answer,
          },
        })),
      }}
    />
  );
}

function LinkGrid({ links }: { links: SeoLink[] }) {
  return (
    <div className="grid gap-3 md:grid-cols-3">
      {links.map((link) => (
        <a
          key={link.path}
          href={link.path}
          className="rounded-lg border border-warm-200 bg-white p-4 transition-colors hover:border-teal-300 hover:bg-teal-50 dark:border-warm-700 dark:bg-warm-800 dark:hover:border-teal-500/60 dark:hover:bg-teal-950/30"
        >
          <h3 className="font-bold text-navy-950 dark:text-warm-100">{link.label}</h3>
          <p className="mt-2 text-sm leading-relaxed text-warm-600 dark:text-warm-300">
            {link.description}
          </p>
        </a>
      ))}
    </div>
  );
}

function SectionGrid({ sections }: { sections: SeoSection[] }) {
  return (
    <div className="grid gap-5 md:grid-cols-2">
      {sections.map((section) => (
        <article
          key={section.title}
          className="rounded-lg border border-warm-200 bg-white p-6 dark:border-warm-700 dark:bg-warm-800"
        >
          <h2 className="text-xl font-bold">{section.title}</h2>
          <p className="mt-3 leading-relaxed text-warm-700 dark:text-warm-300">{section.body}</p>
          {section.bullets && (
            <ul className="mt-4 space-y-2">
              {section.bullets.map((bullet) => (
                <li key={bullet} className="flex gap-2 text-sm text-warm-700 dark:text-warm-300">
                  <CheckIcon className="mt-0.5 h-4 w-4 shrink-0 text-teal-600 dark:text-teal-400" />
                  <span>{bullet}</span>
                </li>
              ))}
            </ul>
          )}
        </article>
      ))}
    </div>
  );
}

export default function SeoLandingPage({
  pageKey,
  onOpenDashboard,
}: {
  pageKey: SeoLandingKey;
  onOpenDashboard: () => void;
}) {
  const { t, i18n } = useTranslation();
  const page = getLocalizedSeoLandingPage(pageKey, i18n.language);
  usePageMeta(page.metaTitle, page.metaDescription);

  return (
    <main className="flex-1 overflow-y-auto bg-warm-50 text-navy-950 dark:bg-navy-950 dark:text-warm-100">
      <FaqJsonLd faq={page.faq} />

      <section className="bg-navy-950 text-white">
        <div className="mx-auto max-w-6xl px-6 py-16 md:px-10 md:py-20">
          <nav className="mb-6 text-sm font-medium text-warm-400" aria-label={t('seo.breadcrumb')}>
            <a href="/" className="hover:text-teal-200">
              {t('mobileMenu.home')}
            </a>
            <span className="mx-2">/</span>
            <span className="text-warm-200">{page.eyebrow}</span>
          </nav>
          <p className="mb-4 text-sm font-semibold uppercase tracking-wide text-teal-300">
            {page.eyebrow}
          </p>
          <h1 className="max-w-4xl text-3xl font-extrabold leading-tight md:text-5xl">
            {page.title}
          </h1>
          <p className="mt-6 max-w-3xl text-lg leading-relaxed text-warm-300">{page.intro}</p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <button
              onClick={onOpenDashboard}
              className="rounded-lg border border-[#d27a11] bg-[#f09a22] px-6 py-3 font-semibold text-navy-950 shadow-lg shadow-[#7a3905]/25 transition-colors hover:bg-[#df8614]"
            >
              {page.cta}
            </button>
            <a
              href="/data-sources"
              className="rounded-lg border-2 border-teal-400 px-6 py-[10px] text-center font-semibold text-teal-300 transition-colors hover:bg-teal-400/10"
            >
              {t('seo.reviewDataSources')}
            </a>
          </div>
        </div>
      </section>

      <section className="bg-navy-950 px-6 py-12 md:px-10 md:py-16">
        <div className="mx-auto max-w-6xl">
          <Suspense fallback={<ProductShowcaseFallback />}>
            <ProductShowcase className="mx-auto" />
          </Suspense>
        </div>
      </section>

      <section className="mx-auto grid max-w-6xl gap-8 px-6 py-12 md:grid-cols-[0.85fr_1.15fr] md:px-10 md:py-16">
        <div>
          <div className="inline-flex items-center gap-2 rounded-md border border-teal-200 bg-teal-50 px-3 py-1.5 text-sm font-semibold text-teal-700 dark:border-teal-400/30 dark:bg-teal-400/10 dark:text-teal-200">
            <LogoIcon className="h-4 w-4" />
            Perfect Postcode
          </div>
          <h2 className="mt-5 text-2xl font-bold md:text-3xl">{t('seo.whatYouCanCompare')}</h2>
          <p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
            {t('seo.whatYouCanCompareDesc')}
          </p>
        </div>
        <div className="grid gap-3">
          {page.points.map((point) => (
            <div
              key={point}
              className="flex gap-3 rounded-lg border border-warm-200 bg-white p-4 dark:border-warm-700 dark:bg-warm-800"
            >
              <CheckIcon className="mt-0.5 h-5 w-5 shrink-0 text-teal-600 dark:text-teal-400" />
              <p className="leading-relaxed text-warm-700 dark:text-warm-300">{point}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
        <div className="mb-7 max-w-3xl">
          <h2 className="text-2xl font-bold md:text-3xl">{t('seo.howToUseIt')}</h2>
          <p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
            {t('seo.howToUseItDesc')}
          </p>
        </div>
        <SectionGrid sections={page.workflows} />
      </section>

      <section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
        <SectionGrid sections={page.sections} />
      </section>

      <section className="bg-white py-14 dark:bg-navy-900">
        <div className="mx-auto max-w-6xl px-6 md:px-10">
          <div className="mb-7 max-w-3xl">
            <h2 className="text-2xl font-bold md:text-3xl">{t('seo.methodAndLimitations')}</h2>
            <p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
              {t('seo.methodAndLimitationsDesc')}
            </p>
          </div>
          <SectionGrid sections={page.methodology} />
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-6 py-14 md:px-10">
        <div className="mb-7 max-w-3xl">
          <h2 className="text-2xl font-bold md:text-3xl">{t('seo.questionsBuyersAsk')}</h2>
        </div>
        <div className="grid gap-4">
          {page.faq.map((item) => (
            <details
              key={item.question}
              className="rounded-lg border border-warm-200 bg-white p-5 dark:border-warm-700 dark:bg-warm-800"
            >
              <summary className="cursor-pointer font-bold">{item.question}</summary>
              <p className="mt-3 leading-relaxed text-warm-700 dark:text-warm-300">{item.answer}</p>
            </details>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
        <div className="mb-7 max-w-3xl">
          <h2 className="text-2xl font-bold md:text-3xl">{t('seo.relatedGuides')}</h2>
          <p className="mt-3 leading-relaxed text-warm-600 dark:text-warm-300">
            {t('seo.relatedGuidesDesc')}
          </p>
        </div>
        <LinkGrid links={page.relatedLinks} />
      </section>

      <section className="mx-auto max-w-6xl px-6 pb-16 md:px-10">
        <HomeFinalCta
          onOpenDashboard={onOpenDashboard}
          trackingLocation={`seo_${pageKey}_bottom`}
        />
      </section>
      <Footer />
    </main>
  );
}