"use client";
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { usePluginOverrides, useBasePath } from '@btst/stack/context';
import { formatDate } from 'date-fns';
import { useSuspensePost, useNextPreviousPosts, useRecentPosts } from '../../hooks/blog-hooks.mjs';
import { EmptyList } from '../shared/empty-list.mjs';
import { MarkdownContent } from '../shared/markdown-content.mjs';
import { PageHeader } from '../shared/page-header.mjs';
import { PageWrapper } from '../shared/page-wrapper.mjs';
import { DefaultImage, DefaultLink } from '../shared/defaults.mjs';
import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
import { PostNavigation } from '../shared/post-navigation.mjs';
import { RecentPostsCarousel } from '../shared/recent-posts-carousel.mjs';
import { Badge } from '../../../../../../../ui/src/components/badge.mjs';
import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
import { OnThisPageSelect, OnThisPage } from '../shared/on-this-page.mjs';
import { useRegisterPageAIContext } from '@btst/stack/plugins/ai-chat/client/context';

function PostPage({ slug }) {
  const overrides = usePluginOverrides("blog", {
    Image: DefaultImage,
    localization: BLOG_LOCALIZATION
  });
  const { Image, localization } = overrides;
  useRouteLifecycle({
    routeName: "post",
    context: {
      path: `/blog/${slug}`,
      params: { slug },
      isSSR: typeof window === "undefined"
    },
    overrides,
    beforeRenderHook: (overrides2, context) => {
      if (overrides2.onBeforePostPageRendered) {
        return overrides2.onBeforePostPageRendered(slug, context);
      }
      return true;
    }
  });
  const { post } = useSuspensePost(slug ?? "");
  const { previousPost, nextPost, ref } = useNextPreviousPosts(
    post?.createdAt ?? /* @__PURE__ */ new Date(),
    {
      enabled: !!post
    }
  );
  const { recentPosts, ref: recentPostsRef } = useRecentPosts({
    limit: 5,
    excludeSlug: slug,
    enabled: !!post
  });
  useRegisterPageAIContext(
    post ? {
      routeName: "blog-post",
      pageDescription: `Blog post: "${post.title}"
Author: ${post.authorId ?? "Unknown"}

${post.content ?? ""}`.slice(
        0,
        16e3
      ),
      suggestions: [
        "Summarize this post",
        "What are the key takeaways?",
        "Explain this in simpler terms"
      ]
    } : null
  );
  if (!slug || !post) {
    return /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsx(EmptyList, { message: localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION }) });
  }
  return /* @__PURE__ */ jsx(PageWrapper, { className: "gap-0 px-4 lg:px-2 py-0 pb-18", testId: "post-page", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start w-full", children: [
    /* @__PURE__ */ jsx("div", { className: "w-44 shrink-0 hidden xl:flex mr-auto" }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center flex-1 mx-auto w-full max-w-4xl min-w-0", children: [
      /* @__PURE__ */ jsx(OnThisPageSelect, { markdown: post.content }),
      /* @__PURE__ */ jsx(
        PageHeader,
        {
          title: post.title,
          description: post.excerpt,
          childrenTop: /* @__PURE__ */ jsx(PostHeaderTop, { post })
        }
      ),
      post.image && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 my-6 aspect-video w-full relative", children: /* @__PURE__ */ jsx(
        Image,
        {
          src: post.image,
          alt: post.title,
          className: "object-cover transition-transform duration-200"
        }
      ) }),
      /* @__PURE__ */ jsx("div", { className: "w-full px-3", children: /* @__PURE__ */ jsx(MarkdownContent, { markdown: post.content }) }),
      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 w-full", children: [
        /* @__PURE__ */ jsx(
          PostNavigation,
          {
            previousPost,
            nextPost,
            ref
          }
        ),
        /* @__PURE__ */ jsx(RecentPostsCarousel, { posts: recentPosts, ref: recentPostsRef })
      ] })
    ] }),
    /* @__PURE__ */ jsx(OnThisPage, { markdown: post.content })
  ] }) });
}
function PostHeaderTop({ post }) {
  const { Link } = usePluginOverrides("blog", {
    Link: DefaultLink
  });
  const basePath = useBasePath();
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-center gap-2 flex-wrap mt-8", children: [
    /* @__PURE__ */ jsx("span", { className: "font-light text-muted-foreground text-sm", children: formatDate(post.createdAt, "MMMM d, yyyy") }),
    post.tags && post.tags.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: post.tags.map((tag) => /* @__PURE__ */ jsx(Link, { href: `${basePath}/blog/tag/${tag.slug}`, children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag.name }) }, tag.id)) })
  ] });
}

export { PostPage };
