import { notFound } from 'next/navigation';
import Link from 'next/link';
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import { getArticle } from '@/lib/engine';
import { renderMarkdown, formatDate } from '@/lib/markdown';
import { Clock, ArrowLeft } from 'lucide-react';

export const revalidate = 60;

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const article = await getArticle(slug);
  if (!article) return { title: 'Статья не найдена' };
  return {
    title: article.seo_title || article.title,
    description: article.seo_descr || article.excerpt,
    openGraph: {
      title: article.title,
      description: article.excerpt,
      type: 'article',
      publishedTime: article.published_at,
      tags: article.tags || [],
    },
  };
}

export default async function ArticlePage({ params }) {
  const { slug } = await params;
  const article = await getArticle(slug);
  if (!article) notFound();

  // Убираю H1 из контента — он уже идёт в заголовке страницы
  const contentWithoutH1 = article.content.replace(/^#\s+.+$/m, '').trim();
  const html = renderMarkdown(contentWithoutH1);

  return (
    <>
      <Header />
      <article className="container-narrow pt-10 pb-16">
        <Link href="/" className="btn-ghost text-sm mb-6 -ml-2">
          <ArrowLeft className="w-4 h-4" /> Все статьи
        </Link>

        <div className="flex flex-wrap items-center gap-2 mb-4">
          {(article.tags || []).map(t => (
            <Link key={t} href={`/tag/${encodeURIComponent(t)}`} className="tag">#{t}</Link>
          ))}
        </div>

        <h1 className="font-serif text-3xl sm:text-5xl font-bold leading-tight mb-5 tracking-tight">
          {article.title}
        </h1>

        <div className="flex items-center gap-4 text-sm text-mute pb-8 mb-8 border-b border-border/60">
          <span>{article.author}</span>
          <span>·</span>
          <span>{formatDate(article.published_at)}</span>
          {article.reading_time && (
            <>
              <span>·</span>
              <span className="inline-flex items-center gap-1">
                <Clock className="w-3.5 h-3.5" /> {article.reading_time} мин чтения
              </span>
            </>
          )}
        </div>

        <div
          className="prose prose-invert prose-lg max-w-none font-serif prose-headings:font-sans"
          dangerouslySetInnerHTML={{ __html: html }}
        />

        <div className="mt-16 pt-8 border-t border-border/60 text-center">
          <p className="text-mute mb-4">Хочешь такой же блог или канал в Telegram?</p>
          <a href="https://app.zeropost.ru" className="btn-primary">
            Открыть ZeroPost
          </a>
        </div>
      </article>
      <Footer />
    </>
  );
}