import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import ReactMarkdown from "react-markdown";
import { ChevronRight, Megaphone } from "lucide-react";
import { fetchAnnouncementDetail } from "@/lib/api";
import { formatDate } from "@/lib/format";

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

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { id } = await params;
  const data = await fetchAnnouncementDetail(id).catch(() => null);
  if (!data) return { title: "公告不存在" };
  return {
    title: data.announcement.title,
    description: `站点公告 · ${data.announcement.tag}`,
    openGraph: {
      title: data.announcement.title,
      description: `站点公告 · ${data.announcement.tag}`,
      type: "article",
      publishedTime: data.announcement.created_at,
    },
  };
}

export default async function AnnouncementPage({ params }: PageProps) {
  const { id } = await params;
  const data = await fetchAnnouncementDetail(id).catch(() => null);
  if (!data) notFound();

  const a = data.announcement;
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: a.title,
    datePublished: a.created_at,
    dateModified: a.updated_at,
    articleSection: "站点公告",
    keywords: a.tag,
  };

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

      {/* 面包屑 */}
      <nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
        <Link href="/" className="hover:text-[var(--accent)] transition-colors">
          首页
        </Link>
        <ChevronRight size={13} />
        <span style={{ color: "var(--accent)" }}>站点公告</span>
      </nav>

      <article className="panel p-6 sm:p-8">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
          <time className="meta text-[12px] tabular-nums" dateTime={a.created_at}>
            {formatDate(a.created_at)}
          </time>
        </div>

        <h1
          className="mt-3.5 text-[24px] sm:text-[28px] font-extrabold leading-snug tracking-tight"
          style={{ color: "var(--ink)" }}
        >
          {a.title}
        </h1>

        <div
          className="mt-5 pt-5"
          style={{ borderTop: "1px solid var(--line)" }}
        >
          <div className="prose-content">
            <ReactMarkdown>{a.content}</ReactMarkdown>
          </div>
        </div>
      </article>

      <div className="mt-5 flex items-center gap-2 text-[12.5px] meta">
        <Megaphone size={14} style={{ color: "var(--accent)" }} />
        <span>由站点管理团队发布</span>
        <Link
          href="/"
          className="ml-auto font-semibold transition-colors hover:text-[var(--accent)]"
          style={{ color: "var(--accent)" }}
        >
          返回首页
        </Link>
      </div>
    </div>
  );
}