import type { Metadata } from "next";
import { cache } from "react";
import parse from "html-react-parser";

import styles from "@/app/privacy-policy/privacy-policy.module.css";
import { fetchPostBySlug } from "@/services/blogActions";
import {
  loadPrivacyPolicy,
  sanitizePolicyHtml,
} from "@/lib/privacy-policy-content";

const POLICY_SLUG = "client-privacy-policy";
const FALLBACK_TITLE = "Client privacy policy";
const FALLBACK_DESCRIPTION =
  "How People for Research processes personal data for current, past and potential clients.";
const FALLBACK_IMAGE = "/global-assets/pfr-logo-og-client.svg";

export const revalidate = 60;

const getPrivacyPolicy = cache(() =>
  loadPrivacyPolicy(() =>
    fetchPostBySlug(POLICY_SLUG, { revalidate: 60, timeoutMs: 5000 }),
  ),
);

export async function generateMetadata(): Promise<Metadata> {
  const policy = await getPrivacyPolicy();
  const title = policy.meta_title || policy.title || FALLBACK_TITLE;
  const description =
    policy.meta_description || policy.excerpt || FALLBACK_DESCRIPTION;
  const openGraphImage =
    policy.og_image || policy.feature_image || FALLBACK_IMAGE;
  const twitterImage =
    policy.twitter_image ||
    policy.og_image ||
    policy.feature_image ||
    FALLBACK_IMAGE;

  return {
    title,
    description,
    alternates: {
      canonical: "/privacy-policy",
    },
    openGraph: {
      title: policy.og_title || title,
      description: policy.og_description || description,
      type: "website",
      url: "/privacy-policy",
      images: [
        {
          url: openGraphImage,
          alt: policy.feature_image_alt || title,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: policy.twitter_title || policy.og_title || title,
      description:
        policy.twitter_description || policy.og_description || description,
      images: twitterImage,
    },
  };
}

export default async function PrivacyPolicyPage() {
  const policy = await getPrivacyPolicy();

  return (
    <div className="min-h-screen bg-others-mistyGray py-12 font-noto text-lg dark:bg-jet">
      <h1 className="w-full ps-0 text-center font-inter text-4xl font-black tracking-tight text-black dark:text-white sm:ps-12 md:text-6xl">
        {policy.title}
      </h1>
      <article
        className={`${styles.policyContent} mx-auto max-w-4xl space-y-6 p-8 leading-7 text-black dark:text-white`}
      >
        {parse(sanitizePolicyHtml(policy.html))}
      </article>
    </div>
  );
}