import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { publicApi } from '@/lib/services';
import { formatDate, resolveUploadUrl } from '@/lib/utils';
import { ContentView } from '@/components/front/ContentView';

export const revalidate = 60;

interface PageProps {
  params: { id: string };
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  try {
    const n = await publicApi.getNewsDetail(Number(params.id));
    return { title: n.title, description: n.intro ?? undefined };
  } catch {
    return { title: '新闻详情' };
  }
}

export default async function NewsDetailPage({ params }: PageProps) {
  let news;
  try {
    news = await publicApi.getNewsDetail(Number(params.id));
  } catch {
    notFound();
  }

  return (
    <article className="container-page py-12">
      <nav className="mb-4 text-sm text-gray-500">
        <Link href="/news" className="hover:text-brand-600">
          新闻资讯
        </Link>
        <span className="mx-2">/</span>
        <span>{news.title}</span>
      </nav>

      <header className="border-b border-gray-100 pb-4">
        <h1 className="text-2xl font-bold text-gray-900 sm:text-3xl">
          {news.title}
        </h1>
        <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500">
          {news.category?.name && (
            <span className="rounded bg-brand-50 px-2 py-0.5 text-brand-700">
              {news.category.name}
            </span>
          )}
          <span>发布时间：{formatDate(news.createdAt, 'YYYY-MM-DD HH:mm')}</span>
          {news.isTop === 1 && (
            <span className="text-red-600">置顶</span>
          )}
        </div>
      </header>

      {news.cover && (
        <div className="my-6 overflow-hidden rounded-lg">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={resolveUploadUrl(news.cover)}
            alt={news.title}
            className="max-h-96 w-full object-cover"
          />
        </div>
      )}

      <ContentView content={news.content} className="mt-4 max-w-4xl" />
    </article>
  );
}