import { Metadata } from "next";
import Link from "next/link";
import ReactMarkdown from "react-markdown";
import { fetchPostDetail, fetchComments } from "@/lib/api";
import CommentSection from "@/components/CommentSection";
import PostActions from "@/components/PostActions";
import LikeButton from "@/components/LikeButton";

interface PageProps {
  params: Promise<{ id: string }>;
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { id } = await params;
  try {
    const { post } = await fetchPostDetail(id);
    return {
      title: `${post.title} - 姜十三论坛`,
      description: post.content.slice(0, 160),
      openGraph: {
        title: post.title,
        description: post.content.slice(0, 160),
        type: "article",
      },
    };
  } catch {
    return { title: "帖子不存在 - 姜十三论坛" };
  }
}

export default async function PostDetailPage({ params }: PageProps) {
  const { id } = await params;
  const { post } = await fetchPostDetail(id);
  const { comments } = await fetchComments(id);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "DiscussionForumPosting",
    headline: post.title,
    articleBody: post.content,
    datePublished: post.created_at,
    dateModified: post.updated_at,
    author: {
      "@type": "Person",
      name: post.user.nickname,
    },
    commentCount: post.comment_count,
    interactionStatistic: {
      "@type": "InteractionCounter",
      interactionType: { "@type": "ReadAction" },
      userInteractionCount: post.view_count,
    },
  };

  return (
    <article className="max-w-3xl mx-auto">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <nav className="text-sm mb-4" style={{ color: "var(--text-secondary)" }}>
        <Link href="/" className="hover:underline">首页</Link>
        <span className="mx-2">/</span>
        <Link href={`/board/${post.board.id}`} className="hover:underline">{post.board.name}</Link>
      </nav>

      <div className="flex items-center gap-2 mb-3">
        {post.pinned > 0 && (
          <span className="text-xs px-2 py-0.5 rounded bg-amber-100 text-amber-700">置顶</span>
        )}
        {post.recommended && (
          <span className="text-xs px-2 py-0.5 rounded bg-rose-100 text-rose-700">推荐</span>
        )}
      </div>
      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>

      <div className="flex items-center justify-between gap-4 mb-6 pb-4 border-b" style={{ borderColor: "var(--border)" }}>
        <div className="flex items-center gap-4" style={{ color: "var(--text-secondary)" }}>
          <Link href={`/u/${post.user.id}`} className="hover:underline" style={{ color: "var(--primary)" }}>
            {post.user.nickname}
          </Link>
          <span>{new Date(post.created_at).toLocaleString("zh-CN")}</span>
          <span>👁 {post.view_count}</span>
          <span>💬 {post.comment_count}</span>
          <LikeButton postId={id} liked={post.liked} likeCount={post.like_count} />
        </div>
        <PostActions postId={id} authorId={post.user.id} pinned={post.pinned} recommended={post.recommended} />
      </div>

      <div className="prose-content mb-8" style={{ color: "var(--text)" }}>
        <ReactMarkdown>{post.content}</ReactMarkdown>
      </div>

      <CommentSection postId={id} comments={comments} />
    </article>
  );
}